CSS changes

src/main/kotlin/de/pheerai/buzzer/clients/playerClient.kt

@@ -7,6 +7,11 @@ fun HTML.createPlayerDocument() {
     head {
         meta { charset = "UTF-8" }
         title { +"JS Client" }
+        link(
+            href = "/assets/colors.css",
+            rel = "stylesheet",
+            type = "text/css"
+        )
         link(
             href = "/assets/player.css",
             rel = "stylesheet",

src/main/resources/css/colors.css

@@ -0,0 +1,11 @@
+:root {
+    --highlight-dark: #03045eff;
+    --background: #023e8aff;
+    --foreground: #0077b6ff;
+    --blue-green: #0096c7ff;
+    --cerulean-crayola: #00b4d8ff;
+    --highlight01: #48cae4ff;
+    --lowlight-text: #90e0efff;
+    --text: #ade8f4ff;
+    --highlight-text: #caf0f8ff;
+}

src/main/resources/css/player.css

@@ -5,8 +5,8 @@ body, html {
     box-sizing: border-box;
     padding: 5px;
     margin: 0;
-    background-color: #1E1A4A;
-    color: lightgray;
+    background-color: var(--background);
+    color: var(--text);
 }
 
 div.parent {
@@ -19,10 +19,10 @@ div.parent {
 div.input {
     border-radius: 50px;
     max-width: 100%;
-    margin-bottom: 3%;
+    margin-bottom: 1vh;
     display: grid;
     grid-template-columns: auto 50px 1fr;
-    background-color: #411C52;
+    background-color: var(--foreground);
     padding-left: 20px;
 }
 
@@ -37,7 +37,12 @@ div.input > input {
     font-size: 4vh;
     border-bottom-right-radius: 50px;
     border-top-right-radius: 50px;
-    background-color: #551D57;
+    background-color: var(--foreground);
+    color: var(--text);
+}
+
+input::placeholder {
+    color: var(--lowlight-text);
 }
 
 div > .submit {
@@ -46,9 +51,9 @@ div > .submit {
     max-width: 100%;
     font-size: 4vh;
     height: 100%;
-    border: solid 1px #5B1D4A;
-    background-color: #411C52;
-    color: lightgray;
+    border: solid 1px var(--highlight-dark);
+    background-color: var(--foreground);
+    color: var(--text);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -56,5 +61,5 @@ div > .submit {
 }
 
 div > button.active {
-    background-color: #5B1D4A;
+    background-color: var(--highlight01);
 }