john-okeefe
863c0fd9af
Two root causes fixed: 1. Reading theme CSS variables were on document.body, leaking font/color into chrome UI. Now scoped to #reader-viewport so chrome keeps its own theme (system font, --text-primary colors) while the reading area uses reading theme colors/background. 2. getCSS() never received font family, font size, or line height settings. The settings UI (dropdowns, sliders) saved values but they were never injected into the book's shadow DOM. Now getCSS() accepts all four settings and generates proper CSS rules for them. Changes: - Wrap foliate-view in #reader-viewport div (absolute positioned between chrome bars) - getCSS() reads computed style from #reader-viewport, not document.body - getCSS() params expanded: fontFamily, fontSize, lineHeight, justify, hyphenate (removed unused 'spacing') - Added FONT_MAP to translate setting keys to CSS font-family values - applyTheme() targets #reader-viewport instead of document.body - Removed dead #reader-viewport typography rules from foliate-themes.css (shadow DOM doesn't inherit outer styles), kept only background-color
276 lines
6.5 KiB
CSS
276 lines
6.5 KiB
CSS
/* ==========================================
|
|
Bookhoard Reading Themes - 18 Themes
|
|
Organized by Category for User Convenience
|
|
========================================== */
|
|
/* ==========================================
|
|
CATEGORY 1: CLASSIC READING (6 themes)
|
|
Time-tested, comfortable for long sessions
|
|
========================================== */
|
|
#reader-viewport {
|
|
background-color: var(--reader-bg);
|
|
color: var(--reader-text);
|
|
font-family: var(--reader-font, "Literata", serif);
|
|
font-size: var(--reader-font-size, 16px);
|
|
line-height: var(--reader-line-height, 1.6);
|
|
}
|
|
#reader-viewport ::selection {
|
|
background-color: var(--reader-selection);
|
|
}
|
|
#reader-viewport a {
|
|
color: var(--reader-link);
|
|
text-decoration: underline;
|
|
}
|
|
/* Light - Default theme */
|
|
.theme-light {
|
|
--reader-bg: #fafafa;
|
|
--reader-text: #1a1a1a;
|
|
--reader-link: #0066cc;
|
|
--reader-selection: #b3d9ff;
|
|
}
|
|
.theme-light.dark {
|
|
--reader-bg: #1a1a1a;
|
|
--reader-text: #e8e8e8;
|
|
--reader-link: #60a5fa;
|
|
--reader-selection: #1e3a8a;
|
|
}
|
|
/* Paper - Warmer, softer */
|
|
.theme-paper {
|
|
--reader-bg: #fdfbf7;
|
|
--reader-text: #2d2d2d;
|
|
--reader-link: #0284c7;
|
|
--reader-selection: #bae6fd;
|
|
}
|
|
.theme-paper.dark {
|
|
--reader-bg: #1c1917;
|
|
--reader-text: #ebe5dd;
|
|
--reader-link: #38bdf8;
|
|
--reader-selection: #0c4a6e;
|
|
}
|
|
/* Sepia - Classic e-reader */
|
|
.theme-sepia {
|
|
--reader-bg: #f4ecd8;
|
|
--reader-text: #4a3728;
|
|
--reader-link: #8b4513;
|
|
--reader-selection: #d4c4a8;
|
|
}
|
|
.theme-sepia.dark {
|
|
--reader-bg: #2b2420;
|
|
--reader-text: #d4c4a8;
|
|
--reader-link: #d97706;
|
|
--reader-selection: #451a03;
|
|
}
|
|
/* Parchment - Aged document feel */
|
|
.theme-parchment {
|
|
--reader-bg: #f0e6d3;
|
|
--reader-text: #5c4033;
|
|
--reader-link: #92400e;
|
|
--reader-selection: #e7c9a8;
|
|
}
|
|
.theme-parchment.dark {
|
|
--reader-bg: #3d2b1f;
|
|
--reader-text: #e8dcc8;
|
|
--reader-link: #b45309;
|
|
--reader-selection: #292524;
|
|
}
|
|
/* Warm - Cozy evening */
|
|
.theme-warm {
|
|
--reader-bg: #faf8f0;
|
|
--reader-text: #2b2b2b;
|
|
--reader-link: #d97706;
|
|
--reader-selection: #fef3c7;
|
|
}
|
|
.theme-warm.dark {
|
|
--reader-bg: #2d2416;
|
|
--reader-text: #f5e6d3;
|
|
--reader-link: #fbbf24;
|
|
--reader-selection: #451a03;
|
|
}
|
|
/* Candlelight - Intimate glow */
|
|
.theme-candlelight {
|
|
--reader-bg: #fef3c7;
|
|
--reader-text: #3d2b1f;
|
|
--reader-link: #b45309;
|
|
--reader-selection: #fde68a;
|
|
}
|
|
.theme-candlelight.dark {
|
|
--reader-bg: #451a03;
|
|
--reader-text: #fde68a;
|
|
--reader-link: #fb923c;
|
|
--reader-selection: #78350f;
|
|
}
|
|
/* ==========================================
|
|
CATEGORY 2: SKY & ATMOSPHERE (4 themes)
|
|
Open, airy, contemplative
|
|
========================================== */
|
|
/* Azure - Open sky */
|
|
.theme-azure {
|
|
--reader-bg: #cedef5;
|
|
--reader-text: #262d48;
|
|
--reader-link: #2d53e5;
|
|
--reader-selection: #a5b4fc;
|
|
}
|
|
.theme-azure.dark {
|
|
--reader-bg: #282e47;
|
|
--reader-text: #babee1;
|
|
--reader-link: #0ea5e9;
|
|
--reader-selection: #1e3a8a;
|
|
}
|
|
/* Sky - Clear day */
|
|
.theme-sky {
|
|
--reader-bg: #e0f2fe;
|
|
--reader-text: #1e3a5f;
|
|
--reader-link: #0284c7;
|
|
--reader-selection: #7dd3fc;
|
|
}
|
|
.theme-sky.dark {
|
|
--reader-bg: #0c4a6e;
|
|
--reader-text: #bae6fd;
|
|
--reader-link: #0ea5e9;
|
|
--reader-selection: #075985;
|
|
}
|
|
/* Arctic - Icy cool */
|
|
.theme-arctic {
|
|
--reader-bg: #f0f9ff;
|
|
--reader-text: #1e3a5f;
|
|
--reader-link: #0284c7;
|
|
--reader-selection: #bae6fd;
|
|
}
|
|
.theme-arctic.dark {
|
|
--reader-bg: #1e293b;
|
|
--reader-text: #bfdbfe;
|
|
--reader-link: #38bdf8;
|
|
--reader-selection: #0c4a6e;
|
|
}
|
|
/* Frost - Crisp winter */
|
|
.theme-frost {
|
|
--reader-bg: #f8fafc;
|
|
--reader-text: #334155;
|
|
--reader-link: #38bdf8;
|
|
--reader-selection: #e0f2fe;
|
|
}
|
|
.theme-frost.dark {
|
|
--reader-bg: #0f172a;
|
|
--reader-text: #e0f2fe;
|
|
--reader-link: #7dd3fc;
|
|
--reader-selection: #1e293b;
|
|
}
|
|
/* ==========================================
|
|
CATEGORY 3: SUNSET & WARMTH (3 themes)
|
|
Warm, energizing, relaxation
|
|
========================================== */
|
|
/* Dusk - Evening transition */
|
|
.theme-dusk {
|
|
--reader-bg: #fef3e2;
|
|
--reader-text: #3d2914;
|
|
--reader-link: #ea580c;
|
|
--reader-selection: #fed7aa;
|
|
}
|
|
.theme-dusk.dark {
|
|
--reader-bg: #2d1f14;
|
|
--reader-text: #f5d5b8;
|
|
--reader-link: #fb923c;
|
|
--reader-selection: #431407;
|
|
}
|
|
/* Sunset - Peak colors */
|
|
.theme-sunset {
|
|
--reader-bg: #fff7ed;
|
|
--reader-text: #4a1d1d;
|
|
--reader-link: #f97316;
|
|
--reader-selection: #ffedd5;
|
|
}
|
|
.theme-sunset.dark {
|
|
--reader-bg: #431407;
|
|
--reader-text: #fed7aa;
|
|
--reader-link: #fb923c;
|
|
--reader-selection: #7c2d12;
|
|
}
|
|
/* Twilight - Magical hour */
|
|
.theme-twilight {
|
|
--reader-bg: #f5f3ff;
|
|
--reader-text: #4c1d95;
|
|
--reader-link: #8b5cf6;
|
|
--reader-selection: #ddd6fe;
|
|
}
|
|
.theme-twilight.dark {
|
|
--reader-bg: #2e1065;
|
|
--reader-text: #ddd6fe;
|
|
--reader-link: #a78bfa;
|
|
--reader-selection: #4c1d95;
|
|
}
|
|
/* ==========================================
|
|
CATEGORY 4: NATURE & EARTH (3 themes)
|
|
Grounded, natural, calming
|
|
========================================== */
|
|
/* Forest - Deep woods */
|
|
.theme-forest {
|
|
--reader-bg: #e8efe8;
|
|
--reader-text: #1a2e1a;
|
|
--reader-link: #15803d;
|
|
--reader-selection: #bbf7d0;
|
|
}
|
|
.theme-forest.dark {
|
|
--reader-bg: #1a2e1a;
|
|
--reader-text: #c8dcc8;
|
|
--reader-link: #22c55e;
|
|
--reader-selection: #14532d;
|
|
}
|
|
/* Moss - Fresh spring */
|
|
.theme-moss {
|
|
--reader-bg: #dcfce7;
|
|
--reader-text: #14532d;
|
|
--reader-link: #22c55e;
|
|
--reader-selection: #86efac;
|
|
}
|
|
.theme-moss.dark {
|
|
--reader-bg: #052e16;
|
|
--reader-text: #86efac;
|
|
--reader-link: #4ade80;
|
|
--reader-selection: #064e3b;
|
|
}
|
|
/* Slate - Stone stability */
|
|
.theme-slate {
|
|
--reader-bg: #f8fafc;
|
|
--reader-text: #334155;
|
|
--reader-link: #475569;
|
|
--reader-selection: #e2e8f0;
|
|
}
|
|
.theme-slate.dark {
|
|
--reader-bg: #1e293b;
|
|
--reader-text: #e2e8f0;
|
|
--reader-link: #94a3b8;
|
|
--reader-selection: #334155;
|
|
}
|
|
/* ==========================================
|
|
CATEGORY 5: HIGH PERFORMANCE (2 themes)
|
|
Optimized for specific use cases
|
|
========================================== */
|
|
/* OLED - Battery saving, max contrast */
|
|
.theme-oled {
|
|
--reader-bg: #ffffff;
|
|
--reader-text: #000000;
|
|
--reader-link: #0066cc;
|
|
--reader-selection: #ffff00;
|
|
}
|
|
.theme-oled.dark {
|
|
--reader-bg: #000000;
|
|
--reader-text: #ffffff;
|
|
--reader-link: #3b82f6;
|
|
--reader-selection: #1e3a8a;
|
|
}
|
|
/* Solarized - Precision designed */
|
|
.theme-solarized {
|
|
--reader-bg: #fdf6e3;
|
|
--reader-text: #657b83;
|
|
--reader-link: #268bd2;
|
|
--reader-selection: #eee8d5;
|
|
}
|
|
.theme-solarized.dark {
|
|
--reader-bg: #002b36;
|
|
--reader-text: #839496;
|
|
--reader-link: #268bd2;
|
|
--reader-selection: #073642;
|
|
}
|
|
#reader-viewport {
|
|
background-color: var(--reader-bg);
|
|
}
|