1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ : root {
6
+ --foreground-rgb : 0 , 0 , 0 ;
7
+ --background-start-rgb : 214 , 219 , 220 ;
8
+ --background-end-rgb : 255 , 255 , 255 ;
9
+ }
10
+
11
+ @media (prefers-color-scheme : dark) {
12
+ : root {
13
+ --foreground-rgb : 255 , 255 , 255 ;
14
+ --background-start-rgb : 0 , 0 , 0 ;
15
+ --background-end-rgb : 0 , 0 , 0 ;
16
+ }
17
+ }
18
+
19
+ @layer base {
20
+ : root {
21
+ --background : 0 0% 100% ;
22
+ --foreground : 0 0% 3.9% ;
23
+ --card : 0 0% 100% ;
24
+ --card-foreground : 0 0% 3.9% ;
25
+ --popover : 0 0% 100% ;
26
+ --popover-foreground : 0 0% 3.9% ;
27
+ --primary : 221.2 83.2% 53.3% ;
28
+ --primary-foreground : 210 40% 98% ;
29
+ --secondary : 210 40% 96.1% ;
30
+ --secondary-foreground : 222.2 47.4% 11.2% ;
31
+ --muted : 210 40% 96.1% ;
32
+ --muted-foreground : 215.4 16.3% 46.9% ;
33
+ --accent : 210 40% 96.1% ;
34
+ --accent-foreground : 222.2 47.4% 11.2% ;
35
+ --destructive : 0 84.2% 60.2% ;
36
+ --destructive-foreground : 210 40% 98% ;
37
+ --border : 214.3 31.8% 91.4% ;
38
+ --input : 214.3 31.8% 91.4% ;
39
+ --ring : 221.2 83.2% 53.3% ;
40
+ --radius : 0.75rem ;
41
+ }
42
+
43
+ .dark {
44
+ --background : 222.2 84% 4.9% ;
45
+ --foreground : 210 40% 98% ;
46
+ --card : 222.2 84% 4.9% ;
47
+ --card-foreground : 210 40% 98% ;
48
+ --popover : 222.2 84% 4.9% ;
49
+ --popover-foreground : 210 40% 98% ;
50
+ --primary : 217.2 91.2% 59.8% ;
51
+ --primary-foreground : 222.2 47.4% 11.2% ;
52
+ --secondary : 217.2 32.6% 17.5% ;
53
+ --secondary-foreground : 210 40% 98% ;
54
+ --muted : 217.2 32.6% 17.5% ;
55
+ --muted-foreground : 215 20.2% 65.1% ;
56
+ --accent : 217.2 32.6% 17.5% ;
57
+ --accent-foreground : 210 40% 98% ;
58
+ --destructive : 0 62.8% 30.6% ;
59
+ --destructive-foreground : 210 40% 98% ;
60
+ --border : 217.2 32.6% 17.5% ;
61
+ --input : 217.2 32.6% 17.5% ;
62
+ --ring : 224.3 76.3% 48% ;
63
+ }
64
+ }
65
+
66
+ @layer base {
67
+ * {
68
+ @apply border-border;
69
+ }
70
+ body {
71
+ @apply bg-background text-foreground antialiased;
72
+ }
73
+ }
74
+
75
+ @keyframes fade-in {
76
+ from {
77
+ opacity : 0 ;
78
+ transform : translateY (-20px );
79
+ }
80
+ to {
81
+ opacity : 1 ;
82
+ transform : translateY (0 );
83
+ }
84
+ }
85
+
86
+ @keyframes slide-in {
87
+ from {
88
+ opacity : 0 ;
89
+ transform : translateX (-20px );
90
+ }
91
+ to {
92
+ opacity : 1 ;
93
+ transform : translateX (0 );
94
+ }
95
+ }
96
+
97
+ @keyframes scale-in {
98
+ from {
99
+ opacity : 0 ;
100
+ transform : scale (0.95 );
101
+ }
102
+ to {
103
+ opacity : 1 ;
104
+ transform : scale (1 );
105
+ }
106
+ }
107
+
108
+ .animate-fade-in {
109
+ animation : fade-in 0.6s cubic-bezier (0.4 , 0 , 0.2 , 1 );
110
+ }
111
+
112
+ .animate-slide-in {
113
+ animation : slide-in 0.5s cubic-bezier (0.4 , 0 , 0.2 , 1 );
114
+ }
115
+
116
+ .animate-scale-in {
117
+ animation : scale-in 0.5s cubic-bezier (0.4 , 0 , 0.2 , 1 );
118
+ }
119
+
120
+ .bg-grid-slate-100 {
121
+ background-image : url ("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.04)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e" );
122
+ }
123
+
124
+ .bg-grid-slate-700 {
125
+ background-image : url ("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e" );
126
+ }
0 commit comments