a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
fix: qtwebengine compatibility
was testing in falkon on an old computer because firefox was too heavy and this commit fixes issues with that
+28
-9
+20
-7
src/css/base.css
+20
-7
src/css/base.css
···
1
1
/* var */
2
2
:root {
3
-
color-scheme: light dark;
4
-
5
3
/* 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));
4
+
--border: hsl(0 0% 0% / 0.25);
5
+
--border-subtle: hsl(0 0% 0% / 0.1);
8
6
9
7
/* 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));
8
+
--bg-secondary: hsl(0 0% 0% / 0.05);
9
+
--bg-tertiary: hsl(0 0% 0% / 0.1);
10
+
--bg-context-menu: hsl(0 0% 100% / 0.75);
13
11
14
12
/* state colors */
15
13
--playing: hsl(200 90% 50% / 0.25);
···
21
19
--art-artist: 24px;
22
20
--art-song: 16px;
23
21
--art-now-playing: 128px;
22
+
}
23
+
24
+
@supports (color-scheme: light dark) {
25
+
:root {
26
+
color-scheme: light dark;
27
+
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
+
}
24
37
}
25
38
26
39
/* resets */
+8
-2
src/css/components.css
+8
-2
src/css/components.css
···
1
1
/* LAYOUT */
2
2
body {
3
-
height: 100dvh;
3
+
height: 100vh;
4
4
display: grid;
5
5
grid-template-columns: 20rem 1fr;
6
6
grid-template-rows: 1fr auto auto;
···
8
8
"sidebar main"
9
9
"header header"
10
10
"footer footer";
11
+
}
12
+
13
+
@supports (height: 100dvh) {
14
+
body {
15
+
height: 100dvh;
16
+
}
11
17
}
12
18
13
19
/* HEADER */
···
409
415
.modal-actions {
410
416
display: flex;
411
417
gap: 0.5rem;
412
-
justify-content: end;
418
+
justify-content: flex-end;
413
419
}
414
420
415
421
.modal-actions button {