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