/* ============================================================ Design Tokens — semantic color / elevation / motion system ------------------------------------------------------------ Themes set semantic tokens on : light | dark | oled (pure black) | eink (pure white) Legacy component variables (--color-bg, --color-primary, ...) are aliases resolved from the semantic tokens, so existing rules keep working unchanged. ============================================================ */ :root, [data-theme="light"] { color-scheme: light; /* Surfaces */ --color-canvas: #ffffff; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-surface-hover: #f5f5f5; --color-surface-active: #ebebeb; --color-surface-muted: #f5f5f5; --color-nav: #f8f9fa; /* Text */ --color-text-primary: #1a1a1a; --color-text-secondary: #666666; --color-text-muted: #8a8a8a; --color-text-disabled: #b3b3b3; --color-text-inverse: #ffffff; /* Lines */ --color-border: #e0e0e0; --color-border-strong: #bdbdbd; --color-divider: #e0e0e0; /* Accent */ --color-accent: #1a73e8; --color-accent-hover: #1557b0; --color-accent-active: #0d47a1; --color-accent-text: #ffffff; --color-accent-soft: rgba(26, 115, 232, 0.08); /* Status */ --color-success: #188038; --color-success-bg: rgba(24, 128, 56, 0.08); --color-warning: #b26a00; --color-error: #d93025; --color-error-bg: rgba(217, 48, 37, 0.08); --color-error-border: rgba(217, 48, 37, 0.4); --color-on-error: #ffffff; --color-info: #1a73e8; --color-unread: #f28b24; /* Focus & selection */ --color-focus-ring: #1a73e8; --color-selection-bg: rgba(26, 115, 232, 0.22); --color-selection-text: #1a1a1a; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12); /* Shape */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Motion */ --motion-duration-fast: 120ms; --motion-duration-normal: 240ms; /* ---- Legacy aliases (do not use in new code) ---- Note: --color-text-secondary, --color-border and --color-surface are shared between the legacy and semantic sets, so they need no aliasing here. */ --color-bg: var(--color-canvas); --color-bg-secondary: var(--color-surface-muted); --color-text: var(--color-text-primary); --color-primary: var(--color-accent); --color-primary-hover: var(--color-accent-hover); --color-nav-bg: var(--color-nav); --transition-layout: 300ms ease; } [data-theme="dark"] { color-scheme: dark; --color-canvas: #1a1a1a; --color-surface: #252525; --color-surface-elevated: #2d2d2d; --color-surface-hover: #2d2d2d; --color-surface-active: #333333; --color-surface-muted: #2d2d2d; --color-nav: #202020; --color-text-primary: #e0e0e0; --color-text-secondary: #999999; --color-text-muted: #7d7d7d; --color-text-disabled: #616161; --color-text-inverse: #0d2137; --color-border: #3d3d3d; --color-border-strong: #5c5c5c; --color-divider: #3d3d3d; --color-accent: #8ab4f8; --color-accent-hover: #aecbfa; --color-accent-active: #d2e3fc; --color-accent-text: #0d2137; --color-accent-soft: rgba(138, 180, 248, 0.1); --color-success: #81c995; --color-success-bg: rgba(129, 201, 149, 0.12); --color-warning: #fdd663; --color-error: #f28b82; --color-error-bg: rgba(242, 139, 130, 0.12); --color-error-border: rgba(242, 139, 130, 0.5); --color-on-error: #20140f; --color-info: #8ab4f8; --color-unread: #f28b24; --color-focus-ring: #8ab4f8; --color-selection-bg: rgba(138, 180, 248, 0.3); --color-selection-text: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.45); } /* ============================================================ OLED Pure Black — true #000000 canvas so pixels turn off. Hierarchy comes from hairline borders and slightly lifted surfaces, never from near-black canvas shades. ============================================================ */ [data-theme="oled"] { color-scheme: dark; --color-canvas: #000000; --color-surface: #101012; --color-surface-elevated: #17171a; --color-surface-hover: #161618; --color-surface-active: #1f1f22; --color-surface-muted: #131316; --color-nav: #000000; --color-text-primary: #e8eaed; --color-text-secondary: #9aa0a6; --color-text-muted: #80868b; --color-text-disabled: #5f6368; --color-text-inverse: #0a2540; --color-border: #33363a; --color-border-strong: #4d5155; --color-divider: #2a2d30; --color-accent: #8ab4f8; --color-accent-hover: #aecbfa; --color-accent-active: #d2e3fc; --color-accent-text: #0a2540; --color-accent-soft: rgba(138, 180, 248, 0.12); --color-success: #81c995; --color-success-bg: rgba(129, 201, 149, 0.14); --color-warning: #fdd663; --color-error: #f28b82; --color-error-bg: rgba(242, 139, 130, 0.14); --color-error-border: rgba(242, 139, 130, 0.5); --color-on-error: #20140f; --color-info: #8ab4f8; --color-unread: #fbbc4f; --color-focus-ring: #8ab4f8; --color-selection-bg: rgba(138, 180, 248, 0.3); --color-selection-text: #ffffff; /* Shadows are invisible on true black — keep them minimal. */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* ============================================================ E-Ink Pure White — flat, texture-free, high-contrast, animation-free. Grayscale-safe: hierarchy never relies on hue, only on lightness and solid borders. ============================================================ */ [data-theme="eink"] { color-scheme: light; --color-canvas: #ffffff; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-surface-hover: #f0f0f0; --color-surface-active: #e6e6e6; --color-surface-muted: #f2f2f2; --color-nav: #ffffff; --color-text-primary: #000000; --color-text-secondary: #3d3d3d; --color-text-muted: #595959; --color-text-disabled: #8c8c8c; --color-text-inverse: #ffffff; --color-border: #999999; --color-border-strong: #1a1a1a; --color-divider: #cccccc; /* Monochrome ink accent: reads as pure black in grayscale. */ --color-accent: #1a1a1a; --color-accent-hover: #000000; --color-accent-active: #000000; --color-accent-text: #ffffff; --color-accent-soft: #ebebeb; --color-success: #1e6b34; --color-success-bg: #eef2ee; --color-warning: #7a5200; --color-error: #a61b1b; --color-error-bg: #f4ecec; --color-error-border: #a61b1b; --color-on-error: #ffffff; --color-info: #1a3a6b; --color-unread: #1a1a1a; --color-focus-ring: #1a1a1a; --color-selection-bg: #d9d9d9; --color-selection-text: #000000; /* Elevation via borders, not shadows. */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* E-Ink: eliminate all motion — static display, no partial refresh churn. */ [data-theme="eink"] *, [data-theme="eink"] *::before, [data-theme="eink"] *::after { animation: none !important; transition: none !important; } [data-theme="eink"] .swipe-boundary-message { opacity: 1; } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Text selection & keyboard focus — themed, never hardcoded */ ::selection { background-color: var(--color-selection-bg); color: var(--color-selection-text); } :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--color-text); background-color: var(--color-bg); } #app { height: 100%; display: flex; flex-direction: column; } /* App Shell Layout */ .app-shell { display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* Desktop Layout - Dual Pane */ .layout-desktop { display: flex; flex: 1; overflow: hidden; } .layout-desktop .pane-sidebar { width: 320px; min-width: 280px; border-right: 1px solid var(--color-border); overflow-y: auto; background-color: var(--color-nav-bg); } .layout-desktop .pane-content { flex: 1; overflow-y: auto; background-color: var(--color-bg); } /* Mobile Layout - Single Pane */ .layout-mobile { display: flex; flex-direction: column; flex: 1; overflow: hidden; } .layout-mobile .pane-main { flex: 1; overflow-y: auto; background-color: var(--color-bg); } .layout-mobile .nav-bar { display: flex; justify-content: space-around; align-items: center; height: 56px; background-color: var(--color-nav-bg); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .layout-mobile .nav-bar .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; /* Five items now share the bar — flex so each one takes an even fifth instead of overflowing a narrow phone. */ flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 2px; border: none; background: none; color: var(--color-text-secondary); font-size: 12px; cursor: pointer; text-decoration: none; transition: color 0.15s; } .layout-mobile .nav-bar .nav-item__label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .layout-mobile .nav-bar .nav-item.active { color: var(--color-primary); } .layout-mobile .nav-bar .nav-item:hover { color: var(--color-primary-hover); } /* Desktop sidebar navigation */ .layout-desktop .sidebar-nav { display: flex; flex-direction: column; padding: 8px 0; } .layout-desktop .sidebar-nav .nav-item { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; color: var(--color-text-secondary); text-decoration: none; transition: background-color 0.15s, color 0.15s; } .layout-desktop .sidebar-nav .nav-item:hover { background-color: var(--color-bg-secondary); color: var(--color-primary-hover); } .layout-desktop .sidebar-nav .nav-item.active { color: var(--color-primary); background-color: var(--color-bg-secondary); font-weight: 500; } /* Route container */ .route-view { padding: 16px; } /* Responsive breakpoint */ @media (min-width: 1024px) { .layout-mobile { display: none; } } @media (max-width: 1023px) { .layout-desktop { display: none; } } /* Utility: ensure touch targets */ button, a, [role="button"] { min-width: 44px; min-height: 44px; } /* Placeholder view styles */ .view-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-text-secondary); font-size: 18px; } /* Pull-to-refresh indicator */ .pull-refresh-indicator { display: flex; align-items: center; justify-content: center; height: 0; overflow: hidden; background-color: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: 14px; transition: height 0.2s ease, opacity 0.2s ease; } /* PWA update banner (fixed overlay, injected by pwa.ts) */ .pwa-update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; font-size: 14px; background-color: var(--color-accent); color: var(--color-accent-text); box-shadow: var(--shadow-md); } .pwa-update-banner__refresh { background-color: var(--color-canvas); color: var(--color-accent); border: 1px solid var(--color-canvas); padding: 6px 16px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; min-width: 44px; min-height: 44px; } .pwa-update-banner__dismiss { background: transparent; color: inherit; border: none; padding: 6px; cursor: pointer; font-size: 18px; min-width: 44px; min-height: 44px; } /* Swipe boundary message */ .swipe-boundary-message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 24px; background-color: var(--color-bg-secondary); color: var(--color-text-secondary); border-radius: 8px; box-shadow: var(--shadow-md); font-size: 14px; z-index: 1000; opacity: 0; animation: fadeInOut 1.5s ease forwards; } @keyframes fadeInOut { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } /* ============================== Read-Aloud Player Requirements: 10.3, 10.4 ============================== */ .read-aloud-player { display: flex; align-items: center; padding: 8px 0; margin: 8px 0; border-top: 1px solid var(--color-border); } .player-controls { display: flex; align-items: center; gap: 8px; } .player-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 8px; background-color: var(--color-surface); color: var(--color-text); font-size: 14px; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .player-btn:hover:not(:disabled) { background-color: var(--color-bg-secondary); border-color: var(--color-primary); } .player-btn:disabled { opacity: 0.5; cursor: not-allowed; } .player-icon { font-size: 16px; } .player-loading { font-size: 14px; color: var(--color-text-secondary); margin-left: 8px; animation: pulsate 1.2s ease-in-out infinite; } @keyframes pulsate { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Error state */ .player-error { display: flex; align-items: center; gap: 12px; } .player-error-msg { font-size: 14px; color: var(--color-error); } .player-retry { color: var(--color-primary); border-color: var(--color-primary); } /* Paragraph highlighting during playback (requirement 10.4) */ .read-aloud-active-paragraph { background-color: var(--color-accent-soft); border-left: 3px solid var(--color-primary); padding-left: 12px; border-radius: 2px; transition: background-color 0.3s ease, border-left-color 0.3s ease; } /* Login Gate */ .login-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 24px; } .login-logo { width: 72px; height: 72px; display: block; border-radius: 18px; margin-bottom: 20px; box-shadow: 0 6px 20px rgba(26, 115, 232, 0.22); } .login-title { font-size: 24px; font-weight: 600; color: var(--color-text); margin-bottom: 8px; } .login-subtitle { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 24px; } .login-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; } .login-input { padding: 12px 14px; min-height: 44px; font-size: 16px; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; outline: none; } .login-input:focus { border-color: var(--color-primary); } .login-button { padding: 12px 16px; min-height: 44px; font-size: 16px; font-weight: 500; color: var(--color-accent-text); background-color: var(--color-primary); border: none; border-radius: 8px; cursor: pointer; transition: background-color 100ms ease; } .login-button:hover { background-color: var(--color-primary-hover); } .login-button:disabled { opacity: 0.6; cursor: not-allowed; } .login-error { margin-top: 12px; font-size: 14px; color: var(--color-error); text-align: center; } /* Settings View */ .settings-view { padding: 24px; max-width: 720px; } .settings-section { margin-bottom: 32px; padding: 16px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; } .settings-heading { font-size: 16px; font-weight: 600; color: var(--color-text); margin-bottom: 12px; } /* ===== Folo-style desktop layout ===== */ .layout-folo { display: flex; height: 100%; overflow: hidden; } /* Icon navigation rail */ .nav-rail { width: 64px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; background-color: var(--color-nav-bg); border-right: 1px solid var(--color-border); } .nav-rail__brand { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-bottom: 16px; user-select: none; } .nav-rail__brand img { width: 36px; height: 36px; display: block; border-radius: 10px; } .nav-rail__item { width: 52px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; text-decoration: none; color: var(--color-text-secondary); transition: background-color 100ms ease, color 100ms ease; } .nav-rail__item:hover { background-color: var(--color-bg-secondary); color: var(--color-text); } .nav-rail__item.active { background-color: var(--color-bg-secondary); color: var(--color-primary); } .nav-rail__icon { font-size: 18px; line-height: 1; } .nav-rail__label { font-size: 10px; } /* Main content host */ .main-content { flex: 1; min-width: 0; height: 100%; overflow: hidden; } .main-view { display: flex; height: 100%; overflow: hidden; } /* Feed tree column */ .main-view__tree { width: 240px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--color-border); padding: 8px 6px; } .feed-tree__all, .feed-tree__category, .feed-tree__feed { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: 8px; cursor: pointer; user-select: none; } .feed-tree__all:hover, .feed-tree__category:hover, .feed-tree__feed:hover { background-color: var(--color-bg-secondary); } .feed-tree__all.active, .feed-tree__feed.active { background-color: var(--color-bg-secondary); } .feed-tree__all.active .feed-tree__all-name, .feed-tree__feed.active .feed-tree__feed-name { color: var(--color-primary); font-weight: 600; } .feed-tree__all-icon { font-size: 14px; } .feed-tree__all-name, .feed-tree__category-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Folo-style chevron: an SVG arrow centred in a fixed box, rotated when open. */ .feed-tree__chevron { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-width: 20px; flex-shrink: 0; padding: 0; color: var(--color-text-muted); border-radius: 4px; transition: transform 0.18s ease, color 0.15s ease; } .feed-tree__chevron svg { width: 14px; height: 14px; display: block; } .feed-tree__chevron--open { transform: rotate(90deg); } .feed-tree__category:hover .feed-tree__chevron { color: var(--color-text); } .feed-tree__favicon { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; } .feed-tree__feed-name { flex: 1; font-size: 13px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed-tree__feed.disabled .feed-tree__feed-name { opacity: 0.5; } .feed-tree__count { font-size: 11px; color: var(--color-text-secondary); min-width: 16px; text-align: right; } .feed-tree__loading { padding: 12px 8px; font-size: 12px; color: var(--color-text-secondary); } /* Article preview list column */ .main-view__list { width: 360px; flex-shrink: 0; border-right: 1px solid var(--color-border); height: 100%; } .article-pane { display: flex; flex-direction: column; height: 100%; } .article-pane__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .article-pane__title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .article-pane__actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; } .article-pane__action { min-width: 28px; min-height: 28px; padding: 0 10px; font-size: 12px; color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); border-radius: 14px; cursor: pointer; } .article-pane__action:hover { color: var(--color-text); background-color: var(--color-bg-secondary); } .article-pane__action.active { color: var(--color-primary); border-color: var(--color-primary); } .article-pane__action.spinning { animation: pane-spin 0.8s linear infinite; } @keyframes pane-spin { to { transform: rotate(360deg); } } .article-pane__scroll { flex: 1; overflow-y: auto; } .article-pane__card { display: flex; gap: 10px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--color-border); border-left: 2px solid transparent; } .article-pane__card:hover { background-color: var(--color-bg-secondary); } .article-pane__card.active { background-color: var(--color-bg-secondary); border-left-color: var(--color-primary); } .article-pane__card-text { flex: 1; min-width: 0; } .article-pane__card-meta { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .article-pane__card-title { font-size: 14px; font-weight: 600; color: var(--color-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-pane__card.read .article-pane__card-title { color: var(--color-text-secondary); font-weight: 500; } .article-pane__card-excerpt { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-pane__card-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; align-self: center; } .article-pane__empty, .article-pane__loading { padding: 24px 16px; font-size: 13px; color: var(--color-text-secondary); text-align: center; } /* Reader column */ .main-view__reader { flex: 1; min-width: 0; height: 100%; overflow-y: auto; } .main-view__reader-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); font-size: 14px; } .main-view__reader .route-view { max-width: 720px; margin: 0 auto; padding: 32px 40px; } /* ===== Reading pane: adaptive width & typography ===== */ .main-view__reader .route-view { width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(20px, 3.5vw, 48px) clamp(16px, 4vw, 56px); box-sizing: border-box; } .article-view-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.35; color: var(--color-text); margin-bottom: 12px; } .article-view-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 16px; } .article-view-author:not(:empty)::after { content: '·'; margin-left: 8px; } /* AI action buttons */ .article-view-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .action-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 16px; font-size: 13px; font-weight: 500; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .action-btn:hover { color: var(--color-primary); border-color: var(--color-primary); background-color: var(--color-bg-secondary); } .action-btn:active { transform: scale(0.97); } .action-btn__icon { font-size: 13px; line-height: 1; } /* Article body typography */ .article-view-body { font-size: 15px; line-height: 1.85; color: var(--color-text); word-break: break-word; } .article-view-body img, .article-view-body video { max-width: 100%; height: auto; border-radius: 8px; } .article-view-body a { color: var(--color-primary); text-decoration: none; } .article-view-body a:hover { text-decoration: underline; } .article-view-body p { margin: 0 0 1em; } .article-view-body h1, .article-view-body h2, .article-view-body h3, .article-view-body h4 { line-height: 1.4; margin: 1.4em 0 0.6em; color: var(--color-text); } .article-view-body blockquote { margin: 1em 0; padding: 4px 16px; border-left: 3px solid var(--color-primary); color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border-radius: 0 8px 8px 0; } .article-view-body pre { overflow-x: auto; padding: 14px 16px; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; line-height: 1.6; } .article-view-body code { font-size: 0.9em; background-color: var(--color-bg-secondary); padding: 2px 6px; border-radius: 4px; } .article-view-body pre code { padding: 0; background: none; } .article-view-body table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 14px; } .article-view-body th, .article-view-body td { border: 1px solid var(--color-border); padding: 8px 12px; text-align: left; } .article-view-body hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5em 0; } /* Source footer link */ .article-view-footer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--color-border); } .article-source-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px; font-size: 13px; color: var(--color-text-secondary); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; text-decoration: none; transition: color 120ms ease, border-color 120ms ease; } .article-source-link:hover { color: var(--color-primary); border-color: var(--color-primary); } /* Nav rail: keep labels on one line */ .nav-rail__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ============================================================ Daily digest — centered card, loading orb, content styling ============================================================ */ /* The digest occupies the content area alone, so it may fill the full height and centre itself. Vertical centring uses `margin: auto` on the card rather than `justify-content: center` — auto margins collapse to 0 once the content overflows, so a long digest stays scrollable instead of having its top clipped out of reach. */ .route-view--digest { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; } .daily-digest-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; max-width: 820px; margin: auto; padding: clamp(24px, 6vh, 72px) clamp(16px, 3vw, 40px); box-sizing: border-box; text-align: center; animation: digest-card-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes digest-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .digest-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; color: var(--color-text-primary); } /* ===== Loading state ===== */ .digest-loading { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; } /* Orb — signal waves rippling out of a pulsing core (echoes the logo). */ .digest-orb { position: relative; width: 104px; height: 104px; flex: 0 0 auto; margin-bottom: 4px; } .digest-orb__halo, .digest-orb__ring, .digest-orb__core { position: absolute; border-radius: 50%; pointer-events: none; } .digest-orb__halo { inset: 0; background: radial-gradient(circle, var(--color-accent-soft) 0%, transparent 68%); animation: digest-halo 3.2s ease-in-out infinite; } @keyframes digest-halo { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } } .digest-orb__ring { inset: 0; border: 2px solid var(--color-accent); opacity: 0; animation: digest-ripple 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; } .digest-orb__ring--1 { animation-delay: 0s; } .digest-orb__ring--2 { animation-delay: 0.8s; } .digest-orb__ring--3 { animation-delay: 1.6s; } @keyframes digest-ripple { 0% { transform: scale(0.14); opacity: 0; } 10% { opacity: 0.7; } 65% { opacity: 0.22; } 100% { transform: scale(1); opacity: 0; } } .digest-orb__core { top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background-color: var(--color-accent); animation: digest-core 2.4s ease-in-out infinite; } @keyframes digest-core { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.4); opacity: 1; } } .digest-loading__status { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; line-height: 1.5; letter-spacing: 0.02em; color: var(--color-text-secondary); } .digest-loading__dots { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; } .digest-loading__dots i { width: 4px; height: 4px; border-radius: 50%; background-color: var(--color-accent); opacity: 0.3; animation: digest-dot 1.4s ease-in-out infinite; } .digest-loading__dots i:nth-child(1) { animation-delay: 0s; } .digest-loading__dots i:nth-child(2) { animation-delay: 0.18s; } .digest-loading__dots i:nth-child(3) { animation-delay: 0.36s; } @keyframes digest-dot { 0%, 100% { opacity: 0.3; transform: translateY(0) scale(0.8); } 35% { opacity: 1; transform: translateY(-4px) scale(1.15); } } /* Gradient text is opt-in: without background-clip support the text would render invisible, so keep the plain colour as the fallback. */ @supports (background-clip: text) or (-webkit-background-clip: text) { .digest-loading .digest-title { background-image: linear-gradient( 100deg, var(--color-text-primary) 0%, var(--color-text-primary) 38%, var(--color-accent) 50%, var(--color-text-primary) 62%, var(--color-text-primary) 100% ); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: digest-sheen 5.5s ease-in-out infinite; } @keyframes digest-sheen { 0%, 100% { background-position: 130% 50%; } 50% { background-position: -30% 50%; } } .digest-loading__label { background-image: linear-gradient( 90deg, var(--color-text-secondary) 0%, var(--color-text-secondary) 40%, var(--color-text-primary) 50%, var(--color-text-secondary) 60%, var(--color-text-secondary) 100% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: digest-shimmer 2.4s linear infinite; } @keyframes digest-shimmer { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } } } /* ===== Buttons (pill geometry, matches the settings page) ===== */ .digest-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 38px; padding: 7px 22px; border: 1px solid var(--color-border); border-radius: 19px; background-color: var(--color-surface); color: var(--color-text-secondary); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .digest-btn:hover { color: var(--color-accent); border-color: var(--color-accent); background-color: var(--color-accent-soft); } .digest-btn:active { transform: scale(0.97); } .digest-btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } /* ===== Empty / error / timeout states ===== */ .digest-empty, .digest-error, .digest-timeout { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .digest-empty-message, .digest-error-message, .digest-timeout-message { max-width: 44ch; font-size: 15px; line-height: 1.7; color: var(--color-text-secondary); } .digest-error-message { color: var(--color-error); } /* ===== Content state ===== */ .digest-content { width: 100%; max-width: 820px; } .digest-body { width: 100%; margin-top: 12px; text-align: left; font-size: 15px; line-height: 1.75; color: var(--color-text); } .digest-content h2, .digest-content h3, .digest-content h4 { color: var(--color-text); line-height: 1.4; margin: 1.2em 0 0.6em; } .digest-content ul, .digest-content ol { padding-left: 1.4em; margin: 0.4em 0 1em; } .digest-content li { margin-bottom: 0.5em; line-height: 1.7; } .digest-content li::marker { color: var(--color-primary); } .digest-content table { border-collapse: collapse; width: 100%; margin: 0.8em 0 1.2em; font-size: 14px; } .digest-content th, .digest-content td { border: 1px solid var(--color-border); padding: 8px 12px; text-align: left; line-height: 1.6; } .digest-content th { background-color: var(--color-bg-secondary); font-weight: 600; } .digest-content blockquote { margin: 1em 0; padding: 4px 16px; border-left: 3px solid var(--color-primary); color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border-radius: 0 8px 8px 0; } .digest-content code { font-size: 0.9em; background-color: var(--color-bg-secondary); padding: 2px 6px; border-radius: 4px; } .digest-content hr { border: none; border-top: 1px solid var(--color-border); margin: 1.2em 0; } .digest-content a { color: var(--color-primary); text-decoration: none; } .digest-content a:hover { text-decoration: underline; } /* Reduced motion: drop the ripples and sweeps, keep a static signal mark. */ @media (prefers-reduced-motion: reduce) { .daily-digest-card, .digest-orb__halo, .digest-orb__ring, .digest-orb__core, .digest-loading__dots i, .digest-loading .digest-title, .digest-loading__label { animation: none; } .digest-orb__ring { opacity: 0.28; } .digest-orb__ring--2 { transform: scale(0.68); } .digest-orb__ring--3 { transform: scale(0.36); } .digest-orb__core, .digest-loading__dots i { opacity: 1; } } /* ===== Subscription management page ===== */ .route-view .subscription-list { max-width: 860px; margin: 0 auto; padding: 24px; box-sizing: border-box; width: 100%; } .subscription-list__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .subscription-list__title { font-size: 22px; font-weight: 700; color: var(--color-text); } .subscription-list__actions { display: flex; gap: 8px; flex-wrap: wrap; } .subscription-list__actions .btn { border: 1px solid var(--color-border); border-radius: 18px; padding: 6px 16px; background-color: var(--color-surface); color: var(--color-text); font-size: 13px; cursor: pointer; } .subscription-list__actions .btn--primary { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-accent-text); } .subscription-list__actions .btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .subscription-list__actions .btn--primary:hover { color: var(--color-accent-text); } .category-group { border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 16px; background-color: var(--color-surface); overflow: hidden; } .category-group__header { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background-color: var(--color-bg-secondary); } .category-group__toggle { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; padding: 0; border-radius: 8px; flex-shrink: 0; transition: background-color 0.15s ease; } .category-group__toggle:hover { background-color: var(--color-border); } /* The chevron keeps one direction and rotates when open — rotating the inner SVG (not the button) keeps the hover background from tilting with it. */ .category-group__toggle svg { width: 14px; height: 14px; display: block; transition: transform 0.15s ease; } .category-group__toggle--open svg { transform: rotate(90deg); } .category-group__name { flex: 1; font-size: 15px; font-weight: 600; color: var(--color-text); cursor: pointer; } .category-group__count { font-size: 12px; color: var(--color-text-secondary); } .category-group__action { background: none; border: none; cursor: pointer; font-size: 14px; min-width: 28px; min-height: 28px; border-radius: 6px; color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; padding: 0; } .category-group__action:hover { background-color: var(--color-border); } .category-group__action svg { width: 15px; height: 15px; display: block; } /* Destructive row action — matches .btn--danger's colour language. */ .category-group__action--danger { color: var(--color-error); } /* Marks an auto-disabled feed; sits inline after the title text. */ .category-group__alert { display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 4px; color: var(--color-warning); } .category-group__alert svg { display: block; } /* .btn--icon had no rule of its own; the delete button now holds an SVG. */ .btn--icon svg { display: block; pointer-events: none; } .category-group__list { list-style: none; padding: 4px 8px; margin: 0; } .category-group__item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; } .category-group__item:hover { background-color: var(--color-bg-secondary); } .category-group__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; } .category-group__sub-title { flex: 1; font-size: 14px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .category-group__last-fetched { font-size: 12px; color: var(--color-text-secondary); flex-shrink: 0; } .category-group__move { max-width: 130px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 6px; background-color: var(--color-surface); color: var(--color-text); flex-shrink: 0; } .category-group__empty { padding: 8px; font-size: 13px; color: var(--color-text-secondary); } /* ===== Inline subscription editor (title + RSS URL) ===== */ .category-group__item--editing { padding: 0; } .category-group__editor { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; align-items: end; gap: 8px; padding: 8px; margin: 2px 0; border: 1px solid var(--color-accent); border-radius: 10px; background-color: var(--color-bg-secondary); box-sizing: border-box; } .category-group__editor-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .category-group__editor-label { font-size: 11px; color: var(--color-text-secondary); } /* Pill geometry shared with the settings-page controls. */ .category-group__editor-input { width: 100%; min-height: 34px; padding: 0 12px; font-size: 13px; font-family: inherit; border: 1px solid var(--color-border); border-radius: 17px; background-color: var(--color-surface); color: var(--color-text); box-sizing: border-box; } .category-group__editor-input:focus { outline: none; border-color: var(--color-accent); } .category-group__editor-input:disabled { opacity: 0.6; } .category-group__editor-actions { display: flex; gap: 6px; flex-shrink: 0; } .category-group__editor-actions .btn { min-height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13px; white-space: nowrap; } .category-group__editor-error { grid-column: 1 / -1; font-size: 12px; /* This used to read from a `--color-danger` token that is defined nowhere in this sheet, so the hardcoded fallback always won — pinning one value for every theme. It happened to equal the light-theme error colour, which hid the bug; dark/oled need a lighter red and eink a darker one. Use the token the rest of the sheet already uses. */ color: var(--color-error); } /* Narrow viewports: stack the two inputs above the buttons. */ @media (max-width: 640px) { .category-group__editor { grid-template-columns: minmax(0, 1fr); } .category-group__editor-actions { justify-content: flex-end; } } /* Scrollable main content area */ .main-content { overflow-y: auto; } /* ===== Settings page (Folo style) ===== */ .settings-view { max-width: 820px; margin: 0 auto; padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px); box-sizing: border-box; } .settings-page-header { margin-bottom: 20px; } .settings-page-title { font-size: 22px; font-weight: 700; color: var(--color-text); } .settings-section { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; } .settings-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); } .settings-heading__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 17px; background-color: var(--color-bg-secondary); border-radius: 10px; flex-shrink: 0; } .settings-heading__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .settings-heading__title { font-size: 15px; font-weight: 600; color: var(--color-text); } .settings-heading__desc { font-size: 12px; color: var(--color-text-secondary); } /* Panels render their own titles — the section heading replaces them */ .settings-section .github-config-panel__title, .settings-section .llm-config-panel__title { display: none; } /* Form controls inside settings */ .settings-section input[type="text"], .settings-section input[type="password"], .settings-section input[type="url"], .settings-section select { width: 100%; padding: 9px 12px; font-size: 14px; color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; outline: none; box-sizing: border-box; transition: border-color 120ms ease; } .settings-section input:focus, .settings-section select:focus { border-color: var(--color-primary); } .settings-section select { width: auto; cursor: pointer; } .settings-section .github-config-panel__field, .settings-section .llm-config-panel__field { margin-bottom: 12px; } .settings-section .github-config-panel__label, .settings-section .llm-config-panel__label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 5px; } /* Pill buttons matching the reader actions */ .settings-section .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 16px; font-size: 13px; font-weight: 500; border-radius: 17px; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .settings-section .btn--primary { color: var(--color-accent-text); background-color: var(--color-primary); border: 1px solid var(--color-primary); } .settings-section .btn--primary:hover { background-color: var(--color-primary-hover); } .settings-section .btn--secondary, .settings-section .btn--small { color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); } .settings-section .btn--secondary:hover, .settings-section .btn--small:hover { color: var(--color-primary); border-color: var(--color-primary); } .settings-section .btn--danger { color: var(--color-error); border-color: var(--color-error-border); } .settings-section .btn--danger:hover { color: var(--color-on-error); background-color: var(--color-error); border-color: var(--color-error); } /* LLM config list items */ .settings-section .llm-config-panel__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 8px; background-color: var(--color-bg); } .settings-section .llm-config-panel__item-details { min-width: 0; } .settings-section .llm-config-panel__item-actions { display: flex; gap: 6px; flex-shrink: 0; } /* Theme / language toggles */ .settings-section .theme-toggle__btn, .settings-section .language-switch__btn { border: 1px solid var(--color-border); background-color: var(--color-bg); color: var(--color-text); border-radius: 8px; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .settings-section .theme-toggle__btn:hover, .settings-section .language-switch__btn:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Success / error results */ .settings-section [class*="test-result"] { margin-top: 10px; font-size: 13px; line-height: 1.6; padding: 8px 12px; border-radius: 8px; } .settings-section [class*="--success"] { color: var(--color-success); background-color: var(--color-success-bg); } .settings-section [class*="--error"] { color: var(--color-error); background-color: var(--color-error-bg); } .settings-section [class*="__error"], .settings-section [class*="__hint"] { font-size: 13px; } /* Function assignments (summary / translation model pickers) */ .settings-section .llm-config-panel__assignments { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); } .settings-section .llm-config-panel__assignments h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--color-text); } .settings-section .llm-config-panel__assignment-row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 8px; } .settings-section .llm-config-panel__assignment-label { font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; } .settings-section select.llm-config-panel__assignment-select { width: 100%; min-width: 0; min-height: 34px; padding: 6px 10px; font-size: 13px; line-height: 1.4; color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 17px; cursor: pointer; transition: border-color 120ms ease; } .settings-section select.llm-config-panel__assignment-select:focus { border-color: var(--color-primary); } .settings-section .llm-config-panel__save-assignments { margin-top: 10px; } /* Article pane segmented unread/all filter. Fixed geometry: the control must keep its shape no matter how long the feed/category title is, so labels never wrap to two lines. */ .article-pane__seg { display: inline-flex; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; } .article-pane__seg-btn { flex-shrink: 0; white-space: nowrap; min-height: 28px; padding: 0 12px; font-size: 12px; line-height: 1; color: var(--color-text-secondary); background: transparent; border: none; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .article-pane__seg-btn:hover { color: var(--color-text); } .article-pane__seg-btn.active { background-color: var(--color-primary); color: var(--color-accent-text); } /* Selected category in the feed tree */ .feed-tree__category.active { background-color: var(--color-bg-secondary); } .feed-tree__category.active .feed-tree__category-name { color: var(--color-primary); font-weight: 600; } /* ===== Feed tree refinement (Folo-like) ===== */ .main-view__tree { width: 232px; padding: 8px 6px; } .feed-tree__all, .feed-tree__category, .feed-tree__feed { justify-content: flex-start; text-align: left; min-height: 30px; padding: 4px 8px; gap: 6px; border-radius: 6px; } .feed-tree__category-name, .feed-tree__all-name { font-weight: 500; font-size: 13px; letter-spacing: 0.1px; } .feed-tree__feed { padding-left: 30px; } .feed-tree__favicon { width: 16px; height: 16px; border-radius: 4px; } .feed-tree__count { font-size: 11px; } .feed-tree__dot { width: 6px; height: 6px; border-radius: 3px; background-color: var(--color-unread); flex-shrink: 0; margin-left: 2px; } /* LLM panels (summary / translation) inside the reader */ .article-view-llm { margin-bottom: 20px; } .article-view-llm .summary-slot, .article-view-llm .translation-slot { margin-bottom: 16px; } /* Translation panel styling */ .article-translation .translation-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .article-translation .translation-mode-btn, .article-translation .translation-original-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 14px; font-size: 13px; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; cursor: pointer; transition: color 120ms ease, border-color 120ms ease; } .article-translation .translation-mode-btn:hover, .article-translation .translation-original-btn:hover { color: var(--color-primary); border-color: var(--color-primary); } .article-translation .translation-translated { font-size: 15px; line-height: 1.85; color: var(--color-text); } .article-translation .translation-translated p { margin: 0 0 1em; } .article-translation .translation-panel.translation-original { color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border-radius: 8px; padding: 14px 16px; font-size: 14px; } .article-translation .translation-panel { margin-bottom: 12px; } /* Summary panel: rendered HTML typography */ .article-summary .summary-content p { margin: 0 0 0.8em; } .article-summary .summary-content ul { padding-left: 1.4em; margin: 0.4em 0 0.8em; } .article-summary .summary-content li { margin-bottom: 0.4em; line-height: 1.7; } .article-summary .summary-content strong { color: var(--color-text); } .article-summary .summary-content h3 { font-size: 15px; margin: 0.8em 0 0.5em; } /* ============================================================ Hidden autohide scrollbars (Folo style) ------------------------------------------------------------ The native scrollbar is invisible by default and fades in only while the pointer is over the scroll container (or while it is being scrolled). Track stays transparent so the rail reads as a thin floating pill, matching Folo's list panes. ============================================================ */ /* Token: scrollbar thumb colour, tuned per theme below. */ :root, [data-theme="light"] { --color-scrollbar-thumb: rgba(0, 0, 0, 0.22); --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.38); } [data-theme="dark"] { --color-scrollbar-thumb: rgba(255, 255, 255, 0.2); --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.36); } [data-theme="oled"] { --color-scrollbar-thumb: rgba(255, 255, 255, 0.18); --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.34); } [data-theme="eink"] { --color-scrollbar-thumb: rgba(0, 0, 0, 0.28); --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.5); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: transparent transparent; } *:hover, *:focus-within { scrollbar-color: var(--color-scrollbar-thumb) transparent; } /* WebKit / Blink */ *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 999px; /* Inset the pill so it floats instead of hugging the edge */ border: 2px solid transparent; background-clip: content-box; transition: background-color 200ms ease; } /* Reveal on hover of the scroll container */ *:hover::-webkit-scrollbar-thumb, *:focus-within::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar-thumb); } *::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); } *::-webkit-scrollbar-corner { background: transparent; } /* ============================================================ Mobile article list (Folo style) ------------------------------------------------------------ Compact card list used by the mobile single-pane layout for the articles route: title bar, pill tab + circular action group, then cards with source meta, title/excerpt and an optional thumbnail. ============================================================ */ .mobile-articles { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* ---- Title row ---- */ .mobile-articles__titlebar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-shrink: 0; } .mobile-articles__avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--color-primary), var(--color-accent-hover)); } .mobile-articles__heading { flex: 1; min-width: 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-articles__title-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* ---- Control row ---- */ .mobile-articles__controls { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; flex-shrink: 0; } /* Pill-shaped primary tab */ .mobile-articles__tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600; color: var(--color-accent-text); background-color: var(--color-primary); border: none; border-radius: 999px; cursor: pointer; flex-shrink: 0; } .mobile-articles__tab-icon { font-size: 14px; display: inline-flex; align-items: center; } .mobile-articles__tab-dot { width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; opacity: 0.9; } /* Circular icon button group */ .mobile-articles__btn-group { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } .mobile-articles__icon-btn { width: 40px; height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; } .mobile-articles__icon-btn:hover, .mobile-articles__icon-btn:active { color: var(--color-primary); border-color: var(--color-primary); } /* Icons carry their own width/height; block display keeps them off the text baseline inside the flex-centred button. */ .mobile-articles__icon-btn svg, .mobile-articles__tab-icon svg { display: block; } /* Active filter (unread / all). Deliberately placed after the :hover rule — both selectors have the same specificity, so source order decides, and the selected state must stay visible while the finger is still on the button. */ .mobile-articles__icon-btn[aria-pressed="true"] { color: var(--color-accent-text); background-color: var(--color-primary); border-color: var(--color-primary); } /* ---- Scroll list ---- */ .mobile-articles__scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 12px; } .mobile-articles__list { display: flex; flex-direction: column; } .mobile-article-card { display: flex; gap: 12px; padding: 12px; margin-bottom: 8px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 120ms ease; } .mobile-article-card:active { background-color: var(--color-bg-secondary); } .mobile-article-card__text { flex: 1; min-width: 0; } /* Source line: dot · favicon · feed · time */ .mobile-article-card__source { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; } .mobile-article-card__dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-unread); flex-shrink: 0; } .mobile-article-card__favicon { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; object-fit: contain; } .mobile-article-card__feed { overflow: hidden; text-overflow: ellipsis; max-width: 45%; flex-shrink: 0; } .mobile-article-card__sep { flex-shrink: 0; opacity: 0.6; } .mobile-article-card__time { flex-shrink: 0; opacity: 0.85; } .mobile-article-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--color-text); margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Read articles de-emphasize the title */ .mobile-article-card.read .mobile-article-card__title { font-weight: 500; color: var(--color-text-secondary); } .mobile-article-card__excerpt { font-size: 12px; line-height: 1.5; color: var(--color-text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mobile-article-card__thumb { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; flex-shrink: 0; align-self: center; } .mobile-articles__empty, .mobile-articles__loading { padding: 32px 16px; text-align: center; font-size: 13px; color: var(--color-text-secondary); } /* Bottom nav bar: icon above i18n label */ .nav-bar .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px; } .nav-bar .nav-item__icon { font-size: 18px; line-height: 1; } .nav-bar .nav-item__label { font-size: 11px; line-height: 1.2; } /* ============================================================ Password panel (settings) ============================================================ */ .password-panel__field { margin-bottom: 12px; } .password-panel__label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 5px; } .password-panel__actions { display: flex; gap: 8px; margin-top: 14px; } .password-panel__reset { margin-top: 12px; } .password-panel__message { margin-top: 12px; font-size: 13px; line-height: 1.6; padding: 8px 12px; border-radius: 8px; } .password-panel__message--success { color: var(--color-success); background-color: var(--color-success-bg); } .password-panel__message--error { color: var(--color-error); background-color: var(--color-error-bg); } /* ============================================================ Settings field (label + dropdown) ============================================================ */ .settings-field__label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; } .settings-field__select { min-width: 180px; max-width: 100%; padding: 9px 12px; font-size: 14px; color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; outline: none; transition: border-color 120ms ease; } .settings-field__select:focus, .settings-field__select:hover { border-color: var(--color-primary); } /* ============================================================ Summary box — visually distinct from the article body ============================================================ */ /* Loading spinners for summary / translation panels */ .summary-loading, .translation-loading { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-secondary); } /* Error states for summary / translation panels */ .summary-error, .translation-error { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--color-error); } .summary-retry-btn, .translation-retry-btn { color: var(--color-primary); background-color: var(--color-surface); border: 1px solid var(--color-primary); border-radius: 8px; cursor: pointer; padding: 4px 12px; font-size: 13px; } .summary-spinner, .translation-spinner { width: 14px; height: 14px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: llm-spin 0.8s linear infinite; } @keyframes llm-spin { to { transform: rotate(360deg); } } .article-summary .summary-wrapper { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: 10px; padding: 14px 16px; } .article-summary .summary-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .article-summary .summary-header strong { font-size: 13px; font-weight: 600; color: var(--color-primary); } .article-summary .summary-content { font-size: 14px; line-height: 1.8; color: var(--color-text); } /* ============================================================ Translation panels — labels, target language, display modes ============================================================ */ /* Panel labels (原文 / 译文) above each content row */ .article-translation .translation-panel-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; letter-spacing: 0.02em; } /* Target language selector in the translation toolbar */ .article-translation .translation-target-select { min-height: 32px; padding: 5px 10px; font-size: 13px; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; cursor: pointer; transition: color 120ms ease, border-color 120ms ease; } .article-translation .translation-target-select:hover { color: var(--color-primary); border-color: var(--color-primary); } /* Dual-line mode: two stacked rows (原文 above, 译文 below) */ .article-translation .translation-content.translation-dual { display: flex; flex-direction: column; gap: 12px; } .article-translation .translation-content.translation-dual .translation-panel { margin-bottom: 0; } /* Side-by-side mode: original left, translation right */ .article-translation .translation-content.translation-side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .article-translation .translation-content.translation-side-by-side .translation-panel { margin-bottom: 0; min-width: 0; } @media (max-width: 1024px) { .article-translation .translation-content.translation-side-by-side { grid-template-columns: 1fr; } } /* Translated panel body inherits reader typography */ .article-translation .translation-panel-body { font-size: 15px; line-height: 1.85; } .article-translation .translation-panel-body p { margin: 0 0 1em; } /* ============================================================ TTS (read-aloud) configuration panel (shares .settings-section form styles with the other panels) ============================================================ */ .settings-section .tts-config-panel__title { display: none; } .settings-section .tts-config-panel__field { margin-bottom: 12px; } .settings-section .tts-config-panel__label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 5px; } .tts-config-panel__hint { display: block; font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; } /* Voice picker — pill geometry to match the other settings controls. Declared as `select.tts-config-panel__select` (0,2,1) so it beats the base `.settings-section select` rules (also 0,2,1) on source order. */ select.tts-config-panel__select { width: 100%; min-height: 34px; padding: 6px 12px; font-size: 14px; color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 17px; cursor: pointer; outline: none; } select.tts-config-panel__select:hover, select.tts-config-panel__select:focus { border-color: var(--color-primary); } select.tts-config-panel__select:disabled { opacity: 0.6; cursor: not-allowed; } .tts-config-panel__btn-group { display: flex; gap: 8px; } .tts-config-panel__success { font-size: 13px; line-height: 1.6; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; color: var(--color-success); background-color: var(--color-success-bg); } .tts-config-panel__test-result { margin-top: 10px; font-size: 13px; line-height: 1.6; } .tts-config-panel__test-result--success { color: var(--color-success); } .tts-config-panel__test-result--error { color: var(--color-error); } /* Active state for article action buttons (read-aloud while playing) */ .article-view-actions .action-btn.active { color: var(--color-accent-text); background-color: var(--color-primary); border-color: var(--color-primary); } /* Bookmark button — solid icon when saved, outline when not */ .action-bookmark .action-btn__svg { display: block; flex-shrink: 0; } .article-view-actions .action-bookmark.active .action-btn__svg { fill: currentColor; } /* ============================================================ Bookmarks page (收藏) ============================================================ */ .bookmarks-view { display: flex; flex-direction: column; height: 100%; min-height: 0; background-color: var(--color-canvas); } .bookmarks-view__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); background-color: var(--color-surface); } .bookmarks-view__title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; } .bookmarks-view__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--color-text); } .bookmarks-view__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border-radius: 10px; } .bookmarks-view__refresh { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; font-size: 15px; color: var(--color-text-secondary); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 17px; cursor: pointer; transition: color 120ms ease, border-color 120ms ease; } .bookmarks-view__refresh:hover { color: var(--color-primary); border-color: var(--color-primary); } .bookmarks-view__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .bookmarks-view__list { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 32px; } .bookmarks-view__loading, .bookmarks-view__error, .bookmarks-view__empty { padding: 40px 16px; text-align: center; color: var(--color-text-muted); font-size: 14px; } .bookmarks-view__error { color: var(--color-error); } .bookmarks-view__empty-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 14px; color: var(--color-text-disabled); background-color: var(--color-bg-secondary); border-radius: 24px; } .bookmarks-view__empty-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--color-text); } .bookmarks-view__empty-hint { margin: 0; font-size: 13px; line-height: 1.5; } .bookmarks-view__toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; padding: 10px 18px; font-size: 13px; color: var(--color-on-error); background-color: var(--color-error); border-radius: 18px; box-shadow: var(--shadow-md); } /* ---- Bookmark card ---- */ .bookmark-card { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; } .bookmark-card:hover { border-color: var(--color-primary); background-color: var(--color-surface-hover); } .bookmark-card:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } .bookmark-card__text { flex: 1 1 auto; min-width: 0; } .bookmark-card__source { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; color: var(--color-text-muted); } .bookmark-card__favicon { width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px; } .bookmark-card__feed { max-width: 40%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; color: var(--color-text-secondary); } .bookmark-card__time { flex-shrink: 0; } .bookmark-card__title { margin: 0 0 4px; /* Leave room for the remove button in the top-right corner */ padding-right: 26px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bookmark-card__excerpt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bookmark-card__thumb { width: 72px; height: 72px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-md); background-color: var(--color-bg-secondary); } .bookmark-card__remove { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--color-primary); background-color: var(--color-accent-soft); border: none; border-radius: 14px; cursor: pointer; transition: color 120ms ease, background-color 120ms ease; } .bookmark-card__remove:hover { color: var(--color-accent-text); background-color: var(--color-primary); } /* ---- Narrow screens ---- */ @media (max-width: 640px) { .bookmarks-view__header { padding: 12px 14px; } .bookmarks-view__list { padding: 12px 14px 24px; gap: 8px; } .bookmark-card { padding: 12px 14px; } .bookmark-card__thumb { width: 60px; height: 60px; } .bookmark-card__feed { max-width: 30%; } }