melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: polish dark theme colors and add border accents

Browse Source
This commit is contained in:
mkelvers
2026-06-12 10:48:55 +02:00
parent 3ae09d4014
commit 15ad54a847
4 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
static/assets/style.css
View File

@@ -4,14 +4,15 @@
@source "../**/*.ts";
@theme {
--color-background: light-dark(#ffffff, #0b0c10);
--color-background-sidebar: light-dark(#f7f7f7, #0f1115);
--color-background-header: light-dark(#fbfbfb, #0f1115);
--color-background-surface: light-dark(#ffffff, #17181c);
--color-background-button: light-dark(#f5f5f5, #131417);
--color-background-button-hover: light-dark(#ececec, #1c1d22);
--color-foreground: light-dark(#111111, #f3f4f6);
--color-accent: #00b3c4;
--color-background: light-dark(#ffffff, #101113);
--color-background-sidebar: light-dark(#f7f7f7, #161719);
--color-background-header: light-dark(#fbfbfb, #161719);
--color-background-surface: light-dark(#ffffff, #1b1c1f);
--color-background-button: light-dark(#f5f5f5, #202125);
--color-background-button-hover: light-dark(#ececec, #292a2f);
--color-foreground: light-dark(#111111, #f4f1ea);
--color-accent: light-dark(#007a85, #00b3c4);
--color-on-accent: light-dark(#ffffff, #000000);
--color-surface-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
}
@@ -36,14 +37,14 @@
:root {
color-scheme: light dark;
--skeleton-base: light-dark(#e5e5e5, #1f1f1f);
--skeleton-highlight: light-dark(#d4d4d4, #2a2a2a);
--border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
--border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.035));
--shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.28));
--scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
--scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.2));
--scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.3));
--skeleton-base: light-dark(#e5e5e5, #242529);
--skeleton-highlight: light-dark(#d4d4d4, #303137);
--border: light-dark(rgba(0, 0, 0, 0.08), rgba(244, 241, 234, 0.08));
--border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.04));
--shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.32));
--scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.05));
--scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(244, 241, 234, 0.22));
--scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(244, 241, 234, 0.32));
}
html[data-theme="light"] {

2
templates/anime.gohtml
View File

@@ -179,7 +179,7 @@
{{end}}
</section>
</div>
<aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto bg-background-sidebar p-8 lg:flex">
<aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto border-l border-(--border-light) bg-background-sidebar p-8 lg:flex">
<div class="flex flex-col gap-8">
<section>
<h3 class="mb-6 text-base font-normal text-foreground">Information</h3>

2
templates/base.gohtml
View File

@@ -93,7 +93,7 @@
<!-- Sidebar -->
<div id="mobile-menu-backdrop" data-mobile-menu-backdrop class="fixed inset-0 z-40 hidden bg-black/50 lg:hidden"></div>
<div id="mobile-menu" data-mobile-open="false" class="fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-hidden bg-background-sidebar transition-transform duration-300 lg:static lg:translate-x-0 lg:transition-none">
<div id="mobile-menu" data-mobile-open="false" class="fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-hidden border-r border-(--border-light) bg-background-sidebar transition-transform duration-300 lg:static lg:translate-x-0 lg:transition-none">
{{block "sidebar" .}}
{{template "navigation" dict "CurrentPath" .CurrentPath "IsCollapsed" false}}
{{end}}

2
templates/watch.gohtml
View File

@@ -176,7 +176,7 @@
<div class="flex items-center justify-between">
<button type="button" data-segment-reset class="text-sm font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Reset</button>
<button type="button" data-segment-save class=" px-4 py-2 bg-accent text-sm font-normal text-black transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Save</button>
<button type="button" data-segment-save class=" px-4 py-2 bg-accent text-sm font-normal text-on-accent transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Save</button>
</div>
<div data-segment-error class="hidden text-sm text-red-400"></div>