redesigned player conf

4 files changed, 110 insertions, 32 deletions

diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs
index 855da45..0b7494e 100644
--- a/server/src/routes/ui/node.rs
+++ b/server/src/routes/ui/node.rs
@@ -60,8 +60,10 @@ markup::define! {
                 }
                 div.hover { a[href=&player_uri(&item.lib_path)] { "▶" } }
             }
-            a[href=&uri!(r_library_node(&item.lib_path)).to_string()] {
-                p.title { @item.info.title }
+            p.title {
+                a[href=&uri!(r_library_node(&item.lib_path)).to_string()] {
+                    @item.info.title
+                }
             }
         }
     }
diff --git a/server/src/routes/ui/player.rs b/server/src/routes/ui/player.rs
index aaed5ee..c7c7d51 100644
--- a/server/src/routes/ui/player.rs
+++ b/server/src/routes/ui/player.rs
@@ -60,36 +60,38 @@ pub fn player_conf<'a>(item: Arc<Item>) -> MyResult<HtmlTemplate<markup::DynRend
     Ok(HtmlTemplate(
         "Configure Player".to_string(),
         markup::new! {
-            h2 { "Watch: " @item.info.title }
-            form[method = "GET", action = ""] {
-                h3 { "Select tracks" }
+            form.playerconf[method = "GET", action = ""] {
+                h2 { "Select tracks for " @item.info.title }
 
-                label[for="select-v"] { "Video: " }
-                select[name="v", id="select-v"] {
+                fieldset.video {
+                    legend { "Video" }
                     @for (tid, track) in &video_tracks {
-                        option[value=tid] { @format!("{track}") }
+                        input[type="radio", id=tid, name="v", value=tid];
+                        label[for=tid] { @format!("{track}") } br;
                     }
-                    option[value=""] { "Disable" }
+                    input[type="radio", id="v-none", name="v", value=""];
+                    label[for="v-none"] { "No video" }
                 }
-                br;
 
-                label[for="select-a"] { "Audio: " }
-                select[name="a", id="select-a"] {
+                fieldset.audio {
+                    legend { "Audio" }
                     @for (tid, track) in &audio_tracks {
-                        option[value=tid] { @format!("{track}") }
+                        input[type="radio", id=tid, name="a", value=tid];
+                        label[for=tid] { @format!("{track}") } br;
                     }
-                    option[value=""] { "Disable" }
+                    input[type="radio", id="a-none", name="a", value=""];
+                    label[for="a-none"] { "No audio" }
                 }
-                br;
 
-                label[for="select-s"] { "Subtitles: " }
-                select[name="s", id="select-s"] {
-                    option[value="", selected] { "None" }
+                fieldset.subtitles {
+                    legend { "Subtitles" }
                     @for (tid, track) in &sub_tracks {
-                        option[value=tid] { @format!("{track}") }
+                        input[type="radio", id=tid, name="s", value=tid];
+                        label[for=tid] { @format!("{track}") } br;
                     }
+                    input[type="radio", id="s-none", name="s", value=""];
+                    label[for="s-none"] { "No subtitles" }
                 }
-                br;
 
                 input[type="submit", value="Start playback"];
             }
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;
+}