devins.page
a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
1/* var */
2:root {
3 color-scheme: light dark;
4
5 /* borders */
6 --border: light-dark(hsl(0 0% 0% / 0.25), hsl(0 0% 100% / 0.25));
7 --border-subtle: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
8
9 /* backgrounds */
10 --bg-secondary: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
11 --bg-tertiary: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
12 --bg-context-menu: light-dark(hsl(0 0% 100% / 0.75), hsl(0 0% 10% / 0.75));
13
14 /* state colors */
15 --playing: hsl(200 90% 50% / 0.25);
16 --playing-pulse: hsl(200 90% 50% / 0.5);
17 --selection-color: hsl(220 80% 45%);
18 --error-color: hsl(0 80% 50%);
19
20 /* cover art sizing (customize via settings) */
21 --icon: 16px;
22 --art-album: 32px;
23 --art-artist: 0px;
24 --art-song: 0px;
25 --art-now-playing: 128px;
26}
27
28/* resets */
29* {
30 margin: 0;
31 padding: 0;
32}
33
34/* document stuff */
35html {
36 font-size: 0.8125rem;
37}
38
39body {
40 font-family: system-ui, sans-serif;
41 overflow: hidden;
42 user-select: none;
43 -webkit-user-select: none;
44}
45
46/* interactive elements */
47a,
48button,
49[role="button"] {
50 cursor: default;
51}
52
53/* responsive sizing for mobile */
54@media (max-width: 768px) {
55 html {
56 font-size: 1rem;
57 }
58}