Skip to content

Commit bdda53e

Browse files
Sahil2004Sahil2004
committed
chore: copied old index.css to new global.css
1 parent dd0b18e commit bdda53e

File tree

1 file changed

+307
-14
lines changed
  • infrastructure/group-charter-manager/src/app

1 file changed

+307
-14
lines changed

‎infrastructure/group-charter-manager/src/app/globals.css‎

Lines changed: 307 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,319 @@
11
@import "tailwindcss";
22

3-
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
6-
}
3+
@plugin 'tailwindcss-animate';
4+
@plugin '@tailwindcss/typography';
5+
6+
@custom-variant dark (&:is(.dark *));
7+
8+
@theme {
9+
--radius-lg: var(--radius);
10+
--radius-md: calc(var(--radius) - 2px);
11+
--radius-sm: calc(var(--radius) - 4px);
712

8-
@theme inline {
913
--color-background: var(--background);
1014
--color-foreground: var(--foreground);
11-
--font-sans: var(--font-geist-sans);
12-
--font-mono: var(--font-geist-mono);
15+
16+
--color-card: var(--card);
17+
--color-card-foreground: var(--card-foreground);
18+
19+
--color-popover: var(--popover);
20+
--color-popover-foreground: var(--popover-foreground);
21+
22+
--color-primary: var(--primary);
23+
--color-primary-foreground: var(--primary-foreground);
24+
25+
--color-secondary: var(--secondary);
26+
--color-secondary-foreground: var(--secondary-foreground);
27+
28+
--color-muted: var(--muted);
29+
--color-muted-foreground: var(--muted-foreground);
30+
31+
--color-accent: var(--accent);
32+
--color-accent-foreground: var(--accent-foreground);
33+
34+
--color-destructive: var(--destructive);
35+
--color-destructive-foreground: var(--destructive-foreground);
36+
37+
--color-border: var(--border);
38+
--color-input: var(--input);
39+
--color-ring: var(--ring);
40+
41+
--color-chart-1: var(--chart-1);
42+
--color-chart-2: var(--chart-2);
43+
--color-chart-3: var(--chart-3);
44+
--color-chart-4: var(--chart-4);
45+
--color-chart-5: var(--chart-5);
46+
47+
--color-sidebar: var(--sidebar-background);
48+
--color-sidebar-foreground: var(--sidebar-foreground);
49+
--color-sidebar-primary: var(--sidebar-primary);
50+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
51+
--color-sidebar-accent: var(--sidebar-accent);
52+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
53+
--color-sidebar-border: var(--sidebar-border);
54+
--color-sidebar-ring: var(--sidebar-ring);
55+
56+
--animate-accordion-down: accordion-down 0.2s ease-out;
57+
--animate-accordion-up: accordion-up 0.2s ease-out;
58+
59+
@keyframes accordion-down {
60+
from {
61+
height: 0;
62+
}
63+
to {
64+
height: var(--radix-accordion-content-height);
65+
}
66+
}
67+
@keyframes accordion-up {
68+
from {
69+
height: var(--radix-accordion-content-height);
70+
}
71+
to {
72+
height: 0;
73+
}
74+
}
75+
}
76+
77+
/*
78+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
79+
so we've added these compatibility styles to make sure everything still
80+
looks the same as it did with Tailwind CSS v3.
81+
82+
If we ever want to remove these styles, we need to add an explicit border
83+
color utility to any element that depends on these defaults.
84+
*/
85+
@layer base {
86+
*,
87+
::after,
88+
::before,
89+
::backdrop,
90+
::file-selector-button {
91+
border-color: var(--color-gray-200, currentcolor);
92+
}
93+
}
94+
95+
@utility glass-morphism {
96+
background: rgba(255, 255, 255, 0.1);
97+
backdrop-filter: blur(10px);
98+
border: 1px solid rgba(255, 255, 255, 0.2);
99+
@media (max-width: 768px) {
100+
/* Improved hover states for touch devices */
101+
}
102+
}
103+
104+
@utility soft-shadow {
105+
box-shadow: 0 8px 32px 0 rgba(245, 158, 11, 0.1);
106+
@media (max-width: 768px) {
107+
/* Improved hover states for touch devices */
108+
}
109+
}
110+
111+
@utility hover-lift {
112+
transition: all 0.3s ease;
113+
114+
&:hover {
115+
transform: translateY(-2px);
116+
box-shadow: 0 12px 40px 0 rgba(245, 158, 11, 0.15);
117+
}
118+
@media (max-width: 768px) {
119+
/* Improved hover states for touch devices */
120+
@media (hover: none) {
121+
&:hover {
122+
transform: none;
123+
}
124+
}
125+
}
126+
}
127+
128+
@utility gradient-primary {
129+
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
130+
@media (max-width: 768px) {
131+
/* Improved hover states for touch devices */
132+
}
13133
}
14134

15-
@media (prefers-color-scheme: dark) {
135+
@utility gradient-secondary {
136+
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
137+
@media (max-width: 768px) {
138+
/* Improved hover states for touch devices */
139+
}
140+
}
141+
142+
@utility gradient-accent {
143+
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
144+
@media (max-width: 768px) {
145+
/* Improved hover states for touch devices */
146+
}
147+
}
148+
149+
@utility text-gradient {
150+
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
151+
-webkit-background-clip: text;
152+
-webkit-text-fill-color: transparent;
153+
background-clip: text;
154+
@media (max-width: 768px) {
155+
/* Improved hover states for touch devices */
156+
}
157+
}
158+
159+
@utility nav-active {
160+
background: rgba(255, 255, 255, 0.8);
161+
backdrop-filter: blur(10px);
162+
color: #1f2937;
163+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
164+
@media (max-width: 768px) {
165+
/* Improved hover states for touch devices */
166+
}
167+
}
168+
169+
@utility fade-in {
170+
animation: fadeIn 0.5s ease-in-out;
171+
@media (max-width: 768px) {
172+
/* Improved hover states for touch devices */
173+
}
174+
}
175+
176+
@utility stagger-animation {
177+
@media (max-width: 768px) {
178+
/* Improved hover states for touch devices */
179+
}
180+
animation: staggerIn 0.5s ease-out forwards;
181+
}
182+
183+
@layer utilities {
16184
:root {
17-
--background: #0a0a0a;
18-
--foreground: #ededed;
185+
--background: hsl(45, 100%, 98%);
186+
--foreground: hsl(240, 10%, 3.9%);
187+
--muted: hsl(45, 20%, 95%);
188+
--muted-foreground: hsl(240, 3.8%, 46.1%);
189+
--popover: hsl(0, 0%, 100%);
190+
--popover-foreground: hsl(240, 10%, 3.9%);
191+
--card: hsl(0, 0%, 100%);
192+
--card-foreground: hsl(240, 10%, 3.9%);
193+
--border: hsl(45, 20%, 90%);
194+
--input: hsl(45, 20%, 90%);
195+
--primary: hsl(45, 93%, 47%);
196+
--primary-foreground: hsl(240, 10%, 3.9%);
197+
--secondary: hsl(45, 20%, 95%);
198+
--secondary-foreground: hsl(240, 5.9%, 10%);
199+
--accent: hsl(45, 20%, 95%);
200+
--accent-foreground: hsl(240, 5.9%, 10%);
201+
--destructive: hsl(0, 84.2%, 60.2%);
202+
--destructive-foreground: hsl(60, 9.1%, 97.8%);
203+
--ring: hsl(45, 93%, 47%);
204+
--radius: 1rem;
205+
--chart-1: hsl(45, 93%, 47%);
206+
--chart-2: hsl(38, 92%, 50%);
207+
--chart-3: hsl(43, 89%, 38%);
208+
--chart-4: hsl(48, 89%, 60%);
209+
--chart-5: hsl(35, 89%, 60%);
210+
}
211+
212+
.dark {
213+
--background: hsl(240, 10%, 3.9%);
214+
--foreground: hsl(0, 0%, 98%);
215+
--muted: hsl(240, 3.7%, 15.9%);
216+
--muted-foreground: hsl(240, 5%, 64.9%);
217+
--popover: hsl(240, 10%, 3.9%);
218+
--popover-foreground: hsl(0, 0%, 98%);
219+
--card: hsl(240, 10%, 3.9%);
220+
--card-foreground: hsl(0, 0%, 98%);
221+
--border: hsl(240, 3.7%, 15.9%);
222+
--input: hsl(240, 3.7%, 15.9%);
223+
--primary: hsl(45, 93%, 47%);
224+
--primary-foreground: hsl(240, 10%, 3.9%);
225+
--secondary: hsl(240, 3.7%, 15.9%);
226+
--secondary-foreground: hsl(0, 0%, 98%);
227+
--accent: hsl(240, 3.7%, 15.9%);
228+
--accent-foreground: hsl(0, 0%, 98%);
229+
--destructive: hsl(0, 62.8%, 30.6%);
230+
--destructive-foreground: hsl(0, 0%, 98%);
231+
--ring: hsl(45, 93%, 47%);
19232
}
20233
}
21234

22-
body {
23-
background: var(--background);
24-
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
235+
@layer base {
236+
* {
237+
@apply border-border;
238+
}
239+
240+
body {
241+
@apply font-sans antialiased;
242+
background: linear-gradient(
243+
135deg,
244+
#fffbf0 0%,
245+
#fef3c7 50%,
246+
#fef7f7 100%
247+
);
248+
min-height: 100vh;
249+
}
250+
}
251+
252+
@layer components {
253+
@keyframes fadeIn {
254+
from {
255+
opacity: 0;
256+
transform: translateY(20px);
257+
}
258+
to {
259+
opacity: 1;
260+
transform: translateY(0);
261+
}
262+
}
263+
264+
/* Mobile Optimizations */
265+
@media (max-width: 768px) {
266+
/* Ensure touch targets are at least 44px */
267+
button,
268+
a,
269+
[role="button"] {
270+
min-height: 44px;
271+
min-width: 44px;
272+
}
273+
274+
/* Better text readability on mobile */
275+
body {
276+
font-size: 16px;
277+
line-height: 1.6;
278+
}
279+
280+
/* Prevent horizontal scroll */
281+
html,
282+
body {
283+
overflow-x: hidden;
284+
}
285+
286+
/* Better form inputs on mobile */
287+
input,
288+
textarea,
289+
select {
290+
font-size: 16px; /* Prevents zoom on iOS */
291+
}
292+
@media (hover: none) {
293+
button:hover,
294+
a:hover {
295+
transform: none;
296+
}
297+
}
298+
}
299+
300+
/* Focus styles for better accessibility */
301+
button:focus-visible,
302+
a:focus-visible,
303+
input:focus-visible,
304+
textarea:focus-visible {
305+
outline: 2px solid #a855f7;
306+
outline-offset: 2px;
307+
}
308+
309+
@keyframes staggerIn {
310+
from {
311+
opacity: 0;
312+
transform: translateY(20px);
313+
}
314+
to {
315+
opacity: 1;
316+
transform: translateY(0);
317+
}
318+
}
26319
}

0 commit comments

Comments
 (0)