From 82e688161e2975696edf43bd9a3a78f39d7d55d0 Mon Sep 17 00:00:00 2001
From: Joris
Date: Thu, 20 May 2021 10:06:22 +0200
Subject: Reorganize CSS colors

---
 public/main.css | 52 +++++++++++++++++-----------------------------------
 1 file changed, 17 insertions(+), 35 deletions(-)

diff --git a/public/main.css b/public/main.css
index 1461fef..45fbd8b 100644
--- a/public/main.css
+++ b/public/main.css
@@ -14,20 +14,23 @@ html {
   --color-active-hover: #FBEF81;
   --color-header: brown;
   --color-header-darker: #822929;
-  --color-action: #333333;
-  --color-action-darker: #111111;
-  --color-action-hover: #555555;
+  --color-highlight: #888888;
+  --color-title: brown;
+
+  /* Form */
   --color-label: #333333;
-  --color-prepare: #3B6EDC;
-  --color-pause: #888888;
+  --color-button: #333333;
+  --color-button-hover: #555555;
+  --color-input-border: #CCCCCC;
+  --color-focus: orange;
+
+  /* Timer */
+  --color-timer-arc-total: #222222;
+  --color-timer-hover: #DDEEDD;
   --color-warm-up: #C679D9;
+  --color-prepare: #3B6EDC;
   --color-work: #71B571;
   --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;
 }
@@ -61,27 +64,6 @@ body {
   border-bottom: 0.1rem solid var(--color-header-darker);
 }
 
-/* Animation */
-
-.g-Animation {
-  position: relative;
-  overflow: hidden;
-}
-
-.g-Animation > * + * {
-  width: 100vw;
-  min-height: 100vh;
-  position: absolute;
-  left: 100vh;
-  top: 0;
-  animation: g-Animation__Keyframe 400ms;
-}
-
-@keyframes g-Animation__Keyframe {
-  from { left: 100vh; }
-  to { left: 0; }
-}
-
 /* Config */
 
 .g-Form {
@@ -173,7 +155,7 @@ body {
 }
 
 .g-Timer__Pause {
-  background-color: var(--color-pause);
+  background-color: var(--color-highlight);
 }
 
 .g-Timer__Dial {
@@ -281,15 +263,15 @@ h1 {
   align-items: center;
   text-decoration: none;
   font-size: inherit;
-  background-color: var(--color-action);
-  border: 0.1rem solid var(--color-action);
+  background-color: var(--color-button);
+  border: 0.1rem solid var(--color-button);
   color: white;
   padding: 0.5rem 0.8rem;
   cursor: pointer;
 }
 
 .g-Button:hover {
-  background-color: var(--color-action-hover);
+  background-color: var(--color-button-hover);
 }
 
 .g-Button:focus {
-- 
cgit v1.2.3