aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/main.css137
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;
+}