1/* CSS for UI elements (a.k.a. chrome) */
2
3@import "variables.css";
4
5html {
6 background-color: rgb(246, 245, 240);
7 scrollbar-color: var(--scrollbar) var(--bg);
8}
9#searchresults a,
10.content a:link,
11a:visited,
12a > .hljs {
13 color: var(--links);
14}
15
16/*
17 body-container is necessary because mobile browsers don't seem to like
18 overflow-x on the body tag when there is a <meta name="viewport"> tag.
19*/
20#body-container {
21 /*
22 This is used when the sidebar pushes the body content off the side of
23 the screen on small screens. Without it, dragging on mobile Safari
24 will want to reposition the viewport in a weird way.
25 */
26 overflow-x: clip;
27}
28
29/* Menu Bar */
30
31#menu-bar,
32#menu-bar-hover-placeholder {
33 z-index: 101;
34 margin: auto calc(0px - var(--page-padding));
35}
36#menu-bar {
37 padding: 16px;
38 position: relative;
39 display: flex;
40 flex-wrap: wrap;
41 background-color: var(--bg);
42 border-block-end-color: var(--bg);
43 border-block-end-width: 1px;
44 border-block-end-style: solid;
45}
46#menu-bar.sticky,
47.js #menu-bar-hover-placeholder:hover + #menu-bar,
48.js #menu-bar:hover,
49.js.sidebar-visible #menu-bar {
50 position: -webkit-sticky;
51 position: sticky;
52 top: 0 !important;
53}
54#menu-bar-hover-placeholder {
55 position: sticky;
56 position: -webkit-sticky;
57 top: 0;
58 height: var(--menu-bar-height);
59}
60#menu-bar.bordered {
61 border-block-end-color: var(--table-border-color);
62}
63#menu-bar i,
64#menu-bar .icon-button {
65 position: relative;
66 height: 3rem;
67 width: 3rem;
68 z-index: 10;
69 display: flex;
70 align-items: center;
71 justify-content: center;
72 cursor: pointer;
73 transition: color 0.5s;
74}
75#menu-bar .icon-button:hover {
76 background-color: hsl(219, 93%, 42%, 0.15);
77}
78
79@media only screen and (max-width: 420px) {
80 #menu-bar i,
81 #menu-bar .icon-button {
82 padding: 0 5px;
83 }
84}
85
86.icon-button {
87 border: none;
88 background: none;
89 padding: 0;
90 color: inherit;
91}
92.icon-button i {
93 margin: 0;
94}
95
96.right-buttons {
97 display: flex;
98 align-items: center;
99}
100.right-buttons a {
101 text-decoration: none;
102}
103
104.left-buttons {
105 display: flex;
106 align-items: center;
107 gap: 0.5rem;
108}
109.no-js .left-buttons button {
110 display: none;
111}
112
113.menu-title {
114 display: inline-flex;
115 justify-content: center;
116 align-items: center;
117 flex: 1;
118 overflow: hidden;
119}
120.js .menu-title {
121 cursor: pointer;
122}
123
124.menu-bar,
125.menu-bar:visited,
126.nav-chapters,
127.nav-chapters:visited,
128.mobile-nav-chapters,
129.mobile-nav-chapters:visited,
130.menu-bar .icon-button,
131.menu-bar a i {
132 color: var(--icons);
133}
134
135.menu-bar i:hover,
136.menu-bar .icon-button:hover,
137.nav-chapters:hover,
138.mobile-nav-chapters i:hover {
139 color: var(--icons-hover);
140}
141
142/* Nav Icons */
143
144.nav-chapters {
145 font-size: 2.5em;
146 text-align: center;
147 text-decoration: none;
148
149 position: fixed;
150 top: 0;
151 bottom: 0;
152 margin: 0;
153 max-width: 150px;
154 min-width: 90px;
155
156 display: flex;
157 justify-content: center;
158 align-content: center;
159 flex-direction: column;
160
161 transition:
162 color 0.5s,
163 background-color 0.5s;
164}
165
166.nav-chapters:hover {
167 text-decoration: none;
168 background-color: var(--theme-hover);
169 transition:
170 background-color 0.15s,
171 color 0.15s;
172}
173
174.nav-wrapper {
175 margin-block-start: 50px;
176 display: none;
177}
178
179.mobile-nav-chapters {
180 font-size: 2.5em;
181 text-align: center;
182 text-decoration: none;
183 width: 90px;
184 border-radius: 5px;
185 background-color: var(--sidebar-bg);
186}
187
188/* Only Firefox supports flow-relative values */
189.previous {
190 float: left;
191}
192[dir="rtl"] .previous {
193 float: right;
194}
195
196/* Only Firefox supports flow-relative values */
197.next {
198 float: right;
199 right: var(--page-padding);
200}
201[dir="rtl"] .next {
202 float: left;
203 right: unset;
204 left: var(--page-padding);
205}
206
207/* Use the correct buttons for RTL layouts*/
208[dir="rtl"] .previous i.fa-angle-left:before {
209 content: "\f105";
210}
211[dir="rtl"] .next i.fa-angle-right:before {
212 content: "\f104";
213}
214
215@media only screen and (max-width: 1080px) {
216 .nav-wide-wrapper {
217 display: none;
218 }
219 .nav-wrapper {
220 display: block;
221 }
222}
223
224/* sidebar-visible */
225@media only screen and (max-width: 1380px) {
226 #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper {
227 display: none;
228 }
229 #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper {
230 display: block;
231 }
232}
233
234/* Inline code */
235
236:not(pre) > .hljs {
237 display: inline;
238 padding: 0.1em 0.3em;
239 border-radius: 3px;
240}
241
242:not(pre):not(a) > .hljs {
243 color: var(--inline-code-color);
244 overflow-x: initial;
245}
246
247a:hover > .hljs {
248 text-decoration: underline;
249}
250
251pre {
252 background-color: white;
253 border: 1px rgba(8, 76, 207, 0.3) solid;
254 box-shadow: rgba(8, 76, 207, 0.07) 4px 4px 0px 0px;
255 position: relative;
256}
257pre > .hljs {
258 background-color: initial;
259}
260pre > .buttons {
261 position: absolute;
262 z-index: 100;
263 right: 0px;
264 top: 2px;
265 margin: 0px;
266 padding: 2px 0px;
267
268 color: var(--sidebar-fg);
269 cursor: pointer;
270 visibility: hidden;
271 opacity: 0;
272 transition:
273 visibility 0.1s linear,
274 opacity 0.1s linear;
275}
276pre:hover > .buttons {
277 visibility: visible;
278 opacity: 1;
279}
280pre > .buttons :hover {
281 color: var(--sidebar-active);
282 border-color: var(--icons-hover);
283 background-color: var(--theme-hover);
284}
285pre > .buttons i {
286 margin-inline-start: 8px;
287}
288pre > .buttons button {
289 cursor: inherit;
290 margin: 0px 5px;
291 padding: 3px 5px;
292 font-size: 14px;
293
294 border-style: solid;
295 border-width: 1px;
296 border-radius: 4px;
297 border-color: var(--icons);
298 background-color: var(--theme-popup-bg);
299 transition: 100ms;
300 transition-property: color, border-color, background-color;
301 color: var(--icons);
302}
303@media (pointer: coarse) {
304 pre > .buttons button {
305 /* On mobile, make it easier to tap buttons. */
306 padding: 0.3rem 1rem;
307 }
308
309 .sidebar-resize-indicator {
310 /* Hide resize indicator on devices with limited accuracy */
311 display: none;
312 }
313}
314pre > code {
315 display: block;
316 padding: 1rem;
317}
318
319/* FIXME: ACE editors overlap their buttons because ACE does absolute
320 positioning within the code block which breaks padding. The only solution I
321 can think of is to move the padding to the outer pre tag (or insert a div
322 wrapper), but that would require fixing a whole bunch of CSS rules.
323*/
324.hljs.ace_editor {
325 padding: 0rem 0rem;
326}
327
328pre > .result {
329 margin-block-start: 10px;
330}
331
332/* Search */
333
334#searchresults a {
335 text-decoration: none;
336}
337
338mark {
339 border-radius: 2px;
340 padding-block-start: 0;
341 padding-block-end: 1px;
342 padding-inline-start: 3px;
343 padding-inline-end: 3px;
344 margin-block-start: 0;
345 margin-block-end: -1px;
346 margin-inline-start: -3px;
347 margin-inline-end: -3px;
348 background-color: var(--search-mark-bg);
349 transition: background-color 300ms linear;
350 cursor: pointer;
351}
352
353mark.fade-out {
354 background-color: rgba(0, 0, 0, 0) !important;
355 cursor: auto;
356}
357
358.searchbar-outer {
359 margin-inline-start: auto;
360 margin-inline-end: auto;
361 max-width: var(--content-max-width);
362}
363
364#searchbar {
365 width: 100%;
366 margin-block-start: 5px;
367 margin-block-end: 0;
368 margin-inline-start: auto;
369 margin-inline-end: auto;
370 padding: 10px 16px;
371 transition: box-shadow 300ms ease-in-out;
372 border: 1px solid var(--searchbar-border-color);
373 border-radius: 3px;
374 background-color: var(--searchbar-bg);
375 color: var(--searchbar-fg);
376}
377#searchbar:focus,
378#searchbar.active {
379 box-shadow: 0 0 3px var(--searchbar-shadow-color);
380}
381
382.searchresults-header {
383 font-weight: bold;
384 font-size: 1em;
385 padding-block-start: 18px;
386 padding-block-end: 0;
387 padding-inline-start: 5px;
388 padding-inline-end: 0;
389 color: var(--searchresults-header-fg);
390}
391
392.searchresults-outer {
393 margin-inline-start: auto;
394 margin-inline-end: auto;
395 max-width: var(--content-max-width);
396 border-block-end: 1px dashed var(--searchresults-border-color);
397}
398
399ul#searchresults {
400 list-style: none;
401 padding-inline-start: 20px;
402}
403ul#searchresults li {
404 margin: 10px 0px;
405 padding: 2px;
406 border-radius: 2px;
407}
408ul#searchresults li.focus {
409 background-color: var(--searchresults-li-bg);
410}
411ul#searchresults span.teaser {
412 display: block;
413 clear: both;
414 margin-block-start: 5px;
415 margin-block-end: 0;
416 margin-inline-start: 20px;
417 margin-inline-end: 0;
418 font-size: 0.8em;
419}
420ul#searchresults span.teaser em {
421 font-weight: bold;
422 font-style: normal;
423}
424
425/* Sidebar */
426
427.sidebar {
428 position: fixed;
429 left: 0;
430 top: 0;
431 bottom: 0;
432 width: var(--sidebar-width);
433 font-size: 0.875em;
434 box-sizing: border-box;
435 -webkit-overflow-scrolling: touch;
436 overscroll-behavior-y: contain;
437 background-color: var(--sidebar-bg);
438 color: var(--sidebar-fg);
439 border-right: 1px solid hsl(219, 93%, 42%, 0.15);
440}
441[dir="rtl"] .sidebar {
442 left: unset;
443 right: 0;
444}
445.sidebar-resizing {
446 -moz-user-select: none;
447 -webkit-user-select: none;
448 -ms-user-select: none;
449 user-select: none;
450}
451.no-js .sidebar,
452.js:not(.sidebar-resizing) .sidebar {
453 transition: transform 0.3s; /* Animation: slide away */
454}
455.sidebar code {
456 line-height: 2em;
457}
458.sidebar .sidebar-scrollbox {
459 overflow-y: auto;
460 position: absolute;
461 top: 0;
462 bottom: 0;
463 left: 0;
464 right: 0;
465 padding: 12px 12px 12px 24px;
466}
467.sidebar .sidebar-resize-handle {
468 position: absolute;
469 cursor: col-resize;
470 width: 0;
471 right: calc(var(--sidebar-resize-indicator-width) * -1);
472 top: 0;
473 bottom: 0;
474 display: flex;
475 align-items: center;
476}
477
478.sidebar-resize-handle .sidebar-resize-indicator {
479 width: 100%;
480 height: 12px;
481 background-color: var(--icons);
482 margin-inline-start: var(--sidebar-resize-indicator-space);
483}
484
485[dir="rtl"] .sidebar .sidebar-resize-handle {
486 left: calc(var(--sidebar-resize-indicator-width) * -1);
487 right: unset;
488}
489.js .sidebar .sidebar-resize-handle {
490 cursor: col-resize;
491 width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
492}
493/* sidebar-hidden */
494#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
495 transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
496 z-index: -1;
497}
498[dir="rtl"] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
499 transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
500}
501.sidebar::-webkit-scrollbar {
502 background: var(--sidebar-bg);
503}
504.sidebar::-webkit-scrollbar-thumb {
505 background: var(--scrollbar);
506}
507
508/* sidebar-visible */
509#sidebar-toggle-anchor:checked ~ .page-wrapper {
510 transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
511}
512[dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
513 transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
514}
515@media only screen and (min-width: 620px) {
516 #sidebar-toggle-anchor:checked ~ .page-wrapper {
517 transform: none;
518 margin-inline-start: var(--sidebar-width);
519 }
520 [dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
521 transform: none;
522 }
523}
524
525.chapter {
526 list-style: none outside none;
527 padding-inline-start: 0;
528 line-height: 2.2em;
529}
530
531.chapter ol {
532 width: 100%;
533}
534
535.chapter li {
536 display: flex;
537 color: var(--sidebar-non-existant);
538}
539.chapter li a {
540 display: block;
541 padding: 0;
542 text-decoration: none;
543 color: var(--sidebar-fg);
544}
545
546.chapter li a:hover {
547 color: var(--sidebar-active);
548}
549
550.chapter li a.active {
551 color: var(--sidebar-active);
552 background-color: rgba(8, 76, 207, 0.1);
553}
554
555.chapter li > a.toggle {
556 cursor: pointer;
557 display: block;
558 margin-inline-start: auto;
559 padding: 0 10px;
560 user-select: none;
561 opacity: 0.68;
562}
563
564.chapter li > a.toggle div {
565 transition: transform 0.5s;
566}
567
568/* collapse the section */
569.chapter li:not(.expanded) + li > ol {
570 display: none;
571}
572
573.chapter li.chapter-item {
574 line-height: 1.5em;
575 margin-block-start: 0.6em;
576}
577
578.chapter li.expanded > a.toggle div {
579 transform: rotate(90deg);
580}
581
582.spacer {
583 width: 100%;
584 height: 3px;
585 margin: 5px 0px;
586}
587.chapter .spacer {
588 background-color: var(--sidebar-spacer);
589}
590
591@media (-moz-touch-enabled: 1), (pointer: coarse) {
592 .chapter li a {
593 padding: 5px 0;
594 }
595 .spacer {
596 margin: 10px 0;
597 }
598}
599
600.section {
601 list-style: none outside none;
602 padding-inline-start: 20px;
603 line-height: 1.9em;
604}
605
606/* Theme Menu Popup */
607
608.theme-popup {
609 position: absolute;
610 left: 10px;
611 top: var(--menu-bar-height);
612 z-index: 1000;
613 border-radius: 4px;
614 font-size: 0.7em;
615 color: var(--fg);
616 background: var(--theme-popup-bg);
617 border: 1px solid var(--theme-popup-border);
618 margin: 0;
619 padding: 0;
620 list-style: none;
621 display: none;
622 /* Don't let the children's background extend past the rounded corners. */
623 overflow: hidden;
624}
625[dir="rtl"] .theme-popup {
626 left: unset;
627 right: 10px;
628}
629.theme-popup .default {
630 color: var(--icons);
631}
632.theme-popup .theme {
633 width: 100%;
634 border: 0;
635 margin: 0;
636 padding: 2px 20px;
637 line-height: 25px;
638 white-space: nowrap;
639 text-align: start;
640 cursor: pointer;
641 color: inherit;
642 background: inherit;
643 font-size: inherit;
644}
645.theme-popup .theme:hover {
646 background-color: var(--theme-hover);
647}
648
649.theme-selected::before {
650 display: inline-block;
651 content: "✓";
652 margin-inline-start: -14px;
653 width: 14px;
654}
655
656.download-button {
657 background: #dde4f1;
658 color: var(--link-color);
659 padding: 4px 8px;
660 border: 1px solid #a8bee9;
661 font-size: 14px;
662}