/* ══════════════════════════════════════════════════════════════════ 云南生活网 · 云盘 — 全局设计令牌 (Design Tokens) v1.0 ────────────────────────────────────────────────────────────────── 唯一事实来源：本文件与主站 app.ynshw.com.cn 视觉体系对齐。 主站基准出处： · public/app/static/css/app.css → 通用组件令牌 · public/app/static/css/base.css → 品牌字体 @font-face · public/app/*.html 页面级 :root → --brand / --ink / --bg · 主站头部/主按钮渐变 → 135deg #3a78ee → #5b96f4 改色只改这里；云盘业务样式（style.css）禁止再写颜色字面量。 ══════════════════════════════════════════════════════════════════ */ /* ── 品牌字体：与主站 base.css 同源同一文件（阿里妈妈数黑体） ────── */ @font-face { font-family: "alimama"; src: url("/app/static/font/alimama-core.woff2?v=20260926c") format("woff2"); font-display: swap; font-weight: 400 700; font-style: normal; unicode-range:U+0020-007E, U+00A0-00B7, U+00D7, U+00F7, U+2014-2026, U+2190, U+3001-3015, U+3220-3229, U+4E00-4FF1, U+500C-5026, U+503A-5065, U+5076-508D, U+50A3-50BB, U+50CF-50F5, U+510B, U+513F-5272, U+5288, U+529B-52E4, U+52FA-5305, U+5316-53A9, U+53BB-5510, U+5524-554A, U+5561-559D, U+55B7-55E8, U+55FD-563B, U+5668-566A, U+567C, U+568F, U+56B7-5708, U+571F-57AE, U+57C2-57E0, U+57F9-5807, U+5824-5835, U+584C-586C, U+5883-58A8, U+58C1, U+58E4-59A8, U+59B9-5A07, U+5A18-5A46, U+5A5A-5A62, U+5A74-5A7F, U+5A92-5A9A, U+5AB2-5ACC, U+5AE6-5AE9, U+5B32, U+5B50-5CB8, U+5CE1-5D4C, U+5D69, U+5DCD-5EB8, U+5EC9-5ED3, U+5EF6-5F3C, U+5F52-602A, U+603B-6127, U+613F-6177, U+618E, U+61A8-61A9, U+61C2-61D2, U+6208-63B7, U+63C9-64E6, U+6500, U+6512, U+6525-6697, U+66A8-66B4, U+66DD, U+66F0-6912, U+6930-6942, U+695A-6960, U+6977-69BB, U+69CC-69DF, U+69FD, U+6A1F-6A31, U+6A44, U+6A58-6A61, U+6A80-6A90, U+6AA9-6AAC, U+6B20-6B4C, U+6B62-6B6A, U+6B7B-6BA1, U+6BB4-6BEF, U+6C0F-6E38, U+6E56-6E5B, U+6E7E-6FA1, U+6FB3-6FC0, U+6FD2-6FEE, U+7011, U+704C, U+706B-7096, U+70AB-7136, U+714C-71E7, U+7206, U+722A-728F, U+72AC-72FC, U+730E-733F, U+7350-7357, U+736C-736D, U+7384-73ED, U+7403-7410, U+7422-743C, U+7455-745E, U+7470-7487, U+74A7-74A8, U+74DC-7600, U+761F-764C, U+7663-7693, U+76AE-770B, U+771F-7729, U+773A-7741, U+775B-776B, U+778E, U+77A7-77BB, U+77DB-78D5, U+78E8-78FA, U+7934-798F, U+79A7, U+79BB-7A20, U+7A33-7A46, U+7A57, U+7A74-7AA8, U+7ACB-7B60, U+7B77-7BB1, U+7BC6-7C07, U+7C27, U+7C38-7C4D, U+7C73-7CFB, U+7D20-7D2F, U+7D6E, U+7DA6, U+7E41, U+7E82, U+7EA0-7F72, U+7F8A-7FE1, U+7FFB-806A, U+8083-811A, U+812F-81B3, U+81C6, U+81EA-8247, U+8258, U+826E-8428, U+843D, U+8457-849C, U+84B2-84EC, U+8513-85E4, U+85FB-85FF, U+8611, U+8638, U+864E-8729, U+873F-8760, U+8774-878D, U+87A8-87D1, U+87E5, U+87F9-87FE, U+8840-88AD, U+88C1-88F9, U+8910, U+8925-8944, U+895F, U+897F-8986, U+89C1-89E6, U+8A00, U+8A89, U+8B66-8B6C, U+8BA0-8C4C, U+8C61-8C8C, U+8D1D-8D8B, U+8D9F-8DFA, U+8E0F, U+8E22-8E2A, U+8E44-8E4B, U+8E66-8E81, U+8EAB-8EBA, U+8F66-9022, U+9038-9102, U+9146-91AE, U+91C7-91DC, U+9274, U+933E, U+938F, U+946B, U+9486-957F, U+95E8-96D5, U+96E8-971E, U+9732-9739, U+9752-9774, U+978B-978D, U+97A0-97AD, U+97E6-97F6, U+9875-98A0, U+98CE-98DF, U+9910, U+9955-99A8, U+9A6C-9AB0, U+9AD3-9AD8, U+9B03, U+9B3C-9B54, U+9C7C-9CE2, U+9E1F-9E51, U+9E64-9EA6, U+9EB8-9EDD, U+9F0E-9F20, U+9F3B, U+9F50, U+9F7F-9F84, U+9F99-9F9F, U+FF01-FF1F, U+FF3B-FF3D, U+FF5C-FF5E, U+FFE5; } :root { /* ══ 1. 品牌色（主色 #3a78ee = 主站 --brand / --c-accent） ══ */ --ys-brand: #3a78ee; --ys-brand-light: #e8f0ff; /* 主站 --c-accent-bg，浅底/标签底 */ --ys-brand-lighter: #f2f7ff; /* 更浅一档，区块底 */ --ys-brand-dark: #2f63d4; /* 按下态 / 渐变深端 */ --ys-brand-mid: #5b96f4; /* 主站渐变浅端 */ --ys-brand-rgb: 58,120,238;/* 半透明遮罩用 rgba(var(--ys-brand-rgb),.x) */ --ys-brand-grad: linear-gradient(135deg, #3a78ee 0%, #5b96f4 100%); --ys-link: #3377ff; /* 主站 --c-link */ /* ══ 2. 文字层级（主站 --ink / --ink-2 / --ink-3 / --ink-4 / --c-soft） ══ */ --ys-ink: #1a1a2e; --ys-ink-2: #333333; --ys-ink-3: #666666; --ys-ink-4: #999999; --ys-ink-5: #bbbbbb; --ys-ink-on-brand: #ffffff; /* ══ 3. 语义色（主站 --c-danger / --c-success / --c-warn） ══ */ --ys-danger: #ff5252; --ys-danger-bg: #ffecec; --ys-danger-line: #ffcccc; --ys-success: #2bb673; --ys-success-bg: #eaf9f2; --ys-success-line: #b7e8d2; /* 成功态描边（与 --ys-danger-line 同级） */ --ys-warn: #f5a623; --ys-warn-bg: #fff8e6; --ys-warn-text: #d48806; --ys-hot: #e63946; /* 主站强调红：电话/置顶/热标 */ --ys-gold: #f5a623; /* 主站集市金：VIP/兑换 */ --ys-gold-deep: #c4820a; --ys-gold-light: #ffd96a; /* SVIP 徽章渐变亮端（= .vb-btn 同色） */ --ys-gold-grad: linear-gradient(135deg, #ffd96a 0%, #f5a623 55%, #e08b0a 100%); --ys-gold-ink: #4a2600; /* 亮金底上的字：最差端(#e08b0a) 5.01:1（WCAG AA 达标）。 原 #5c3000 实际只有 4.19:1 —— 之前按渐变中段(#f5a623)算得 5.5:1 是想当然，必须取渐变**三端最小值**（真机实测暴露）。 */ --ys-gold-name: #946200; /* 白底上的金昵称：对比 4.96:1（正文可读） */ /* ══ 4. 背景与描边（主站 --bg / --bg-card / --line / --line-soft） ══ */ --ys-bg: #f6f7fa; --ys-bg-card: #ffffff; --ys-bg-sunken: #f4f4f4; /* 输入框/胶囊底 */ --ys-bg-stripe: #fafafa; --ys-line: #ececec; --ys-line-soft: #f0f0f0; --ys-line-strong: #e5e5e5; /* ══ 5. 圆角（主站 --r:6 / --r-lg:12 + 组件实测值） ══ */ --ys-r-sm: 6px; /* 小标签、缩略图 */ --ys-r: 8px; /* 图标容器、输入框 */ --ys-r-md: 10px; /* 列表图标、卡片内块 */ --ys-r-lg: 12px; /* 卡片（= 主站 --r-lg） */ --ys-r-xl: 16px; /* 弹层、抽屉顶角 */ --ys-r-pill: 22px; /* 胶囊按钮/搜索框（= 主站按钮） */ /* ══ 6. 间距刻度（4px 基准，主站实际使用 8/12/16） ══ */ --ys-sp-1: 4px; --ys-sp-2: 8px; --ys-sp-3: 12px; --ys-sp-4: 16px; --ys-sp-5: 20px; --ys-sp-6: 24px; --ys-sp-8: 32px; /* ══ 7. 阴影（主站 --shadow = 0 2px 8px rgba(0,0,0,.04)） ══ */ --ys-shadow-xs: 0 1px 4px rgba(0, 0, 0, .04); --ys-shadow: 0 2px 8px rgba(0, 0, 0, .04); --ys-shadow-md: 0 4px 16px rgba(0, 0, 0, .08); --ys-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12); --ys-shadow-brand: 0 4px 16px rgba(58, 120, 238, .28); --ys-shadow-brand-lg:0 6px 24px rgba(58, 120, 238, .35); /* ══ 8. 字号（云盘 15px 基准；主站 14px，见规范 §字体） ══ */ --ys-fs-xs: .68rem; /* 10.2px 角标 */ --ys-fs-sm: .78rem; /* 11.7px 辅助信息 */ --ys-fs-base: .88rem; /* 13.2px 正文/列表 */ --ys-fs-md: .95rem; /* 14.3px 强调正文 */ --ys-fs-lg: 1.05rem; /* 15.8px 页面标题 */ --ys-fs-xl: 1.4rem; /* 21px 数字/价格 */ /* ══ 9. 动效 ══ */ --ys-ease: cubic-bezier(.4, 0, .2, 1); --ys-dur: .2s; --ys-dur-slow: .28s; /* ══ 10. 字体栈 / 布局 ══ */ --ys-font: "alimama", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Open Sans", Arial, sans-serif; --ys-nav-h: 60px; /* 底部 tabbar 高 */ --ys-header-h: 50px; /* 顶栏高 */ --ys-max-w: 720px; /* 与主站 body 同宽 */ } /* ══════════════════════════════════════════════════════════════════ 云盘既有变量名 → 令牌 别名层 作用：style.css / app.js 中 150+ 处 var(--primary) 等引用零改动生效。 迁移期保留；后续新代码请直接用 --ys-* 令牌。 ══════════════════════════════════════════════════════════════════ */ :root { /* 主色 */ --primary: var(--ys-brand); --primary-light: var(--ys-brand-light); --primary-lighter: var(--ys-brand-lighter); --primary-dark: var(--ys-brand-dark); /* 文字 */ --text: var(--ys-ink); --text-2: var(--ys-ink-3); /* #666 */ --text-3: var(--ys-ink-4); /* #999 */ --text-4: var(--ys-ink-5); /* #bbb */ /* 描边 */ --border: var(--ys-line-soft); /* #f0f0f0 */ --border-2: var(--ys-line-strong);/* #e5e5e5 */ /* 背景 */ --bg: var(--ys-bg); --bg-card: var(--ys-bg-card); /* 语义 */ --danger: var(--ys-danger); --success: var(--ys-success); --warn: var(--ys-warn); /* 圆角 */ --radius: var(--ys-r-lg); /* 12px */ --radius-sm: var(--ys-r); /* 8px */ --radius-lg: var(--ys-r-xl); /* 16px */ /* 阴影 */ --shadow: var(--ys-shadow); --shadow-deep: var(--ys-shadow-brand-lg); /* 布局 */ --nav-h: var(--ys-nav-h); --header-h: var(--ys-header-h); /* 金色（VIP） */ --gold: var(--ys-gold); --gold-dark: #b5651d; } /* ══════════════════════════════════════════════════════════════════ 基础层：与主站一致的排版底座 ══════════════════════════════════════════════════════════════════ */ html { font-size: 15px; -webkit-text-size-adjust: 100%; } body { font-family: var(--ys-font); background: var(--ys-bg); color: var(--ys-ink); line-height: 1.5; } /* 表单控件继承品牌字体（主站 app.css 同策略） */ button, input, select, textarea { font-family: inherit; }