gentpan
486b94fdb1
- 官网功能网格新增三张卡片，两列时奇数的最后一张占满整行 - 首屏与“会联网吗”改为 cleanip.io 查询、账号可选、每天检查新版本，去掉已移除的归属地数据库更新
281 lines
11 KiB
CSS
281 lines
11 KiB
CSS
/* OpenStats 官网 · 页面基础与介绍区
|
||
所有颜色、字号、间距、圆角与阴影都从下面的 token 取值。 */
|
||
|
||
:root {
|
||
color-scheme: light dark;
|
||
|
||
/* 品牌与语义色 */
|
||
--color-primary: #2563eb;
|
||
--color-primary-hover: #1d4ed8;
|
||
--color-secondary: #0d9488;
|
||
--color-success: #16a34a;
|
||
--color-warning: #d97706;
|
||
--color-error: #dc2626;
|
||
|
||
/* 中性色 */
|
||
--color-neutral-50: #f8f9fa;
|
||
--color-neutral-100: #f3f4f6;
|
||
--color-neutral-200: #e5e7eb;
|
||
--color-neutral-300: #d1d5db;
|
||
--color-neutral-400: #9ca3af;
|
||
--color-neutral-500: #6b7280;
|
||
--color-neutral-700: #374151;
|
||
--color-neutral-800: #1f2937;
|
||
--color-neutral-900: #111827;
|
||
|
||
--color-bg: #f8f9fa;
|
||
--color-bg-alt: #ffffff;
|
||
--color-surface: #ffffff;
|
||
--color-border: #e5e7eb;
|
||
--color-text: #111827;
|
||
--color-text-secondary: #6b7280;
|
||
--color-text-tertiary: #9ca3af;
|
||
--color-on-primary: #ffffff;
|
||
|
||
/* 字号 */
|
||
--text-xs: 12px;
|
||
--text-sm: 14px;
|
||
--text-base: 16px;
|
||
--text-lg: 20px;
|
||
--text-xl: 24px;
|
||
--text-2xl: 32px;
|
||
|
||
/* 间距（4px 栅格） */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-6: 24px;
|
||
--space-8: 32px;
|
||
--space-12: 48px;
|
||
--space-16: 64px;
|
||
|
||
/* 圆角：控件 < 卡片 < 窗口 */
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 16px;
|
||
|
||
/* 阴影（全站只用两级） */
|
||
--shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||
--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
|
||
--shell: 1120px;
|
||
--narrow: 760px;
|
||
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||
--font-mono: "SF Mono", ui-monospace, Menlo, monospace;
|
||
}
|
||
|
||
:root[data-theme="dark"] {
|
||
--color-primary: #3b82f6;
|
||
--color-primary-hover: #2563eb;
|
||
--color-secondary: #2dd4bf;
|
||
--color-success: #22c55e;
|
||
--color-warning: #f59e0b;
|
||
--color-error: #f87171;
|
||
--color-bg: #111315;
|
||
--color-bg-alt: #16181c;
|
||
--color-surface: #1d1f23;
|
||
--color-border: #2c2f35;
|
||
--color-text: #f3f4f6;
|
||
--color-text-secondary: #9ca3af;
|
||
--color-text-tertiary: #6b7280;
|
||
--shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||
--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font);
|
||
font-size: var(--text-base);
|
||
font-weight: 400;
|
||
line-height: 1.5;
|
||
color: var(--color-text);
|
||
background: var(--color-bg);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
img { max-width: 100%; display: block; }
|
||
|
||
a { color: var(--color-primary); text-decoration: none; }
|
||
a:hover { color: var(--color-primary-hover); }
|
||
|
||
h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0; }
|
||
|
||
p { margin: 0; }
|
||
|
||
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html { scroll-behavior: auto; }
|
||
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
|
||
}
|
||
|
||
/* ── 按钮 ─────────────────────────────────────────────── */
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
height: 40px;
|
||
padding: 0 var(--space-4);
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
border: 1px solid transparent;
|
||
transition: background-color 0.15s ease, border-color 0.15s ease;
|
||
}
|
||
|
||
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
|
||
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
|
||
|
||
.btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
|
||
.btn--secondary:hover { background: var(--color-neutral-100); color: var(--color-text); }
|
||
:root[data-theme="dark"] .btn--secondary:hover { background: #25282d; }
|
||
|
||
/* ── 介绍区 ───────────────────────────────────────────── */
|
||
|
||
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--space-6); }
|
||
.narrow { max-width: var(--narrow); }
|
||
|
||
.band { padding: var(--space-16) 0; }
|
||
.band--alt { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
|
||
|
||
.section-head { margin-bottom: var(--space-8); }
|
||
.section-head h2 { font-size: var(--text-2xl); }
|
||
.section-head p { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-base); }
|
||
|
||
.feature-grid {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.feature {
|
||
padding: var(--space-6);
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
.feature h3 { font-size: var(--text-base); }
|
||
.feature p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
|
||
|
||
/* 风格选择 */
|
||
.style-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
|
||
|
||
.style-chip {
|
||
height: 36px;
|
||
padding: 0 var(--space-4);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
font: inherit;
|
||
font-size: var(--text-sm);
|
||
cursor: pointer;
|
||
}
|
||
.style-chip:hover { border-color: var(--color-neutral-400); }
|
||
.style-chip[aria-checked="true"] { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
|
||
|
||
.style-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
|
||
.style-preview__bar {
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
.style-preview__bar--light { background: var(--color-neutral-200); color: #000; }
|
||
.style-preview__bar--dark { background: var(--color-neutral-800); color: #fff; }
|
||
.style-preview__caption { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-text-secondary); }
|
||
|
||
/* 截图 */
|
||
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
|
||
.shot { margin: 0; }
|
||
.shot img { border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
|
||
.shot--popover { max-width: 320px; justify-self: center; }
|
||
.shot--popover img { border-radius: var(--radius-xl); }
|
||
.shot--dark { display: none; }
|
||
:root[data-theme="dark"] .shot--light { display: none; }
|
||
:root[data-theme="dark"] .shot--dark { display: block; }
|
||
.shot figcaption { margin-top: var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); }
|
||
|
||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
|
||
.split--reverse .split__text { order: 2; }
|
||
.split__text h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); }
|
||
.split__text p { margin-top: var(--space-4); color: var(--color-text-secondary); }
|
||
.split__text .note { font-size: var(--text-sm); color: var(--color-text-tertiary); }
|
||
|
||
.mode-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
|
||
.mode-table th, .mode-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
|
||
.mode-table th { color: var(--color-text-secondary); font-weight: 600; }
|
||
|
||
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
|
||
.check-list li { position: relative; padding-left: var(--space-6); }
|
||
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 600; }
|
||
|
||
.fact-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
|
||
.fact-list li { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
|
||
.fact-list li:first-child { border-top: 0; }
|
||
.fact-list b { font-weight: 600; }
|
||
.fact-list span { color: var(--color-text-secondary); }
|
||
|
||
.download { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
|
||
.download h2 { font-size: var(--text-2xl); }
|
||
.download p { color: var(--color-text-secondary); }
|
||
.download__brew { font-size: var(--text-sm); }
|
||
.download__brew code, .faq code { font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-neutral-100); color: var(--color-text); }
|
||
:root[data-theme="dark"] .download__brew code, :root[data-theme="dark"] .faq code { background: #25282d; }
|
||
|
||
/* 更新日志（由 Scripts/sync_changelog.py 生成） */
|
||
.log { display: grid; gap: var(--space-4); }
|
||
.log__day { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
|
||
.log__head { display: flex; align-items: center; gap: var(--space-3); }
|
||
.log__head time { font-weight: 600; }
|
||
.log__tag { font-size: var(--text-xs); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-neutral-100); color: var(--color-text-secondary); }
|
||
:root[data-theme="dark"] .log__tag { background: #25282d; }
|
||
.log__counts { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-tertiary); }
|
||
.log__list { margin: var(--space-3) 0 0; padding-left: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); display: grid; gap: var(--space-2); }
|
||
.log__kind { display: inline-block; margin-right: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); }
|
||
.log__list code { font-family: var(--font-mono); font-size: var(--text-xs); }
|
||
.log__rest { margin-top: var(--space-3); }
|
||
.log__rest > summary, .log__older > summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-primary); }
|
||
.log__rest[open] > summary { margin-bottom: var(--space-1); }
|
||
.log__older { display: grid; gap: var(--space-4); }
|
||
.log__older[open] > summary { margin-bottom: var(--space-2); }
|
||
|
||
.faq { border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; }
|
||
.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
|
||
.faq summary::-webkit-details-marker { display: none; }
|
||
.faq summary::after { content: "+"; float: right; color: var(--color-text-tertiary); }
|
||
.faq[open] summary::after { content: "−"; }
|
||
.faq p { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); }
|
||
|
||
.footer { padding: var(--space-8) 0; border-top: 1px solid var(--color-border); }
|
||
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||
.footer__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
|
||
.footer__fine { font-size: var(--text-xs); color: var(--color-text-tertiary); }
|
||
|
||
@media (max-width: 900px) {
|
||
.feature-grid { grid-template-columns: 1fr 1fr; }
|
||
/* 两列时卡片数为奇数，最后一张占满整行，不留半格空位 */
|
||
.feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
|
||
.split, .shots { grid-template-columns: 1fr; }
|
||
.split--reverse .split__text { order: 0; }
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.band { padding: var(--space-12) 0; }
|
||
.feature-grid, .style-preview { grid-template-columns: 1fr; }
|
||
.section-head h2, .split__text h2, .download h2 { font-size: var(--text-xl); }
|
||
.fact-list li { grid-template-columns: 1fr; gap: var(--space-1); }
|
||
}
|