Something went wrong. Try again.
a simple but full-featured web player for OpenSubsonic music servers (Navidrome, Gonic, Ampache, etc) devins.page/tinysub
svelte typescript javascript subsonic gonic navidrome
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375:root { color-scheme: light dark;
--bg: Canvas; --bg-layer: color-mix(currentColor 5%, transparent); --bg-highlight: Highlight;
--border-subtle: 1px solid color-mix(currentColor 10%, transparent); --border-text: 1px solid color-mix(currentColor 10%, transparent); --border: 1px solid color-mix(currentColor 25%, transparent);
--text-highlight: HighlightText; --text: CanvasText;
--accent-red: red; --accent-orange: orange; --accent-green: lime;
--font-size: 1rem; --font-family: ui-sans-serif, system-ui, sans-serif; --font-family-monospace: ui-monospace, monospace;
--icon-size: 16px;
--radius-sm: 0px; --radius-md: 0px;
--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--button-press-scale-x: 1.25; --button-press-scale-y: 0.75; --button-hover-duration: 350ms; --button-press-duration: 75ms;
--viewport-inset-top: env(safe-area-inset-top, 0px); --viewport-inset-right: env(safe-area-inset-right, 0px); --viewport-inset-bottom: env(safe-area-inset-bottom, 0px); --viewport-inset-left: env(safe-area-inset-left, 0px); --viewport-inline-size: calc( 100dvw - var(--viewport-inset-left) - var(--viewport-inset-right) ); --viewport-block-size: calc( 100dvh - var(--viewport-inset-top) - var(--viewport-inset-bottom) );}
html.rounded-corners { --radius-sm: 2px; --radius-md: 4px;}
@supports (corner-shape: squircle) { html.rounded-corners { --radius-sm: 4px; --radius-md: 8px; }}
html { user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
font-size: clamp(0.5rem, var(--font-size), 2rem); font-family: var(--font-family); line-height: revert; /* revert modern-normalize's line-height */
/* biome-ignore lint/suspicious/noShorthandPropertyOverrides: Progressive enhancement */ /* biome-ignore lint/a11y/useGenericFontNames: Apple system font */ font: -apple-system-body;}
body { background-color: var(--bg); color: var(--text); block-size: 100dvh; inline-size: 100dvw; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
:is(small, .text-footnote) { font-size: smaller; opacity: 0.75;}
html.transparent-borders { --border: none; --border-subtle: none;}
html.transparency .scroll-fade { --scroll-fade-size: 1.5rem; --scroll-fade-top-offset: 0px; --scroll-fade-top: 0px; --scroll-fade-bottom: 0px; mask-image: linear-gradient( to bottom, black 0, black var(--scroll-fade-top-offset), transparent var(--scroll-fade-top-offset), black calc( var(--scroll-fade-top-offset) + min(var(--scroll-fade-size), var(--scroll-fade-top)) ), black calc(100% - min(var(--scroll-fade-size), var(--scroll-fade-bottom))), transparent );}
button:not(.no-touch-target),input,select { position: relative;
&::after { content: ""; position: absolute; inset: -0.25rem; }}
button:not(.native) { color: inherit; font: inherit; background: none; border: none; padding: 0;}
.artwork { background-color: color-mix(currentColor 10%, transparent);}
.artwork-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover;}
:is(.artwork, .artwork-image) { border-radius: var(--radius-sm); corner-shape: squircle;}
button.pressable--gentle { --button-press-scale-x: 1.05; --button-press-scale-y: 0.95; --button-hover-duration: 300ms; --button-press-duration: 50ms;}
html.motion { &.dynamic-colors { body, #queue .head { transition: background-color 300ms var(--ease-out-cubic); } }
img.image-loading { visibility: hidden; }
button:where(.pressable, :has(> .icon)) { transform-origin: var(--button-transform-origin, center); transition: transform var(--button-hover-duration) var(--ease-out-quart), opacity var(--button-hover-duration) var(--ease-out-quart); }
button:where(.pressable, :has(> .icon)):not(:disabled):not( :where(.pressable--gentle) ):hover, button.pressable.focused:not(:disabled, :active, .pressable--gentle) { transform: scale(1.125); }
button:where(.pressable, :has(> .icon)):not(:disabled):active { transform: scaleX(var(--button-press-scale-x)) scaleY(var(--button-press-scale-y)); opacity: 0.5; transition-duration: var(--button-press-duration); transition-timing-function: ease-out; }
button.is-activated { animation: button-activation calc(var(--button-hover-duration) + var(--button-press-duration)) ease-out; }
button.pressable--gentle.is-activated { animation-name: button-activation-gentle; }
.progress-bar.is-activated:not(.disabled) { animation: progress-bar-activation calc(var(--button-hover-duration) + var(--button-press-duration) - 35ms) ease-out; }}
@keyframes button-activation { 17.65% { transform: scaleX(var(--button-press-scale-x)) scaleY(var(--button-press-scale-y)); animation-timing-function: var(--ease-out-quart); }}
@keyframes button-activation-gentle { 14.29% { transform: scaleX(var(--button-press-scale-x)) scaleY(var(--button-press-scale-y)); animation-timing-function: var(--ease-out-quart); }}
@keyframes progress-bar-activation { 16% { transform: scaleY(var(--progress-press-scale, var(--button-press-scale-y))); animation-timing-function: var(--ease-out-quart); }}
@keyframes pop-in { from { opacity: 0; transform: scale(0.95); }}
#app { display: grid; grid-template-areas: "sidebar queue" "sidebar controls"; grid-template-columns: auto minmax(0, 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 (width <= 32rem) { #sidebar { display: contents; } .now-playing-container { grid-area: nowplaying; } html:not(.miniplayer) #now-playing { border-block-start: var(--border); } #app { overflow: hidden; grid-template-areas: "main" "nowplaying" "controls"; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; } #library, #queue { grid-area: main; min-inline-size: 0; } #library { transform: translateX(-100%); visibility: hidden; } html.show-library-mobile { #library { transform: translateX(0); visibility: visible; } #queue { transform: translateX(100%); visibility: hidden; } } html:dir(rtl) { &:not(.show-library-mobile) #library { transform: translateX(100%); } &.show-library-mobile #queue { transform: translateX(-100%); } } html:not(.show-library-mobile) #library, html.show-library-mobile #queue { pointer-events: none; } html.motion { :is(#library, #queue) { transition: transform 250ms var(--ease-out-cubic), visibility 250ms linear; } }}
html.miniplayer :is(#sidebar, .now-playing-container) { display: contents;}
html.miniplayer #app { grid-template-areas: "nowplaying" "controls"; grid-template-columns: 1fr; grid-template-rows: 1fr auto;}
html.miniplayer #now-playing { grid-area: nowplaying;}
html.miniplayer #library,html.miniplayer #queue { display: none;}
html.window-controls-overlay { --viewport-inset-top: max( env(safe-area-inset-top, 0px), calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 0px)) );}
html.window-controls-overlay :is(#queue, #library),html.miniplayer.window-controls-overlay #now-playing { margin-block-start: calc( var(--viewport-inset-top) - env(safe-area-inset-top, 0px) );}
html.miniplayer.window-controls-overlay #now-playing { padding-block-start: 0;}
.titlebar-drag-region { position: fixed; left: env(titlebar-area-x, 0px); top: env(titlebar-area-y, 0px); width: env(titlebar-area-width, 0px); height: env(titlebar-area-height, 0px); app-region: drag; z-index: 20;}