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