@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap'); /* =================================================================== Design tokens - Light values live on :root. - Dark values apply automatically via prefers-color-scheme UNLESS the user has picked an explicit theme, which sets data-theme on and wins via the attribute selectors below. - --accent is overridden at runtime (inline style on ) from the synced preference; the hex here is just the default. =================================================================== */ :root { --accent: #1f7a8c; --bg: #fdfdfc; --sidebar-bg: #f6f6f4; --panel-bg: #ffffff; --border: #e6e5e2; --text-primary: #1c1c1a; --text-muted: #6b6b66; --text-faint: #9a9a94; --selected-bg: color-mix(in srgb, var(--accent) 10%, var(--panel-bg)); --accent-badge-bg: color-mix(in srgb, var(--accent) 16%, var(--bg)); --accent-soft-bg: color-mix(in srgb, var(--accent) 16%, var(--panel-bg)); /* Reading / display preferences (driven by the settings panel + synced prefs) */ --reading-font-size: 17px; --reading-line-height: 1.72; --list-row-padding: 11px 16px; --list-font-size: 14.5px; --font-ui: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-reading: 'Source Serif 4', Georgia, serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #17181a; --sidebar-bg: #1c1d20; --panel-bg: #17181a; --border: #2c2d30; --text-primary: #eceae6; --text-muted: #a3a29c; --text-faint: #75746e; } } :root[data-theme="dark"] { --bg: #17181a; --sidebar-bg: #1c1d20; --panel-bg: #17181a; --border: #2c2d30; --text-primary: #eceae6; --text-muted: #a3a29c; --text-faint: #75746e; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text-primary); font-family: var(--font-ui); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; border: none; background: transparent; cursor: pointer; color: inherit; } svg { display: block; } /* =================================================================== App shell =================================================================== */ #app { display: none; /* shown once authenticated */ height: 100vh; width: 100vw; overflow: hidden; } #app.is-visible { display: flex; } /* ---------- Sidebar ---------- */ #sidebar { width: 260px; flex-shrink: 0; height: 100%; display: flex; flex-direction: column; background: var(--sidebar-bg); border-right: 1px solid var(--border); } .sidebar-header { padding: 20px 16px 14px 16px; } .wordmark { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .wordmark svg { stroke: var(--accent); } .search-box { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-bg); } .search-box input { border: none; background: transparent; outline: none; font-size: 12.5px; color: var(--text-primary); width: 100%; font-family: var(--font-ui); } .search-box input::placeholder { color: var(--text-faint); } #nav { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px; } .nav-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 5px; cursor: pointer; color: var(--text-primary); } .nav-row:hover { background: rgba(127,127,127,0.08); } .nav-row.active { background: var(--selected-bg); } .nav-row svg { stroke: var(--text-muted); flex-shrink: 0; } .nav-row .label { flex: 1; font-size: 13.5px; } .nav-row .count { font-size: 11.5px; color: var(--text-faint); } .nav-row .count.badge { font-weight: 700; color: var(--accent); background: var(--accent-badge-bg); padding: 1px 7px; border-radius: 9px; } .folder-header { display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px 4px; cursor: pointer; } .folder-header svg { stroke: var(--text-faint); transition: transform 0.15s ease; } .folder-header.collapsed svg { transform: rotate(-90deg); } .folder-header .label { flex: 1; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .folder-header .count { font-size: 11.5px; font-weight: 700; color: var(--text-primary); } .feed-list { display: flex; flex-direction: column; margin-bottom: 12px; } .feed-list.collapsed { display: none; } .feed-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 24px; border-radius: 5px; cursor: pointer; } .feed-row:hover { background: rgba(127,127,127,0.08); } .feed-row.active { background: var(--selected-bg); } .feed-favicon { width: 16px; height: 16px; border-radius: 4px; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feed-row .label { flex: 1; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed-row .count { font-size: 11.5px; color: var(--text-faint); } .sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--border); } .footer-action { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 5px; cursor: pointer; color: var(--text-muted); font-size: 12.5px; } .footer-action:hover { background: rgba(127,127,127,0.08); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 5px; color: var(--text-muted); } .icon-btn:hover { background: rgba(127,127,127,0.12); } .icon-btn.active { color: var(--accent); background: var(--accent-soft-bg); } /* ---------- Item list ---------- */ #item-list-pane { width: 420px; flex-shrink: 0; height: 100%; display: flex; flex-direction: column; background: var(--panel-bg); border-right: 1px solid var(--border); } #list-toolbar { height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border); } #list-toolbar .view-title { font-size: 15px; font-weight: 700; } #list-toolbar .toolbar-actions { display: flex; align-items: center; gap: 4px; } .segmented { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-right: 4px; } .segmented button { width: 28px; height: 26px; display: flex; align-items: center; justify-content: center; } .segmented button + button { border-left: 1px solid var(--border); } .segmented button.active { background: var(--accent-badge-bg); } .segmented button.active svg { stroke: var(--accent); } .segmented button:not(.active) svg { stroke: var(--text-faint); } #item-list { flex: 1; min-height: 0; overflow-y: auto; } .item-row { display: flex; gap: 10px; padding: var(--list-row-padding); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; cursor: pointer; } .item-row:hover { background: rgba(127,127,127,0.05); } .item-row.selected { border-left-color: var(--accent); background: var(--selected-bg); padding-left: 13px; } .item-row .favicon { width: 18px; height: 18px; border-radius: 4px; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .item-row .item-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .item-row .feed-name { font-size: 11px; color: var(--text-muted); font-weight: 600; } .item-row .item-time { font-size: 11px; color: var(--text-faint); } .item-row .headline { font-size: var(--list-font-size); line-height: 1.35; } .item-row.unread .headline { font-weight: 700; color: var(--text-primary); } .item-row.read .headline { font-weight: 400; color: var(--text-muted); } .item-row .star-icon { flex-shrink: 0; margin-top: 2px; stroke: var(--text-faint); opacity: 0.4; } .item-row .star-icon.starred { opacity: 1; stroke: var(--accent); fill: var(--accent); } .item-row:hover .star-icon { opacity: 0.8; } /* ---------- Reading pane ---------- */ #reading-pane { flex: 1; min-width: 0; height: 100%; overflow-y: auto; background: var(--bg); } #reading-pane .reading-inner { max-width: 640px; padding: 40px 48px 64px 48px; } #reading-pane.empty { display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 13px; } .reading-source { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .reading-source .favicon { width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .reading-source .name { font-size: 13px; font-weight: 600; color: var(--text-muted); } #reading-title { font-family: var(--font-reading); font-size: 31px; font-weight: 700; line-height: 1.28; margin: 0; } #reading-byline { font-size: 13px; color: var(--text-faint); margin-top: 10px; } .reading-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .ghost-action { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 5px; cursor: pointer; color: var(--text-muted); font-size: 12.5px; } .ghost-action:hover { background: rgba(127,127,127,0.1); } .outline-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 12px; } .outline-btn:hover { border-color: var(--text-faint); } #reading-body { font-family: var(--font-reading); font-size: var(--reading-font-size); line-height: var(--reading-line-height); margin-top: 26px; } #reading-body p { margin: 0 0 20px 0; } #reading-body img { max-width: 100%; border-radius: 6px; margin: 0 0 20px 0; } /* ---------- Login screen ---------- */ #login-screen { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; background: var(--bg); } #login-screen.is-hidden { display: none; } .login-card { width: 320px; padding: 32px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-bg); } .login-card .wordmark { justify-content: center; margin-bottom: 24px; font-size: 18px; } .login-card label { display: block; font-size: 12.5px; color: var(--text-muted); margin: 14px 0 6px 0; } .login-card input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-primary); font-family: var(--font-ui); font-size: 13.5px; outline: none; } .login-card input:focus { border-color: var(--accent); } .login-card button[type="submit"] { width: 100%; height: 38px; margin-top: 20px; background: var(--accent); color: #fff; border-radius: 6px; font-size: 13.5px; font-weight: 600; } .login-card button[type="submit"]:hover { opacity: 0.92; } .login-error { color: #b3453a; font-size: 12px; margin-top: 10px; min-height: 14px; } /* Scrollbars */ .scroll-y::-webkit-scrollbar { width: 10px; } .scroll-y::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.25); border-radius: 6px; }