diff options
Diffstat (limited to 'server/src/routes')
| -rw-r--r-- | server/src/routes/ui/node.rs | 6 | ||||
| -rw-r--r-- | server/src/routes/ui/player.rs | 38 | ||||
| -rw-r--r-- | server/src/routes/ui/style/layout.css | 33 | ||||
| -rw-r--r-- | server/src/routes/ui/style/player.css | 65 |
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; +} |