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