a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
chore: separate text border (and row bg) from other borders
+13
-11
+7
-5
src/app.css
+7
-5
src/app.css
···
1
1
:root {
2
2
color-scheme: light dark;
3
-
--bg: Canvas;
4
-
--text: CanvasText;
3
+
--bg-row: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
5
4
--bg-secondary: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
6
5
--bg-tertiary: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
7
-
--border: light-dark(hsl(0 0% 0% / 0.25), hsl(0 0% 100% / 0.25));
6
+
--bg: Canvas;
8
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));
9
10
--playing: light-dark(hsl(200 90% 50% / 0.25), hsl(200 90% 50% / 0.4));
11
+
--text: CanvasText;
10
12
}
11
13
12
14
body {
···
58
60
body {
59
61
block-size: 100dvh;
60
62
inline-size: 100dvw;
61
-
padding-top: env(safe-area-inset-top);
62
-
padding-right: env(safe-area-inset-right);
63
+
border-top: env(safe-area-inset-top) solid transparent;
64
+
border-right: env(safe-area-inset-right) solid transparent;
63
65
border-left: env(safe-area-inset-left) solid var(--bg-secondary);
64
66
border-bottom: env(safe-area-inset-bottom) solid var(--bg-tertiary);
65
67
-webkit-tap-highlight-color: transparent;
+2
-2
src/lib/Library.svelte
+2
-2
src/lib/Library.svelte
···
1
1
<script lang="ts">
2
-
import { lib, settings, t } from "./app.svelte.js";
2
+
import { lib, t } from "./app.svelte.js";
3
3
import { api, asArray } from "./client.svelte.js";
4
4
import { ui } from "./app.svelte.js";
5
5
import TreeItem from "./TreeItem.svelte";
···
232
232
padding-block-end: 0.25rem;
233
233
background: none;
234
234
border: none;
235
-
border-block-end: 1px solid var(--border-subtle);
235
+
border-block-end: 1px solid var(--border-text);
236
236
font-weight: bold;
237
237
}
238
238
.label.focused {
+1
-1
src/lib/Queue.svelte
+1
-1
src/lib/Queue.svelte
+1
-1
src/lib/SettingsModal.svelte
+1
-1
src/lib/SettingsModal.svelte
+2
-2
src/lib/ShortcutsModal.svelte
+2
-2
src/lib/ShortcutsModal.svelte
···
63
63
64
64
<style>
65
65
h3 {
66
-
border-block-end: 1px solid var(--border-subtle);
66
+
border-block-end: 1px solid var(--border-text);
67
67
padding-block-end: 0.25rem;
68
68
margin-block: 0 0.5rem;
69
69
}
···
93
93
background: var(--bg-tertiary);
94
94
padding: 0.125rem 0.5rem;
95
95
border-radius: 0.25rem;
96
-
border-block-end: 1px solid var(--border-subtle);
96
+
border-block-end: 1px solid var(--border-text);
97
97
font-family: monospace;
98
98
}
99
99
</style>