dedup some code for themes

7 files changed, 53 insertions, 38 deletions

diff --git a/web/style/forms.css b/web/style/forms.css
index 259d7ef..5e5319d 100644
--- a/web/style/forms.css
+++ b/web/style/forms.css
@@ -5,6 +5,8 @@
     Copyright (C) 2023 tpart
 */
 input {
+    color: var(--font-highlight);
+    background-color: var(--background-dark);
     outline: none;
     box-sizing: border-box;
     height: 2.5em;
@@ -22,7 +24,15 @@ input[type="password"]:focus {
 }
 input[type="text"]:disabled,
 input[type="password"]:disabled {
-    border: 2px solid grey;
+    border: 2px solid var(--background-disable);
+}
+option {
+    font-family: "Cantarell", sans-serif;
+}
+
+fieldset {
+    background-color: var(--background-light);
+    border-radius: 8px;
 }
 
 input[type="submit"],
@@ -36,7 +46,7 @@ form button {
     cursor: pointer;
 }
 input[type="submit"]:disabled {
-    background-color: grey;
+    background-color: var(--background-disable);
 }
 input[type="submit"]:hover {
     filter: brightness(150%);
diff --git a/web/style/js-transition.css b/web/style/js-transition.css
index dbb80f0..648b177 100644
--- a/web/style/js-transition.css
+++ b/web/style/js-transition.css
@@ -3,12 +3,12 @@
         background-color: transparent;
     }
     to {
-        background-color: black;
+        background-color: var(--c-fade);
     }
 }
 @keyframes jst-fadeout {
     from {
-        background-color: black;
+        background-color: var(--c-fade);
     }
     to {
         background-color: transparent;
@@ -28,7 +28,7 @@
     top: 50vh;
     left: 50vw;
     transform: translate(-50%, -50%);
-    color: rgb(247, 69, 69);
+    color: var(--c-error);
     font-size: large;
     z-index: 11;
 }
@@ -37,7 +37,7 @@
     top: 50vh;
     left: 50vw;
     transform: translate(-50%, -50%);
-    color: rgb(252, 255, 78);
+    color: var(--c-warn);
     font-size: large;
     z-index: 11;
 }
