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
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: 8px 20px 20px 20px;
498 line-height: 2.2em;
499 margin: 0;
500}
501
502.chapter ol {
503 width: 100%;
504}
505
506.chapter li {
507 display: flex;
508 color: var(--sidebar-non-existant);
509}
510
511.chapter li a {
512 display: block;
513 padding: 0 4px;
514 text-decoration: none;
515 color: var(--sidebar-fg);
516}
517
518.chapter li a:hover {
519 color: var(--sidebar-active);
520}
521
522.chapter li a.active {
523 color: var(--sidebar-active);
524 background-color: var(--sidebar-active-bg);
525}
526
527.chapter li > a.toggle {
528 cursor: pointer;
529 display: flex;
530 align-items: center;
531 justify-content: center;
532 margin-inline-start: auto;
533 user-select: none;
534 opacity: 0.5;
535 border-radius: 4px;
536 transition:
537 opacity 0.15s ease,
538 background-color 0.15s ease;
539}
540
541.chapter li > a.toggle:hover {
542 opacity: 1;
543 background-color: var(--theme-hover);
544}
545
546.chapter li.chapter-item {
547 display: flex;
548 flex-wrap: wrap;
549 align-items: center;
550 line-height: 1.5em;
551 margin-block-start: 0.6em;
552}
553
554.chapter li.chapter-item > a:first-child {
555 flex: 1;
556 min-width: 0;
557}
558
559.chapter li.expanded > a.toggle div {
560 transform: rotate(90deg);
561}
562
563.chapter li.part-title {
564 font-size: 1.4rem;
565 padding: 0 8px 0 4px;
566 color: var(--title-color);
567 cursor: pointer;
568 user-select: none;
569 display: flex;
570 align-items: center;
571 justify-content: space-between;
572 line-height: auto;
573 border-radius: 2px;
574}
575
576.chapter li.part-title.collapsible:hover {
577 background-color: var(--hover-section-title);
578}
579
580.chapter li.part-title.collapsible::after {
581 content: "❯";
582 display: inline-block;
583 font-size: 1.2rem;
584 opacity: 0.6;
585 transition: transform 0.2s ease;
586 flex-shrink: 0;
587}
588
589.chapter li.part-title.collapsible.expanded::after {
590 transform: rotate(90deg);
591}
592
593.chapter li.section-spacer {
594 height: 2rem;
595 list-style: none;
596}
597
598.chapter li.section-hidden {
599 display: none !important;
600}
601
602.section {
603 list-style: none outside none;
604 padding-inline-start: 3ch;
605 line-height: 1.9em;
606}
607
608.theme-popup {
609 position: absolute;
610 right: 155px;
611 top: calc(var(--menu-bar-height) - 18px);
612 z-index: 1000;
613 border-radius: 4px;
614 font-size: 1.4rem;
615 color: var(--fg);
616 background: var(--popover-bg);
617 border: 1px solid var(--popover-border);
618 margin: 0;
619 padding: 0;
620 list-style: none;
621 display: none;
622 overflow: hidden;
623}
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 24px;
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 font-family: inherit;
645}
646.theme-popup .theme:hover {
647 background-color: var(--theme-hover);
648}
649
650.theme-selected::before {
651 font-family: Arial, Helvetica, sans-serif;
652 text-align: center;
653 display: inline-block;
654 content: "✓";
655 margin-inline-start: -20px;
656 width: 20px;
657}
658
659.download-button {
660 max-height: 28px;
661 margin-left: 8px;
662 background: var(--download-btn-bg);
663 color: var(--download-btn-color);
664 padding: 4px 8px;
665 border: 1px solid;
666 border-color: var(--download-btn-border);
667 font-size: 1.4rem;
668 border-radius: 4px;
669 box-shadow: var(--download-btn-shadow) 0px -2px 0px 0px inset;
670 text-decoration: none;
671 transition: 100ms;
672 transition-property: box-shadow, border-color, background-color;
673}
674
675.download-button:hover {
676 background: var(--download-btn-bg);
677 border-color: var(--download-btn-border-hover);
678 box-shadow: none;
679}
680
681.search-button {
682 min-width: 100px;
683 max-width: 300px;
684 height: 28px;
685 width: 100%;
686 padding: 4px 4px 4px 8px;
687 display: flex;
688 gap: 8px;
689 background: var(--search-btn-bg);
690 border: 1px solid;
691 border-color: var(--search-btn-border);
692 font-size: 1.4rem;
693 font-family: var(--font);
694 color: var(--icons);
695 border-radius: 4px;
696 transition: 100ms;
697 transition-property: box-shadow, border-color, background-color;
698}
699
700.search-button:hover {
701 background: var(--search-btn-bg-hover);
702}
703
704.search-button .icon {
705 width: 12px;
706 height: 12px;
707 transform: translateY(10%);
708 scale: 0.9;
709}
710
711.search-content-desktop {
712 width: 100%;
713 display: flex;
714 justify-content: space-between;
715}
716
717.search-content-mobile {
718 display: none;
719}
720
721.search-container {
722 box-sizing: border-box;
723 position: fixed;
724 inset: 0;
725 z-index: 1000;
726 padding: 24px;
727 padding-top: 72px;
728 background-color: rgba(0, 0, 0, 0.5);
729 display: none;
730 justify-content: center;
731}
732
733.search-container:has(#search-wrapper:not(.hidden)) {
734 display: flex;
735}
736
737.search-modal {
738 box-sizing: border-box;
739
740 max-width: 600px;
741 min-width: 600px;
742 height: fit-content;
743 max-height: 600px;
744 display: flex;
745 flex-direction: column;
746 padding: 16px;
747 overflow-y: auto;
748
749 border-radius: 8px;
750 background: var(--popover-bg);
751 border: 1px solid var(--popover-border);
752 box-shadow: var(--popover-shadow);
753}
754
755.searchbar-outer {
756 width: 100%;
757}
758
759#searchbar {
760 margin: 0;
761}
762
763@media only screen and (max-width: 780px) {
764 .header-bar {
765 padding: 16px;
766 justify-content: start;
767 }
768
769 .download-button {
770 display: none;
771 }
772
773 .ib-hidden-mobile {
774 display: none;
775 }
776
777 .header-bar .left-container {
778 width: fit-content;
779 }
780
781 .header-bar .right-container {
782 width: fit-content;
783 }
784
785 .search-button {
786 width: 100px;
787 margin-left: auto;
788 margin-right: 8px;
789 }
790
791 .ib-hidden-desktop {
792 display: block;
793 }
794
795 .search-modal {
796 width: 90vw;
797 min-width: auto;
798 }
799
800 .search-content-desktop {
801 display: none;
802 }
803
804 .search-content-mobile {
805 display: flex;
806 }
807
808 .theme-popup {
809 right: 15px;
810 }
811}