ZenEcho
e85c4e9d7c
- 新增 IndexedDB 存储用于记录节点延迟历史与游戏会话统计 - 重构游戏库状态管理，支持游戏加速时长跟踪与本地存储当前选中游戏 - 优化节点管理界面样式与交互，为删除操作添加危险按钮样式 - 修复游戏库视图中的类型安全与可选 ID 处理问题 - 更新主题配色方案与 CSS 变量，改进深色模式视觉效果 - 移除已弃用的类型定义文件，统一使用新的类型导出结构 - 新增 .editorconfig 与 .gitattributes 文件以统一代码风格与行尾设置 - 调整构建配置，将自动导入类型定义移至专用目录
126 lines
3.9 KiB
CSS
126 lines
3.9 KiB
CSS
:root {
|
|
/* Primitive Colors (Semantic Base) */
|
|
--rgb-white: 255, 255, 255;
|
|
--rgb-black: 0, 0, 0;
|
|
|
|
/* Status Colors (Modern Zinc/Tailwind Palette) */
|
|
--rgb-success: 22, 163, 74; /* Green-600 */
|
|
--rgb-success-bg: 220, 252, 231; /* Green-100 */
|
|
--rgb-on-success: 255, 255, 255; /* White */
|
|
|
|
--rgb-warning: 202, 138, 4; /* Yellow-600 */
|
|
--rgb-warning-bg: 254, 249, 195; /* Yellow-100 */
|
|
--rgb-on-warning: 255, 255, 255; /* White */
|
|
|
|
--rgb-error: 225, 29, 72; /* Rose-600 */
|
|
--rgb-error-bg: 255, 228, 230; /* Rose-100 */
|
|
--rgb-on-error: 255, 255, 255; /* White */
|
|
|
|
--rgb-info: 37, 99, 235; /* Blue-600 */
|
|
--rgb-info-bg: 219, 234, 254; /* Blue-100 */
|
|
--rgb-on-info: 255, 255, 255; /* White */
|
|
|
|
/* Theme: Light (Sophisticated Modern) */
|
|
--rgb-primary: 16, 185, 129; /* Emerald-500 */
|
|
--rgb-primary-hover: 5, 150, 105; /* Emerald-600 */
|
|
--rgb-on-primary: 255, 255, 255;
|
|
|
|
--rgb-secondary: 100, 116, 139; /* Slate-500 */
|
|
--rgb-secondary-hover: 71, 85, 105; /* Slate-600 */
|
|
--rgb-on-secondary: 255, 255, 255;
|
|
|
|
/* Backgrounds - Refined Off-white */
|
|
--rgb-background: 250, 250, 251; /* Softer than pure white */
|
|
--rgb-surface: 255, 255, 255; /* Pure white for cards */
|
|
--rgb-surface-panel: 244, 245, 247; /* Panel background */
|
|
--rgb-surface-overlay: 238, 240, 243; /* Hover/Input background */
|
|
|
|
/* Text - Slate Palette for better legibility */
|
|
--rgb-on-surface: 15, 23, 42; /* Slate-900 */
|
|
--rgb-on-surface-variant: 71, 85, 105; /* Slate-600 */
|
|
--rgb-on-surface-muted: 148, 163, 184; /* Slate-400 */
|
|
|
|
/* Borders - Soft Slate */
|
|
--rgb-border: 226, 232, 240; /* Slate-200 */
|
|
--rgb-border-hover: 203, 213, 225; /* Slate-300 */
|
|
|
|
--rgb-overlay: 0, 0, 0;
|
|
|
|
/* CSS Variables for direct usage */
|
|
--color-primary: rgb(var(--rgb-primary));
|
|
--color-background: rgb(var(--rgb-background));
|
|
--color-surface: rgb(var(--rgb-surface));
|
|
--color-on-surface: rgb(var(--rgb-on-surface));
|
|
--color-border: rgb(var(--rgb-border));
|
|
}
|
|
|
|
/* Theme Colors Override */
|
|
html.theme-green {
|
|
--rgb-primary: 16, 185, 129; /* Emerald-500 */
|
|
--rgb-primary-hover: 5, 150, 105; /* Emerald-600 */
|
|
}
|
|
html.theme-blue {
|
|
--rgb-primary: 59, 130, 246; /* Blue-500 */
|
|
--rgb-primary-hover: 37, 99, 235; /* Blue-600 */
|
|
}
|
|
html.theme-purple {
|
|
--rgb-primary: 139, 92, 246; /* Violet-500 */
|
|
--rgb-primary-hover: 124, 58, 237; /* Violet-600 */
|
|
}
|
|
html.theme-orange {
|
|
--rgb-primary: 249, 115, 22; /* Orange-500 */
|
|
--rgb-primary-hover: 234, 88, 12; /* Orange-600 */
|
|
}
|
|
html.theme-red {
|
|
--rgb-primary: 239, 68, 68; /* Red-500 */
|
|
--rgb-primary-hover: 220, 38, 38; /* Red-600 */
|
|
}
|
|
|
|
html.dark {
|
|
/* Theme: Dark (Deep Midnight Noir) */
|
|
--rgb-on-primary: 255, 255, 255;
|
|
|
|
--rgb-secondary: 148, 163, 184; /* Slate-400 */
|
|
--rgb-secondary-hover: 226, 232, 240; /* Slate-200 */
|
|
--rgb-on-secondary: 15, 23, 42; /* Slate-900 */
|
|
|
|
/* Backgrounds - DEEP NOIR */
|
|
--rgb-background: 10, 10, 12; /* Midnight Black */
|
|
--rgb-surface: 18, 18, 22; /* Ebony surface */
|
|
--rgb-surface-panel: 28, 28, 32; /* Obsidian panel */
|
|
--rgb-surface-overlay: 38, 38, 44; /* Hover state */
|
|
|
|
/* Text - High Contrast for Dark Mode */
|
|
--rgb-on-surface: 248, 250, 252; /* Slate-50 */
|
|
--rgb-on-surface-variant: 148, 163, 184; /* Slate-400 */
|
|
--rgb-on-surface-muted: 71, 85, 105; /* Slate-600 */
|
|
|
|
/* Borders - Subdued Obsidian */
|
|
--rgb-border: 38, 38, 44; /* Quiet borders */
|
|
--rgb-border-hover: 63, 63, 70; /* Visible hover borders */
|
|
|
|
/* Adjusted Status Colors for Dark Mode (Vibrant but readable) */
|
|
--rgb-success: 52, 211, 153; /* Emerald-400 */
|
|
--rgb-warning: 251, 191, 36; /* Amber-400 */
|
|
--rgb-error: 251, 113, 133; /* Rose-400 */
|
|
--rgb-info: 56, 189, 248; /* Sky-400 */
|
|
}
|
|
|
|
/* Transitions */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition:
|
|
background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
|
border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
|
color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition: none !important;
|
|
}
|
|
}
|