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: normal;
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: 2em;
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) + 0.5em);
117}
118
119.page {
120 outline: 0;
121 padding: 0 var(--page-padding);
122 margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
123}
124.page-wrapper {
125 box-sizing: border-box;
126 background-color: var(--bg);
127}
128.no-js .page-wrapper,
129.js:not(.sidebar-resizing) .page-wrapper {
130 transition:
131 margin-left 0.3s ease,
132 transform 0.3s ease; /* Animation: slide away */
133}
134[dir="rtl"] .js:not(.sidebar-resizing) .page-wrapper {
135 transition:
136 margin-right 0.3s ease,
137 transform 0.3s ease; /* Animation: slide away */
138}
139
140.content {
141 overflow-y: auto;
142 padding: 24px 4px 48px 4px;
143}
144.content main {
145 margin-inline-start: auto;
146 margin-inline-end: auto;
147 max-width: var(--content-max-width);
148}
149.content p {
150 line-height: 1.625em;
151}
152.content ol {
153 line-height: 1.625em;
154}
155.content ul {
156 line-height: 1.625em;
157}
158.content a {
159 text-decoration: underline;
160 text-decoration-color: hsl(219, 93%, 42%, 0.2);
161}
162.content a:hover {
163 text-decoration-color: hsl(219, 93%, 42%, 0.5);
164}
165.content img,
166.content video {
167 max-width: 100%;
168}
169.content .header:link,
170.content .header:visited {
171 color: var(--title-color);
172}
173.content .header:link,
174.content .header:visited:hover {
175 text-decoration: none;
176}
177
178table {
179 margin: 0 auto;
180 border-collapse: collapse;
181}
182table td {
183 padding: 3px 20px;
184 border: 1px var(--table-border-color) solid;
185}
186table thead {
187 background: var(--table-header-bg);
188}
189table thead td {
190 font-weight: 700;
191 border: none;
192}
193table thead th {
194 padding: 3px 20px;
195}
196table thead tr {
197 border: 1px var(--table-header-bg) solid;
198}
199/* Alternate background colors for rows */
200table tbody tr:nth-child(2n) {
201 background: var(--table-alternate-bg);
202}
203
204blockquote {
205 margin: auto;
206 margin-top: 1rem;
207 padding: 1rem 1.25rem;
208 color: var(--fg);
209 background-color: var(--quote-bg);
210 border: 1px solid var(--quote-border);
211}
212
213blockquote > p {
214 margin: 0;
215 padding-left: 2.6rem;
216 font-size: 1.4rem;
217}
218
219blockquote:before {
220 position: absolute;
221 content: "ⓘ";
222 margin: 0.3rem 0;
223 width: 1.6rem;
224 height: 1.6rem;
225 font-size: 1.6rem;
226 font-weight: bold;
227 color: var(--icons);
228 display: flex;
229 align-items: center;
230 justify-content: center;
231 line-height: 1.625em;
232}
233
234blockquote .warning:before {
235 background-color: var(--quote-bg);
236}
237
238.warning {
239 margin: auto;
240 padding: 1rem 1.25rem;
241 background-color: var(--warning-bg);
242 border: 1px solid var(--warning-border);
243}
244
245.warning > p {
246 margin: 0;
247 padding-left: 2.6rem;
248 font-size: 1.4rem;
249}
250
251.warning:before {
252 position: absolute;
253 content: "ⓘ";
254 margin: 0.3rem 0;
255 width: 1.6rem;
256 height: 1.6rem;
257 font-size: 1.6rem;
258 font-weight: bold;
259 color: var(--warning-icon);
260 display: flex;
261 align-items: center;
262 justify-content: center;
263 line-height: 1.625em;
264}
265
266kbd {
267 background-color: rgba(8, 76, 207, 0.1);
268 border-radius: 4px;
269 border: solid 1px var(--theme-popup-border);
270 box-shadow: inset 0 -1px 0 var(--theme-hover);
271 display: inline-block;
272 font-size: var(--code-font-size);
273 font-family: var(--mono-font);
274 line-height: 10px;
275 padding: 4px 5px;
276 vertical-align: middle;
277}
278
279:not(.footnote-definition) + .footnote-definition,
280.footnote-definition + :not(.footnote-definition) {
281 margin-block-start: 2em;
282}
283.footnote-definition {
284 font-size: 0.9em;
285 margin: 0.5em 0;
286}
287.footnote-definition p {
288 display: inline;
289}
290
291.tooltiptext {
292 position: absolute;
293 visibility: hidden;
294 color: #fff;
295 background-color: #333;
296 transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
297 left: -8px; /* Half of the width of the icon */
298 top: -35px;
299 font-size: 0.8em;
300 text-align: center;
301 border-radius: 6px;
302 padding: 5px 8px;
303 margin: 5px;
304 z-index: 1000;
305}
306.tooltipped .tooltiptext {
307 visibility: visible;
308}
309
310.chapter li.part-title {
311 font-size: 18px;
312 font-family: var(--title-font);
313 color: var(--title-color);
314 margin: 5px 0;
315 margin-top: 2rem;
316}
317
318.result-no-output {
319 font-style: italic;
320}
321
322code.hljs {
323 color: rgb(75, 83, 97) !important;
324 background-color: rgba(8, 76, 207, 0.1);
325}