/* * tokens.css — 博剪AI 设计令牌（Design Tokens） * 主题：温墨（Wenmò）— 温暖专业，无AI味 * * 使用方式：所有页面 * 换主题只改此文件，无需改任何组件代码。 * * 版本：1.0.0 日期：2026-04-05 */ :root { /* ══════════════════════════════════════════════════════ * 颜色 — 背景与表面 * ══════════════════════════════════════════════════════ */ --color-bg: #FAFAF8; /* 页面底层背景，暖白 */ --color-surface: #FFFFFF; /* 卡片、弹窗、面板 */ --color-surface-alt: #F5F3F0; /* 次级面板、输入框背景 */ --color-surface-hover: #EFEDE9; /* hover 状态背景 */ --color-overlay: rgba(28, 25, 23, 0.45); /* 遮罩层 */ /* ══════════════════════════════════════════════════════ * 颜色 — 边框与分隔线 * ══════════════════════════════════════════════════════ */ --color-border: #E8E4DF; --color-border-strong: #D6D0CA; --color-border-focus: #B45309; /* 输入框聚焦边框 */ --color-divider: #EDE9E4; /* 页面内分隔线 */ /* ══════════════════════════════════════════════════════ * 颜色 — 文字 * ══════════════════════════════════════════════════════ */ --color-text-primary: #1C1917; /* 主文字，近黑暖色 */ --color-text-secondary: #57534E; /* 辅助文字 */ --color-text-tertiary: #78716C; /* 说明文字、placeholder */ --color-text-disabled: #A8A29E; /* 禁用状态 */ --color-text-inverse: #FFFFFF; /* 深色背景上的文字 */ --color-text-link: #B45309; /* 链接 */ --color-text-link-hover: #92400E; /* ══════════════════════════════════════════════════════ * 颜色 — 主行动色（琥珀棕） * ══════════════════════════════════════════════════════ */ --color-primary: #B45309; /* 主按钮、高亮、进度条激活 */ --color-primary-hover: #92400E; --color-primary-active: #78350F; --color-primary-light: #FEF3C7; /* 极淡琥珀，tag/badge 背景 */ --color-primary-muted: #D97706; /* 次级强调，警告色 */ /* ══════════════════════════════════════════════════════ * 颜色 — 语义色 * ══════════════════════════════════════════════════════ */ --color-success: #15803D; --color-success-bg: #F0FDF4; --color-success-border: #BBF7D0; --color-warning: #D97706; --color-warning-bg: #FFFBEB; --color-warning-border: #FDE68A; --color-error: #DC2626; --color-error-bg: #FEF2F2; --color-error-border: #FECACA; --color-info: #0369A1; --color-info-bg: #F0F9FF; --color-info-border: #BAE6FD; /* ══════════════════════════════════════════════════════ * 颜色 — 步骤条（5步法进度） * ══════════════════════════════════════════════════════ */ --color-step-done: #15803D; /* 已完成步骤 */ --color-step-active: #B45309; /* 当前步骤 */ --color-step-pending: #D6D3D1; /* 未到步骤 */ --color-step-line-done: #BBF7D0; --color-step-line-pending:#E8E4DF; /* ══════════════════════════════════════════════════════ * 颜色 — 选用留分屏专用 * ══════════════════════════════════════════════════════ */ --color-sentence-returned-bg: #FEF9C3; /* 从右边删回左边的博剪句背景 */ --color-sentence-returned-border: #FDE047; --color-sentence-selected-bg: #F0FDF4; /* 右边已选博剪句背景 */ --color-sentence-selected-border: #86EFAC; --color-sentence-hover-bg: #EFEDE9; --color-sentence-insert-line: #B45309; /* 插入位置指示线 */ --color-split-divider: #D6D3D1; /* 分隔线默认 */ --color-split-divider-hover: #B45309; /* 鼠标靠近 */ --color-split-divider-active: #92400E; /* 拖动中 */ /* ══════════════════════════════════════════════════════ * 颜色 — 用户等级徽章 * ══════════════════════════════════════════════════════ */ --color-level-0-bg: #F5F3F0; /* 普通用户 */ --color-level-0-text: #78716C; --color-level-1-bg: #FEF3C7; /* 会员 */ --color-level-1-text: #B45309; --color-level-2-bg: #FDF2F8; /* VIP */ --color-level-2-text: #9D174D; /* ══════════════════════════════════════════════════════ * 字体 * ══════════════════════════════════════════════════════ */ --font-family-base: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Menlo', 'Consolas', monospace; /* 字号 */ --font-size-2xs: 11px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 20px; --font-size-3xl: 24px; --font-size-4xl: 28px; --font-size-5xl: 32px; /* 字重 */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* 行高 */ --line-height-tight: 1.35; --line-height-snug: 1.5; --line-height-base: 1.65; --line-height-loose: 1.85; /* 字间距 */ --letter-spacing-tight: -0.01em; --letter-spacing-base: 0; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.08em; /* ══════════════════════════════════════════════════════ * 间距 * ══════════════════════════════════════════════════════ */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ══════════════════════════════════════════════════════ * 圆角 * ══════════════════════════════════════════════════════ */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-base: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* ══════════════════════════════════════════════════════ * 阴影 * ══════════════════════════════════════════════════════ */ --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.06); --shadow-sm: 0 1px 4px rgba(28, 25, 23, 0.08); --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.10); --shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.12); --shadow-xl: 0 16px 40px rgba(28, 25, 23, 0.14); --shadow-focus: 0 0 0 3px rgba(180, 83, 9, 0.25); /* 聚焦光晕 */ /* ══════════════════════════════════════════════════════ * 动画过渡 * ══════════════════════════════════════════════════════ */ --transition-fast: 150ms ease; --transition-base: 220ms ease; --transition-slow: 350ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ══════════════════════════════════════════════════════ * 层级（z-index） * ══════════════════════════════════════════════════════ */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-fullscreen: 500; /* 选用留全屏模式 */ --z-tooltip: 600; /* ══════════════════════════════════════════════════════ * 布局尺寸 * ══════════════════════════════════════════════════════ */ --layout-nav-height: 52px; /* 顶部导航栏高度 */ --layout-sidebar-width: 240px; /* 侧边栏宽度 */ --layout-content-max: 960px; /* 内容区最大宽度 */ --layout-card-padding: var(--space-6); /* 选用留分屏 */ --split-divider-width: 4px; --split-pane-min-width: 280px; /* 每栏最小宽度，防止被拖死 */ --split-sentence-row-height: 48px; /* 每行博剪句高度 */ /* ══════════════════════════════════════════════════════ * 输入控件 * ══════════════════════════════════════════════════════ */ --input-height-sm: 32px; --input-height-base: 40px; --input-height-lg: 48px; --input-padding-x: var(--space-3); /* ══════════════════════════════════════════════════════ * 按钮 * ══════════════════════════════════════════════════════ */ --btn-height-sm: 30px; --btn-height-base: 38px; --btn-height-lg: 46px; --btn-padding-x-sm: var(--space-3); --btn-padding-x-base: var(--space-5); --btn-padding-x-lg: var(--space-7); --btn-font-weight: var(--font-weight-medium); --btn-radius: var(--radius-base); }