a simple web player for subsonic tinysub.devins.page
subsonic navidrome javascript
11
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: separate text border (and row bg) from other borders

+13 -11
+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
··· 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
··· 360 360 justify-content: center; 361 361 } 362 362 .row.odd { 363 - background: var(--bg-secondary); 363 + background: var(--bg-row); 364 364 } 365 365 .row.playing { 366 366 background: var(--playing);
+1 -1
src/lib/SettingsModal.svelte
··· 137 137 138 138 <style> 139 139 h3 { 140 - border-block-end: 1px solid var(--border-subtle); 140 + border-block-end: 1px solid var(--border-text); 141 141 padding-block-end: 0.25rem; 142 142 margin-block: 0 0.5rem; 143 143 }
+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>