Roo-Code/apps/web-roo-code/src/app/globals.css at 44ff569e772a80c03df58451c024034ea2c0e872 · RooCodeInc/Roo-Code · GitHub

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--background: 0 0% 100%;
	--foreground: 0 0% 3.9%;
	--card: 0 0% 100%;
	--card-foreground: 0 0% 3.9%;
	--popover: 0 0% 100%;
	--popover-foreground: 0 0% 3.9%;
	--primary: 0 0% 9%;
	--primary-foreground: 0 0% 98%;
	--secondary: 0 0% 96.1%;
	--secondary-foreground: 0 0% 9%;
	--muted: 0 0% 96.1%;
	--muted-foreground: 0 0% 45.1%;
	--accent: 0 0% 96.1%;
	--accent-foreground: 0 0% 9%;
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 0 0% 98%;
	--border: 0 0% 89.8%;
	--input: 0 0% 89.8%;
	--ring: 0 0% 3.9%;
	--radius: 0.5rem;

	--chart-1: 0 100% 50%;
	--chart-2: 29 100% 50%;
	--chart-3: 51 100% 50%;
	--chart-4: 83 100% 50%;
	--chart-5: 115 100% 50%;
	--chart-6: 147 100% 50%;
	--chart-7: 168 100% 50%;
	--chart-8: 196 100% 50%;
	--chart-9: 224 100% 50%;
	--chart-10: 261 100% 50%;
	--chart-11: 279 100% 50%;
	--chart-12: 298 100% 50%;
	--chart-13: 324 100% 50%;
	--chart-14: 358 100% 50%;

	/* Valentine's Day Theme Colors */
	--valentine-pink: 330 81% 60%;
	--valentine-pink-light: 330 81% 75%;
	--valentine-red: 350 80% 55%;
	--valentine-rose: 340 82% 52%;
}

.dark {
	--background: 0 0% 0%;
	--foreground: 0 0% 98%;
	--card: 0 0% 3.9%;
	--card-foreground: 0 0% 98%;
	--popover: 0 0% 3.9%;
	--popover-foreground: 0 0% 98%;
	--primary: 0 0% 98%;
	--primary-foreground: 0 0% 9%;
	--secondary: 0 0% 14.9%;
	--secondary-foreground: 0 0% 98%;
	--muted: 0 0% 14.9%;
	--muted-foreground: 0 0% 63.9%;
	--accent: 0 0% 14.9%;
	--accent-foreground: 0 0% 98%;
	--destructive: 0 62.8% 30.6%;
	--destructive-foreground: 0 0% 98%;
	--border: 0 0% 14.9%;
	--input: 0 0% 14.9%;
	--ring: 0 0% 83.1%;

	/* Valentine's Day Theme Colors (Dark Mode) */
	--valentine-pink: 330 70% 50%;
	--valentine-pink-light: 330 70% 65%;
	--valentine-red: 350 70% 45%;
	--valentine-rose: 340 72% 42%;
}

@layer base {
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
	}
}

/* Valentine's Day Floating Hearts Animation */
@keyframes float-heart {
	0% {
		transform: translateY(100vh) rotate(0deg) scale(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
		transform: translateY(90vh) rotate(15deg) scale(1);
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-10vh) rotate(-15deg) scale(0.8);
		opacity: 0;
	}
}

@keyframes pulse-heart {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

@keyframes sparkle {
	0%,
	100% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
}

.floating-heart {
	animation: float-heart linear forwards;
	pointer-events: none;
}

.pulse-heart {
	animation: pulse-heart 1.5s ease-in-out infinite;
}

.sparkle {
	animation: sparkle 2s ease-in-out infinite;
}