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;
+}