Skip to content

Commit 9587785

Browse files
ziracmoziracmo
committed
refactor ♻️ refactor custom.css into smaller css files
1 parent 8b51499 commit 9587785

File tree

6 files changed

+389
-384
lines changed

6 files changed

+389
-384
lines changed

‎crowdsec-docs/src/css/alerts.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/* 🚩 Alert Components */
2+
3+
.alert {
4+
@apply bg-background dark:bg-gray-100 text-foreground dark:text-foreground border border-solid border-border rounded-lg p-4 mb-4 text-sm;
5+
}
6+
7+
.alert p:last-of-type {
8+
@apply mb-2;
9+
}
10+
11+
.alert summary:before {
12+
top: 0.2rem !important;
13+
}
14+
15+
.alert svg {
16+
@apply !w-5 !h-5 mb-0;
17+
}
18+
19+
.alert--info {
20+
@apply bg-cyan-50 dark:bg-cyan-900/10 text-cyan-900 dark:text-cyan-100 border-cyan-200 dark:border-cyan-700;
21+
}
22+
23+
.alert--info svg {
24+
@apply !fill-cyan-500 dark:!fill-cyan-200;
25+
}
26+
27+
.alert--warning {
28+
@apply bg-amber-50 dark:bg-amber-900/10 text-amber-900 dark:text-amber-100 border-amber-200 dark:border-amber-700;
29+
}
30+
31+
.alert--warning svg {
32+
@apply !fill-amber-500 dark:!fill-amber-200;
33+
}
34+
35+
.alert--success {
36+
@apply bg-emerald-50 dark:bg-emerald-900/10 text-emerald-900 dark:text-emerald-100 border-emerald-200 dark:border-emerald-700;
37+
}
38+
39+
.alert--success svg {
40+
@apply !fill-emerald-500 dark:!fill-emerald-200;
41+
}
42+
43+
.alert--danger {
44+
@apply bg-red-50 dark:bg-red-900/10 text-red-900 dark:text-red-100 border-red-200 dark:border-red-700;
45+
}
46+
47+
.alert--danger svg {
48+
@apply !fill-red-500 dark:!fill-red-200;
49+
}

‎crowdsec-docs/src/css/code.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* 💻 Code blocks */
2+
3+
.prism-code {
4+
@apply !bg-primary dark:!bg-gray-50 text-gray-900 dark:text-gray-100 p-4 mb-4 overflow-x-auto rounded-lg border border-solid border-border/80;
5+
}
6+
7+
pre {
8+
@apply rounded-lg font-semibold;
9+
}
10+
11+
.prism-code .token.plain {
12+
@apply text-white dark:text-foreground;
13+
}
14+
15+
.prism-code .token.function,
16+
.prism-code .assign-left.variable {
17+
@apply !text-premium dark:!text-secondary;
18+
}
19+
20+
code:not(.prism-code code) {
21+
@apply bg-gray-100 dark:bg-gray-50 border-primary/20 border-solid border text-primary px-1 py-0.5 rounded-md font-semibold;
22+
}

