kdletters
e072c66ce9
Project CI / AI game creator shell Rust lane 1/2 (push) Has been cancelled
Project CI / AI game creator shell Rust lane 2/2 (push) Has been cancelled
Project CI / Backend tests (push) Has been cancelled
Project CI / Native shell tests (push) Has been cancelled
Project CI / Frontend tests (push) Has been cancelled
Project CI / Repository checks (push) Has been cancelled
Project CI / AI game creator shell Rust crates (push) Has been cancelled
Project CI / AI game creator shell web tests (push) Has been cancelled
Project CI / AI game creator shell Rust smoke (push) Has been cancelled
- 模板库筛选区改用共享筛选条与标签 chip：选中为实心品牌填充 + 反白文字，未选为浅底描边 - 未选中悬停不再借用品牌色（品牌色专属已选中），状态阶梯固定为静止 / 悬停 / 按下 / 选中 - 新增 getPlatformCategoryChipClassName 收敛筛选 chip 类名口径，模板库、资源画布、参考图弹窗与平台 Web 端共用 - PlatformSegmentedTabs 增加 accent 选中口径，与筛选 chip 共用 --platform-chip-* 语义色 - 修复卡片文字区按 grid auto 行排版导致的标题 / 简介 / 标签被裁：行高契约拆为分项常量，文字区固定 174 - 修复忙状态下动作行塞入第三个元素导致的按钮文案换行顶出卡片：忙状态写在触发它的按钮上 - 修复经典滚动条占宽导致的卡片区横向滚动条：按竖滚动条预留列宽后再算列宽行高 - 焦点环由 15% 透明度改为实心色并用 outline 绘制，选中项聚焦不再被状态投影盖掉 - 封面加载失败改为隐藏图片留中性底色，不再出现浏览器裂图图标 - 补充状态对比度、行高契约、滚动条预留、封面兜底与忙状态文案的回归测试 - 同步技术方案、踩坑记录与决策记录的口径
556 lines
22 KiB
CSS
556 lines
22 KiB
CSS
.platform-theme {
|
|
--platform-font-family: 'Inter', 'Noto Sans CJK SC', 'WenQuanYi Zen Hei',
|
|
'PingFang SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
|
|
color: var(--platform-text-strong);
|
|
}
|
|
|
|
.platform-theme--light {
|
|
color-scheme: light;
|
|
--platform-accent: #c7653d;
|
|
--platform-body-fill: radial-gradient(
|
|
circle at 8% 0%,
|
|
rgba(240, 203, 169, 0.24),
|
|
transparent 26%
|
|
),
|
|
radial-gradient(circle at 92% 8%, rgba(226, 171, 134, 0.2), transparent 22%),
|
|
radial-gradient(
|
|
circle at 54% 100%,
|
|
rgba(204, 117, 76, 0.08),
|
|
transparent 30%
|
|
),
|
|
linear-gradient(180deg, #fffdf9 0%, #fdf9f5 54%, #f8efe7 100%);
|
|
--platform-panel-shadow: 0 22px 60px rgba(112, 57, 30, 0.1),
|
|
0 8px 22px rgba(255, 255, 255, 0.82);
|
|
--platform-panel-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.985),
|
|
rgba(253, 248, 243, 0.96)
|
|
);
|
|
--platform-panel-fill-soft: linear-gradient(
|
|
180deg,
|
|
rgba(255, 254, 252, 0.96),
|
|
rgba(250, 243, 236, 0.9)
|
|
);
|
|
--platform-hero-fill: linear-gradient(
|
|
135deg,
|
|
rgba(244, 226, 211, 0.96),
|
|
rgba(238, 208, 183, 0.9)
|
|
);
|
|
--platform-hero-glow-a: rgba(255, 255, 255, 0.42);
|
|
--platform-hero-glow-b: rgba(228, 149, 91, 0.18);
|
|
--platform-hero-overlay-strong: linear-gradient(
|
|
135deg,
|
|
rgba(238, 208, 183, 0.66),
|
|
rgba(204, 117, 76, 0.18)
|
|
);
|
|
--platform-hero-overlay-soft: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.34),
|
|
rgba(248, 233, 219, 0.22)
|
|
);
|
|
--platform-surface-border: rgba(226, 203, 184, 0.88);
|
|
--platform-surface-hover-border: rgba(204, 117, 76, 0.42);
|
|
--platform-shell-glow-1: rgba(255, 255, 255, 0.34);
|
|
--platform-shell-glow-2: rgba(238, 208, 183, 0.22);
|
|
--platform-shell-glow-3: rgba(210, 132, 93, 0.12);
|
|
--platform-surface-glow-a: rgba(240, 203, 169, 0.18);
|
|
--platform-surface-glow-b: rgba(204, 117, 76, 0.1);
|
|
--platform-text-strong: #3d1f10;
|
|
--platform-text-base: #6f5848;
|
|
--platform-text-soft: #988476;
|
|
--platform-text-muted: #a38f80;
|
|
--platform-brand-logo-title: #4a220f;
|
|
--platform-brand-logo-subtitle: #c7653d;
|
|
--platform-brand-logo-shadow: #caa48b;
|
|
--platform-line-soft: rgba(226, 203, 184, 0.72);
|
|
--platform-subpanel-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 254, 252, 0.94),
|
|
rgba(250, 243, 236, 0.9)
|
|
);
|
|
--platform-subpanel-border: rgba(225, 204, 187, 0.82);
|
|
--platform-warm-border: rgba(204, 117, 76, 0.28);
|
|
--platform-warm-bg: rgba(234, 204, 179, 0.32);
|
|
--platform-warm-text: #b6623f;
|
|
--platform-cool-border: rgba(199, 117, 76, 0.24);
|
|
--platform-cool-bg: rgba(238, 208, 183, 0.26);
|
|
--platform-cool-text: #b76038;
|
|
/* 筛选 chip 的两态：未选是浅底描边，选中是**实心填充**。选中填充必须深到
|
|
白字仍过 WCAG AA，并且与未选底色的对比 ≥ 3:1 —— 否则「选中 / 未选中」
|
|
在米色页面上肉眼分不出来（旧口径两态对比只有 1.09:1）。
|
|
口径由 apps/ai-game-creator-shell/tests/workbenchThemeContrast.test.ts 钉住。 */
|
|
--platform-chip-idle-fill: rgba(255, 253, 250, 0.72);
|
|
--platform-chip-active-fill: linear-gradient(135deg, #b3542f, #8f3f22);
|
|
--platform-chip-active-border: #7d3719;
|
|
--platform-chip-active-text: #fffaf5;
|
|
--platform-chip-active-shadow: 0 6px 14px rgba(150, 71, 39, 0.24);
|
|
--platform-neutral-border: rgba(226, 203, 184, 0.44);
|
|
--platform-neutral-bg: rgba(255, 253, 250, 0.7);
|
|
--platform-neutral-text: #7b6150;
|
|
--platform-button-primary-border: rgba(182, 98, 63, 0.32);
|
|
--platform-button-primary-solid: #c7653d;
|
|
--platform-button-primary-fill: linear-gradient(135deg, #df7f40, #b95d3a);
|
|
--platform-button-primary-text: #fffaf5;
|
|
--platform-button-secondary-fill: rgba(255, 253, 250, 0.78);
|
|
--platform-button-secondary-text: #4b2412;
|
|
--platform-button-ghost-fill: rgba(255, 253, 250, 0.56);
|
|
--platform-button-ghost-text: #755a49;
|
|
--platform-button-danger-border: rgba(185, 75, 58, 0.22);
|
|
--platform-button-danger-fill: rgba(255, 237, 229, 0.94);
|
|
--platform-button-danger-text: #a6402f;
|
|
--platform-unread-dot-fill: #8b5a3d;
|
|
--platform-unread-dot-glow: rgba(139, 90, 61, 0.34);
|
|
--platform-success-border: rgba(73, 144, 96, 0.24);
|
|
--platform-success-bg: rgba(237, 248, 239, 0.92);
|
|
--platform-success-text: #2f7b46;
|
|
--platform-icon-fill: rgba(255, 253, 250, 0.68);
|
|
--platform-icon-border: rgba(226, 203, 184, 0.5);
|
|
--platform-icon-text: #7b5c49;
|
|
--platform-nav-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 254, 252, 0.96),
|
|
rgba(250, 243, 236, 0.92)
|
|
);
|
|
--platform-nav-active-fill: linear-gradient(
|
|
180deg,
|
|
rgba(238, 208, 183, 0.48),
|
|
rgba(204, 117, 76, 0.16)
|
|
);
|
|
--platform-nav-active-border: rgba(204, 117, 76, 0.34);
|
|
--platform-nav-active-shadow: 0 10px 24px rgba(182, 98, 63, 0.12);
|
|
--platform-modal-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 254, 252, 0.97),
|
|
rgba(250, 243, 236, 0.95)
|
|
);
|
|
--platform-modal-border: rgba(255, 255, 255, 0.58);
|
|
--platform-desktop-shell-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.99),
|
|
rgba(253, 249, 245, 0.985)
|
|
);
|
|
--platform-desktop-shell-border: rgba(230, 213, 199, 0.94);
|
|
--platform-desktop-shell-inner-border: rgba(233, 218, 205, 0.92);
|
|
--platform-desktop-topbar-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.95),
|
|
rgba(253, 249, 245, 0.92)
|
|
);
|
|
--platform-desktop-panel-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 254, 252, 0.95),
|
|
rgba(250, 243, 236, 0.91)
|
|
);
|
|
--platform-desktop-panel-border: rgba(226, 203, 184, 0.88);
|
|
--platform-desktop-hover-shadow: 0 16px 30px rgba(112, 57, 30, 0.12);
|
|
--platform-overlay-fill: linear-gradient(
|
|
180deg,
|
|
rgba(240, 203, 169, 0.14),
|
|
rgba(255, 255, 255, 0.58)
|
|
);
|
|
--platform-track-border: rgba(226, 203, 184, 0.48);
|
|
--platform-track-fill: rgba(255, 253, 250, 0.9);
|
|
--platform-page-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.9),
|
|
rgba(250, 243, 236, 0.8)
|
|
);
|
|
--platform-page-border: rgba(233, 218, 205, 0.88);
|
|
--platform-input-fill: rgba(255, 253, 250, 0.94);
|
|
--platform-input-fill-focus: rgba(255, 254, 252, 0.96);
|
|
--platform-input-highlight: rgba(255, 255, 255, 0.9);
|
|
/* 焦点环必须**看得见**：原来 15% 透明度合成到页面底色后只有 1.17:1，键盘用户
|
|
根本看不到焦点在哪。改成实心品牌色，对页面底色 4.3:1（≥ WCAG 非文本对比 3:1），
|
|
由 tests/workbenchThemeContrast.test.ts 钉住。 */
|
|
--platform-input-focus-ring: #b6623f;
|
|
--platform-nav-item-text: #80695a;
|
|
--platform-nav-item-text-active: #3d1f10;
|
|
--platform-nav-item-hover-fill: rgba(253, 248, 243, 0.94);
|
|
--platform-nav-item-icon-fill: rgba(250, 243, 236, 1);
|
|
--platform-nav-item-icon-text: #7b5c49;
|
|
--platform-nav-item-icon-active-fill: rgba(255, 254, 252, 0.98);
|
|
--platform-nav-item-icon-active-text: #c7653d;
|
|
--platform-nav-icon-active-shadow: 0 12px 24px rgba(182, 98, 63, 0.16);
|
|
--platform-bottom-nav-fill: linear-gradient(180deg, #fffefa, #fff9ef);
|
|
--platform-bottom-nav-border: rgba(224, 181, 139, 0.58);
|
|
--platform-bottom-nav-divider: rgba(225, 185, 145, 0.52);
|
|
--platform-bottom-nav-text: #5b2b19;
|
|
--platform-bottom-nav-muted-text: #7a4b37;
|
|
--platform-bottom-nav-active-text: #f15a17;
|
|
--platform-bottom-nav-primary-fill: linear-gradient(180deg, #ff7a23, #f04d12);
|
|
--platform-bottom-nav-primary-shadow: 0 12px 24px rgba(240, 77, 18, 0.28);
|
|
--platform-bottom-nav-primary-text: #fffaf2;
|
|
--platform-profile-hero-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 254, 252, 0.96),
|
|
rgba(250, 239, 229, 0.9)
|
|
);
|
|
--platform-profile-hero-border: rgba(255, 255, 255, 0.56);
|
|
--platform-profile-hero-shadow: 0 20px 56px rgba(112, 57, 30, 0.16);
|
|
--platform-profile-avatar-fill: linear-gradient(
|
|
135deg,
|
|
rgba(223, 127, 64, 0.96),
|
|
rgba(181, 91, 56, 0.92)
|
|
);
|
|
--platform-profile-avatar-shadow: 0 14px 30px rgba(182, 98, 63, 0.22);
|
|
--platform-profile-chip-fill: rgba(255, 253, 250, 0.88);
|
|
--platform-profile-chip-hover-fill: rgba(255, 254, 252, 0.96);
|
|
--platform-profile-chip-text: #755a49;
|
|
--platform-profile-action-fill: linear-gradient(135deg, #df7f40, #b95d3a);
|
|
--platform-profile-action-solid: #c7653d;
|
|
--platform-profile-action-text: #fffaf5;
|
|
--platform-profile-action-shadow: 0 14px 30px rgba(182, 98, 63, 0.22);
|
|
--platform-card-overlay-soft: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.08),
|
|
rgba(250, 243, 236, 0.82)
|
|
);
|
|
--platform-card-overlay-strong: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.16),
|
|
rgba(248, 239, 231, 0.92)
|
|
);
|
|
--platform-card-overlay-deep: radial-gradient(
|
|
circle at top left,
|
|
rgba(255, 255, 255, 0.2),
|
|
transparent 30%
|
|
),
|
|
radial-gradient(circle at right, rgba(228, 149, 91, 0.14), transparent 28%),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(248, 239, 231, 0.9));
|
|
--platform-recommend-runtime-fill: var(--platform-panel-fill);
|
|
--platform-recommend-runtime-border: rgba(226, 203, 184, 0.42);
|
|
--platform-recommend-runtime-shadow: 0 18px 44px rgba(112, 57, 30, 0.12),
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.58);
|
|
--platform-recommend-runtime-state-fill: radial-gradient(
|
|
circle at 50% 18%,
|
|
rgba(204, 117, 76, 0.12),
|
|
transparent 34%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.98),
|
|
rgba(250, 243, 236, 0.94)
|
|
);
|
|
--platform-recommend-runtime-state-text: var(--platform-text-strong);
|
|
--puzzle-runtime-shell-fill: var(--platform-body-fill);
|
|
--puzzle-runtime-stage-fill: radial-gradient(
|
|
circle at 50% 18%,
|
|
rgba(204, 117, 76, 0.13),
|
|
transparent 30%
|
|
),
|
|
radial-gradient(
|
|
circle at 18% 82%,
|
|
rgba(240, 203, 169, 0.18),
|
|
transparent 28%
|
|
),
|
|
linear-gradient(180deg, #fffdf9 0%, #fbf5ed 58%, #f4e5d7 100%);
|
|
--puzzle-runtime-grid-line: rgba(112, 57, 30, 0.06);
|
|
--puzzle-runtime-text-strong: var(--platform-text-strong);
|
|
--puzzle-runtime-text-base: var(--platform-text-base);
|
|
--puzzle-runtime-text-soft: var(--platform-text-soft);
|
|
--puzzle-runtime-surface-fill: rgba(255, 253, 250, 0.76);
|
|
--puzzle-runtime-surface-fill-strong: rgba(255, 253, 250, 0.9);
|
|
--puzzle-runtime-surface-border: rgba(226, 203, 184, 0.48);
|
|
--puzzle-runtime-board-fill: rgba(255, 253, 250, 0.68);
|
|
--puzzle-runtime-board-border: rgba(204, 117, 76, 0.28);
|
|
--puzzle-runtime-board-shadow: 0 30px 80px rgba(112, 57, 30, 0.14);
|
|
--puzzle-runtime-piece-fill: rgba(255, 253, 250, 0.74);
|
|
--puzzle-runtime-piece-border: transparent;
|
|
--puzzle-runtime-piece-empty-fill: rgba(238, 208, 183, 0.34);
|
|
--puzzle-runtime-piece-empty-text: rgba(111, 88, 72, 0.4);
|
|
--puzzle-runtime-piece-selected-fill: linear-gradient(
|
|
135deg,
|
|
#df7f40,
|
|
#b95d3a
|
|
);
|
|
--puzzle-runtime-piece-selected-text: #fffaf5;
|
|
--puzzle-runtime-piece-selected-border: transparent;
|
|
--puzzle-runtime-next-card-overlay: rgba(74, 34, 15, 0.06);
|
|
--puzzle-runtime-control-fill: rgba(255, 253, 250, 0.72);
|
|
--puzzle-runtime-control-hover-fill: rgba(204, 117, 76, 0.1);
|
|
--puzzle-runtime-primary-fill: var(--platform-button-primary-fill);
|
|
--puzzle-runtime-primary-text: var(--platform-button-primary-text);
|
|
--puzzle-runtime-primary-shadow: var(--platform-profile-action-shadow);
|
|
--puzzle-runtime-accent-text: var(--platform-cool-text);
|
|
--puzzle-runtime-cool-text: #6e8d42;
|
|
--puzzle-runtime-danger-fill: rgba(255, 237, 229, 0.9);
|
|
--puzzle-runtime-danger-text: #a6402f;
|
|
--puzzle-runtime-backdrop-fill: rgba(61, 31, 16, 0.34);
|
|
--puzzle-runtime-dialog-fill: radial-gradient(
|
|
circle at 12% 0%,
|
|
rgba(204, 117, 76, 0.18),
|
|
transparent 36%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(255, 254, 252, 0.98),
|
|
rgba(250, 243, 236, 0.95)
|
|
);
|
|
--puzzle-runtime-dialog-border: rgba(204, 117, 76, 0.3);
|
|
--puzzle-runtime-table-fill: rgba(255, 253, 250, 0.62);
|
|
--puzzle-runtime-table-row-fill: rgba(204, 117, 76, 0.12);
|
|
--puzzle-runtime-next-card-fill: rgba(255, 253, 250, 0.66);
|
|
--puzzle-runtime-next-card-hover-fill: rgba(204, 117, 76, 0.1);
|
|
}
|
|
|
|
.platform-theme--dark {
|
|
color-scheme: dark;
|
|
--platform-accent: #5b6cff;
|
|
--platform-body-fill: radial-gradient(
|
|
circle at top,
|
|
rgba(129, 140, 248, 0.2),
|
|
transparent 30%
|
|
),
|
|
radial-gradient(
|
|
circle at top right,
|
|
rgba(59, 130, 246, 0.12),
|
|
transparent 24%
|
|
),
|
|
radial-gradient(
|
|
circle at bottom left,
|
|
rgba(34, 211, 238, 0.08),
|
|
transparent 26%
|
|
),
|
|
linear-gradient(180deg, #13151c 0%, #090b11 100%);
|
|
--platform-panel-shadow: 0 28px 88px rgba(5, 8, 28, 0.5);
|
|
--platform-panel-fill: linear-gradient(
|
|
180deg,
|
|
rgba(22, 20, 52, 0.95),
|
|
rgba(7, 9, 21, 0.98)
|
|
);
|
|
--platform-panel-fill-soft: linear-gradient(
|
|
180deg,
|
|
rgba(122, 92, 255, 0.12),
|
|
rgba(255, 255, 255, 0.03)
|
|
);
|
|
--platform-hero-fill: radial-gradient(
|
|
circle at top left,
|
|
rgba(129, 140, 248, 0.24),
|
|
transparent 34%
|
|
),
|
|
radial-gradient(circle at right, rgba(34, 211, 238, 0.12), transparent 32%),
|
|
linear-gradient(180deg, rgba(17, 22, 66, 0.95), rgba(8, 10, 24, 0.98));
|
|
--platform-hero-glow-a: rgba(129, 140, 248, 0.18);
|
|
--platform-hero-glow-b: rgba(34, 211, 238, 0.1);
|
|
--platform-surface-border: rgba(160, 169, 255, 0.12);
|
|
--platform-surface-hover-border: rgba(255, 255, 255, 0.16);
|
|
--platform-shell-glow-1: rgba(129, 140, 248, 0.2);
|
|
--platform-shell-glow-2: rgba(59, 130, 246, 0.12);
|
|
--platform-shell-glow-3: rgba(34, 211, 238, 0.08);
|
|
--platform-surface-glow-a: rgba(129, 140, 248, 0.18);
|
|
--platform-surface-glow-b: rgba(34, 211, 238, 0.1);
|
|
--platform-text-strong: #ffffff;
|
|
--platform-text-base: rgb(228 228 231);
|
|
--platform-text-soft: rgb(161 161 170);
|
|
--platform-text-muted: rgb(161 161 170);
|
|
--platform-brand-logo-title: #fff7dc;
|
|
--platform-brand-logo-subtitle: #9fe7ff;
|
|
--platform-brand-logo-shadow: #040814;
|
|
--platform-line-soft: rgba(255, 255, 255, 0.1);
|
|
--platform-subpanel-fill: rgba(255, 255, 255, 0.05);
|
|
--platform-subpanel-border: rgba(255, 255, 255, 0.1);
|
|
--platform-warm-border: rgba(167, 139, 250, 0.24);
|
|
--platform-warm-bg: rgba(109, 40, 217, 0.18);
|
|
--platform-warm-text: rgb(237 233 254);
|
|
--platform-cool-border: rgba(103, 232, 249, 0.22);
|
|
--platform-cool-bg: rgba(8, 145, 178, 0.14);
|
|
--platform-cool-text: rgb(236 254 255);
|
|
/* 同浅色主题：选中态是实心填充。深色皮肤里「填充比底色更亮」才是可分辨的选中，
|
|
所以这里用亮靛蓝填充 + 深色文字，同时在渐变两端都满足
|
|
「文字 ≥ 4.5:1」「与未选底色 ≥ 3:1」。 */
|
|
--platform-chip-idle-fill: rgba(255, 255, 255, 0.05);
|
|
--platform-chip-active-fill: linear-gradient(135deg, #9fb0ff, #7b8cff);
|
|
--platform-chip-active-border: #b7c4ff;
|
|
--platform-chip-active-text: #0b1030;
|
|
--platform-chip-active-shadow: 0 8px 18px rgba(77, 92, 245, 0.32);
|
|
--platform-neutral-border: rgba(255, 255, 255, 0.08);
|
|
--platform-neutral-bg: rgba(255, 255, 255, 0.05);
|
|
--platform-neutral-text: rgb(228 228 231);
|
|
--platform-button-primary-border: rgba(129, 140, 248, 0.3);
|
|
--platform-button-primary-solid: #5b6cff;
|
|
--platform-button-primary-fill: linear-gradient(135deg, #5b6cff, #3dd9ff);
|
|
--platform-button-primary-text: rgb(238 248 255);
|
|
--platform-button-secondary-fill: rgba(255, 255, 255, 0.05);
|
|
--platform-button-secondary-text: rgb(244 244 245);
|
|
--platform-button-ghost-fill: rgba(255, 255, 255, 0.03);
|
|
--platform-button-ghost-text: rgb(212 212 216);
|
|
--platform-button-danger-border: rgba(251, 113, 133, 0.2);
|
|
--platform-button-danger-fill: rgba(244, 63, 94, 0.1);
|
|
--platform-button-danger-text: rgb(255 228 230);
|
|
--platform-unread-dot-fill: #d6a27c;
|
|
--platform-unread-dot-glow: rgba(214, 162, 124, 0.24);
|
|
--platform-success-border: rgba(52, 211, 153, 0.24);
|
|
--platform-success-bg: rgba(16, 185, 129, 0.1);
|
|
--platform-success-text: rgb(220 252 231);
|
|
--platform-icon-fill: rgba(255, 255, 255, 0.05);
|
|
--platform-icon-border: rgba(255, 255, 255, 0.1);
|
|
--platform-icon-text: rgb(212 212 216);
|
|
--platform-nav-fill: linear-gradient(
|
|
180deg,
|
|
rgba(109, 40, 217, 0.12),
|
|
rgba(255, 255, 255, 0.03)
|
|
);
|
|
--platform-nav-active-fill: linear-gradient(
|
|
180deg,
|
|
rgba(91, 108, 255, 0.2),
|
|
rgba(61, 217, 255, 0.08)
|
|
);
|
|
--platform-nav-active-border: rgba(160, 169, 255, 0.24);
|
|
--platform-nav-active-shadow: 0 12px 28px rgba(8, 14, 42, 0.4);
|
|
--platform-modal-fill: linear-gradient(
|
|
180deg,
|
|
rgba(16, 18, 46, 0.98),
|
|
rgba(7, 8, 19, 0.98)
|
|
);
|
|
--platform-modal-border: rgba(160, 169, 255, 0.12);
|
|
--platform-desktop-shell-fill: linear-gradient(
|
|
180deg,
|
|
rgba(8, 8, 30, 0.98),
|
|
rgba(5, 6, 18, 0.99)
|
|
);
|
|
--platform-desktop-shell-border: rgba(160, 169, 255, 0.14);
|
|
--platform-desktop-shell-inner-border: rgba(255, 255, 255, 0.03);
|
|
--platform-desktop-topbar-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.05),
|
|
rgba(255, 255, 255, 0.03)
|
|
);
|
|
--platform-desktop-panel-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.05),
|
|
rgba(255, 255, 255, 0.02)
|
|
);
|
|
--platform-desktop-panel-border: rgba(160, 169, 255, 0.12);
|
|
--platform-desktop-hover-shadow: 0 16px 28px rgba(8, 11, 38, 0.2);
|
|
--platform-overlay-fill: rgba(5, 8, 28, 0.72);
|
|
--platform-track-border: rgba(255, 255, 255, 0.12);
|
|
--platform-track-fill: rgba(255, 255, 255, 0.08);
|
|
--platform-page-fill: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.04),
|
|
rgba(255, 255, 255, 0.02)
|
|
);
|
|
--platform-page-border: rgba(255, 255, 255, 0.06);
|
|
--platform-input-fill: rgba(255, 255, 255, 0.05);
|
|
--platform-input-fill-focus: rgba(255, 255, 255, 0.08);
|
|
--platform-input-highlight: rgba(255, 255, 255, 0.06);
|
|
/* 同浅色主题：深色皮肤用亮靛蓝焦点环，对深色底色 6.5:1。 */
|
|
--platform-input-focus-ring: #9fb0ff;
|
|
--platform-nav-item-text: rgb(161 161 170);
|
|
--platform-nav-item-text-active: rgb(238 248 255);
|
|
--platform-nav-item-hover-fill: rgba(91, 108, 255, 0.08);
|
|
--platform-nav-item-icon-fill: rgba(255, 255, 255, 0.06);
|
|
--platform-nav-item-icon-text: rgb(161 161 170);
|
|
--platform-nav-item-icon-active-fill: linear-gradient(
|
|
180deg,
|
|
rgba(91, 108, 255, 0.24),
|
|
rgba(61, 217, 255, 0.12)
|
|
);
|
|
--platform-nav-item-icon-active-text: rgb(238 248 255);
|
|
--platform-nav-icon-active-shadow: 0 12px 24px rgba(8, 14, 42, 0.42);
|
|
--platform-bottom-nav-fill: linear-gradient(180deg, #fffefa, #fff9ef);
|
|
--platform-bottom-nav-border: rgba(224, 181, 139, 0.64);
|
|
--platform-bottom-nav-divider: rgba(225, 185, 145, 0.56);
|
|
--platform-bottom-nav-text: #5b2b19;
|
|
--platform-bottom-nav-muted-text: #7a4b37;
|
|
--platform-bottom-nav-active-text: #f15a17;
|
|
--platform-bottom-nav-primary-fill: linear-gradient(180deg, #ff7a23, #f04d12);
|
|
--platform-bottom-nav-primary-shadow: 0 12px 24px rgba(240, 77, 18, 0.3);
|
|
--platform-bottom-nav-primary-text: #fffaf2;
|
|
--platform-profile-hero-fill: linear-gradient(
|
|
180deg,
|
|
rgba(20, 24, 58, 0.96),
|
|
rgba(8, 10, 24, 0.98)
|
|
);
|
|
--platform-profile-hero-border: rgba(160, 169, 255, 0.14);
|
|
--platform-profile-hero-shadow: 0 24px 70px rgba(5, 8, 28, 0.42);
|
|
--platform-profile-avatar-fill: linear-gradient(
|
|
135deg,
|
|
rgba(91, 108, 255, 0.94),
|
|
rgba(61, 217, 255, 0.78)
|
|
);
|
|
--platform-profile-avatar-shadow: 0 14px 32px rgba(61, 217, 255, 0.16);
|
|
--platform-profile-chip-fill: rgba(255, 255, 255, 0.08);
|
|
--platform-profile-chip-hover-fill: rgba(255, 255, 255, 0.14);
|
|
--platform-profile-chip-text: rgb(228 228 231);
|
|
--platform-profile-action-fill: linear-gradient(135deg, #5b6cff, #3dd9ff);
|
|
--platform-profile-action-solid: #5b6cff;
|
|
--platform-profile-action-text: rgb(238 248 255);
|
|
--platform-profile-action-shadow: 0 14px 32px rgba(91, 108, 255, 0.22);
|
|
--platform-card-overlay-soft: linear-gradient(
|
|
180deg,
|
|
rgba(8, 10, 14, 0.06),
|
|
rgba(8, 10, 14, 0.74)
|
|
);
|
|
--platform-card-overlay-strong: linear-gradient(
|
|
180deg,
|
|
rgba(8, 10, 14, 0.14),
|
|
rgba(8, 10, 14, 0.9)
|
|
);
|
|
--platform-card-overlay-deep: radial-gradient(
|
|
circle at top left,
|
|
rgba(255, 255, 255, 0.14),
|
|
transparent 30%
|
|
),
|
|
radial-gradient(circle at right, rgba(255, 205, 178, 0.14), transparent 28%),
|
|
linear-gradient(180deg, rgba(8, 10, 14, 0.22), rgba(8, 10, 14, 0.9));
|
|
--platform-recommend-runtime-fill: #030303;
|
|
--platform-recommend-runtime-border: rgba(255, 255, 255, 0.08);
|
|
--platform-recommend-runtime-shadow: inset 0 0 0 1px
|
|
rgba(255, 255, 255, 0.025),
|
|
0 18px 44px rgba(0, 0, 0, 0.18);
|
|
--platform-recommend-runtime-state-fill: #030303;
|
|
--platform-recommend-runtime-state-text: rgba(255, 255, 255, 0.92);
|
|
--puzzle-runtime-shell-fill: #020617;
|
|
--puzzle-runtime-stage-fill: radial-gradient(
|
|
circle at 50% 20%,
|
|
rgba(251, 191, 36, 0.18),
|
|
transparent 28%
|
|
),
|
|
radial-gradient(
|
|
circle at 20% 80%,
|
|
rgba(249, 115, 22, 0.16),
|
|
transparent 26%
|
|
),
|
|
linear-gradient(180deg, #2d160e, #020617);
|
|
--puzzle-runtime-grid-line: rgba(255, 255, 255, 0.04);
|
|
--puzzle-runtime-text-strong: #ffffff;
|
|
--puzzle-runtime-text-base: rgba(255, 255, 255, 0.82);
|
|
--puzzle-runtime-text-soft: rgba(255, 255, 255, 0.58);
|
|
--puzzle-runtime-surface-fill: rgba(0, 0, 0, 0.34);
|
|
--puzzle-runtime-surface-fill-strong: rgba(0, 0, 0, 0.5);
|
|
--puzzle-runtime-surface-border: rgba(255, 255, 255, 0.12);
|
|
--puzzle-runtime-board-fill: rgba(255, 255, 255, 0.08);
|
|
--puzzle-runtime-board-border: rgba(255, 255, 255, 0.16);
|
|
--puzzle-runtime-board-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
|
|
--puzzle-runtime-piece-fill: rgba(255, 255, 255, 0.12);
|
|
--puzzle-runtime-piece-border: transparent;
|
|
--puzzle-runtime-piece-empty-fill: rgba(0, 0, 0, 0.18);
|
|
--puzzle-runtime-piece-empty-text: rgba(255, 255, 255, 0.2);
|
|
--puzzle-runtime-piece-selected-fill: rgba(251, 191, 36, 0.84);
|
|
--puzzle-runtime-piece-selected-text: #020617;
|
|
--puzzle-runtime-piece-selected-border: transparent;
|
|
--puzzle-runtime-next-card-overlay: rgba(0, 0, 0, 0.1);
|
|
--puzzle-runtime-control-fill: rgba(0, 0, 0, 0.36);
|
|
--puzzle-runtime-control-hover-fill: rgba(255, 255, 255, 0.1);
|
|
--puzzle-runtime-primary-fill: #fde68a;
|
|
--puzzle-runtime-primary-text: #020617;
|
|
--puzzle-runtime-primary-shadow: 0 14px 36px rgba(251, 191, 36, 0.26);
|
|
--puzzle-runtime-accent-text: #fde68a;
|
|
--puzzle-runtime-cool-text: #cffafe;
|
|
--puzzle-runtime-danger-fill: rgba(239, 68, 68, 0.2);
|
|
--puzzle-runtime-danger-text: #fee2e2;
|
|
--puzzle-runtime-backdrop-fill: rgba(2, 6, 23, 0.68);
|
|
--puzzle-runtime-dialog-fill: radial-gradient(
|
|
circle at 14% 0%,
|
|
rgba(251, 191, 36, 0.16),
|
|
transparent 36%
|
|
),
|
|
linear-gradient(180deg, rgba(29, 17, 12, 0.96), rgba(2, 6, 23, 0.96));
|
|
--puzzle-runtime-dialog-border: rgba(251, 191, 36, 0.22);
|
|
--puzzle-runtime-table-fill: rgba(255, 255, 255, 0.06);
|
|
--puzzle-runtime-table-row-fill: rgba(251, 191, 36, 0.14);
|
|
--puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.06);
|
|
--puzzle-runtime-next-card-hover-fill: rgba(251, 191, 36, 0.1);
|
|
}
|