git.iko.soy/helix
on 8a2fa69 help sign in
helix/book/theme/css/variables.css
344 lines 8.2 kB history raw
2/* Globals */
4:root {
5 --sidebar-width: 300px;
6 --page-padding: 15px;
7 --content-max-width: 750px;
8 --menu-bar-height: 50px;
9}
11/* Themes */
13.ayu {
14 --bg: hsl(210, 25%, 8%);
15 --fg: #c5c5c5;
16 --heading-fg: #c5c5c5;
18 --sidebar-bg: #14191f;
19 --sidebar-fg: #c8c9db;
20 --sidebar-non-existant: #5c6773;
21 --sidebar-active: #ffb454;
22 --sidebar-spacer: #2d334f;
24 --scrollbar: var(--sidebar-fg);
26 --icons: #737480;
27 --icons-hover: #b7b9cc;
29 --links: #0096cf;
31 --inline-code-color: #ffb454;
33 --theme-popup-bg: #14191f;
34 --theme-popup-border: #5c6773;
35 --theme-hover: #191f26;
37 --quote-bg: hsl(226, 15%, 17%);
38 --quote-border: hsl(226, 15%, 22%);
40 --table-border-color: hsl(210, 25%, 13%);
41 --table-header-bg: hsl(210, 25%, 28%);
42 --table-alternate-bg: hsl(210, 25%, 11%);
44 --searchbar-border-color: #848484;
45 --searchbar-bg: #424242;
46 --searchbar-fg: #fff;
47 --searchbar-shadow-color: #d4c89f;
48 --searchresults-header-fg: #666;
49 --searchresults-border-color: #888;
50 --searchresults-li-bg: #252932;
51 --search-mark-bg: #e3b171;
54.coal {
55 --bg: hsl(200, 7%, 8%);
56 --fg: #98a3ad;
57 --heading-fg: #98a3ad;
59 --sidebar-bg: #292c2f;
60 --sidebar-fg: #a1adb8;
61 --sidebar-non-existant: #505254;
62 --sidebar-active: #3473ad;
63 --sidebar-spacer: #393939;
65 --scrollbar: var(--sidebar-fg);
67 --icons: #43484d;
68 --icons-hover: #b3c0cc;
70 --links: #2b79a2;
72 --inline-code-color: #c5c8c6;;
74 --theme-popup-bg: #141617;
75 --theme-popup-border: #43484d;
76 --theme-hover: #1f2124;
78 --quote-bg: hsl(234, 21%, 18%);
79 --quote-border: hsl(234, 21%, 23%);
81 --table-border-color: hsl(200, 7%, 13%);
82 --table-header-bg: hsl(200, 7%, 28%);
83 --table-alternate-bg: hsl(200, 7%, 11%);
85 --searchbar-border-color: #aaa;
86 --searchbar-bg: #b7b7b7;
87 --searchbar-fg: #000;
88 --searchbar-shadow-color: #aaa;
89 --searchresults-header-fg: #666;
90 --searchresults-border-color: #98a3ad;
91 --searchresults-li-bg: #2b2b2f;
92 --search-mark-bg: #355c7d;
95.light {
96 --bg: hsl(0, 0%, 100%);
97 --fg: hsl(0, 0%, 0%);
98 --heading-fg: hsl(0, 0%, 0%);
100 --sidebar-bg: #fafafa;
101 --sidebar-fg: hsl(0, 0%, 0%);
102 --sidebar-non-existant: #aaaaaa;
103 --sidebar-active: #1f1fff;
104 --sidebar-spacer: #f4f4f4;
106 --scrollbar: #8F8F8F;
108 --icons: #747474;
109 --icons-hover: #000000;
111 --links: #20609f;
113 --inline-code-color: #301900;
115 --theme-popup-bg: #fafafa;
116 --theme-popup-border: #cccccc;
117 --theme-hover: #e6e6e6;
119 --quote-bg: hsl(197, 37%, 96%);
120 --quote-border: hsl(197, 37%, 91%);
122 --table-border-color: hsl(0, 0%, 95%);
123 --table-header-bg: hsl(0, 0%, 80%);
124 --table-alternate-bg: hsl(0, 0%, 97%);
126 --searchbar-border-color: #aaa;
127 --searchbar-bg: #fafafa;
128 --searchbar-fg: #000;
129 --searchbar-shadow-color: #aaa;
130 --searchresults-header-fg: #666;
131 --searchresults-border-color: #888;
132 --searchresults-li-bg: #e4f2fe;
133 --search-mark-bg: #a2cff5;
136.navy {
137 --bg: hsl(226, 23%, 11%);
138 --fg: #bcbdd0;
139 --heading-fg: #bcbdd0;
141 --sidebar-bg: #282d3f;
142 --sidebar-fg: #c8c9db;
143 --sidebar-non-existant: #505274;
144 --sidebar-active: #2b79a2;
145 --sidebar-spacer: #2d334f;
147 --scrollbar: var(--sidebar-fg);
149 --icons: #737480;
150 --icons-hover: #b7b9cc;
152 --links: #2b79a2;
154 --inline-code-color: #c5c8c6;;
156 --theme-popup-bg: #161923;
157 --theme-popup-border: #737480;
158 --theme-hover: #282e40;
160 --quote-bg: hsl(226, 15%, 17%);
161 --quote-border: hsl(226, 15%, 22%);
163 --table-border-color: hsl(226, 23%, 16%);
164 --table-header-bg: hsl(226, 23%, 31%);
165 --table-alternate-bg: hsl(226, 23%, 14%);
167 --searchbar-border-color: #aaa;
168 --searchbar-bg: #aeaec6;
169 --searchbar-fg: #000;
170 --searchbar-shadow-color: #aaa;
171 --searchresults-header-fg: #5f5f71;
172 --searchresults-border-color: #5c5c68;
173 --searchresults-li-bg: #242430;
174 --search-mark-bg: #a2cff5;
177.rust {
178 --bg: hsl(60, 9%, 87%);
179 --fg: #262625;
180 --heading-fg: #262625;
182 --sidebar-bg: #3b2e2a;
183 --sidebar-fg: #c8c9db;
184 --sidebar-non-existant: #505254;
185 --sidebar-active: #e69f67;
186 --sidebar-spacer: #45373a;
188 --scrollbar: var(--sidebar-fg);
190 --icons: #737480;
191 --icons-hover: #262625;
193 --links: #2b79a2;
195 --inline-code-color: #6e6b5e;
197 --theme-popup-bg: #e1e1db;
198 --theme-popup-border: #b38f6b;
199 --theme-hover: #99908a;
201 --quote-bg: hsl(60, 5%, 75%);
202 --quote-border: hsl(60, 5%, 70%);
204 --table-border-color: hsl(60, 9%, 82%);
205 --table-header-bg: #b3a497;
206 --table-alternate-bg: hsl(60, 9%, 84%);
208 --searchbar-border-color: #aaa;
209 --searchbar-bg: #fafafa;
210 --searchbar-fg: #000;
211 --searchbar-shadow-color: #aaa;
212 --searchresults-header-fg: #666;
213 --searchresults-border-color: #888;
214 --searchresults-li-bg: #dec2a2;
215 --search-mark-bg: #e69f67;
218@media (prefers-color-scheme: dark) {
219 .light.no-js {
220 --bg: hsl(200, 7%, 8%);
221 --fg: #ebeafa;
222 --heading-fg: #ebeafa;
224 --sidebar-bg: #292c2f;
225 --sidebar-fg: #a1adb8;
226 --sidebar-non-existant: #505254;
227 --sidebar-active: #3473ad;
228 --sidebar-spacer: #393939;
230 --scrollbar: var(--sidebar-fg);
232 --icons: #43484d;
233 --icons-hover: #b3c0cc;
235 --links: #2b79a2;
237 --inline-code-color: #c5c8c6;;
239 --theme-popup-bg: #141617;
240 --theme-popup-border: #43484d;
241 --theme-hover: #1f2124;
243 --quote-bg: hsl(234, 21%, 18%);
244 --quote-border: hsl(234, 21%, 23%);
246 --table-border-color: hsl(200, 7%, 13%);
247 --table-header-bg: hsl(200, 7%, 28%);
248 --table-alternate-bg: hsl(200, 7%, 11%);
250 --searchbar-border-color: #aaa;
251 --searchbar-bg: #b7b7b7;
252 --searchbar-fg: #000;
253 --searchbar-shadow-color: #aaa;
254 --searchresults-header-fg: #666;
255 --searchresults-border-color: #98a3ad;
256 --searchresults-li-bg: #2b2b2f;
257 --search-mark-bg: #355c7d;
258 }
261.colibri {
262 --bg: #3b224c;
263 --fg: #bcbdd0;
265 --sidebar-bg: #281733;
266 --sidebar-fg: #c8c9db;
267 --sidebar-non-existant: #505274;
268 --sidebar-active: #a4a0e8;
269 --sidebar-spacer: #2d334f;
271 --scrollbar: var(--sidebar-fg);
273 --icons: #737480;
274 --icons-hover: #b7b9cc;
276 /* --links: #a4a0e8; */
277 --links: #ECCDBA;
279 --inline-code-color: #c5c8c6;;
281 --theme-popup-bg: #161923;
282 --theme-popup-border: #737480;
283 --theme-hover: rgba(0,0,0, .2);
285 --quote-bg: hsl(226, 15%, 17%);
286 --quote-border: hsl(226, 15%, 22%);
288 --table-border-color: hsl(226, 23%, 16%);
289 --table-header-bg: hsl(226, 23%, 31%);
290 --table-alternate-bg: hsl(226, 23%, 14%);
292 --searchbar-border-color: #aaa;
293 --searchbar-bg: #aeaec6;
294 --searchbar-fg: #000;
295 --searchbar-shadow-color: #aaa;
296 --searchresults-header-fg: #5f5f71;
297 --searchresults-border-color: #5c5c68;
298 --searchresults-li-bg: #242430;
299 --search-mark-bg: #a2cff5;
302.colibri {
303 --bg: #ffffff;
304 --fg: #452859;
305 --fg: #5a5977;
306 --heading-fg: #281733;
308 --sidebar-bg: #281733;
309 --sidebar-fg: #c8c9db;
310 --sidebar-non-existant: #505274;
311 --sidebar-active: #a4a0e8;
312 --sidebar-spacer: #2d334f;
314 --scrollbar: var(--sidebar-fg);
316 --icons: #737480;
317 --icons-hover: #b7b9cc;
319 --links: #6F44F0;
321 --inline-code-color: #697C81;
323 --theme-popup-bg: #161923;
324 --theme-popup-border: #737480;
325 --theme-hover: rgba(0,0,0, .2);
327 --quote-bg: rgba(0, 0, 0, 0);
328 --quote-border: hsl(226, 15%, 75%);
330 --table-border-color: #5a5977;
331 --table-border-color: hsl(201deg 10% 67%);
332 --table-header-bg: hsl(0, 0%, 100%);
333 --table-alternate-bg: hsl(0, 0%, 97%);
334 --table-border-line: hsl(201deg, 20%, 92%);
336 --searchbar-border-color: #aaa;
337 --searchbar-bg: #aeaec6;
338 --searchbar-fg: #000;
339 --searchbar-shadow-color: #aaa;
340 --searchresults-header-fg: #5f5f71;
341 --searchresults-border-color: #5c5c68;
342 --searchresults-li-bg: #242430;
343 --search-mark-bg: #a2cff5;