diff options
| author | metamuffin <metamuffin@disroot.org> | 2024-01-29 01:00:15 +0100 |
|---|---|---|
| committer | metamuffin <metamuffin@disroot.org> | 2024-01-29 01:00:15 +0100 |
| commit | 9f4544489eb884a817fa6df9218f45e3f62657cf (patch) | |
| tree | ab3b4ba7cbe389513dff4ec160a9fe0967318323 | |
| parent | 42dfe430a05fcc45bd3248219e489841c38f7bac (diff) | |
| download | jellything-9f4544489eb884a817fa6df9218f45e3f62657cf.tar jellything-9f4544489eb884a817fa6df9218f45e3f62657cf.tar.bz2 jellything-9f4544489eb884a817fa6df9218f45e3f62657cf.tar.zst | |
make controls look better
| -rw-r--r-- | web/script/player/mod.ts | 4 | ||||
| -rw-r--r-- | web/style/js-player.css | 13 |
2 files changed, 14 insertions, 3 deletions
diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts index 2dad414..995bd4c 100644 --- a/web/script/player/mod.ts +++ b/web/script/player/mod.ts @@ -90,7 +90,7 @@ function initialize_player(el: HTMLElement, node_id: string) { ...(kind == "audio" ? volume() : []), player.active_tracks.map(_ => - e("div", ...(player.tracks ?? []) + e("ul", { class: "jsp-track-list" }, ...(player.tracks ?? []) .map((track, index) => ({ index, track })) .filter(({ track }) => get_track_kind(track.kind) == kind) .map(({ track, index }): HTMLElement => { @@ -99,7 +99,7 @@ function initialize_player(el: HTMLElement, node_id: string) { player.set_track_enabled(index, !active) // TODO show loading indicator } - return e("div", + return e("li", { class: active ? ["active"] : [] }, e("button", { class: "jsp-track-state", onclick }, active ? "-" : "+"), " ", e("span", { class: "jsp-track-name" }, track.name), " ", e("span", { class: "jsp-track-lang" }, track.language) diff --git a/web/style/js-player.css b/web/style/js-player.css index 7a2c278..1d205a8 100644 --- a/web/style/js-player.css +++ b/web/style/js-player.css @@ -24,7 +24,8 @@ flex-direction: row; } -.jsp .jsp-controls button { +.jsp .jsp-controls button, +.jsp .jsp-track-list button { padding: 0px; width: var(--csize); height: 100%; @@ -193,6 +194,16 @@ } .jsp-controlgroup { + padding: 0.5em; margin-top: 1em; margin-bottom: 1em; + background-color: #00000038; +} + +ul.jsp-track-list { + list-style: none; + padding: 0px; +} +ul.jsp-track-list li.active { + background-color: #047a0073; } |