From 875e4abb46ec4a5dab2139c0a65f378c2309f2e4 Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Tue, 24 Feb 2026 17:00:11 -0500 Subject: [PATCH] fix: preserve wood paneling on dashboard refresh and improve colors - Fix View All link flashing by preserving data-wood attribute when dashboard re-renders - Update wood-dark text color to match wood-mahogany (#f5f5f5) for better consistency - Add smart link colors for wood paneling (#0066cc for light wood, #66ccff for dark woods) - Fix carousel arrow gradients to be less harsh on wood backgrounds (0.6 for light, 0.3 for dark) - Remove accent color preservation rule that was conflicting with wood-specific link colors --- web/src/dashboard.ts | 7 +++++++ web/static/input.css | 36 +++++++++++++++++++++++++++++------- web/static/style.css | 43 ++++++++++++++++++++++++++++++++++++------- 3 files changed, 72 insertions(+), 14 deletions(-) diff --git a/web/src/dashboard.ts b/web/src/dashboard.ts index f8dab4d..bd33bf7 100644 --- a/web/src/dashboard.ts +++ b/web/src/dashboard.ts @@ -128,6 +128,9 @@ async function switchLibrary(libraryId: string): Promise { function renderCollections(sections: SectionData[]): void { const container = document.getElementById('collections-container') as HTMLElement; if (!container) return; + + // Preserve wood paneling attribute + const currentWood = container.getAttribute('data-wood'); container.innerHTML = sections.map(section => `
@@ -178,6 +181,10 @@ function renderCollections(sections: SectionData[]): void {
`).join(''); + + if(currentWood) { + container.setAttribute('data-wood', currentWood) + } } function renderBookCard(book: BookInfo): string { diff --git a/web/static/input.css b/web/static/input.css index 4033e33..f2f4c5f 100644 --- a/web/static/input.css +++ b/web/static/input.css @@ -215,11 +215,11 @@ --wood-border: #2a2a2a; } - /* Wood Dark - needs medium text */ + /* Wood Dark - needs light text */ #collections-container[data-wood="wood-dark"] { - --wood-text-primary: #d0d0d0; - --wood-text-secondary: #a0a0a0; - --wood-border: #5a4a3a; + --wood-text-primary: #f5f5f5; + --wood-text-secondary: #c0c0c0; + --wood-border: #5c3317; } /* Wood Mahogany - needs light text (darkest background) */ @@ -246,9 +246,31 @@ color: var(--wood-text-secondary) !important; } - /* Preserve accent color for links */ - #collections-container[data-wood] a[style*="accent"] { - color: var(--accent) !important; + /* Links on wood-light need darker color for visibility */ + #collections-container[data-wood="wood-light"] a { + color: #0066cc !important; + } + /* Links on dark woods use lighter color */ + #collections-container[data-wood="wood-dark"] a, + #collections-container[data-wood="wood-mahogany"] a { + color: #66ccff !important; + } + + /* Wood Light - use darker gradient */ + #collections-container[data-wood="wood-light"] .carousel-nav-left { + background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent); + } + #collections-container[data-wood="wood-light"] .carousel-nav-right { + background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent); + } + /* Wood Dark/Mahogany - use subtle white/transparent gradient */ + #collections-container[data-wood="wood-dark"] .carousel-nav-left, + #collections-container[data-wood="wood-mahogany"] .carousel-nav-left { + background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); + } + #collections-container[data-wood="wood-dark"] .carousel-nav-right, + #collections-container[data-wood="wood-mahogany"] .carousel-nav-right { + background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); } /* Add subtle borders to book cards on wood backgrounds */ diff --git a/web/static/style.css b/web/static/style.css index 00e9290..09a92e9 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -1563,12 +1563,12 @@ body:not(.page-docs) .header-nav { --wood-border: #2a2a2a; } -/* Wood Dark - needs medium text */ +/* Wood Dark - needs light text */ #collections-container[data-wood="wood-dark"] { - --wood-text-primary: #d0d0d0; - --wood-text-secondary: #a0a0a0; - --wood-border: #5a4a3a; + --wood-text-primary: #f5f5f5; + --wood-text-secondary: #c0c0c0; + --wood-border: #5c3317; } /* Wood Mahogany - needs light text (darkest background) */ @@ -1597,10 +1597,39 @@ body:not(.page-docs) .header-nav { color: var(--wood-text-secondary) !important; } -/* Preserve accent color for links */ +/* Links on wood-light need darker color for visibility */ -#collections-container[data-wood] a[style*="accent"] { - color: var(--accent) !important; +#collections-container[data-wood="wood-light"] a { + color: #0066cc !important; +} + +/* Links on dark woods use lighter color */ + +#collections-container[data-wood="wood-dark"] a, + #collections-container[data-wood="wood-mahogany"] a { + color: #66ccff !important; +} + +/* Wood Light - use darker gradient */ + +#collections-container[data-wood="wood-light"] .carousel-nav-left { + background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent); +} + +#collections-container[data-wood="wood-light"] .carousel-nav-right { + background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent); +} + +/* Wood Dark/Mahogany - use subtle white/transparent gradient */ + +#collections-container[data-wood="wood-dark"] .carousel-nav-left, + #collections-container[data-wood="wood-mahogany"] .carousel-nav-left { + background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent); +} + +#collections-container[data-wood="wood-dark"] .carousel-nav-right, + #collections-container[data-wood="wood-mahogany"] .carousel-nav-right { + background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent); } /* Add subtle borders to book cards on wood backgrounds */