sheptikhinv/timers
1
0
Fork 0
mirror of https://github.com/sheptikhinv/timers.git synced 2026-02-07 15:51:37 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

god bless relative sizing

Browse source
This commit is contained in:
Вячеслав 2025-06-14 19:52:37 +05:00
parent 7c553e292d
commit df48306ef7
4 changed files with 30 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/Button/Button.module.css
View file

@ -1,15 +1,15 @@
button.button { button.button {
min-width: 48px; min-width: 4.8rem;
min-height: 48px; min-height: 4.8rem;
border-radius: 8px; border-radius: 0.8rem;
background-color: #AB71ED; background-color: #AB71ED;
color: #FFFFFF; color: #FFFFFF;
font-size: 16px; font-size: 1.6rem;
padding: 10px; padding: 1.0rem;
text-align: center; text-align: center;
outline: none; outline: none;
border: none; border: none;
line-height: 16px; line-height: 1.6rem;
font-weight: bold; font-weight: bold;
font-family: 'Montserrat'; font-family: 'Montserrat';
} }

30
src/components/Timer/Timer.module.css
View file

@ -2,9 +2,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 16px; border-radius: 1.6rem;
gap: 10px; gap: 1.0rem;
padding: 10px; padding: 1.0rem;
} }
.top_buttons { .top_buttons {
@ -16,27 +16,27 @@
.minute_buttons { .minute_buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 1.0rem;
} }
.clock { .clock {
width: 256px; width: 25.6rem;
height: 256px; height: 25.6rem;
display: flex; display: flex;
color: #000000; color: #000000;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px; padding: 1.0rem;
border-radius: 50%; border-radius: 50%;
border-color: #DCC3F8; border-color: #DCC3F8;
border-width: 8px; border-width: 0.8rem;
border-style: solid; border-style: solid;
} }
.clock_text { .clock_text {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-weight: bold; font-weight: bold;
font-size: 40px; font-size: 4.0rem;
} }
.clock_text:hover { .clock_text:hover {
@ -51,28 +51,28 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 1.6rem;
} }
.dates_item { .dates_item {
display: flex; display: flex;
justify-content: center; justify-content: center;
color: black; color: black;
border-radius: 16px; border-radius: 1.6rem;
border-color: #DCC3F8; border-color: #DCC3F8;
border-width: 4px; border-width: 0.4rem;
border-style: solid; border-style: solid;
padding: 8px; padding: 0.8rem;
width: 100%; width: 100%;
font-family: 'Montserrat'; font-family: 'Montserrat';
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 2.4rem;
} }
.presets_buttons { .presets_buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 1.0rem;
justify-content: center; justify-content: center;
} }

4
src/index.css
View file

@ -1 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
font-size: 62.5%;
}

8
src/pages/Timers/Timers.module.css
View file

@ -12,10 +12,10 @@ body, html {
} }
.content { .content {
padding: 32px; padding: 3.2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 1.6rem;
} }
.header_text { .header_text {
@ -27,7 +27,7 @@ body, html {
} }
.title { .title {
font-size: 40px; font-size: 4.0rem;
font-weight: bold; font-weight: bold;
} }
@ -35,5 +35,5 @@ body, html {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px; gap: 1.6rem;
} }