/* ============================================================ * Longlight - 长光雨滴小站 | 设计令牌 tokens.css * 来源：~README/项目架构.js → 风格 * 职责：颜色、字阶、圆角、阴影、间隔、动效、边框（不含任何选择器样式） * 用法： * 主题：在 上设置 data-theme="light" | "dark" * ============================================================ */ /* ============================================================ * 1. 全局令牌（与主题无关） * ============================================================ */ :root { /* ---- 字体族（等宽：本地优先栈 + 自托管兜底，见 README 风格.字体） 本地已装 JetBrains Mono / Fira Code / Space Mono 时优先生效，末位 IBM Plex Mono 为随站分发的兜底； 中文由自托管 Noto Sans SC 兜底，禁止回退衬线族；标题粗体 / 数据细体 / UI / 引用同族 ---- */ --font-stack: 'JetBrains Mono', 'Fira Code', 'Space Mono', 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace; --font-heading: var(--font-stack); --font-body: var(--font-stack); --font-mono: var(--font-stack); --font-quote: var(--font-stack); /* ---- 字阶（字重 字号/行高 字体族，可直接用于 font 简写；字距见下方 --ls-*） 注意：行高必须带 px 单位，否则 font 简写会把无单位数值当作倍数（如 13px/20 → 行高 260px）---- */ --text-display: 700 56px/64px var(--font-heading); --text-h1: 700 40px/48px var(--font-heading); --text-h2: 650 32px/40px var(--font-heading); --text-h3: 600 24px/32px var(--font-heading); --text-h4: 600 20px/28px var(--font-heading); --text-body-l: 400 18px/30px var(--font-body); --text-body: 400 16px/26px var(--font-body); --text-ui: 500 14px/22px var(--font-body); --text-caption: 500 12px/18px var(--font-body); --text-mono: 300 13px/18px var(--font-mono); /* ---- 字距（与字阶配套，字距为 0 的层级不定义）---- */ --ls-display: -0.02em; --ls-h1: -0.02em; --ls-h2: -0.01em; --ls-h3: -0.01em; --ls-caption: 0.06em; /* ---- 圆角 ---- */ --radius-btn: 2px; --radius-input: 2px; --radius-select: 2px; --radius-tag: 2px; --radius-checkbox: 2px; --radius-switch: 2px; --radius-switch-thumb: 1px; /* 开关滑块 18×18（风格.控件.开关） */ --radius-slider: 2px; --radius-card: 4px; --radius-modal: 6px; --radius-circle: 50%; /* 头像和状态点（风格.圆角）；其余一律取 0 */ /* ---- 间隔 ---- */ --space-icon-text: 8px; --space-btn-x: 0 18px; --space-input: 12px; --space-card: 24px; --space-card-lg: 32px; --space-form-label: 8px; --space-form-field: 16px; --space-form-group: 32px; --space-between-cards: 24px; --space-section: 80px; --space-section-lg: 120px; --space-page-mobile: 24px; --space-page-desktop: 48px; --space-grid: 24px; /* ---- 动效时长 & 缓动 ---- */ --duration-enter: 200ms; --duration-exit: 140ms; --duration-hover: 160ms; --duration-active: 120ms; --duration-focus: 120ms; --duration-expand: 220ms; --duration-page: 240ms; --duration-theme: 420ms; /* 投影底色切换的颜色交叉渐变（由 core/theme 读取以同步摘类时机） */ --duration-progress: 320ms; --duration-modal-overlay:160ms; --duration-modal-panel: 200ms; --duration-drawer: 240ms; --duration-tooltip: 120ms; --duration-cursor: 1s; /* 终端光标闪烁周期（风格.光标闪烁，50% 占空比） */ --duration-skeleton: 1.6s; --stagger-item: 20ms; --stagger-max: 8; --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* ---- 深色底 hover 背景（侧栏选中项，亮暗主题一致）---- */ --hover-bg-on-green: rgba(255, 255, 255, .06); /* ---- 遮罩（纯色，亮暗主题一致；禁止 backdrop-filter，全站唯一不参与玻璃化的层）---- */ --overlay: rgba(16, 22, 18, .48); /* ---- 边框样式（引用主题颜色变量）---- */ --border-default: 1px solid var(--line); --border-soft: 1px solid color-mix(in srgb, var(--line) 70%, transparent); --border-strong: 1px solid var(--green-900); --border-dashed: 1px dashed var(--line); --border-selected:2px solid var(--warm-600); --border-focus: 2px solid var(--focus); --border-error: 1px solid var(--danger); --border-success: 1px solid var(--success); /* ---- 玻璃材质（半透明表面 + 实时模糊 + 顶部内侧高光；见 README 风格.边框.玻璃 与 风格.控件.卡片） 仅卡片 / 弹窗 / 抽屉 / 菜单使用；遮罩（--overlay）保持纯色，是全站唯一不参与玻璃化的层 ---- */ --glass-blur: 14px; --glass-saturate: 1.4; --border-glass: 1px solid color-mix(in srgb, var(--line) 55%, transparent); /* --glass-bg 与 --glass-highlight 随主题定义（亮色 / 暗色各一档） */ /* ---- 语义别名（供 CUI 终端等旧命名引用，统一指向上方令牌）---- */ --bg-primary: var(--bg); --bg-surface: var(--surface); --bg-surface-emphasis: var(--surface-emphasis); --green-primary: var(--green-900); --green-secondary: var(--green-700); --green-vibrant: var(--green-500); --warm-orange: var(--warm-600); --amber: var(--amber-500); --border: var(--line); --error: var(--danger); } /* ============================================================ * 2. 主题 — 亮色 * ============================================================ */ [data-theme="light"] { /* 显式声明本页配色并禁止 UA 覆盖：Chrome Auto Dark / Android 强制深色会给未声明 color-scheme 的页面做自动颜色反转，显式声明后浏览器按本站主题令牌原样呈现 */ color-scheme: only light; /* 背景 */ --bg: #EEF9F4; /* bg/base */ --bg-secondary: #E0F2EA; /* bg/subtle */ --surface: #F8FDFB; /* surface/base */ --surface-emphasis: #FFFFFF; /* surface/raised */ /* 玻璃表面（风格.控件.卡片）：表面色半透明档 + 顶部 1px 内侧高光 */ --glass-bg: rgba(248, 253, 251, .62); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .6); /* 绿色系 */ --green-900: #1E4D3D; /* brand/primary */ --green-700: #4E8A72; /* brand/secondary */ --green-500: #8DD3B8; /* accent/vital */ /* 强调色 */ --warm-600: #C9825C; /* accent/clay */ --amber-500: #D8A653; /* accent/amber */ /* 文字 */ --text-primary: #172B24; /* text/primary */ --text-secondary: #526A60; /* text/secondary */ /* 线 & 状态 */ --line: #C4E2D6; /* border/default */ --focus: #2F8B70; --success: #438A61; --danger: #B85F50; /* 角色配色（用户名 / 状态指示器；亮色） */ --role-user: #6B7A72; /* 普通用户 */ --role-vip: #D4A44C; /* VIP */ --role-admin: #3F8FD1; /* 管理员 */ --role-agent: #8A63D2; /* 长光（站点 AI 身份） */ --role-banned: #CF4141; /* 封禁 */ --role-deleted: #8D9994; /* 注销 */ /* 性别徽标（用户名右上角图标；亮色）：保密灰 / 男蓝 / 女粉 */ --gender-secret: #8D9994; /* 保密 */ --gender-male: #3F8FD1; /* 男 */ --gender-female: #E0779B; /* 女 */ /* 阴影 */ --shadow-1: 0 1px 2px rgba(30,40,33,.06); /* 微浮起和按钮 */ --shadow-2: 0 2px 8px rgba(30,40,33,.08); /* 卡片和菜单 */ --shadow-3: 0 12px 32px rgba(30,40,33,.12); /* 弹窗和抽屉 */ --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); /* hover 背景：浅色悬停/徽章/骨架/拖拽背景统一取背景次 bg/subtle #E0F2EA */ --hover-bg: #E0F2EA; /* = 背景次 */ --hover-bg-soft:#E0F2EA; /* = 背景次 */ --disabled-bg: #E0F2EA; /* = 背景次 */ /* 全息屏网格（仅亮色单独指定，暗色回退 --line / 0.15） */ --grid-line: #4E8A72; /* brand/secondary */ --grid-opacity: 0.2; /* CUI 终端语法着色 */ --tok-symbol: #7A8C74; /* 特殊字符：art、连接符、分隔线 */ --tok-keyword: #2F6B43; /* 命令关键字 */ --tok-value: #A8653B; /* 命令的值 */ --tok-number: #B5802A; /* 数字 */ --tok-text: #172B24; /* 普通文本 */ --tok-sub1: #3E7A5E; /* 子命令·1级 */ --tok-sub2: #3E6E82; /* 子命令·2级 */ --tok-sub3: #6A5F93; /* 子命令·3级 */ /* 选择框箭头（风格.控件.选择）：data URI 无法引用 var()，故按主题在此给出， 色值取自次文字 --text-secondary，使 components 层只引变量、不出现硬编码颜色 */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23526A60' stroke-width='1.5'/%3E%3C/svg%3E"); /* 日历图标（风格.控件.日期选择器）：同为 data URI，色值取自次文字 --text-secondary */ --calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Crect x='1.75' y='2.75' width='10.5' height='9.5' rx='1.5' stroke='%23526A60' stroke-width='1.3'/%3E%3Cpath d='M1.75 5.75h10.5' stroke='%23526A60' stroke-width='1.3'/%3E%3Cpath d='M4.5 1.5v2.5M9.5 1.5v2.5' stroke='%23526A60' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ============================================================ * 3. 主题 — 暗色 * ============================================================ */ [data-theme="dark"] { /* 同亮色档：显式声明并禁止 UA 覆盖，避免强制深色把已暗的页面再次反转 */ color-scheme: only dark; /* 背景 */ --bg: #0E1612; --bg-secondary: #0A110D; --surface: #16221A; --surface-emphasis: #1D2B21; /* 玻璃表面（风格.控件.卡片）：表面色半透明档 + 顶部 1px 内侧高光 */ --glass-bg: rgba(22, 34, 26, .55); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .08); /* 绿色系 */ --green-900: #9CC7A6; /* 主绿_浅苔 */ --green-700: #7BAF8A; /* 次绿_浅苔 */ --green-500: #8FBF8A; /* 生机绿 */ /* 强调色 */ --warm-600: #D08A5A; /* 暖橙_陶土 */ --amber-500: #E0B15A; /* 琥珀 */ /* 文字 */ --text-primary: #EAF3EC; --text-secondary: #A9BCAD; /* 线 & 状态 */ --line: #2E4034; --focus: #B7D39A; --success: #7FAF78; --danger: #D07A66; /* 角色配色（用户名 / 状态指示器；暗色） */ --role-user: #7F8F87; /* 普通用户 */ --role-vip: #FFD77A; /* VIP */ --role-admin: #73BFFF; /* 管理员 */ --role-agent: #B79BFF; /* 长光（站点 AI 身份） */ --role-banned: #FF6B6B; /* 封禁 */ --role-deleted: #5A6662; /* 注销 */ /* 性别徽标（用户名右上角图标；暗色）：保密灰 / 男蓝 / 女粉 */ --gender-secret: #7F8F87; /* 保密 */ --gender-male: #73BFFF; /* 男 */ --gender-female: #F49AC1; /* 女 */ /* 阴影 */ --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 4px 12px rgba(0,0,0,.40); --shadow-3: 0 16px 40px rgba(0,0,0,.50); --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); /* hover 背景 */ --hover-bg: rgba(255,255,255,.06); --hover-bg-soft:rgba(255,255,255,.04); --disabled-bg: var(--bg-secondary); /* CUI 终端语法着色 */ --tok-symbol: #5F7A65; --tok-keyword: #B9D9BD; --tok-value: #E0A96A; --tok-number: #E3C078; --tok-text: #EAF3EC; --tok-sub1: #95B8A2; --tok-sub2: #7FA8B4; --tok-sub3: #A79FC9; /* 选择框箭头：色值取自次文字 --text-secondary（暗色） */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A9BCAD' stroke-width='1.5'/%3E%3C/svg%3E"); /* 日历图标（风格.控件.日期选择器）：色值取自次文字 --text-secondary（暗色） */ --calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Crect x='1.75' y='2.75' width='10.5' height='9.5' rx='1.5' stroke='%23A9BCAD' stroke-width='1.3'/%3E%3Cpath d='M1.75 5.75h10.5' stroke='%23A9BCAD' stroke-width='1.3'/%3E%3Cpath d='M4.5 1.5v2.5M9.5 1.5v2.5' stroke='%23A9BCAD' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }