1  
  2  /* Globals */
  3  
  4  :root {
  5      --sidebar-target-width: 300px;
  6      --sidebar-width: min(var(--sidebar-target-width), 80vw);
  7      --sidebar-resize-indicator-width: 8px;
  8      --sidebar-resize-indicator-space: 2px;
  9      --page-padding: 15px;
 10      --content-max-width: 750px;
 11      --menu-bar-height: 50px;
 12      --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
 13      --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
 14      --searchbar-margin-block-start: 5px;
 15  }
 16  
 17  /* Themes */
 18  
 19  .ayu {
 20      --bg: hsl(210, 25%, 8%);
 21      --fg: #c5c5c5;
 22  
 23      --sidebar-bg: #14191f;
 24      --sidebar-fg: #c8c9db;
 25      --sidebar-non-existant: #5c6773;
 26      --sidebar-active: #ffb454;
 27      --sidebar-spacer: #2d334f;
 28  
 29      --scrollbar: var(--sidebar-fg);
 30  
 31      --icons: #737480;
 32      --icons-hover: #b7b9cc;
 33  
 34      --links: #0096cf;
 35  
 36      --inline-code-color: #ffb454;
 37  
 38      --theme-popup-bg: #14191f;
 39      --theme-popup-border: #5c6773;
 40      --theme-hover: #191f26;
 41  
 42      --quote-bg: hsl(226, 15%, 17%);
 43      --quote-border: hsl(226, 15%, 22%);
 44  
 45      --warning-border: #ff8e00;
 46  
 47      --table-border-color: hsl(210, 25%, 13%);
 48      --table-header-bg: hsl(210, 25%, 28%);
 49      --table-alternate-bg: hsl(210, 25%, 11%);
 50  
 51      --searchbar-border-color: #848484;
 52      --searchbar-bg: #424242;
 53      --searchbar-fg: #fff;
 54      --searchbar-shadow-color: #d4c89f;
 55      --searchresults-header-fg: #666;
 56      --searchresults-border-color: #888;
 57      --searchresults-li-bg: #252932;
 58      --search-mark-bg: #e3b171;
 59  
 60      --color-scheme: dark;
 61  
 62      /* Same as `--icons` */
 63      --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg) brightness(99%) contrast(85%);
 64      /* Same as `--sidebar-active` */
 65      --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(341deg) brightness(104%) contrast(101%);
 66  
 67      --footnote-highlight: #2668a6;
 68  
 69      --overlay-bg: rgba(33, 40, 48, 0.4);
 70  
 71      --blockquote-note-color: #74b9ff;
 72      --blockquote-tip-color: #09ca09;
 73      --blockquote-important-color: #d3abff;
 74      --blockquote-warning-color: #f0b72f;
 75      --blockquote-caution-color: #f21424;
 76  
 77      --sidebar-header-border-color: #c18639;
 78  }
 79  
 80  .coal {
 81      --bg: hsl(200, 7%, 8%);
 82      --fg: #98a3ad;
 83  
 84      --sidebar-bg: #292c2f;
 85      --sidebar-fg: #a1adb8;
 86      --sidebar-non-existant: #505254;
 87      --sidebar-active: #3473ad;
 88      --sidebar-spacer: #393939;
 89  
 90      --scrollbar: var(--sidebar-fg);
 91  
 92      --icons: #43484d;
 93      --icons-hover: #b3c0cc;
 94  
 95      --links: #2b79a2;
 96  
 97      --inline-code-color: #c5c8c6;
 98  
 99      --theme-popup-bg: #141617;
100      --theme-popup-border: #43484d;
101      --theme-hover: #1f2124;
102  
103      --quote-bg: hsl(234, 21%, 18%);
104      --quote-border: hsl(234, 21%, 23%);
105  
106      --warning-border: #ff8e00;
107  
108      --table-border-color: hsl(200, 7%, 13%);
109      --table-header-bg: hsl(200, 7%, 28%);
110      --table-alternate-bg: hsl(200, 7%, 11%);
111  
112      --searchbar-border-color: #aaa;
113      --searchbar-bg: #b7b7b7;
114      --searchbar-fg: #000;
115      --searchbar-shadow-color: #aaa;
116      --searchresults-header-fg: #666;
117      --searchresults-border-color: #98a3ad;
118      --searchresults-li-bg: #2b2b2f;
119      --search-mark-bg: #355c7d;
120  
121      --color-scheme: dark;
122  
123      /* Same as `--icons` */
124      --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
125      /* Same as `--sidebar-active` */
126      --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);
127  
128      --footnote-highlight: #4079ae;
129  
130      --overlay-bg: rgba(33, 40, 48, 0.4);
131  
132      --blockquote-note-color: #4493f8;
133      --blockquote-tip-color: #08ae08;
134      --blockquote-important-color: #ab7df8;
135      --blockquote-warning-color: #d29922;
136      --blockquote-caution-color: #d91b29;
137  
138      --sidebar-header-border-color: #3473ad;
139  }
140  
141  .light, html:not(.js) {
142      --bg: hsl(0, 0%, 100%);
143      --fg: hsl(0, 0%, 0%);
144  
145      --sidebar-bg: #fafafa;
146      --sidebar-fg: hsl(0, 0%, 0%);
147      --sidebar-non-existant: #aaaaaa;
148      --sidebar-active: #1f1fff;
149      --sidebar-spacer: #f4f4f4;
150  
151      --scrollbar: #8F8F8F;
152  
153      --icons: #747474;
154      --icons-hover: #000000;
155  
156      --links: #20609f;
157  
158      --inline-code-color: #301900;
159  
160      --theme-popup-bg: #fafafa;
161      --theme-popup-border: #cccccc;
162      --theme-hover: #e6e6e6;
163  
164      --quote-bg: hsl(197, 37%, 96%);
165      --quote-border: hsl(197, 37%, 91%);
166  
167      --warning-border: #ff8e00;
168  
169      --table-border-color: hsl(0, 0%, 95%);
170      --table-header-bg: hsl(0, 0%, 80%);
171      --table-alternate-bg: hsl(0, 0%, 97%);
172  
173      --searchbar-border-color: #aaa;
174      --searchbar-bg: #fafafa;
175      --searchbar-fg: #000;
176      --searchbar-shadow-color: #aaa;
177      --searchresults-header-fg: #666;
178      --searchresults-border-color: #888;
179      --searchresults-li-bg: #e4f2fe;
180      --search-mark-bg: #a2cff5;
181  
182      --color-scheme: light;
183  
184      /* Same as `--icons` */
185      --copy-button-filter: invert(45.49%);
186      /* Same as `--sidebar-active` */
187      --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%);
188  
189      --footnote-highlight: #7e7eff;
190  
191      --overlay-bg: rgba(200, 200, 205, 0.4);
192  
193      --blockquote-note-color: #0969da;
194      --blockquote-tip-color: #008000;
195      --blockquote-important-color: #8250df;
196      --blockquote-warning-color: #9a6700;
197      --blockquote-caution-color: #b52731;
198  
199      --sidebar-header-border-color: #6e6edb;
200  }
201  
202  .navy {
203      --bg: hsl(226, 23%, 11%);
204      --fg: #bcbdd0;
205  
206      --sidebar-bg: #282d3f;
207      --sidebar-fg: #c8c9db;
208      --sidebar-non-existant: #505274;
209      --sidebar-active: #2b79a2;
210      --sidebar-spacer: #2d334f;
211  
212      --scrollbar: var(--sidebar-fg);
213  
214      --icons: #737480;
215      --icons-hover: #b7b9cc;
216  
217      --links: #2b79a2;
218  
219      --inline-code-color: #c5c8c6;
220  
221      --theme-popup-bg: #161923;
222      --theme-popup-border: #737480;
223      --theme-hover: #282e40;
224  
225      --quote-bg: hsl(226, 15%, 17%);
226      --quote-border: hsl(226, 15%, 22%);
227  
228      --warning-border: #ff8e00;
229  
230      --table-border-color: hsl(226, 23%, 16%);
231      --table-header-bg: hsl(226, 23%, 31%);
232      --table-alternate-bg: hsl(226, 23%, 14%);
233  
234      --searchbar-border-color: #aaa;
235      --searchbar-bg: #aeaec6;
236      --searchbar-fg: #000;
237      --searchbar-shadow-color: #aaa;
238      --searchresults-header-fg: #5f5f71;
239      --searchresults-border-color: #5c5c68;
240      --searchresults-li-bg: #242430;
241      --search-mark-bg: #a2cff5;
242  
243      --color-scheme: dark;
244  
245      /* Same as `--icons` */
246      --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%);
247      /* Same as `--sidebar-active` */
248      --copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%) hue-rotate(156deg) brightness(85%) contrast(90%);
249  
250      --footnote-highlight: #4079ae;
251  
252      --overlay-bg: rgba(33, 40, 48, 0.4);
253  
254      --blockquote-note-color: #4493f8;
255      --blockquote-tip-color: #09ca09;
256      --blockquote-important-color: #ab7df8;
257      --blockquote-warning-color: #d29922;
258      --blockquote-caution-color: #f21424;
259  
260      --sidebar-header-border-color: #2f6ab5;
261  }
262  
263  .rust {
264      --bg: hsl(60, 9%, 87%);
265      --fg: #262625;
266  
267      --sidebar-bg: #3b2e2a;
268      --sidebar-fg: #c8c9db;
269      --sidebar-non-existant: #505254;
270      --sidebar-active: #e69f67;
271      --sidebar-spacer: #45373a;
272  
273      --scrollbar: var(--sidebar-fg);
274  
275      --icons: #737480;
276      --icons-hover: #262625;
277  
278      --links: #2b79a2;
279  
280      --inline-code-color: #6e6b5e;
281  
282      --theme-popup-bg: #e1e1db;
283      --theme-popup-border: #b38f6b;
284      --theme-hover: #99908a;
285  
286      --quote-bg: hsl(60, 5%, 75%);
287      --quote-border: hsl(60, 5%, 70%);
288  
289      --warning-border: #ff8e00;
290  
291      --table-border-color: hsl(60, 9%, 82%);
292      --table-header-bg: #b3a497;
293      --table-alternate-bg: hsl(60, 9%, 84%);
294  
295      --searchbar-border-color: #aaa;
296      --searchbar-bg: #fafafa;
297      --searchbar-fg: #000;
298      --searchbar-shadow-color: #aaa;
299      --searchresults-header-fg: #666;
300      --searchresults-border-color: #888;
301      --searchresults-li-bg: #dec2a2;
302      --search-mark-bg: #e69f67;
303  
304      /* Same as `--icons` */
305      --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%);
306      /* Same as `--sidebar-active` */
307      --copy-button-filter-hover: invert(77%) sepia(16%) saturate(1798%) hue-rotate(328deg) brightness(98%) contrast(83%);
308  
309      --footnote-highlight: #d3a17a;
310  
311      --overlay-bg: rgba(150, 150, 150, 0.25);
312  
313      --blockquote-note-color: #023b95;
314      --blockquote-tip-color: #007700;
315      --blockquote-important-color: #8250df;
316      --blockquote-warning-color: #603700;
317      --blockquote-caution-color: #aa1721;
318  
319      --sidebar-header-border-color: #8c391f;
320  }
321  
322  @media (prefers-color-scheme: dark) {
323      html:not(.js) {
324          --bg: hsl(200, 7%, 8%);
325          --fg: #98a3ad;
326  
327          --sidebar-bg: #292c2f;
328          --sidebar-fg: #a1adb8;
329          --sidebar-non-existant: #505254;
330          --sidebar-active: #3473ad;
331          --sidebar-spacer: #393939;
332  
333          --scrollbar: var(--sidebar-fg);
334  
335          --icons: #43484d;
336          --icons-hover: #b3c0cc;
337  
338          --links: #2b79a2;
339  
340          --inline-code-color: #c5c8c6;
341  
342          --theme-popup-bg: #141617;
343          --theme-popup-border: #43484d;
344          --theme-hover: #1f2124;
345  
346          --quote-bg: hsl(234, 21%, 18%);
347          --quote-border: hsl(234, 21%, 23%);
348  
349          --warning-border: #ff8e00;
350  
351          --table-border-color: hsl(200, 7%, 13%);
352          --table-header-bg: hsl(200, 7%, 28%);
353          --table-alternate-bg: hsl(200, 7%, 11%);
354  
355          --searchbar-border-color: #aaa;
356          --searchbar-bg: #b7b7b7;
357          --searchbar-fg: #000;
358          --searchbar-shadow-color: #aaa;
359          --searchresults-header-fg: #666;
360          --searchresults-border-color: #98a3ad;
361          --searchresults-li-bg: #2b2b2f;
362          --search-mark-bg: #355c7d;
363  
364          --color-scheme: dark;
365  
366          /* Same as `--icons` */
367          --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
368          /* Same as `--sidebar-active` */
369          --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);
370  
371          --footnote-highlight: #4079ae;
372  
373          --overlay-bg: rgba(33, 40, 48, 0.4);
374  
375          --blockquote-note-color: #4493f8;
376          --blockquote-tip-color: #08ae08;
377          --blockquote-important-color: #ab7df8;
378          --blockquote-warning-color: #d29922;
379          --blockquote-caution-color: #d91b29;
380  
381          --sidebar-header-border-color: #3473ad;
382      }
383  }