a simple web player for subsonic
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174:root { color-scheme: light dark;
--bg-layer: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05)); --bg-playing: hsl(200 90% 50% / 0.3); --bg-highlight: Highlight; --bg: Canvas;
--border-subtle: 1px solid light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1)); --border-text: 1px solid light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1)); --border: 1px solid light-dark(hsl(0 0% 0% / 0.25), hsl(0 0% 100% / 0.25));
--text-highlight: HighlightText; --text: CanvasText;
--radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;}
html { font-size: calc(var(--font-size) * env(preferred-text-scale, 1)); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;}
html.dynamic { background: var(--bg);}
html.transparent-borders { --border: none; --border-subtle: none;}
body { background: transparent; color: var(--text); block-size: 100vh; inline-size: 100vw; padding-top: max(env(titlebar-area-height), env(safe-area-inset-top)); padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); padding-bottom: env(safe-area-inset-bottom);}
@supports (block-size: 100dvh) { body { block-size: 100dvh; inline-size: 100dvw; }}
#app { display: grid; grid-template-areas: "sidebar queue" "sidebar controls"; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; block-size: 100%; inline-size: 100%;}
#queue { grid-area: queue;}
#controls { grid-area: controls;}
#sidebar { grid-area: sidebar; position: relative; display: flex; flex-direction: column; border-inline-end: var(--border);}
@media screen and (max-width: 32rem) { html:not(.miniplayer) body { background: var(--bg); } html:not(.miniplayer) #now-playing { border-block-start: var(--border); } #sidebar { display: contents; } #app { grid-template-areas: "main" "nowplaying" "controls"; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; } #library, #queue { grid-area: main; } html:not(.show-library-mobile) #library { display: none; } html.show-library-mobile #queue { display: none; }}
html.miniplayer #sidebar { display: contents;}
html.miniplayer #app { grid-template-areas: "nowplaying" "controls"; grid-template-columns: 1fr; grid-template-rows: 1fr auto;}
html.miniplayer #library,html.miniplayer #queue { display: none;}
/* desktop build (wails) styling */
html.is-wails.is-macos { --bg-highlight: hsl(220, 90%, 45%); --text-highlight: hsl(0, 0%, 100%);
&:not(.dynamic) { --border: 1px solid light-dark(hsl(0 0% 75%), hsl(0, 0%, 0%)); }}
.is-wails.is-macos dialog { inset-block-start: 38px;}
.is-wails.is-macos #library { padding-block-start: 0; margin-block-start: 38px;}
.is-wails.is-macos #queue { padding-block-start: 18px;}
.miniplayer.is-wails.is-macos #now-playing { padding-block-start: 38px;}
@media screen and (max-width: 32rem) { .is-wails.is-macos #queue { padding-block-start: 38px; }}
/* squircles! only chromium supports this right now *//* snippet from https://til.jakelazaroff.com/css/make-all-rounded-corners-squircles */
@supports (corner-shape: squircle) { :root { --radius-sm: 4px; --radius-md: 8px; }}