1/* Globals */
  2
  3:root {
  4  --color-scheme: light;
  5
  6  --logo-brightness: brightness(1);
  7
  8  --sidebar-width: 280px;
  9  --sidebar-resize-indicator-width: 0px;
 10  --sidebar-resize-indicator-space: 2px;
 11  --page-padding: 15px;
 12  --content-max-width: 690px;
 13  --menu-bar-height: 64px;
 14  --font: "IA Writer Quattro S", sans-serif;
 15  --title-font: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
 16  --mono-font:
 17    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
 18    Courier New, monospace;
 19  --code-font-size: 0.875em
 20    /* please adjust the ace font size accordingly in editor.js */;
 21
 22  --noise-opacity: 0.024;
 23  --bg: hsla(50, 25%, 96%);
 24  --fg: hsl(220, 13%, 34%);
 25  --title-color: hsl(220, 92%, 42%);
 26
 27  --border: hsl(220, 13%, 80%);
 28  --border-light: hsl(220, 13%, 90%);
 29  --border-hover: hsl(220, 13%, 70%);
 30  --border-footer: hsl(220, 13%, 91%);
 31
 32  --media-bg: hsl(50, 25%, 92%);
 33
 34  --sidebar-bg: hsla(50, 25%, 94%);
 35  --sidebar-fg: hsl(0, 0%, 0%);
 36  --sidebar-non-existant: #aaaaaa;
 37  --sidebar-active: hsl(220, 93%, 42%);
 38  --sidebar-active-bg: hsl(220, 93%, 42%, 0.1);
 39  --sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.1);
 40
 41  --divider: hsl(220, 50%, 45%, 0.1);
 42  --scrollbar: #8f8f8f;
 43
 44  --icons: #747474;
 45  --icons-hover: #000000;
 46  --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.15);
 47
 48  --links: hsl(220, 92%, 42%);
 49  --link-line-decoration: hsl(220, 93%, 42%, 0.2);
 50  --link-line-decoration-hover: hsl(220, 93%, 42%, 0.5);
 51
 52  --full-contrast: #000;
 53
 54  --inline-code-color: #301900;
 55  --code-text: hsl(220, 13%, 10%);
 56  --code-bg: hsl(220, 93%, 42%, 0.1);
 57  --keybinding-bg: hsl(0, 0%, 94%);
 58
 59  --pre-bg: #fff;
 60  --pre-border: hsla(220, 93%, 42%, 0.3);
 61  --pre-shadow: hsla(220, 93%, 42%, 0.07);
 62
 63  --popover-bg: #fafafa;
 64  --popover-border: #cccccc;
 65  --popover-shadow:
 66    0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);
 67
 68  --theme-hover: #e6e6e6;
 69  --hover-section-title: hsl(50, 25%, 88%);
 70
 71  --quote-bg: hsl(197, 37%, 96%);
 72  --quote-border: hsl(197, 37%, 84%);
 73
 74  --warning-border: hsl(25, 100%, 85%);
 75  --warning-bg: hsl(42, 100%, 60%, 0.1);
 76  --warning-icon: hsl(42, 100%, 30%);
 77
 78  --table-header-bg: hsl(220, 50%, 90%, 0.4);
 79  --table-border-color: hsl(220, 93%, 42%, 0.15);
 80  --table-alternate-bg: hsl(220, 10%, 90%, 0.4);
 81
 82  --toc-link-underline: hsl(0, 0%, 0%, 0.1);
 83  --toc-link-underline-hover: hsl(0, 0%, 0%, 0.5);
 84
 85  --searchbar-border-color: #aaa;
 86  --searchbar-bg: #fafafa;
 87  --searchbar-fg: #000;
 88  --searchbar-shadow-color: #aaa;
 89  --searchresults-header-fg: #666;
 90  --searchresults-li-bg: #e4f2fe;
 91  --search-mark-bg: #a2cff5;
 92
 93  --download-btn-bg: hsl(220, 60%, 95%);
 94  --download-btn-bg-hover: hsl(220, 60%, 93%);
 95  --download-btn-color: hsl(220, 60%, 30%);
 96  --download-btn-border: hsla(220, 60%, 40%, 0.2);
 97  --download-btn-border-hover: hsla(220, 60%, 50%, 0.2);
 98  --download-btn-shadow: hsla(220, 40%, 60%, 0.1);
 99
