style(client): add topbar glow, sidebar shadow, and view toggle controls

This commit is contained in:
neon
2025-12-22 17:10:40 -06:00
parent 51107bae59
commit 7722d7b87b
5 changed files with 16 additions and 3 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

+9
View File
@@ -327,6 +327,15 @@ html.radius-rounded {
--shadow-2xl: var(--elevation-2xl);
}
.glow-wrapper {
background-image:
url('/topbar.png'), radial-gradient(50% 50% at center -25px, color-mix(in oklch, var(--primary) 35%, transparent) 0%, transparent 100%);
background-blend-mode: hard-light, color-dodge;
background-position: top;
background-repeat: no-repeat;
background-size: auto 12rem;
}
@layer base {
* {
@apply border-border outline-ring/50;
+5 -1
View File
@@ -22,7 +22,11 @@ const navItems = [
</script>
<template>
<Sidebar collapsible="icon" style="--sidebar-border: color-mix(in oklch, var(--primary) 18%, transparent)">
<Sidebar
collapsible="icon"
style="--sidebar-border: color-mix(in oklch, var(--primary) 18%, transparent)"
class="[&>div:last-child]:shadow-[4px_0_12px_-2px_oklch(0_0_0/0.08)]"
>
<SidebarHeader class="border-b border-sidebar-border">
<div class="flex items-center gap-2.5 px-1 py-1">
<!-- Logo mark -->
+1 -1
View File
@@ -48,7 +48,7 @@ watch(search, () => {
<SidebarProvider>
<AppSidebar />
<SidebarInset class="flex flex-col min-h-screen">
<SidebarInset class="flex flex-col min-h-screen glow-wrapper">
<AppHeader
title="Library"
:total="total"
+1 -1
View File
@@ -5,7 +5,7 @@
{
"idx": 0,
"version": "7",
"when": 1766491316570,
"when": 1766491765889,
"tag": "0000_init_schema",
"breakpoints": true
}