/* ══════════════════════════════════════════════════════════════════ 悟垣设计系统 · 组件层 —— 照抄自《悟垣设计系统手册 v1.5》, 一个字没改。依赖 wutrix-tokens.css, 自身不写死任何色值字面量。本仓库当前还在用自己那套按钮/卡片样式(base.html 里), 这份是**新代码的去处** —— 以后要加控件先看这里有没有, 不要再造一个。两件事现在就在生效, 别当它是纯装饰: · .is-story / .wx-tinted —— base.html 的上挂着, 身份色和 4% 着色底靠这两个类落地。 · 末尾那个全局 prefers-reduced-motion 压制块 —— 全站的减弱动效实现。按选择器一个个关 animation 是不够的, transition 会照跑。 ══════════════════════════════════════════════════════════════════ */ /* 悟垣组件层 v0.1（第二章 · 待拍板三项后转正）依赖 brand/tokens.css，自身不写死任何色值字面量。两个仓库共用：wutrix-internal（官网）与 wutrixstudio（产品）。三条贯穿规则： 1. 行动色恒为品牌金，不随产品线变 —— 识别色说「你在哪」，金色说「点这里」。 2. 身份色只表「属于哪条线」，绝不表状态；状态一律走语义色。 3. 成象的紫 #7C5CFC 深底对比 4.44，不过 AA 正文 —— 文字用 --wx-studio-text。 */ :root{ /* 产品线身份色的运行时插槽。在页面根或容器上覆盖这三个即可整体换线。 */ --wx-pc: var(--wx-flow); --wx-pc-text: var(--wx-flow); /* 文字专用，studio 需指向 lt 档 */ --wx-pc-soft: rgba(63,178,192,.14); --wx-pc-line: rgba(63,178,192,.30); /* 密度。两档，只换这四个值。 */ --wx-d-pad: 10px 18px; --wx-d-fs: 14px; --wx-d-gap: 11px; --wx-d-cell: 12px; } .wx-compact{ --wx-d-pad:7px 13px; --wx-d-fs:12.5px; --wx-d-gap:7px; --wx-d-cell:8px; } .is-story { --wx-pc:var(--wx-story); --wx-pc-text:var(--wx-story); --wx-pc-soft:rgba(240,112,60,.14); --wx-pc-line:rgba(240,112,60,.30); } .is-studio{ --wx-pc:var(--wx-studio); --wx-pc-text:var(--wx-studio-text); /* ← 不过 AA，必须走 lt */ --wx-pc-soft:rgba(124,92,252,.14); --wx-pc-line:rgba(124,92,252,.30); } .is-flow { --wx-pc:var(--wx-flow); --wx-pc-text:var(--wx-flow); --wx-pc-soft:rgba(63,178,192,.14); --wx-pc-line:rgba(63,178,192,.30); } .is-color { --wx-pc:var(--wx-color); --wx-pc-text:var(--wx-color); --wx-pc-soft:rgba(232,93,158,.14); --wx-pc-line:rgba(232,93,158,.30); } /* 着色底 · 4%（已定）—— 只在单个产品自己的应用外壳上加，跨产品语境不要加。与 .is-* 叠加使用：基准已定 N3，色值由 tokens.css 的 --wx-{ink,surface,card,border}-{line} 提供。 */ .wx-tinted.is-story { --wx-ink:var(--wx-ink-story); --wx-surface:var(--wx-surface-story); --wx-card:var(--wx-card-story); --wx-border:var(--wx-border-story); } .wx-tinted.is-studio{ --wx-ink:var(--wx-ink-studio); --wx-surface:var(--wx-surface-studio); --wx-card:var(--wx-card-studio);--wx-border:var(--wx-border-studio); } .wx-tinted.is-flow { --wx-ink:var(--wx-ink-flow); --wx-surface:var(--wx-surface-flow); --wx-card:var(--wx-card-flow); --wx-border:var(--wx-border-flow); } .wx-tinted.is-color { --wx-ink:var(--wx-ink-color); --wx-surface:var(--wx-surface-color); --wx-card:var(--wx-card-color); --wx-border:var(--wx-border-color); } /* ── 按钮 ─────────────────────────────────── */ .wx-btn{ font:inherit; font-size:var(--wx-d-fs); font-weight:600; line-height:1.3; border:1px solid transparent; border-radius:var(--wx-radius-sm); padding:var(--wx-d-pad); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:filter var(--wx-dur-fast) var(--wx-ease), background var(--wx-dur-fast) var(--wx-ease); } .wx-btn:focus-visible{ outline:2px solid var(--wx-gold); outline-offset:2px; } .wx-btn[disabled]{ opacity:.45; cursor:not-allowed; } /* 主行动 —— 每屏至多一个，恒为金 */ .wx-btn--action{ background:linear-gradient(100deg,var(--wx-gold-dk),var(--wx-gold-lt)); color:#1C1303; box-shadow:0 10px 30px -12px rgba(var(--wx-gold-rgb),.5); } .wx-btn--action:hover{ filter:brightness(1.06); } /* 次级 —— 走当前产品线身份色 */ .wx-btn--accent{ background:var(--wx-pc); color:#fff; } .wx-btn--ghost { background:transparent; border-color:var(--wx-border); color:var(--wx-paper-soft); } .wx-btn--ghost:hover{ background:var(--wx-card-soft); } /* 不要写 transition: all —— 见第四章 */ .wx-btn--danger{ background:transparent; border-color:rgba(210,107,107,.4); color:var(--wx-danger); } /* ── 输入 ─────────────────────────────────── */ .wx-field{ display:flex; flex-direction:column; gap:6px; } .wx-field > label{ font-size:11.5px; color:var(--wx-muted); } .wx-input{ background:var(--wx-card-soft); border:1px solid var(--wx-border); border-radius:var(--wx-radius-sm); padding:var(--wx-d-pad); color:var(--wx-paper); font:inherit; font-size:var(--wx-d-fs); width:100%; } .wx-input:focus{ outline:none; border-color:var(--wx-pc); box-shadow:0 0 0 3px var(--wx-pc-soft); } .wx-input::placeholder{ color:var(--wx-muted); opacity:.75; } /* ── 标签 ─────────────────────────────────── */ .wx-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; padding:3px 9px; border-radius:6px; border:1px solid transparent; } .wx-chip--id { background:var(--wx-pc-soft); color:var(--wx-pc-text); border-color:var(--wx-pc-line); } .wx-chip--ok { background:rgba(95,191,143,.12); color:#7FD3AB; border-color:rgba(95,191,143,.24); } .wx-chip--warn { background:rgba(224,163,64,.12); color:#E8B665; border-color:rgba(224,163,64,.24); } .wx-chip--danger{ background:rgba(210,107,107,.12); color:#E08D8D; border-color:rgba(210,107,107,.26); } .wx-chip--mute { background:var(--wx-card-soft); color:var(--wx-muted); border-color:var(--wx-border-soft); } /* ── 步骤条 ───────────────────────────────── */ .wx-steps{ display:flex; border-bottom:1px solid var(--wx-border-soft); overflow-x:auto; } .wx-step{ padding:11px 20px 13px; border-bottom:2px solid transparent; white-space:nowrap; display:flex; flex-direction:column; gap:2px; cursor:pointer; } .wx-step__n{ font-family:var(--wx-font-mono); font-size:10px; letter-spacing:.1em; color:var(--wx-muted); } .wx-step__t{ font-size:13.5px; color:var(--wx-muted); } .wx-step[aria-current]{ border-bottom-color:var(--wx-pc); } .wx-step[aria-current] .wx-step__t{ color:var(--wx-paper); font-weight:600; } .wx-step[aria-current] .wx-step__n{ color:var(--wx-pc-text); } /* ── 统计行 ───────────────────────────────── */ .wx-stats{ display:flex; border:1px solid var(--wx-border-soft); border-radius:var(--wx-radius); overflow:hidden; } .wx-stat{ flex:1; padding:13px 17px; border-right:1px solid var(--wx-border-soft); min-width:110px; } .wx-stat:last-child{ border-right:0; } .wx-stat__v{ font-size:23px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; } .wx-stat__k{ font-size:11.5px; color:var(--wx-muted); margin-top:3px; } /* ── 卡片 / 表格 / 空状态 ─────────────────── */ .wx-card{ background:var(--wx-card-soft); border:1px solid var(--wx-border-soft); border-radius:var(--wx-radius); padding:15px 17px; box-shadow:inset 0 1px 0 0 rgba(255,255,255,.045), 0 1px 2px rgba(0,0,0,.4); } .wx-table{ width:100%; border-collapse:collapse; font-size:var(--wx-d-fs); color:var(--wx-paper-soft); } .wx-table th,.wx-table td{ text-align:left; padding:var(--wx-d-cell) 16px var(--wx-d-cell) 0; border-bottom:1px solid var(--wx-border-soft); } .wx-table th{ color:var(--wx-muted); font-weight:400; } .wx-table td:has(.wx-num),.wx-num{ font-variant-numeric:tabular-nums; } .wx-empty{ text-align:center; padding:34px 20px; border:1px dashed var(--wx-border); border-radius:var(--wx-radius); } @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }