/* ───────────────────────────────────────────────────────────────────── THEME VARIABLES — SINGLE SOURCE OF TRUTH The light and dark palettes are authored exactly ONCE, here: • light values → the THEME:SRC-LIGHT region in :root (below) • dark values → the THEME:SRC-DARK region in the @media (prefers-color-scheme: dark) block (below) Three redundant copies are GENERATED from those two sources by web/scripts/build.py and must never be hand-edited: • the [data-theme="light"] block (THEME:GEN-LIGHT) • the [data-theme="dark"] block (THEME:GEN-DARK) • the LIGHT/DARK objects in the script of web/index.html (THEME:GEN-JS) That last copy is load-bearing: iOS Safari (browser, not PWA) won't reliably resolve var() references on descendants when the values come from stylesheet rules. Setting them inline on via JS before first paint is the only form WebKit consistently propagates. The build keeps it in lockstep with the CSS so drift is impossible. To change a color: edit it once in the matching SRC region, then run `python3 web/scripts/build.py`. Never edit a GEN region by hand. The element-specific overrides that used to live here (.sidebar, .save-card, .modal-content, etc.) were almost all no-ops — they set background: var(--something) which already flips correctly per theme. The two surfaces that genuinely needed a different dark treatment (sidebar, modal) now use --surface-elevated instead. ───────────────────────────────────────────────────────────────── */ :root { /* THEME:SRC-LIGHT */ --accent: #005fa1; --accent-hover: #003153; --accent-wash: #f0f9ff; --bg: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --surface-elevated: #ffffff; /* sidebar, modal — "sits above the page" */ --audio-player-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); --text: #1f2937; --text-secondary: #6b7280; --text-muted: #9ca3af; --border: rgba(0,0,0,0.07); --bg-hover: rgba(0,0,0,0.06); --shadow: 0 1px 3px rgba(0,0,0,0.1); --shadow-lg: 0 10px 40px rgba(0,0,0,0.1); /* THEME:SRC-LIGHT-END */ /* Theme-invariant tokens (identical in light & dark) */ --success: #10b981; --danger: #dc2626; --danger-dark: #b91c1c; --radius: 8px; --radius-lg: 20px; --sidebar-width: 68px; --reading-pane-width: 500px; /* Stacking scale — defined once so layer relationships stay explicit. Lower values render behind higher values. Picking a new layer? Use an existing variable or add one here rather than inventing a number somewhere in the body of the file. */ --z-base: 1; /* in-row stacking (hover content, etc.) */ --z-nav: 10; /* persistent sidebar in list mode */ --z-summary-panel: 15; /* reader summary slide-out */ --z-content-aux: 100; /* mini-sidebars, prefetch indicator, etc. */ --z-bottom-bar: 195; /* legacy bottom bar (retired, hidden via CSS) */ --z-modal-bg: 200; /* modal backdrops */ --z-reading-pane: 300; /* covers main pane in reader mode */ --z-drawer-overlay: 350; /* dims content when mobile drawer is open */ --z-drawer: 360; /* the mobile drawer itself — above its overlay */ --z-modal: 400; /* modal content (above its backdrop) */ --z-floating: 500; /* highlight toolbar, search-bar, anchored UI */ --z-progress: 1000; /* reading-progress bar — above everything else */ --z-tooltip: 2000; /* on-hover tooltips */ --z-tooltip-plus: 2001; /* +1 tier within tooltip stack */ --z-ctx-menu: 3000; /* right-click context menus */ --z-top: 9999; /* ephemeral overlays (toasts, save throbbers) */ } /* Auto-dark (system preference, no explicit override saved). */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; /* THEME:SRC-DARK */ --accent: #008ef0; --accent-hover: #005fa1; --accent-wash: #001f33; --bg: #000000; --bg-secondary: #0a0a0a; --bg-tertiary: #141414; --surface-elevated: #1c1c1e; --audio-player-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%); --text: #f9fafb; --text-secondary: #d1d5db; --text-muted: #9ca3af; --border: rgba(255,255,255,0.08); --bg-hover: rgba(255,255,255,0.08); --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-lg: 0 10px 40px rgba(0,0,0,0.4); /* THEME:SRC-DARK-END */ } } /* Explicit dark — applied when the user has chosen "dark" in settings. GENERATED from THEME:SRC-DARK by build.py — do not hand-edit. */ [data-theme="dark"] { color-scheme: dark; /* THEME:GEN-DARK */ --accent: #008ef0; --accent-hover: #005fa1; --accent-wash: #001f33; --bg: #000000; --bg-secondary: #0a0a0a; --bg-tertiary: #141414; --surface-elevated: #1c1c1e; --audio-player-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%); --text: #f9fafb; --text-secondary: #d1d5db; --text-muted: #9ca3af; --border: rgba(255,255,255,0.08); --bg-hover: rgba(255,255,255,0.08); --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-lg: 0 10px 40px rgba(0,0,0,0.4); /* THEME:GEN-DARK-END */ } /* Explicit light — applied when the user has chosen "light" in settings. Wins over @media (prefers-color-scheme: dark) on attribute-vs-element specificity, so light renders correctly even on a system in dark mode. GENERATED from THEME:SRC-LIGHT by build.py — do not hand-edit. */ [data-theme="light"] { color-scheme: light; /* THEME:GEN-LIGHT */ --accent: #005fa1; --accent-hover: #003153; --accent-wash: #f0f9ff; --bg: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --surface-elevated: #ffffff; --audio-player-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); --text: #1f2937; --text-secondary: #6b7280; --text-muted: #9ca3af; --border: rgba(0,0,0,0.07); --bg-hover: rgba(0,0,0,0.06); --shadow: 0 1px 3px rgba(0,0,0,0.1); --shadow-lg: 0 10px 40px rgba(0,0,0,0.1); /* THEME:GEN-LIGHT-END */ } /* Theme setting row */ .theme-setting-row { cursor: default; } /* Theme segmented control */ .theme-segmented { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; } .theme-seg-btn { padding: 4px 8px; background: none; border: none; border-left: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s; } .theme-seg-btn:first-child { border-left: none; } .theme-seg-btn:hover { background: var(--bg-tertiary); color: var(--text); } .theme-seg-btn.active { background: var(--accent); color: white; } .sort-toggle-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius); transition: color 0.15s, background 0.15s; } .sort-toggle-btn:hover { color: var(--text-secondary); background: var(--bg-hover); } .sort-toggle-btn svg { pointer-events: none; } /* Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; font-size: 15px; color: var(--text); background: var(--bg); line-height: 1.5; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select { font-family: inherit; font-size: inherit; } .hidden { display: none !important; } /* Screens */ .screen { min-height: 100vh; } /* Auth Screen */ #auth-screen { display: flex; align-items: center; justify-content: center; background: var(--accent); } .auth-container { background: var(--bg-secondary); padding: 48px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 400px; } .logo { text-align: center; margin-bottom: 32px; } .logo-icon { width: 64px; height: 64px; border-radius: 16px; display: inline-flex; margin-bottom: 16px; object-fit: cover; } .logo h1 { font-size: 28px; font-weight: 700; color: var(--text); } .logo p { color: var(--text-secondary); margin-top: 4px; } .auth-form { display: flex; flex-direction: column; gap: 12px; } .auth-form input { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 15px; transition: border-color 0.15s; } .auth-form input:focus { outline: none; border-color: var(--accent); } .auth-form-intro { color: var(--text-secondary); font-size: 14px; text-align: center; margin-bottom: 4px; } /* Text-only link button: forgot-password, back-to-sign-in */ .btn-link { background: none; border: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; padding: 4px; cursor: pointer; transition: color 0.15s; } .btn-link:hover { color: var(--text); text-decoration: underline; } .auth-invite-note { color: var(--text-muted); font-size: 13px; text-align: center; margin-top: 24px; } .error { color: var(--danger); font-size: 14px; margin-top: 12px; text-align: center; } .message { color: var(--success); font-size: 14px; margin-top: 12px; text-align: center; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 500; transition: all 0.15s; } .btn.primary { background: var(--accent); color: white; } .btn.primary:hover { background: var(--accent-hover); } .btn.secondary { background: var(--bg-tertiary); color: var(--text); } .btn.secondary:hover { background: var(--border); } .btn.danger { background: var(--danger); color: white; } .btn.danger:hover { background: var(--danger-dark); } .btn.icon { padding: 8px; background: transparent; color: var(--text-secondary); } .btn.icon:hover { background: var(--bg-tertiary); color: var(--text); } /* Main Screen Layout */ #main-screen { display: flex; height: 100vh; overflow: hidden; } /* Sidebar — persistent in list mode, overlay in reader mode */ .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--surface-elevated); display: flex; flex-direction: column; overflow: visible; position: relative; z-index: var(--z-nav); } /* Sidebar mode toggles — the sidebar holds two stacks of nav items, one for list mode and one for reader mode. CSS swaps which is visible based on body.reader-mode. The footer (settings gear) is shared. */ .sidebar-mode-reader { display: none; } body.reader-mode .sidebar-mode-list { display: none; } body.reader-mode .sidebar-mode-reader { display: flex; flex-direction: column; } body.reader-mode .sidebar-mode-reader > .nav { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; } /* On mobile, the base .sidebar rule (in the mobile media query below) already handles slide-out in both modes via the .open class — no separate reader-mode handling is needed here. On desktop, the sidebar stays visible in both modes; contents swap via .sidebar-mode-list/-reader. */ /* Slender list-mode mini-sidebar — hidden in list mode now that sidebar is persistent */ .sidebar-header { display: flex; align-items: center; justify-content: center; padding: 16px 0; } .logo-small { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; } .sidebar-header span { font-size: 18px; font-weight: 600; } /* Navigation */ .nav { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .nav-item { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius); color: var(--text-secondary); transition: all 0.15s; border: none; background: none; width: 44px; height: 44px; flex-shrink: 0; position: relative; } /* @media (hover: hover) prevents the hover state from getting stuck on touch devices — iOS fires mouseenter on tap but never mouseleave, which leaves nav items in their hover background (most visible on Tags in the browser more-sheet, since it's the only sheet item that also has .nav-item). The PWA handles touch differently so doesn't see this. */ @media (hover: hover) { .nav-item:hover { background: var(--bg-tertiary); color: var(--text); } } .nav-item.active { color: var(--accent); background: var(--accent-wash); border-radius: var(--radius); } /* Nav tooltips are JS-positioned — see bindEvents() */ .tags-view { padding: 8px 0; } .tags-view-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 0.5px solid var(--border); cursor: pointer; transition: background 0.1s; } .tags-view-row:hover { background: var(--bg-secondary); } .tags-view-name { font-size: 15px; color: var(--text); } .tags-view-count { font-size: 13px; color: var(--text-secondary); } .tags-view-empty { padding: 48px 24px; color: var(--text-secondary); text-align: center; } .tags-view-empty .empty-icon { font-size: 48px; margin-bottom: 12px; } .tags-view-empty h3 { font-size: 18px; margin-bottom: 6px; color: var(--text); } .tags-view-empty p { color: var(--text-secondary); } .tags-view-loading { display: flex; align-items: center; justify-content: center; padding: 48px; } /* Load more button */ .load-more-btn { display: block; width: calc(100% - 48px); margin: 16px 24px; padding: 10px; background: none; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: background 0.1s; } .load-more-btn:hover { background: var(--bg-secondary); } /* Archive all button */ .archive-all-btn { padding: 6px 12px; background: none; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: background 0.1s; } .archive-all-btn:hover { background: var(--bg-secondary); } /* Archive prompt (appears at bottom of reading pane) */ .archive-prompt { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px); display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-lg); font-size: 14px; opacity: 0; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; z-index: var(--z-content-aux); } .archive-prompt.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .archive-prompt-btn { padding: 5px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: none; font-size: 13px; cursor: pointer; color: var(--text); } .archive-prompt-btn.primary { background: var(--accent); color: white; border-color: var(--accent); } /* Auto-tag rules modal */ .auto-tag-add-row { display: flex; gap: 8px; margin-top: 16px; } .auto-tag-input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 13px; } .auto-tag-rule-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; } .auto-tag-rule-pattern { color: var(--text-secondary); flex: 1; } .auto-tag-rule-tag { font-weight: 500; } .auto-tag-remove-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 12px; padding: 2px 6px; } .auto-tag-remove-btn:hover { color: var(--danger); } .sidebar-add-wrap { padding: 0 12px 4px; display: flex; justify-content: center; } .sidebar-footer { margin-top: auto; padding: 12px; border-top: 0.5px solid var(--border); } /* settings-gear-btn inherits 44×44px from .nav-item */ .settings-modal-content { max-width: 420px; } .settings-modal-body { padding: 8px 0 20px; } .settings-section-label { font-size: 12px; font-weight: 500; color: var(--text-muted); padding: 14px 20px 5px; } .settings-font-row { cursor: default; flex-direction: column; align-items: stretch; gap: 10px; } .settings-font-row:hover { background: none; } .settings-font-inner { width: 100%; display: flex; flex-direction: column; gap: 10px; } .settings-font-top { display: flex; align-items: center; gap: 10px; } .font-size-pct { font-size: 12px; color: var(--text-muted); flex-shrink: 0; } .font-size-slider { width: 100%; accent-color: var(--accent); cursor: pointer; } .settings-section { margin: 0 12px 4px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .settings-section .settings-menu-item:not(:last-child) { border-bottom: 1px solid var(--border); } .settings-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: none; border: none; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; transition: background 0.1s; } .settings-menu-item:hover { background: var(--bg-hover); } .settings-menu-item.theme-setting-row:hover { background: none; } .settings-menu-item.danger { color: var(--danger); } .settings-menu-divider { height: 1px; background: var(--border); margin: 4px 0; } .settings-model-row { cursor: default; } .settings-model-row:hover { background: none; } .model-select { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; padding: 3px 6px; cursor: pointer; } /* Main Content */ .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; /* containing block for the absolute .main-header gradient overlay */ position: relative; } /* The .main-header is now a gradient fade overlay at the top of the list view — same treatment as the reader's .reading-header. It still holds the sort control; pointer-events: none on the header itself lets taps pass through the empty area, with auto on its children so the control stays interactive. Articles scroll up behind the gradient and fade. */ .main-header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 0 24px 0 56px; height: 40px; min-height: 0; background: linear-gradient(to bottom, var(--bg), transparent); z-index: var(--z-nav); pointer-events: none; } .main-header > * { pointer-events: auto; } .view-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* Quick modals (URL save + Search) */ .quick-modal { position: fixed; inset: 0; z-index: var(--z-ctx-menu); display: flex; align-items: center; justify-content: center; padding: 16px; } .quick-modal.hidden { display: none; } .quick-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } .quick-modal-box { position: relative; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); width: 460px; max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px; } .quick-modal-box input[type="url"] { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 14px; outline: none; min-width: 0; } .quick-modal-box input[type="url"]:focus { border-color: var(--accent); } /* Confirm dialog variant — Apple UIAlertController look */ .confirm-modal-box { flex-direction: column; align-items: stretch; gap: 0; padding: 24px 24px 0; width: 300px; overflow: hidden; } .confirm-modal-box p { font-size: 15px; color: var(--text); line-height: 1.5; margin: 0 0 20px; text-align: center; } .confirm-modal-box input.auto-tag-input { margin-bottom: 20px; } .confirm-modal-actions { display: flex; gap: 0; margin: 0 -24px; border-top: 0.5px solid var(--border); } .confirm-modal-actions .btn { flex: 1; padding: 14px 8px; border-radius: 0; background: transparent; font-weight: 400; font-size: 16px; color: var(--accent); } .confirm-modal-actions .btn + .btn { border-left: 0.5px solid var(--border); } .confirm-modal-actions .btn:hover { background: var(--bg-hover); } .confirm-modal-actions .btn.secondary { color: var(--accent); font-weight: 400; } .confirm-modal-actions .btn.primary { background: transparent; color: var(--accent); font-weight: 600; } .confirm-modal-actions .btn.primary:hover { background: var(--bg-hover); } .confirm-modal-actions .btn.danger { background: transparent; color: var(--danger); font-weight: 600; } .confirm-modal-actions .btn.danger:hover { background: var(--bg-hover); } /* Search modal variant */ .search-modal-box { flex-direction: column; padding: 0; gap: 0; overflow: hidden; width: 520px; } .search-modal-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; } .search-modal-input-row input { flex: 1; border: none; background: none; outline: none; font-size: 16px; color: var(--text); min-width: 0; } .search-modal-input-row input::placeholder { color: var(--text-muted); } .search-modal-results { max-height: 380px; overflow-y: auto; border-top: 1px solid var(--border); } .search-result-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.1s; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: var(--bg-hover); } .search-result-favicon { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; box-sizing: border-box; padding: 1px; background: var(--favicon-tile); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; display: flex; align-items: center; justify-content: center; } .search-result-favicon img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; } .search-result-text { flex: 1; min-width: 0; } .search-result-title { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-result-snippet { font-size: 12px; color: var(--text-secondary); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .search-result-site { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .search-modal-empty { padding: 20px 16px; font-size: 13px; color: var(--text-muted); text-align: center; } .btn.primary.small { padding: 7px 14px; font-size: 13px; } /* Content Area */ .content { flex: 1; overflow-y: auto; /* Top padding clears the .main-header gradient zone (40px) plus a small gap, matching the reader-content treatment. */ padding: 44px 24px 24px 40px; } /* #add-url-btn now lives in sidebar as a nav-item */ /* Loading & Empty States */ .loading { display: flex; align-items: center; justify-content: center; padding: 48px; } .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state { text-align: center; padding: 64px 24px; } .empty-icon { font-size: 64px; margin-bottom: 16px; } /* Line-art glyph (e.g. the first-run quill) sits calmer than a 64px emoji. */ .empty-icon svg { width: 56px; height: 56px; color: var(--accent); } .empty-state h3 { font-size: 20px; margin-bottom: 8px; } .empty-state p { color: var(--text-secondary); } /* First-run welcome: primary action + a quieter helper line below it. */ .empty-cta { margin-top: 20px; } .empty-state .empty-hint { margin-top: 16px; font-size: 13px; color: var(--text-muted); max-width: 34ch; margin-left: auto; margin-right: auto; line-height: 1.5; } /* Reading Pane */ .reading-pane { width: var(--reading-pane-width); background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; position: relative; } /* Reader mode: reading pane fills the screen, saves list hides */ #main-screen.reader-mode .main { display: none; } /* In reader mode, hide the back button — sidebar toggle is the only nav control */ #main-screen.reader-mode #close-reading-btn { display: none; } #main-screen.reader-mode #reading-pane { flex: 1; width: auto; border-left: none; } #main-screen.reader-mode .reading-content { max-width: 720px; margin: 0 auto; width: 100%; } #main-screen.reader-mode .reading-meta { max-width: 720px; margin: 0 auto; width: 100%; } .reading-header { display: flex; align-items: center; padding: 12px 16px; min-height: 40px; flex-shrink: 0; } .reading-header-left { display: flex; align-items: center; gap: 8px; } .back-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); } #close-reading-btn { display: flex; align-items: center; gap: 6px; } .reading-actions { display: flex; gap: 4px; } .reading-content { flex: 1; overflow-y: visible; padding: 24px; } .reading-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; } /* Audio Player */ .audio-player { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--audio-player-bg); border-radius: var(--radius-lg); margin-bottom: 20px; } .audio-play-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; } .audio-play-btn:hover { background: var(--accent-hover); transform: scale(1.05); } .audio-play-btn svg.hidden { display: none; } .audio-progress-container { flex: 1; display: flex; align-items: center; gap: 10px; } .audio-progress-bar { flex: 1; height: 6px; background: rgba(0, 0, 0, 0.1); border-radius: 3px; cursor: pointer; position: relative; } .audio-progress { height: 100%; background: var(--accent); border-radius: 3px; width: 0%; transition: width 0.1s linear; } .audio-time { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 36px; } .audio-speed { padding: 4px 8px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--radius); background: var(--bg); font-size: 12px; color: var(--text-secondary); cursor: pointer; } .audio-generating { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--accent-wash); border-radius: var(--radius-lg); margin-bottom: 20px; font-size: 14px; color: var(--accent); } .audio-generating-spinner { width: 18px; height: 18px; border: 2px solid var(--accent-wash); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @media (max-width: 768px) { .audio-player { padding: 10px 12px; gap: 10px; } .audio-play-btn { width: 40px; height: 40px; } .audio-time { font-size: 11px; min-width: 32px; } .audio-speed { padding: 3px 6px; font-size: 11px; } } .reading-title-wrap { position: relative; margin-bottom: 24px; } #reading-title { font-family: 'Spectral', Georgia, Charter, serif; font-size: 28px; font-weight: 700; line-height: 1.3; margin-bottom: 0; cursor: text; border-radius: 4px; transition: background 0.15s; } #reading-title:hover { background: var(--bg-hover); } .reading-title-pencil { position: absolute; right: 4px; top: 4px; color: var(--text-muted); opacity: 0; transition: opacity 0.15s; pointer-events: none; line-height: 1; } .reading-title-wrap:hover .reading-title-pencil { opacity: 1; } /* Inline rename input inside a list item */ .list-title-edit { display: block; width: 100%; font-size: 15px; font-weight: 500; font-family: inherit; padding: 1px 6px; border: 1.5px solid var(--accent); border-radius: 4px; background: var(--bg); color: var(--text); outline: none; box-sizing: border-box; margin-bottom: 2px; } /* Inline rename input — matches title styling */ .reading-title-edit { display: block; width: 100%; font-size: 28px; font-weight: 700; line-height: 1.3; margin-bottom: 24px; padding: 2px 6px; border: 2px solid var(--accent); border-radius: 4px; background: var(--bg); color: var(--text); font-family: inherit; outline: none; box-sizing: border-box; } /* Summary corner button */ /* Summarize button active state (inside float-actions) */ #summarize-btn.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); } /* Summary side drawer — slides in from the left, just right of the toolbar */ .summary-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 300px; z-index: var(--z-summary-panel); background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transform: translateX(calc(-100% - 2px)); /* hidden: fully off-screen, clears border */ pointer-events: none; transition: transform 0.3s ease; } .summary-panel.open { transform: translateX(0); /* open: x=0→300, flush with left edge of reading-pane */ pointer-events: auto; } .summary-panel-header { padding: 47px 16px 12px; font-size: 15px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); flex-shrink: 0; } .summary-content { font-size: 14px; line-height: 1.7; color: var(--text); padding: 16px; overflow-y: auto; flex: 1; } .summary-content.loading { color: var(--text-secondary); font-style: italic; } .summary-bullets { white-space: pre-wrap; margin: 0 0 20px; } .summary-related { border-top: 1px solid var(--border); padding-top: 14px; } .summary-related-heading { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 10px; } .summary-related-link { display: block; font-size: 14px; line-height: 1.4; color: var(--accent); text-decoration: none; margin-bottom: 12px; cursor: pointer; } .summary-related-link:hover { text-decoration: underline; } .summary-related-external::after { content: ' ↗'; font-size: 11px; opacity: 0.6; } /* PDF embed */ .pdf-embed-container { width: 100%; height: calc(100vh - 120px); min-height: 600px; border-radius: var(--radius); overflow: hidden; } .pdf-embed { width: 100%; height: 100%; border: none; } /* PDF mode: wider layout so iframe has room to breathe */ .reading-pane.pdf-mode .reading-content { max-width: 75% !important; padding: 16px !important; margin: 0 auto !important; width: 75%; } .reading-pane.pdf-mode .pdf-embed-container { height: calc(100vh - 80px); } /* Floating highlight toolbar */ .highlight-toolbar { position: absolute; z-index: var(--z-floating); background: var(--chrome-dark); border-radius: 6px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); pointer-events: all; } .highlight-toolbar::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--chrome-dark); } .highlight-toolbar-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: none; border: none; color: white; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 4px; white-space: nowrap; } .highlight-toolbar-btn:hover { background: rgba(255,255,255,0.12); } /* In-app toast */ .app-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--chrome-dark); color: white; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: var(--z-top); pointer-events: none; } .app-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .app-toast.error { background: var(--danger); } .reading-body p { margin-bottom: 16px; } .reading-body .reader-loading { color: var(--text-secondary); } .reading-body a { color: var(--accent) !important; text-decoration: none !important; } .reading-body a:hover { color: var(--accent-hover); } .reading-body strong { font-weight: 600; } .reading-body em { font-style: italic; } .reading-body code { background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 0.85em; } .reading-body pre { background: var(--bg-tertiary); padding: 16px; border-radius: var(--radius); overflow-x: auto; margin: 16px 0; } .reading-body pre code { background: none; padding: 0; } .reading-body blockquote { border-left: 4px solid var(--accent); padding-left: 16px; margin: 16px 0; color: var(--text-secondary); font-style: italic; } .reading-body blockquote.reader-highlight-quote { position: relative; font-style: italic; font-size: 1.1em; color: var(--text); padding: 2px 0 2px 18px; margin-bottom: 20px; background: none; border-left: none; } .reading-body blockquote.reader-highlight-quote::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--accent); border-radius: 99px; } .reading-body ul, .reading-body ol { margin: 16px 0; padding-left: 24px; } .reading-body li { margin-bottom: 8px; } .reading-body h1, .reading-body h2, .reading-body h3, .reading-body h4, .reading-body h5, .reading-body h6 { font-weight: 600; margin: 24px 0 12px; line-height: 1.3; } .reading-body h1 { font-size: 1.55em; } .reading-body h2 { font-size: 1.3em; } .reading-body h3 { font-size: 1.1em; } .reading-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 16px 0; } .reading-tags { padding: 16px; border-top: 0.5px solid var(--border); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .reading-tag-chip { font-size: 12px; padding: 3px 10px; background: var(--bg-tertiary); border-radius: 20px; color: var(--text-secondary); white-space: nowrap; cursor: pointer; transition: background 0.12s, color 0.12s; } .reading-tag-chip:hover { background: var(--accent-wash); color: var(--accent); } .add-tag-btn { padding: 3px 10px; background: none; border: 1px dashed var(--border); border-radius: 20px; font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .add-tag-btn:hover { border-color: var(--accent); color: var(--accent); } /* Mobile Responsive */ @media (max-width: 1024px) { .reading-pane { position: fixed; right: 0; top: 0; bottom: 0; z-index: var(--z-content-aux); box-shadow: var(--shadow-lg); } } @media (max-width: 768px) { /* Prevent text size adjustment on rotation */ html { -webkit-text-size-adjust: 100%; } /* Safe area for iPhone notch */ body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* Sidebar becomes a slide-out drawer on mobile in both modes; the contents swap via .sidebar-mode-list / .sidebar-mode-reader. ~50% wider than desktop and with rounded inner-facing corners so the edge against the dimmed main pane feels softer. */ .sidebar { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 102px; /* z-index 360 sits above the reading-pane (300) so the drawer is on top in both list and reader mode — same component, same rules. */ z-index: var(--z-drawer); transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 24px rgba(0,0,0,0.2); background: var(--surface-elevated); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); border-top-right-radius: 20px; border-bottom-right-radius: 20px; } /* Discoverability peek — scheduled once per session by showMainScreen(). Slides the drawer ~66% out so the user can actually see the icons, then retracts. The .sidebar transition (0.25s ease) handles easing for both legs of the move. Listed BEFORE .sidebar.open so manual interaction wins on the cascade. */ .sidebar.peek { transform: translateX(-34%); } .sidebar.open { transform: translateX(0); } /* Larger tap targets on the mobile drawer */ .sidebar .nav-item { width: 60px; height: 60px; } .sidebar .nav-item svg { width: 24px; height: 24px; } /* Overlay when drawer is open. We transition background-color (not opacity) so that when the drawer is closed the element has no sampleable color — iOS Safari's bottom-toolbar tint was getting "stuck" gray because the overlay's rgba background was still computed at full strength even with opacity:0. With background:transparent, there's nothing to sample. */ .sidebar-overlay { position: fixed; inset: 0; background: transparent; /* z-index 350 sits above the reading-pane (300) so the dim is visible in reader mode. The sidebar (360) stays above the overlay. */ z-index: var(--z-drawer-overlay); pointer-events: none; transition: background-color 0.3s; } .sidebar-overlay.open { background: rgba(0,0,0,0.5); pointer-events: auto; /* cursor:pointer tells iOS Safari to treat this div as tappable, which makes the click event fire reliably (without it, a plain div with pointer-events:auto still swallows taps silently). */ cursor: pointer; } .main-header { padding: 0 16px; /* Matches the mobile reader-header fade height */ height: 52px; } .search-container { padding: 8px 12px; } .content { padding: 16px; /* Clears the .main-header gradient zone — matches mobile reader */ padding-top: 52px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } /* Full screen reading pane on mobile */ .reading-pane { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; z-index: var(--z-reading-pane); transform: translateX(100%); transition: transform 0.3s ease; } .reading-pane.open { transform: translateX(0); } .reading-pane.hidden { display: flex !important; transform: translateX(100%); } .reading-header { padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); } /* On mobile: turn the reading-header into a gradient fade overlay instead of hiding it. Content scrolls up behind it and fades into the background, matching the desktop behaviour. The close button inside remains hidden. */ #main-screen.reader-mode .reading-header { position: absolute; top: 0; left: 0; right: 0; /* Tall enough for the safe-area notch plus breathing room */ height: max(52px, env(safe-area-inset-top)); min-height: 0; padding: 0; background: linear-gradient(to bottom, var(--bg), transparent); z-index: var(--z-nav); pointer-events: none; } /* Push article content below the gradient zone */ #main-screen.reader-mode .reading-content { padding-top: max(52px, env(safe-area-inset-top)); } .reading-content { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } #reading-title { font-size: 22px; margin-bottom: 16px; } .reading-body { font-size: 17px; line-height: 1.7; } /* Pull-to-refresh indicator */ #pull-refresh-indicator { display: flex !important; align-items: center; justify-content: center; height: 0; overflow: hidden; transition: height 0.2s ease; color: var(--text-muted); font-size: 13px; gap: 8px; } #pull-refresh-indicator.visible { height: 48px; } #pull-refresh-indicator .ptr-spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } /* Touch targets — icon buttons stay compact but tappable */ .btn.icon { padding: 10px; min-width: 40px; min-height: 40px; } /* Sort control: enlarge the tap target on touch (glyph stays 17px) */ .sort-toggle-btn { width: 44px; height: 44px; } /* (Tag chips are hidden on mobile by a rule after the base .save-item-tags definition — equal-specificity tie that needs source-order resolution.) */ .nav-item { padding: 14px 12px; } /* Auth screen mobile */ .auth-container { padding: 32px 24px; margin: 16px; } .logo-icon { width: 56px; height: 56px; font-size: 28px; } .logo h1 { font-size: 24px; } } /* Extra small screens */ @media (max-width: 380px) { .content { padding: 12px; } .reading-content { padding: 12px; } #reading-title { font-size: 20px; } } /* Pre-wrapped plain-text fallback (e.g. when markdown can't be parsed) */ .plaintext-fallback { white-space: pre-wrap; } /* Modal */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } .modal-content { position: relative; background: var(--surface-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; animation: modalIn 0.2s ease; } @keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; } .modal-header h2 { font-size: 18px; font-weight: 600; } .modal-body { padding: 24px; overflow-y: auto; } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 0.5px solid var(--border); } /* Digest Settings Modal */ .digest-modal-content { max-width: 420px; } .digest-description { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; line-height: 1.5; } .digest-form { display: flex; flex-direction: column; gap: 20px; } .digest-form .form-group { display: flex; flex-direction: column; gap: 8px; } .digest-form label { font-size: 14px; font-weight: 500; color: var(--text); } .digest-form input[type="email"] { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; background: var(--bg); color: var(--text); } .digest-form input[type="email"]:focus { outline: none; border-color: var(--accent); } .digest-form select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; background: var(--bg); color: var(--text); cursor: pointer; } .schedule-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .schedule-row span { color: var(--text-secondary); font-size: 14px; } .timezone-hint { font-size: 12px !important; color: var(--text-muted) !important; } /* Toggle Switch */ .toggle-label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: normal !important; } .toggle-label input { display: none; } .toggle-switch { position: relative; width: 44px; height: 24px; background: var(--border); border-radius: 12px; transition: background 0.2s; flex-shrink: 0; } .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .toggle-label input:checked + .toggle-switch { background: var(--accent); } .toggle-label input:checked + .toggle-switch::after { transform: translateX(20px); } .digest-status { padding: 12px; border-radius: var(--radius); font-size: 13px; text-align: center; } .digest-status.success { background: rgba(16, 185, 129, 0.1); color: var(--success); } .digest-status.error { background: rgba(239, 68, 68, 0.1); color: var(--danger); } /* Digest settings button in nav */ .digest-settings-btn { margin-left: 26px; font-size: 12px; opacity: 0.7; border: none; background: none; } .digest-settings-btn:hover { opacity: 1; } #digest-options, #digest-schedule-group { transition: opacity 0.2s; } #digest-options.disabled, #digest-schedule-group.disabled { opacity: 0.5; pointer-events: none; } /* Dropzone */ .dropzone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 48px 24px; text-align: center; cursor: pointer; transition: all 0.15s; } .dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-wash); } .dropzone.dragover { border-style: solid; } .dropzone-content { display: flex; flex-direction: column; align-items: center; gap: 12px; } .dropzone-content svg { color: var(--text-muted); } .dropzone-content p { color: var(--text); font-size: 15px; } .dropzone-hint { font-size: 13px; color: var(--text-muted); } .import-help { margin-top: 16px; font-size: 13px; color: var(--text-muted); text-align: center; } .import-help code { background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 12px; } /* Import Preview */ .import-preview { margin-top: 24px; padding-top: 24px; border-top: 0.5px solid var(--border); } .import-stats { display: flex; justify-content: center; gap: 32px; margin-bottom: 24px; } .import-stat { text-align: center; } .import-stat-value { display: block; font-size: 28px; font-weight: 700; color: var(--accent); } .import-stat-label { font-size: 13px; color: var(--text-muted); } .import-books-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); } .import-book-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 0.5px solid var(--border); } .import-book-item:last-child { border-bottom: none; } .import-book-title { font-size: 14px; font-weight: 500; color: var(--text); } .import-book-author { font-size: 12px; color: var(--text-muted); } .import-book-count { font-size: 13px; color: var(--text-secondary); background: var(--bg-tertiary); padding: 4px 10px; border-radius: 20px; } /* Import success state */ .dropzone.success { border-color: var(--success); background: rgba(16, 185, 129, 0.05); } .dropzone.success svg { color: var(--success); } /* Processing state */ .dropzone.processing { pointer-events: none; opacity: 0.7; } @media (max-width: 768px) { .modal { padding: 16px; } .modal-content { max-height: 85vh; } .modal-header { padding: 16px; } .modal-body { padding: 16px; } .dropzone { padding: 32px 16px; } .import-stats { gap: 16px; } .import-stat-value { font-size: 24px; } } /* Reading Progress Bar */ .reading-progress-bar { height: 3px; background: var(--border); flex-shrink: 0; } /* Pin the progress bar to the very top of the viewport while reading */ body.reader-mode .reading-progress-bar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-progress); } .reading-progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.1s linear; } /* Credits */ .credits { display: none; } .credits a { color: var(--text-secondary); text-decoration: underline; } .credits a:hover { color: var(--accent); } .digest-email-input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; margin-top: 12px; } .digest-email-input:focus { outline: none; border-color: var(--accent); } /* ── Reading layout ── */ .reading-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; position: relative; } .audio-speed-btn { background: none; border: none; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; width: 44px; padding: 4px 0; text-align: center; letter-spacing: 0.01em; transition: color 0.15s; border-radius: 6px; } .audio-speed-btn:hover { color: var(--accent); background: var(--bg-tertiary); } .reading-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; } /* Fix: reading pane in reader mode must not be fixed so sidebar stays accessible */ #main-screen.reader-mode #reading-pane { position: static !important; } /* Desktop reader: float the header as a gradient overlay so content scrolls up behind it and fades there — the fade lives within the header zone, not the reading area. Scoped to >1024px so the mobile/tablet fixed-pane rules are untouched. */ @media (min-width: 1025px) { #main-screen.reader-mode #reading-pane { position: relative !important; } #main-screen.reader-mode .reading-header { position: absolute; top: 0; left: 0; right: 0; height: 40px; min-height: 0; padding: 0; background: linear-gradient(to bottom, var(--bg), transparent); z-index: var(--z-nav); pointer-events: none; } #main-screen.reader-mode .reading-content { padding-top: 44px; } } /* Hero image */ .reading-hero-image { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; } /* ── Save list items ── */ .saves-list { display: flex; flex-direction: column; } .save-item { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-bottom: 0.5px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: background 0.12s, opacity 0.18s ease, transform 0.18s ease, max-height 0.22s ease; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* containing block for the hover-action toolbar */ position: relative; } .save-item.removing { opacity: 0; transform: translateX(12px); pointer-events: none; } @keyframes saveItemIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .save-item.entering { animation: saveItemIn 0.18s ease forwards; } .save-item:hover { background: var(--bg-hover); } .save-item-favicon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; /* Uniform light tile so favicons look intentional in both themes — white-canvas icons (e.g. Substack) blend in and dark logos stay legible against the dark app background. */ box-sizing: border-box; padding: 2px; background: var(--favicon-tile); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 9px; } .save-item-favicon img { width: 100%; height: 100%; border-radius: 7px; display: block; object-fit: cover; -webkit-user-drag: none; pointer-events: none; } .save-item-main { flex: 1; min-width: 0; } .save-item-title { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .save-item-title.is-read { color: var(--text-muted); font-weight: 400; } .save-item-highlight { font-size: 13px; color: var(--text-secondary); font-style: italic; margin-bottom: 4px; max-width: 33vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Highlight rows carry a subtle accent edge so saved passages read as a distinct kind of item — echoes the reader's highlight quote bar. */ .save-item.highlight .save-item-favicon { box-shadow: inset 3px 0 0 var(--accent); border-color: transparent; } .save-item-meta { font-size: 12px; color: var(--text-muted); } .save-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .save-item-read-time { font-size: 11px; color: var(--text-muted); } /* Persistent favorite indicator on a list row — the at-rest/touch counterpart to the hover-toolbar star. Hidden on hover (desktop) since the action toolbar's favorite button takes over there. */ .save-item-fav-star { display: flex; align-items: center; flex-shrink: 0; color: gold; } @media (hover: hover) { .save-item:hover .save-item-fav-star { display: none; } } .reader-delete-btn:hover svg { stroke: var(--danger); } .save-item-tags { display: flex; flex-wrap: nowrap; gap: 3px; justify-content: flex-end; align-items: center; flex-shrink: 0; min-width: 60px; max-width: 200px; overflow: hidden; } /* Tag chips are too cramped on mobile — hide the column entirely. Must come AFTER the base .save-item-tags rule above so source order wins the equal-specificity tie. */ @media (max-width: 768px) { .save-item-tags { display: none; } } /* Hover-reveal action toolbar — appears between read-time and tags on hover-capable devices. Sits in-flow so it doesn't overlap the tag chips and they remain clickable. Mobile (touch) devices use long-press → context menu instead; the toolbar collapses to zero width there. */ .save-item-actions { display: flex; align-items: center; flex-shrink: 0; gap: 2px; /* Collapsed: takes no space, completely invisible */ max-width: 0; padding: 0; opacity: 0; overflow: hidden; background: var(--bg-secondary); border-radius: 10px; transition: max-width 0.2s ease, padding 0.2s ease, opacity 0.15s ease, margin 0.2s ease; } @media (hover: hover) { .save-item:hover .save-item-actions { max-width: 160px; padding: 4px; margin: 0 8px; opacity: 1; } } .save-item-action { width: 32px; height: 32px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-secondary); cursor: pointer; padding: 0; transition: background 0.12s, color 0.12s; } .save-item-action:hover { background: var(--bg-tertiary); color: var(--text); } .save-item-action.is-favorite { color: gold; } .save-item-action.is-favorite:hover { color: var(--favorite-deep); } .save-item-tag { font-size: 11px; padding: 2px 7px; background: var(--bg-tertiary); border-radius: 10px; color: var(--text-muted); white-space: nowrap; cursor: pointer; transition: background 0.12s, color 0.12s; } .save-item-tag:hover { background: var(--accent-wash); color: var(--accent); } @supports (-webkit-touch-callout: default) { /* Full-width scroll — no column eating into line length */ .reading-scroll { width: 100%; } /* Generous reading padding; no bottom chrome to reserve space for now */ .reading-content { padding-left: 22px; padding-right: 22px; padding-top: 20px; padding-bottom: calc(env(safe-area-inset-bottom) + 40px); } /* Reading-header is now the gradient fade overlay itself — it must stay visible during scroll so content keeps dissolving into the background. The legacy auto-hide is retired here just like it is for the bottom pill, tab bar, and FAB. */ } /* Drag and drop — pointer-events based, no native DnD API */ .save-item.dragging { opacity: 0.4; } .drag-clone-row { position: fixed; pointer-events: none; z-index: var(--z-top); opacity: 0.92; background: var(--bg); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,0.18); padding: 18px 16px; } .nav-item.drag-over { background: var(--accent-wash); color: var(--accent); border-radius: var(--radius); outline: 2px solid var(--accent); outline-offset: -2px; } /* Keyboard navigation highlight */ .save-item.keyboard-selected { background: var(--accent-wash); outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); } /* Link-only saves */ .save-item-link-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; align-self: center; } .save-item-link-url { font-size: 12px; color: var(--text-muted); } .link-card-reader { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px 0; } .link-card-domain { font-size: 14px; color: var(--text-muted); } .link-card-visit { font-size: 18px; color: var(--accent); text-decoration: none; font-weight: 500; } .link-card-visit:hover { text-decoration: underline; } .summary-save-article-btn { margin-top: 16px; font-size: 12px; width: 100%; } /* CSV import progress bar */ .csv-import-progress { margin: 16px 0 8px; } .csv-progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .csv-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; width: 0%; transition: width 0.2s; } .csv-progress-label { font-size: 12px; color: var(--text-muted); margin-top: 6px; text-align: center; } /* Reading body font. The size is the user's reading-text-size preference (Settings slider), written inline on #reading-body by applyFontSize() in app.js; this 18px is the default before that runs. Headings, code and blockquotes below are sized in em so the whole article scales together. */ .reading-body { font-family: 'Spectral', Georgia, Charter, serif; font-size: 18px; line-height: 1.75; color: var(--text); position: relative; } .reading-body p { margin-bottom: 1.2em; } .reading-body h1, .reading-body h2, .reading-body h3 { font-family: -apple-system, BlinkMacSystemFont, sans-serif; margin: 1.5em 0 0.5em; } /* Sidebar toggle hidden in list mode — sidebar is always visible there */ /* Hover trigger: fills remaining space below icons */ /* Arrow sizing */ .sidebar-header { cursor: pointer; } .sidebar-header:hover { background: var(--bg-tertiary); } /* Star button active state */ #favorite-btn.active svg { fill: gold; stroke: var(--favorite-deep); } /* Floating hover tooltip — positioned (left/top/opacity) at runtime in app.js; the static look lives here. */ #float-tooltip { position: fixed; z-index: var(--z-tooltip); background: var(--accent-wash); color: var(--accent); padding: 5px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; transform: translateY(-50%); } /* Right-click context menu */ .ctx-menu { position: fixed; z-index: var(--z-tooltip); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 164px; padding: 4px 0; } .ctx-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 14px; background: none; border: none; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; } .ctx-menu-item:hover { background: var(--bg-hover); } .ctx-tag-trigger { position: relative; justify-content: space-between; } .ctx-tag-trigger .ctx-chevron { margin-left: auto; flex-shrink: 0; } .ctx-menu-divider { height: 1px; background: var(--border); margin: 4px 0; } .ctx-danger { color: var(--danger); } .ctx-tag-sub { position: absolute; left: 100%; top: -4px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 150px; max-height: 240px; overflow-y: auto; padding: 4px 0; z-index: var(--z-tooltip-plus); } .ctx-tag-sub-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background: none; border: none; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; } .ctx-tag-sub-item:hover { background: var(--bg-hover); } .ctx-tag-sub-item.applied { color: var(--accent); font-weight: 500; } .ctx-tag-new { display: flex; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--border); margin-top: 4px; } .ctx-tag-new input { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-size: 12px; outline: none; min-width: 0; } .ctx-tag-new input:focus { border-color: var(--accent); } .ctx-tag-new button { padding: 5px 9px; background: var(--accent); color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; white-space: nowrap; } /* Batch selection */ .save-item.selected { background: var(--accent-wash) !important; outline: 1.5px solid var(--accent); outline-offset: -1px; } .batch-toolbar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); margin: 12px 0 4px; box-shadow: 0 -2px 16px rgba(0,0,0,0.08); z-index: var(--z-nav); } .batch-toolbar #batch-count-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; } .batch-actions { display: flex; align-items: center; gap: 8px; } /* Shortcuts modal */ .shortcuts-modal-box { position: relative; z-index: var(--z-base); background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); width: 380px; max-width: 100%; padding: 20px; } .shortcuts-modal-header { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 16px; } .shortcuts-section-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin: 14px 0 8px; } .shortcuts-section-label:first-of-type { margin-top: 0; } .shortcuts-grid { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 10px; } .shortcuts-grid span:empty { display: block; } .shortcuts-grid span { font-size: 13px; color: var(--text-secondary); } kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 2px 6px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 5px; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; } /* Tag picker popover */ .tag-picker { position: fixed; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,0.15); width: 220px; z-index: var(--z-tooltip); overflow: hidden; } .tag-picker-input { width: 100%; border: none; border-bottom: 1px solid var(--border); background: transparent; padding: 8px 12px; font-size: 13px; color: var(--text); outline: none; box-sizing: border-box; } .tag-picker-list { max-height: 180px; overflow-y: auto; } .tag-picker-option { padding: 7px 12px; font-size: 13px; color: var(--text); cursor: pointer; } .tag-picker-option:hover, .tag-picker-option.focused { background: var(--accent-wash); color: var(--accent); } .tag-picker-option.new-tag { color: var(--accent); border-top: 1px solid var(--border); } .tag-picker-empty { padding: 10px 12px; font-size: 12px; color: var(--text-muted); text-align: center; } @media (max-width: 768px) { /* Bottom tab bar, FAB, and more-sheet retired — navigation now lives in the slide-out sidebar reachable by swiping in from the left edge. The reading pane fills the screen since there's no bottom bar to make room for. */ #main-screen.reader-mode #reading-pane { position: fixed !important; bottom: 0 !important; } } /* ── Find-in-article bar ── */ /* Reader mode: search modal anchored to bottom */ #search-modal.reader-search { align-items: flex-end; padding: 0; } #search-modal.reader-search .search-modal-box { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); } .article-search-nav { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--border); } .article-search-count { font-size: 14px; color: var(--text-muted); min-width: 64px; text-align: center; } .article-search-btn { background: none; border: none; cursor: pointer; padding: 8px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; } .article-search-btn:hover { background: var(--bg-hover); color: var(--text); } .article-search-done { margin-left: 8px; color: var(--accent); } .article-search-done:hover { color: var(--accent); } mark.find-highlight { background: rgba(255, 213, 0, 0.45); color: inherit; border-radius: 2px; } mark.find-highlight-current { background: rgba(255, 140, 0, 0.65); color: inherit; }