1/* Globals */
  2
  3:root {
  4  --color-scheme: light;
  5
  6  --logo-brightness: brightness(1);
  7
  8  --sidebar-width: 300px;
  9  --sidebar-resize-indicator-width: 0px;
 10  --sidebar-resize-indicator-space: 2px;
 11  --page-padding: 15px;
 12  --content-max-width: 750px;
 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  --bg: hsla(50, 25%, 96%);
 23  --fg: hsl(220, 13%, 34%);
 24  --title-color: hsl(220, 92%, 42%);
 25
 26  --border: hsl(220, 13%, 80%);
 27  --border-light: hsl(220, 13%, 90%);
 28  --border-hover: hsl(220, 13%, 70%);
 29
 30  --media-bg: hsl(50, 25%, 92%);
 31
 32  --sidebar-fg: hsl(0, 0%, 0%);
 33  --sidebar-non-existant: #aaaaaa;
 34  --sidebar-active: hsl(220, 93%, 42%);
 35  --sidebar-active-bg: hsl(220, 93%, 42%, 0.1);
 36
 37  --divider: hsl(220, 93%, 42%, 0.15);
 38  --scrollbar: #8f8f8f;
 39
 40  --icons: #747474;
 41  --icons-hover: #000000;
 42  --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.15);
 43
 44  --links: hsl(220, 92%, 42%);
 45  --link-line-decoration: hsl(220, 93%, 42%, 0.2);
 46  --link-line-decoration-hover: hsl(220, 93%, 42%, 0.5);
 47
 48  --full-contrast: #000;
 49
 50  --inline-code-color: #301900;
 51  --code-text: hsl(220, 13%, 10%);
 52  --code-bg: hsl(220, 93%, 42%, 0.1);
 53  --keybinding-bg: hsl(0, 0%, 94%);
 54
 55  --pre-bg: #fff;
 56  --pre-border: hsla(220, 93%, 42%, 0.3);
 57  --pre-shadow: hsla(220, 93%, 42%, 0.07);
 58
 59  --theme-popup-bg: #fafafa;
 60  --theme-popup-border: #cccccc;
 61  --theme-hover: #e6e6e6;
 62
 63  --quote-bg: hsl(197, 37%, 96%);
 64  --quote-border: hsl(197, 37%, 84%);
 65
 66  --warning-border: hsl(25, 100%, 85%);
 67  --warning-bg: hsl(42, 100%, 60%, 0.1);
 68  --warning-icon: hsl(42, 100%, 30%);
 69
 70  --table-header-bg: hsl(220, 50%, 90%, 0.4);
 71  --table-border-color: hsl(220, 93%, 42%, 0.15);
 72  --table-alternate-bg: hsl(220, 10%, 90%, 0.4);
 73
 74  --searchbar-border-color: #aaa;
 75  --searchbar-bg: #fafafa;
 76  --searchbar-fg: #000;
 77  --searchbar-shadow-color: #aaa;
 78  --searchresults-header-fg: #666;
 79  --searchresults-border-color: #888;
 80  --searchresults-li-bg: #e4f2fe;
 81  --search-mark-bg: #a2cff5;
 82
 83  --download-btn-bg: hsl(220, 60%, 95%);
 84  --download-btn-bg-hover: hsl(220, 60%, 93%);
 85  --download-btn-color: hsl(220, 60%, 30%);
 86  --download-btn-border: hsla(220, 60%, 40%, 0.2);
 87  --download-btn-border-hover: hsla(220, 60%, 50%, 0.2);
 88  --download-btn-shadow: hsla(220, 40%, 60%, 0.1);
 89
 90  --toast-bg: hsla(220, 93%, 98%);
 91  --toast-border: hsla(220, 93%, 42%, 0.3);
 92  --toast-border-success: hsla(120, 73%, 42%, 0.3);
 93  --toast-border-error: hsla(0, 90%, 50%, 0.3);
 94
 95  --footer-btn-bg: hsl(220, 60%, 98%, 0.4);
 96  --footer-btn-bg-hover: hsl(220, 60%, 93%, 0.5);
 97  --footer-btn-border: hsla(220, 60%, 40%, 0.15);
 98  --footer-btn-border-hover: hsla(220, 60%, 50%, 0.2);
 99}
