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