diff --git a/web/style/layout.css b/web/style/layout.css
index ea7d3e6..20896b0 100644
--- a/web/style/layout.css
+++ b/web/style/layout.css
@@ -55,7 +55,7 @@ nav {
     width: calc(100vw - 2em);
     height: 2em;
     backdrop-filter: blur(6px);
-    background-color: #1c1c1c9a;
+    background-color: var(--c-nav);
 
     display: flex;
     align-items: center;
@@ -76,10 +76,10 @@ nav a {
     text-decoration: none;
 }
 nav a:hover {
-    background-color: #ffffff10;
+    background-color: var(--c-nav-hover);
 }
 nav a {
-    color: #dfe5f3;
+    color: var(--font);
     text-decoration: none;
     background-image: linear-gradient(transparent, transparent),
         linear-gradient(var(--accent-light), var(--accent-light));
@@ -122,12 +122,12 @@ section.message {
 }
 .error {
     padding: 1em;
-    color: rgb(255, 117, 117);
+    color: var(--c-error);
     font-family: monospace;
 }
 .success {
     padding: 1em;
-    color: rgb(117, 255, 117);
+    color: var(--c-success);
 }
 
 footer {
@@ -135,6 +135,6 @@ footer {
     text-align: center;
 }
 footer p {
-    color: #828282;
+    color: var(--font-dark);
     font-size: 0.8em;
 }
diff --git a/web/style/nodecard.css b/web/style/nodecard.css
index d32d5f4..a83056c 100644
--- a/web/style/nodecard.css
+++ b/web/style/nodecard.css
@@ -87,7 +87,7 @@
 }
 .node.card.poster .poster:hover .cardhover.open {
     opacity: 1;
-    background-color: #0004;
+    background-color: var(--overlay);
     backdrop-filter: blur(3px);
 }
 .node.card.poster .poster .cardhover.open a {
@@ -97,14 +97,14 @@
     font-size: large;
     display: block;
     text-align: center;
-    background-color: #0004;
+    background-color: var(--overlay);
     border-radius: 0.2em;
     padding: 0.6em;
     margin: 0.6em;
     transition: background-color 0.2s;
 }
 .node.card.poster .poster .cardhover.open a:hover {
-    background-color: #0008;
+    background-color: var(--overlay-hover);
 }
 
 .node.card.poster .poster .cardhover.item {
@@ -119,7 +119,7 @@
 }
 .node.card.poster .poster:hover .cardhover.item {
     opacity: 1;
-    background-color: #0004;
+    background-color: var(--overlay);
     backdrop-filter: blur(3px);
 }
 
@@ -134,11 +134,11 @@
     border-radius: 50%;
     font-size: 1.8em;
     pointer-events: all;
-    background-color: #0005;
+    background-color: var(--overlay);
     transition: background-color 0.2s, font-size 0.2s;
 }
 .node.card.poster .poster .cardhover.item a.play:hover {
-    background-color: #0008;
+    background-color: var(--overlay-hover);
     font-size: 2.4em;
 }
 .node.card.poster .poster .cardhover.item .props {
diff --git a/web/style/nodepage.css b/web/style/nodepage.css
index e40706e..2df7c13 100644
--- a/web/style/nodepage.css
+++ b/web/style/nodepage.css
@@ -60,6 +60,6 @@
     font-weight: bolder;
     display: inline-block;
     padding: 0.2em;
-    background: #5a5a5a85;
+    background: var(--background-prop);
     border-radius: 4px;
 }
diff --git a/web/style/player.css b/web/style/player.css
index eb1a0a0..d672fe4 100644
--- a/web/style/player.css
+++ b/web/style/player.css
@@ -5,19 +5,6 @@
     Copyright (C) 2023 tpart
 */
 
-input {
-    color: white;
-    background-color: black;
-}
-option {
-    font-family: "Cantarell", sans-serif;
-}
-
-fieldset {
-    background-color: var(--background-light);
-    border-radius: 8px;
-}
-
 form.playerconf {
     display: grid;
     grid-template-areas:
@@ -98,5 +85,5 @@ fieldset label:hover {
 .player video {
     width: 100vw;
     height: 100vh;
-    background-color: black;
+    background-color: var(--video-background);
 }
diff --git a/web/style/themes.css b/web/style/themes.css
index e006513..685b4e9 100644
--- a/web/style/themes.css
+++ b/web/style/themes.css
@@ -1,19 +1,37 @@
-body.theme-dark {
+body {
+    --video-brackground: black;
     --accent-light: rgb(255, 163, 87);
     --accent-dark: rgb(199, 90, 0);
+    --c-error: rgb(255, 117, 117);
+    --c-warn: rgb(252, 255, 78);
+    --c-sucess: rgb(117, 255, 117);
+}
+body.theme-dark {
+    --c-nav: #1c1c1c9a;
+    --c-nav-hover: #ffffff10;
+    --c-fade: black;
+    --overlay: #0004;
+    --overlay-hover: #0008;
     --background-dark: #070707;
     --background-light: #1c1c1c;
     --background-very-light: #323232;
+    --background-disable: rgb(128, 128, 128);
+    --background-prop: #5a5a5a85;
     --font: rgb(218, 218, 218);
-    --font-dark: rgb(148, 148, 148);
+    --font-dark: rgb(122, 122, 122);
     --font-highlight: white;
 }
 body.theme-light {
-    --accent-light: rgb(255, 163, 87);
-    --accent-dark: rgb(199, 90, 0);
+    --c-nav: #c4c4c4d7;
+    --c-nav-hover: #ffffff10;
+    --c-fade: white;
+    --overlay: rgba(255, 255, 255, 0.267);
+    --overlay-hover: rgba(255, 255, 255, 0.533);
     --background-dark: #ffffff;
-    --background-light: #e2e2e2;
+    --background-light: #c0c0c0;
     --background-very-light: #b9b9b9;
+    --background-disable: rgb(128, 128, 128);
+    --background-prop: #e9e9e9b2;
     --font: rgb(43, 43, 43);
     --font-dark: rgb(0, 0, 0);
     --font-highlight: rgb(0, 0, 0);