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
458 lines
12 KiB
CSS
458 lines
12 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
PolyWeather — Unified Design Token System
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
@layer base {
|
|
:root {
|
|
/* ── Background Scale ── */
|
|
--color-bg-base: #0B1220;
|
|
--color-bg-raised: #111A2E;
|
|
--color-bg-overlay: #16213A;
|
|
--color-bg-card: rgba(17, 26, 46, 0.88);
|
|
--color-bg-input: rgba(22, 33, 58, 0.72);
|
|
|
|
/* ── Text Scale ── */
|
|
--color-text-primary: #E6EDF3;
|
|
--color-text-secondary: #9FB2C7;
|
|
--color-text-muted: #7D8FA3;
|
|
--color-text-disabled: #7D8FA3;
|
|
|
|
/* ── Accent Colors ── */
|
|
--color-accent-primary: #4DA3FF;
|
|
--color-accent-secondary: #6FB7FF;
|
|
--color-accent-tertiary: #93C5FD;
|
|
|
|
/* ── Signal / Semantic Colors ── */
|
|
--color-signal-success: #22C55E;
|
|
--color-signal-warning: #F59E0B;
|
|
--color-signal-danger: #EF4444;
|
|
--color-signal-info: #4DA3FF;
|
|
|
|
/* ── Risk Colors (aliased from signal) ── */
|
|
--color-risk-high: var(--color-signal-danger);
|
|
--color-risk-medium: var(--color-signal-warning);
|
|
--color-risk-low: var(--color-signal-success);
|
|
|
|
/* ── Border ── */
|
|
--color-border-default: rgba(159, 178, 199, 0.16);
|
|
--color-border-hover: rgba(77, 163, 255, 0.38);
|
|
--color-border-subtle: rgba(159, 178, 199, 0.08);
|
|
|
|
/* ── Shadow / Elevation ── */
|
|
--shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--shadow-elevation-2: 0 8px 24px rgba(0, 0, 0, 0.45);
|
|
--shadow-elevation-3: 0 20px 60px rgba(0, 0, 0, 0.6);
|
|
--shadow-glow-accent: 0 0 20px rgba(77, 163, 255, 0.24);
|
|
--shadow-glow-secondary: 0 0 20px rgba(111, 183, 255, 0.22);
|
|
|
|
/* ── Typography ── */
|
|
--font-data:
|
|
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
|
|
|
|
/* ── Spacing (4px grid) ── */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
|
|
/* ── Border Radius ── */
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ── Glass / Blur ── */
|
|
--glass-blur-1: blur(10px);
|
|
--glass-blur-2: blur(16px);
|
|
--glass-blur-3: blur(24px);
|
|
--glass-opacity-1: 0.72;
|
|
--glass-opacity-2: 0.85;
|
|
--glass-opacity-3: 0.92;
|
|
|
|
/* ── Layout ── */
|
|
--header-height: 52px;
|
|
--sidebar-width: 260px;
|
|
--panel-width: 560px;
|
|
|
|
/* ── Motion ── */
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
|
/* ── shadcn/ui Tokens (used by Tailwind @apply border-border) ── */
|
|
--background: 223 53% 4%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 223 46% 8%;
|
|
--card-foreground: 210 40% 98%;
|
|
--primary: 159 100% 44%;
|
|
--primary-foreground: 222 47% 8%;
|
|
--secondary: 224 30% 14%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--accent: 217 30% 18%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--border: 221 38% 22%;
|
|
}
|
|
|
|
/* ── Light Theme Token Overrides ── */
|
|
html.light,
|
|
html[data-theme="light"] {
|
|
--color-bg-base: #F7F9FC;
|
|
--color-bg-raised: #EEF2F7;
|
|
--color-bg-overlay: #FFFFFF;
|
|
--color-bg-card: rgba(255, 255, 255, 0.92);
|
|
--color-bg-input: rgba(238, 242, 247, 0.88);
|
|
|
|
--color-text-primary: #0F172A;
|
|
--color-text-secondary: #334155;
|
|
--color-text-muted: #475569;
|
|
--color-text-disabled: #94A3B8;
|
|
|
|
--color-accent-primary: #2563EB;
|
|
--color-accent-secondary: #3B82F6;
|
|
--color-accent-tertiary: #60A5FA;
|
|
|
|
--color-border-default: rgba(148, 163, 184, 0.24);
|
|
--color-border-hover: rgba(37, 99, 235, 0.38);
|
|
--color-border-subtle: rgba(148, 163, 184, 0.12);
|
|
|
|
--shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--shadow-elevation-2: 0 8px 24px rgba(40, 70, 110, 0.12);
|
|
--shadow-elevation-3: 0 20px 60px rgba(40, 70, 110, 0.15);
|
|
--shadow-glow-accent: 0 0 20px rgba(37, 99, 235, 0.14);
|
|
--shadow-glow-secondary: 0 0 20px rgba(96, 165, 250, 0.12);
|
|
|
|
--glass-blur-1: blur(10px);
|
|
--glass-blur-2: blur(16px);
|
|
--glass-blur-3: blur(24px);
|
|
--glass-opacity-1: 0.86;
|
|
--glass-opacity-2: 0.92;
|
|
--glass-opacity-3: 0.96;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
/* ── Skip-to-content link ── */
|
|
.skip-to-content {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 8px;
|
|
z-index: 9999;
|
|
padding: 10px 18px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-accent-primary);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
transition: top 0.18s ease;
|
|
}
|
|
|
|
.skip-to-content:focus {
|
|
top: 8px;
|
|
}
|
|
|
|
/* ── Global focus-visible ring (keyboard navigation) ── */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-accent-primary);
|
|
outline-offset: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-data);
|
|
background:
|
|
radial-gradient(
|
|
circle at 10% -10%,
|
|
rgba(0, 224, 164, 0.1),
|
|
transparent 40%
|
|
),
|
|
radial-gradient(
|
|
circle at 90% 0%,
|
|
rgba(123, 97, 255, 0.08),
|
|
transparent 36%
|
|
),
|
|
radial-gradient(
|
|
circle at 80% 100%,
|
|
rgba(0, 224, 164, 0.06),
|
|
transparent 48%
|
|
),
|
|
var(--color-bg-base);
|
|
color: var(--color-text-primary);
|
|
}
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
Map Components (Leaflet overrides + map markers)
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
@layer components {
|
|
.leaflet-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.leaflet-control-zoom a {
|
|
background: rgba(8, 12, 20, 0.85) !important;
|
|
border-color: var(--color-border-default) !important;
|
|
color: var(--color-text-primary) !important;
|
|
}
|
|
|
|
.leaflet-control-zoom a:hover {
|
|
background: rgba(13, 19, 33, 0.95) !important;
|
|
border-color: var(--color-border-hover) !important;
|
|
}
|
|
|
|
/* ── Map Pill (temperature labels on map) ── */
|
|
.map-pill {
|
|
min-width: 52px;
|
|
border-radius: var(--radius-full);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
padding: 5px 10px;
|
|
color: var(--color-text-primary);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
backdrop-filter: var(--glass-blur-1);
|
|
box-shadow:
|
|
0 2px 14px rgba(2, 6, 23, 0.45),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.map-pill.high {
|
|
background: linear-gradient(135deg, var(--color-signal-danger), #b91c1c);
|
|
}
|
|
|
|
.map-pill.medium {
|
|
background: linear-gradient(135deg, var(--color-signal-warning), #b45309);
|
|
}
|
|
|
|
.map-pill.low {
|
|
background: linear-gradient(135deg, #22C55E, #047857);
|
|
}
|
|
|
|
.map-pill.active {
|
|
transform: translateY(-2px) scale(1.05);
|
|
box-shadow:
|
|
0 8px 24px rgba(0, 224, 164, 0.35),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
/* ── Glass utility ── */
|
|
.glass {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(13, 19, 33, 0.88) 0%,
|
|
rgba(8, 12, 20, 0.75) 100%
|
|
);
|
|
backdrop-filter: var(--glass-blur-1);
|
|
}
|
|
|
|
/* ── Fade-up entrance ── */
|
|
.fade-up {
|
|
animation: fadeUp 400ms var(--transition-slow);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes pulse-pending {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
}
|
|
|
|
/* ── Reduced motion: disable all animations and transitions ── */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════
|
|
Map Marker Components (nearby stations, city bubbles)
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
@layer components {
|
|
.nearby-marker {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
background: rgba(13, 19, 33, 0.9);
|
|
color: var(--color-text-secondary);
|
|
border: 1px solid var(--color-border-subtle);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-1) var(--space-3);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
box-shadow: var(--shadow-elevation-2);
|
|
backdrop-filter: var(--glass-blur-1);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nearby-name {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.nearby-temp {
|
|
color: #fff;
|
|
font-weight: 800;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.nearby-unit {
|
|
color: var(--color-text-muted);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.wind-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
margin-left: var(--space-1);
|
|
padding-left: var(--space-2);
|
|
border-left: 1px solid var(--color-border-subtle);
|
|
color: var(--color-accent-primary);
|
|
font-size: 10px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.wind-arrow {
|
|
display: inline-block;
|
|
transform-origin: center;
|
|
}
|
|
|
|
/* ── City Marker (bubble on map) ── */
|
|
.city-marker {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.marker-bubble {
|
|
position: relative;
|
|
min-width: 46px;
|
|
padding: 5px 10px;
|
|
border-radius: var(--radius-md);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: center;
|
|
color: white;
|
|
border: 1px solid transparent;
|
|
box-shadow: var(--shadow-elevation-2);
|
|
}
|
|
|
|
.marker-bubble::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-top: 6px solid transparent;
|
|
}
|
|
|
|
.marker-bubble.risk-high {
|
|
background: linear-gradient(135deg, #dc2626, var(--color-signal-danger));
|
|
border-color: rgba(239, 68, 68, 0.5);
|
|
}
|
|
|
|
.marker-bubble.risk-high::after {
|
|
border-top-color: var(--color-signal-danger);
|
|
}
|
|
|
|
.marker-bubble.risk-medium {
|
|
background: linear-gradient(135deg, #d97706, var(--color-signal-warning));
|
|
border-color: rgba(245, 158, 11, 0.5);
|
|
}
|
|
|
|
.marker-bubble.risk-medium::after {
|
|
border-top-color: var(--color-signal-warning);
|
|
}
|
|
|
|
.marker-bubble.risk-low {
|
|
background: linear-gradient(135deg, #059669, #22C55E);
|
|
border-color: rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.marker-bubble.risk-low::after {
|
|
border-top-color: #22C55E;
|
|
}
|
|
|
|
.marker-name {
|
|
margin-top: var(--space-2);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: rgba(255, 255, 255, 0.88);
|
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.city-marker.selected .marker-bubble {
|
|
animation: markerGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ── Scrollbar ── */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(123, 97, 255, 0.2);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(123, 97, 255, 0.35);
|
|
}
|
|
}
|
|
|
|
@keyframes markerGlow {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 10px 26px rgba(0, 224, 164, 0.3);
|
|
}
|
|
}
|