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