2 files changed, 86 insertions, 12 deletions
diff --git a/server/src/routes/ui/style/layout.css b/server/src/routes/ui/style/layout.css
index 0a6d25f..ef03873 100644
--- a/server/src/routes/ui/style/layout.css
+++ b/server/src/routes/ui/style/layout.css
@@ -12,6 +12,8 @@
     --backdrop-height: 18em;
     --background-dark: #070707;
     --background-light: #1c1c1c;
+    --main-side-margin: 2em;
+    --font: rgb(218, 218, 218);
 }
 
 ::selection {
@@ -19,7 +21,7 @@
 }
 
 * {
-    color: rgb(218, 218, 218);
+    color: var(--font);
     font-family: "Cantarell", sans-serif;
     font-weight: 500;
 
@@ -55,6 +57,20 @@ nav a {
 nav a:hover {
     background-color: #ffffff10;
 }
+nav a {
+    color: #dfe5f3;
+    text-decoration: none;
+    background-image: linear-gradient(transparent, transparent),
+        linear-gradient(var(--accent-light), var(--accent-light));
+    background-size: 100% 2px, 0 2px;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    transition: background-size 0.15s linear;
+}
+nav a:hover {
+    background-size: 0 2px, 100% 2px;
+}
+
 
 nav h1 {
     margin: 0px;
@@ -66,6 +82,8 @@ nav h1 {
 #main {
     display: block;
     margin-top: var(--bar-height);
+    margin-left: var(--main-side-margin);
+    margin-right: var(--main-side-margin);
 }
 
 .error {
@@ -74,15 +92,6 @@ nav h1 {
     font-family: monospace;
 }
 
-select,
-input {
-    color: white;
-    background-color: black;
-}
-option {
-    font-family: "Cantarell", sans-serif;
-}
-
 .page.dir {
     padding: 1em;
     padding-left: 3em;
@@ -158,8 +167,10 @@ option {
 }
 
 .backdrop {
-    width: 100%;
+    width: calc(100% + 2 * var(--main-side-margin));
     height: calc(var(--backdrop-height) + 5em);
+    margin-left: calc(-1 * var(--main-side-margin));
+    margin-right: calc(-1 * var(--main-side-margin));
     margin-top: calc(-1 * var(--bar-height));
     margin-bottom: -5em;
     mask-image: linear-gradient(
diff --git a/server/src/routes/ui/style/player.css b/server/src/routes/ui/style/player.css
index d4a14ab..3468a38 100644
--- a/server/src/routes/ui/style/player.css
+++ b/server/src/routes/ui/style/player.css
@@ -1,4 +1,67 @@
-
 video {
     width: 100%;
 }
+
+input {
+    color: white;
+    background-color: black;
+}
+option {
+    font-family: "Cantarell", sans-serif;
+}
+
+input[type="submit"] {
+    width: 30%;
+    justify-self: center;
+    border: 0px solid transparent;
+    background-color: var(--accent-dark);
+    border-radius: 8px;
+}
+fieldset {
+    background-color: var(--background-light);
+    border-radius: 8px;
+}
+
+form.playerconf {
+    display: grid;
+    grid-template-areas:
+        "h h h"
+        "v a s"
+        "b b b";
+    gap: 1em;
+    grid-template-columns: auto auto auto;
+    grid-template-rows: 3em auto 5em;
+}
+
+legend {
+    font-size: 1.5em;
+}
+
+fieldset label {
+    transition: color 0.2s;
+}
+fieldset label:hover {
+    color: var(--accent-light);
+}
+
+.playerconf h2 {
+    grid-area: h;
+    text-align: center;
+}
+.playerconf h3 {
+    grid-area: h;
+    text-align: center;
+}
+.playerconf .video {
+    grid-area: v;
+}
+.playerconf .audio {
+    grid-area: a;
+}
+.playerconf .subtitles {
+    grid-area: s;
+}
+.playerconf input[type="submit"] {
+    grid-area: b;
+    font-size: 1.5em;
+}