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