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