/*
* 操作手册公共样式(全部 HTML 手册页共用,唯一样式源)
*
* 配色:「金中」品牌深蓝黑 + 金色 accent,与官网(apps/website)、启动器 Logo 同款视觉。
* 明暗策略:跟随系统(web 应用)视觉——系统当前恒为亮色,手册恒亮;
* 刻意**不**跟随操作系统 prefers-color-scheme(OS 暗色时系统仍亮,手册变黑会与系统割裂)。
* 暗色 token 保留在下方 :root.dark 显式块中:将来系统支持暗色主题时,iframe 页给 挂 dark 类即可启用。
* 改样式只改本文件,勿在单页内再写内联覆盖。
*/
/* ========== 亮色(默认,与系统一致):暖米白底 + 深蓝黑文字 + 深金 accent ========== */
:root {
--bg: #faf9f5; /* 页面底:暖米白 */
--card: #ffffff; /* 卡片面 */
--text: #1c2530; /* 正文:深蓝黑 */
--sub: #8a8578; /* 次要文字:暖灰 */
--gold: #a1801c; /* 金 accent(亮底用深金,保证对比度) */
--gold-soft: #faf3dd; /* 金的淡底(提示框) */
--gold-border: #e8d59a;
--line: #e8e5da; /* 分隔线/边框 */
--hero-bg1: #10151f; /* hero 深蓝黑渐变起(与官网同源) */
--hero-bg2: #1d2b45;
--hero-text: #f5f2ea; /* hero 米白字 */
--hero-sub: #e8c268; /* hero 副题金 */
--danger-bg: #fdf2f0;
--danger-border: #f5c6bd;
--code-bg: #f2f0e8;
--shadow: 0 1px 4px rgba(28, 37, 48, 0.06);
--shadow-hover: 0 6px 16px rgba(28, 37, 48, 0.12);
--img-frame: transparent; /* 截图边框:亮色无需描边 */
}
/* ========== 暗色(备用,显式 .dark 类启用,当前系统恒亮不挂载) ========== */
:root.dark {
--bg: #10151f; /* oklch(0.13 0.015 260) 同官网 */
--card: #1a2230; /* oklch(0.17 0.02 260) */
--text: #f5f2ea; /* oklch(0.96 0.005 90) */
--sub: #a8a49a; /* oklch(0.68 0.015 260) 提亮一档保证暗底可读 */
--gold: #e8c268; /* 亮金 oklch(0.82 0.16 85) 同官网 primary */
--gold-soft: rgba(232, 194, 104, 0.10);
--gold-border: rgba(232, 194, 104, 0.30);
--line: rgba(245, 242, 234, 0.12);
--hero-bg1: #171e2c;
--hero-bg2: #24324e;
--hero-text: #f5f2ea;
--hero-sub: #e8c268;
--danger-bg: rgba(224, 106, 96, 0.12);
--danger-border: rgba(224, 106, 96, 0.35);
--code-bg: rgba(245, 242, 234, 0.10);
--shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
--shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.50);
--img-frame: rgba(245, 242, 234, 0.16); /* 暗底给亮色截图描浅边过渡 */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
background: var(--bg);
color: var(--text);
}
a { color: var(--gold); }
a:hover { opacity: 0.85; }
/* ---------- 页头横幅:深蓝黑渐变 + 金副题(明暗两态同源,品牌压底) ---------- */
.hero {
background: linear-gradient(135deg, var(--hero-bg1), var(--hero-bg2));
color: var(--hero-text);
padding: 44px 24px 30px;
text-align: center;
}
.hero h1 { font-size: 26px; margin-bottom: 8px; }
.hero p { opacity: 0.9; font-size: 14px; color: var(--hero-sub); }
/* ---------- 版心 ---------- */
.container { max-width: 1000px; margin: 24px auto 48px; padding: 0 16px; }
.breadcrumb { font-size: 13px; color: var(--sub); margin-bottom: 16px; }
.breadcrumb a { color: var(--gold); text-decoration: none; }
/* ---------- 章节标题:金色左侧条 ---------- */
h2 {
font-size: 19px;
margin: 32px 0 12px;
padding-left: 10px;
border-left: 4px solid var(--gold);
}
h1 { font-size: 24px; margin-bottom: 8px; }
p { line-height: 1.8; font-size: 14px; margin-bottom: 10px; }
.sub { color: var(--sub); } /* 次要说明文字(替代旧页内联 #888,暗色下自动适配) */
/* ---------- 卡片(索引网格 / 简单内容页) ---------- */
.card {
background: var(--card);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow);
text-decoration: none;
color: var(--text);
display: block;
transition: transform 0.15s, box-shadow 0.15s;
margin-bottom: 16px;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); color: var(--text); }
.card h3 { font-size: 17px; margin-bottom: 6px; }
.card h2 { border-left: none; padding-left: 0; margin: 16px 0 8px; }
.card p { font-size: 13px; color: var(--sub); line-height: 1.6; }
.card .meta { font-size: 12px; color: var(--gold); margin-top: 8px; }
.card .coming { color: var(--sub); }
.card .num { font-size: 12px; color: var(--sub); }
.card h3 + p, .card .num + h3 { margin-top: 0; }
.card .route { font-size: 12px; color: var(--gold); }
/* 简单内容页(登录/多语言)的 card 内 h1/h2 间距 */
.card h1 { margin-bottom: 8px; }
.card h2 { font-size: 18px; }
/* ---------- 索引网格 ---------- */
.section-title {
font-size: 20px;
margin: 32px 0 16px;
padding-left: 12px;
border-left: 4px solid var(--gold);
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
/* ---------- 截图 ---------- */
.shot {
background: var(--card);
border-radius: 12px;
box-shadow: var(--shadow);
padding: 12px;
margin: 14px 0 22px;
}
.shot img { width: 100%; border-radius: 8px; display: block; border: 1px solid var(--img-frame); }
.shot figcaption { font-size: 12.5px; color: var(--sub); text-align: center; margin-top: 8px; }
img.shot { width: 100%; border: 1px solid var(--line); border-radius: 8px; margin: 12px 0; background: var(--card); }
img.shot.half { width: calc(50% - 6px); }
/* ---------- 步骤与要点 ---------- */
ol.steps, ul.tips, ol, ul { padding-left: 22px; }
ol.steps li, ul.tips li, ol li, ul li { line-height: 1.9; font-size: 14px; }
/* ---------- 提示 / 警告框 ---------- */
.tip-box {
background: var(--gold-soft);
border: 1px solid var(--gold-border);
border-radius: 8px;
padding: 10px 14px;
font-size: 13.5px;
margin: 10px 0;
line-height: 1.8;
}
.warn-box {
background: var(--danger-bg);
border: 1px solid var(--danger-border);
border-radius: 8px;
padding: 10px 14px;
font-size: 13.5px;
margin: 10px 0;
line-height: 1.8;
}
.tip {
background: var(--gold-soft);
border-left: 4px solid var(--gold);
padding: 12px 16px;
border-radius: 6px;
font-size: 14px;
line-height: 1.7;
margin-top: 12px;
}
/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
td, th { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
th { background: var(--gold-soft); }
table.plain { width: 100%; border-collapse: collapse; margin: 10px 0 16px; background: var(--card); border-radius: 8px; overflow: hidden; font-size: 13.5px; }
table.plain th { background: var(--gold-soft); padding: 9px 12px; text-align: left; }
table.plain td { border-top: 1px solid var(--line); padding: 9px 12px; line-height: 1.7; }
/* ---------- 流程块(桌面端等) ---------- */
.stepflow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.stepflow div {
flex: 1;
min-width: 180px;
background: var(--gold-soft);
border: 1px dashed var(--gold-border);
border-radius: 8px;
padding: 12px;
font-size: 13px;
line-height: 1.7;
}
.stepflow b { display: block; color: var(--gold); margin-bottom: 4px; }
/* ---------- 行内代码 ---------- */
code {
background: var(--code-bg);
border-radius: 4px;
padding: 1px 6px;
font-family: Consolas, monospace;
font-size: 13px;
}
/* ---------- 页脚 ---------- */
footer { text-align: center; color: var(--sub); font-size: 12px; padding: 24px; }