1/* Base styles and content styles */
2
3@import "variables.css";
4
5:root {
6 /* Browser default font-size is 16px, this way 1 rem = 10px */
7 font-size: 62.5%;
8 color-scheme: var(--color-scheme);
9}
10
11html {
12 font-family: var(--font);
13 color: var(--fg);
14 background-color: var(--bg);
15 text-size-adjust: none;
16 -webkit-text-size-adjust: none;
17
18 text-rendering: geometricPrecision !important;
19 -webkit-font-smoothing: antialiased !important;
20 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005);
21}
22
23body {
24 margin: 0;
25 font-size: 1.6rem;
26 overflow: hidden;
27 height: 100vh;
28 overscroll-behavior-y: none;
29}
30
31#body-container {
32 display: flex;
33 flex-direction: column;
34 height: 100vh;
35 overflow: hidden;
36}
37
38code {
39 font-family: var(--mono-font) !important;
40 font-size: var(--code-font-size);
41 direction: ltr !important;
42}
43
44/* make long words/inline code not x overflow */
45main {
46 overflow-wrap: break-word;
47}
48
49.noise-pattern {
50 pointer-events: none;
51 user-select: none;
52 z-index: 105;
53 position: absolute;
54 inset: 0;
55 background-size: 180px;
56 background-repeat: repeat;
57 opacity: var(--noise-opacity);
58}
59
60/* make wide tables scroll if they overflow */
61.table-wrapper {
62 overflow-x: auto;
63}
64
65h1,
66h2,
67h3,
68h4,
69h5,
70h6 {
71 position: relative;
72 font-family: var(--title-font);
73 font-weight: 480;
74 color: var(--title-color);
75}
76
77/* Don't change font size in headers. */
78h1 code,
79h2 code,
80h3 code,
81h4 code,
82h5 code,
83h6 code {
84 font-size: unset;
85}
86
87.left {
88 float: left;
89}
90.right {
91 float: right;
92}
93.boring {
94 opacity: 0.6;
95}
96.hide-boring .boring {
97 display: none;
98}
99.hidden {
100 display: none !important;
101}
102
103h1 {
104 font-size: 3.4rem;
105}
106
107h2 {
108 padding-bottom: 1rem;
109 border-bottom: 1px solid;
110 border-color: var(--border-light);
111}
112
113h3 {
114 font-size: 2rem;
115 padding-bottom: 0.8rem;
116 border-bottom: 1px dashed;
117 border-color: var(--border-light);
118}
119
120h4 {
121 font-size: 1.8rem;
122}
123
124h5 {
125 font-size: 1.6rem;
126}
127
128h2,
129h3,
130h4,
131h5 {
132 margin-block-start: 1.5em;
133 margin-block-end: 0;
134}
135
136strong {
137 color: var(--full-contrast);
138}
139
140code:focus-visible,
141pre:focus-visible,
142li:focus-visible,
143button:focus-visible,
144a:focus-visible {
145 outline: 3px solid #094ece80;
146}
147
148.header + .header h3,
149.header + .header h4,
150.header + .header h5 {
151 margin-block-start: 1em;
152}
153
154h1:target::before,
155h2:target::before,
156h3:target::before,
157h4:target::before,
158h5:target::before,
159h6:target::before {
160 content: "»";
161 position: absolute;
162 left: -1.5ch;
163}
164
165hr {
166 border: 0px solid;
167 color: transparent;
168 width: 100%;
169 height: 1px;
170 background-color: var(--border-light);
171}
172
173/* This is broken on Safari as of version 14, but is fixed
174 in Safari Technology Preview 117 which I think will be Safari 14.2.
175 https://bugs.webkit.org/show_bug.cgi?id=218076
176*/
177:target {
178 /* Safari does not support logical properties */
179 scroll-margin-top: calc(var(--menu-bar-height) + 2rem);
180}
181
182.page-wrapper {
183 box-sizing: border-box;
184 background-color: var(--bg);
185 display: flex;
186 flex: 1;
187 overflow: hidden;
188 min-height: 0;
189}
190
191.page {
192 outline: 0;
193 flex: 1;
194 display: flex;
195 flex-direction: column;
196 overflow-x: hidden;
197 overflow-y: auto;
198 overscroll-behavior-y: none;
199 min-width: 0;
200 position: relative;
201}
202
203.no-js .page-wrapper,
204.js:not(.sidebar-resizing) .page-wrapper {
205 transition:
206 margin-left 0.3s ease,
207 transform 0.3s ease; /* Animation: slide away */
208}
209[dir="rtl"] .js:not(.sidebar-resizing) .page-wrapper {
210 transition:
211 margin-right 0.3s ease,
212 transform 0.3s ease; /* Animation: slide away */
213}
214
215.content {
216 padding: 48px 32px 0 32px;
217 display: flex;
218 justify-content: space-between;
219 gap: 36px;
220}
221
222.content main {
223 margin-inline-start: auto;
224 margin-inline-end: auto;
225 max-width: var(--content-max-width);
226}
227
228.content p {
229 line-height: 1.625em;
230}
231.content div.video {
232 z-index: 150;
233 margin-top: 1rem;
234 border: 1px solid;
235 border-color: var(--border);
236 border-radius: 8px;
237 overflow: clip;
238}
239.content div.video iframe {
240 margin: 0;
241}
242.content ol {
243 marker: none;
244 line-height: 1.8;
245 padding-left: 2em;
246 ::marker {
247 font-size: 1.4rem;
248 }
249 li {
250 padding-left: 0;
251 }
252}
253.content ul {
254 line-height: 1.8;
255 padding-left: 1.8em;
256}
257.content a {
258 text-decoration: underline;
259 text-decoration-color: var(--link-line-decoration);
260}
261.content a:hover {
262 text-decoration-color: var(--link-line-decoration-hover);
263}
264.content img,
265.content video {
266 position: relative;
267 z-index: 150;
268 max-width: 100%;
269 background-color: var(--media-bg);
270 border: 1px solid;
271 border-color: var(--border);
272 border-radius: 8px;
273 overflow: clip;
274}
275.content .header:link,
276.content .header:visited {
277 color: var(--title-color);
278}
279.content .header:link,
280.content .header:visited:hover {
281 text-decoration: none;
282}
283
284iframe {
285 margin-top: 1rem;
286 margin-bottom: 10rem;
287}
288
289table {
290 margin-top: 1.4rem;
291 width: 100%;
292 border-collapse: collapse;
293 font-size: 1.4rem;
294}
295table td {
296 padding: 4px 12px;
297 border: 1px var(--table-border-color) solid;
298}
299table thead {
300 background: var(--table-header-bg);
301}
302table thead td {
303 font-weight: 700;
304 border: none;
305}
306table thead th {
307 padding: 6px 12px;
308 color: var(--full-contrast);
309 text-align: left;
310 border: 1px var(--table-border-color) solid;
311}
312table thead tr {
313 border: 1px var(--table-border-color) solid;
314}
315/* Alternate background colors for rows */
316table tbody tr:nth-child(2n) {
317 background: var(--table-alternate-bg);
318}
319
320blockquote {
321 margin: auto;
322 margin-top: 1rem;
323 padding: 1rem 1.25rem;
324 color: var(--full-contrast);
325 background-color: var(--quote-bg);
326 border: 1px solid var(--quote-border);
327}
328
329blockquote > p {
330 margin: 0;
331 padding-left: 2.6rem;
332 font-size: 1.4rem;
333}
334
335blockquote:before {
336 --size: 1.4rem;
337 position: absolute;
338 content: "ⓘ";
339 margin: 0.3rem 0;
340 width: var(--size);
341 height: var(--size);
342 font-size: var(--size);
343 font-weight: bold;
344 color: var(--icons);
345 display: flex;
346 align-items: center;
347 justify-content: center;
348 line-height: 1.625em;
349}
350
351blockquote .warning:before {
352 background-color: var(--quote-bg);
353}
354
355.warning {
356 margin: auto;
357 padding: 1rem 1.25rem;
358 color: var(--full-contrast);
359 background-color: var(--warning-bg);
360 border: 1px solid var(--warning-border);
361}
362
363.warning > p {
364 margin: 0;
365 padding-left: 2.6rem;
366 font-size: 1.4rem;
367}
368
369.warning:before {
370 --size: 1.4rem;
371 position: absolute;
372 content: "ⓘ";
373 margin: 0.3rem 0;
374 width: var(--size);
375 height: var(--size);
376 font-size: var(--size);
377 font-weight: bold;
378 color: var(--warning-icon);
379 display: flex;
380 align-items: center;
381 justify-content: center;
382 line-height: 1.625em;
383}
384
385kbd {
386 background-color: rgba(8, 76, 207, 0.1);
387 border-radius: 4px;
388 border: solid 1px var(--popover-border);
389 box-shadow: inset 0 -1px 0 var(--theme-hover);
390 display: inline-block;
391 font-size: var(--code-font-size);
392 font-family: var(--mono-font);
393 line-height: 10px;
394 padding: 4px 5px;
395 vertical-align: middle;
396}
397
398:not(.footnote-definition) + .footnote-definition,
399.footnote-definition + :not(.footnote-definition) {
400 margin-block-start: 2em;
401}
402.footnote-definition {
403 font-size: 1.4rem;
404 margin: 0.5em 0;
405 border-bottom: 1px solid;
406 border-color: var(--divider);
407}
408.footnote-definition p {
409 display: inline;
410}
411
412.tooltiptext {
413 position: absolute;
414 visibility: hidden;
415 color: #fff;
416 background-color: #333;
417 transform: translateX(
418 -50%
419 ); /* Center by moving tooltip 50% of its width left */
420 left: -8px; /* Half of the width of the icon */
421 top: -35px;
422 font-size: 0.8em;
423 text-align: center;
424 border-radius: 6px;
425 padding: 5px 8px;
426 margin: 5px;
427 z-index: 1000;
428}
429.tooltipped .tooltiptext {
430 visibility: visible;
431}
432
433.result-no-output {
434 font-style: italic;
435}
436
437code:not(pre code).hljs {
438 color: var(--code-text) !important;
439 background-color: var(--code-bg) !important;
440}
441
442@media only screen and (max-width: 1020px) {
443 .content {
444 padding: 16px 32px 0 32px;
445 }
446
447 .content main {
448 width: 100%;
449 }
450}
451
452@media only screen and (max-width: 400px) {
453 .content {
454 padding: 16px 16px 0 16px;
455 }
456}