adjust default CSS themeHEADmaster

inspired by dacctal

Signed-off-by: Pinapelz <yukais@pinapelz.com>

5 files changed, 89 insertions, 33 deletions

diff --git a/res/admin-register.html b/res/admin-register.html
index 4515cfd..1a75c48 100644
--- a/res/admin-register.html
+++ b/res/admin-register.html
@@ -13,6 +13,9 @@
   <link rel="icon" href="img/favicon.svg" type="image/svg+xml">
   <link id="usertheme" href="css/des.css" rel="stylesheet">
   <link id="usertheme" href="css/setup.css" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">
   <link id="customcss" href="css/custom.css" rel="stylesheet">
 </head>
 
@@ -86,4 +89,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/res/css/des.css b/res/css/des.css
index 746fb7b..4da2005 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -3,17 +3,44 @@
 /* CSS Document */
 
 :root {
-  --background-video: #000;
-  --background-chat: #111;
-  --scroll-to-end-bg: #fff;
-  --midground: #888;
-  --foreground: #bbb;
-  --accent: #0055ff;
-  --success: #009632;
-  --leader-hint: #00963288;
-  --warning: #ffb800;
-  --error: #ff0800;
-  --border: #333;
+  --cl-black:       hsl(140, 1%, 6%);
+  --cl-gray-0:      hsl(140, 2%, 8%);
+  --cl-gray-1:      hsl(140, 2%, 12%);
+  --cl-gray-2:      hsl(140, 4%, 16%);
+  --cl-gray-3:      hsl(140, 4%, 24%);
+  --cl-gray-4:      hsl(140, 4%, 36%);
+  --cl-gray-5:      hsl(140, 4%, 44%);
+  --cl-gray-6:      hsl(80, 8%, 52%);
+  --cl-gray-7:      hsl(70, 8%, 58%);
+  --cl-gray-8:      hsl(60, 16%, 66%);
+  --cl-gray-9:      hsl(40, 32%, 78%);
+  --cl-gray-10:     hsl(30, 32%, 84%);
+  --cl-white:       hsl(26, 64%, 88%);
+  --cl-red-6:       hsl(4, 83%, 67%);
+  --cl-red-7:       hsl(4, 75%, 75%);
+  --cl-orange-6:    hsl(26, 84%, 62%);
+  --cl-orange-7:    hsl(26, 84%, 74%);
+  --cl-yellow:      hsl(37, 80%, 69%);
+  --cl-green-6:     hsl(120, 41%, 64%);
+  --cl-green-7:     hsl(120, 42%, 75%);
+  --cl-cyan-6:      hsl(160, 41%, 64%);
+  --cl-cyan-7:      hsl(160, 32%, 75%);
+  --cl-blue-6:      hsl(200, 55%, 64%);
+  --cl-blue-8:      hsl(201, 55%, 80%);
+  --cl-magenta-7:   hsl(320, 59%, 72%);
+  --cl-magenta-8:   hsl(320, 61%, 80%);
+
+  --background-video: var(--cl-gray-0);
+  --background-chat: var(--cl-gray-1);
+  --scroll-to-end-bg: var(--cl-gray-8);
+  --midground: var(--cl-gray-5);
+  --foreground: var(--cl-white);
+  --accent: var(--cl-orange-6);
+  --success: var(--cl-green-6);
+  --leader-hint: hsl(120, 41%, 64%, 0.53);
+  --warning: var(--cl-yellow);
+  --error: var(--cl-red-6);
+  --border: var(--cl-gray-3);
   --box-shadow: 0rem .25rem 1rem rgba(0, 0, 0, .25);
 }
 
@@ -30,7 +57,7 @@ html {
 }
 
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Roboto Mono", Menlo, Monaco, Consolas, "Courier New", monospace, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   line-height: 1.4;
   color: var(--foreground);
