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