nandi.uk
Fork of daniellemaywood.uk/gleam — Wasm codegen work
24 kB
1257 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 border-spacing: 0;
609 border-collapse: collapse;
610}
611
612table td,
613table th {
614 padding: 6px 13px;
615 border: 1px solid var(--table-border);
616}
617
618table tr:nth-child(2n) {
619 background-color: var(--table-background);
620}
621
622/* Footer */
623
624.pride {
625 width: 100%;
626 display: none;
627 flex-direction: row;
628 position: absolute;
629 bottom: 0;
630 z-index: 100;
631}
632
633.show-pride .pride {
634 display: flex;
635}
636
637.show-pride .sidebar {
638 margin-bottom: var(--gap);
639}
640
641.pride div {
642 flex: 1;
643 text-align: center;
644 padding: var(--tiny-gap);
645}
646
647.pride .white {
648 background-color: var(--white);
649}
650.pride .pink {
651 background-color: var(--pink);
652}
653.pride .blue {
654 background-color: var(--boi-blue);
655}
656
657.pride-button {
658 position: absolute;
659 right: 2px;
660 bottom: 2px;
661 opacity: 0.2;
662 font-size: 0.9rem;
663}
664
665.pride-button {
666 text-decoration: none;
667 cursor: default;
668}
669
670/* Icons */
671
672.svg-lib {
673 height: 0;
674 overflow: hidden;
675 position: absolute;
676 width: 0;
677}
678
679.icon {
680 display: inline-block;
681 fill: currentColor;
682 height: 1em;
683 stroke: currentColor;
684 stroke-width: 0;
685 width: 1em;
686}
687
688.icon-gleam-chasse {
689 width: 8.182em;
690}
691
692.icon-gleam-chasse-2 {
693 width: 4.909em;
694}
695
696/* Pre-Wrap Option */
697
698body.prewrap-on code,
699body.prewrap-on pre {
700 white-space: pre-wrap;
701}
702
703/* Dark Theme Option */
704
705body.theme-dark {
706 /* Colour palette adapted from:
707 * https://github.com/dustypomerleau/yarra-valley
708 */
709
710 --argument-atom: #c651e5;
711 --class-module: #ff89b5;
712 --comment: #7e818b;
713 --escape: #7cdf89;
714 --function-call: #abb8c0;
715 --function-definition: #8af899;
716 --interpolation-regex: #ee37aa;
717 --keyword-operator: #ff9d35;
718 --number-boolean: #f14360;
719 --object: #99c2eb;
720 --punctuation: #4ce7ff;
721 --string: #aecc00;
722
723 --inline-code: #ff9d35;
724
725 --bg: #292d3e;
726 --bg-tint-1: #3e4251;
727 --bg-tint-2: #535664;
728 --bg-tint-3: #696c77;
729 --bg-tint-4: #7e818b;
730 --bg-shade-1: #242837;
731 --bg-shade-2: #202431;
732 --bg-shade-3: #1c1f2b;
733 --bg-mono-1: #33384d;
734 --bg-mono-2: #3d435d;
735 --bg-mono-3: #474e6c;
736 --bg-mono-4: #51597b;
737
738 --fg: #cac0a9;
739 --fg-tint-1: #fdf2d8;
740 --fg-tint-2: #fdf3dc;
741 --fg-tint-3: #fdf5e0;
742 --fg-shade-1: #e3d8be;
743 --fg-shade-2: #cac0a9;
744 --fg-shade-3: #b1a894;
745 --fg-shade-4: #97907f;
746
747 --orange-shade-1: #e58d2f;
748 --orange-shade-2: #cc7d2a;
749 --orange-shade-3: #b26d25;
750
751 --taupe-mono-1: #fdf1d4;
752 --taupe-mono-2: #fce9bc;
753 --taupe-mono-3: #fbe1a3;
754
755 /* Theme Overrides */
756
757 --accent: var(--pink);
758 --accented-background: var(--bg-shade-1);
759 --background: var(--bg);
760 --code-background: var(--bg-shade-2);
761 --table-background: var(--bg-mono-1);
762 --hard-black: var(--taupe-mono-1);
763 --links: var(--pink);
764 --text: var(--taupe-mono-1);
765
766 --shadow: 0 0 0 1px rgba(50, 50, 93, 0.075), 0 0 1px var(--fg-shade-3),
767 0 2px 4px -2px rgba(138, 141, 151, 0.2);
768 --nav-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
769}
770
771body.theme-dark {
772 background-color: var(--bg);
773 color: var(--fg-shade-1);
774}
775
776body.theme-dark .page-header {
777 background-color: var(--bg-mono-1);
778}
779
780body.theme-dark .page-header h2 {
781 color: var(--fg-shade-1);
782}
783
784body.theme-dark .page-header a,
785body.theme-dark .page-header a:visited {
786 color: var(--pink);
787}
788
789body.theme-dark .page-header .sidebar-toggle {
790 color: var(--fg-shade-1);
791}
792body.theme-dark .page-header .search-nav-button {
793 color: var(--fg-shade-1);
794}
795
796body.theme-dark #project-version select,
797body.theme-dark .control {
798 color: var(--fg-shade-1);
799}
800
801body.theme-dark .module-name {
802 color: var(--taupe-mono-1);
803}
804
805body.theme-dark .pride {
806 color: var(--bg-shade-3);
807}
808
809body.theme-dark .pride .white {
810 background-color: var(--fg-shade-1);
811}
812
813body.theme-dark .pride .pink {
814 background-color: var(--argument-atom);
815}
816
817body.theme-dark .pride .blue {
818 background-color: var(--punctuation);
819}
820
821/* Medium and larger displays */
822@media (min-width: 680px) {
823 #prewrap-toggle {
824 display: none;
825 }
826}
827
828/* Small displays */
829@media (max-width: 920px) {
830 .page-header {
831 padding-left: var(--small-gap);
832 padding-right: var(--small-gap);
833 }
834
835 .page-header h2 {
836 width: calc(
837 100% - var(--sidebar-toggle-size) - var(--small-gap) -
838 var(--sidebar-toggle-size) - var(--small-gap)
839 );
840 }
841
842 .content {
843 width: 100%;
844 max-width: unset;
845 margin-left: unset;
846 }
847
848 .sidebar {
849 box-shadow: var(--nav-shadow);
850 height: 100vh;
851 max-height: unset;
852 top: 0;
853 transform: translate(calc(-10px - var(--sidebar-width)));
854 z-index: 500;
855 }
856
857 body.drawer-open .sidebar {
858 transform: translate(0);
859 }
860
861 .sidebar-toggle {
862 display: block;
863 opacity: 1;
864 }
865
866 .search-nav-button {
867 display: block;
868 opacity: 1;
869 }
870
871 .sidebar .sidebar-toggle {
872 height: var(--sidebar-toggle-size);
873 position: absolute;
874 right: var(--small-gap);
875 top: var(--small-gap);
876 width: var(--sidebar-toggle-size);
877 }
878}
879
880/* Search */
881
882.search {
883 display: none;
884 position: relative;
885 z-index: 2;
886 flex-grow: 1;
887 height: var(--search-height);
888 padding: 0.5rem;
889 transition: padding linear 200ms;
890}
891
892@media (min-width: 919px) {
893 .search {
894 margin-left: var(--small-gap);
895 display: block;
896 position: relative !important;
897 width: auto !important;
898 height: 100% !important;
899 padding: 0;
900 transition: none;
901 }
902}
903
904.search-input-wrap {
905 position: relative;
906 z-index: 1;
907 height: 3rem;
908 overflow: hidden;
909 border-radius: 4px;
910 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
911 transition: height linear 200ms;
912}
913
914@media (min-width: 919px) {
915 .search-input-wrap {
916 position: absolute;
917 width: 100%;
918 max-width: calc(var(--content-width) - var(--gap) - var(--gap));
919 height: 100% !important;
920 border-radius: 0;
921 box-shadow: none;
922 transition: width ease 400ms;
923 }
924}
925
926.search-input {
927 position: absolute;
928 width: 100%;
929 height: 100%;
930 padding: 0.5rem 1rem;
931 font-size: 16px;
932 background-color: var(--background);
933 color: var(--text);
934 border-top: 0;
935 border-right: 0;
936 border-bottom: 0;
937 border-left: 0;
938 border-radius: 0;
939}
940
941@media (min-width: 919px) {
942 .search-input {
943 padding: 1rem;
944 font-size: 14px;
945 background-color: var(--background);
946 transition: padding-left linear 200ms;
947 }
948}
949
950.search-input:focus {
951 outline: 0;
952}
953
954.search-input:focus + .search-label .search-icon {
955 color: var(--pink);
956}
957
958.search-label {
959 position: absolute;
960 right: 0;
961 display: flex;
962 height: 100%;
963 padding-right: 1rem;
964 cursor: pointer;
965}
966
967@media (min-width: 919px) {
968 .search-label {
969 padding-right: 0.6rem;
970 transition: padding-left linear 200ms;
971 }
972}
973
974.search-label .search-icon {
975 width: 1.2rem;
976 height: 1.2rem;
977 align-self: center;
978 color: var(--text);
979}
980
981.search-results {
982 position: absolute;
983 left: 0;
984 display: none;
985 width: 100%;
986 max-height: calc(100% - var(--search-height));
987 overflow-y: auto;
988 background-color: var(--background);
989 border-bottom-right-radius: 4px;
990 border-bottom-left-radius: 4px;
991 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
992}
993
994@media (min-width: 919px) {
995 .search-results {
996 top: 100%;
997 width: calc(var(--content-width) - var(--gap) - var(--gap));
998 max-height: calc(100vh - 200%) !important;
999 }
1000}
1001
1002.search-results-list {
1003 padding-left: 0;
1004 margin-bottom: 0.25rem;
1005 list-style: none;
1006 font-size: 14px !important;
1007}
1008
1009@media (min-width: 31.25rem) {
1010 .search-results-list {
1011 font-size: 16px !important;
1012 }
1013}
1014
1015@media (min-width: 919px) {
1016 .search-results-list {
1017 font-size: 12px !important;
1018 }
1019}
1020
1021@media (min-width: 919px) and (min-width: 31.25rem) {
1022 .search-results-list {
1023 font-size: 14px !important;
1024 }
1025}
1026
1027.search-results-list-item {
1028 padding: 0;
1029 margin: 0;
1030}
1031
1032.search-result {
1033 display: block;
1034 padding-top: 0.25rem;
1035 padding-right: 0.75rem;
1036 padding-bottom: 0.25rem;
1037 padding-left: 0.75rem;
1038}
1039
1040.search-result:hover,
1041.search-result.active {
1042 background-color: var(--code-background);
1043}
1044
1045.search-result-title {
1046 display: block;
1047 padding-top: 0.5rem;
1048 padding-bottom: 0.5rem;
1049}
1050
1051@media (min-width: 31.25rem) {
1052 .search-result-title {
1053 display: inline-block;
1054 width: 40%;
1055 padding-right: 0.5rem;
1056 vertical-align: top;
1057 }
1058}
1059
1060.search-result-doc {
1061 display: flex;
1062 align-items: center;
1063 word-wrap: break-word;
1064}
1065
1066.search-result-doc.search-result-doc-parent {
1067 opacity: 0.5;
1068 font-size: 12px !important;
1069}
1070
1071@media (min-width: 31.25rem) {
1072 .search-result-doc.search-result-doc-parent {
1073 font-size: 14px !important;
1074 }
1075}
1076
1077@media (min-width: 919px) {
1078 .search-result-doc.search-result-doc-parent {
1079 font-size: 11px !important;
1080 }
1081}
1082
1083@media (min-width: 919px) and (min-width: 31.25rem) {
1084 .search-result-doc.search-result-doc-parent {
1085 font-size: 12px !important;
1086 }
1087}
1088
1089.search-result-doc .search-result-icon {
1090 width: 1rem;
1091 height: 1rem;
1092 margin-right: 0.5rem;
1093 color: var(--pink);
1094 flex-shrink: 0;
1095}
1096
1097.search-result-doc .search-result-doc-title {
1098 overflow: auto;
1099}
1100
1101.search-result-section {
1102 margin-left: 1.5rem;
1103 word-wrap: break-word;
1104}
1105
1106.search-result-rel-url {
1107 display: block;
1108 margin-left: 1.5rem;
1109 overflow: hidden;
1110 color: var(--text);
1111 text-overflow: ellipsis;
1112 white-space: nowrap;
1113 font-size: 9px !important;
1114}
1115
1116@media (min-width: 31.25rem) {
1117 .search-result-rel-url {
1118 font-size: 10px !important;
1119 }
1120}
1121
1122.search-result-previews {
1123 display: block;
1124 padding-top: 0.5rem;
1125 padding-bottom: 0.5rem;
1126 padding-left: 1rem;
1127 margin-left: 0.5rem;
1128 color: var(--text);
1129 word-wrap: break-word;
1130 border-left: 1px solid;
1131 border-left-color: #eeebee;
1132 font-size: 11px !important;
1133 /* TODO: fix it by not adding at the parent? */
1134 white-space: initial !important;
1135}
1136
1137@media (min-width: 31.25rem) {
1138 .search-result-previews {
1139 font-size: 12px !important;
1140 }
1141}
1142
1143@media (min-width: 31.25rem) {
1144 .search-result-previews {
1145 display: inline-block;
1146 width: 60%;
1147 padding-left: 0.5rem;
1148 margin-left: 0;
1149 vertical-align: top;
1150 }
1151}
1152
1153.search-result-preview + .search-result-preview {
1154 margin-top: 0.25rem;
1155}
1156
1157.search-result-highlight {
1158 font-weight: bold;
1159}
1160
1161.search-no-result {
1162 padding-top: 0.5rem;
1163 padding-right: 0.75rem;
1164 padding-bottom: 0.5rem;
1165 padding-left: 0.75rem;
1166 font-size: 12px !important;
1167}
1168
1169@media (min-width: 31.25rem) {
1170 .search-no-result {
1171 font-size: 14px !important;
1172 }
1173}
1174
1175.search-button {
1176 position: fixed;
1177 right: 1rem;
1178 bottom: 1rem;
1179 display: flex;
1180 width: 3.5rem;
1181 height: 3.5rem;
1182 background-color: var(--background);
1183 border: 1px solid rgba(114, 83, 237, 0.3);
1184 border-radius: 1.75rem;
1185 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
1186 align-items: center;
1187 justify-content: center;
1188}
1189
1190.search-overlay {
1191 position: fixed;
1192 top: 0;
1193 left: 0;
1194 z-index: 101;
1195 width: 0;
1196 height: 0;
1197 background-color: rgba(0, 0, 0, 0.3);
1198 opacity: 0;
1199 transition: opacity ease 400ms, width 0s 400ms, height 0s 400ms;
1200}
1201
1202.search-active .search {
1203 display: block;
1204 position: fixed;
1205 top: 0;
1206 left: 0;
1207 width: 100%;
1208 height: 100%;
1209 padding: 0;
1210}
1211
1212.search-active .search-input-wrap {
1213 height: var(--search-height);
1214 border-radius: 0;
1215}
1216
1217@media (min-width: 919px) {
1218 .search-active .search-input-wrap {
1219 width: calc(var(--content-width) - var(--gap) - var(--gap));
1220 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
1221 }
1222}
1223
1224@media (min-width: 919px) {
1225 .search-active .search-label {
1226 padding-left: 0.6rem;
1227 }
1228}
1229
1230.search-active .search-results {
1231 display: block;
1232}
1233
1234.search-active .search-overlay {
1235 width: 100%;
1236 height: 100%;
1237 opacity: 1;
1238 transition: opacity ease 400ms, width 0s, height 0s;
1239}
1240
1241@media (min-width: 919px) {
1242 .search-active .main {
1243 position: fixed;
1244 right: 0;
1245 left: 0;
1246 }
1247}
1248
1249.search-active .main-header {
1250 padding-top: var(--search-height);
1251}
1252
1253@media (min-width: 919px) {
1254 .search-active .main-header {
1255 padding-top: 0;
1256 }
1257}