2569718930@qq.com
00e1845f2c
- 消除 !important 滥用：134 → 49（仅保留 Leaflet/图表所必需项），浅色主题使用 html.light 选择器获得更高优先级 - 修复 font-weight：13 个文件中所有 760/850/860/880/950 等非标准值已映射为 Inter 支持的 300–800 - 移除未加载的 Geist 字体声明，替换为 Inter - 添加全局 :focus-visible 轮廓环、跳过链接、Tab ARIA 属性（role/aria-selected） - 统一断点体系：18 → 10（480/640/768/960/1024/1200/1280/1360/1440/1680） - 创建 scan-root-styles.ts 桶文件，将 22 个 CSS Module 导入合并为 1 个 - Token 迁移：10 个文件中数百处硬编码颜色（#4DA3FF/#E6EDF3/#9FB2C7/#6B7A90）已替换为 CSS 变量 - 去重 @keyframes：spin 4→1、loading-spin 2→0、pulse-pending 已移至 globals.css - 添加统一的 empty/error/retry 状态组件 - 添加全局 prefers-reduced-motion 支持 - 修复 accent-primary 与 accent-secondary 相同值的问题 - 修复 accent-green 类错误渲染为蓝色 - 添加 CSS 渐变品牌 Logo - 移除死代码（1,697 行）：public/static/style.css + public/legacy/index.html - Dashboard.module.css 本地变量已桥接至全局 token - 提升文字对比度：#6B7A90 → #7D8FA3 Fixed: !important-134-to-49, font-weight-13-files, Geist-removal, focus-visible, breakpoints-18-to-10, CSS-module-barrel, token-migration-10-files, keyframe-dedup, dead-code-removal, accent-color-fix, contrast-improvement Scope: frontend CSS architecture, design tokens, accessibility, responsive breakpoints Tested: npx tsc --noEmit
123 lines
3.5 KiB
CSS
123 lines
3.5 KiB
CSS
/* ──────────────────────────────────────────────────────────
|
|
PolyWeather Map — Premium Dark Theme
|
|
────────────────────────────────────────────────────────── */
|
|
|
|
.root {
|
|
/* ── Palette (bridged from globals.css unified tokens) ── */
|
|
--bg-primary: var(--color-bg-base);
|
|
--bg-secondary: var(--color-bg-raised);
|
|
--bg-card: var(--color-bg-card);
|
|
--bg-glass: rgba(17, 26, 46, 0.82);
|
|
--border-glass: var(--color-border-default);
|
|
--border-subtle: var(--color-border-subtle);
|
|
|
|
/* Text */
|
|
--text-primary: var(--color-text-primary);
|
|
--text-secondary: var(--color-text-secondary);
|
|
--text-muted: var(--color-text-muted);
|
|
|
|
/* Accent Colors */
|
|
--accent-cyan: var(--color-accent-primary);
|
|
--accent-blue: var(--color-accent-secondary);
|
|
--accent-green: #22C55E;
|
|
--accent-orange: #F59E0B;
|
|
--accent-red: #EF4444;
|
|
--accent-yellow: #F59E0B;
|
|
--accent-purple: var(--color-accent-tertiary);
|
|
|
|
/* Risk colors */
|
|
--risk-high: var(--color-risk-high);
|
|
--risk-medium: var(--color-risk-medium);
|
|
--risk-low: var(--color-risk-low);
|
|
|
|
/* Spacing — aligned with global layout tokens */
|
|
--panel-width: 560px;
|
|
--header-height: 72px;
|
|
--sidebar-width: 240px;
|
|
|
|
/* Effects — using global elevation tokens */
|
|
--glass-blur: 20px;
|
|
--shadow-lg: var(--shadow-elevation-3);
|
|
--shadow-glow-cyan: var(--shadow-glow-accent);
|
|
--shadow-glow-blue: var(--shadow-glow-secondary);
|
|
--transition: all var(--transition-base);
|
|
}
|
|
|
|
/* ── Reset & Base ── */
|
|
.root :global(*),
|
|
.root :global(*::before),
|
|
.root :global(*::after) {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.root {
|
|
font-family:
|
|
"Inter",
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-image:
|
|
radial-gradient(
|
|
circle at 18% 18%,
|
|
rgba(77, 163, 255, 0.09),
|
|
transparent 24%
|
|
),
|
|
radial-gradient(
|
|
circle at 82% 12%,
|
|
rgba(111, 183, 255, 0.05),
|
|
transparent 20%
|
|
),
|
|
linear-gradient(180deg, #0B1220 0%, #07101D 100%);
|
|
}
|
|
|
|
:global(html.light) .root {
|
|
--bg-primary: #F7F9FC;
|
|
--bg-secondary: #EEF2F7;
|
|
--bg-card: #ffffff;
|
|
--bg-glass: rgba(255, 255, 255, 0.88);
|
|
--border-glass: #E2E8F0;
|
|
--border-subtle: rgba(226, 232, 240, 0.74);
|
|
--text-primary: #0F172A;
|
|
--text-secondary: #475569;
|
|
--text-muted: #64748B;
|
|
background: #F7F9FC;
|
|
color: #0F172A;
|
|
background-image:
|
|
radial-gradient(
|
|
circle at 18% 18%,
|
|
rgba(59, 130, 246, 0.1),
|
|
transparent 25%
|
|
),
|
|
radial-gradient(
|
|
circle at 82% 12%,
|
|
rgba(22, 163, 74, 0.07),
|
|
transparent 22%
|
|
),
|
|
linear-gradient(180deg, #F7F9FC 0%, #EEF2F7 100%);
|
|
}
|
|
|
|
:global(html.light) .root :global(.header),
|
|
:global(html.light) .root :global(.city-list),
|
|
:global(html.light) .root :global(.home-intelligence-panel.full),
|
|
:global(html.light) .root :global(.home-opportunity-strip),
|
|
:global(html.light) .root :global(.home-summary-card),
|
|
:global(html.light) .root :global(.opportunity-card),
|
|
:global(html.light) .root :global(.home-deb-card),
|
|
:global(html.light) .root :global(.home-card-section) {
|
|
background: rgba(255, 255, 255, 0.86);
|
|
color: #0b1726;
|
|
border-color: rgba(48, 77, 112, 0.18);
|
|
}
|
|
|
|
:global(html.light) .root :global(.map) {
|
|
background: #dbeafe;
|
|
filter: saturate(0.95) brightness(1.12);
|
|
}
|