141 lines
4.5 KiB
CSS
141 lines
4.5 KiB
CSS
|
:root {
|
||
|
|
/* 能源主题配色 - 绿色环保与科技蓝 */
|
||
|
|
--background: oklch(0.1200 0.0100 200);
|
||
|
|
--foreground: oklch(0.9800 0.0050 200);
|
||
|
|
--card: oklch(0.1800 0.0150 200);
|
||
|
|
--card-foreground: oklch(0.9500 0.0050 200);
|
||
|
|
--popover: oklch(0.2000 0.0150 200);
|
||
|
|
--popover-foreground: oklch(0.9800 0.0050 200);
|
||
|
|
|
||
|
|
/* 主色调 - 充满活力的绿色 */
|
||
|
|
--primary: oklch(0.7200 0.1800 142);
|
||
|
|
--primary-foreground: oklch(0.1200 0.0100 142);
|
||
|
|
|
||
|
|
/* 次要色调 - 科技蓝 */
|
||
|
|
--secondary: oklch(0.6800 0.1600 230);
|
||
|
|
--secondary-foreground: oklch(0.9800 0.0050 230);
|
||
|
|
|
||
|
|
/* 静音色 */
|
||
|
|
--muted: oklch(0.2500 0.0100 200);
|
||
|
|
--muted-foreground: oklch(0.7000 0.0050 200);
|
||
|
|
|
||
|
|
/* 强调色 - 太阳能金黄 */
|
||
|
|
--accent: oklch(0.8500 0.1500 85);
|
||
|
|
--accent-foreground: oklch(0.1500 0.0100 85);
|
||
|
|
|
||
|
|
/* 警告色 */
|
||
|
|
--destructive: oklch(0.6500 0.2200 28);
|
||
|
|
--destructive-foreground: oklch(0.9800 0.0050 28);
|
||
|
|
|
||
|
|
/* 边框和输入 */
|
||
|
|
--border: oklch(0.3000 0.0100 200);
|
||
|
|
--input: oklch(0.2200 0.0100 200);
|
||
|
|
--ring: oklch(0.7200 0.1800 142);
|
||
|
|
|
||
|
|
/* 图表配色 - 能源数据可视化 */
|
||
|
|
--chart-1: oklch(0.7200 0.1800 142); /* 绿色 - 可再生能源 */
|
||
|
|
--chart-2: oklch(0.6800 0.1600 230); /* 蓝色 - 水电 */
|
||
|
|
--chart-3: oklch(0.8500 0.1500 85); /* 金色 - 太阳能 */
|
||
|
|
--chart-4: oklch(0.7500 0.1400 190); /* 青色 - 风能 */
|
||
|
|
--chart-5: oklch(0.6000 0.1200 320); /* 紫色 - 核能 */
|
||
|
|
|
||
|
|
/* 字体设置 */
|
||
|
|
--font-sans: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
|
||
|
|
--font-serif: 'Merriweather', 'Georgia', serif;
|
||
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||
|
|
|
||
|
|
/* 圆角和间距 */
|
||
|
|
--radius: 0.75rem;
|
||
|
|
--spacing: 0.25rem;
|
||
|
|
|
||
|
|
/* 阴影效果 - 柔和的光晕效果 */
|
||
|
|
--shadow-2xs: 0 1px 2px 0px rgba(0, 255, 128, 0.05);
|
||
|
|
--shadow-xs: 0 1px 3px 0px rgba(0, 255, 128, 0.08);
|
||
|
|
--shadow-sm: 0 2px 4px 0px rgba(0, 255, 128, 0.10), 0 1px 2px -1px rgba(0, 255, 128, 0.08);
|
||
|
|
--shadow: 0 4px 6px -1px rgba(0, 255, 128, 0.10), 0 2px 4px -2px rgba(0, 255, 128, 0.08);
|
||
|
|
--shadow-md: 0 8px 10px -2px rgba(0, 255, 128, 0.12), 0 4px 6px -2px rgba(0, 255, 128, 0.08);
|
||
|
|
--shadow-lg: 0 12px 16px -4px rgba(0, 255, 128, 0.15), 0 6px 8px -2px rgba(0, 255, 128, 0.10);
|
||
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 255, 128, 0.18), 0 8px 10px -3px rgba(0, 255, 128, 0.12);
|
||
|
|
--shadow-2xl: 0 25px 50px -12px rgba(0, 255, 128, 0.25);
|
||
|
|
|
||
|
|
/* 动画时长 */
|
||
|
|
--transition-fast: 150ms;
|
||
|
|
--transition-base: 300ms;
|
||
|
|
--transition-slow: 500ms;
|
||
|
|
|
||
|
|
/* 渐变色 */
|
||
|
|
--gradient-primary: linear-gradient(135deg, oklch(0.7200 0.1800 142), oklch(0.6800 0.1600 230));
|
||
|
|
--gradient-hero: linear-gradient(180deg, oklch(0.1200 0.0100 200), oklch(0.1800 0.0150 200));
|
||
|
|
--gradient-card: linear-gradient(145deg, oklch(0.1800 0.0150 200), oklch(0.2200 0.0100 200));
|
||
|
|
|
||
|
|
/* 能源特色渐变 */
|
||
|
|
--gradient-solar: linear-gradient(135deg, oklch(0.8500 0.1500 85), oklch(0.9200 0.1200 65));
|
||
|
|
--gradient-wind: linear-gradient(135deg, oklch(0.7500 0.1400 190), oklch(0.8200 0.1200 180));
|
||
|
|
--gradient-hydro: linear-gradient(135deg, oklch(0.6800 0.1600 230), oklch(0.7500 0.1400 220));
|
||
|
|
|
||
|
|
/* 圆角变体 */
|
||
|
|
--radius-sm: calc(var(--radius) - 4px);
|
||
|
|
--radius-md: calc(var(--radius) - 2px);
|
||
|
|
--radius-lg: var(--radius);
|
||
|
|
--radius-xl: calc(var(--radius) + 4px);
|
||
|
|
--radius-full: 9999px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 深色主题特有样式 */
|
||
|
|
body {
|
||
|
|
background: var(--background);
|
||
|
|
color: var(--foreground);
|
||
|
|
font-family: var(--font-sans);
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 毛玻璃效果 */
|
||
|
|
.glassmorphism {
|
||
|
|
background: rgba(24, 28, 38, 0.7);
|
||
|
|
backdrop-filter: blur(20px);
|
||
|
|
-webkit-backdrop-filter: blur(20px);
|
||
|
|
border: 1px solid rgba(0, 255, 128, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 发光效果 */
|
||
|
|
.glow {
|
||
|
|
box-shadow:
|
||
|
|
0 0 20px rgba(0, 255, 128, 0.3),
|
||
|
|
0 0 40px rgba(0, 255, 128, 0.2),
|
||
|
|
0 0 60px rgba(0, 255, 128, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 能源数据展示特效 */
|
||
|
|
.energy-card {
|
||
|
|
background: var(--gradient-card);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
transition: all var(--transition-base) ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.energy-card:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
box-shadow: var(--shadow-xl);
|
||
|
|
border-color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 技能雷达图容器 */
|
||
|
|
.radar-container {
|
||
|
|
background: radial-gradient(circle at center,
|
||
|
|
rgba(0, 255, 128, 0.05) 0%,
|
||
|
|
transparent 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 项目卡片网格 */
|
||
|
|
.project-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||
|
|
gap: calc(var(--spacing) * 6);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 打字机效果文字 */
|
||
|
|
.typewriter {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
color: var(--accent);
|
||
|
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||
|
|
}
|