‎crowdsec-docs/src/css/colors.css‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
/* COLORS */
2+
@layer base {
3+
/* // Zeplin https://app.zeplin.io/project/655e038b64d81b7bd89cdadb/screen/65a7e811a2ae29e2fbb62a17 */
4+
:root {
5+
/* Gray */
6+
--color-gray-50: 248 250 252;
7+
--color-gray-100: 241 245 249;
8+
--color-gray-200: 226 232 240;
9+
--color-gray-300: 203 213 225;
10+
--color-gray-400: 148 163 184;
11+
--color-gray-500: 100 116 139;
12+
--color-gray-600: 71 85 105;
13+
--color-gray-700: 46 59 77;
14+
--color-gray-800: 22 30 47;
15+
--color-gray-900: 16 24 39;
16+
--color-gray-950: 4 4 31;
17+
18+
/* Complementary */
19+
--color-red: 227 13 20;
20+
--color-green: 31 168 81;
21+
--color-orange: 240 111 5;
22+
--color-yellow: 168 143 16;
23+
--color-premium: 248 171 19;
24+
--color-platinum: 251 217 131;
25+
26+
/* Shadcn colors */
27+
--background: 252 253 253;
28+
--foreground: 52 52 59;
29+
--card: 255 255 255;
30+
--card-foreground: 52 52 59;
31+
--popover: 255 255 255;
32+
--popover-foreground: 52 52 59;
33+
--primary: 82 71 179;
34+
--primary-foreground: 251 251 251;
35+
--secondary: 159 107 4;
36+
--secondary-foreground: 52 52 59;
37+
--premium: 248 171 19;
38+
--info: 224 178 90;
39+
--info-foreground: 52 52 59;
40+
--muted: 247 247 247;
41+
--muted-foreground: 142 142 142;
42+
--accent: 247 247 247;
43+
--accent-foreground: 52 52 59;
44+
--destructive: 220 38 38;
45+
--destructive-foreground: 220 38 38;
46+
--border: 171 177 184;
47+
--input: 255 255 255;
48+
--ring: 180 180 180;
49+
--chart-1: 255 159 64;
50+
--chart-2: 75 192 192;
51+
--chart-3: 54 162 235;
52+
--chart-4: 153 102 255;
53+
--chart-5: 255 99 132;
54+
--radius: 0.625rem;
55+
--sidebar: 251 251 251;
56+
--sidebar-foreground: 52 52 59;
57+
--sidebar-primary: 120 102 201;
58+
--sidebar-primary-foreground: 251 251 251;
59+
--sidebar-accent: 247 247 247;
60+
--sidebar-accent-foreground: 52 52 59;
61+
--sidebar-border: 235 235 235;
62+
--sidebar-ring: 180 180 180;
63+
}
64+
65+
html[data-theme="dark"] {
66+
/* Gray */
67+
--color-gray-50: 4 4 31;
68+
--color-gray-100: 16 24 39;
69+
--color-gray-200: 22 30 47;
70+
--color-gray-300: 46 59 77;
71+
--color-gray-400: 71 85 105;
72+
--color-gray-500: 100 116 139;
73+
--color-gray-600: 148 163 184;
74+
--color-gray-700: 203 213 225;
75+
--color-gray-800: 226 232 240;
76+
--color-gray-900: 241 245 249;
77+
--colors-gray-950: 248 250 252;
78+
79+
/* Complementary */
80+
--color-red: 245 91 96;
81+
--color-green: 113 229 155;
82+
--color-orange: 252 168 100;
83+
--color-yellow: 227 195 95;
84+
--color-premium: 248 171 19;
85+
--color-platinum: 251 217 131;
86+
}
87+
}
88+
89+
html[data-theme="dark"],
90+
.dark {
91+
/* Shadcn */
92+
--background: 16 24 39;
93+
--foreground: 250 251 251;
94+
--card: 22 33 47;
95+
--card-foreground: 250 251 251;
96+
--popover: 40 44 80;
97+
--popover-foreground: 250 251 251;
98+
--primary: 133 149 208;
99+
--primary-foreground: 52 52 52;
100+
--secondary: 224 178 90;
101+
--secondary-foreground: 250 251 251;
102+
--premium: 248 171 19;
103+
--info: 224 178 90;
104+
--info-foreground: 250 251 251;
105+
--muted: 69 69 69;
106+
--muted-foreground: 180 180 180;
107+
--accent: 69 69 69;
108+
--accent-foreground: 250 251 251;
109+
--destructive: 133 72 60;
110+
--destructive-foreground: 191 107 95;
111+
--border: 46 59 77;
112+
--input: 33 36 66;
113+
--ring: 112 112 112;
114+
--chart-1: 90 93 175;
115+
--chart-2: 123 212 156;
116+
--chart-3: 227 181 95;
117+
--chart-4: 180 99 179;
118+
--chart-5: 189 122 86;
119+
--sidebar: 52 52 52;
120+
--sidebar-foreground: 250 251 251;
121+
--sidebar-primary: 133 149 208;
122+
--sidebar-primary-foreground: 250 251 251;
123+
--sidebar-accent: 69 69 69;
124+
--sidebar-accent-foreground: 250 251 251;
125+
--sidebar-border: 56 63 98;
126+
--sidebar-ring: 112 112 112;
127+
}
128+
129+
@theme inline {
130+
--color-background: var(--background);
131+
--color-foreground: var(--foreground);
132+
--color-card: var(--card);
133+
--color-card-foreground: var(--card-foreground);
134+
--color-popover: var(--popover);
135+
--color-popover-foreground: var(--popover-foreground);
136+
--color-primary: var(--primary);
137+
--color-primary-foreground: var(--primary-foreground);
138+
--color-secondary: var(--secondary);
139+
--color-secondary-foreground: var(--secondary-foreground);
140+
--color-info: var(--info);
141+
--color-info-foreground: var(--info-foreground);
142+
--color-muted: var(--muted);
143+
--color-muted-foreground: var(--muted-foreground);
144+
--color-accent: var(--accent);
145+
--color-accent-foreground: var(--accent-foreground);
146+
--color-destructive: var(--destructive);
147+
--color-destructive-foreground: var(--destructive-foreground);
148+
--color-border: var(--border);
149+
--color-input: var(--input);
150+
--color-ring: var(--ring);
151+
--color-chart-1: var(--chart-1);
152+
--color-chart-2: var(--chart-2);
153+
--color-chart-3: var(--chart-3);
154+
--color-chart-4: var(--chart-4);
155+
--color-chart-5: var(--chart-5);
156+
--radius-sm: calc(var(--radius) - 4px);
157+
--radius-md: calc(var(--radius) - 2px);
158+
--radius-lg: var(--radius);
159+
--radius-xl: calc(var(--radius) + 4px);
160+
--color-sidebar: var(--sidebar);
161+
--color-sidebar-foreground: var(--sidebar-foreground);
162+
--color-sidebar-primary: var(--sidebar-primary);
163+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
164+
--color-sidebar-accent: var(--sidebar-accent);
165+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
166+
--color-sidebar-border: var(--sidebar-border);
167+
--color-sidebar-ring: var(--sidebar-ring);
168+
}
169+
170+
/* You can override the default Infima variables here. */
171+
:root {
172+
/* Docusaurus global colors */
173+
--docusaurus-announcement-bar-height: 2.5rem !important;
174+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
175+
176+
/* IFM Theme color overrides */
177+
--ifm-color-primary: rgb(var(--primary));
178+
--ifm-global-shadow-md: 0px;
179+
--ifm-code-font-size: 95%;
180+
--ifm-font-family-base: "Instrument Sans", sans-serif; /* For body text */
181+
--ifm-font-family-monospace: "Courier New", monospace; /* For code blocks */
182+
--ifm-dropdown-background-color: rgb(var(--card));
183+
184+
/* Algolia global search colors */
185+
--docsearch-searchbox-background: rgb(var(--input));
186+
}

0 commit comments

Comments
 (0)