@@ -98,7 +125,24 @@ h6 {
 }
 
 a {
-  color: var(--accent);
+  text-decoration: none;
+  transition: color ease-in-out .15s;
+}
+
+a:link {
+  color: var(--cl-orange-6);
+}
+
+a:visited {
+  color: var(--cl-green-6);
+}
+
+a:hover {
+  color: var(--cl-magenta-7);
+}
+
+a:active {
+  color: var(--cl-green-6);
 }
 
 ul {
@@ -121,9 +165,9 @@ textarea {
 }
 
 code {
-  background: var(--background-chat);
+  background: var(--cl-gray-2);
   border: solid var(--border) 1px;
-  border-radius: .5rem;
+  border-radius: 0;
   padding: .25rem;
   word-break: break-all;
   display: inline-flex;
@@ -142,12 +186,12 @@ button {
   display: inline-flex;
   align-items: center;
   text-align: center;
-  background-color: var(--background-chat);
+  background-color: var(--cl-gray-2);
   color: var(--midground);
   line-height: 1;
   cursor: pointer;
   padding: .5rem;
-  border-radius: .5rem;
+  border-radius: 0;
   border: 0;
   transition: background-color ease-in-out .15s, color ease-in-out .15s;
 }
@@ -163,7 +207,7 @@ button:not(:first-child) {
 
 button:hover,
 button.active {
-  background-color: rgba(0, 0, 0, .5);
+  background-color: var(--cl-gray-3);
   color: var(--foreground);
 }
 
@@ -252,9 +296,9 @@ input[type=text],
 input[type="password"],
 textarea {
   padding: .5rem;
-  border-radius: .5rem;
+  border-radius: 0;
   color: var(--foreground);
-  background-color: var(--background-video);
+  background-color: var(--cl-gray-2);
   border: .125rem solid;
   border-color: var(--border);
   transition: border-color ease-in-out .15s;
@@ -577,7 +621,7 @@ iframe#videoplayer {
 }
 
 .queue_temp {
-  background-color: var(--background-chat);
+  background-color: var(--cl-gray-2);
 }
 
 .queue_entry {
@@ -672,9 +716,9 @@ footer#footer {
 
 #userlist-wrap {
   overflow-y: auto;
-  background-color: var(--background-video);
+  background-color: var(--cl-gray-2);
   border-right: 0;
-  border-radius: 1rem;
+  border-radius: 0;
   flex-shrink: 0;
 
   transition: 0ms;
@@ -700,7 +744,7 @@ footer#footer {
 }
 
 .userlist_owner {
-  color: var(--accent);
+  color: var(--cl-blue-6);
   font-weight: bold;
 }
 
@@ -733,6 +777,7 @@ footer#footer {
   display: block;
   text-overflow: ellipsis;
   overflow: hidden;
+  padding-right: 0.4rem;
 }
 
 /* Options */
@@ -894,8 +939,8 @@ footer#footer {
   display: flex;
   height: 0;
   width: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 1rem;
+  background: var(--cl-gray-2);
+  border-radius: 0;
   overflow-y: scroll;
   text-align: center;
 }
diff --git a/res/css/setup.css b/res/css/setup.css
index b42f8a8..f0a63e5 100644
--- a/res/css/setup.css
+++ b/res/css/setup.css
@@ -14,17 +14,17 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: #1a1a1f;
+  background-color: var(--cl-gray-1);
   color: var(--foreground);
   border: 1px solid var(--border);
-  border-radius: 0.5rem;
+  border-radius: 0;
   gap: 1rem;
 }
 
 .welcome-image {
   max-width: 200px;
   width: 100%;
-  border-radius: 0.375rem;
+  border-radius: 0;
   margin-bottom: 0.5rem;
 }
 
@@ -58,14 +58,16 @@ body {
     padding: 0.75rem 0.5rem;
     justify-content: center;
     background-color: var(--accent);
-    color: #fff;
+    color: var(--cl-gray-0);
     border: none;
-    border-radius: 0.375rem;
+    border-radius: 0;
     cursor: pointer;
     font-size: 0.95rem;
+    font-weight: bold;
 
     &:hover {
-      filter: brightness(1.15);
+      background-color: var(--cl-orange-7);
+      color: var(--cl-gray-0);
     }
   }
 }
diff --git a/res/index.html b/res/index.html
index 2f620c6..29f0b1b 100644
--- a/res/index.html
+++ b/res/index.html
@@ -11,6 +11,9 @@
   <link rel="manifest" href="manifest.json">
   <title>SyncTube</title>
   <link rel="icon" href="img/favicon.svg" type="image/svg+xml">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">
   <link id="usertheme" href="css/des.css" rel="stylesheet">
   <link id="customcss" href="css/custom.css" rel="stylesheet">
   <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@7.4.0/dist/ionicons/ionicons.esm.js"></script>
diff --git a/res/setup.html b/res/setup.html
index c2674b6..3a0a4ca 100644
--- a/res/setup.html
+++ b/res/setup.html
@@ -11,6 +11,9 @@
   <link rel="manifest" href="manifest.json">
   <title>SyncTube</title>
   <link rel="icon" href="img/favicon.svg" type="image/svg+xml">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">
   <link id="usertheme" href="css/des.css" rel="stylesheet">
   <link id="usertheme" href="css/setup.css" rel="stylesheet">
   <link id="customcss" href="css/custom.css" rel="stylesheet">