czq
parent
22065758d4
commit
53bf31e28c
@ -1,151 +1,469 @@
|
||||
@import './variables.css';
|
||||
@import './reset.css';
|
||||
|
||||
/* 全局样式 */
|
||||
/* 现代化全局样式 - 2025 UI趋势 */
|
||||
body {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
font-family: var(--font-family-base);
|
||||
line-height: var(--line-height-normal);
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
background: var(--bg-secondary);
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'rlig' 1, 'calt' 1;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 通用容器 */
|
||||
/* 现代容器设计 */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--content-max-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-lg);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.container-sm {
|
||||
max-width: var(--content-width-sm);
|
||||
}
|
||||
|
||||
.container-md {
|
||||
max-width: var(--content-width-md);
|
||||
}
|
||||
|
||||
.container-lg {
|
||||
max-width: var(--content-width-lg);
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
/* 现代卡片系统 */
|
||||
.card {
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-6);
|
||||
position: relative;
|
||||
transition: all var(--duration-200) var(--ease-out);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--primary-200), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity var(--duration-200) var(--ease-out);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--border-focus);
|
||||
}
|
||||
|
||||
.card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-interactive {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.card-elevated {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.card-elevated:hover {
|
||||
box-shadow: var(--shadow-xl);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* 玻璃态效果卡片 */
|
||||
.card-glass {
|
||||
background: var(--bg-overlay);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 现代按钮系统 */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
border: none;
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-5);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: inherit;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
transition: all var(--duration-150) var(--ease-out);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left var(--duration-300) var(--ease-out);
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: 2px solid var(--primary-300);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 主要按钮 */
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
|
||||
color: white;
|
||||
box-shadow: 0 4px 10px rgba(147, 112, 219, 0.3);
|
||||
box-shadow: var(--shadow-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(147, 112, 219, 0.4);
|
||||
background: linear-gradient(135deg, var(--primary-700), var(--primary-600));
|
||||
box-shadow: var(--shadow-primary-lg);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 次要按钮 */
|
||||
.btn-secondary {
|
||||
background-color: var(--secondary-color);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-secondary);
|
||||
box-shadow: 0 4px 10px rgba(230, 230, 250, 0.3);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #dcdcdc;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(230, 230, 250, 0.4);
|
||||
background: var(--neutral-50);
|
||||
border-color: var(--border-focus);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 幽灵按钮 */
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--neutral-100);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 按钮尺寸 */
|
||||
.btn-sm {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
font-size: var(--font-size-xs);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.btn-lg {
|
||||
padding: var(--space-4) var(--space-8);
|
||||
font-size: var(--font-size-md);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
/* 现代表单样式 */
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 100px;
|
||||
font-size: var(--font-size-lg);
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-2);
|
||||
line-height: var(--line-height-snug);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--border-radius-md);
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-family: inherit;
|
||||
line-height: var(--line-height-normal);
|
||||
transition: all var(--duration-150) var(--ease-out);
|
||||
outline: none;
|
||||
transition: border-color var(--transition-normal);
|
||||
font-size: var(--font-size-md);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--primary-light);
|
||||
border-color: var(--primary-300);
|
||||
box-shadow: 0 0 0 3px rgba(139, 77, 255, 0.1), var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) {
|
||||
.container {
|
||||
padding: var(--spacing-md);
|
||||
.form-input:hover:not(:focus) {
|
||||
border-color: var(--neutral-300);
|
||||
}
|
||||
|
||||
/* 现代徽章系统 */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background: var(--primary-100);
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: var(--success-50);
|
||||
color: var(--success-600);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: var(--warning-50);
|
||||
color: var(--warning-600);
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
background: var(--error-50);
|
||||
color: var(--error-600);
|
||||
}
|
||||
|
||||
/* 现代分割线 */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
|
||||
border: none;
|
||||
margin: var(--space-6) 0;
|
||||
}
|
||||
|
||||
.divider-vertical {
|
||||
width: 1px;
|
||||
height: auto;
|
||||
background: linear-gradient(180deg, transparent, var(--border-color), transparent);
|
||||
margin: 0 var(--space-4);
|
||||
}
|
||||
|
||||
/* 响应式网格 */
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
/* Flexbox 工具类 */
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.items-center { align-items: center; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-start { justify-content: flex-start; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
|
||||
/* 间距工具类 */
|
||||
.gap-1 { gap: var(--space-1); }
|
||||
.gap-2 { gap: var(--space-2); }
|
||||
.gap-3 { gap: var(--space-3); }
|
||||
.gap-4 { gap: var(--space-4); }
|
||||
.gap-6 { gap: var(--space-6); }
|
||||
.gap-8 { gap: var(--space-8); }
|
||||
|
||||
/* 文本工具类 */
|
||||
.text-xs { font-size: var(--font-size-xs); }
|
||||
.text-sm { font-size: var(--font-size-sm); }
|
||||
.text-base { font-size: var(--font-size-md); }
|
||||
.text-lg { font-size: var(--font-size-lg); }
|
||||
.text-xl { font-size: var(--font-size-xl); }
|
||||
.text-2xl { font-size: var(--font-size-2xl); }
|
||||
.text-3xl { font-size: var(--font-size-3xl); }
|
||||
|
||||
.font-normal { font-weight: var(--font-weight-normal); }
|
||||
.font-medium { font-weight: var(--font-weight-medium); }
|
||||
.font-semibold { font-weight: var(--font-weight-semibold); }
|
||||
.font-bold { font-weight: var(--font-weight-bold); }
|
||||
|
||||
.text-primary { color: var(--text-primary); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-light { color: var(--text-light); }
|
||||
.text-accent { color: var(--text-accent); }
|
||||
|
||||
/* 现代动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-group {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes fadeIn {
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn var(--transition-normal);
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
.animate-fade-in {
|
||||
animation: fadeIn var(--duration-300) var(--ease-out) both;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideInUp var(--duration-300) var(--ease-out) both;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scaleIn var(--duration-200) var(--ease-out) both;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
|
||||
background-size: 200px 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
/* 响应式断点 */
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(1, 1fr); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(1, 1fr); }
|
||||
|
||||
.btn {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: var(--space-4) var(--space-6);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.container {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
}
|
||||
|
||||
.float {
|
||||
animation: float 5s ease-in-out infinite;
|
||||
/* 性能优化 */
|
||||
.gpu-accelerated {
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* 辅助功能增强 */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* 焦点指示器 */
|
||||
.focus-visible {
|
||||
outline: 2px solid var(--primary-300);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 减动画偏好支持 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,57 +1,196 @@
|
||||
/* 设计系统变量 - 2025现代UI趋势 */
|
||||
|
||||
/* 新的色彩系统 - 采用更现代的渐变和深度 */
|
||||
:root {
|
||||
/* 主题颜色 */
|
||||
--primary-color: #9370DB;
|
||||
--primary-light: #b19cd9;
|
||||
--primary-dark: #8a63d2;
|
||||
--secondary-color: #e6e6fa;
|
||||
|
||||
/* 文本颜色 */
|
||||
--text-primary: #333333;
|
||||
--text-secondary: #666666;
|
||||
--text-light: #999999;
|
||||
|
||||
/* 背景颜色 */
|
||||
/* 主色调 - 渐变式品牌色 */
|
||||
--primary-50: #faf7ff;
|
||||
--primary-100: #f3eeff;
|
||||
--primary-200: #e9ddff;
|
||||
--primary-300: #d4bfff;
|
||||
--primary-400: #bc96ff;
|
||||
--primary-500: #9c69ff;
|
||||
--primary-600: #8b4dff;
|
||||
--primary-700: #7b3fff;
|
||||
--primary-800: #6236c7;
|
||||
--primary-900: #4c2a99;
|
||||
|
||||
/* 辅助色 - 现代中性色调 */
|
||||
--neutral-25: #fcfcfc;
|
||||
--neutral-50: #fafafa;
|
||||
--neutral-100: #f5f5f5;
|
||||
--neutral-200: #e5e5e5;
|
||||
--neutral-300: #d4d4d4;
|
||||
--neutral-400: #a3a3a3;
|
||||
--neutral-500: #737373;
|
||||
--neutral-600: #525252;
|
||||
--neutral-700: #404040;
|
||||
--neutral-800: #262626;
|
||||
--neutral-900: #171717;
|
||||
|
||||
/* 成功/错误/警告色 - 柔和现代 */
|
||||
--success-50: #f0fdf4;
|
||||
--success-500: #22c55e;
|
||||
--success-600: #16a34a;
|
||||
|
||||
--error-50: #fef2f2;
|
||||
--error-500: #ef4444;
|
||||
--error-600: #dc2626;
|
||||
|
||||
--warning-50: #fffbeb;
|
||||
--warning-500: #f59e0b;
|
||||
--warning-600: #d97706;
|
||||
|
||||
/* 主要变量映射 */
|
||||
--primary-color: var(--primary-600);
|
||||
--primary-light: var(--primary-500);
|
||||
--primary-dark: var(--primary-700);
|
||||
--secondary-color: var(--neutral-100);
|
||||
|
||||
/* 背景色 - 层次化设计 */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f9f7ff;
|
||||
--bg-gradient: linear-gradient(200deg, #f3e7e9, #e3eeff);
|
||||
|
||||
/* 边框颜色 */
|
||||
--border-color: #e6e6fa;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
--shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* 圆角 */
|
||||
--border-radius-sm: 5px;
|
||||
--border-radius-md: 10px;
|
||||
--border-radius-lg: 20px;
|
||||
--border-radius-full: 50%;
|
||||
|
||||
/* 间距 */
|
||||
--spacing-xs: 5px;
|
||||
--spacing-sm: 10px;
|
||||
--spacing-md: 15px;
|
||||
--spacing-lg: 20px;
|
||||
--spacing-xl: 30px;
|
||||
|
||||
/* 字体大小 */
|
||||
--bg-secondary: var(--neutral-50);
|
||||
--bg-elevated: #ffffff;
|
||||
--bg-overlay: rgba(255, 255, 255, 0.95);
|
||||
|
||||
/* 文字颜色 */
|
||||
--text-primary: var(--neutral-900);
|
||||
--text-secondary: var(--neutral-700);
|
||||
--text-light: var(--neutral-500);
|
||||
--text-accent: var(--primary-600);
|
||||
|
||||
/* 边框 */
|
||||
--border-color: var(--neutral-200);
|
||||
--border-light: var(--neutral-100);
|
||||
--border-focus: var(--primary-300);
|
||||
|
||||
/* 现代化圆角系统 */
|
||||
--radius-xs: 4px;
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 兼容旧变量 */
|
||||
--border-radius-sm: var(--radius-sm);
|
||||
--border-radius-md: var(--radius-md);
|
||||
--border-radius-lg: var(--radius-lg);
|
||||
--border-radius-full: var(--radius-full);
|
||||
|
||||
/* 现代化间距系统 */
|
||||
--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;
|
||||
--space-16: 64px;
|
||||
--space-20: 80px;
|
||||
|
||||
/* 兼容旧间距变量 */
|
||||
--spacing-xs: var(--space-1);
|
||||
--spacing-sm: var(--space-3);
|
||||
--spacing-md: var(--space-4);
|
||||
--spacing-lg: var(--space-6);
|
||||
--spacing-xl: var(--space-8);
|
||||
--spacing-xxl: var(--space-12);
|
||||
|
||||
/* 新的阴影系统 - 更现代的层次感 */
|
||||
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* 彩色阴影 - 品牌特色 */
|
||||
--shadow-primary: 0 10px 15px -3px rgba(156, 105, 255, 0.1), 0 4px 6px -4px rgba(156, 105, 255, 0.1);
|
||||
--shadow-primary-lg: 0 20px 25px -5px rgba(156, 105, 255, 0.1), 0 8px 10px -6px rgba(156, 105, 255, 0.1);
|
||||
|
||||
/* 字体系统 */
|
||||
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-md: 1rem;
|
||||
--font-size-lg: 1.25rem;
|
||||
--font-size-xl: 1.5rem;
|
||||
--font-size-xxl: 2rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-size-4xl: 2.25rem;
|
||||
--font-size-xxl: var(--font-size-3xl);
|
||||
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* 过渡 */
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
/* 线高 */
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-snug: 1.375;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.625;
|
||||
|
||||
/* 动画与过渡 */
|
||||
--duration-75: 75ms;
|
||||
--duration-100: 100ms;
|
||||
--duration-150: 150ms;
|
||||
--duration-200: 200ms;
|
||||
--duration-300: 300ms;
|
||||
--duration-500: 500ms;
|
||||
|
||||
--ease-linear: linear;
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* 兼容旧变量 */
|
||||
--transition-fast: var(--duration-150) var(--ease-out);
|
||||
--transition-normal: var(--duration-200) var(--ease-in-out);
|
||||
--transition-slow: var(--duration-300) var(--ease-in-out);
|
||||
|
||||
/* 布局 */
|
||||
--sidebar-width: 84px;
|
||||
--sidebar-width-expanded: 300px;
|
||||
--header-height: 60px;
|
||||
--content-max-width: 1280px;
|
||||
--content-max-width: 1200px;
|
||||
--content-width-sm: 640px;
|
||||
--content-width-md: 768px;
|
||||
--content-width-lg: 1024px;
|
||||
|
||||
/* Z-index 层级 */
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1020;
|
||||
--z-fixed: 1030;
|
||||
--z-modal-backdrop: 1040;
|
||||
--z-modal: 1050;
|
||||
--z-popover: 1060;
|
||||
--z-tooltip: 1070;
|
||||
--z-toast: 1080;
|
||||
}
|
||||
|
||||
/* 暗色模式变量 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: var(--neutral-900);
|
||||
--bg-secondary: var(--neutral-800);
|
||||
--bg-elevated: var(--neutral-800);
|
||||
--bg-overlay: rgba(23, 23, 23, 0.95);
|
||||
|
||||
--text-primary: var(--neutral-100);
|
||||
--text-secondary: var(--neutral-300);
|
||||
--text-light: var(--neutral-400);
|
||||
|
||||
--border-color: var(--neutral-700);
|
||||
--border-light: var(--neutral-800);
|
||||
|
||||
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue