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