feat(ui): sidebar app shell and bold design system
Replace the top-nav with a fixed left sidebar + slim content topbar (the Komga/Audiobookshelf layout), the signature change versus the conservative tighten-ui branch. - App shell: .app-sidebar (off-canvas on mobile via Alpine mobileMenuOpen, pinned at 16rem on lg), .app-topbar (fixed, blurred, 4rem), and .app-subbar for in-page sticky bars (parks under the topbar). Content is auto-offset via body:has(.app-sidebar) so reader.templ/error.templ (which have no sidebar) are untouched. - Header rebuilt as the sidebar: logo + vertical nav (activeClass), an inline Appearance picker driven by ThemeOptions/WoodOptions, and an inline account menu / sign-in (preserving the inline htmx login). The search lives in the topbar so its dropdown still anchors correctly. - Bolder primitives: .card -> rounded-2xl, cinematic .book-card-cover hover overlay with a quick-action affordance, .brand-gradient hero surface, .hero-backdrop (blurred cover) and .stat-card utilities.
This commit is contained in:
+209
-512
@@ -1,531 +1,228 @@
|
||||
package templates
|
||||
|
||||
templ Header(user User, currentPath string) {
|
||||
<nav x-data="header" x-init="initializeSearch(); initializeTheme(); loadWoodPaneling(); updateWoodPanelingIndicators(); restoreLibrarySelection(); initializeScanListener()" class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
|
||||
<div x-data="{}" x-init="console.log('Alpine is working!', $el)"></div>
|
||||
<div class="w-full px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<!-- Left: App Title & Navigation -->
|
||||
<div class="flex items-center space-x-6">
|
||||
<a href="/dashboard" class="text-xl font-bold hover:opacity-80 transition-opacity flex items-center gap-2" style="color: var(--text-primary); text-decoration: none;">
|
||||
<span>📚 Bookhoard</span>
|
||||
<!-- Scan spinner -->
|
||||
<svg
|
||||
x-show="scanning"
|
||||
x-transition
|
||||
class="h-5 w-5 animate-spin"
|
||||
style="color: var(--accent);"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span x-show="scanning && scanProgress > 0" x-transition class="text-xs font-normal" style="color: var(--text-secondary);" x-text="scanProgress + '%'"></span>
|
||||
</a>
|
||||
<div class="hidden nav:flex items-center space-x-4">
|
||||
<a href="/dashboard" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Library
|
||||
</a>
|
||||
<a
|
||||
href="/bookshelf"
|
||||
class="text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-secondary); text-decoration: none;"
|
||||
>
|
||||
All Books
|
||||
</a>
|
||||
<a href="/series" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Series
|
||||
</a>
|
||||
<a href="/collections" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Collections
|
||||
</a>
|
||||
<a href="/progress" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Progress
|
||||
</a>
|
||||
<a href="/devices" class="text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Devices
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Center: Search Box -->
|
||||
<div class="flex-1 max-w-2xl mx-8 hidden nav:block">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="header-search"
|
||||
placeholder="Search your library..."
|
||||
class="w-full px-4 py-2 pl-10 border rounded-lg"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<svg class="absolute left-3 top-2.5 h-5 w-5" style="color: var(--text-secondary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Theme Switcher & User Menu -->
|
||||
<div x-data="{ themeDropdownOpen: false, userMenuOpen: false }" class="hidden nav:flex items-center space-x-4">
|
||||
<!-- Theme Switcher -->
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="themeDropdownOpen = !themeDropdownOpen"
|
||||
type="button"
|
||||
class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
|
||||
style="background-color: var(--bg-primary);"
|
||||
>
|
||||
<svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
x-show="themeDropdownOpen"
|
||||
@click.outside="themeDropdownOpen = false"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50"
|
||||
style="background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;"
|
||||
>
|
||||
<div class="p-4">
|
||||
<h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary)">Select Theme</h3>
|
||||
<div class="space-y-2">
|
||||
<button
|
||||
@click="changeTheme('tokyo-night'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary); background-color: var(--bg-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #7aa2f7;"></span>
|
||||
Tokyo Night
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('dracula'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary); background-color: var(--bg-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #bd93f9;"></span>
|
||||
Dracula
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('nord'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary); background-color: var(--bg-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #88c0d0;"></span>
|
||||
Nord
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('solarized-dark'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary); background-color: var(--bg-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #2aa198;"></span>
|
||||
Solarized Dark
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('monokai'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary); background-color: var(--bg-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #a6e22e;"></span>
|
||||
Monokai
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('one-dark-pro'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary); background-color: var(--bg-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #61dafb;"></span>
|
||||
One Dark Pro
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('material-dark'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary); background-color: var(--bg-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #80cbc4;"></span>
|
||||
Material Dark
|
||||
</button>
|
||||
<div class="border-t pt-2 mt-2" style="border-color: var(--border);">
|
||||
<p class="text-xs mb-2" style="color: var(--text-secondary)">Bookshelf Background</p>
|
||||
<button
|
||||
@click="changeWoodPaneling('none'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
data-wood="none"
|
||||
>
|
||||
None
|
||||
</button>
|
||||
<button
|
||||
@click="changeWoodPaneling('wood-light'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
data-wood="wood-light"
|
||||
>
|
||||
<span
|
||||
class="inline-block w-4 h-4 rounded mr-2"
|
||||
style="background: url('/static/textures/wood-light.png'); background-size: cover;"
|
||||
></span>
|
||||
Wood Light
|
||||
</button>
|
||||
<button
|
||||
@click="changeWoodPaneling('wood-dark'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
data-wood="wood-dark"
|
||||
>
|
||||
<span
|
||||
class="inline-block w-4 h-4 rounded mr-2"
|
||||
style="background: url('/static/textures/wood-dark.png'); background-size: cover;"
|
||||
></span>
|
||||
Wood Dark
|
||||
</button>
|
||||
<button
|
||||
@click="changeWoodPaneling('wood-mahogany'); themeDropdownOpen = false"
|
||||
type="button"
|
||||
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
data-wood="wood-mahogany"
|
||||
>
|
||||
<span
|
||||
class="inline-block w-4 h-4 rounded mr-2"
|
||||
style="background: url('/static/textures/wood-mahogany.png'); background-size: cover;"
|
||||
></span>
|
||||
Wood Mahogany
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- User Icon with Dropdown -->
|
||||
<div class="relative">
|
||||
if user.ID != "" {
|
||||
<!-- LOGGED IN: Show user menu with logout -->
|
||||
<div
|
||||
x-data="header"
|
||||
x-init="initializeSearch(); initializeTheme(); loadWoodPaneling(); updateWoodPanelingIndicators(); restoreLibrarySelection(); initializeScanListener()"
|
||||
>
|
||||
<!-- Mobile backdrop -->
|
||||
<div
|
||||
class="app-sidebar-backdrop lg:hidden"
|
||||
:class="{ 'is-open': mobileMenuOpen }"
|
||||
@click="mobileMenuOpen = false"
|
||||
x-cloak
|
||||
></div>
|
||||
<!-- Sidebar -->
|
||||
<aside class="app-sidebar" :class="{ 'is-open': mobileMenuOpen }">
|
||||
<!-- Logo -->
|
||||
<a
|
||||
href="/dashboard"
|
||||
class="flex items-center gap-2.5 px-5 h-16 shrink-0 border-b"
|
||||
style="border-color: color-mix(in srgb, var(--text-primary) 7%, transparent);"
|
||||
>
|
||||
<span class="text-xl">📚</span>
|
||||
<span class="font-bold text-lg tracking-tight" style="color: var(--text-primary)">Bookhoard</span>
|
||||
<svg
|
||||
x-show="scanning"
|
||||
x-cloak
|
||||
x-transition
|
||||
class="h-4 w-4 animate-spin ml-auto"
|
||||
style="color: var(--accent);"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<span
|
||||
x-show="scanning && scanProgress > 0"
|
||||
x-cloak
|
||||
x-transition
|
||||
class="block px-5 py-1.5 text-xs font-medium -mt-1"
|
||||
style="color: var(--text-secondary);"
|
||||
x-text="'Scanning… ' + scanProgress + '%'"
|
||||
></span>
|
||||
<!-- Primary navigation -->
|
||||
<nav class="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
|
||||
<a href="/dashboard" class={ activeClass(currentPath, "/dashboard") }>
|
||||
@Icon("library", "h-5 w-5 shrink-0")
|
||||
<span>Library</span>
|
||||
</a>
|
||||
<a href="/bookshelf" class={ activeClass(currentPath, "/bookshelf") }>
|
||||
@Icon("book", "h-5 w-5 shrink-0")
|
||||
<span>All Books</span>
|
||||
</a>
|
||||
<a href="/series" class={ activeClass(currentPath, "/series") }>
|
||||
@Icon("layers", "h-5 w-5 shrink-0")
|
||||
<span>Series</span>
|
||||
</a>
|
||||
<a href="/collections" class={ activeClass(currentPath, "/collections") }>
|
||||
@Icon("folder", "h-5 w-5 shrink-0")
|
||||
<span>Collections</span>
|
||||
</a>
|
||||
<a href="/progress" class={ activeClass(currentPath, "/progress") }>
|
||||
@Icon("clock", "h-5 w-5 shrink-0")
|
||||
<span>Progress</span>
|
||||
</a>
|
||||
<a href="/devices" class={ activeClass(currentPath, "/devices") }>
|
||||
@Icon("device", "h-5 w-5 shrink-0")
|
||||
<span>Devices</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Bottom: theme picker + user -->
|
||||
<div
|
||||
class="shrink-0 px-3 py-3 space-y-2 border-t"
|
||||
style="border-color: color-mix(in srgb, var(--text-primary) 7%, transparent);"
|
||||
>
|
||||
if user.ID != "" {
|
||||
@SidebarUserMenu(user)
|
||||
} else {
|
||||
@SidebarSignIn(currentPath)
|
||||
}
|
||||
<!-- Theme picker -->
|
||||
<div x-data="{ themeOpen: false }">
|
||||
<button
|
||||
type="button"
|
||||
@click="themeOpen = !themeOpen"
|
||||
class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-content-muted hover:text-content hover:bg-surface-hover"
|
||||
>
|
||||
@Icon("palette", "h-5 w-5 shrink-0")
|
||||
<span>Appearance</span>
|
||||
@Icon("chevron-down", "h-4 w-4 ml-auto transition-transform")
|
||||
</button>
|
||||
<div x-show="themeOpen" x-cloak x-transition class="mt-1 space-y-0.5 pl-1">
|
||||
for _, opt := range ThemeOptions {
|
||||
<button
|
||||
@click="userMenuOpen = !userMenuOpen"
|
||||
type="button"
|
||||
class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors"
|
||||
style="background-color: var(--bg-primary);"
|
||||
@click={ "changeTheme('" + opt.Name + "'); themeOpen = false" }
|
||||
class="w-full flex items-center gap-2.5 px-3 py-1.5 rounded-lg text-sm transition-colors hover:bg-surface-hover"
|
||||
style="color: var(--text-secondary);"
|
||||
>
|
||||
<svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
</svg>
|
||||
<span class="text-sm hidden sm:block" style="color: var(--text-primary)">{ user.Username }</span>
|
||||
<span class="inline-block w-3.5 h-3.5 rounded-full shrink-0 ring-1 ring-black/10" style={ "background-color: " + opt.Color }></span>
|
||||
<span class="flex-1 text-left">{ opt.Label }</span>
|
||||
if user.Theme == opt.Name {
|
||||
@Icon("check", "h-4 w-4 shrink-0")
|
||||
}
|
||||
</button>
|
||||
<div
|
||||
x-show="userMenuOpen"
|
||||
@click.outside="userMenuOpen = false"
|
||||
x-transition
|
||||
class="absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50"
|
||||
style="background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;"
|
||||
>
|
||||
<div class="py-1">
|
||||
<a href="/profile" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
|
||||
Profile
|
||||
</a>
|
||||
if user.Role == "admin" {
|
||||
<a href="/admin" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
|
||||
Admin Panel
|
||||
</a>
|
||||
}
|
||||
<div class="border-t my-1" style="border-color: var(--border);"></div>
|
||||
<button
|
||||
@click="logout(); userMenuOpen = false"
|
||||
type="button"
|
||||
class="block w-full text-left px-4 py-2 text-sm hover:opacity-80"
|
||||
style="color: var(--text-primary); background-color: var(--bg-secondary);"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
} else {
|
||||
<!-- LOGGED OUT: Show login form -->
|
||||
}
|
||||
<div class="my-1.5 mx-3 border-t" style="border-color: color-mix(in srgb, var(--text-primary) 7%, transparent);"></div>
|
||||
<p class="px-3 pb-1 text-xs font-medium uppercase tracking-wide" style="color: var(--text-secondary);">Bookshelf</p>
|
||||
for _, w := range WoodOptions {
|
||||
<button
|
||||
@click="userMenuOpen = !userMenuOpen"
|
||||
type="button"
|
||||
class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors"
|
||||
style="background-color: var(--bg-primary);"
|
||||
@click={ "changeWoodPaneling('" + w.Name + "')" }
|
||||
class="wood-paneling-btn w-full flex items-center gap-2.5 px-3 py-1.5 rounded-lg text-sm transition-colors"
|
||||
data-wood={ w.Name }
|
||||
style="color: var(--text-secondary);"
|
||||
>
|
||||
<svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
</svg>
|
||||
<span class="text-sm hidden sm:block" style="color: var(--text-primary)">Login</span>
|
||||
<span class="inline-block w-3.5 h-3.5 rounded-full shrink-0 ring-1 ring-black/10" style="background-color: color-mix(in srgb, var(--text-primary) 12%, transparent);"></span>
|
||||
<span class="flex-1 text-left">{ w.Label }</span>
|
||||
</button>
|
||||
<div
|
||||
x-show="userMenuOpen"
|
||||
@click.outside="userMenuOpen = false"
|
||||
x-transition
|
||||
class="absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50 p-4"
|
||||
style="background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;"
|
||||
>
|
||||
<form hx-post="/api/auth/login" hx-target="#login-result" hx-swap="innerHTML" class="space-y-3">
|
||||
<input type="hidden" name="redirect" value="{ currentPath }"/>
|
||||
<div>
|
||||
<label class="block text-sm mb-1" style="color: var(--text-secondary)">Email or Username</label>
|
||||
<input type="text" name="login" class="w-full px-3 py-2 border rounded text-sm" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);" required/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1" style="color: var(--text-secondary)">Password</label>
|
||||
<input type="password" name="password" class="w-full px-3 py-2 border rounded text-sm" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);" required/>
|
||||
</div>
|
||||
<button type="submit" class="w-full py-2 rounded text-sm" style="background-color: var(--accent); color: white;">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
<div id="login-result"></div>
|
||||
<div class="border-t my-2" style="border-color: var(--border);"></div>
|
||||
<a href="/register" class="block text-center text-sm hover:opacity-80" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Don't have an account? Sign Up
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||
type="button"
|
||||
class="nav:hidden p-2 rounded-lg hover:opacity-80 transition-opacity"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary);"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
x-show="mobileMenuOpen"
|
||||
@click.outside="mobileMenuOpen = false"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 -translate-y-2"
|
||||
class="nav:hidden border-t"
|
||||
style="border-color: var(--border); background-color: var(--bg-secondary); display: none;"
|
||||
x-data="{ mobileThemeOpen: false }"
|
||||
>
|
||||
<div class="px-4 py-3 space-y-1">
|
||||
<div class="relative mb-3">
|
||||
<input
|
||||
type="text"
|
||||
id="header-search-mobile"
|
||||
placeholder="Search your library..."
|
||||
class="w-full px-4 py-2 pl-10 border rounded-lg"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<svg class="absolute left-3 top-2.5 h-5 w-5" style="color: var(--text-secondary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<a href="/dashboard" class="block px-3 py-2 rounded-lg text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Library
|
||||
</a>
|
||||
<a href="/bookshelf" class="block px-3 py-2 rounded-lg text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
All Books
|
||||
</a>
|
||||
<a href="/series" class="block px-3 py-2 rounded-lg text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Series
|
||||
</a>
|
||||
<a href="/collections" class="block px-3 py-2 rounded-lg text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Collections
|
||||
</a>
|
||||
<a href="/progress" class="block px-3 py-2 rounded-lg text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Progress
|
||||
</a>
|
||||
<a href="/devices" class="block px-3 py-2 rounded-lg text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Devices
|
||||
</a>
|
||||
<div class="border-t my-2" style="border-color: var(--border);"></div>
|
||||
<button
|
||||
@click="mobileThemeOpen = !mobileThemeOpen"
|
||||
type="button"
|
||||
class="flex items-center space-x-2 w-full px-3 py-2 rounded-lg text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-secondary);"
|
||||
>
|
||||
<svg class="h-5 w-5" style="color: var(--text-secondary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
|
||||
</svg>
|
||||
<span>Theme</span>
|
||||
<svg class="h-4 w-4 ml-auto transform transition-transform" :class="{ 'rotate-180': mobileThemeOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="mobileThemeOpen" x-transition class="pl-8 pr-2 py-1 space-y-1">
|
||||
<button
|
||||
@click="changeTheme('tokyo-night'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #7aa2f7;"></span>
|
||||
Tokyo Night
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('dracula'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #bd93f9;"></span>
|
||||
Dracula
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('nord'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #88c0d0;"></span>
|
||||
Nord
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('solarized-dark'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #2aa198;"></span>
|
||||
Solarized Dark
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('monokai'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #a6e22e;"></span>
|
||||
Monokai
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('one-dark-pro'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #61dafb;"></span>
|
||||
One Dark Pro
|
||||
</button>
|
||||
<button
|
||||
@click="changeTheme('material-dark'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #80cbc4;"></span>
|
||||
Material Dark
|
||||
</button>
|
||||
<div class="border-t pt-2 mt-2" style="border-color: var(--border);">
|
||||
<p class="text-xs mb-2 px-3" style="color: var(--text-secondary)">Bookshelf Background</p>
|
||||
<button
|
||||
@click="changeWoodPaneling('none'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="wood-paneling-btn w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
data-wood="none"
|
||||
>
|
||||
None
|
||||
</button>
|
||||
<button
|
||||
@click="changeWoodPaneling('wood-light'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="wood-paneling-btn w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
data-wood="wood-light"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background: url('/static/textures/wood-light.png'); background-size: cover;"></span>
|
||||
Wood Light
|
||||
</button>
|
||||
<button
|
||||
@click="changeWoodPaneling('wood-dark'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="wood-paneling-btn w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
data-wood="wood-dark"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background: url('/static/textures/wood-dark.png'); background-size: cover;"></span>
|
||||
Wood Dark
|
||||
</button>
|
||||
<button
|
||||
@click="changeWoodPaneling('wood-mahogany'); mobileThemeOpen = false"
|
||||
type="button"
|
||||
class="wood-paneling-btn w-full text-left px-3 py-2 rounded text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-primary);"
|
||||
data-wood="wood-mahogany"
|
||||
>
|
||||
<span class="inline-block w-4 h-4 rounded mr-2" style="background: url('/static/textures/wood-mahogany.png'); background-size: cover;"></span>
|
||||
Wood Mahogany
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t my-2" style="border-color: var(--border);"></div>
|
||||
if user.ID != "" {
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center space-x-2 px-3 py-2">
|
||||
<svg class="h-5 w-5" style="color: var(--text-secondary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
</svg>
|
||||
<span class="text-sm" style="color: var(--text-primary)">{ user.Username }</span>
|
||||
</div>
|
||||
<a href="/profile" class="block px-3 py-2 pl-10 rounded-lg text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Profile
|
||||
</a>
|
||||
if user.Role == "admin" {
|
||||
<a href="/admin" class="block px-3 py-2 pl-10 rounded-lg text-sm hover:opacity-80 transition-opacity" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Admin Panel
|
||||
</a>
|
||||
}
|
||||
<button
|
||||
@click="logout()"
|
||||
type="button"
|
||||
class="block w-full text-left px-3 py-2 pl-10 rounded-lg text-sm hover:opacity-80 transition-opacity"
|
||||
style="color: var(--text-secondary);"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
} else {
|
||||
<div class="space-y-3">
|
||||
<form hx-post="/api/auth/login" hx-target="#login-result-mobile" hx-swap="innerHTML" class="space-y-3">
|
||||
<input type="hidden" name="redirect" value="{ currentPath }"/>
|
||||
<div>
|
||||
<label class="block text-sm mb-1" style="color: var(--text-secondary)">Email or Username</label>
|
||||
<input type="text" name="login" class="w-full px-3 py-2 border rounded text-sm" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);" required/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm mb-1" style="color: var(--text-secondary)">Password</label>
|
||||
<input type="password" name="password" class="w-full px-3 py-2 border rounded text-sm" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);" required/>
|
||||
</div>
|
||||
<button type="submit" class="w-full py-2 rounded text-sm" style="background-color: var(--accent); color: white;">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
<div id="login-result-mobile"></div>
|
||||
<a href="/register" class="block text-center text-sm hover:opacity-80" style="color: var(--text-secondary); text-decoration: none;">
|
||||
Don't have an account? Sign Up
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</aside>
|
||||
<!-- Topbar -->
|
||||
<header class="app-topbar">
|
||||
<div class="flex items-center gap-3 px-4 sm:px-6 h-full">
|
||||
<button
|
||||
type="button"
|
||||
class="app-mobile-only icon-btn"
|
||||
@click="mobileMenuOpen = true"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
@Icon("menu", "h-5 w-5")
|
||||
</button>
|
||||
<div class="relative flex-1 max-w-xl">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" style="color: var(--text-secondary);">
|
||||
@Icon("search", "h-4 w-4")
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="header-search"
|
||||
placeholder="Search your library…"
|
||||
class="input pl-10"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<script type="module" src="/static/main.js"></script>
|
||||
</div>
|
||||
}
|
||||
|
||||
// SidebarUserMenu is the bottom-of-sidebar account control for signed-in users.
|
||||
templ SidebarUserMenu(user User) {
|
||||
<div x-data="{ userOpen: false }">
|
||||
<button
|
||||
type="button"
|
||||
@click="userOpen = !userOpen"
|
||||
class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-surface-hover"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
<span class="grid place-items-center h-7 w-7 rounded-full shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
|
||||
@Icon("user", "h-4 w-4")
|
||||
</span>
|
||||
<span class="flex-1 text-left truncate">{ user.Username }</span>
|
||||
@Icon("chevron-down", "h-4 w-4 shrink-0 transition-transform")
|
||||
</button>
|
||||
<div x-show="userOpen" x-cloak x-transition class="mt-1 space-y-0.5 pl-1">
|
||||
<a href="/profile" class="flex items-center gap-3 px-3 py-1.5 rounded-lg text-sm transition-colors hover:bg-surface-hover" style="color: var(--text-secondary);">
|
||||
@Icon("user", "h-4 w-4")
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
if user.Role == "admin" {
|
||||
<a href="/admin" class="flex items-center gap-3 px-3 py-1.5 rounded-lg text-sm transition-colors hover:bg-surface-hover" style="color: var(--text-secondary);">
|
||||
@Icon("settings", "h-4 w-4")
|
||||
<span>Admin Panel</span>
|
||||
</a>
|
||||
}
|
||||
<button
|
||||
type="button"
|
||||
@click="logout()"
|
||||
class="w-full flex items-center gap-3 px-3 py-1.5 rounded-lg text-sm transition-colors hover:bg-surface-hover"
|
||||
style="color: var(--text-secondary);"
|
||||
>
|
||||
@Icon("logout", "h-4 w-4")
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<script type="module" src="/static/main.js"></script>
|
||||
</div>
|
||||
}
|
||||
|
||||
// SidebarSignIn is an inline sign-in for signed-out visitors, preserving the
|
||||
// original header's inline login (htmx POST) so users can auth from any page.
|
||||
templ SidebarSignIn(currentPath string) {
|
||||
<div x-data="{ signInOpen: false }">
|
||||
<button
|
||||
type="button"
|
||||
@click="signInOpen = !signInOpen"
|
||||
class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-surface-hover"
|
||||
style="color: var(--text-primary);"
|
||||
>
|
||||
<span class="grid place-items-center h-7 w-7 rounded-full shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
|
||||
@Icon("user", "h-4 w-4")
|
||||
</span>
|
||||
<span class="flex-1 text-left">Sign in</span>
|
||||
</button>
|
||||
<div x-show="signInOpen" x-cloak x-transition class="mt-1 px-1">
|
||||
<form
|
||||
hx-post="/api/auth/login"
|
||||
hx-target="#login-result"
|
||||
hx-swap="innerHTML"
|
||||
class="space-y-2"
|
||||
>
|
||||
<input type="hidden" name="redirect" value={ currentPath }/>
|
||||
<input type="text" name="login" class="input py-1.5 text-sm" placeholder="Email or username" required/>
|
||||
<input type="password" name="password" class="input py-1.5 text-sm" placeholder="Password" required/>
|
||||
<button type="submit" class="btn btn-primary w-full py-1.5 text-sm">Sign In</button>
|
||||
</form>
|
||||
<div id="login-result"></div>
|
||||
<a href="/register" class="block text-center text-xs mt-2 hover:underline" style="color: var(--text-secondary);">
|
||||
Create an account
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
package templates
|
||||
|
||||
templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, actions ...templ.Component) {
|
||||
<div class="sticky top-0 z-40 bg-opacity-95 backdrop-blur border-b" style="background-color: var(--bg-primary);">
|
||||
<div class="w-full px-4 py-3 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="text-sm font-medium" style="color: var(--text-secondary)">Library:</label>
|
||||
<div
|
||||
class="app-subbar backdrop-blur border-b"
|
||||
style="background-color: color-mix(in srgb, var(--bg-primary) 88%, transparent); border-color: color-mix(in srgb, var(--text-primary) 6%, transparent);"
|
||||
>
|
||||
<div class="w-full px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<label class="text-sm font-medium" style="color: var(--text-secondary)">Library</label>
|
||||
<select
|
||||
id="library-select"
|
||||
name="library_id"
|
||||
class="px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-secondary); color: var(--text-primary);"
|
||||
class="input w-auto py-1.5 pr-8 cursor-pointer"
|
||||
>
|
||||
<option value="">All Libraries ({ TotalMediaCount(libData) })</option>
|
||||
for _, lib := range libData {
|
||||
if lib.ID == currentLibraryID {
|
||||
<option value={ lib.ID } selected>{ lib.Name } ({ lib.MediaCount })</option>
|
||||
} else {
|
||||
<option value={ lib.ID }>{ lib.Name } ({ lib.MediaCount })</option>
|
||||
<option value="">All Libraries ({ TotalMediaCount(libData) })</option>
|
||||
for _, lib := range libData {
|
||||
if lib.ID == currentLibraryID {
|
||||
<option value={ lib.ID } selected>{ lib.Name } ({ lib.MediaCount })</option>
|
||||
} else {
|
||||
<option value={ lib.ID }>{ lib.Name } ({ lib.MediaCount })</option>
|
||||
}
|
||||
}
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
if len(actions) > 0 {
|
||||
@@ -42,18 +44,16 @@ templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, actions ..
|
||||
templ DashboardActions() {
|
||||
<button
|
||||
data-action="open-dashboard-settings"
|
||||
class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
|
||||
style="background-color: var(--bg-secondary);"
|
||||
class="icon-btn"
|
||||
title="Customize Dashboard"
|
||||
>
|
||||
⚙️
|
||||
@Icon("settings", "h-5 w-5")
|
||||
</button>
|
||||
<button
|
||||
data-action="reload-page"
|
||||
class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
|
||||
style="background-color: var(--bg-secondary);"
|
||||
class="icon-btn"
|
||||
title="Refresh"
|
||||
>
|
||||
🔄
|
||||
@Icon("refresh", "h-5 w-5")
|
||||
</button>
|
||||
}
|
||||
|
||||
+186
-9
@@ -169,11 +169,107 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Header is sticky on every authenticated page, plus docs. */
|
||||
.header-nav {
|
||||
position: sticky;
|
||||
/*
|
||||
* App shell — a fixed left sidebar with a content area to its right.
|
||||
* The sidebar is off-canvas on mobile (toggled via the `is-open` class,
|
||||
* which Alpine flips through `mobileMenuOpen`) and pinned on >= lg.
|
||||
*/
|
||||
:root {
|
||||
--sidebar-w: 16rem;
|
||||
--topbar-h: 4rem;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: var(--sidebar-w);
|
||||
z-index: 60;
|
||||
background-color: var(--bg-secondary);
|
||||
border-right: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.app-sidebar.is-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.app-sidebar-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 55;
|
||||
background: var(--surface-overlay);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.app-sidebar-backdrop.is-open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Desktop: pin the sidebar, offset body content, drop the backdrop. */
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
padding-left: var(--sidebar-w);
|
||||
}
|
||||
.app-sidebar {
|
||||
transform: none;
|
||||
}
|
||||
.app-sidebar-backdrop {
|
||||
display: none !important;
|
||||
}
|
||||
.app-mobile-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1023.98px) {
|
||||
.app-desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Slim fixed topbar that spans the content area (right of the sidebar). */
|
||||
.app-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 40;
|
||||
height: var(--topbar-h);
|
||||
background-color: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
|
||||
}
|
||||
|
||||
/*
|
||||
* Content offsets — applied only on pages whose Header renders the
|
||||
* fixed sidebar (reader.templ / error.templ have no sidebar, so they are
|
||||
* left untouched).
|
||||
*/
|
||||
body:has(.app-sidebar) {
|
||||
padding-top: var(--topbar-h);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
body:has(.app-sidebar) {
|
||||
padding-left: var(--sidebar-w);
|
||||
}
|
||||
/* On desktop the topbar starts right of the pinned sidebar. */
|
||||
.app-topbar {
|
||||
left: var(--sidebar-w);
|
||||
}
|
||||
}
|
||||
|
||||
/* A secondary sticky bar (e.g. library switcher) parks under the topbar. */
|
||||
.app-subbar {
|
||||
position: sticky;
|
||||
top: var(--topbar-h);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
/* Smooth, theme-aware scrollbars */
|
||||
@@ -187,8 +283,8 @@
|
||||
|
||||
.card {
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
|
||||
border-radius: 1rem;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
@@ -318,21 +414,102 @@
|
||||
.book-card {
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
|
||||
border-radius: 0.625rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.book-card:hover {
|
||||
transform: translateY(-3px);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
|
||||
border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
|
||||
}
|
||||
/* Cinematic cover overlay: a centered quick-action that fades in on hover. */
|
||||
.book-card-cover {
|
||||
position: relative;
|
||||
}
|
||||
.book-card-cover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.18s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.book-card:hover .book-card-cover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
.book-card-action {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
.book-card:hover .book-card-action {
|
||||
opacity: 1;
|
||||
}
|
||||
.book-card-action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border-radius: 9999px;
|
||||
background-color: color-mix(in srgb, var(--accent) 92%, white);
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.book-card-meta {
|
||||
background-color: var(--bg-secondary);
|
||||
padding: 0.5rem 0.625rem;
|
||||
}
|
||||
|
||||
/* ---------- Bold accents ---------- */
|
||||
|
||||
/* Signature gradient surface for heroes / primary panels. */
|
||||
.brand-gradient {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--accent) 28%, var(--bg-secondary)),
|
||||
var(--bg-secondary) 62%
|
||||
);
|
||||
}
|
||||
|
||||
/* Blurred cover backdrop used behind the book-detail hero. */
|
||||
.hero-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(28px) saturate(1.4);
|
||||
transform: scale(1.15);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.hero-backdrop::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
color-mix(in srgb, var(--bg-primary) 35%, transparent),
|
||||
var(--bg-primary) 92%
|
||||
);
|
||||
}
|
||||
|
||||
/* Stat tile for analytics / dashboard summaries. */
|
||||
.stat-card {
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
|
||||
border-radius: 1rem;
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* ---------- TriState Button (has_cover filter) ---------- */
|
||||
.tristate-btn {
|
||||
background-color: var(--bg-primary);
|
||||
|
||||
Reference in New Issue
Block a user