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