From 56670755d4d5fbd92297fefe0e23237e96f09d2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20R=C3=BCmpelein?= <oli_r@fg4f.de>
Date: Sat, 25 Sep 2021 17:19:08 +0200
Subject: [PATCH] Color-Foo

---
 src/main/resources/css/colors.css |  8 +++++++-
 src/main/resources/css/player.css | 29 ++++++++++++++---------------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/main/resources/css/colors.css b/src/main/resources/css/colors.css
index 848bf2f..796e355 100644
--- a/src/main/resources/css/colors.css
+++ b/src/main/resources/css/colors.css
@@ -2,10 +2,16 @@
     --highlight-dark: #03045eff;
     --background: #023e8aff;
     --foreground: #0077b6ff;
-    --blue-green: #0096c7ff;
+    --foreground02: #0096c7ff;
     --cerulean-crayola: #00b4d8ff;
     --highlight01: #48cae4ff;
     --lowlight-text: #90e0efff;
     --text: #ade8f4ff;
     --highlight-text: #caf0f8ff;
+
+    --border-radius: 2vh;
+    --font-size: 4vh;
+
+    --bumper-small-size: 1vh;
+    --bumper-large-size: 3vh;
 }
diff --git a/src/main/resources/css/player.css b/src/main/resources/css/player.css
index 27bc747..ccd5fa7 100644
--- a/src/main/resources/css/player.css
+++ b/src/main/resources/css/player.css
@@ -1,9 +1,9 @@
 body, html {
     height: 100%;
     overflow: hidden;
-    font-size: 4vh;
+    font-size: var(--font-size);
     box-sizing: border-box;
-    padding: 5px;
+    padding: var(--bumper-small-size);
     margin: 0;
     background-color: var(--background);
     color: var(--text);
@@ -17,27 +17,26 @@ div.parent {
 }
 
 div.input {
-    border-radius: 50px;
+    border-radius: var(--border-radius);
     max-width: 100%;
-    margin-bottom: 1vh;
+    margin-bottom: var(--bumper-small-size);
     display: grid;
-    grid-template-columns: auto 50px 1fr;
+    grid-template-columns: auto var(--bumper-large-size) 1fr;
     background-color: var(--foreground);
-    padding-left: 20px;
+    padding-left: var(--border-radius);
+    padding-right: var(--border-radius);
 }
 
 div.input > label {
-    border-bottom-left-radius: 50px;
-    border-top-left-radius: 50px;
+    border-bottom-left-radius: var(--border-radius);
+    border-top-left-radius: var(--border-radius);
 }
 
 div.input > input {
     max-width: 100%;
     width: 100%;
-    font-size: 4vh;
-    border-bottom-right-radius: 50px;
-    border-top-right-radius: 50px;
-    background-color: var(--foreground);
+    font-size: var(--font-size);
+    background-color: var(--foreground02);
     color: var(--text);
 }
 
@@ -46,12 +45,12 @@ input::placeholder {
 }
 
 div > .submit {
-    border-radius: 50px;
+    border-radius: var(--border-radius);
     width: 100%;
     max-width: 100%;
-    font-size: 4vh;
+    font-size: var(--font-size);
     height: 100%;
-    border: solid 1px var(--highlight-dark);
+    border: solid 0.25vh var(--highlight-dark);
     background-color: var(--foreground);
     color: var(--text);
     display: flex;