/* ============================================================ vercel-editorial/chrome-dark.css — Dark mode token + selector overrides Activated by `` (set by the boot script in index_global_def.html based on ?_dark URL param or `_dark` cookie). Loaded AFTER chrome.css so these rules win cleanly. ============================================================ */ :root[data-theme="dark"] { /* Surface */ --color-bg: #0a0a0a; --color-bg-tint: #161616; --color-fg: #ededed; --color-fg-2: #a1a1a1; --color-fg-3: #888888; --color-fg-mute: #666666; --color-divider: #2e2e2e; /* Accent */ --color-link: #3291ff; --color-focus: hsla(212, 100%, 65%, 1); --color-badge-bg: #002659; --color-badge-fg: #62a8ff; /* Shadows in dark mode use lighter inner borders for legibility */ --shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.10); --shadow-border-light: 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-elev-2: 0 2px 2px rgba(0, 0, 0, 0.5); --shadow-elev-3: 0 8px 8px -8px rgba(0, 0, 0, 0.6); --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 2px 2px rgba(0, 0, 0, 0.5), 0 8px 8px -8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #1a1a1a; } /* ============================================================= Body baseline (only when dark) ============================================================= */ [data-theme="dark"] body { background: var(--color-bg); color: var(--color-fg); } /* ============================================================= Topbar — dark surface ============================================================= */ [data-theme="dark"] #topbar #headbar-1 a:hover { background: rgba(255, 255, 255, 0.06); } /* "全部商品分类" pill — flip to white pill on dark background to keep contrast */ [data-theme="dark"] #topbar #tnavbarMain .quanbufenlei { background: var(--color-fg) !important; color: var(--color-bg) !important; } [data-theme="dark"] #topbar #tnavbarMain .quanbufenlei .icon { background: linear-gradient(var(--color-bg), var(--color-bg)) center top / 14px 1.5px no-repeat, linear-gradient(var(--color-bg), var(--color-bg)) center center / 14px 1.5px no-repeat, linear-gradient(var(--color-bg), var(--color-bg)) center bottom / 14px 1.5px no-repeat !important; } /* navigator dropdown dark surface */ [data-theme="dark"] #topbar #tnavbarMain #indexNavigator .item:hover { background: var(--color-bg-tint) !important; } /* ============================================================= Footer ============================================================= */ [data-theme="dark"] #footerFriend a { background: var(--color-bg-tint); } /* friend logos are designed for light bg → reduce opacity slightly */ [data-theme="dark"] #footerFriend img { opacity: 0.5; } [data-theme="dark"] #footerFriend a:hover img { opacity: 0.85; } /* ============================================================= Hero banner placeholder ============================================================= */ [data-theme="dark"] #mainBannerCon { background: var(--color-bg-tint); } [data-theme="dark"] #mainBannerCon .bd li { background-color: var(--color-bg-tint); } [data-theme="dark"] #mainBannerCon .hd ul li { background: rgba(255, 255, 255, 0.3) !important; } [data-theme="dark"] #mainBannerCon .hd ul li.on, [data-theme="dark"] #mainBannerCon .hd ul .on { background: var(--color-fg) !important; } /* ============================================================= Section T1 — single ad strip ============================================================= */ [data-theme="dark"] .section-t1 a.block { background-color: var(--color-bg-tint); } /* ============================================================= Section T2 — feature pipeline ============================================================= */ /* Header gradient mask flips white→black so dark text below stays readable */ [data-theme="dark"] .fp-header { background-color: var(--color-bg-tint); } [data-theme="dark"] .fp-header::before { background: linear-gradient(90deg, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0.85) 55%, rgba(10, 10, 10, 0.4) 100%); } /* fp-card surfaces */ [data-theme="dark"] .fp-card { background: var(--color-bg-tint); } [data-theme="dark"] .fp-thumb { background-color: var(--color-bg); } /* "View all" pill */ [data-theme="dark"] .fp-more { background: var(--color-bg-tint); color: var(--color-fg-2); } [data-theme="dark"] .fp-more:hover { color: var(--color-fg); } /* ============================================================= Back-to-top FAB ============================================================= */ [data-theme="dark"] #backToTopBtn { background: var(--color-bg-tint); } [data-theme="dark"] #backToTopBtn::after { border-top-color: var(--color-fg); border-left-color: var(--color-fg); } /* ============================================================= Dark-mode toggle FAB (injected by boot script) Sits at the right edge above #backToTopBtn. ============================================================= */ #darkModeToggle { position: fixed; right: 24px; bottom: 80px; width: 44px; height: 44px; border-radius: 9999px; background: var(--color-bg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 8px -8px rgba(0, 0, 0, 0.04); cursor: pointer; z-index: 50; display: flex; align-items: center; justify-content: center; border: 0; font-size: 20px; line-height: 1; transition: transform 120ms ease, box-shadow 200ms ease; color: var(--color-fg); } #darkModeToggle:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 24px -8px rgba(0, 0, 0, 0.06); } [data-theme="dark"] #darkModeToggle { background: var(--color-bg-tint); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 2px 2px rgba(0, 0, 0, 0.5), 0 8px 8px -8px rgba(0, 0, 0, 0.6); } /* ============================================================= User module (profileNav + tables) — extra dark coverage ============================================================= */ [data-theme="dark"] .profileNavCon { background: var(--color-bg-tint); } [data-theme="dark"] .profileNav { background: var(--color-bg-tint); } [data-theme="dark"] .profileNav .header { color: var(--color-fg); } [data-theme="dark"] .profileNav .option a { color: var(--color-fg-2); } [data-theme="dark"] .profileNav .option a:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .profileNav .option.active a { color: var(--color-fg); } [data-theme="dark"] .profileNav .divider { background: var(--color-divider); } [data-theme="dark"] .mainContent, [data-theme="dark"] .mainContentDefaultTable { color: var(--color-fg); } [data-theme="dark"] .table { background: transparent; color: var(--color-fg); } [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: var(--color-divider) !important; } /* User-page input fields */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="email"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--color-bg); color: var(--color-fg); border: 1px solid var(--color-divider); } /* ============================================================= Default content-area baseline (Fallback inner pages) common.css from default sets body bg/color — invert here. We only target body level so nothing inside the chrome leaks. ============================================================= */ [data-theme="dark"] body { background: var(--color-bg) !important; color: var(--color-fg); } [data-theme="dark"] a { color: var(--color-link); } [data-theme="dark"] hr { border-color: var(--color-divider); }