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(--icons-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: 0px 5px;
291 padding: 3px 5px;
292 font-size: 14px;
293
294 border-style: solid;
295 border-width: 1px;
296 border-radius: 4px;
297 border-color: var(--icons);
298 background-color: var(--theme-popup-bg);
299 transition: 100ms;
300 transition-property: color, border-color, background-color;
301 color: var(--icons);
302}
303@media (pointer: coarse) {
304 pre > .buttons button {
305 /* On mobile, make it easier to tap buttons. */
306 padding: 0.3rem 1rem;
307 }
308
309 .sidebar-resize-indicator {
310 /* Hide resize indicator on devices with limited accuracy */
311 display: none;
312 }
313}
314pre > code {
315 display: block;
316 padding: 1rem;
317}
318
319/* FIXME: ACE editors overlap their buttons because ACE does absolute
320 positioning within the code block which breaks padding. The only solution I
321 can think of is to move the padding to the outer pre tag (or insert a div
322 wrapper), but that would require fixing a whole bunch of CSS rules.
323*/
324.hljs.ace_editor {
325 padding: 0rem 0rem;
326}
327
328pre > .result {
329 margin-block-start: 10px;
330}
331
332/* Search */
333
334#searchresults a {
335 text-decoration: none;
336}
337
338mark {
339 border-radius: 2px;
340 padding-block-start: 0;
341 padding-block-end: 1px;
342 padding-inline-start: 3px;
343 padding-inline-end: 3px;
344 margin-block-start: 0;
345 margin-block-end: -1px;
346 margin-inline-start: -3px;
347 margin-inline-end: -3px;
348 background-color: var(--search-mark-bg);
349 transition: background-color 300ms linear;
350 cursor: pointer;
351}
352
353mark.fade-out {
354 background-color: rgba(0, 0, 0, 0) !important;
355 cursor: auto;
356}
357
358.searchbar-outer {
359 margin-inline-start: auto;
360 margin-inline-end: auto;
361 max-width: var(--content-max-width);
362}
363
364#searchbar {
365 width: 100%;
366 margin-block-start: 5px;
367 margin-block-end: 0;
368 margin-inline-start: auto;
369 margin-inline-end: auto;
370 padding: 10px 16px;
371 transition: box-shadow 300ms ease-in-out;
372 border: 1px solid var(--searchbar-border-color);
373 border-radius: 3px;
374 background-color: var(--searchbar-bg);
375 color: var(--searchbar-fg);
376}
377#searchbar:focus,
378#searchbar.active {
379 box-shadow: 0 0 3px var(--searchbar-shadow-color);
380}
381
382.searchresults-header {
383 font-weight: bold;
384 font-size: 1em;
385 padding-block-start: 18px;
386 padding-block-end: 0;
387 padding-inline-start: 5px;
388 padding-inline-end: 0;
389 color: var(--searchresults-header-fg);
390}
391
392.searchresults-outer {
393 margin-inline-start: auto;
394 margin-inline-end: auto;
395 max-width: var(--content-max-width);
396 border-block-end: 1px dashed var(--searchresults-border-color);
397}
398
399ul#searchresults {
400 list-style: none;
401 padding-inline-start: 20px;
402}
403ul#searchresults li {
404 margin: 10px 0px;
405 padding: 2px;
406 border-radius: 2px;
407}
408ul#searchresults li.focus {
409 background-color: var(--searchresults-li-bg);
410}
411ul#searchresults span.teaser {
412 display: block;
413 clear: both;
414 margin-block-start: 5px;
415 margin-block-end: 0;
416 margin-inline-start: 20px;
417 margin-inline-end: 0;
418 font-size: 0.8em;
419}
420ul#searchresults span.teaser em {
421 font-weight: bold;
422 font-style: normal;
423}
424
425/* Sidebar */
426
427.sidebar {
428 position: fixed;
429 left: 0;
430 top: 0;
431 bottom: 0;
432 width: var(--sidebar-width);
433 font-size: 0.875em;
434 box-sizing: border-box;
435 -webkit-overflow-scrolling: touch;
436 overscroll-behavior-y: contain;
437 background-color: var(--sidebar-bg);
438 color: var(--sidebar-fg);
439 border-right: 1px solid hsl(219, 93%, 42%, 0.15);
440}
441[dir="rtl"] .sidebar {
442 left: unset;
443 right: 0;
444}
445.sidebar-resizing {
446 -moz-user-select: none;
447 -webkit-user-select: none;
448 -ms-user-select: none;
449 user-select: none;
450}
451.no-js .sidebar,
452.js:not(.sidebar-resizing) .sidebar {
453 transition: transform 0.3s; /* Animation: slide away */
454}
455.sidebar code {
456 line-height: 2em;
457}
458.sidebar .sidebar-scrollbox {
459 overflow-y: auto;
460 position: absolute;
461 top: 0;
462 bottom: 0;
463 left: 0;
464 right: 0;
465 padding: 12px 12px 12px 24px;
466}
467.sidebar .sidebar-resize-handle {
468 position: absolute;
469 cursor: col-resize;
470 width: 0;
471 right: calc(var(--sidebar-resize-indicator-width) * -1);
472 top: 0;
473 bottom: 0;
474 display: flex;
475 align-items: center;
476}
477
478.sidebar-resize-handle .sidebar-resize-indicator {
479 width: 100%;
480 height: 12px;
481 background-color: var(--icons);
482 margin-inline-start: var(--sidebar-resize-indicator-space);
483}
484
485[dir="rtl"] .sidebar .sidebar-resize-handle {
486 left: calc(var(--sidebar-resize-indicator-width) * -1);
487 right: unset;
488}
489.js .sidebar .sidebar-resize-handle {
490 cursor: col-resize;
491 width: calc(
492 var(--sidebar-resize-indicator-width) -
493 var(--sidebar-resize-indicator-space)
494 );
495}
496/* sidebar-hidden */
497#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
498 transform: translateX(
499 calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
500 );
501 z-index: -1;
502}
503[dir="rtl"] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
504 transform: translateX(
505 calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
506 );
507}
508.sidebar::-webkit-scrollbar {
509 background: var(--sidebar-bg);
510}
511.sidebar::-webkit-scrollbar-thumb {
512 background: var(--scrollbar);
513}
514
515/* sidebar-visible */
516#sidebar-toggle-anchor:checked ~ .page-wrapper {
517 transform: translateX(
518 calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
519 );
520}
521[dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
522 transform: translateX(
523 calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
524 );
525}
526@media only screen and (min-width: 620px) {
527 #sidebar-toggle-anchor:checked ~ .page-wrapper {
528 transform: none;
529 margin-inline-start: var(--sidebar-width);
530 }
531 [dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
532 transform: none;
533 }
534}
535
536.chapter {
537 list-style: none outside none;
538 padding-inline-start: 0;
539 line-height: 2.2em;
540}
541
542.chapter ol {
543 width: 100%;
544}
545
546.chapter li {
547 display: flex;
548 color: var(--sidebar-non-existant);
549}
550.chapter li a {
551 display: block;
552 padding: 0;
553 text-decoration: none;
554 color: var(--sidebar-fg);
555}
556
557.chapter li a:hover {
558 color: var(--sidebar-active);
559}
560
561.chapter li a.active {
562 color: var(--sidebar-active);
563 background-color: rgba(8, 76, 207, 0.1);
564}
565
566.chapter li > a.toggle {
567 cursor: pointer;
568 display: block;
569 margin-inline-start: auto;
570 padding: 0 10px;
571 user-select: none;
572 opacity: 0.68;
573}
574
575.chapter li > a.toggle div {
576 transition: transform 0.5s;
577}
578
579/* collapse the section */
580.chapter li:not(.expanded) + li > ol {
581 display: none;
582}
583
584.chapter li.chapter-item {
585 line-height: 1.5em;
586 margin-block-start: 0.6em;
587}
588
589.chapter li.expanded > a.toggle div {
590 transform: rotate(90deg);
591}
592
593.spacer {
594 width: 100%;
595 height: 3px;
596 margin: 5px 0px;
597}
598.chapter .spacer {
599 background-color: var(--sidebar-spacer);
600}
601
602@media (-moz-touch-enabled: 1), (pointer: coarse) {
603 .chapter li a {
604 padding: 5px 0;
605 }
606 .spacer {
607 margin: 10px 0;
608 }
609}
610
611.section {
612 list-style: none outside none;
613 padding-inline-start: 20px;
614 line-height: 1.9em;
615}
616
617/* Theme Menu Popup */
618
619.theme-popup {
620 position: absolute;
621 left: 10px;
622 top: var(--menu-bar-height);
623 z-index: 1000;
624 border-radius: 4px;
625 font-size: 0.7em;
626 color: var(--fg);
627 background: var(--theme-popup-bg);
628 border: 1px solid var(--theme-popup-border);
629 margin: 0;
630 padding: 0;
631 list-style: none;
632 display: none;
633 /* Don't let the children's background extend past the rounded corners. */
634 overflow: hidden;
635}
636[dir="rtl"] .theme-popup {
637 left: unset;
638 right: 10px;
639}
640.theme-popup .default {
641 color: var(--icons);
642}
643.theme-popup .theme {
644 width: 100%;
645 border: 0;
646 margin: 0;
647 padding: 2px 20px;
648 line-height: 25px;
649 white-space: nowrap;
650 text-align: start;
651 cursor: pointer;
652 color: inherit;
653 background: inherit;
654 font-size: inherit;
655}
656.theme-popup .theme:hover {
657 background-color: var(--theme-hover);
658}
659
660.theme-selected::before {
661 display: inline-block;
662 content: "✓";
663 margin-inline-start: -14px;
664 width: 14px;
665}
666
667.download-button {
668 background: #dde4f1;
669 color: var(--link-color);
670 padding: 4px 8px;
671 border: 1px solid #a8bee9;
672 font-size: 14px;
673}