wangjia
5a1e185b1a
phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/ typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile) + assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
46 lines
1.4 KiB
CSS
46 lines
1.4 KiB
CSS
/* MAESTRO · 形制令牌 — 直角、细线、辉光、扫描线 */
|
|
:root {
|
|
/* 圆角：小而克制 — 控件 3–4px、面板 6px、浮层 10px；圆形仍只用于状态点 */
|
|
--radius-xs: 3px; /* chip / 徽章 / 小标签 */
|
|
--radius-sm: 4px; /* 按钮 / 输入框 / doc 块 */
|
|
--radius-md: 6px; /* 面板 / 卡片 / toast */
|
|
--radius-lg: 10px; /* 模态 / 预览浮层 */
|
|
--radius-dot: 50%;
|
|
|
|
/* 边框 */
|
|
--border-w: 1px;
|
|
--border-accent-w: 2px; /* 左侧强调边（active 项 / doc 块） */
|
|
|
|
/* 间距阶（px）— 从实际版式提取 */
|
|
--space-1: 4px;
|
|
--space-2: 6px;
|
|
--space-3: 8px;
|
|
--space-4: 10px;
|
|
--space-5: 12px;
|
|
--space-6: 14px;
|
|
--space-7: 16px;
|
|
--space-8: 20px;
|
|
--space-9: 22px;
|
|
|
|
/* 控件内边距 */
|
|
--pad-btn: 6px 14px;
|
|
--pad-btn-xs: 2px 8px;
|
|
--pad-input: 7px 10px;
|
|
--pad-chip: 1px 8px;
|
|
--pad-card: 12px 14px;
|
|
|
|
/* 阴影：外阴影只用于浮层；辉光是主角 */
|
|
--shadow-pop: 0 10px 30px rgba(0, 0, 0, .65);
|
|
--shadow-modal: 0 18px 60px rgba(0, 0, 0, .6);
|
|
--shadow-toast: 0 8px 30px rgba(0, 0, 0, .55);
|
|
|
|
/* 动效 */
|
|
--ease-fast: .12s; /* @kind other */
|
|
--ease-base: .2s ease; /* @kind other */
|
|
}
|
|
|
|
/* 扫描线 + 暗角氛围层：加在 body::before（全屏界面用） */
|
|
@keyframes maestro-blink { 50% { opacity: 0; } }
|
|
@keyframes maestro-pulse { 50% { opacity: .25; } }
|
|
@keyframes maestro-rise { from { opacity: 0; transform: translateY(5px); } }
|