/* Two themes = the SAME library room under two lightings (see design.md + design-light.md). Light (:root default) is soft daylight on aged paper; dark ([data-theme="dark"]) is the same room by candlelight. The theme toggle switches the palette AND which photo backs the browsing chrome (--bg-image / --bg-overlay, consumed by .bg-layer below). The reader keeps its own opaque paper surfaces and shows no photo in either theme. */ :root { /* --- Light: parchment, honey wood, antique gold, green-marble accent --- */ --bg: #e8d9b8; --surface: rgba(241, 230, 206, 0.92); /* parchment panel over the photo */ --surface-2: rgba(246, 238, 220, 0.97); /* hover / secondary surface */ --border: rgba(73, 51, 38, 0.24); /* translucent dark brown, not grey */ --border-strong: #b8955b; /* soft brass separator */ --text: #33261c; --muted: #6f5946; --accent: #8a5f2b; /* antique gold-brown for links/icons */ --accent-hover: #b68a45; --accent-text: #f6eedc; --green: #61715b; /* fireplace green marble */ --green-dark: #465545; --brass: #b8955b; --burgundy: #7b493d; --focus: #465545; /* green-marble focus ring */ --focus-glow: rgba(70, 85, 69, 0.26); --error-bg: #f3ddd6; --error-text: #7a2018; --reader-bg: #f1e6ce; /* reading page = light parchment */ --reader-text: #30251d; --reader-rule: rgba(73, 51, 38, 0.22); --mono-bg: #ddcba3; --shadow: rgba(58, 42, 32, 0.16); /* warm, never blue-black */ --chrome-shadow: 0 1px 2px rgba(246, 238, 220, 0.95); /* halo for bare text over the light photo */ --bg-image: url("img/library-light.jpg"); --bg-overlay: linear-gradient(rgba(232, 217, 184, 0.10), rgba(232, 217, 184, 0.34)); --topbar-h: 53px; } :root[data-theme="dark"] { /* --- Dark: the same room by candlelight --- */ --bg: #17110d; --surface: rgba(33, 25, 18, 0.90); /* dark-wood panel over the photo */ --surface-2: rgba(50, 38, 26, 0.93); --border: rgba(197, 161, 102, 0.22); /* warm gold-brown edge */ --border-strong: #59402b; --text: #eae0cc; --muted: #b0a084; --accent: #d8ab63; --accent-hover: #edc580; --accent-text: #1b1509; --green: #8a977a; --green-dark: #6d7c5e; --brass: #c39a5e; --burgundy: #97584a; --focus: #edc580; /* warm gold focus ring */ --focus-glow: rgba(237, 197, 128, 0.28); --error-bg: #3a1f1c; --error-text: #f3b3ac; --reader-bg: #1b170f; --reader-text: #e6dfce; --reader-rule: #34301f; --mono-bg: #241f16; --shadow: rgba(0, 0, 0, 0.5); --chrome-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); --bg-image: url("img/library-dark.jpg"); --bg-overlay: linear-gradient(rgba(12, 8, 5, 0.42), rgba(12, 8, 5, 0.64)); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; /* 15px base + 20% */ } a { color: var(--accent); } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ---------- atmospheric background (browsing views only) ---------- */ /* Fixed layer carrying the theme-matched library photo behind the whole browsing UI. position:fixed (NOT background-attachment:fixed) keeps it put on scroll without the iOS mobile repaint bug that plagues fixed backgrounds. It is removed entirely in the reader (book view) so reading is quiet -- main.js tags on every route. */ .bg-layer { position: fixed; inset: 0; z-index: -1; background-image: var(--bg-overlay), var(--bg-image); background-size: cover; background-position: center 30%; background-repeat: no-repeat; pointer-events: none; } body[data-view="book"] .bg-layer { display: none; } /* ---------- topbar ---------- */ /* Fixed (not sticky) so the header stays put on scroll on every browser -- sticky positioning is unreliable in some mobile browsers when the address bar collapses on scroll. #app's padding-top (below) compensates for the space it takes out of the flow; --topbar-h is kept in sync with its actual rendered height by main.js since it can wrap to two lines on narrow screens. */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); /* translucent panel sits over the fixed photo -- a light blur keeps the brand/tabs legible against the busy room behind without heavy glass. */ backdrop-filter: blur(9px) saturate(1.05); -webkit-backdrop-filter: blur(9px) saturate(1.05); box-shadow: 0 2px 14px var(--shadow); } .brand { display: flex; flex-direction: column; line-height: 1.15; } .brand-title { font-weight: 700; font-size: 1.05em; } .brand-sub { font-size: 0.72em; color: var(--muted); } .tabs { display: flex; gap: 4px; flex: 1; } .tab { background: none; border: 1px solid transparent; border-radius: 6px; padding: 7px 12px; cursor: pointer; } .tab:hover { background: var(--surface-2); } .tab[aria-selected="true"] { background: var(--accent); color: var(--accent-text); font-weight: 600; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-size: 1em; } .icon-btn:hover { background: var(--border); } @media (max-width: 640px) { .brand-sub { display: none; } .tab { padding: 7px 8px; font-size: 0.92em; } .topbar { gap: 8px 12px; padding: 8px 12px; } .font-controls button { width: 26px; height: 26px; } .font-controls #font-family-toggle { width: auto; height: 26px; min-width: 26px; padding: 0 6px; } .font-controls .font-val { width: 2.6em; } } /* ---------- main / breadcrumb ---------- */ #app { /* Wide enough that list/grid views (libraries, categories, search results) use the screen on large monitors instead of leaving big idle margins; the reader article keeps its own narrower character-based width below, since prose stays readable regardless of how wide #app itself is. */ max-width: min(1600px, 96vw); margin: 0 auto; padding: calc(var(--topbar-h) + 14px) 16px 60px; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.85em; color: var(--muted); min-height: 1.4em; margin-bottom: 10px; text-shadow: var(--chrome-shadow); /* sits directly on the photo, no panel */ } .breadcrumb a { text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb .sep { opacity: 0.6; } .breadcrumb .current { color: var(--text); font-weight: 600; } /* ---------- library cards ---------- */ .lib-grid { display: grid; /* Landing page only: stack the library cards in a single narrow column pinned to the left, deliberately leaving the right of the viewport open so the Gutenberg portrait (the horizontal centre of the background photo) stays visible beside them. minmax(0, …) lets the column shrink to fit on narrow / mobile screens instead of overflowing. */ grid-template-columns: minmax(0, 360px); justify-content: start; gap: 10px; } .lib-card { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; cursor: pointer; /* parchment/wood card floating over the photo -- weak warm shadow, no floating-glass look (design-light.md §10/§14). */ box-shadow: 0 4px 14px var(--shadow); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; } .lib-card:hover { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 8px 22px var(--shadow); } .lib-card .lib-title { font-weight: 600; margin-bottom: 4px; } .lib-card .lib-meta { font-size: 0.82em; color: var(--muted); } /* ---------- generic item list (categories / books / files / search results) ---------- */ .item-list { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 28px var(--shadow); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .item-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; background: none; width: 100%; text-align: left; } .item-row:last-child { border-bottom: none; } .item-row:hover { background: var(--surface-2); } .item-icon { flex: none; opacity: 0.8; } .item-main { flex: 1; min-width: 0; } .item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-sub { font-size: 0.82em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .item-extra { flex: none; font-size: 0.78em; color: var(--muted); } .load-more-wrap { text-align: center; padding: 12px; } .load-more-btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 18px; cursor: pointer; } .load-more-btn:hover { border-color: var(--accent); } .section-label { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 14px 0 6px; text-shadow: var(--chrome-shadow); } /* ---------- search ---------- */ .search-box { margin-bottom: 12px; } #search-input { width: 100%; font-size: 1.05em; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 4px 14px var(--shadow), inset 0 1px 2px var(--shadow); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: border-color 180ms ease, box-shadow 180ms ease; } /* search field focus picks up the green-marble accent (design-light.md §8); :focus (not :focus-visible) so mouse clicks get the border too. The 3px glow ring is itself a sufficient visible focus indicator. */ #search-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-glow), 0 4px 14px var(--shadow); } .search-help { font-size: 0.78em; color: var(--muted); margin-top: 5px; text-shadow: var(--chrome-shadow); } .search-help code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } /* ---------- empty / error / loading ---------- */ .empty-state, .loading-state { text-align: center; color: var(--muted); padding: 40px 20px; /* panelised so the message stays readable over the photo */ background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px var(--shadow); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .error-box { background: var(--error-bg); color: var(--error-text); border-radius: 8px; padding: 14px 16px; margin: 10px 0; } /* ---------- reader ---------- */ .reader-toolbar { position: sticky; top: var(--topbar-h); z-index: 9; display: flex; align-items: center; gap: 10px; background: var(--bg); padding: 6px 0 10px; flex-wrap: wrap; } .reader-back { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer; flex: none; } .reader-back:hover { border-color: var(--accent); } .reader-title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .font-controls { display: flex; align-items: center; gap: 6px; flex: none; } .font-controls button { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; } .font-controls button:hover { border-color: var(--accent); } .font-controls .font-val { font-size: 0.8em; color: var(--muted); width: 3.2em; text-align: center; } .font-controls #font-family-toggle { width: auto; height: 30px; min-width: 30px; padding: 0 8px; font-size: 0.8em; } .reader-meta { font-size: 0.85em; color: var(--muted); border-bottom: 1px solid var(--reader-rule); padding-bottom: 10px; margin-bottom: 16px; } .reader-meta b { color: var(--text); } .reader-meta code { background: var(--mono-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.95em; } .reader-article { background: var(--reader-bg); color: var(--reader-text); border: 1px solid var(--border); border-radius: 8px; padding: 28px clamp(16px, 5vw, 48px); /* Width in viewport/pixel units, NOT `ch` -- `ch` is font-size-relative, so it shrinks along with the font when the reader decreases text size, while the padding above (clamp(), not font-relative) doesn't shrink to match, wrapping lines that used to fit. Using mostly-vw instead means the available window/canvas space is what the width tracks, not the font size: shrinking the font no longer starves the content area, and growing it isn't capped down to a narrow fixed column either -- at large font sizes especially, the pane should use the width that's actually there instead of leaving idle margins beside a small box. */ max-width: min(1400px, 94vw); margin: 0 auto; font-family: var(--reader-font-family, ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace); font-size: var(--reader-font-size, 18px); line-height: 1.65; } .reader-article p { margin: 0 0 1em; white-space: pre-wrap; } .reader-article pre { font-family: "Courier New", ui-monospace, monospace; background: var(--mono-bg); border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-size: 0.8em; line-height: 1.3; margin: 0 0 1em; } /* ---------- footer ---------- */ .footer { text-align: center; font-size: 0.78em; color: var(--muted); padding: 10px 16px 30px; text-shadow: var(--chrome-shadow); } .footer a { color: var(--muted); text-decoration: underline; } .footer a:hover { color: var(--accent); } /* ---------- status toast ---------- */ .status { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 12px); background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 20px; font-size: 0.82em; box-shadow: 0 2px 10px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status.visible { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 640px) { .reader-article { padding: 20px 16px; border-radius: 0; border-left: none; border-right: none; } #app { padding: calc(var(--topbar-h) + 12px) 10px 60px; } }