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