/* ============================================================ News Board — iOS-inspired news dashboard Design language: system type, hairline rules, inset-grouped cards, restrained accent. No gradients, no emoji, no AI-tells. ============================================================ */ :root { --bg: #f5f5f7; --bg-elevated: #ffffff; --grouped: #e9e9eb; --text-primary: #1d1d1f; --text-secondary: #6e6e73; --text-tertiary: #8e8e93; --hairline: rgba(60, 60, 67, 0.12); --accent: #007aff; --accent-dim: rgba(0, 122, 255, 0.10); --shadow: 0 1px 2px rgba(0, 0, 0, 0.04); --radius-card: 14px; --radius-control: 10px; --curve: cubic-bezier(0.32, 0.72, 0, 1); } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --bg-elevated: #1c1c1e; --grouped: #2c2c2e; --text-primary: #f5f5f7; --text-secondary: #98989f; --text-tertiary: #6e6e73; --hairline: rgba(84, 84, 88, 0.34); --accent: #0a84ff; --accent-dim: rgba(10, 132, 255, 0.16); --shadow: none; } } /* Explicit theme classes always win over the OS media query. app.js toggles these on . */ body.dark { --bg: #000000; --bg-elevated: #1c1c1e; --grouped: #2c2c2e; --text-primary: #f5f5f7; --text-secondary: #98989f; --text-tertiary: #98989f; --hairline: rgba(84, 84, 88, 0.34); --accent: #0a84ff; --accent-dim: rgba(10, 132, 255, 0.16); --shadow: none; --c-fav: #ff4757; color-scheme: dark; } body.light { --bg: #f5f5f7; --bg-elevated: #ffffff; --grouped: #e9e9eb; --text-primary: #1d1d1f; --text-secondary: #6e6e73; --text-tertiary: #6e6e73; --hairline: rgba(60, 60, 67, 0.12); --accent: #007aff; --accent-dim: rgba(0, 122, 255, 0.10); --shadow: 0 1px 2px rgba(0, 0, 0, 0.04); --c-fav: #ff3b30; color-scheme: light; } :root { --c-fav: #ff3b30; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 20; background: rgba(245, 245, 247, 0.82); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--hairline); } .topbar-inner { max-width: 760px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .large-title { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .date-line { margin-top: 4px; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .source-line { margin-top: 2px; font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.01em; } .topbar-actions { display: flex; gap: 8px; flex-shrink: 0; } .icon-btn { width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--grouped); color: var(--text-primary); display: grid; place-items: center; cursor: pointer; transition: transform 0.18s var(--curve), background 0.2s ease; } .icon-btn svg { width: 17px; height: 17px; } .icon-btn:active { transform: scale(0.9); } .theme-btn .icon-moon { display: none; } @media (prefers-color-scheme: dark) { .theme-btn .icon-sun { display: none; } .theme-btn .icon-moon { display: block; } } body.light .theme-btn .icon-moon { display: none; } body.light .theme-btn .icon-sun { display: block; } body.dark .theme-btn .icon-sun { display: none; } body.dark .theme-btn .icon-moon { display: block; } /* segmented control dark-mode adaptation */ body.dark .chips-inner { background: #2c2c2e; } body.dark .chip.active { background: #48484a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); color: #fff; } @media (prefers-color-scheme: dark) { .chips-inner { background: #2c2c2e; } .chip.active { background: #48484a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); color: #fff; } } .refresh-btn.spinning svg { animation: spin 0.8s var(--curve) infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Category chips (segmented control, inside sticky topbar) ---------- */ .chips { max-width: 760px; margin: 0 auto; width: 100%; border-top: 0.5px solid var(--hairline); display: flex; justify-content: center; padding: 8px 20px 10px; overflow: hidden; } .chips-inner { display: flex; gap: 2px; padding: 3px; background: var(--grouped); border-radius: 11px; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips-inner::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 6px 16px; min-height: 32px; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); background: transparent; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; letter-spacing: 0.01em; white-space: nowrap; } .chip.active { color: var(--text-primary); background: var(--bg-elevated); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); font-weight: 600; } .chip:not(.active):active { background: var(--accent-dim); } /* ---------- Content ---------- */ .content { max-width: 760px; margin: 0 auto; padding: 4px 20px 120px; } /* ---------- Headline card ---------- */ .headline { display: block; text-decoration: none; color: inherit; background: var(--bg-elevated); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 22px; transition: transform 0.22s var(--curve); } .headline:active { transform: scale(0.985); } .headline-media { width: 100%; aspect-ratio: 16 / 9; background: var(--grouped); position: relative; overflow: hidden; } .headline-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.5s ease; } .headline-media img.loaded { opacity: 1; } .headline-media .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; font-weight: 700; color: var(--text-tertiary); letter-spacing: -0.02em; } .headline-body { padding: 16px 18px 18px; } .headline-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .kicker-tag { font-size: 11px; font-weight: 500; color: var(--text-tertiary); border: 0.5px solid var(--hairline); padding: 1px 8px; border-radius: 5px; letter-spacing: 0.03em; } .source-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .kicker-text { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; } .headline-title { font-size: 22px; font-weight: 700; line-height: 1.32; letter-spacing: -0.015em; } .headline-summary { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .headline-meta { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-tertiary); } .meta-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-tertiary); opacity: 0.6; } /* ---------- Section title ---------- */ .section-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); text-transform: uppercase; margin: 26px 4px 10px; } /* ---------- Item list ---------- */ .items { background: var(--bg-elevated); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; } .item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 13px 16px; position: relative; transition: background 0.15s ease; } .item:active { background: var(--accent-dim); } .item + .item::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 0.5px; background: var(--hairline); } .item-main { flex: 1; min-width: 0; } .item-title { font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-meta { margin-top: 5px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-tertiary); } .item-source { font-weight: 500; color: var(--text-secondary); } .item-thumb { width: 76px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--grouped); flex-shrink: 0; } /* ---------- Empty / loading ---------- */ .empty { padding: 60px 20px; text-align: center; color: var(--text-tertiary); font-size: 14px; } .status { position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 16px); background: rgba(29, 29, 31, 0.88); background: color-mix(in srgb, var(--text-primary) 88%, transparent); color: var(--bg); font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s var(--curve); z-index: 50; max-width: 80%; text-align: center; } .status.show { opacity: 1; transform: translate(-50%, 0); } /* ---------- Reveal animation (subtle, iOS-natural) ---------- */ .reveal { opacity: 0; transform: translateY(10px); animation: reveal 0.42s var(--curve) forwards; } @keyframes reveal { to { opacity: 1; transform: translateY(0); } } /* ---------- Responsive: desktop reads wider ---------- */ @media (min-width: 820px) { .content { max-width: 960px; } .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .headline { margin-bottom: 0; } } @media (min-width: 1200px) { .content { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; } .cards { grid-template-columns: 1fr; } .items { position: sticky; top: 158px; } } /* ---------- Skeleton loading ---------- */ .skel { background: var(--bg-elevated); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 22px; } .skel-media { width: 100%; aspect-ratio: 16 / 9; background: var(--grouped); } .skel-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .skel-row { background: var(--bg-elevated); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 22px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; } .skel-row-main { flex: 1; display: flex; flex-direction: column; gap: 8px; } .skel-thumb { width: 76px; height: 54px; border-radius: 8px; background: var(--grouped); flex-shrink: 0; } .skel-line { height: 12px; border-radius: 6px; background: var(--grouped); animation: pulse 1.4s ease-in-out infinite; } .skel-line.w90 { width: 90%; } .skel-line.w70 { width: 70%; } .skel-line.w40 { width: 40%; } .skel-line.w30 { width: 30%; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Read state */ .item.read .item-title { color: var(--text-tertiary); font-weight: 400; } .item.read .item-source, .item.read .item-meta { opacity: 0.6; } /* ---------- Search bar ---------- */ .search-bar { max-width: 760px; margin: 0 auto; padding: 10px 20px 4px; display: flex; align-items: center; gap: 10px; animation: slideDown 0.28s var(--curve); } @keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .search-field { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--grouped); border-radius: 12px; padding: 8px 12px; height: 38px; } .search-field svg { width: 16px; height: 16px; color: var(--text-tertiary); flex-shrink: 0; } .search-field input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--text-primary); } .search-field input::placeholder { color: var(--text-tertiary); } .search-field input::-webkit-search-cancel-button { display: none; } .search-clear { width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--text-tertiary); color: var(--bg-elevated); display: grid; place-items: center; cursor: pointer; padding: 0; flex-shrink: 0; } .search-clear svg { width: 11px; height: 11px; } .search-cancel { border: none; background: none; color: var(--accent); font: inherit; font-size: 15px; cursor: pointer; flex-shrink: 0; padding: 6px; } /* ---------- FAB ---------- */ .fab { position: fixed; right: 20px; bottom: 32px; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(29, 29, 31, 0.88); background: color-mix(in srgb, var(--text-primary) 90%, transparent); color: var(--bg); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); transition: opacity 0.25s ease, transform 0.25s var(--curve), background 0.2s ease; z-index: 30; opacity: 0; transform: translateY(12px); pointer-events: none; } .fab svg { width: 18px; height: 18px; } .fab.show { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ---------- Reader (article preview sheet) ---------- */ .reader { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; } .reader.open { pointer-events: auto; } .reader-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.22); opacity: 1; transition: opacity 0.35s ease; } .reader.closing .reader-scrim { opacity: 0; } .reader-sheet { position: relative; background: var(--bg); border-radius: 20px 20px 0 0; max-width: 720px; width: 100%; margin: 0 auto; height: 92dvh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s var(--curve); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18); touch-action: pan-y; will-change: transform; } .reader.open .reader-sheet { transform: translateY(0); } .reader.closing .reader-sheet { transform: translateY(100%); } .reader-sheet.dragging { transition: none; } .reader-grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--grouped); margin: 8px auto 2px; flex-shrink: 0; cursor: grab; touch-action: none; } .reader-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; border-bottom: 0.5px solid var(--hairline); flex-shrink: 0; } .reader-head-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .reader-source { font-size: 14px; font-weight: 600; } .reader-time { font-size: 12px; color: var(--text-tertiary); } .reader-head-actions { display: flex; gap: 4px; } .reader-head-actions .icon-btn svg { width: 17px; height: 17px; } .reader-fav-active { color: var(--c-fav); } .reader-fav-active svg { fill: var(--c-fav); stroke: var(--c-fav); } .reader-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 22px 40px; } .reader-body.loading { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; } .reader-article-title { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; margin: 10px 0 4px; } .reader-article-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); margin-bottom: 18px; flex-wrap: wrap; } .reader-article-body { font-size: 16.5px; line-height: 1.85; letter-spacing: 0.004em; } .reader-article-body p { margin: 0 0 1.1em; } .reader-article-body h1, .reader-article-body h2, .reader-article-body h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 1.5em 0 0.6em; line-height: 1.4; } .reader-article-body img { display: block; width: 100%; border-radius: 12px; margin: 1.2em 0; background: var(--grouped); } .reader-article-body a { color: var(--accent); text-decoration: none; border-bottom: 0.5px solid var(--accent-dim); } .reader-article-body blockquote { border-left: 3px solid var(--grouped); padding: 2px 0 2px 14px; margin: 1.2em 0; color: var(--text-secondary); } .reader-article-body ul, .reader-article-body ol { margin: 0 0 1.1em 1.4em; } .reader-article-body li { margin: 0.35em 0; } /* reading skeleton inside reader */ .reader-skel-line { height: 14px; border-radius: 7px; background: var(--grouped); animation: pulse 1.4s ease-in-out infinite; } .reader-error { text-align: center; color: var(--text-tertiary); padding: 60px 20px; font-size: 14px; } .reader-error-open { display: block; margin: 18px auto 0; padding: 10px 22px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; } .reader-error-open:active { opacity: 0.8; } /* ---------- Date-sectioned newspaper layout ---------- */ .date-section { margin: 0 0 26px; animation: sectionIn 0.45s var(--curve) both; } @keyframes sectionIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .date-masthead { display: flex; align-items: center; gap: 12px; margin: 18px 4px 10px; } .date-masthead::before, .date-masthead::after { content: ""; flex: 1; height: 0.5px; background: var(--hairline); } .date-rule { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .date-rule .date-week { color: var(--text-tertiary); font-weight: 500; margin-left: 6px; } /* ---------- Reader themes ---------- */ /* plain (default) is the base .reader-article-body styles */ .reader-sheet.theme-newspaper .reader-article-title { font-family: "Songti SC", "STSong", "Georgia", serif; font-size: 28px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.45; text-align: center; margin: 16px 4px 6px; padding-bottom: 10px; border-bottom: 2px solid var(--text-primary); } .reader-sheet.theme-newspaper .reader-article-meta { justify-content: center; font-family: "Songti SC", "STSong", "Georgia", serif; padding-bottom: 10px; border-bottom: 0.5px solid var(--hairline); margin-bottom: 20px; } .reader-sheet.theme-newspaper .reader-article-body { font-family: "Songti SC", "STSong", "Georgia", serif; font-size: 17.5px; line-height: 2; } .reader-sheet.theme-newspaper .reader-article-body p { text-indent: 2em; margin: 0 0 0.9em; text-align: justify; } .reader-sheet.theme-magazine .reader-article-title { font-family: -apple-system, "SF Pro Display", "PingFang SC", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.28; margin: 14px 0 2px; } .reader-sheet.theme-magazine .reader-article-meta { margin-bottom: 22px; } .reader-sheet.theme-magazine .reader-article-body { font-family: -apple-system, "SF Pro Text", "PingFang SC", sans-serif; font-size: 17.5px; line-height: 1.9; letter-spacing: 0.002em; } .reader-sheet.theme-magazine .reader-article-body p:first-of-type { font-size: 19px; color: var(--text-secondary); line-height: 1.8; } .reader-sheet.theme-magazine .reader-article-body h1, .reader-sheet.theme-magazine .reader-article-body h2, .reader-sheet.theme-magazine .reader-article-body h3 { font-size: 21px; letter-spacing: -0.01em; } .reader-sheet.theme-paper .reader-article-title { font-family: "Times New Roman", "Songti SC", serif; font-size: 24px; font-weight: 700; text-align: center; line-height: 1.45; margin: 16px 0 10px; } .reader-sheet.theme-paper .reader-article-meta { justify-content: center; font-family: "Times New Roman", serif; color: var(--text-tertiary); border: 0.5px solid var(--hairline); padding: 8px 14px; border-radius: 6px; margin: 0 10px 20px; } .reader-sheet.theme-paper .reader-article-body { font-family: "Times New Roman", "Songti SC", serif; font-size: 16.5px; line-height: 1.9; color: var(--text-primary); } .reader-sheet.theme-paper .reader-article-body p { margin: 0 0 1em; text-align: justify; } .reader-sheet.theme-paper .reader-article-body img { border-radius: 4px; border: 0.5px solid var(--hairline); } /* mark & underline (persisted annotations) */ .reader-article-body .nb-mark { background: rgba(255, 212, 38, 0.45); border-radius: 2px; padding: 0 1px; cursor: pointer; } .reader-article-body .nb-underline { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; } /* font-size variants */ .reader-sheet.size-small .reader-article-body { font-size: 15px; } .reader-sheet.size-small .reader-article-body h1, .reader-sheet.size-small .reader-article-body h2, .reader-sheet.size-small .reader-article-body h3 { font-size: 18px; } .reader-sheet.size-large .reader-article-body { font-size: 18.5px; } .reader-sheet.size-large .reader-article-body h1, .reader-sheet.size-large .reader-article-body h2, .reader-sheet.size-large .reader-article-body h3 { font-size: 22px; } /* ---------- Settings panel ---------- */ .settings { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; } .settings.open { pointer-events: auto; } .settings .reader-scrim { opacity: 0; transition: opacity 0.3s ease; } .settings.open .reader-scrim { opacity: 1; } .settings.closing .reader-scrim { opacity: 0; } .settings-sheet { position: relative; background: var(--bg); border-radius: 20px 20px 0 0; max-width: 720px; width: 100%; margin: 0 auto; max-height: 78dvh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s var(--curve); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18); } .settings.open .settings-sheet { transform: translateY(0); } .settings.closing .settings-sheet { transform: translateY(100%); } .settings-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 10px; border-bottom: 0.5px solid var(--hairline); flex-shrink: 0; } .settings-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .settings-body { padding: 18px 18px 34px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .settings-group { margin-bottom: 22px; } .settings-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; margin-bottom: 10px; } .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .theme-card { border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-elevated); padding: 6px 6px 8px; cursor: pointer; text-align: center; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s var(--curve); } .theme-card:active { transform: scale(0.97); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); } .theme-preview { height: 54px; border-radius: 8px; border: 0.5px solid var(--hairline); background: #fff; margin-bottom: 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 9px; position: relative; } body.dark .theme-preview { background: #1c1c1e; } .theme-preview::after { content: ""; position: absolute; bottom: 5px; left: 9px; right: 9px; height: 5px; background: repeating-linear-gradient(180deg, #d1d1d6 0 2px, transparent 2px 5px); opacity: 0.5; } .theme-preview .tp-t { width: 78%; height: 7px; border-radius: 2px; background: #1d1d1f; } .theme-preview .tp-t.alt { background: #007aff; } .theme-preview .tp-l { width: 100%; height: 3px; border-radius: 2px; background: #d1d1d6; } .theme-preview .tp-l.short { width: 62%; } body.dark .theme-preview .tp-t { background: #f5f5f7; } body.dark .theme-preview .tp-l { background: #48484a; } .theme-preview.preview-newspaper .tp-t { width: 56%; margin: 0 auto; background: #1d1d1f; } .theme-preview.preview-paper .tp-t { width: 56%; margin: 0 auto; } .theme-preview.preview-magazine .tp-t { width: 84%; height: 9px; } .theme-name { font-size: 12px; font-weight: 600; } .theme-desc { font-size: 11px; color: var(--text-tertiary); } .fontsize-row { display: flex; gap: 8px; align-items: stretch; } .fontsize-opt { flex: 1; border: 1px solid var(--hairline); background: var(--bg-elevated); border-radius: 10px; padding: 10px 8px; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .fontsize-opt.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); } .settings-note { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; } /* ---------- Lightbox (image preview) ---------- */ .lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.25s ease; } .lightbox-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.92); } .lightbox-img { position: relative; max-width: 94vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5); animation: lbPop 0.32s var(--curve); } @keyframes lbPop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .lightbox-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; display: grid; place-items: center; cursor: pointer; } .lightbox-close svg { width: 17px; height: 17px; } /* ---------- Selection toolbar ---------- */ .selbar { position: fixed; z-index: 85; display: flex; align-items: center; gap: 2px; background: rgba(28, 28, 30, 0.96); border-radius: 12px; padding: 5px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); animation: selbarIn 0.18s var(--curve); transform: translate(-50%, -100%); pointer-events: auto; } @keyframes selbarIn { from { opacity: 0; transform: translate(-50%, -90%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } } .selbar-btn { display: flex; align-items: center; gap: 5px; border: none; background: none; color: #fff; font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease; } .selbar-btn:active { background: rgba(255, 255, 255, 0.15); } .selbar-btn svg { width: 15px; height: 15px; } .selbar-btn[data-act="mark"] { color: #ffd426; } .selbar-btn[data-act="underline"] { color: #4da3ff; } /* ---------- Briefing (今日要闻) ---------- */ .briefing { margin: 2px 0 18px; animation: sectionIn 0.45s var(--curve) both; } .briefing-head { display: flex; align-items: baseline; gap: 8px; padding: 14px 4px 10px; } .briefing-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); } .briefing-sub { font-size: 12px; color: var(--text-tertiary); } .briefing-strip { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 2px; scrollbar-width: none; } .briefing-strip::-webkit-scrollbar { display: none; } .briefing-card { flex: 0 0 232px; scroll-snap-align: start; background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 13px; cursor: pointer; transition: transform 0.15s var(--curve); } .briefing-card:active { transform: scale(0.97); } .briefing-rank { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; margin-bottom: 4px; font-variant-numeric: tabular-nums; } .briefing-card-title { font-size: 14.5px; font-weight: 600; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 7px; } .briefing-card-src { font-size: 11.5px; color: var(--text-tertiary); display: flex; gap: 6px; align-items: center; } /* focus (关键词关注) mark on rows */ .focus-tag { font-size: 10.5px; font-weight: 600; color: var(--accent); border: 0.5px solid var(--accent); border-radius: 4px; padding: 1px 4px; margin-left: 6px; vertical-align: 1px; letter-spacing: 0.02em; } /* ---------- Stats (阅读统计) ---------- */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .stat-card { background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 6px; text-align: center; } .stat-num { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text-primary); } .stat-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; } /* ---------- Sources (新闻源开关) ---------- */ .source-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .source-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 4px; border-bottom: 0.5px solid var(--hairline); } .source-row:last-child { border-bottom: none; } .source-name { font-size: 14px; font-weight: 500; } .source-cat { font-size: 11px; color: var(--text-tertiary); margin-left: 6px; } .switch { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--hairline); border: none; cursor: pointer; transition: background 0.25s ease; flex-shrink: 0; padding: 0; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); transition: transform 0.25s var(--curve); } .switch.on { background: #34c759; } .switch.on::after { transform: translateX(18px); } .subs-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin: 8px 0; } .subs-add input { border: 1px solid var(--hairline); border-radius: 9px; background: var(--bg-elevated); color: var(--text-primary); padding: 9px 10px; font: inherit; font-size: 13px; min-width: 0; } .subs-add input::placeholder { color: var(--text-tertiary); } .subs-btn { border: none; border-radius: 9px; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; cursor: pointer; transition: opacity 0.15s ease; } .subs-btn:active { opacity: 0.75; } .subs-del { border: none; background: none; color: var(--text-tertiary); font-size: 11px; padding: 6px 8px; cursor: pointer; text-decoration: underline; } /* ---------- Keywords ---------- */ .keyword-box { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; } .kw-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-elevated); border: 0.5px solid var(--hairline); border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 500; color: var(--text-primary); } .kw-chip button { border: none; background: none; color: var(--text-tertiary); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; } /* ---------- Clipbook (摘抄本) ---------- */ .clipbook { position: fixed; inset: 0; z-index: 75; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; } .clipbook.open { pointer-events: auto; } .clipbook .reader-scrim { opacity: 0; transition: opacity 0.3s ease; } .clipbook.open .reader-scrim { opacity: 1; } .clipbook.closing .reader-scrim { opacity: 0; } .clipbook-sheet { position: relative; background: var(--bg); border-radius: 20px 20px 0 0; max-width: 720px; width: 100%; margin: 0 auto; max-height: 82dvh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s var(--curve); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18); } .clipbook.open .clipbook-sheet { transform: translateY(0); } .clipbook.closing .clipbook-sheet { transform: translateY(100%); } .clipbook-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 10px; border-bottom: 0.5px solid var(--hairline); flex-shrink: 0; } .clipbook-actions { display: flex; align-items: center; gap: 10px; } .text-btn { border: none; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; padding: 5px 2px; cursor: pointer; } .clipbook-body { padding: 14px 18px 30px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; } .clip-empty { text-align: center; color: var(--text-tertiary); font-size: 14px; padding: 60px 20px; } .clip-group { margin-bottom: 20px; } .clip-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .clip-group-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .clip-group-badge { font-size: 11px; color: var(--text-tertiary); margin-left: 10px; flex-shrink: 0; } .clip-quote { display: block; position: relative; border-left: 2.5px solid var(--hairline); padding: 6px 0 6px 12px; margin: 6px 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .clip-quote.hl { border-left-color: #ffd426; } .clip-quote.ul { border-left-color: #4da3ff; } .clip-quote .clip-type { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); display: block; margin-bottom: 2px; letter-spacing: 0.04em; } .clip-quote.hl .clip-type { color: #b8860b; } .clip-quote.ul .clip-type { color: #1a7fd4; } /* ---------- Share card preview ---------- */ .share-preview-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; max-width: 420px; width: 92%; } .share-preview-img { width: 100%; border-radius: 14px; box-shadow: 0 12px 50px rgba(0, 0, 0, 0.45); background: #fff; } .share-preview-actions { display: flex; gap: 10px; width: 100%; } .share-preview-actions .fontsize-opt { background: rgba(255, 255, 255, 0.92); color: #111; border: none; } .share-preview-actions .fontsize-opt.active { background: var(--accent); color: #fff; } /* reader button active states */ .reader-fav-active svg { fill: #ff4d4f; stroke: #ff4d4f; } .reader-later-active svg { fill: var(--accent); stroke: var(--accent); } .reader-speak-active svg { stroke: var(--accent); } /* ---------- In-app browser (fullscreen sheet) ---------- */ .browser { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg); opacity: 0; transform: translateY(14px); transition: opacity 0.25s var(--curve), transform 0.25s var(--curve); pointer-events: none; } .browser.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .browser-bar { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; border-bottom: 0.5px solid var(--hairline); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .browser-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-secondary); background: var(--grouped); border-radius: 9px; padding: 9px 12px; text-align: center; } .browser-stage { flex: 1; position: relative; } .browser-loading { position: absolute; inset: 0; display: none; place-items: center; color: var(--text-tertiary); font-size: 13px; background: var(--bg); } #browserFrame { width: 100%; height: 100%; border: none; background: #fff; }