添加设计系统CSS变量和动画定义
This commit is contained in:
bakaECC
parent
4fc632e1f7
commit
68421e20be
246
src/assets/style/design-system.css
Normal file
246
src/assets/style/design-system.css
Normal file
@ -0,0 +1,246 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
|
||||
All colors MUST be HSL.
|
||||
*/
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Premium aerospace light theme - $2M experience */
|
||||
--background: 220 25% 97%;
|
||||
--foreground: 222 47% 11%;
|
||||
|
||||
/* Glassmorphism card - slightly blue-gray white */
|
||||
--card: 220 20% 99%;
|
||||
--card-foreground: 222 47% 11%;
|
||||
--glass: 220 25% 98%;
|
||||
--glass-border: 220 30% 90%;
|
||||
|
||||
--popover: 220 20% 99%;
|
||||
--popover-foreground: 222 47% 11%;
|
||||
|
||||
/* Soft blue-gray white for components */
|
||||
--white-soft: 220 25% 99%;
|
||||
|
||||
/* Aerospace blue primary */
|
||||
--primary: 217 91% 60%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--primary-glow: 217 91% 75%;
|
||||
--primary-light: 217 91% 95%;
|
||||
|
||||
/* Tech purple secondary */
|
||||
--secondary: 262 83% 58%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
|
||||
/* Muted backgrounds */
|
||||
--muted: 217 25% 96%;
|
||||
--muted-foreground: 222 47% 45%;
|
||||
|
||||
/* Accent cyan */
|
||||
--accent: 189 94% 43%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
--border: 217 20% 90%;
|
||||
--input: 220 20% 96%;
|
||||
--ring: 217 91% 60%;
|
||||
|
||||
--radius: 1rem;
|
||||
|
||||
/* Department colors with glow variants */
|
||||
--dept-structure: 217 91% 60%;
|
||||
--dept-structure-light: 217 91% 95%;
|
||||
--dept-structure-glow: 217 91% 75%;
|
||||
|
||||
--dept-thermal: 30 90% 55%;
|
||||
--dept-thermal-light: 30 90% 95%;
|
||||
--dept-thermal-glow: 30 90% 70%;
|
||||
|
||||
--dept-control: 270 75% 60%;
|
||||
--dept-control-light: 270 75% 95%;
|
||||
--dept-control-glow: 270 75% 75%;
|
||||
|
||||
/* Premium gradients */
|
||||
--gradient-primary: linear-gradient(135deg, hsl(217 91% 60%) 0%, hsl(189 94% 50%) 100%);
|
||||
--gradient-glow: linear-gradient(180deg, hsl(217 91% 96%) 0%, hsl(220 30% 99%) 100%);
|
||||
--gradient-card: linear-gradient(135deg, hsl(217 91% 65%) 0%, hsl(189 94% 50%) 100%);
|
||||
--gradient-success: linear-gradient(135deg, hsl(142 76% 45%) 0%, hsl(142 76% 60%) 100%);
|
||||
--gradient-thermal: linear-gradient(135deg, hsl(30 90% 60%) 0%, hsl(35 90% 65%) 100%);
|
||||
--gradient-control: linear-gradient(135deg, hsl(270 75% 65%) 0%, hsl(260 75% 70%) 100%);
|
||||
--gradient-structure: linear-gradient(135deg, hsl(217 91% 65%) 0%, hsl(205 91% 70%) 100%);
|
||||
--gradient-sidebar: linear-gradient(180deg, hsl(220 30% 99%) 0%, hsl(217 30% 97%) 100%);
|
||||
--gradient-glass: linear-gradient(135deg, hsla(220 30% 100% / 0.8) 0%, hsla(220 30% 100% / 0.5) 100%);
|
||||
|
||||
/* Premium shadows with glow - Neumorphism style - lighter */
|
||||
--shadow-sm: 0 2px 8px hsla(217 20% 20% / 0.02);
|
||||
--shadow-md: 0 4px 16px hsla(217 20% 20% / 0.03);
|
||||
--shadow-lg: 0 8px 32px hsla(217 20% 20% / 0.04);
|
||||
--shadow-xl: 0 16px 48px hsla(217 20% 20% / 0.05);
|
||||
--shadow-glow: 0 0 40px hsla(217 91% 75% / 0.2);
|
||||
--shadow-glow-structure: 0 0 30px hsla(217 91% 75% / 0.15);
|
||||
--shadow-glow-thermal: 0 0 30px hsla(30 90% 70% / 0.15);
|
||||
--shadow-glow-control: 0 0 30px hsla(270 75% 75% / 0.15);
|
||||
--shadow-card: 0 4px 24px hsla(217 20% 20% / 0.03);
|
||||
--shadow-elevated: 0 8px 40px hsla(217 20% 20% / 0.05);
|
||||
--shadow-glass: 0 8px 32px hsla(217 20% 20% / 0.02), inset 0 1px 0 hsla(0 0% 100% / 0.7);
|
||||
|
||||
/* Neumorphism shadows - lighter and softer */
|
||||
--shadow-neumorphic:
|
||||
12px 12px 24px hsla(217 20% 20% / 0.03),
|
||||
-12px -12px 24px hsla(0 0% 100% / 0.9),
|
||||
inset 2px 2px 4px hsla(0 0% 100% / 0.5);
|
||||
--shadow-neumorphic-hover:
|
||||
16px 16px 32px hsla(217 20% 20% / 0.04),
|
||||
-16px -16px 32px hsla(0 0% 100% / 1),
|
||||
inset 2px 2px 6px hsla(0 0% 100% / 0.6);
|
||||
--shadow-neumorphic-inset:
|
||||
inset 6px 6px 12px hsla(217 20% 20% / 0.02),
|
||||
inset -6px -6px 12px hsla(0 0% 100% / 0.8);
|
||||
|
||||
/* Lighter neumorphic shadows for subtle effects */
|
||||
--shadow-neumorphic-light:
|
||||
8px 8px 16px hsla(217 20% 20% / 0.02),
|
||||
-8px -8px 16px hsla(0 0% 100% / 0.8),
|
||||
inset 1px 1px 2px hsla(0 0% 100% / 0.4);
|
||||
--shadow-neumorphic-raised:
|
||||
20px 20px 40px hsla(217 20% 20% / 0.05),
|
||||
-20px -20px 40px hsla(0 0% 100% / 1),
|
||||
inset 3px 3px 8px hsla(0 0% 100% / 0.7);
|
||||
|
||||
/* Enhanced glass effects */
|
||||
--backdrop-blur-sm: blur(8px);
|
||||
--backdrop-blur-md: blur(12px);
|
||||
--backdrop-blur-lg: blur(16px);
|
||||
--backdrop-blur-xl: blur(24px);
|
||||
|
||||
/* Glass border highlights */
|
||||
--glass-border-highlight: 0 1px 2px hsla(0 0% 100% / 0.8);
|
||||
--glass-internal-reflection: linear-gradient(180deg, hsla(0 0% 100% / 0.4) 0%, transparent 50%);
|
||||
|
||||
/* Liquid glass shadows - lighter */
|
||||
--shadow-liquid:
|
||||
0 8px 32px hsla(217 91% 60% / 0.06),
|
||||
0 2px 8px hsla(217 91% 60% / 0.04),
|
||||
inset 0 1px 2px hsla(0 0% 100% / 0.8);
|
||||
--shadow-liquid-hover:
|
||||
0 12px 48px hsla(217 91% 60% / 0.09),
|
||||
0 4px 12px hsla(217 91% 60% / 0.06),
|
||||
inset 0 1px 3px hsla(0 0% 100% / 0.9);
|
||||
|
||||
/* Animations - premium easing */
|
||||
--transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--transition-drawer: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
--transition-liquid: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
--transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* Borders */
|
||||
--border-glass: hsla(220 30% 90% / 0.5);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
/* Blob floating animation with subtle movement and transform */
|
||||
@keyframes blob-float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: translate(20px, -30px) scale(1.05) rotate(2deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-15px, 25px) scale(0.95) rotate(-1deg);
|
||||
}
|
||||
75% {
|
||||
transform: translate(30px, 15px) scale(1.02) rotate(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blob-float-2 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1) rotate(0deg);
|
||||
}
|
||||
33% {
|
||||
transform: translate(-25px, 20px) scale(0.98) rotate(-2deg);
|
||||
}
|
||||
66% {
|
||||
transform: translate(15px, -20px) scale(1.03) rotate(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blob-float-3 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(25px, 30px) scale(1.04) rotate(1.5deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-20px, -15px) scale(0.96) rotate(-1.5deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(-10px, 25px) scale(1.01) rotate(0.5deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(20px, -10px) scale(0.99) rotate(-0.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.animate-blob-float {
|
||||
animation: blob-float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-blob-float-2 {
|
||||
animation: blob-float-2 25s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-blob-float-3 {
|
||||
animation: blob-float-3 30s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Custom scrollbar - elegant and minimal */
|
||||
.scrollbar-custom::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.scrollbar-custom::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.scrollbar-custom::-webkit-scrollbar-thumb {
|
||||
background: hsla(217, 20%, 60%, 0.3);
|
||||
border-radius: 10px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.scrollbar-custom::-webkit-scrollbar-thumb:hover {
|
||||
background: hsla(217, 20%, 50%, 0.5);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
.scrollbar-custom {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsla(217, 20%, 60%, 0.3) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user