a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
1:root {
2 color-scheme: light dark;
3 --bg-row: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
4 --bg-secondary: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
5 --bg-tertiary: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
6 --bg: Canvas;
7 --border-subtle: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
8 --border-text: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
9 --border: light-dark(hsl(0 0% 0% / 0.25), hsl(0 0% 100% / 0.25));
10 --playing: light-dark(hsl(200 90% 50% / 0.25), hsl(200 90% 50% / 0.4));
11 --text: CanvasText;
12}
13
14body {
15 background-color: var(--bg);
16 color: var(--text);
17}
18
19body.dynamic {
20 transition:
21 background-color 0.5s,
22 color 0.5s;
23}
24
25#app {
26 display: grid;
27 grid-template-areas:
28 "sidebar queue"
29 "playback playback"
30 "actions actions";
31 grid-template-columns: var(--sidebar-width, 20rem) 1fr;
32 grid-template-rows: 1fr auto auto;
33 block-size: 100%;
34 inline-size: 100%;
35}
36
37@media screen and (max-width: 32rem) {
38 #app {
39 grid-template-areas:
40 "queue"
41 "sidebar"
42 "playback"
43 "actions";
44 grid-template-columns: 1fr;
45 grid-template-rows: 1fr 1fr auto auto;
46 }
47}
48
49body.transparent-bg {
50 --bg-secondary: transparent;
51 --bg-tertiary: transparent;
52}
53
54body.transparent-borders {
55 --border: transparent;
56 --border-subtle: transparent;
57}
58
59/* web app/pwa stuff */
60body {
61 block-size: 100dvh;
62 inline-size: 100dvw;
63 border-top: env(safe-area-inset-top) solid transparent;
64 border-right: env(safe-area-inset-right) solid transparent;
65 border-left: env(safe-area-inset-left) solid var(--bg-secondary);
66 border-bottom: env(safe-area-inset-bottom) solid var(--bg-tertiary);
67 -webkit-tap-highlight-color: transparent;
68}
69
70html {
71 font-size: 0.8125rem;
72 user-select: none;
73 -webkit-user-select: none;
74 overscroll-behavior: none;
75}