nandi.uk
Fork of daniellemaywood.uk/gleam — Wasm codegen work
24 kB
1265 lines
1/* karla regular latin-ext */
2@font-face {
3 font-family: "Karla";
4 font-style: normal;
5 font-weight: 400;
6 font-display: swap;
7 src: url("../fonts/karla-v23-regular-latin-ext.woff2") format("woff2");
8 unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
9 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
10}
11/* karla regular latin */
12@font-face {
13 font-family: "Karla";
14 font-style: normal;
15 font-weight: 400;
16 font-display: swap;
17 src: url("../fonts/karla-v23-regular-latin.woff2") format("woff2");
18 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
19 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
20 U+FEFF, U+FFFD;
21}
22/* karla bold latin-ext */
23@font-face {
24 font-family: "Karla";
25 font-style: normal;
26 font-weight: 700;
27 font-display: swap;
28 src: url("../fonts/karla-v23-bold-latin-ext.woff2") format("woff2");
29 unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
30 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
31}
32/* karla bold latin */
33@font-face {
34 font-family: "Karla";
35 font-style: normal;
36 font-weight: 700;
37 font-display: swap;
38 src: url("../fonts/karla-v23-bold-latin.woff2") format("woff2");
39 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
40 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
41 U+FEFF, U+FFFD;
42}
43/* ubuntu mono cyrillic-ext */
44@font-face {
45 font-family: "Ubuntu Mono";
46 font-style: normal;
47 font-weight: 400;
48 font-display: swap;
49 src: url("../fonts/ubuntu-mono-v15-regular-cyrillic-ext.woff2")
50 format("woff2");
51 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
52 U+FE2E-FE2F;
53}
54/* ubuntu mono cyrillic */
55@font-face {
56 font-family: "Ubuntu Mono";
57 font-style: normal;
58 font-weight: 400;
59 font-display: swap;
60 src: url("../fonts/ubuntu-mono-v15-regular-cyrillic.woff2") format("woff2");
61 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
62}
63/* ubuntu mono greek-ext */
64@font-face {
65 font-family: "Ubuntu Mono";
66 font-style: normal;
67 font-weight: 400;
68 font-display: swap;
69 src: url("../fonts/ubuntu-mono-v15-regular-greek-ext.woff2") format("woff2");
70 unicode-range: U+1F00-1FFF;
71}
72/* ubuntu mono greek */
73@font-face {
74 font-family: "Ubuntu Mono";
75 font-style: normal;
76 font-weight: 400;
77 font-display: swap;
78 src: url("../fonts/ubuntu-mono-v15-regular-greek.woff2") format("woff2");
79 unicode-range: U+0370-03FF;
80}
81/* ubuntu mono latin-ext */
82@font-face {
83 font-family: "Ubuntu Mono";
84 font-style: normal;
85 font-weight: 400;
86 font-display: swap;
87 src: url("../fonts/ubuntu-mono-v15-regular-latin-ext.woff2") format("woff2");
88 unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
89 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
90}
91/* ubuntu mono latin */
92@font-face {
93 font-family: "Ubuntu Mono";
94 font-style: normal;
95 font-weight: 400;
96 font-display: swap;
97 src: url("../fonts/ubuntu-mono-v15-regular-latin.woff2") format("woff2");
98 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
99 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
100 U+FEFF, U+FFFD;
101}
102/* ubuntu mono box drawing characters */
103@font-face {
104 font-family: "Ubuntu Mono";
105 font-style: normal;
106 font-weight: 400;
107 font-display: swap;
108 src: url("../fonts/ubuntu-mono-v15-regular-box.woff2") format("woff2");
109 unicode-range: U+2500-257F, U+2580-259F;
110}
111
112:root {
113 /* Colours */
114 --black: #2a2020;
115 --hard-black: #000;
116 --pink: #ffaff3;
117 --hot-pink: #d900b8;
118 --white: #fff;
119 --pink-white: #fff8fe;
120 --mid-grey: #dfe2e5;
121 --light-grey: #f5f5f5;
122 --boi-blue: #a6f0fc;
123
124 /* Derived colours */
125 --text: var(--black);
126 --background: var(--white);
127 --accented-background: var(--pink-white);
128 --code-border: var(--pink);
129 --code-background: var(--light-grey);
130 --table-border: var(--mid-grey);
131 --table-background: var(--pink-white);
132 --links: var(--hot-pink);
133 --accent: var(--pink);
134
135 /* Sizes */
136 --content-width: 772px;
137 --header-height: 60px;
138 --hash-offset: calc(var(--header-height) * 1.67);
139 --sidebar-width: 240px;
140 --gap: 24px;
141 --small-gap: calc(var(--gap) / 2);
142 --tiny-gap: calc(var(--small-gap) / 2);
143 --large-gap: calc(var(--gap) * 2);
144 --sidebar-toggle-size: 33px;
145 --search-height: 4rem;
146
147 /* etc */
148 --shadow: 0 0 0 1px rgba(50, 50, 93, 0.075), 0 0 1px #e9ecef,
149 0 2px 4px -2px rgba(138, 141, 151, 0.6);
150 --nav-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
151}
152
153* {
154 box-sizing: border-box;
155}
156
157body,
158html {
159 padding: 0;
160 margin: 0;
161 font-family: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
162 Arial, system-ui, ui-sans-serif, sans-serif, "Apple Color Emoji",
163 "Segoe UI Emoji";
164 font-size: 17px;
165 line-height: 1.4;
166 position: relative;
167 min-height: 100vh;
168 word-break: break-word;
169}
170
171html {
172 /* This is necessary so hash targets appear below the fixed header */
173 scroll-padding-top: var(--hash-offset);
174}
175
176a,
177a:visited {
178 color: var(--links);
179 text-decoration: none;
180}
181
182a:hover {
183 text-decoration: underline;
184}
185
186button,
187select {
188 background: transparent;
189 border: 0 none;
190 cursor: pointer;
191 font-family: inherit;
192 font-size: 100%;
193 line-height: 1.15;
194 margin: 0;
195 text-transform: none;
196}
197
198button::-moz-focus-inner {
199 border-style: none;
200 padding: 0;
201}
202
203button:-moz-focusring {
204 outline: 1px dotted ButtonText;
205}
206
207button {
208 -webkit-appearance: button;
209 appearance: button;
210 line-height: 1;
211 margin: 0;
212 overflow: visible;
213 padding: 0;
214}
215
216button:active,
217select:active {
218 outline: 0 none;
219}
220
221li {
222 margin-bottom: 4px;
223}
224
225p {
226 margin: var(--small-gap) 0;
227}
228
229.rendered-markdown h1,
230.rendered-markdown h2,
231.rendered-markdown h3,
232.rendered-markdown h4,
233.rendered-markdown h5 {
234 font-size: 1.3rem;
235}
236
237blockquote {
238 border-left: 4px solid var(--accent);
239 padding: var(--small-gap) var(--gap);
240 background-color: var(--accented-background);
241 margin: var(--small-gap) 0;
242}
243
244/* Code */
245
246pre,
247code {
248 font-family: "Ubuntu Mono", SFMono-Regular, "SF Mono", Menlo, Consolas,
249 "Liberation Mono", ui-monospace, monospace;
250 line-height: 1.2;
251 background-color: var(--code-background);
252}
253
254pre {
255 margin: var(--gap) 0;
256 border-radius: 1px;
257 overflow: auto;
258 box-shadow: var(--shadow);
259}
260
261pre > code,
262code.hljs {
263 padding: var(--small-gap) var(--gap);
264 background: transparent;
265}
266
267p code {
268 margin: 0 2px;
269 border-radius: 3px;
270 padding: 0 0.2em;
271 color: var(--inline-code);
272}
273
274p a code {
275 color: var(--links);
276}
277
278/* Page layout */
279
280.page {
281 display: flex;
282}
283
284.content {
285 margin-left: var(--sidebar-width);
286 margin-bottom: var(--large-gap);
287 padding: calc(var(--header-height) + var(--gap)) var(--gap) 0 var(--gap);
288 width: calc(100% - var(--sidebar-width));
289 max-width: var(--content-width);
290}
291
292.content img {
293 max-width: 100%;
294}
295
296/* Page header */
297
298.page-header {
299 box-shadow: var(--nav-shadow);
300 height: var(--header-height);
301 color: black;
302 color: var(--hard-black);
303 background-color: var(--pink);
304 display: flex;
305 padding: var(--small-gap) var(--gap);
306 position: fixed;
307 left: 0;
308 right: 0;
309 top: 0;
310 z-index: 300;
311}
312
313.page-header h2 {
314 align-items: baseline;
315 display: flex;
316 margin: 0;
317 width: var(--sidebar-width);
318}
319
320.page-header a,
321.page-header a:visited {
322 color: black;
323 color: var(--hard-black);
324 overflow: hidden;
325 text-overflow: ellipsis;
326 white-space: nowrap;
327}
328
329.sidebar-toggle {
330 display: none;
331 font-size: var(--sidebar-toggle-size);
332 opacity: 0;
333 transition: opacity 1s ease;
334}
335
336.search-nav-button {
337 display: none;
338 font-size: var(--sidebar-toggle-size);
339 opacity: 0;
340 transition: opacity 1s ease;
341}
342
343.page-header .sidebar-toggle {
344 color: white;
345 color: var(--white);
346 margin: 0 var(--small-gap) 0 0;
347}
348
349.page-header .search-nav-button {
350 color: white;
351 color: var(--white);
352 margin: 0 var(--small-gap) 0 0;
353}
354
355/* Version selector */
356
357#project-version {
358 --half-small-gap: calc(var(--small-gap) / 2);
359 --icon-size: 0.75em;
360 flex-shrink: 0;
361 font-size: 0.9rem;
362 font-weight: normal;
363 margin-left: var(--half-small-gap);
364}
365
366#project-version > span {
367 padding-left: var(--half-small-gap);
368}
369
370#project-version form {
371 align-items: center;
372 display: inline-flex;
373 justify-content: flex-end;
374}
375
376#project-version select {
377 appearance: none;
378 -webkit-appearance: none;
379 padding: 0.6rem calc(1.3 * var(--icon-size)) 0.6rem var(--half-small-gap);
380 position: relative;
381 z-index: 1;
382}
383
384#project-version option {
385 background-color: var(--code-background);
386}
387
388#project-version .icon {
389 font-size: var(--icon-size);
390 margin-left: calc(-1.65 * var(--icon-size));
391}
392
393/* Module doc */
394
395.module-name > a,
396.module-member-kind > a {
397 color: inherit;
398}
399
400.module-name > a:hover,
401.module-member-kind > a:hover {
402 text-decoration: none;
403}
404
405.module-name > .icon-gleam-chasse,
406.module-member-kind > .icon-gleam-chasse,
407.module-member-kind > .icon-gleam-chasse-2 {
408 color: var(--pink);
409 display: block;
410 font-size: 1rem;
411 margin: var(--small-gap) 0 0;
412}
413
414.module-name {
415 color: var(--hard-black);
416 margin: 0 0 var(--gap);
417 font-weight: 700;
418}
419
420/* Sidebar */
421
422.sidebar {
423 background-color: var(--background);
424 font-size: 0.95rem;
425 max-height: calc(100vh - var(--header-height));
426 overflow-y: auto;
427 overscroll-behavior: contain;
428 padding-top: var(--gap);
429 padding-bottom: calc(3 * var(--gap));
430 padding-left: var(--gap);
431 padding-right: var(--gap);
432 position: fixed;
433 top: var(--header-height);
434 transition: transform 0.5s ease;
435 width: var(--sidebar-width);
436 z-index: 100;
437}
438
439.sidebar h2 {
440 margin: 0;
441}
442
443.sidebar ul {
444 list-style: none;
445 margin: var(--small-gap) 0;
446 padding: 0;
447}
448
449.sidebar li {
450 line-height: 1.2;
451 margin-bottom: 4px;
452}
453
454.module-link {
455 display: inline-block;
456 padding-left: 0.5em;
457 text-indent: -0.5em;
458 line-height: 1.2;
459}
460
461.sidebar .sidebar-toggle {
462 color: var(--pink);
463 font-size: calc(0.8 * var(--sidebar-toggle-size));
464}
465
466body.drawer-closed .label-open,
467body.drawer-open .label-closed {
468 display: none;
469}
470
471.display-controls {
472 display: flex;
473 flex-wrap: wrap;
474 margin-top: var(--small-gap);
475 padding-right: var(--gap);
476}
477
478.display-controls .control {
479 margin: 0.5rem 0;
480}
481
482.display-controls .control:not(:first-child) {
483 margin-left: 1rem;
484}
485
486.toggle {
487 align-items: center;
488 display: flex;
489 font-size: 0.96rem;
490}
491
492.toggle-0 .label:not(.label-0),
493.toggle-1 .label:not(.label-1) {
494 display: none;
495}
496
497.label {
498 display: flex;
499}
500
501.label .icon {
502 margin: 0 0.28rem;
503}
504
505/* Module members (types, functions) */
506
507.module-members {
508 margin-top: var(--large-gap);
509}
510
511.module-members:last-of-type .member:last-of-type {
512 margin-bottom: 0;
513}
514
515.module-member-kind {
516 font-size: 2rem;
517 color: var(--text);
518}
519
520.member {
521 margin: var(--large-gap) 0;
522 padding-bottom: var(--gap);
523}
524
525.member-name {
526 display: flex;
527 align-items: center;
528 justify-content: space-between;
529 border-left: 4px solid var(--accent);
530 padding: var(--small-gap) var(--gap);
531 background-color: var(--accented-background);
532}
533
534.member-name h2 {
535 display: flex;
536 font-size: 1.5rem;
537 margin: 0;
538}
539
540.member-name h2 a {
541 color: var(--text);
542}
543
544.member-source {
545 align-self: baseline;
546 flex-shrink: 0;
547 line-height: calc(1.4 * 1.5rem);
548 margin: 0 0 0 var(--small-gap);
549}
550
551.visibility-tag {
552 background-color: var(--bg-shade-3);
553 color: var(--text);
554 padding: 0px 6px 4px;
555 border-radius: 4px;
556 font-size: 0.9em;
557 margin-left: auto;
558 line-height: normal;
559}
560
561/* Custom type constructors */
562
563.constructor-list {
564 list-style: none;
565 padding: 0;
566}
567
568.constructor-row {
569 align-items: center;
570 display: flex;
571}
572
573.constructor-item {
574 margin-bottom: var(--small-gap);
575}
576
577.constructor-argument-label {
578 font-style: italic;
579}
580
581.constructor-argument-list {
582 margin-bottom: var(--small-gap);
583}
584
585.constructor-item-docs {
586 margin-left: var(--large-gap);
587 margin-bottom: var(--gap);
588}
589
590.constructor-item .icon {
591 flex-shrink: 0;
592 font-size: 0.7rem;
593 margin: 0 0.88rem;
594}
595
596.constructor-name {
597 box-shadow: unset;
598 margin: 0;
599}
600
601.constructor-name > code {
602 padding: var(--small-gap);
603}
604
605/* Tables */
606
607table {
608 display: block;
609 overflow-inline: auto;
610 border-spacing: 0;
611 border-collapse: collapse;
612}
613
614table td,
615table th {
616 /* Inside table cells we don't won't to break words anywhere, otherwise in
617 narrow columns or in tables with many columns we'd end up with columns with
618 a single character per line.
619 */
620 word-break: normal;
621 overflow-wrap: normal;
622 padding: 6px 13px;
623 border: 1px solid var(--table-border);
624}
625
626table tr:nth-child(2n) {
627 background-color: var(--table-background);
628}
629
630/* Footer */
631
632.pride {
633 width: 100%;
634 display: none;
635 flex-direction: row;
636 position: absolute;
637 bottom: 0;
638 z-index: 100;
639}
640
641.show-pride .pride {
642 display: flex;
643}
644
645.show-pride .sidebar {
646 margin-bottom: var(--gap);
647}
648
649.pride div {
650 flex: 1;
651 text-align: center;
652 padding: var(--tiny-gap);
653}
654
655.pride .white {
656 background-color: var(--white);
657}
658.pride .pink {
659 background-color: var(--pink);
660}
661.pride .blue {
662 background-color: var(--boi-blue);
663}
664
665.pride-button {
666 position: absolute;
667 right: 2px;
668 bottom: 2px;
669 opacity: 0.2;
670 font-size: 0.9rem;
671}
672
673.pride-button {
674 text-decoration: none;
675 cursor: default;
676}
677
678/* Icons */
679
680.svg-lib {
681 height: 0;
682 overflow: hidden;
683 position: absolute;
684 width: 0;
685}
686
687.icon {
688 display: inline-block;
689 fill: currentColor;
690 height: 1em;
691 stroke: currentColor;
692 stroke-width: 0;
693 width: 1em;
694}
695
696.icon-gleam-chasse {
697 width: 8.182em;
698}
699
700.icon-gleam-chasse-2 {
701 width: 4.909em;
702}
703
704/* Pre-Wrap Option */
705
706body.prewrap-on code,
707body.prewrap-on pre {
708 white-space: pre-wrap;
709}
710
711/* Dark Theme Option */
712
713body.theme-dark {
714 /* Colour palette adapted from:
715 * https://github.com/dustypomerleau/yarra-valley
716 */
717
718 --argument-atom: #c651e5;
719 --class-module: #ff89b5;
720 --comment: #7e818b;
721 --escape: #7cdf89;
722 --function-call: #abb8c0;
723 --function-definition: #8af899;
724 --interpolation-regex: #ee37aa;
725 --keyword-operator: #ff9d35;
726 --number-boolean: #f14360;
727 --object: #99c2eb;
728 --punctuation: #4ce7ff;
729 --string: #aecc00;
730
731 --inline-code: #ff9d35;
732
733 --bg: #292d3e;
734 --bg-tint-1: #3e4251;
735 --bg-tint-2: #535664;
736 --bg-tint-3: #696c77;
737 --bg-tint-4: #7e818b;
738 --bg-shade-1: #242837;
739 --bg-shade-2: #202431;
740 --bg-shade-3: #1c1f2b;
741 --bg-mono-1: #33384d;
742 --bg-mono-2: #3d435d;
743 --bg-mono-3: #474e6c;
744 --bg-mono-4: #51597b;
745
746 --fg: #cac0a9;
747 --fg-tint-1: #fdf2d8;
748 --fg-tint-2: #fdf3dc;
749 --fg-tint-3: #fdf5e0;
750 --fg-shade-1: #e3d8be;
751 --fg-shade-2: #cac0a9;
752 --fg-shade-3: #b1a894;
753 --fg-shade-4: #97907f;
754
755 --orange-shade-1: #e58d2f;
756 --orange-shade-2: #cc7d2a;
757 --orange-shade-3: #b26d25;
758
759 --taupe-mono-1: #fdf1d4;
760 --taupe-mono-2: #fce9bc;
761 --taupe-mono-3: #fbe1a3;
762
763 /* Theme Overrides */
764
765 --accent: var(--pink);
766 --accented-background: var(--bg-shade-1);
767 --background: var(--bg);
768 --code-background: var(--bg-shade-2);
769 --table-background: var(--bg-mono-1);
770 --hard-black: var(--taupe-mono-1);
771 --links: var(--pink);
772 --text: var(--taupe-mono-1);
773
774 --shadow: 0 0 0 1px rgba(50, 50, 93, 0.075), 0 0 1px var(--fg-shade-3),
775 0 2px 4px -2px rgba(138, 141, 151, 0.2);
776 --nav-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
777}
778
779body.theme-dark {
780 background-color: var(--bg);
781 color: var(--fg-shade-1);
782}
783
784body.theme-dark .page-header {
785 background-color: var(--bg-mono-1);
786}
787
788body.theme-dark .page-header h2 {
789 color: var(--fg-shade-1);
790}
791
792body.theme-dark .page-header a,
793body.theme-dark .page-header a:visited {
794 color: var(--pink);
795}
796
797body.theme-dark .page-header .sidebar-toggle {
798 color: var(--fg-shade-1);
799}
800body.theme-dark .page-header .search-nav-button {
801 color: var(--fg-shade-1);
802}
803
804body.theme-dark #project-version select,
805body.theme-dark .control {
806 color: var(--fg-shade-1);
807}
808
809body.theme-dark .module-name {
810 color: var(--taupe-mono-1);
811}
812
813body.theme-dark .pride {
814 color: var(--bg-shade-3);
815}
816
817body.theme-dark .pride .white {
818 background-color: var(--fg-shade-1);
819}
820
821body.theme-dark .pride .pink {
822 background-color: var(--argument-atom);
823}
824
825body.theme-dark .pride .blue {
826 background-color: var(--punctuation);
827}
828
829/* Medium and larger displays */
830@media (min-width: 680px) {
831 #prewrap-toggle {
832 display: none;
833 }
834}
835
836/* Small displays */
837@media (max-width: 920px) {
838 .page-header {
839 padding-left: var(--small-gap);
840 padding-right: var(--small-gap);
841 }
842
843 .page-header h2 {
844 width: calc(
845 100% - var(--sidebar-toggle-size) - var(--small-gap) -
846 var(--sidebar-toggle-size) - var(--small-gap)
847 );
848 }
849
850 .content {
851 width: 100%;
852 max-width: unset;
853 margin-left: unset;
854 }
855
856 .sidebar {
857 box-shadow: var(--nav-shadow);
858 height: 100vh;
859 max-height: unset;
860 top: 0;
861 transform: translate(calc(-10px - var(--sidebar-width)));
862 z-index: 500;
863 }
864
865 body.drawer-open .sidebar {
866 transform: translate(0);
867 }
868
869 .sidebar-toggle {
870 display: block;
871 opacity: 1;
872 }
873
874 .search-nav-button {
875 display: block;
876 opacity: 1;
877 }
878
879 .sidebar .sidebar-toggle {
880 height: var(--sidebar-toggle-size);
881 position: absolute;
882 right: var(--small-gap);
883 top: var(--small-gap);
884 width: var(--sidebar-toggle-size);
885 }
886}
887
888/* Search */
889
890.search {
891 display: none;
892 position: relative;
893 z-index: 2;
894 flex-grow: 1;
895 height: var(--search-height);
896 padding: 0.5rem;
897 transition: padding linear 200ms;
898}
899
900@media (min-width: 919px) {
901 .search {
902 margin-left: var(--small-gap);
903 display: block;
904 position: relative !important;
905 width: auto !important;
906 height: 100% !important;
907 padding: 0;
908 transition: none;
909 }
910}
911
912.search-input-wrap {
913 position: relative;
914 z-index: 1;
915 height: 3rem;
916 overflow: hidden;
917 border-radius: 4px;
918 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
919 transition: height linear 200ms;
920}
921
922@media (min-width: 919px) {
923 .search-input-wrap {
924 position: absolute;
925 width: 100%;
926 max-width: calc(var(--content-width) - var(--gap) - var(--gap));
927 height: 100% !important;
928 border-radius: 0;
929 box-shadow: none;
930 transition: width ease 400ms;
931 }
932}
933
934.search-input {
935 position: absolute;
936 width: 100%;
937 height: 100%;
938 padding: 0.5rem 1rem;
939 font-size: 16px;
940 background-color: var(--background);
941 color: var(--text);
942 border-top: 0;
943 border-right: 0;
944 border-bottom: 0;
945 border-left: 0;
946 border-radius: 0;
947}
948
949@media (min-width: 919px) {
950 .search-input {
951 padding: 1rem;
952 font-size: 14px;
953 background-color: var(--background);
954 transition: padding-left linear 200ms;
955 }
956}
957
958.search-input:focus {
959 outline: 0;
960}
961
962.search-input:focus + .search-label .search-icon {
963 color: var(--pink);
964}
965
966.search-label {
967 position: absolute;
968 right: 0;
969 display: flex;
970 height: 100%;
971 padding-right: 1rem;
972 cursor: pointer;
973}
974
975@media (min-width: 919px) {
976 .search-label {
977 padding-right: 0.6rem;
978 transition: padding-left linear 200ms;
979 }
980}
981
982.search-label .search-icon {
983 width: 1.2rem;
984 height: 1.2rem;
985 align-self: center;
986 color: var(--text);
987}
988
989.search-results {
990 position: absolute;
991 left: 0;
992 display: none;
993 width: 100%;
994 max-height: calc(100% - var(--search-height));
995 overflow-y: auto;
996 background-color: var(--background);
997 border-bottom-right-radius: 4px;
998 border-bottom-left-radius: 4px;
999 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
1000}
1001
1002@media (min-width: 919px) {
1003 .search-results {
1004 top: 100%;
1005 width: calc(var(--content-width) - var(--gap) - var(--gap));
1006 max-height: calc(100vh - 200%) !important;
1007 }
1008}
1009
1010.search-results-list {
1011 padding-left: 0;
1012 margin-bottom: 0.25rem;
1013 list-style: none;
1014 font-size: 14px !important;
1015}
1016
1017@media (min-width: 31.25rem) {
1018 .search-results-list {
1019 font-size: 16px !important;
1020 }
1021}
1022
1023@media (min-width: 919px) {
1024 .search-results-list {
1025 font-size: 12px !important;
1026 }
1027}
1028
1029@media (min-width: 919px) and (min-width: 31.25rem) {
1030 .search-results-list {
1031 font-size: 14px !important;
1032 }
1033}
1034
1035.search-results-list-item {
1036 padding: 0;
1037 margin: 0;
1038}
1039
1040.search-result {
1041 display: block;
1042 padding-top: 0.25rem;
1043 padding-right: 0.75rem;
1044 padding-bottom: 0.25rem;
1045 padding-left: 0.75rem;
1046}
1047
1048.search-result:hover,
1049.search-result.active {
1050 background-color: var(--code-background);
1051}
1052
1053.search-result-title {
1054 display: block;
1055 padding-top: 0.5rem;
1056 padding-bottom: 0.5rem;
1057}
1058
1059@media (min-width: 31.25rem) {
1060 .search-result-title {
1061 display: inline-block;
1062 width: 40%;
1063 padding-right: 0.5rem;
1064 vertical-align: top;
1065 }
1066}
1067
1068.search-result-doc {
1069 display: flex;
1070 align-items: center;
1071 word-wrap: break-word;
1072}
1073
1074.search-result-doc.search-result-doc-parent {
1075 opacity: 0.5;
1076 font-size: 12px !important;
1077}
1078
1079@media (min-width: 31.25rem) {
1080 .search-result-doc.search-result-doc-parent {
1081 font-size: 14px !important;
1082 }
1083}
1084
1085@media (min-width: 919px) {
1086 .search-result-doc.search-result-doc-parent {
1087 font-size: 11px !important;
1088 }
1089}
1090
1091@media (min-width: 919px) and (min-width: 31.25rem) {
1092 .search-result-doc.search-result-doc-parent {
1093 font-size: 12px !important;
1094 }
1095}
1096
1097.search-result-doc .search-result-icon {
1098 width: 1rem;
1099 height: 1rem;
1100 margin-right: 0.5rem;
1101 color: var(--pink);
1102 flex-shrink: 0;
1103}
1104
1105.search-result-doc .search-result-doc-title {
1106 overflow: auto;
1107}
1108
1109.search-result-section {
1110 margin-left: 1.5rem;
1111 word-wrap: break-word;
1112}
1113
1114.search-result-rel-url {
1115 display: block;
1116 margin-left: 1.5rem;
1117 overflow: hidden;
1118 color: var(--text);
1119 text-overflow: ellipsis;
1120 white-space: nowrap;
1121 font-size: 9px !important;
1122}
1123
1124@media (min-width: 31.25rem) {
1125 .search-result-rel-url {
1126 font-size: 10px !important;
1127 }
1128}
1129
1130.search-result-previews {
1131 display: block;
1132 padding-top: 0.5rem;
1133 padding-bottom: 0.5rem;
1134 padding-left: 1rem;
1135 margin-left: 0.5rem;
1136 color: var(--text);
1137 word-wrap: break-word;
1138 border-left: 1px solid;
1139 border-left-color: #eeebee;
1140 font-size: 11px !important;
1141 /* TODO: fix it by not adding at the parent? */
1142 white-space: initial !important;
1143}
1144
1145@media (min-width: 31.25rem) {
1146 .search-result-previews {
1147 font-size: 12px !important;
1148 }
1149}
1150
1151@media (min-width: 31.25rem) {
1152 .search-result-previews {
1153 display: inline-block;
1154 width: 60%;
1155 padding-left: 0.5rem;
1156 margin-left: 0;
1157 vertical-align: top;
1158 }
1159}
1160
1161.search-result-preview + .search-result-preview {
1162 margin-top: 0.25rem;
1163}
1164
1165.search-result-highlight {
1166 font-weight: bold;
1167}
1168
1169.search-no-result {
1170 padding-top: 0.5rem;
1171 padding-right: 0.75rem;
1172 padding-bottom: 0.5rem;
1173 padding-left: 0.75rem;
1174 font-size: 12px !important;
1175}
1176
1177@media (min-width: 31.25rem) {
1178 .search-no-result {
1179 font-size: 14px !important;
1180 }
1181}
1182
1183.search-button {
1184 position: fixed;
1185 right: 1rem;
1186 bottom: 1rem;
1187 display: flex;
1188 width: 3.5rem;
1189 height: 3.5rem;
1190 background-color: var(--background);
1191 border: 1px solid rgba(114, 83, 237, 0.3);
1192 border-radius: 1.75rem;
1193 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
1194 align-items: center;
1195 justify-content: center;
1196}
1197
1198.search-overlay {
1199 position: fixed;
1200 top: 0;
1201 left: 0;
1202 z-index: 101;
1203 width: 0;
1204 height: 0;
1205 background-color: rgba(0, 0, 0, 0.3);
1206 opacity: 0;
1207 transition: opacity ease 400ms, width 0s 400ms, height 0s 400ms;
1208}
1209
1210.search-active .search {
1211 display: block;
1212 position: fixed;
1213 top: 0;
1214 left: 0;
1215 width: 100%;
1216 height: 100%;
1217 padding: 0;
1218}
1219
1220.search-active .search-input-wrap {
1221 height: var(--search-height);
1222 border-radius: 0;
1223}
1224
1225@media (min-width: 919px) {
1226 .search-active .search-input-wrap {
1227 width: calc(var(--content-width) - var(--gap) - var(--gap));
1228 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
1229 }
1230}
1231
1232@media (min-width: 919px) {
1233 .search-active .search-label {
1234 padding-left: 0.6rem;
1235 }
1236}
1237
1238.search-active .search-results {
1239 display: block;
1240}
1241
1242.search-active .search-overlay {
1243 width: 100%;
1244 height: 100%;
1245 opacity: 1;
1246 transition: opacity ease 400ms, width 0s, height 0s;
1247}
1248
1249@media (min-width: 919px) {
1250 .search-active .main {
1251 position: fixed;
1252 right: 0;
1253 left: 0;
1254 }
1255}
1256
1257.search-active .main-header {
1258 padding-top: var(--search-height);
1259}
1260
1261@media (min-width: 919px) {
1262 .search-active .main-header {
1263 padding-top: 0;
1264 }
1265}