aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/main.css52
1 files 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 {