/* style.css Design intent: quiet, readable, distraction-free. No shadows, no gradients, minimal color. System UI font for chrome/labels; a serif for quote text so quotes visually read as *quotations* rather than interface text — the one deliberate typographic choice in an otherwise plain app. */ :root { --ink: #262421; --paper: #faf7f2; --paper-alt: #f1ece3; --line: #ddd5c7; --accent: #6b4f2a; --danger: #8a3324; --muted: #857c6d; --surface: #ffffff; } /* Dark theme — toggled via data-theme="dark" on (see app.js). Same variable names, different values, so no other rule in this file needs to know which theme is active. */ [data-theme="dark"] { --ink: #e8e2d6; --paper: #1c1a17; --paper-alt: #262320; --line: #3a352c; --accent: #d8b877; --danger: #e0796c; --muted: #9a9184; --surface: #232019; } * { box-sizing: border-box; } body { transition: background-color 0.15s ease, color 0.15s ease; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; line-height: 1.5; } .topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--paper); } .topbar-left { display: flex; align-items: center; gap: 14px; } .hamburger-btn { background: none; border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; font-size: 1.1rem; line-height: 1.4; cursor: pointer; color: var(--ink); } .hamburger-btn:hover { background: var(--paper-alt); } .brand { font-weight: 600; text-decoration: none; color: var(--ink); font-size: 1.05rem; } .topbar nav a { margin-left: 18px; text-decoration: none; color: var(--accent); font-size: 0.95rem; } #theme-toggle { margin-left: 18px; padding: 4px 8px; font-size: 1rem; line-height: 1; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); cursor: pointer; } /* Collapsible sidebar — closed by default (translated fully off-screen, not just visually hidden, so it has zero footprint until opened). Toggled via a class on rather than the sidebar itself so the overlay can react to the same state with one selector. */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 40; } body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 85vw); background: var(--paper); border-right: 1px solid var(--line); padding: 20px; overflow-y: auto; transform: translateX(-100%); transition: transform 0.2s ease; z-index: 50; } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open { overflow: hidden; /* lock background scroll while the sidebar is open */ } .sidebar-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; float: right; } .sidebar-close:hover { color: var(--ink); } .sidebar-section { margin-top: 28px; clear: both; } .sidebar-section:first-of-type { margin-top: 8px; } .sidebar-section h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 10px; } .sidebar-filters label { display: block; font-size: 0.82rem; color: var(--muted); margin: 12px 0 4px; } .sidebar-filters label:first-of-type { margin-top: 0; } .sidebar-filters select { display: block; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 0.9rem; } .sidebar-filters .fav-toggle { display: block; margin: 14px 0; font-size: 0.9rem; } .sidebar-filters button { width: 100%; } .container { max-width: 720px; margin: 0 auto; padding: 28px 20px 60px; } /* Search + filters */ .search-panel { margin-bottom: 18px; } #search-box { width: 100%; font-size: 1.05rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); } .fav-toggle { font-size: 0.9rem; color: var(--ink); } /* Result list */ .quote-list { list-style: none; margin: 0; padding: 0; } .quote-card { border-bottom: 1px solid var(--line); padding: 14px 0; } .quote-card a { text-decoration: none; color: inherit; display: block; } .quote-snippet { font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; margin: 0 0 4px; } /* Quotation marks are added here, purely for display — the stored quote text stays plain, so nothing needs to change if you later want to reuse the raw text elsewhere (export, copy button, etc). */ .quote-snippet .q::before, blockquote#quote-text::before { content: "\201C"; } .quote-snippet .q::after, blockquote#quote-text::after { content: "\201D"; } .quote-card-meta { margin: 0; font-size: 0.85rem; color: var(--muted); } .muted { color: var(--muted); font-size: 0.9rem; } /* Quote detail */ .quote-detail blockquote { font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; line-height: 1.6; margin: 0 0 14px; padding-left: 16px; border-left: 3px solid var(--accent); white-space: pre-wrap; /* preserves line breaks / paragraph spacing as typed */ } .attribution { margin: 0 0 10px; color: var(--ink); } .tags { margin: 0 0 14px; } .tag { display: inline-block; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px; margin: 0 6px 6px 0; font-size: 0.82rem; color: var(--accent); } .notes { background: var(--paper-alt); border-radius: 4px; padding: 10px 14px; margin: 14px 0; } .notes h3 { margin: 0 0 6px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .notes p { white-space: pre-wrap; margin: 0; } .meta { font-size: 0.82rem; color: var(--muted); } .actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; } button, .actions a button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 0.9rem; } button:hover { background: var(--paper-alt); } button.danger { color: var(--danger); border-color: var(--danger); } .related { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 16px; } /* Forms */ .quote-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; } .quote-form label { font-size: 0.85rem; color: var(--muted); margin-bottom: -6px; } .quote-form textarea, .quote-form input[type="text"], .quote-form input[type="password"] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font-family: inherit; font-size: 1rem; background: var(--surface); color: var(--ink); } .two-col { display: flex; gap: 16px; } .two-col > div { flex: 1; } fieldset.categories, fieldset.source-type-selector { border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; } fieldset.categories legend, fieldset.source-type-selector legend { font-size: 0.85rem; color: var(--muted); padding: 0 4px; } .cat-checkbox { display: inline-flex; align-items: center; gap: 4px; margin: 4px 14px 4px 0; font-size: 0.92rem; } .radio-inline { display: inline-flex; align-items: center; gap: 4px; margin: 4px 18px 4px 0; font-size: 0.95rem; } .warning { color: var(--danger); font-size: 0.85rem; } .error { color: var(--danger); } .format-toolbar { display: flex; gap: 4px; margin-bottom: -6px; } .format-toolbar button { padding: 4px 12px; font-size: 0.9rem; min-width: 30px; } .format-toolbar button[data-wrap="**"] { font-weight: 700; } .format-toolbar button[data-wrap="*"] { font-style: italic; } .format-toolbar button[data-wrap="__"] { text-decoration: underline; } .format-hint { font-size: 0.78rem; color: var(--muted); margin: -6px 0 0; } @media (max-width: 480px) { .two-col { flex-direction: column; gap: 12px; } .topbar nav a { margin-left: 10px; } } /* Manage page */ .manage-section { margin-bottom: 32px; } .manage-section h3 { margin-bottom: 4px; } .manage-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .manage-table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); } .manage-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } .inline-form { display: flex; gap: 6px; align-items: center; } .inline-form input[type="text"] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 0.9rem; width: 100%; min-width: 120px; } .inline-form select { padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 0.85rem; } .inline-form button { padding: 5px 10px; font-size: 0.85rem; } /* Pagination (search results + Recent) */ .pagination { display: flex; align-items: center; gap: 12px; margin: 20px 0; } .pagination button { padding: 6px 12px; } .pagination button:disabled { opacity: 0.4; cursor: default; } .page-indicator { font-size: 0.85rem; color: var(--muted); } /* About page */ .about-content { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; line-height: 1.6; white-space: pre-wrap; max-width: 640px; } /* Source-type color mark — the one deliberate use of color in the UI. A small, quiet dot rather than a colored background or badge, kept as fixed hex values (not theme variables) so the meaning of each color stays consistent whether light or dark mode is active. */ .source-mark { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: middle; flex-shrink: 0; } .source-mark-nonfiction { background: #c9a227; } /* yellow */ .source-mark-fiction { background: #4b8a4b; } /* green */ .source-mark-article { background: #3d72ad; } /* blue */ .source-mark-video { background: #b1493d; } /* red */ .source-type-selector .source-mark { margin-left: 4px; margin-right: 4px; }