/* ============================================================ theme.css — 全站统一主题变量（frameset 各帧共用） 切换：（由 uikit.js 按 cookie 设置） 加新颜色：复制一段 :root[data-theme="xxx"]{...} 改值即可。 ============================================================ */ /* 全站字体 + 字号（统一在此设置；界面上不提供字号开关，只改这里） */ :root{ --ui-font:"Noto Sans SC","Source Han Sans SC","Source Han Sans CN","WenQuanYi Micro Hei","Helvetica Neue",Arial,sans-serif; --ui-fs:13px; /* 基础字号 */ --ui-fs-sm:12px; /* 小字（辅助/表格） */ --ui-fs-lg:15px; /* 大字 */ --ui-fs-title:16px;/* 标题 */ /* 文字颜色（语义化，防止以后加新主题色后看不清字）： - 深色头部/深底上：永远用白系 --ui-on-head / --ui-on-head-muted - 浅底面板上：用深系 --ui-ink / --ui-muted（在各主题块里定义） - 链接：跟随强调色 --ui-link 加新颜色时只需保证 --ui-navy/--ui-head 是"深色"，白字即清晰。 */ --ui-on-head:rgba(255,255,255,.92); --ui-on-head-muted:rgba(255,255,255,.62); --ui-link:#1f6fc4; /* 链接兜底色（浅底上可读的蓝）；主题块可覆盖为 var(--ui-accent-d) */ --ui-ok:#1c7a44; /* 成功/正向 */ --ui-warn:#9a6a12; /* 提醒 */ --ui-danger:#c0392b; /* 危险/未读红，深一点保证浅底可读 */ } /* 绿 */ :root[data-theme="green"]{ --ui-accent:#2fb56a; --ui-accent-d:#249a58; --ui-navy:#178a50; --ui-navy2:#1f9e5c; --ui-bg:#eef5f0; --ui-panel:#ffffff; --ui-ink:#243a30; --ui-muted:#6f7f77; --ui-line:#e2ebe5; --ui-hover:#eaf7ef; --ui-head:linear-gradient(150deg,#178a50,#1f9e5c); --ui-on-accent:#ffffff; } /* 默认（蓝） */ :root, :root[data-theme="blue"]{ --ui-accent:#2f7fd6; --ui-accent-d:#2168b4; --ui-navy:#3f6ea6; --ui-navy2:#4c7ebc; --ui-bg:#eef2f8; --ui-panel:#ffffff; --ui-ink:#232f3e; --ui-muted:#6b7789; --ui-line:#e1e7f0; --ui-hover:#eaf2fc; --ui-head:linear-gradient(150deg,#3f6ea6,#4c7ebc); --ui-on-accent:#ffffff; } /* —— 再加颜色示例（取消注释即可） —— :root[data-theme="orange"]{ --ui-accent:#f08a24; --ui-accent-d:#d5751a; --ui-navy:#3a2a12; --ui-navy2:#5a4020; --ui-bg:#f7f2ec; --ui-panel:#ffffff; --ui-ink:#33291d; --ui-muted:#8a7c6b; --ui-line:#ece2d5; --ui-hover:#fcf3e8; --ui-head:linear-gradient(150deg,#3a2a12,#5a4020); --ui-on-accent:#ffffff; } */ /* 切换器通用样式（各帧共用） */ .ui-switch{ display:flex; align-items:center; gap:10px; } .ui-switch .uisw-group{ display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.14); padding:4px 8px; border-radius:22px; } .ui-switch .uisw-ic{ font-size:13px; line-height:1; } .ui-switch .uisw-b{ border:0; cursor:pointer; background:transparent; color:#eaf1f8; font-size:12px; padding:3px 9px; border-radius:16px; transition:all .15s; } .ui-switch .uisw-b:hover{ background:rgba(255,255,255,.16); } .ui-switch .uisw-b.active{ background:#fff; color:var(--ui-navy); font-weight:600; } .ui-switch .uisw-lang{ border:0; outline:none; cursor:pointer; background:rgba(255,255,255,.92); color:var(--ui-navy); font-size:12px; font-weight:600; padding:3px 6px; border-radius:14px; max-width:120px; } .ui-switch .uisw-sw{ width:18px; height:18px; border-radius:50%; cursor:pointer; padding:0; border:2px solid rgba(255,255,255,.55); transition:transform .12s,box-shadow .12s; } .ui-switch .uisw-sw:hover{ transform:scale(1.12); } .ui-switch .uisw-sw.active{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35); } .ui-switch .uisw-sw[data-t="green"]{ background:#2fb56a; } .ui-switch .uisw-sw[data-t="blue"]{ background:#2f7fd6; } .ui-switch .uisw-sw[data-t="orange"]{ background:#f08a24; }