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