1/* CSS for UI elements (a.k.a. chrome) */
2
3@import "variables.css";
4
5html {
6 background-color: var(--bg);
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.icon-logo-img {
17 display: block;
18}
19
20.icon-button {
21 position: relative;
22 height: 28px;
23 width: 28px;
24 z-index: 10;
25 display: flex;
26 align-items: center;
27 justify-content: center;
28 cursor: pointer;
29 transition: color 0.5s;
30 border: 0;
31 background-color: transparent;
32 border-radius: 4px;
33 color: var(--icons);
34}
35
36.icon-button:hover {
37 color: var(--icons-hover);
38 background-color: var(--icon-btn-bg-hover);
39}
40
41.ib-hidden-desktop {
42 display: none;
43}
44
45.header-bar {
46 position: sticky;
47 top: 0;
48 z-index: 100;
49 padding: 12px 16px;
50 background-color: var(--sidebar-bg);
51 border-bottom: 1px solid var(--divider);
52 display: flex;
53 align-items: center;
54 justify-content: space-between;
55 flex-shrink: 0;
56}
57
58.header-bar .left-container {
59 width: 160px;
60 display: flex;
61 align-items: center;
62 gap: 8px;
63}
64
65.header-bar .right-container {
66 width: 160px;
67 display: flex;
68 align-items: center;
69 gap: 4px;
70}
71
72.logo-nav {
73 display: flex;
74 align-items: center;
75 justify-content: center;
76 filter: var(--logo-brightness);
77}
78
79.nav-chapters {
80 font-size: 2.5em;
81 text-align: center;
82 text-decoration: none;
83
84 position: fixed;
85 top: 0;
86 bottom: 0;
87 margin: 0;
88 max-width: 150px;
89 min-width: 90px;
90
91 display: flex;
92 justify-content: center;
93 align-content: center;
94 flex-direction: column;
95
96 transition:
97 color 0.5s,
98 background-color 0.5s;
99}
100
101.nav-chapters:hover {
102 text-decoration: none;
103 background-color: var(--theme-hover);
104 transition:
105 background-color 0.15s,
106 color 0.15s;
107}
108
109.nav-wrapper {
110 margin-block-start: 50px;
111 display: none;
112}
113
114.footer-buttons {
115 display: flex;
116 justify-content: space-between;
117 align-items: center;
118 gap: 1rem;
119 padding: 24px 0;
120}
121
122.footer-button {
123 width: 100%;
124 padding: 12px;
125 display: flex;
126 align-items: center;
127 justify-content: center;
128 gap: 0.5rem;
129 background-color: var(--footer-btn-bg);
130 border: 1px solid var(--footer-btn-border);
131 border-radius: 0.5rem;
132 font-size: 0.9em;
133}
134
135.footer-button:hover {
136 background-color: var(--footer-btn-bg-hover);
137 border-color: var(--footer-btn-border-hover);
138}
139
140.footer-button i {
141 text-decoration: underline !important;
142 text-decoration-color: transparent !important;
143}
144
145.footer {
146 display: flex;
147 align-items: center;
148 justify-content: center;
149 flex-wrap: wrap;
150 gap: 0.5rem;
151 padding: 24px 0;
152 border-top: 1px dashed var(--border-footer);
153}
154
155.footer-link {
156 font-size: 1.25rem;
157 color: var(--links);
158 text-decoration: underline;
159 text-decoration-color: var(--link-line-decoration);
160 text-wrap-mode: nowrap;
161
162 :hover {
163 text-decoration-color: var(--link-line-decoration-hover);
164 }
165}
166
167.footer-separator {
168 color: var(--border-light);
169 font-size: 0.8em;
170}
171
172.footer-logo {
173 height: 16px;
174 border-radius: 0 !important;
175 border: none !important;
176 background: transparent !important;
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: var(--pre-bg);
253 border: 1px solid;
254 border-color: var(--pre-border);
255 box-shadow: var(--pre-shadow) 4px 4px 0px 0px;
256 position: relative;
257}
258pre > .hljs {
259 background-color: initial;
260}
261pre > .buttons {
262 position: absolute;
263 z-index: 100;
264 right: 0px;
265 top: 2px;
266 margin: 0px;
267 padding: 2px 0px;
268
269 color: var(--sidebar-fg);
270 cursor: pointer;
271 visibility: hidden;
272 opacity: 0;
273 transition:
274 visibility 0.1s linear,
275 opacity 0.1s linear;
276}
277pre:hover > .buttons {
278 visibility: visible;
279 opacity: 1;
280}
281pre > .buttons :hover {
282 color: var(--sidebar-active);
283 border-color: var(--border-hover);
284 background-color: var(--theme-hover);
285}
286pre > .buttons i {
287 margin-inline-start: 8px;
288}
289pre > .buttons button {
290 cursor: inherit;
291 margin: 0 4px;
292 height: 26px;
293 width: 26px;
294 font-size: 14px;
295 border-style: solid;
296 border-width: 1px;
297 border-radius: 4px;
298 border-color: var(--border);
299 background-color: var(--popover-bg);
300 transition: 100ms;
301 transition-property: color, border-color, background-color;
302 color: var(--icons);
303}
304
305pre > .playground {
306 border: none;
307 margin: 0;
308 box-shadow: none;
309 /* HACK: This serves to visually hide nested <pre> elements in "playground" code snippets.
310 A more robust solution would involve modifying the rendered HTML. */
311}
312
313@media (pointer: coarse) {
314 pre > .buttons button {
315 /* On mobile, make it easier to tap buttons. */
316 padding: 0.3rem 1rem;
317 }
318
319 .sidebar-resize-indicator {
320 /* Hide resize indicator on devices with limited accuracy */
321 display: none;
322 }
323}
324pre > code {
325 display: block;
326 padding: 1rem;
327}
328
329/* TODO: ACE editors overlap their buttons because ACE does absolute
330 positioning within the code block which breaks padding. The only solution I
331 can think of is to move the padding to the outer pre tag (or insert a div
332 wrapper), but that would require fixing a whole bunch of CSS rules.
333*/
334.hljs.ace_editor {
335 padding: 0rem 0rem;
336}
337
338pre > .result {
339 margin-block-start: 10px;
340}
341
342/* Search */
343
344#searchresults a {
345 text-decoration: none;
346}
347
348mark {
349 border-radius: 2px;
350 padding-block-start: 0;
351 padding-block-end: 1px;
352 padding-inline-start: 3px;
353 padding-inline-end: 3px;
354 margin-block-start: 0;
355 margin-block-end: -1px;
356 margin-inline-start: -3px;
357 margin-inline-end: -3px;
358 background-color: var(--search-mark-bg);
359 transition: background-color 300ms linear;
360 cursor: pointer;
361}
362
363mark.fade-out {
364 background-color: rgba(0, 0, 0, 0) !important;
365 cursor: auto;
366}
367
368.searchbar-outer {
369 margin-inline-start: auto;
370 margin-inline-end: auto;
371 max-width: var(--content-max-width);
372}
373
374#searchbar {
375 width: 100%;
376 margin-block-start: 5px;
377 margin-block-end: 0;
378 margin-inline-start: auto;
379 margin-inline-end: auto;
380 padding: 10px 16px;
381 transition: box-shadow 300ms ease-in-out;
382 border: 1px solid var(--searchbar-border-color);
383 border-radius: 3px;
384 background-color: var(--searchbar-bg);
385 color: var(--searchbar-fg);
386}
387#searchbar:focus,
388#searchbar.active {
389 box-shadow: 0 0 3px var(--searchbar-shadow-color);
390 outline: none;
391 border-color: var(--search-mark-bg);
392}
393
394.searchresults-header {
395 font-weight: bold;
396 font-size: 1em;
397 padding-block-start: 18px;
398 padding-block-end: 0;
399 padding-inline-start: 5px;
400 padding-inline-end: 0;
401 color: var(--searchresults-header-fg);
402}
403
404ul#searchresults {
405 list-style: none;
406 padding-inline-start: 0;
407}
408ul#searchresults li {
409 margin: 10px 0px;
410 padding: 2px;
411 border-radius: 2px;
412}
413ul#searchresults li.focus {
414 background-color: var(--searchresults-li-bg);
415}
416ul#searchresults span.teaser {
417 display: block;
418 font-size: 0.8em;
419 margin-block-start: 5px;
420 margin-inline-start: 4px;
421 padding-inline-start: 2ch;
422 border-left: 1px solid var(--divider);
423}
424ul#searchresults span.teaser em {
425 font-weight: bold;
426 color: var(--full-contrast);
427 background: var(--code-bg);
428}
429
430/* Sidebar */
431
432.sidebar {
433 position: relative;
434 width: var(--sidebar-width);
435 flex-shrink: 0;
436 display: flex;
437 flex-direction: column;
438 font-size: 0.875em;
439 box-sizing: border-box;
440 -webkit-overflow-scrolling: touch;
441 overscroll-behavior-y: none;
442 overflow: hidden;
443 background-color: var(--sidebar-bg);
444 color: var(--sidebar-fg);
445 border-right: 1px solid var(--divider);
446}
447
448[dir="rtl"] .sidebar {
449 left: unset;
450 right: 0;
451}
452.sidebar-resizing {
453 -moz-user-select: none;
454 -webkit-user-select: none;
455 -ms-user-select: none;
456 user-select: none;
457}
458.no-js .sidebar,
459.js:not(.sidebar-resizing) .sidebar {
460 transition: transform 0.3s; /* Animation: slide away */
461}
462.sidebar code {
463 line-height: 2em;
464}
465.sidebar .sidebar-scrollbox {
466 flex: 1;
467 overflow-y: auto;
468 min-height: 0;
469}
470
471.sidebar .sidebar-resize-handle {
472 position: absolute;
473 cursor: col-resize;
474 width: 0;
475 right: calc(var(--sidebar-resize-indicator-width) * -1);
476 top: 0;
477 bottom: 0;
478 display: flex;
479 align-items: center;
480}
481
482.sidebar-resize-handle .sidebar-resize-indicator {
483 width: 100%;
484 height: 12px;
485 background-color: var(--icons);
486 margin-inline-start: var(--sidebar-resize-indicator-space);
487}
488
489[dir="rtl"] .sidebar .sidebar-resize-handle {
490 left: calc(var(--sidebar-resize-indicator-width) * -1);
491 right: unset;
492}
493.js .sidebar .sidebar-resize-handle {
494 cursor: col-resize;
495 width: calc(
496 var(--sidebar-resize-indicator-width) -
497 var(--sidebar-resize-indicator-space)
498 );
499}
500.sidebar::-webkit-scrollbar {
501 background: var(--sidebar-bg);
502}
503.sidebar::-webkit-scrollbar-thumb {
504 background: var(--scrollbar);
505}
506
507@media only screen and (max-width: 780px) {
508 .sidebar {
509 position: fixed;
510 top: 0;
511 left: 0;
512 height: 100vh;
513 padding-top: 57px; /* Account for header height */
514 transform: translateX(-100%);
515 z-index: 99;
516 transition: transform 0.1s ease;
517 }
518
519 [dir="rtl"] .sidebar {
520 left: unset;
521 right: 0;
522 transform: translateX(100%);
523 }
524
525 body.sidebar-open .sidebar {
526 box-shadow: var(--sidebar-mobile-shadow);
527 transform: translateX(0);
528 }
529}
530
531.chapter {
532 list-style: none outside none;
533 padding: 16px;
534 padding-top: 8px;
535 line-height: 2.2em;
536 margin: 0;
537}
538
539.chapter ol {
540 width: 100%;
541}
542
543.chapter li {
544 display: flex;
545 color: var(--sidebar-non-existant);
546}
547
548.chapter li a {
549 display: block;
550 padding: 0 4px;
551 text-decoration: none;
552 color: var(--sidebar-fg);
553}
554
555.chapter li a:hover {
556 color: var(--sidebar-active);
557}
558
559.chapter li a.active {
560 color: var(--sidebar-active);
561 background-color: var(--sidebar-active-bg);
562}
563
564.chapter li > a.toggle {
565 cursor: pointer;
566 display: flex;
567 align-items: center;
568 justify-content: center;
569 margin-inline-start: auto;
570 user-select: none;
571 opacity: 0.5;
572 border-radius: 4px;
573 transition:
574 opacity 0.15s ease,
575 background-color 0.15s ease;
576}
577
578.chapter li > a.toggle:hover {
579 opacity: 1;
580 background-color: var(--theme-hover);
581}
582
583.chapter li.chapter-item {
584 display: flex;
585 flex-wrap: wrap;
586 align-items: center;
587 line-height: 1.5em;
588 margin-block-start: 0.6em;
589}
590
591.section li.chapter-item {
592 margin-block-start: 0;
593}
594
595.chapter li.part-title + li.chapter-item {
596 margin-block-start: 0.2em;
597}
598
599.chapter li.chapter-item > a:first-child {
600 flex: 1;
601 min-width: 0;
602}
603
604.chapter li.expanded > a.toggle div {
605 transform: rotate(90deg);
606}
607
608.chapter li.part-title {
609 font-size: 1.4rem;
610 padding: 0 8px 0 4px;
611 color: var(--title-color);
612 cursor: pointer;
613 user-select: none;
614 display: flex;
615 align-items: center;
616 justify-content: space-between;
617 line-height: auto;
618 border-radius: 2px;
619}
620
621.chapter li.part-title.collapsible:hover {
622 background-color: var(--hover-section-title);
623}
624
625.chapter li.part-title.collapsible::after {
626 content: "❯";
627 display: inline-block;
628 font-size: 1rem;
629 opacity: 0.6;
630 transition: transform 0.2s ease;
631 flex-shrink: 0;
632}
633
634.chapter li.part-title.collapsible.expanded::after {
635 transform: rotate(90deg);
636}
637
638.chapter li.section-spacer {
639 height: 1.5rem;
640 list-style: none;
641}
642
643.chapter li.section-hidden {
644 display: none !important;
645}
646
647.section {
648 list-style: none outside none;
649 padding-inline-start: 1.5ch;
650 margin-inline-start: 1ch;
651 margin-top: 6px;
652 border-left: 1px solid var(--border-light);
653 line-height: 1.9em;
654 display: flex;
655 flex-direction: column;
656 gap: 0.6em;
657}
658
659.theme-popup {
660 position: absolute;
661 right: 155px;
662 top: calc(var(--menu-bar-height) - 18px);
663 z-index: 1000;
664 border-radius: 4px;
665 font-size: 1.4rem;
666 color: var(--fg);
667 background: var(--popover-bg);
668 border: 1px solid var(--popover-border);
669 margin: 0;
670 padding: 0;
671 list-style: none;
672 display: none;
673 overflow: hidden;
674}
675
676[dir="rtl"] .theme-popup {
677 left: unset;
678 right: 10px;
679}
680.theme-popup .default {
681 color: var(--icons);
682}
683.theme-popup .theme {
684 width: 100%;
685 border: 0;
686 margin: 0;
687 padding: 2px 24px;
688 line-height: 25px;
689 white-space: nowrap;
690 text-align: start;
691 cursor: pointer;
692 color: inherit;
693 background: inherit;
694 font-size: inherit;
695 font-family: inherit;
696}
697.theme-popup .theme:hover {
698 background-color: var(--theme-hover);
699}
700
701.theme-selected::before {
702 font-family: Arial, Helvetica, sans-serif;
703 text-align: center;
704 display: inline-block;
705 content: "✓";
706 margin-inline-start: -20px;
707 width: 20px;
708}
709
710.download-button {
711 max-height: 28px;
712 margin-left: 8px;
713 background: var(--download-btn-bg);
714 color: var(--download-btn-color);
715 padding: 4px 8px;
716 border: 1px solid;
717 border-color: var(--download-btn-border);
718 font-size: 1.4rem;
719 border-radius: 4px;
720 box-shadow: var(--download-btn-shadow) 0px -2px 0px 0px inset;
721 text-decoration: none;
722 transition: 100ms;
723 transition-property: box-shadow, border-color, background-color;
724}
725
726.download-button:hover {
727 background: var(--download-btn-bg);
728 border-color: var(--download-btn-border-hover);
729 box-shadow: none;
730}
731
732.search-button {
733 min-width: 100px;
734 max-width: 300px;
735 height: 28px;
736 width: 100%;
737 padding: 4px 4px 4px 8px;
738 display: flex;
739 gap: 8px;
740 background: var(--search-btn-bg);
741 border: 1px solid;
742 border-color: var(--search-btn-border);
743 font-size: 1.4rem;
744 font-family: var(--font);
745 color: var(--icons);
746 border-radius: 4px;
747 transition: 100ms;
748 transition-property: box-shadow, border-color, background-color;
749}
750
751.search-button:hover {
752 background: var(--search-btn-bg-hover);
753}
754
755.search-button .icon {
756 width: 12px;
757 height: 12px;
758 transform: translateY(10%);
759 scale: 0.9;
760}
761
762.search-content-desktop {
763 width: 100%;
764 display: flex;
765 justify-content: space-between;
766}
767
768.search-content-mobile {
769 display: none;
770}
771
772.search-container {
773 box-sizing: border-box;
774 position: fixed;
775 inset: 0;
776 z-index: 1000;
777 padding: 24px;
778 padding-top: 72px;
779 background-color: rgba(0, 0, 0, 0.5);
780 display: none;
781 justify-content: center;
782}
783
784.search-container:has(#search-wrapper:not(.hidden)) {
785 display: flex;
786}
787
788.search-modal {
789 box-sizing: border-box;
790
791 max-width: 600px;
792 min-width: 600px;
793 height: fit-content;
794 max-height: 600px;
795 display: flex;
796 flex-direction: column;
797 padding: 16px;
798 overflow-y: auto;
799
800 border-radius: 8px;
801 background: var(--popover-bg);
802 border: 1px solid var(--popover-border);
803 box-shadow: var(--popover-shadow);
804}
805
806.searchbar-outer {
807 width: 100%;
808}
809
810#searchbar {
811 margin: 0;
812}
813
814@media only screen and (max-width: 780px) {
815 .header-bar {
816 padding: 16px;
817 justify-content: start;
818 }
819
820 .download-button {
821 display: none;
822 }
823
824 .ib-hidden-mobile {
825 display: none;
826 }
827
828 .header-bar .left-container {
829 width: fit-content;
830 }
831
832 .header-bar .right-container {
833 width: fit-content;
834 }
835
836 .search-button {
837 width: 100px;
838 margin-left: auto;
839 margin-right: 8px;
840 }
841
842 .ib-hidden-desktop {
843 display: block;
844 }
845
846 .search-modal {
847 width: 90vw;
848 min-width: auto;
849 }
850
851 .search-content-desktop {
852 display: none;
853 }
854
855 .search-content-mobile {
856 display: flex;
857 }
858
859 .theme-popup {
860 right: 15px;
861 }
862}