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 line-height: 1.8;
172 padding-left: 1.8em;
173}
174.content ul {
175 line-height: 1.8;
176 padding-left: 1.8em;
177}
178.content li {
179 padding-left: 0.5em;
180}
181.content a {
182 text-decoration: underline;
183 text-decoration-color: var(--link-line-decoration);
184}
185.content a:hover {
186 text-decoration-color: var(--link-line-decoration-hover);
187}
188.content img,
189.content video {
190 max-width: 100%;
191 background-color: var(--media-bg);
192 border: 1px solid;
193 border-color: var(--border);
194 border-radius: 8px;
195 overflow: clip;
196}
197.content .header:link,
198.content .header:visited {
199 color: var(--title-color);
200}
201.content .header:link,
202.content .header:visited:hover {
203 text-decoration: none;
204}
205
206iframe {
207 margin-top: 1rem;
208 margin-bottom: 10rem;
209}
210
211table {
212 width: 100%;
213 border-collapse: collapse;
214 font-size: 1.4rem;
215}
216table td {
217 padding: 4px 12px;
218 border: 1px var(--table-border-color) solid;
219}
220table thead {
221 background: var(--table-header-bg);
222}
223table thead td {
224 font-weight: 700;
225 border: none;
226}
227table thead th {
228 padding: 6px 12px;
229 color: var(--full-contrast);
230 text-align: left;
231 border: 1px var(--table-border-color) solid;
232}
233table thead tr {
234 border: 1px var(--table-border-color) solid;
235}
236/* Alternate background colors for rows */
237table tbody tr:nth-child(2n) {
238 background: var(--table-alternate-bg);
239}
240
241blockquote {
242 margin: auto;
243 margin-top: 1rem;
244 padding: 1rem 1.25rem;
245 color: var(--full-contrast);
246 background-color: var(--quote-bg);
247 border: 1px solid var(--quote-border);
248}
249
250blockquote > p {
251 margin: 0;
252 padding-left: 2.6rem;
253 font-size: 1.4rem;
254}
255
256blockquote:before {
257 position: absolute;
258 content: "ⓘ";
259 margin: 0.3rem 0;
260 width: 1.6rem;
261 height: 1.6rem;
262 font-size: 1.6rem;
263 font-weight: bold;
264 color: var(--icons);
265 display: flex;
266 align-items: center;
267 justify-content: center;
268 line-height: 1.625em;
269}
270
271blockquote .warning:before {
272 background-color: var(--quote-bg);
273}
274
275.warning {
276 margin: auto;
277 padding: 1rem 1.25rem;
278 color: var(--full-contrast);
279 background-color: var(--warning-bg);
280 border: 1px solid var(--warning-border);
281}
282
283.warning > p {
284 margin: 0;
285 padding-left: 2.6rem;
286 font-size: 1.4rem;
287}
288
289.warning:before {
290 position: absolute;
291 content: "ⓘ";
292 margin: 0.3rem 0;
293 width: 1.6rem;
294 height: 1.6rem;
295 font-size: 1.6rem;
296 font-weight: bold;
297 color: var(--warning-icon);
298 display: flex;
299 align-items: center;
300 justify-content: center;
301 line-height: 1.625em;
302}
303
304kbd {
305 background-color: rgba(8, 76, 207, 0.1);
306 border-radius: 4px;
307 border: solid 1px var(--theme-popup-border);
308 box-shadow: inset 0 -1px 0 var(--theme-hover);
309 display: inline-block;
310 font-size: var(--code-font-size);
311 font-family: var(--mono-font);
312 line-height: 10px;
313 padding: 4px 5px;
314 vertical-align: middle;
315}
316
317:not(.footnote-definition) + .footnote-definition,
318.footnote-definition + :not(.footnote-definition) {
319 margin-block-start: 2em;
320}
321.footnote-definition {
322 font-size: 1.4rem;
323 margin: 0.5em 0;
324 border-bottom: 1px solid;
325 border-color: var(--divider);
326}
327.footnote-definition p {
328 display: inline;
329}
330
331.tooltiptext {
332 position: absolute;
333 visibility: hidden;
334 color: #fff;
335 background-color: #333;
336 transform: translateX(
337 -50%
338 ); /* Center by moving tooltip 50% of its width left */
339 left: -8px; /* Half of the width of the icon */
340 top: -35px;
341 font-size: 0.8em;
342 text-align: center;
343 border-radius: 6px;
344 padding: 5px 8px;
345 margin: 5px;
346 z-index: 1000;
347}
348.tooltipped .tooltiptext {
349 visibility: visible;
350}
351
352.chapter li.part-title {
353 font-size: 18px;
354 font-family: var(--title-font);
355 font-weight: 520;
356 color: var(--title-color);
357 margin: 5px 0;
358 margin-top: 2rem;
359}
360
361.result-no-output {
362 font-style: italic;
363}
364
365code:not(pre code).hljs {
366 color: var(--code-text) !important;
367 background-color: var(--code-bg) !important;
368}