488 lines
15 KiB
CSS
488 lines
15 KiB
CSS
/**
|
||
* 毛玻璃UI全局样式配置 - 基础设施
|
||
* @author 阿瑞
|
||
* @description 优化后的基础样式配置，解决重复定义和层级关系问题
|
||
* @version 2.3.1
|
||
* @date 2024
|
||
* @updated 重构变量层级，移除重复定义，优化性能和代码组织
|
||
*
|
||
* 架构说明：
|
||
* 1. CSS变量系统：基础常量 → 主题变量 → 应用样式
|
||
* 2. 性能优化：统一过渡、避免重复、合理层叠
|
||
* 3. 主题系统：支持明亮/暗黑模式无缝切换
|
||
* 4. 毛玻璃效果：backdrop-filter + rgba 实现现代UI
|
||
*/
|
||
|
||
/* ==================== Tailwind CSS导入 ==================== */
|
||
@import "tailwindcss";
|
||
|
||
/* ==================== 防闪烁优化 + 分层过渡策略 ==================== */
|
||
/* 关键代码行注释：防止SSR水合过程中的主题闪烁，采用分层过渡策略 */
|
||
/* 注意：主要的背景设置已移动到下方的html选择器中，这里仅保留基础设置 */
|
||
|
||
/* ==================== 全局变量系统 ==================== */
|
||
/* 关键代码行注释：统一在一个:root中定义所有全局变量，提高可维护性 */
|
||
:root {
|
||
/* 过渡效果系统 - 关键代码行注释：统一过渡配置，避免重复定义 */
|
||
--transition-fast: color 0.3s ease;
|
||
--transition-medium: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
|
||
--transition-slow: background-color 0.4s ease, background-image 0.6s ease, color 0.3s ease;
|
||
--transition-transform: transform 0.2s ease;
|
||
--transition-all: all 0.3s ease;
|
||
|
||
/* 字体系统 - 关键代码行注释：统一字体变量，移除冗余定义 */
|
||
--font-primary: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
--font-mono: 'Geist Mono', 'SF Mono', ui-monospace, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||
|
||
/* 基础色彩常量 - 关键代码行注释：定义核心颜色，便于维护和一致性 */
|
||
--color-light-bg: #f6f9fc;
|
||
--color-light-secondary: #eef4ff;
|
||
--color-dark-bg: #0a1128;
|
||
--color-dark-secondary: #1a2332;
|
||
--color-white: #ffffff;
|
||
--color-black: #0a1128;
|
||
|
||
/* 透明度常量 - 关键代码行注释：标准化透明度值，保持视觉一致性 */
|
||
--alpha-high: 0.95;
|
||
--alpha-medium: 0.85;
|
||
--alpha-low: 0.65;
|
||
--alpha-minimal: 0.45;
|
||
|
||
/* 布局常量 - 关键代码行注释：定义常用的布局数值 */
|
||
--border-radius-sm: 8px;
|
||
--border-radius-md: 12px;
|
||
--border-radius-lg: 16px;
|
||
--border-radius-xl: 20px;
|
||
--border-radius-2xl: 24px;
|
||
|
||
/* 阴影系统 - 关键代码行注释：分级阴影系统，提供层次感 */
|
||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||
--shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
/* ==================== 明亮主题变量系统 ==================== */
|
||
.light {
|
||
/* 背景色系统 */
|
||
--bg-primary: var(--color-light-bg);
|
||
--bg-secondary: var(--color-light-secondary);
|
||
--bg-dark: var(--color-dark-bg);
|
||
|
||
/* 文本色系统 */
|
||
--text-primary: var(--color-black);
|
||
--text-secondary: rgba(10, 17, 40, var(--alpha-medium));
|
||
--text-tertiary: rgba(10, 17, 40, var(--alpha-low));
|
||
--text-quaternary: rgba(10, 17, 40, var(--alpha-minimal));
|
||
--text-light: var(--color-white);
|
||
|
||
/* 现代强调色系统 */
|
||
--color-primary-blue: #2d7ff9;
|
||
--color-primary-purple: #8e6bff;
|
||
--color-primary-cyan: #06d7b2;
|
||
--color-primary-pink: #ff66c2;
|
||
--color-primary-orange: #ff9640;
|
||
|
||
/* 毛玻璃效果参数 */
|
||
--glass-bg: rgba(255, 255, 255, 0.25);
|
||
--glass-border: rgba(255, 255, 255, 0.25);
|
||
--glass-highlight: rgba(255, 255, 255, 0.3);
|
||
--glass-shadow: rgba(31, 38, 135, 0.15);
|
||
|
||
/* 背景图片定义 - 关键代码行注释：将背景图片作为变量定义，而不是直接应用 */
|
||
--bg-gradient:
|
||
radial-gradient(circle at 80% 10%, rgba(142, 107, 255, 0.12) 0%, transparent 50%),
|
||
radial-gradient(circle at 20% 30%, rgba(6, 215, 178, 0.12) 0%, transparent 50%),
|
||
radial-gradient(circle at 90% 80%, rgba(45, 127, 249, 0.12) 0%, transparent 50%),
|
||
radial-gradient(circle at 10% 90%, rgba(255, 102, 194, 0.12) 0%, transparent 50%);
|
||
}
|
||
|
||
/* ==================== 暗黑主题变量系统 ==================== */
|
||
.dark {
|
||
/* 背景色系统 */
|
||
--bg-primary: var(--color-dark-bg);
|
||
--bg-secondary: var(--color-dark-secondary);
|
||
--bg-dark: var(--color-dark-bg);
|
||
|
||
/* 文本色系统 */
|
||
--text-primary: rgba(255, 255, 255, var(--alpha-high));
|
||
--text-secondary: rgba(255, 255, 255, 0.8);
|
||
--text-tertiary: rgba(255, 255, 255, 0.6);
|
||
--text-quaternary: rgba(255, 255, 255, 0.4);
|
||
--text-light: var(--color-white);
|
||
|
||
/* 暗黑主题强调色 */
|
||
--color-primary-blue: #4d8fff;
|
||
--color-primary-purple: #a785ff;
|
||
--color-primary-cyan: #26e1c2;
|
||
--color-primary-pink: #ff85d1;
|
||
--color-primary-orange: #ffb366;
|
||
|
||
/* 暗黑主题毛玻璃效果参数 */
|
||
--glass-bg: rgba(16, 22, 58, 0.25);
|
||
--glass-border: rgba(255, 255, 255, 0.08);
|
||
--glass-highlight: rgba(255, 255, 255, 0.15);
|
||
--glass-shadow: rgba(0, 0, 10, 0.2);
|
||
|
||
/* 背景图片定义 - 关键代码行注释：暗黑主题的背景图片变量 */
|
||
--bg-gradient:
|
||
radial-gradient(circle at 80% 10%, rgba(142, 107, 255, 0.18) 0%, transparent 45%),
|
||
radial-gradient(circle at 20% 30%, rgba(6, 215, 178, 0.15) 0%, transparent 45%),
|
||
radial-gradient(circle at 90% 80%, rgba(45, 127, 249, 0.18) 0%, transparent 45%),
|
||
radial-gradient(circle at 10% 90%, rgba(255, 102, 194, 0.15) 0%, transparent 45%);
|
||
}
|
||
|
||
/* ==================== 基础样式重置 ==================== */
|
||
* {
|
||
box-sizing: border-box;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
max-width: 100vw;
|
||
/*overflow-x: hidden;*/
|
||
font-family: var(--font-primary);
|
||
transition: var(--transition-slow);
|
||
}
|
||
|
||
/* 关键代码行注释：将背景设置在html元素上，确保背景完全固定不随滚动 */
|
||
html {
|
||
/* 关键代码行注释：使用变量方式应用背景，确保背景图片能正确显示 */
|
||
background-color: var(--bg-primary);
|
||
background-image: var(--bg-gradient);
|
||
background-attachment: fixed;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
transition: var(--transition-slow);
|
||
}
|
||
|
||
body {
|
||
min-height: 100vh;
|
||
line-height: 1.6;
|
||
position: relative;
|
||
font-weight: 400;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
/* 关键代码行注释：body元素只设置文字颜色，不设置背景 */
|
||
color: var(--text-primary);
|
||
/* 关键代码行注释：移除body的背景设置，让html的背景透过 */
|
||
background: transparent;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 关键代码行注释：优化字体设置选择器，分类提高效率 */
|
||
/* 基础文本元素 */
|
||
h1, h2, h3, h4, h5, h6, p, span, div, button, input, textarea, select, label {
|
||
font-family: var(--font-primary);
|
||
}
|
||
|
||
|
||
|
||
/* ==================== 动画效果定义 ==================== */
|
||
/* 关键代码行注释：优化动画性能，使用transform和opacity以触发硬件加速 */
|
||
@keyframes float {
|
||
0% { transform: translate3d(0, 0, 0) rotate(0); }
|
||
50% { transform: translate3d(8px, -8px, 0) rotate(2deg); }
|
||
100% { transform: translate3d(0, 0, 0) rotate(0); }
|
||
}
|
||
|
||
@keyframes blob {
|
||
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.2; }
|
||
33% { transform: translate3d(15px, -15px, 0) scale(1.1); opacity: 0.25; }
|
||
66% { transform: translate3d(-10px, 10px, 0) scale(0.95); opacity: 0.18; }
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from { opacity: 0; transform: translate3d(0, 30px, 0); }
|
||
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 0.95; transform: scale3d(1, 1, 1); }
|
||
50% { opacity: 1; transform: scale3d(1.02, 1.02, 1); }
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { background-position: -200px 0; }
|
||
100% { background-position: calc(200px + 100%) 0; }
|
||
}
|
||
|
||
@keyframes bounce-in {
|
||
0% { transform: scale3d(0.8, 0.8, 1); opacity: 0; }
|
||
70% { transform: scale3d(1.05, 1.05, 1); opacity: 1; }
|
||
100% { transform: scale3d(1, 1, 1); }
|
||
}
|
||
|
||
@keyframes themeRipple {
|
||
0% { transform: scale3d(0, 0, 1); opacity: 0.4; }
|
||
100% { transform: scale3d(2.5, 2.5, 1); opacity: 0; }
|
||
}
|
||
|
||
/* ==================== 动画应用类 ==================== */
|
||
/* 关键代码行注释：为动画元素添加will-change属性以优化性能 */
|
||
.animate-float {
|
||
animation: float 8s infinite ease-in-out;
|
||
will-change: transform;
|
||
}
|
||
|
||
.animate-blob {
|
||
animation: blob 18s infinite ease-in-out alternate;
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.animate-pulse-slow {
|
||
animation: pulse 5s infinite ease-in-out;
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.animate-bounce-in {
|
||
animation: bounce-in 0.3s cubic-bezier(0.38, 1.6, 0.55, 0.9) forwards;
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.fade-in-up {
|
||
animation: fadeInUp 0.6s ease-out;
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.shimmer-effect {
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
background-size: 200px 100%;
|
||
animation: shimmer 2s infinite;
|
||
will-change: background-position;
|
||
}
|
||
|
||
/* 动画延迟工具类 - 关键代码行注释：提供标准化的动画延迟选项 */
|
||
.animation-delay-2000 { animation-delay: 2s; }
|
||
.animation-delay-4000 { animation-delay: 4s; }
|
||
.animation-delay-6000 { animation-delay: 6s; }
|
||
|
||
/* ==================== 通用毛玻璃工具类 ==================== */
|
||
/* 关键代码行注释：使用统一的变量系统，提高一致性和可维护性 */
|
||
.glass-card {
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid var(--glass-border);
|
||
box-shadow: 0 8px 32px 0 var(--glass-shadow);
|
||
border-radius: var(--border-radius-lg);
|
||
transition: var(--transition-all);
|
||
/* 关键代码行注释：添加性能优化属性 */
|
||
will-change: transform, box-shadow;
|
||
}
|
||
|
||
.glass-card:hover {
|
||
transform: translate3d(0, -2px, 0);
|
||
box-shadow: 0 12px 48px 0 var(--glass-shadow);
|
||
}
|
||
|
||
.glass-nav {
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--glass-border);
|
||
box-shadow: 0 4px 20px 0 var(--glass-shadow);
|
||
transition: var(--transition-medium);
|
||
}
|
||
|
||
.glass-button {
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border: 1px solid var(--glass-border);
|
||
border-radius: var(--border-radius-md);
|
||
transition: var(--transition-all);
|
||
will-change: transform, background-color;
|
||
}
|
||
|
||
.glass-button:hover {
|
||
background: var(--glass-highlight);
|
||
box-shadow: 0 4px 16px var(--glass-shadow);
|
||
transform: translate3d(0, -1px, 0);
|
||
}
|
||
|
||
/* ==================== 应用容器 ==================== */
|
||
.app-container {
|
||
min-height: 100vh;
|
||
/* 关键代码行注释：设置为透明背景，让body的背景图片能够正确显示 */
|
||
background: transparent;
|
||
font-family: var(--font-primary);
|
||
transition: var(--transition-slow);
|
||
}
|
||
|
||
/* ==================== 主题切换优化 ==================== */
|
||
/* 关键代码行注释：简化的主题切换动画，减少重复定义 */
|
||
.theme-switch-ripple {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.theme-switch-ripple::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
border-radius: 50%;
|
||
background: var(--color-primary-blue);
|
||
transform: translate(-50%, -50%);
|
||
transition: opacity 0.2s ease-out;
|
||
z-index: -1;
|
||
opacity: 0;
|
||
}
|
||
|
||
.theme-switch-ripple:active::before {
|
||
width: 120px;
|
||
height: 120px;
|
||
opacity: 0.1;
|
||
animation: themeRipple 0.3s ease-out;
|
||
}
|
||
|
||
/* ==================== 自定义滚动条 ==================== */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--glass-border);
|
||
border-radius: 4px;
|
||
transition: var(--transition-all);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--color-primary-blue);
|
||
}
|
||
|
||
.dark ::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* ==================== 统一过渡效果应用 ==================== */
|
||
/* 关键代码行注释：统一过渡效果，避免重复定义 */
|
||
.ant-btn, .ant-card, .ant-input, .ant-select, .ant-table, .ant-menu, .ant-modal, .ant-drawer, .ant-typography,
|
||
h1, h2, h3, h4, h5, h6, p, span {
|
||
transition: var(--transition-medium), var(--transition-transform);
|
||
}
|
||
|
||
/* ==================== 响应式断点 ==================== */
|
||
/* 关键代码行注释：遵循移动优先原则，使用统一的断点系统 */
|
||
@media (max-width: 768px) {
|
||
body {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.glass-card {
|
||
border-radius: var(--border-radius-md);
|
||
}
|
||
|
||
/* 关键代码行注释：移动设备上减少动画复杂度，提升性能 */
|
||
.animate-float,
|
||
.animate-blob {
|
||
animation-duration: 12s; /* 减慢动画速度 */
|
||
}
|
||
}
|
||
|
||
/* 关键代码行注释：超小屏幕优化 */
|
||
@media (max-width: 480px) {
|
||
body {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.glass-card {
|
||
border-radius: var(--border-radius-sm);
|
||
}
|
||
}
|
||
|
||
/* ==================== 动画减少设置 ==================== */
|
||
/* 关键代码行注释：尊重用户的无障碍偏好设置 */
|
||
@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;
|
||
}
|
||
|
||
/* 关键代码行注释：完全禁用装饰性动画 */
|
||
.animate-float,
|
||
.animate-blob,
|
||
.animate-pulse-slow,
|
||
.shimmer-effect,
|
||
.theme-switch-ripple::before {
|
||
animation: none !important;
|
||
}
|
||
|
||
/* 关键代码行注释：保留关键的无障碍动画 */
|
||
.fade-in-up,
|
||
.animate-bounce-in {
|
||
animation-duration: 0.2s !important;
|
||
}
|
||
}
|
||
|
||
/* ==================== 性能优化和最佳实践 ==================== */
|
||
/* 关键代码行注释：为可能触发复合层的元素添加优化 */
|
||
.glass-card,
|
||
.glass-nav,
|
||
.glass-button,
|
||
.animate-float,
|
||
.animate-blob {
|
||
/* 强制创建新的复合层，避免重绘 */
|
||
transform: translateZ(0);
|
||
/* 优化文本渲染 */
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* 关键代码行注释：高对比度模式适配 */
|
||
@media (prefers-contrast: high) {
|
||
.glass-card,
|
||
.glass-nav,
|
||
.glass-button {
|
||
border-width: 2px;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
background: var(--bg-primary);
|
||
}
|
||
}
|
||
|
||
/* 关键代码行注释：暗色模式偏好检测（作为 .dark 类的后备） */
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not(.light) {
|
||
color-scheme: dark;
|
||
}
|
||
}
|
||
|
||
/* 关键代码行注释：打印样式优化 */
|
||
@media print {
|
||
.glass-card,
|
||
.glass-nav,
|
||
.glass-button {
|
||
background: white !important;
|
||
border: 1px solid #ccc !important;
|
||
box-shadow: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
|
||
.animate-float,
|
||
.animate-blob,
|
||
.animate-pulse-slow,
|
||
.shimmer-effect {
|
||
animation: none !important;
|
||
}
|
||
} |