Skip to content

Commit 873dc0b

Browse files
LordfirespeedLordfirespeed
committed
fiddle with globals.css 
1 parent cb14a73 commit 873dc0b

File tree

1 file changed

+80
-148
lines changed

1 file changed

+80
-148
lines changed

‎client/src/styles/globals.css

Lines changed: 80 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -6,187 +6,119 @@
66

77
@custom-variant dark (&:is(.dark *));
88

9-
@theme {
10-
--background-image-platinum-gradient: linear-gradient(99deg, #c5baaa 10.22%, #e4e0d9 51.14%, #8e7fef 95.61%);
11-
--background-image-gold-gradient: linear-gradient(99deg, #825f2a 10.22%, #f6ddb8 51.14%, #9e773d 95.61%);
12-
--background-image-silver-gradient: linear-gradient(
13-
99deg,
14-
#898277 10.22%,
15-
#fbf2e5 48.47%,
16-
#f6ddb8 51.14%,
17-
#85a5b7 92.94%,
18-
#9e773d 95.61%
19-
);
20-
21-
--color-border: hsl(var(--border));
22-
--color-input: hsl(var(--input));
23-
--color-ring: hsl(var(--ring));
24-
--color-background: hsl(var(--background));
25-
--color-foreground: hsl(var(--foreground));
26-
27-
--color-primary: hsl(var(--primary));
28-
--color-primary-foreground: hsl(var(--primary-foreground));
9+
:root {
10+
--background: hsl(0 0% 100%);
11+
--foreground: hsl(222.2 84% 4.9%);
2912

30-
--color-secondary: hsl(var(--secondary));
31-
--color-secondary-foreground: hsl(var(--secondary-foreground));
13+
--card: hsl(0 0% 100%);
14+
--card-foreground: hsl(222.2 84% 4.9%);
3215

33-
--color-destructive: hsl(var(--destructive));
34-
--color-destructive-foreground: hsl(var(--destructive-foreground));
16+
--popover: hsl(0 0% 100%);
17+
--popover-foreground: hsl(222.2 84% 4.9%);
3518

36-
--color-success: hsl(var(--success));
37-
--color-success-foreground: hsl(var(--success-foreground));
19+
--primary: hsl(222.2 47.4% 11.2%);
20+
--primary-foreground: hsl(210 40% 98%);
3821

39-
--color-muted: hsl(var(--muted));
40-
--color-muted-foreground: hsl(var(--muted-foreground));
22+
--secondary: hsl(210 40% 96.1%);
23+
--secondary-foreground: hsl(222.2 47.4% 11.2%);
4124

42-
--color-accent: hsl(var(--accent));
43-
--color-accent-foreground: hsl(var(--accent-foreground));
25+
--muted: hsl(210 40% 96.1%);
26+
--muted-foreground: hsl(215.4 16.3% 46.9%);
4427

45-
--color-popover: hsl(var(--popover));
46-
--color-popover-foreground: hsl(var(--popover-foreground));
28+
--accent: hsl(210 40% 96.1%);
29+
--accent-foreground: hsl(222.2 47.4% 11.2%);
4730

48-
--color-card: hsl(var(--card));
49-
--color-card-foreground: hsl(var(--card-foreground));
31+
--destructive: hsl(0 84.2% 60.2%);
32+
--destructive-foreground: hsl(210 40% 98%);
5033

51-
--radius-lg: var(--radius);
52-
--radius-md: calc(var(--radius) - 2px);
53-
--radius-sm: calc(var(--radius) - 4px);
34+
--success: hsl(145 63% 49%);
35+
--success-foreground: hsl(210 40% 98%);
5436

55-
--animate-fade-out: fade-out 0.75s ease-out forwards;
56-
--animate-fade-in: fade-in 0.75s ease-in forwards;
57-
--animate-accordion-down: accordion-down 0.2s ease-out;
58-
--animate-accordion-up: accordion-up 0.2s ease-out;
59-
60-
@keyframes fade-out {
61-
from {
62-
opacity: 1;
63-
}
64-
to {
65-
opacity: 0;
66-
}
67-
}
68-
@keyframes fade-in {
69-
from {
70-
opacity: 0;
71-
}
72-
to {
73-
opacity: 1;
74-
}
75-
}
76-
@keyframes accordion-down {
77-
from {
78-
height: 0;
79-
}
80-
to {
81-
height: var(--radix-accordion-content-height);
82-
}
83-
}
84-
@keyframes accordion-up {
85-
from {
86-
height: var(--radix-accordion-content-height);
87-
}
88-
to {
89-
height: 0;
90-
}
91-
}
92-
}
37+
--border: hsl(214.3 31.8% 91.4%);
38+
--input: hsl(214.3 31.8% 91.4%);
39+
--ring: hsl(222.2 84% 4.9%);
9340

94-
@utility container {
95-
margin-inline: auto;
96-
padding-inline: 2rem;
97-
@media (width >= --theme(--breakpoint-sm)) {
98-
max-width: none;
99-
}
100-
@media (width >= 1400px) {
101-
max-width: 1400px;
102-
}
41+
--radius: 0.5rem;
10342
}
10443

105-
/*
106-
The default border color has changed to `currentcolor` in Tailwind CSS v4,
107-
so we've added these compatibility styles to make sure everything still
108-
looks the same as it did with Tailwind CSS v3.
109-
110-
If we ever want to remove these styles, we need to add an explicit border
111-
color utility to any element that depends on these defaults.
112-
*/
113-
@layer base {
114-
*,
115-
::after,
116-
::before,
117-
::backdrop,
118-
::file-selector-button {
119-
border-color: var(--color-gray-200, currentcolor);
120-
}
121-
}
44+
.dark {
45+
--background: hsl(222.2 84% 4.9%);
46+
--foreground: hsl(210 40% 98%);
12247

123-
@layer base {
124-
:root {
125-
--background: 0 0% 100%;
126-
--foreground: 222.2 84% 4.9%;
48+
--card: hsl(222.2 84% 4.9%);
49+
--card-foreground: hsl(210 40% 98%);
12750

128-
--card: 0 0% 100%;
129-
--card-foreground: 222.2 84% 4.9%;
51+
--popover: hsl(222.2 84% 4.9%);
52+
--popover-foreground: hsl(210 40% 98%);
13053

131-
--popover: 0 0% 100%;
132-
--popover-foreground: 222.2 84% 4.9%;
54+
--primary: hsl(210 40% 98%);
55+
--primary-foreground: hsl(222.2 47.4% 11.2%);
13356

134-
--primary: 222.2 47.4% 11.2%;
135-
--primary-foreground: 210 40% 98%;
57+
--secondary: hsl(217.2 32.6% 17.5%);
58+
--secondary-foreground: hsl(210 40% 98%);
13659

137-
--secondary: 210 40% 96.1%;
138-
--secondary-foreground: 222.2 47.4% 11.2%;
60+
--muted: hsl(217.2 32.6% 17.5%);
61+
--muted-foreground: hsl(215 20.2% 65.1%);
13962

140-
--muted: 210 40% 96.1%;
141-
--muted-foreground: 215.4 16.3% 46.9%;
63+
--accent: hsl(217.2 32.6% 17.5%);
64+
--accent-foreground: hsl(210 40% 98%);
14265

143-
--accent: 210 40% 96.1%;
144-
--accent-foreground: 222.2 47.4% 11.2%;
66+
--destructive: hsl(0 96.7% 36.1%);
67+
--destructive-foreground: hsl(210 40% 98%);
14568

146-
--destructive: 0 84.2% 60.2%;
147-
--destructive-foreground: 210 40% 98%;
69+
--success: hsl(145 63% 42%);
70+
--success-foreground: hsl(210 40% 98%);
14871

149-
--success: 145 63% 49%;
150-
--success-foreground: 210 40% 98%;
72+
--border: hsl(217.2 32.6% 17.5%);
73+
--input: hsl(217.2 32.6% 17.5%);
74+
--ring: hsl(212.7 26.8% 83.9%);
75+
}
15176

152-
--border: 214.3 31.8% 91.4%;
153-
--input: 214.3 31.8% 91.4%;
154-
--ring: 222.2 84% 4.9%;
77+
@theme inline {
78+
--color-background: var(--background);
79+
--color-foreground: var(--foreground);
15580

156-
--radius: 0.5rem;
157-
}
81+
--color-primary: var(--primary);
82+
--color-primary-foreground: hsl(var(--primary-foreground));
15883

159-
.dark {
160-
--background: 222.2 84% 4.9%;
161-
--foreground: 210 40% 98%;
84+
--color-secondary: var(--secondary);
85+
--color-secondary-foreground: var(--secondary-foreground);
16286

163-
--card: 222.2 84% 4.9%;
164-
--card-foreground: 210 40% 98%;
87+
--color-destructive: var(--destructive);
88+
--color-destructive-foreground: var(--destructive-foreground);
16589

166-
--popover: 222.2 84% 4.9%;
167-
--popover-foreground: 210 40% 98%;
90+
--color-success: var(--success);
91+
--color-success-foreground: var(--success-foreground);
16892

169-
--primary: 210 40% 98%;
170-
--primary-foreground: 222.2 47.4% 11.2%;
93+
--color-muted: var(--muted);
94+
--color-muted-foreground: var(--muted-foreground);
17195

172-
--secondary: 217.2 32.6% 17.5%;
173-
--secondary-foreground: 210 40% 98%;
96+
--color-accent: var(--accent);
97+
--color-accent-foreground: var(--accent-foreground);
17498

175-
--muted: 217.2 32.6% 17.5%;
176-
--muted-foreground: 215 20.2% 65.1%;
99+
--color-popover: var(--popover);
100+
--color-popover-foreground: var(--popover-foreground);
177101

178-
--accent: 217.2 32.6% 17.5%;
179-
--accent-foreground: 210 40% 98%;
102+
--color-card: var(--card);
103+
--color-card-foreground: var(--card-foreground);
180104

181-
--destructive: 0 96.7% 36.1%;
182-
--destructive-foreground: 210 40% 98%;
105+
--color-border: var(--border);
106+
--color-input: var(--input);
107+
--color-ring: var(--ring);
183108

184-
--success: 145 63% 42%;
185-
--success-foreground: 210 40% 98%;
109+
--radius-lg: var(--radius);
110+
--radius-md: calc(var(--radius) - 2px);
111+
--radius-sm: calc(var(--radius) - 4px);
112+
}
186113

187-
--border: 217.2 32.6% 17.5%;
188-
--input: 217.2 32.6% 17.5%;
189-
--ring: 212.7 26.8% 83.9%;
114+
@utility container {
115+
margin-inline: auto;
116+
padding-inline: 2rem;
117+
@media (width >= --theme(--breakpoint-sm)) {
118+
max-width: none;
119+
}
120+
@media (width >= 1400px) {
121+
max-width: 1400px;
190122
}
191123
}
192124

0 commit comments

Comments
 (0)