diff options
author | Joris | 2021-05-20 09:43:02 +0200 |
---|---|---|
committer | Joris | 2021-05-20 09:43:02 +0200 |
commit | f9e7e819a0a673befb11b24404efeb9d6644bceb (patch) | |
tree | 07fdcc252964382568236647e74709980dc479d4 /public | |
parent | cde24cbf3fbc418af3c98d82e47dcd5df71e5b26 (diff) |
Provide named exercices
Diffstat (limited to 'public')
-rw-r--r-- | public/main.css | 137 |
1 files changed, 100 insertions, 37 deletions
diff --git a/public/main.css b/public/main.css index deec437..1461fef 100644 --- a/public/main.css +++ b/public/main.css @@ -11,9 +11,13 @@ html { :root { --color-active: #F3E87F; - --color-header: #333333; + --color-active-hover: #FBEF81; + --color-header: brown; + --color-header-darker: #822929; --color-action: #333333; - --color-action-darker: #222222; + --color-action-darker: #111111; + --color-action-hover: #555555; + --color-label: #333333; --color-prepare: #3B6EDC; --color-pause: #888888; --color-warm-up: #C679D9; @@ -21,6 +25,9 @@ html { --color-rest: #B15B5B; --color-timer-arc-total: #222222; --color-timer-hover: #DDEEDD; + --color-focus: orange; + --color-title: brown; + --color-input-border: #CCCCCC; --base-font-size: 18px; } @@ -51,6 +58,7 @@ body { color: white; padding: 1rem 2rem; font-size: 2rem; + border-bottom: 0.1rem solid var(--color-header-darker); } /* Animation */ @@ -80,42 +88,59 @@ body { display: flex; flex-direction: column; align-items: center; - padding-top: 5rem; + padding-top: 2rem; background-color: white; } -.g-Form__Label { +.g-Form__Section { display: flex; flex-direction: column; align-items: center; - margin-bottom: 1rem; - text-align: center; - font-size: 1.3rem; + padding: 1rem 0; } -.g-Form__Input { - display: block; +.g-Form__Tabatas { + display: flex; + flex-direction: column; + width: 17rem; +} + +.g-Form__Line { + display: flex; + align-items: flex-end; + margin-bottom: 2rem; +} + +.g-Form__Title { text-align: center; - margin-top: 0.5rem; - font-size: 1.3rem; - width: 10rem; } -.g-Form__Duration { +.g-Form__Label { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 1rem; text-align: center; - font-size: 1.5rem; - margin-top: 1rem; + margin: 0 1rem; + color: var(--color-label); + line-height: 2rem; +} + +.g-Form__Tabata { + display: grid; + grid-template-columns: auto auto; + grid-gap: 1rem; + margin-bottom: 1rem; +} + +.g-Form__Operator { + padding-bottom: 0.3rem; } -.g-Form__Start { +.g-Form__Duration { + text-align: center; font-size: 1.5rem; - background-color: var(--color-action); - border: 3px solid var(--color-action-darker); - color: white; - padding: 0.5rem 0.8rem; - width: 10rem; - margin-top: 2rem; - cursor: pointer; + margin-bottom: 1rem; } /* Timer */ @@ -156,6 +181,9 @@ body { align-items: center; justify-content: center; flex-direction: column; + white-space: pre-wrap; + text-align: center; + line-height: 6rem; width: 100%; height: 100%; @@ -213,10 +241,6 @@ body { stroke-width: 18; } -.g-Timer__Step { - margin-bottom: 2rem; -} - .g-Timer__Buttons { display: flex; justify-content: space-around; @@ -226,26 +250,65 @@ body { height: 100%; } -.g-Timer__Button { - display: flex; +/* Titles */ + +h1 { + font-weight: normal; + color: var(--color-title); + margin-top: 0; + text-decoration: underline; +} + +/* Input */ + +.g-Input { + display: block; + font-size: inherit; + width: 10rem; + padding: 0.3rem; + border: 0.1rem solid var(--color-input-border); +} + +.g-Input:focus { + border-color: var(--color-focus); +} + +/* Button */ + +.g-Button { + display: inline-flex; justify-content: center; align-items: center; - font-size: 1.5rem; + text-decoration: none; + font-size: inherit; background-color: var(--color-action); - border: 3px solid var(--color-action-darker); + border: 0.1rem solid var(--color-action); color: white; padding: 0.5rem 0.8rem; - width: 10rem; cursor: pointer; - text-align: center; - text-decoration: none; } -.g-Timer__Button:not(:last-child) { - margin-right: 2rem; +.g-Button:hover { + background-color: var(--color-action-hover); +} + +.g-Button:focus { + border-color: var(--color-focus); } -.g-Timer__Button--Active { +.g-Button--Active { background-color: var(--color-active); color: black; } + +.g-Button--Active:hover { + background-color: var(--color-active-hover); + color: black; +} + +/* List */ + +.g-List { + margin: 0; + padding: 0; +} |