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.nav-wrapper {
181 margin-block-start: 50px;
182 display: block;
183}
184
185.nav-buttons {
186 display: flex;
187 justify-content: space-between;
188 align-items: center;
189 margin: 20px 0;
190 padding: 0 10px;
191}
192
193.nav-button {
194 align-items: center;
195 padding: 8px 12px;
196 background-color: var(--bg);
197 color: var(--fg) !important;
198 text-decoration: none;
199}
200
201.nav-button:hover {
202 background-color: var(--theme-hover);
203 color: var(--icons-hover) !important;
204}
205
206.nav-button i {
207 padding: 0 6px;
208}
209
210.mobile-nav-chapters {
211 font-size: 2.5em;
212 text-align: center;
213 text-decoration: none;
214 width: 90px;
215 border-radius: 5px;
216 background-color: var(--sidebar-bg);
217}
218
219/* Only Firefox supports flow-relative values */
220.previous {
221 float: left;
222}
223[dir="rtl"] .previous {
224 float: right;
225}
226
227/* Only Firefox supports flow-relative values */
228.next {
229 float: right;
230 right: var(--page-padding);
231}
232[dir="rtl"] .next {
233 float: left;
234 right: unset;
235 left: var(--page-padding);
236}
237
238/* Use the correct buttons for RTL layouts*/
239[dir="rtl"] .previous i.fa-angle-left:before {
240 content: "\f105";
241}
242[dir="rtl"] .next i.fa-angle-right:before {
243 content: "\f104";
244}
245
246@media only screen and (max-width: 1080px) {
247 .nav-wide-wrapper {
248 display: none;
249 }
250 .nav-wrapper {
251 display: block;
252 }
253}
254
255/* sidebar-visible */
256@media only screen and (max-width: 1380px) {
257 #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper {
258 display: none;
259 }
260 #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper {
261 display: block;
262 }
263}
264
265/* Inline code */
266
267:not(pre) > .hljs {
268 display: inline;
269 padding: 0.1em 0.3em;
270 border-radius: 3px;
271}
272
273:not(pre):not(a) > .hljs {
274 color: var(--inline-code-color);
275 overflow-x: initial;
276}
277
278a:hover > .hljs {
279 text-decoration: underline;
280}
281
282pre {
283 background-color: var(--pre-bg);
284 border: 1px solid;
285 border-color: var(--pre-border);
286 box-shadow: var(--pre-shadow) 4px 4px 0px 0px;
287 position: relative;
288}
289pre > .hljs {
290 background-color: initial;
291}
292pre > .buttons {
293 position: absolute;
294 z-index: 100;
295 right: 0px;
296 top: 2px;
297 margin: 0px;
298 padding: 2px 0px;
299
300 color: var(--sidebar-fg);
301 cursor: pointer;
302 visibility: hidden;
303 opacity: 0;
304 transition:
305 visibility 0.1s linear,
306 opacity 0.1s linear;
307}
308pre:hover > .buttons {
309 visibility: visible;
310 opacity: 1;
311}
312pre > .buttons :hover {
313 color: var(--sidebar-active);
314 border-color: var(--border-hover);
315 background-color: var(--theme-hover);
316}
317pre > .buttons i {
318 margin-inline-start: 8px;
319}
320pre > .buttons button {
321 cursor: inherit;
322 margin: 0 4px;
323 height: 26px;
324 width: 26px;
325 font-size: 14px;
326 border-style: solid;
327 border-width: 1px;
328 border-radius: 4px;
329 border-color: var(--border);
330 background-color: var(--theme-popup-bg);
331 transition: 100ms;
332 transition-property: color, border-color, background-color;
333 color: var(--icons);
334}
335
336pre > .playground {
337 border: none;
338 margin: 0;
339 box-shadow: none;
340 /* HACK: This serves to visually hide nested <pre> elements in "playground" code snippets.
341 A more robust solution would involve modifying the rendered HTML. */
342}
343
344@media (pointer: coarse) {
345 pre > .buttons button {
346 /* On mobile, make it easier to tap buttons. */
347 padding: 0.3rem 1rem;
348 }
349
350 .sidebar-resize-indicator {
351 /* Hide resize indicator on devices with limited accuracy */
352 display: none;
353 }
354}
355pre > code {
356 display: block;
357 padding: 1rem;
358}
359
360/* TODO: ACE editors overlap their buttons because ACE does absolute
361 positioning within the code block which breaks padding. The only solution I
362 can think of is to move the padding to the outer pre tag (or insert a div
363 wrapper), but that would require fixing a whole bunch of CSS rules.
364*/
365.hljs.ace_editor {
366 padding: 0rem 0rem;
367}
368
369pre > .result {
370 margin-block-start: 10px;
371}
372
373/* Search */
374
375#searchresults a {
376 text-decoration: none;
377}
378
379mark {
380 border-radius: 2px;
381 padding-block-start: 0;
382 padding-block-end: 1px;
383 padding-inline-start: 3px;
384 padding-inline-end: 3px;
385 margin-block-start: 0;
386 margin-block-end: -1px;
387 margin-inline-start: -3px;
388 margin-inline-end: -3px;
389 background-color: var(--search-mark-bg);
390 transition: background-color 300ms linear;
391 cursor: pointer;
392}
393
394mark.fade-out {
395 background-color: rgba(0, 0, 0, 0) !important;
396 cursor: auto;
397}
398
399.searchbar-outer {
400 margin-inline-start: auto;
401 margin-inline-end: auto;
402 max-width: var(--content-max-width);
403}
404
405#searchbar {
406 width: 100%;
407 margin-block-start: 5px;
408 margin-block-end: 0;
409 margin-inline-start: auto;
410 margin-inline-end: auto;
411 padding: 10px 16px;
412 transition: box-shadow 300ms ease-in-out;
413 border: 1px solid var(--searchbar-border-color);
414 border-radius: 3px;
415 background-color: var(--searchbar-bg);
416 color: var(--searchbar-fg);
417}
418#searchbar:focus,
419#searchbar.active {
420 box-shadow: 0 0 3px var(--searchbar-shadow-color);
421}
422
423.searchresults-header {
424 font-weight: bold;
425 font-size: 1em;
426 padding-block-start: 18px;
427 padding-block-end: 0;
428 padding-inline-start: 5px;
429 padding-inline-end: 0;
430 color: var(--searchresults-header-fg);
431}
432
433.searchresults-outer {
434 margin-inline-start: auto;
435 margin-inline-end: auto;
436 max-width: var(--content-max-width);
437 border-block-end: 1px dashed var(--searchresults-border-color);
438}
439
440ul#searchresults {
441 list-style: none;
442 padding-inline-start: 20px;
443}
444ul#searchresults li {
445 margin: 10px 0px;
446 padding: 2px;
447 border-radius: 2px;
448}
449ul#searchresults li.focus {
450 background-color: var(--searchresults-li-bg);
451}
452ul#searchresults span.teaser {
453 display: block;
454 clear: both;
455 margin-block-start: 5px;
456 margin-block-end: 0;
457 margin-inline-start: 20px;
458 margin-inline-end: 0;
459 font-size: 0.8em;
460}
461ul#searchresults span.teaser em {
462 font-weight: bold;
463 font-style: normal;
464}
465
466/* Sidebar */
467
468.sidebar {
469 position: fixed;
470 left: 0;
471 top: 0;
472 bottom: 0;
473 width: var(--sidebar-width);
474 font-size: 0.875em;
475 box-sizing: border-box;
476 -webkit-overflow-scrolling: touch;
477 overscroll-behavior-y: contain;
478 background-color: var(--sidebar-bg);
479 color: var(--sidebar-fg);
480 border-right: 1px solid;
481 border-color: var(--divider);
482}
483[dir="rtl"] .sidebar {
484 left: unset;
485 right: 0;
486}
487.sidebar-resizing {
488 -moz-user-select: none;
489 -webkit-user-select: none;
490 -ms-user-select: none;
491 user-select: none;
492}
493.no-js .sidebar,
494.js:not(.sidebar-resizing) .sidebar {
495 transition: transform 0.3s; /* Animation: slide away */
496}
497.sidebar code {
498 line-height: 2em;
499}
500.sidebar .sidebar-scrollbox {
501 overflow-y: auto;
502 position: absolute;
503 top: 0;
504 bottom: 0;
505 left: 0;
506 right: 0;
507 padding: 12px 12px 12px 24px;
508}
509.sidebar .sidebar-resize-handle {
510 position: absolute;
511 cursor: col-resize;
512 width: 0;
513 right: calc(var(--sidebar-resize-indicator-width) * -1);
514 top: 0;
515 bottom: 0;
516 display: flex;
517 align-items: center;
518}
519
520.sidebar-resize-handle .sidebar-resize-indicator {
521 width: 100%;
522 height: 12px;
523 background-color: var(--icons);
524 margin-inline-start: var(--sidebar-resize-indicator-space);
525}
526
527[dir="rtl"] .sidebar .sidebar-resize-handle {
528 left: calc(var(--sidebar-resize-indicator-width) * -1);
529 right: unset;
530}
531.js .sidebar .sidebar-resize-handle {
532 cursor: col-resize;
533 width: calc(
534 var(--sidebar-resize-indicator-width) -
535 var(--sidebar-resize-indicator-space)
536 );
537}
538/* sidebar-hidden */
539#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
540 transform: translateX(
541 calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
542 );
543 z-index: -1;
544}
545[dir="rtl"] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
546 transform: translateX(
547 calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
548 );
549}
550.sidebar::-webkit-scrollbar {
551 background: var(--sidebar-bg);
552}
553.sidebar::-webkit-scrollbar-thumb {
554 background: var(--scrollbar);
555}
556
557/* sidebar-visible */
558#sidebar-toggle-anchor:checked ~ .page-wrapper {
559 transform: translateX(
560 calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
561 );
562}
563[dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
564 transform: translateX(
565 calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
566 );
567}
568@media only screen and (min-width: 620px) {
569 #sidebar-toggle-anchor:checked ~ .page-wrapper {
570 transform: none;
571 margin-inline-start: var(--sidebar-width);
572 }
573 [dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
574 transform: none;
575 }
576}
577
578.chapter {
579 list-style: none outside none;
580 padding-inline-start: 0;
581 line-height: 2.2em;
582 margin: 0;
583}
584
585.chapter ol {
586 width: 100%;
587}
588
589.chapter li {
590 display: flex;
591 color: var(--sidebar-non-existant);
592}
593.chapter li a {
594 display: block;
595 padding: 0;
596 text-decoration: none;
597 color: var(--sidebar-fg);
598}
599
600.chapter li a:hover {
601 color: var(--sidebar-active);
602}
603
604.chapter li a.active {
605 color: var(--sidebar-active);
606 background-color: var(--sidebar-active-bg);
607}
608
609.chapter li > a.toggle {
610 cursor: pointer;
611 display: block;
612 margin-inline-start: auto;
613 padding: 0 10px;
614 user-select: none;
615 opacity: 0.68;
616}
617
618.chapter li > a.toggle div {
619 transition: transform 0.5s;
620}
621
622/* collapse the section */
623.chapter li:not(.expanded) + li > ol {
624 display: none;
625}
626
627.chapter li.chapter-item {
628 line-height: 1.5em;
629 margin-block-start: 0.6em;
630}
631
632.chapter li.expanded > a.toggle div {
633 transform: rotate(90deg);
634}
635
636.spacer {
637 width: 100%;
638 height: 3px;
639 margin: 5px 0px;
640}
641.chapter .spacer {
642 background-color: var(--divider);
643}
644
645@media (-moz-touch-enabled: 1), (pointer: coarse) {
646 .chapter li a {
647 padding: 5px 0;
648 }
649 .spacer {
650 margin: 10px 0;
651 }
652}
653
654.section {
655 list-style: none outside none;
656 padding-inline-start: 20px;
657 line-height: 1.9em;
658}
659
660/* Theme Menu Popup */
661
662.theme-popup {
663 position: absolute;
664 left: 32px;
665 top: calc(var(--menu-bar-height) - 12px);
666 z-index: 1000;
667 border-radius: 4px;
668 font-size: 1.4rem;
669 color: var(--fg);
670 background: var(--theme-popup-bg);
671 border: 1px solid var(--theme-popup-border);
672 margin: 0;
673 padding: 0;
674 list-style: none;
675 display: none;
676 /* Don't let the children's background extend past the rounded corners. */
677 overflow: hidden;
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 background: var(--download-btn-bg);
715 color: var(--download-btn-color);
716 padding: 4px 8px;
717 border: 1px solid;
718 border-color: var(--download-btn-border);
719 font-size: 1.4rem;
720 border-radius: 4px;
721 box-shadow: var(--download-btn-shadow) 0px -2px 0px 0px inset;
722 transition: 100ms;
723 transition-property: box-shadow, border-color, background-color;
724}
725
726.download-button:hover {
727 background: var(--download-btn-bg);
728 border-color: var(--download-btn-border-hover);
729 box-shadow: none;
730}