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