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