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