100
101.dark {
102  --color-scheme: dark;
103
104  --logo-brightness: brightness(2);
105
106  --bg: hsl(220, 13%, 10%);
107  --fg: hsl(220, 14%, 70%);
108  --title-color: hsl(220, 92%, 80%);
109
110  --border: hsl(220, 13%, 20%);
111  --border-light: hsl(220, 13%, 15%);
112  --border-hover: hsl(220, 13%, 40%);
113
114  --media-bg: hsl(220, 13%, 8%);
115
116  --sidebar-bg: hsl(220, 13%, 10%);
117  --sidebar-fg: hsl(220, 14%, 71%);
118  --sidebar-non-existant: #505254;
119  --sidebar-active: hsl(220, 92%, 75%);
120  --sidebar-active-bg: hsl(220, 93%, 42%, 0.25);
121
122  --divider: hsl(220, 13%, 20%);
123  --scrollbar: hsl(220, 13%, 30%);
124
125  --icons: hsl(220, 14%, 71%);
126  --icons-hover: hsl(220, 14%, 90%);
127  --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.4);
128
129  --links: hsl(220, 93%, 75%);
130  --link-line-decoration: hsl(220, 92%, 80%, 0.4);
131  --link-line-decoration-hover: hsl(220, 92%, 80%, 0.8);
132  --full-contrast: #fff;
133
134  --inline-code-color: hsl(40, 100%, 80%);
135  --code-text: hsl(220, 13%, 95%);
136  --code-bg: hsl(220, 93%, 50%, 0.2);
137  --keybinding-bg: hsl(0, 0%, 12%);
138
139  --pre-bg: hsl(220, 13%, 5%);
140  --pre-border: hsla(220, 93%, 70%, 0.3);
141  --pre-shadow: hsla(220, 93%, 70%, 0.1);
142
143  --theme-popup-bg: hsl(220, 13%, 15%);
144  --theme-popup-border: hsl(220, 13%, 20%);
145  --theme-hover: hsl(220, 13%, 25%);
146
147  --quote-bg: hsl(220, 13%, 25%, 0.4);
148  --quote-border: hsl(220, 13%, 32%, 0.5);
149
150  --table-border-color: hsl(220, 13%, 30%, 0.5);
151  --table-header-bg: hsl(220, 13%, 25%, 0.5);
152  --table-alternate-bg: hsl(220, 13%, 20%, 0.4);
153
154  --warning-border: hsl(25, 100%, 85%, 0.2);
155  --warning-bg: hsl(42, 100%, 40%, 0.1);
156  --warning-icon: hsl(42, 100%, 80%);
157
158  --searchbar-border-color: hsl(220, 13%, 30%);
159  --searchbar-bg: hsl(220, 13%, 22%, 0.5);
160  --searchbar-fg: hsl(220, 14%, 71%);
161  --searchbar-shadow-color: hsl(220, 13%, 15%);
162  --searchresults-header-fg: hsl(220, 14%, 60%);
163  --searchresults-border-color: hsl(220, 13%, 30%);
164  --searchresults-li-bg: hsl(220, 13%, 25%);
165  --search-mark-bg: hsl(220, 93%, 60%);
166
167  --download-btn-bg: hsl(220, 90%, 90%, 0.1);
168  --download-btn-bg-hover: hsl(220, 90%, 50%, 0.2);
169  --download-btn-color: hsl(220, 90%, 95%);
170  --download-btn-border: hsla(220, 90%, 80%, 0.2);
171  --download-btn-border-hover: hsla(220, 90%, 80%, 0.4);
172  --download-btn-shadow: hsla(220, 50%, 60%, 0.15);
173
174  --toast-bg: hsla(220, 20%, 98%, 0.05);
175  --toast-border: hsla(220, 93%, 70%, 0.2);
176  --toast-border-success: hsla(120, 90%, 60%, 0.3);
177  --toast-border-error: hsla(0, 90%, 80%, 0.3);
178
179  --footer-btn-bg: hsl(220, 90%, 95%, 0.01);
180  --footer-btn-bg-hover: hsl(220, 90%, 50%, 0.05);
181  --footer-btn-border: hsla(220, 90%, 90%, 0.05);
182  --footer-btn-border-hover: hsla(220, 90%, 80%, 0.2);
183}