john-okeefe
486c16172b
Fix multiple issues with wood paneling background image display affecting overscroll area and page-specific rendering. CSS changes in web/static/input.css: - Add background-attachment: fixed to all wood paneling classes - Prevents wood paneling from moving during page scroll - Ensures wood paneling extends into overscroll area - Applied to bg-wood-dark, bg-wood-light, bg-wood-mahogany - Fix body and container selectors for wood paneling - Ensure proper selector targeting for wood paneling application - Use background-position: center for better alignment - Use background-size: cover for full coverage TypeScript changes in web/src/woodPanelingInit.ts: - Add page detection to prevent wood paneling on collections page - Check if #collections-container exists in DOM - Only apply wood paneling on dashboard, not collections page - Prevents ID collision between dashboard and collections containers Template changes in templates/header.templ: - No functional changes, only reformatting These fixes ensure that: 1. Wood paneling displays consistently across the entire viewport 2. Wood paneling extends into the overscroll area when scrolling past content 3. Wood paneling is properly aligned and centered 4. Wood paneling doesn't interfere with collections page rendering 5. Both dashboard and collections pages can coexist without visual conflicts
332 lines
8.5 KiB
CSS
332 lines
8.5 KiB
CSS
/* Tailwind CSS directives - required for framework */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--bg-primary: #1a1b26;
|
|
--bg-secondary: #16161e;
|
|
--text-primary: #a9b1d6;
|
|
--text-secondary: #565f89;
|
|
--accent: #7aa2f7;
|
|
--border: #414868;
|
|
}
|
|
|
|
.theme-tokyo-night {
|
|
--bg-primary: #1a1b26;
|
|
--bg-secondary: #16161e;
|
|
--text-primary: #c0caf5;
|
|
--text-secondary: #c0caf5;
|
|
--accent: #7aa2f7;
|
|
--border: #414868;
|
|
}
|
|
|
|
.theme-dracula {
|
|
--bg-primary: #282a36;
|
|
--bg-secondary: #21222c;
|
|
--text-primary: #f8f8f2;
|
|
--text-secondary: #6272a4;
|
|
--accent: #bd93f9;
|
|
--border: #44475a;
|
|
}
|
|
|
|
.theme-nord {
|
|
--bg-primary: #2e3440;
|
|
--bg-secondary: #3b4252;
|
|
--text-primary: #eceff4;
|
|
--text-secondary: #5e81ac;
|
|
--accent: #88c0d0;
|
|
--border: #4c566a;
|
|
}
|
|
|
|
.theme-solarized-dark {
|
|
--bg-primary: #002b36;
|
|
--bg-secondary: #073642;
|
|
--text-primary: #93a1a1;
|
|
--text-secondary: #586e75;
|
|
--accent: #2aa198;
|
|
--border: #586e75;
|
|
}
|
|
|
|
.theme-monokai {
|
|
--bg-primary: #272822;
|
|
--bg-secondary: #3e3d32;
|
|
--text-primary: #f8f8f2;
|
|
--text-secondary: #75715e;
|
|
--accent: #a6e22e;
|
|
--border: #49483e;
|
|
}
|
|
|
|
.theme-one-dark-pro {
|
|
--bg-primary: #282c34;
|
|
--bg-secondary: #21252b;
|
|
--text-primary: #abb2bf;
|
|
--text-secondary: #5c6370;
|
|
--accent: #61dafb;
|
|
--border: #3e4451;
|
|
}
|
|
|
|
.theme-material-dark {
|
|
--bg-primary: #263238;
|
|
--bg-secondary: #37474f;
|
|
--text-primary: #eeffff;
|
|
--text-secondary: #546e7a;
|
|
--accent: #80cbc4;
|
|
--border: #455a64;
|
|
}
|
|
|
|
.theme-catppuccin-mocha {
|
|
--bg-primary: #1e1e2e;
|
|
--bg-secondary: #181825;
|
|
--text-primary: #cdd6f4;
|
|
--text-secondary: #bac2de;
|
|
--accent: #f38ba8;
|
|
--border: #313244;
|
|
}
|
|
|
|
.theme-catppuccin-macchiato {
|
|
--bg-primary: #24273a;
|
|
--bg-secondary: #1e2030;
|
|
--text-primary: #cad3f5;
|
|
--text-secondary: #b8c0e0;
|
|
--accent: #f0c6c6;
|
|
--border: #363a4f;
|
|
}
|
|
|
|
.theme-catppuccin-frappe {
|
|
--bg-primary: #303446;
|
|
--bg-secondary: #292c3c;
|
|
--text-primary: #c6d0f5;
|
|
--text-secondary: #b5bfe2;
|
|
--accent: #f2d5cf;
|
|
--border: #414559;
|
|
}
|
|
|
|
.theme-catppuccin-latte {
|
|
--bg-primary: #eff1f5;
|
|
--bg-secondary: #e6e9ef;
|
|
--text-primary: #4c4f69;
|
|
--text-secondary: #5c5f77;
|
|
--accent: #d20f39;
|
|
--border: #bcc0cc;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Header component styles */
|
|
.header-nav {
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
/* Make header sticky only on docs pages */
|
|
body:not(.page-docs) .header-nav {
|
|
position: static;
|
|
}
|
|
|
|
/* Add class to body on docs pages */
|
|
.page-docs .header-nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--accent);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid var(--border);
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.status-pending {
|
|
background-color: #f59e0b;
|
|
color: white;
|
|
}
|
|
.status-processing {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
.status-completed {
|
|
background-color: #10b981;
|
|
color: white;
|
|
}
|
|
.status-failed {
|
|
background-color: #ef4444;
|
|
color: white;
|
|
}
|
|
|
|
.priority-1 {
|
|
background-color: #ef4444;
|
|
color: white;
|
|
}
|
|
.priority-2 {
|
|
background-color: #f97316;
|
|
color: white;
|
|
}
|
|
.priority-3 {
|
|
background-color: #f59e0b;
|
|
color: white;
|
|
}
|
|
.priority-5 {
|
|
background-color: #10b981;
|
|
color: white;
|
|
}
|
|
.priority-7 {
|
|
background-color: #6b7280;
|
|
color: white;
|
|
}
|
|
.priority-10 {
|
|
background-color: #9ca3af;
|
|
color: white;
|
|
}
|
|
|
|
/* Override highlight.js hardcoded colors for code blocks */
|
|
.prose pre code.hljs {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.prose code.hljs {
|
|
background-color: #1a1b26 !important;
|
|
padding: 0.2em 0.4em;
|
|
}
|
|
|
|
.prose pre {
|
|
background-color: #16161e !important;
|
|
}
|
|
|
|
.prose .hljs {
|
|
background-color: transparent !important;
|
|
color: #c0caf5 !important;
|
|
}
|
|
|
|
/* Active/inactive states for theme and wood paneling buttons */
|
|
.bg-theme-active,
|
|
.bg-wood-active {
|
|
background-color: var(--bg-primary) !important;
|
|
}
|
|
|
|
/* Wood background positioning for seamless alignment */
|
|
.bg-wood-dark,
|
|
.bg-wood-light,
|
|
.bg-wood-mahogany {
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
|
|
/* Ensure body and container align perfectly */
|
|
body.bg-wood-dark,
|
|
body.bg-wood-light,
|
|
body.bg-wood-mahogany,
|
|
#collections-container.bg-wood-dark,
|
|
#collections-container.bg-wood-light,
|
|
#collections-container.bg-wood-mahogany {
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
|
|
.bg-theme-inactive,
|
|
.bg-wood-inactive {
|
|
background-color: var(--bg-secondary) !important;
|
|
}
|
|
|
|
/* Smart text colors for wood paneling backgrounds */
|
|
/* Wood Light - needs dark text for contrast */
|
|
#collections-container[data-wood="wood-light"] {
|
|
--wood-text-primary: #1a1a1a;
|
|
--wood-text-secondary: #4a4a4a;
|
|
--wood-border: #2a2a2a;
|
|
}
|
|
|
|
/* Wood Dark - needs light text */
|
|
#collections-container[data-wood="wood-dark"] {
|
|
--wood-text-primary: #f5f5f5;
|
|
--wood-text-secondary: #c0c0c0;
|
|
--wood-border: #5c3317;
|
|
}
|
|
|
|
/* Wood Mahogany - needs light text (darkest background) */
|
|
#collections-container[data-wood="wood-mahogany"] {
|
|
--wood-text-primary: #f5f5f5;
|
|
--wood-text-secondary: #c0c0c0;
|
|
--wood-border: #5c3317;
|
|
}
|
|
|
|
/* Apply wood-specific text colors to all text within collections container */
|
|
#collections-container[data-wood] h1,
|
|
#collections-container[data-wood] h2,
|
|
#collections-container[data-wood] h3,
|
|
#collections-container[data-wood] p,
|
|
#collections-container[data-wood] span,
|
|
#collections-container[data-wood] a,
|
|
#collections-container[data-wood] button {
|
|
color: var(--wood-text-primary) !important;
|
|
}
|
|
|
|
#collections-container[data-wood] .text-secondary {
|
|
color: var(--wood-text-secondary) !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 */
|
|
#collections-container[data-wood] .book-card {
|
|
border: 1px solid var(--wood-border);
|
|
}
|
|
}
|