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