100  --search-btn-bg: hsl(220, 100%, 100%);
101  --search-btn-bg-hover: hsla(50, 25%, 97%);
102  --search-btn-border: hsl(220, 50%, 45%, 0.2);
103
104  --toast-bg: hsla(220, 93%, 98%);
105  --toast-border: hsla(220, 93%, 42%, 0.3);
106  --toast-border-success: hsla(120, 73%, 42%, 0.3);
107  --toast-border-error: hsla(0, 90%, 50%, 0.3);
108
109  --footer-btn-bg: hsl(220, 60%, 98%, 0.4);
110  --footer-btn-bg-hover: hsl(220, 60%, 93%, 0.5);
111  --footer-btn-border: hsla(220, 60%, 40%, 0.15);
112  --footer-btn-border-hover: hsla(220, 60%, 50%, 0.2);
113}
114
115.dark {
116  --color-scheme: dark;
117
118  --logo-brightness: brightness(2);
119
120  --noise-opacity: 0.012;
121  --bg: hsl(220, 13%, 7.5%);
122  --fg: hsl(220, 14%, 70%);
123  --title-color: hsl(220, 92%, 80%);
124
125  --border: hsl(220, 13%, 20%);
126  --border-light: hsl(220, 13%, 15%);
127  --border-hover: hsl(220, 13%, 40%);
128  --border-footer: hsl(220, 13%, 12%);
129
130  --media-bg: hsl(220, 13%, 8%);
131
132  --sidebar-bg: hsl(220, 13%, 6.5%);
133  --sidebar-fg: hsl(220, 14%, 71%);
134  --sidebar-non-existant: #505254;
135  --sidebar-active: hsl(220, 92%, 75%);
136  --sidebar-active-bg: hsl(220, 93%, 42%, 0.25);
137  --sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.6);
138
139  --divider: hsl(220, 13%, 12%);
140  --scrollbar: hsl(220, 13%, 30%);
141
142  --icons: hsl(220, 14%, 71%);
143  --icons-hover: hsl(220, 14%, 90%);
144  --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.4);
145
146  --links: hsl(220, 93%, 75%);
147  --link-line-decoration: hsl(220, 92%, 80%, 0.4);
148  --link-line-decoration-hover: hsl(220, 92%, 80%, 0.8);
149  --full-contrast: #fff;
150
151  --inline-code-color: hsl(40, 100%, 80%);
152  --code-text: hsl(220, 13%, 95%);
153  --code-bg: hsl(220, 93%, 50%, 0.2);
154  --keybinding-bg: hsl(0, 0%, 12%);
155
156  --pre-bg: hsl(220, 13%, 5%);
157  --pre-border: hsla(220, 93%, 70%, 0.3);
158  --pre-shadow: hsla(220, 93%, 70%, 0.1);
159
160  --popover-bg: hsl(220, 13%, 8%);
161  --popover-border: hsl(220, 13%, 20%);
162  --popover-shadow:
163    0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);
164
165  --theme-hover: hsl(220, 13%, 25%);
166  --hover-section-title: hsl(220, 13%, 11%);
167
168  --quote-bg: hsl(220, 13%, 25%, 0.4);
169  --quote-border: hsl(220, 13%, 32%, 0.5);
170
171  --table-border-color: hsl(220, 13%, 30%, 0.5);
172  --table-header-bg: hsl(220, 13%, 25%, 0.5);
173  --table-alternate-bg: hsl(220, 13%, 20%, 0.4);
174
175  --toc-link-underline: hsl(255, 100%, 100%, 0.1);
176  --toc-link-underline-hover: hsl(255, 100%, 100%, 0.4);
177
178  --warning-border: hsl(25, 100%, 85%, 0.2);
179  --warning-bg: hsl(42, 100%, 40%, 0.1);
180  --warning-icon: hsl(42, 100%, 80%);
181
182  --searchbar-border-color: hsl(220, 13%, 30%);
183  --searchbar-bg: hsl(220, 13%, 22%, 0.5);
184  --searchbar-fg: hsl(220, 14%, 71%);
185  --searchbar-shadow-color: hsl(220, 13%, 15%);
186  --searchresults-header-fg: hsl(220, 14%, 60%);
187  --searchresults-li-bg: hsl(220, 13%, 25%);
188  --search-mark-bg: hsl(220, 93%, 60%);
189
190  --download-btn-bg: hsl(220, 90%, 30%, 0.5);
191  --download-btn-bg-hover: hsl(220, 90%, 50%, 0.4);
192  --download-btn-color: hsl(220, 90%, 95%);
193  --download-btn-border: hsla(220, 90%, 80%, 0.2);
194  --download-btn-border-hover: hsla(220, 90%, 80%, 0.4);
195  --download-btn-shadow: hsla(220, 50%, 60%, 0.15);
196
197  --search-btn-bg: hsl(220, 90%, 90%, 0.05);
198  --search-btn-bg-hover: hsl(220, 90%, 90%, 0.1);
199  --search-btn-border: hsla(220, 90%, 80%, 0.1);
200
201  --toast-bg: hsla(220, 20%, 98%, 0.05);
202  --toast-border: hsla(220, 93%, 70%, 0.2);
203  --toast-border-success: hsla(120, 90%, 60%, 0.3);
204  --toast-border-error: hsla(0, 90%, 80%, 0.3);
205
206  --footer-btn-bg: hsl(220, 90%, 95%, 0.01);
207  --footer-btn-bg-hover: hsl(220, 90%, 50%, 0.05);
208  --footer-btn-border: hsla(220, 90%, 90%, 0.05);
209  --footer-btn-border-hover: hsla(220, 90%, 80%, 0.2);
210}