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 width: 100%;
372 max-width: var(--content-max-width);
373 box-sizing: border-box;
374 padding: 16px;
375}
376
377#searchbar {
378 width: 100%;
379 margin-block-start: 5px;
380 margin-block-end: 0;
381 margin-inline-start: auto;
382 margin-inline-end: auto;
383 padding: 10px 16px;
384 transition: box-shadow 300ms ease-in-out;
385 border: 1px solid var(--searchbar-border-color);
386 border-radius: 3px;
387 background-color: var(--searchbar-bg);
388 color: var(--searchbar-fg);
389}
390#searchbar:focus,
391#searchbar.active {
392 box-shadow: 0 0 3px var(--searchbar-shadow-color);
393 outline: none;
394 border-color: var(--search-mark-bg);
395}
396
397.searchresults-header {
398 font-weight: bold;
399 font-size: 1em;
400 padding-block-start: 0;
401 padding-block-end: 0;
402 color: var(--searchresults-header-fg);
403}
404
405ul#searchresults {
406 list-style: none;
407 padding-inline-start: 0;
408 margin-block-end: 0;
409}
410ul#searchresults li {
411 margin: 10px 0px;
412 padding: 2px;
413 border-radius: 2px;
414 scroll-margin-block-end: 10px;
415}
416ul#searchresults li.focus {
417 background-color: var(--searchresults-li-bg);
418}
419ul#searchresults span.teaser {
420 display: block;
421 font-size: 0.8em;
422 margin-block-start: 5px;
423 margin-inline-start: 4px;
424 padding-inline-start: 2ch;
425 border-left: 1px solid var(--divider);
426}
427ul#searchresults span.teaser em {
428 font-weight: bold;
429 color: var(--full-contrast);
430 background: var(--code-bg);
431}
432
433/* Sidebar */
434
435.sidebar {
436 position: relative;
437 width: var(--sidebar-width);
438 flex-shrink: 0;
439 display: flex;
440 flex-direction: column;
441 font-size: 0.875em;
442 box-sizing: border-box;
443 -webkit-overflow-scrolling: touch;
444 overscroll-behavior-y: none;
445 overflow: hidden;
446 background-color: var(--sidebar-bg);
447 color: var(--sidebar-fg);
448 border-right: 1px solid var(--divider);
449}
450
451[dir="rtl"] .sidebar {
452 left: unset;
453 right: 0;
454}
455.sidebar-resizing {
456 -moz-user-select: none;
457 -webkit-user-select: none;
458 -ms-user-select: none;
459 user-select: none;
460}
461.no-js .sidebar,
462.js:not(.sidebar-resizing) .sidebar {
463 transition: transform 0.3s; /* Animation: slide away */
464}
465.sidebar code {
466 line-height: 2em;
467}
468.sidebar .sidebar-scrollbox {
469 flex: 1;
470 overflow-y: auto;
471 min-height: 0;
472}
473
474.sidebar .sidebar-resize-handle {
475 position: absolute;
476 cursor: col-resize;
477 width: 0;
478 right: calc(var(--sidebar-resize-indicator-width) * -1);
479 top: 0;
480 bottom: 0;
481 display: flex;
482 align-items: center;
483}
484
485.sidebar-resize-handle .sidebar-resize-indicator {
486 width: 100%;
487 height: 12px;
488 background-color: var(--icons);
489 margin-inline-start: var(--sidebar-resize-indicator-space);
490}
491
492[dir="rtl"] .sidebar .sidebar-resize-handle {
493 left: calc(var(--sidebar-resize-indicator-width) * -1);
494 right: unset;
495}
496.js .sidebar .sidebar-resize-handle {
497 cursor: col-resize;
498 width: calc(
499 var(--sidebar-resize-indicator-width) -
500 var(--sidebar-resize-indicator-space)
501 );
502}
503.sidebar::-webkit-scrollbar {
504 background: var(--sidebar-bg);
505}
506.sidebar::-webkit-scrollbar-thumb {
507 background: var(--scrollbar);
508}
509
510@media only screen and (max-width: 780px) {
511 .sidebar {
512 position: fixed;
513 top: 0;
514 left: 0;
515 height: 100vh;
516 padding-top: 57px; /* Account for header height */
517 transform: translateX(-100%);
518 z-index: 99;
519 transition: transform 0.1s ease;
520 }
521
522 [dir="rtl"] .sidebar {
523 left: unset;
524 right: 0;
525 transform: translateX(100%);
526 }
527
528 body.sidebar-open .sidebar {
529 box-shadow: var(--sidebar-mobile-shadow);
530 transform: translateX(0);
531 }
532}
533
534.chapter {
535 list-style: none outside none;
536 padding: 16px;
537 padding-top: 8px;
538 line-height: 2.2em;
539 margin: 0;
540}
541
542.chapter ol {
543 width: 100%;
544}
545
546.chapter li {
547 display: flex;
548 color: var(--sidebar-non-existant);
549}
550
551.chapter li a {
552 display: block;
553 padding: 0 4px;
554 text-decoration: none;
555 color: var(--sidebar-fg);
556}
557
558.chapter li a:hover {
559 color: var(--sidebar-active);
560}
561
562.chapter li a.active {
563 color: var(--sidebar-active);
564 background-color: var(--sidebar-active-bg);
565}
566
567.chapter li > a.toggle {
568 cursor: pointer;
569 display: flex;
570 align-items: center;
571 justify-content: center;
572 margin-inline-start: auto;
573 user-select: none;
574 opacity: 0.5;
575 border-radius: 4px;
576 transition:
577 opacity 0.15s ease,
578 background-color 0.15s ease;
579}
580
581.chapter li > a.toggle:hover {
582 opacity: 1;
583 background-color: var(--theme-hover);
584}
585
586.chapter li.chapter-item {
587 display: flex;
588 flex-wrap: wrap;
589 align-items: center;
590 line-height: 1.5em;
591 margin-block-start: 0.6em;
592}
593
594.section li.chapter-item {
595 margin-block-start: 0;
596}
597
598.chapter li.part-title + li.chapter-item {
599 margin-block-start: 0.2em;
600}
601
602.chapter li.chapter-item > a:first-child {
603 flex: 1;
604 min-width: 0;
605}
606
607.chapter li.expanded > a.toggle div {
608 transform: rotate(90deg);
609}
610
611.chapter li.part-title {
612 font-size: 1.4rem;
613 padding: 0 8px 0 4px;
614 color: var(--title-color);
615 cursor: pointer;
616 user-select: none;
617 display: flex;
618 align-items: center;
619 justify-content: space-between;
620 line-height: auto;
621 border-radius: 2px;
622}
623
624.chapter li.part-title.collapsible:hover {
625 background-color: var(--hover-section-title);
626}
627
628.chapter li.part-title.collapsible::after {
629 content: "❯";
630 display: inline-block;
631 font-size: 1rem;
632 opacity: 0.6;
633 transition: transform 0.2s ease;
634 flex-shrink: 0;
635}
636
637.chapter li.part-title.collapsible.expanded::after {
638 transform: rotate(90deg);
639}
640
641.chapter li.section-spacer {
642 height: 1.5rem;
643 list-style: none;
644}
645
646.chapter li.section-hidden {
647 display: none !important;
648}
649
650.section {
651 list-style: none outside none;
652 padding-inline-start: 1.5ch;
653 margin-inline-start: 1ch;
654 margin-top: 6px;
655 border-left: 1px solid var(--border-light);
656 line-height: 1.9em;
657 display: flex;
658 flex-direction: column;
659 gap: 0.6em;
660}
661
662.theme-popup {
663 position: absolute;
664 right: 155px;
665 top: calc(var(--menu-bar-height) - 18px);
666 z-index: 1000;
667 border-radius: 4px;
668 font-size: 1.4rem;
669 color: var(--fg);
670 background: var(--popover-bg);
671 border: 1px solid var(--popover-border);
672 margin: 0;
673 padding: 0;
674 list-style: none;
675 display: none;
676 overflow: hidden;
677}
678
679[dir="rtl"] .theme-popup {
680 left: unset;
681 right: 10px;
682}
683.theme-popup .default {
684 color: var(--icons);
685}
686.theme-popup .theme {
687 width: 100%;
688 border: 0;
689 margin: 0;
690 padding: 2px 24px;
691 line-height: 25px;
692 white-space: nowrap;
693 text-align: start;
694 cursor: pointer;
695 color: inherit;
696 background: inherit;
697 font-size: inherit;
698 font-family: inherit;
699}
700.theme-popup .theme:hover {
701 background-color: var(--theme-hover);
702}
703
704.theme-selected::before {
705 font-family: Arial, Helvetica, sans-serif;
706 text-align: center;
707 display: inline-block;
708 content: "✓";
709 margin-inline-start: -20px;
710 width: 20px;
711}
712
713.download-button {
714 max-height: 28px;
715 margin-left: 8px;
716 background: var(--download-btn-bg);
717 color: var(--download-btn-color);
718 padding: 4px 8px;
719 border: 1px solid;
720 border-color: var(--download-btn-border);
721 font-size: 1.4rem;
722 border-radius: 4px;
723 box-shadow: var(--download-btn-shadow) 0px -2px 0px 0px inset;
724 text-decoration: none;
725 transition: 100ms;
726 transition-property: box-shadow, border-color, background-color;
727}
728
729.download-button:hover {
730 background: var(--download-btn-bg);
731 border-color: var(--download-btn-border-hover);
732 box-shadow: none;
733}
734
735.search-button {
736 min-width: 100px;
737 max-width: 300px;
738 height: 28px;
739 width: 100%;
740 padding: 4px 4px 4px 8px;
741 display: flex;
742 gap: 8px;
743 background: var(--search-btn-bg);
744 border: 1px solid;
745 border-color: var(--search-btn-border);
746 font-size: 1.4rem;
747 font-family: var(--font);
748 color: var(--icons);
749 border-radius: 4px;
750 transition: 100ms;
751 transition-property: box-shadow, border-color, background-color;
752}
753
754.search-button:hover {
755 background: var(--search-btn-bg-hover);
756}
757
758.search-button .icon {
759 width: 12px;
760 height: 12px;
761 transform: translateY(10%);
762 scale: 0.9;
763}
764
765.search-content-desktop {
766 width: 100%;
767 display: flex;
768 justify-content: space-between;
769}
770
771.search-content-mobile {
772 display: none;
773}
774
775.search-container {
776 box-sizing: border-box;
777 position: fixed;
778 inset: 0;
779 z-index: 1000;
780 padding: 24px;
781 padding-top: 72px;
782 background-color: rgba(0, 0, 0, 0.5);
783 display: none;
784 justify-content: center;
785}
786
787.search-container:has(#search-wrapper:not(.hidden)) {
788 display: flex;
789}
790
791.search-modal {
792 box-sizing: border-box;
793
794 max-width: 600px;
795 min-width: 600px;
796 height: fit-content;
797 max-height: 600px;
798 display: flex;
799 flex-direction: column;
800 overflow-y: hidden;
801
802 border-radius: 8px;
803 background: var(--popover-bg);
804 border: 1px solid var(--popover-border);
805 box-shadow: var(--popover-shadow);
806}
807
808.searchresults-outer {
809 flex: 1;
810 min-height: 0;
811 overflow-y: auto;
812 padding: 0px 22px 22px 22px;
813}
814
815#searchbar {
816 margin: 0;
817}
818
819@media only screen and (max-width: 780px) {
820 .header-bar {
821 padding: 16px;
822 justify-content: start;
823 }
824
825 .download-button {
826 display: none;
827 }
828
829 .ib-hidden-mobile {
830 display: none;
831 }
832
833 .header-bar .left-container {
834 width: fit-content;
835 }
836
837 .header-bar .right-container {
838 width: fit-content;
839 }
840
841 .search-button {
842 width: 100px;
843 margin-left: auto;
844 margin-right: 8px;
845 }
846
847 .ib-hidden-desktop {
848 display: block;
849 }
850
851 .search-modal {
852 width: 90vw;
853 min-width: auto;
854 }
855
856 .search-content-desktop {
857 display: none;
858 }
859
860 .search-content-mobile {
861 display: flex;
862 }
863
864 .theme-popup {
865 right: 15px;
866 }
867}