-
Notifications
You must be signed in to change notification settings - Fork 517
Expand file tree
/
Copy pathindex.css
More file actions
99 lines (72 loc) · 2.06 KB
/
index.css
File metadata and controls
99 lines (72 loc) · 2.06 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
@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 {
--background: 220 25% 10%;
--foreground: 210 40% 98%;
--card: 220 20% 14%;
--card-foreground: 210 40% 98%;
--popover: 220 20% 14%;
--popover-foreground: 210 40% 98%;
--primary: 263 70% 50%;
--primary-foreground: 210 40% 98%;
--primary-glow: 263 70% 65%;
--secondary: 220 15% 25%;
--secondary-foreground: 210 40% 98%;
--muted: 220 15% 20%;
--muted-foreground: 215 20% 65%;
--accent: 186 70% 50%;
--accent-foreground: 210 40% 98%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 220 15% 25%;
--input: 220 15% 25%;
--ring: 263 70% 50%;
--radius: 0.75rem;
--gradient-primary: linear-gradient(135deg, hsl(263 70% 50%), hsl(186 70% 50%));
--gradient-hero: linear-gradient(180deg, hsl(220 25% 10%), hsl(220 30% 8%));
--shadow-glow: 0 0 60px hsl(263 70% 50% / 0.3);
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--background: 220 25% 10%;
--foreground: 210 40% 98%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
background: var(--gradient-hero);
background-attachment: fixed;
}
}
@layer utilities {
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-glow {
animation: glow 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes glow {
0%, 100% { box-shadow: var(--shadow-glow); }
50% { box-shadow: 0 0 80px hsl(263 70% 50% / 0.5); }
}
}