From 43b7aab45d870ec89fabf4f24c6c87da2fda7f50 Mon Sep 17 00:00:00 2001 From: Joseph Kato Date: Mon, 23 Dec 2024 21:59:53 -0700 Subject: [PATCH] WIP --- src/styles/anchor.css | 16 +- src/styles/app.css | 285 +++--- src/styles/autocomplete.css | 1717 ++++++++++++++++++----------------- src/styles/code.css | 147 +-- src/styles/docsearch.css | 909 ++++++++++--------- 5 files changed, 1630 insertions(+), 1444 deletions(-) diff --git a/src/styles/anchor.css b/src/styles/anchor.css index 8e189d9..21e8ba3 100644 --- a/src/styles/anchor.css +++ b/src/styles/anchor.css @@ -1,13 +1,13 @@ .prose .anchor { - text-decoration: none; + text-decoration: none; } .prose .anchor::after { - content: '#'; - color: #999; - margin-left: 0.25rem; - opacity: 0; - transition: opacity 0.2s ease-in-out; + content: '#'; + color: #999; + margin-left: 0.25rem; + opacity: 0; + transition: opacity 0.2s ease-in-out; } .prose h2:hover .anchor::after, @@ -15,9 +15,9 @@ .prose h4:hover .anchor::after, .prose h5:hover .anchor::after, .prose h6:hover .anchor::after { - opacity: 1; + opacity: 1; } .prose .anchor .dark & { - color: #fff; + color: #fff; } diff --git a/src/styles/app.css b/src/styles/app.css index a3e91a1..daf168d 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -3,194 +3,201 @@ @tailwind utilities; @layer base { - :root { - --background: 0 0% 100%; - --foreground: 20 14.3% 4.1%; - --card: 0 0% 100%; - --card-foreground: 20 14.3% 4.1%; - --popover: 0 0% 100%; - --popover-foreground: 20 14.3% 4.1%; - --primary: 24 9.8% 10%; - --primary-foreground: 60 9.1% 97.8%; - --secondary: 60 4.8% 95.9%; - --secondary-foreground: 24 9.8% 10%; - --muted: 60 4.8% 95.9%; - --muted-foreground: 25 5.3% 44.7%; - --accent: 60 4.8% 95.9%; - --accent-foreground: 24 9.8% 10%; - --destructive: 0 72.22% 50.59%; - --destructive-foreground: 60 9.1% 97.8%; - --border: 20 5.9% 90%; - --input: 20 5.9% 90%; - --ring: 20 14.3% 4.1%; - --radius: 0.5rem; - } - .dark { - --background: 20 14.3% 4.1%; - --foreground: 60 9.1% 97.8%; - --card: 20 14.3% 4.1%; - --card-foreground: 60 9.1% 97.8%; - --popover: 20 14.3% 4.1%; - --popover-foreground: 60 9.1% 97.8%; - --primary: 60 9.1% 97.8%; - --primary-foreground: 24 9.8% 10%; - --secondary: 12 6.5% 15.1%; - --secondary-foreground: 60 9.1% 97.8%; - --muted: 12 6.5% 15.1%; - --muted-foreground: 24 5.4% 63.9%; - --accent: 12 6.5% 15.1%; - --accent-foreground: 60 9.1% 97.8%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 60 9.1% 97.8%; - --border: 12 6.5% 15.1%; - --input: 12 6.5% 15.1%; - --ring: 24 5.7% 82.9%; - } + :root { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + --primary: 24 9.8% 10%; + --primary-foreground: 60 9.1% 97.8%; + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 60 9.1% 97.8%; + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + --ring: 20 14.3% 4.1%; + --radius: 0.5rem; + } + + .dark { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + --primary: 60 9.1% 97.8%; + --primary-foreground: 24 9.8% 10%; + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + --ring: 24 5.7% 82.9%; + } } @layer base { - @font-face { - font-family: 'geist-sans'; - src: url('/fonts/Geist/geist.woff2') format('woff2'); - font-display: swap; - } - - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - /* font-feature-settings: "rlig" 1, "calt" 1; */ - font-synthesis-weight: none; - text-rendering: optimizeLegibility; - } - - /* Mobile tap highlight */ - /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ - html { - -webkit-tap-highlight-color: rgba(128, 128, 128, 0.5); - } - - /* Font face Geist font */ - - /* === Scrollbars === */ - - ::-webkit-scrollbar { - @apply w-2; - @apply h-2; - } - - ::-webkit-scrollbar-track { - @apply !bg-muted; - } - ::-webkit-scrollbar-thumb { - @apply rounded-sm !bg-muted-foreground/30; - } - - /* Firefox */ - /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */ - html { - scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3); - } - - html.dark { - scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3); - } - - .hide-scrollbar::-webkit-scrollbar { - display: none; - } - - .hide-scrollbar { - -ms-overflow-style: none; - scrollbar-width: none; - } - .antialised { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } + @font-face { + font-family: 'geist-sans'; + src: url('/fonts/Geist/geist.woff2') format('woff2'); + font-display: swap; + } + + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + /* font-feature-settings: "rlig" 1, "calt" 1; */ + font-synthesis-weight: none; + text-rendering: optimizeLegibility; + } + + /* Mobile tap highlight */ + /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */ + html { + -webkit-tap-highlight-color: rgba(128, 128, 128, 0.5); + } + + /* Font face Geist font */ + + /* === Scrollbars === */ + + ::-webkit-scrollbar { + @apply w-2; + @apply h-2; + } + + ::-webkit-scrollbar-track { + @apply !bg-muted; + } + + ::-webkit-scrollbar-thumb { + @apply rounded-sm !bg-muted-foreground/30; + } + + /* Firefox */ + /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */ + html { + scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3); + } + + html.dark { + scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3); + } + + .hide-scrollbar::-webkit-scrollbar { + display: none; + } + + .hide-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; + } + + .antialised { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } } @layer utilities { - .step { - counter-increment: step; - } + .step { + counter-increment: step; + } - .step:before { - @apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium; - @apply ml-[-50px] mt-[-4px]; - content: counter(step); - } + .step:before { + @apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium; + @apply ml-[-50px] mt-[-4px]; + content: counter(step); + } - .chunk-container { - @apply shadow-none; - } + .chunk-container { + @apply shadow-none; + } - .chunk-container::after { - content: ''; - @apply absolute -inset-4 rounded-xl border shadow-xl; - } + .chunk-container::after { + content: ''; + @apply absolute -inset-4 rounded-xl border shadow-xl; + } } @media (max-width: 640px) { - .container { - @apply px-4; - } + .container { + @apply px-4; + } } [data-theme='default'] { - display: flex; + display: flex; } [data-style='new-york'] [data-style='default'] { - display: none; + display: none; } [data-style='default'] [data-style='default'] { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } [data-style='new-york'] [data-style='new-york'] { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } [data-style='default'] [data-style='new-york'] { - display: none; + display: none; } .super-debug { - @apply bg-zinc-950 text-[#FFF8] dark:bg-zinc-900 !important; + @apply bg-zinc-950 text-[#FFF8] dark:bg-zinc-900 !important; } .super-debug--pre { - @apply !bg-transparent !text-[#FFF8]; + @apply !bg-transparent !text-[#FFF8]; } .super-debug--code { - @apply !bg-transparent; + @apply !bg-transparent; } .super-debug--code .key { - @apply text-white !important; + @apply text-white !important; } .super-debug--code .undefined { - @apply !text-[#FFF8]; + @apply !text-[#FFF8]; } + .super-debug--code .string { - @apply !text-[#FFF8]; + @apply !text-[#FFF8]; } + .super-debug--code .number { - @apply !text-[#FFF8]; + @apply !text-[#FFF8]; } + .super-debug--code .boolean { - @apply !text-[#FFF8]; + @apply !text-[#FFF8]; } .vis-xy-container { - --vis-tooltip-padding: '0px'; - --vis-tooltip-background-color: 'transparent'; - --vis-tooltip-border-color: 'transparent'; + --vis-tooltip-padding: '0px'; + --vis-tooltip-background-color: 'transparent'; + --vis-tooltip-border-color: 'transparent'; } diff --git a/src/styles/autocomplete.css b/src/styles/autocomplete.css index bd3d4d3..509badc 100644 --- a/src/styles/autocomplete.css +++ b/src/styles/autocomplete.css @@ -1,1069 +1,1152 @@ :root { - --aa-search-input-height: 44px; - --aa-input-icon-size: 20px; - --aa-base-unit: 16; - --aa-spacing-factor: 1; - --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px); - --aa-spacing-half: calc(var(--aa-spacing) / 2); - --aa-panel-max-height: 650px; - --aa-base-z-index: 9999; - --aa-font-size: calc(var(--aa-base-unit) * 1px); - --aa-font-family: inherit; - --aa-font-weight-medium: 500; - --aa-font-weight-semibold: 600; - --aa-font-weight-bold: 700; - --aa-icon-size: 20px; - --aa-icon-stroke-width: 1.6; - --aa-icon-color-rgb: 119, 119, 163; - --aa-icon-color-alpha: 1; - --aa-action-icon-size: 20px; - --aa-text-color-rgb: 38, 38, 39; - --aa-text-color-alpha: 1; - --aa-primary-color-rgb: 62, 52, 211; - --aa-primary-color-alpha: 0.2; - --aa-muted-color-rgb: 128, 126, 163; - --aa-muted-color-alpha: 0.6; - --aa-panel-border-color-rgb: 128, 126, 163; - --aa-panel-border-color-alpha: 0.3; - --aa-input-border-color-rgb: 128, 126, 163; - --aa-input-border-color-alpha: 0.8; - --aa-background-color-rgb: 255, 255, 255; - --aa-background-color-alpha: 1; - --aa-input-background-color-rgb: 255, 255, 255; - --aa-input-background-color-alpha: 1; - --aa-selected-color-rgb: 179, 173, 214; - --aa-selected-color-alpha: 0.205; - --aa-description-highlight-background-color-rgb: 245, 223, 77; - --aa-description-highlight-background-color-alpha: 0.5; - --aa-detached-media-query: (max-width: 680px); - --aa-detached-modal-media-query: (min-width: 680px); - --aa-detached-modal-max-width: 680px; - --aa-detached-modal-max-height: 500px; - --aa-overlay-color-rgb: 115, 114, 129; - --aa-overlay-color-alpha: 0.4; - --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15); - --aa-scrollbar-width: 13px; - --aa-scrollbar-track-background-color-rgb: 234, 234, 234; - --aa-scrollbar-track-background-color-alpha: 1; - --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb); - --aa-scrollbar-thumb-background-color-alpha: 1; + --aa-search-input-height: 44px; + --aa-input-icon-size: 20px; + --aa-base-unit: 16; + --aa-spacing-factor: 1; + --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px); + --aa-spacing-half: calc(var(--aa-spacing) / 2); + --aa-panel-max-height: 650px; + --aa-base-z-index: 9999; + --aa-font-size: calc(var(--aa-base-unit) * 1px); + --aa-font-family: inherit; + --aa-font-weight-medium: 500; + --aa-font-weight-semibold: 600; + --aa-font-weight-bold: 700; + --aa-icon-size: 20px; + --aa-icon-stroke-width: 1.6; + --aa-icon-color-rgb: 119, 119, 163; + --aa-icon-color-alpha: 1; + --aa-action-icon-size: 20px; + --aa-text-color-rgb: 38, 38, 39; + --aa-text-color-alpha: 1; + --aa-primary-color-rgb: 62, 52, 211; + --aa-primary-color-alpha: 0.2; + --aa-muted-color-rgb: 128, 126, 163; + --aa-muted-color-alpha: 0.6; + --aa-panel-border-color-rgb: 128, 126, 163; + --aa-panel-border-color-alpha: 0.3; + --aa-input-border-color-rgb: 128, 126, 163; + --aa-input-border-color-alpha: 0.8; + --aa-background-color-rgb: 255, 255, 255; + --aa-background-color-alpha: 1; + --aa-input-background-color-rgb: 255, 255, 255; + --aa-input-background-color-alpha: 1; + --aa-selected-color-rgb: 179, 173, 214; + --aa-selected-color-alpha: 0.205; + --aa-description-highlight-background-color-rgb: 245, 223, 77; + --aa-description-highlight-background-color-alpha: 0.5; + --aa-detached-media-query: (max-width: 680px); + --aa-detached-modal-media-query: (min-width: 680px); + --aa-detached-modal-max-width: 680px; + --aa-detached-modal-max-height: 500px; + --aa-overlay-color-rgb: 115, 114, 129; + --aa-overlay-color-alpha: 0.4; + --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15); + --aa-scrollbar-width: 13px; + --aa-scrollbar-track-background-color-rgb: 234, 234, 234; + --aa-scrollbar-track-background-color-alpha: 1; + --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb); + --aa-scrollbar-thumb-background-color-alpha: 1; } + @media (hover: none) and (pointer: coarse) { - :root { - --aa-spacing-factor: 1.2; - --aa-action-icon-size: 22px; - } + :root { + --aa-spacing-factor: 1.2; + --aa-action-icon-size: 22px; + } } + html.dark, html[data-theme='dark'] { - --aa-text-color-rgb: 183, 192, 199; - --aa-primary-color-rgb: 146, 138, 255; - --aa-muted-color-rgb: var(--muted-foreground); - --aa-input-border-color-rgb: var(--border); + --aa-text-color-rgb: 183, 192, 199; + --aa-primary-color-rgb: 146, 138, 255; + --aa-muted-color-rgb: var(--muted-foreground); + --aa-input-border-color-rgb: var(--border); - /* edited */ - --aa-input-background-color-rgb: 12, 10, 9; - --aa-background-color-rgb: 12, 10, 9; - --aa-selected-color-rgb: 40, 37, 36; - --aa-selected-color-alpha: 0.55; + /* edited */ + --aa-input-background-color-rgb: 12, 10, 9; + --aa-background-color-rgb: 12, 10, 9; + --aa-selected-color-rgb: 40, 37, 36; + --aa-selected-color-alpha: 0.55; - --aa-description-highlight-background-color-rgb: 0 255 255; - --aa-description-highlight-background-color-alpha: 0.25; - --aa-icon-color-rgb: 119, 119, 163; + --aa-description-highlight-background-color-rgb: 0 255 255; + --aa-description-highlight-background-color-alpha: 0.25; + --aa-icon-color-rgb: 119, 119, 163; - --aa-panel-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; + --aa-panel-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; - --aa-scrollbar-track-background-color-rgb: 44, 46, 64; - --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb); + --aa-scrollbar-track-background-color-rgb: 44, 46, 64; + --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb); } + .aa-Autocomplete *, .aa-DetachedFormContainer *, .aa-Panel * { - box-sizing: border-box; + box-sizing: border-box; } + .aa-Autocomplete, .aa-DetachedFormContainer, .aa-Panel { - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font-family: inherit; - font-family: var(--aa-font-family); - font-size: calc(16 * 1px); - font-size: var(--aa-font-size); - font-weight: 400; - line-height: 1em; - margin: 0; - padding: 0; - text-align: left; + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + font-family: inherit; + font-family: var(--aa-font-family); + font-size: calc(16 * 1px); + font-size: var(--aa-font-size); + font-weight: 400; + line-height: 1em; + margin: 0; + padding: 0; + text-align: left; } + .aa-Form { - align-items: center; - background-color: rgba(255, 255, 255, 1); - background-color: rgba( - var(--aa-input-background-color-rgb), - var(--aa-input-background-color-alpha) - ); - border: 1px solid rgba(128, 126, 163, 0.8); - border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha)); - border-radius: 3px; - display: flex; - line-height: 1em; - margin: 0; - position: relative; - width: 100%; + align-items: center; + background-color: rgba(255, 255, 255, 1); + background-color: rgba(var(--aa-input-background-color-rgb), + var(--aa-input-background-color-alpha)); + border: 1px solid rgba(128, 126, 163, 0.8); + border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha)); + border-radius: 3px; + display: flex; + line-height: 1em; + margin: 0; + position: relative; + width: 100%; } + .aa-Form:focus-within { - border-color: rgba(62, 52, 211, 1); - border-color: rgba(var(--aa-primary-color-rgb), 1); - box-shadow: - rgba(62, 52, 211, 0.2) 0 0 0 2px, - inset rgba(62, 52, 211, 0.2) 0 0 0 2px; - box-shadow: - rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px, - inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px; - outline: medium none currentColor; + border-color: rgba(62, 52, 211, 1); + border-color: rgba(var(--aa-primary-color-rgb), 1); + box-shadow: + rgba(62, 52, 211, 0.2) 0 0 0 2px, + inset rgba(62, 52, 211, 0.2) 0 0 0 2px; + box-shadow: + rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px, + inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px; + outline: medium none currentColor; } + .aa-InputWrapperPrefix { - align-items: center; - display: flex; - flex-shrink: 0; - height: 44px; - height: var(--aa-search-input-height); - order: 1; + align-items: center; + display: flex; + flex-shrink: 0; + height: 44px; + height: var(--aa-search-input-height); + order: 1; } + .aa-Label, .aa-LoadingIndicator { - cursor: auto; - flex-shrink: 0; - height: 100%; - padding: 0; - text-align: left; + cursor: auto; + flex-shrink: 0; + height: 100%; + padding: 0; + text-align: left; } + .aa-Label svg, .aa-LoadingIndicator svg { - color: rgba(62, 52, 211, 1); - color: rgba(var(--aa-primary-color-rgb), 1); - height: auto; - max-height: 20px; - max-height: var(--aa-input-icon-size); - stroke-width: 1.6; - stroke-width: var(--aa-icon-stroke-width); - width: 20px; - width: var(--aa-input-icon-size); + color: rgba(62, 52, 211, 1); + color: rgba(var(--aa-primary-color-rgb), 1); + height: auto; + max-height: 20px; + max-height: var(--aa-input-icon-size); + stroke-width: 1.6; + stroke-width: var(--aa-icon-stroke-width); + width: 20px; + width: var(--aa-input-icon-size); } + .aa-LoadingIndicator, .aa-SubmitButton { - height: 100%; - padding-left: calc((16 * 1 * 1px) * 0.75 - 1px); - padding-left: calc(calc(16 * 1 * 1px) * 0.75 - 1px); - padding-left: calc(var(--aa-spacing) * 0.75 - 1px); - padding-right: calc((16 * 1 * 1px) / 2); - padding-right: calc(calc(16 * 1 * 1px) / 2); - padding-right: var(--aa-spacing-half); - width: calc((16 * 1 * 1px) * 1.75 + 20px - 1px); - width: calc(calc(16 * 1 * 1px) * 1.75 + 20px - 1px); - width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px); + height: 100%; + padding-left: calc((16 * 1 * 1px) * 0.75 - 1px); + padding-left: calc(calc(16 * 1 * 1px) * 0.75 - 1px); + padding-left: calc(var(--aa-spacing) * 0.75 - 1px); + padding-right: calc((16 * 1 * 1px) / 2); + padding-right: calc(calc(16 * 1 * 1px) / 2); + padding-right: var(--aa-spacing-half); + width: calc((16 * 1 * 1px) * 1.75 + 20px - 1px); + width: calc(calc(16 * 1 * 1px) * 1.75 + 20px - 1px); + width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px); } + @media (hover: none) and (pointer: coarse) { - .aa-LoadingIndicator, - .aa-SubmitButton { - padding-left: calc(((16 * 1 * 1px) / 2) / 2 - 1px); - padding-left: calc(calc(calc(16 * 1 * 1px) / 2) / 2 - 1px); - padding-left: calc(var(--aa-spacing-half) / 2 - 1px); - width: calc(20px + (16 * 1 * 1px) * 1.25 - 1px); - width: calc(20px + calc(16 * 1 * 1px) * 1.25 - 1px); - width: calc(var(--aa-icon-size) + var(--aa-spacing) * 1.25 - 1px); - } + + .aa-LoadingIndicator, + .aa-SubmitButton { + padding-left: calc(((16 * 1 * 1px) / 2) / 2 - 1px); + padding-left: calc(calc(calc(16 * 1 * 1px) / 2) / 2 - 1px); + padding-left: calc(var(--aa-spacing-half) / 2 - 1px); + width: calc(20px + (16 * 1 * 1px) * 1.25 - 1px); + width: calc(20px + calc(16 * 1 * 1px) * 1.25 - 1px); + width: calc(var(--aa-icon-size) + var(--aa-spacing) * 1.25 - 1px); + } } + .aa-SubmitButton { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - border: 0; - margin: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + border: 0; + margin: 0; } + .aa-LoadingIndicator { - align-items: center; - display: flex; - justify-content: center; + align-items: center; + display: flex; + justify-content: center; } + .aa-LoadingIndicator[hidden] { - display: none; + display: none; } + .aa-InputWrapper { - order: 3; - position: relative; - width: 100%; + order: 3; + position: relative; + width: 100%; } + .aa-Input { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - border: 0; - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font: inherit; - height: 44px; - height: var(--aa-search-input-height); - padding: 0; - width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + border: 0; + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + font: inherit; + height: 44px; + height: var(--aa-search-input-height); + padding: 0; + width: 100%; } + .aa-Input::-moz-placeholder { - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - opacity: 1; + color: rgba(128, 126, 163, 0.6); + color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); + opacity: 1; } + .aa-Input::placeholder { - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - opacity: 1; + color: rgba(128, 126, 163, 0.6); + color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); + opacity: 1; } + .aa-Input:focus { - border-color: none; - box-shadow: none; - outline: none; + border-color: none; + box-shadow: none; + outline: none; } + .aa-Input::-webkit-search-cancel-button, .aa-Input::-webkit-search-decoration, .aa-Input::-webkit-search-results-button, .aa-Input::-webkit-search-results-decoration { - -webkit-appearance: none; - appearance: none; + -webkit-appearance: none; + appearance: none; } + .aa-InputWrapperSuffix { - align-items: center; - display: flex; - height: 44px; - height: var(--aa-search-input-height); - order: 4; + align-items: center; + display: flex; + height: 44px; + height: var(--aa-search-input-height); + order: 4; } + .aa-ClearButton { - align-items: center; - background: none; - border: 0; - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - cursor: pointer; - display: flex; - height: 100%; - margin: 0; - padding: 0 calc((16 * 1 * 1px) * 0.83333 - 0.5px); - padding: 0 calc(calc(16 * 1 * 1px) * 0.83333 - 0.5px); - padding: 0 calc(var(--aa-spacing) * 0.83333 - 0.5px); + align-items: center; + background: none; + border: 0; + color: rgba(128, 126, 163, 0.6); + color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); + cursor: pointer; + display: flex; + height: 100%; + margin: 0; + padding: 0 calc((16 * 1 * 1px) * 0.83333 - 0.5px); + padding: 0 calc(calc(16 * 1 * 1px) * 0.83333 - 0.5px); + padding: 0 calc(var(--aa-spacing) * 0.83333 - 0.5px); } + @media (hover: none) and (pointer: coarse) { - .aa-ClearButton { - padding: 0 calc((16 * 1 * 1px) * 0.66667 - 0.5px); - padding: 0 calc(calc(16 * 1 * 1px) * 0.66667 - 0.5px); - padding: 0 calc(var(--aa-spacing) * 0.66667 - 0.5px); - } + .aa-ClearButton { + padding: 0 calc((16 * 1 * 1px) * 0.66667 - 0.5px); + padding: 0 calc(calc(16 * 1 * 1px) * 0.66667 - 0.5px); + padding: 0 calc(var(--aa-spacing) * 0.66667 - 0.5px); + } } + .aa-ClearButton:focus, .aa-ClearButton:hover { - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); } + .aa-ClearButton[hidden] { - display: none; + display: none; } + .aa-ClearButton svg { - stroke-width: 1.6; - stroke-width: var(--aa-icon-stroke-width); - width: 20px; - width: var(--aa-icon-size); + stroke-width: 1.6; + stroke-width: var(--aa-icon-stroke-width); + width: 20px; + width: var(--aa-icon-size); } + .aa-Panel { - background-color: rgba(255, 255, 255, 1); - background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - border-radius: calc((16 * 1 * 1px) / 4); - border-radius: calc(calc(16 * 1 * 1px) / 4); - border-radius: calc(var(--aa-spacing) / 4); - box-shadow: - 0 0 0 1px rgba(35, 38, 59, 0.1), - 0 6px 16px -4px rgba(35, 38, 59, 0.15); - box-shadow: var(--aa-panel-shadow); - margin: 8px 0 0; - overflow: hidden; - position: absolute; - transition: - opacity 0.2s ease-in, - filter 0.2s ease-in; + background-color: rgba(255, 255, 255, 1); + background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); + border-radius: calc((16 * 1 * 1px) / 4); + border-radius: calc(calc(16 * 1 * 1px) / 4); + border-radius: calc(var(--aa-spacing) / 4); + box-shadow: + 0 0 0 1px rgba(35, 38, 59, 0.1), + 0 6px 16px -4px rgba(35, 38, 59, 0.15); + box-shadow: var(--aa-panel-shadow); + margin: 8px 0 0; + overflow: hidden; + position: absolute; + transition: + opacity 0.2s ease-in, + filter 0.2s ease-in; } + @media screen and (prefers-reduced-motion) { - .aa-Panel { - transition: none; - } + .aa-Panel { + transition: none; + } } + .aa-Panel button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: none; - border: 0; - margin: 0; - padding: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + border: 0; + margin: 0; + padding: 0; } + .aa-PanelLayout { - height: 100%; - margin: 0; - max-height: 650px; - max-height: var(--aa-panel-max-height); - overflow-y: auto; - padding: 0; - position: relative; - text-align: left; + height: 100%; + margin: 0; + max-height: 650px; + max-height: var(--aa-panel-max-height); + overflow-y: auto; + padding: 0; + position: relative; + text-align: left; } + .aa-PanelLayoutColumns--twoGolden { - display: grid; - grid-template-columns: 39.2% auto; - overflow: hidden; - padding: 0; + display: grid; + grid-template-columns: 39.2% auto; + overflow: hidden; + padding: 0; } + .aa-PanelLayoutColumns--two { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - overflow: hidden; - padding: 0; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + overflow: hidden; + padding: 0; } + .aa-PanelLayoutColumns--three { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - overflow: hidden; - padding: 0; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + overflow: hidden; + padding: 0; } + .aa-Panel--stalled .aa-Source { - filter: grayscale(1); - opacity: 0.8; + filter: grayscale(1); + opacity: 0.8; } + .aa-Panel--scrollable { - margin: 0; - max-height: 650px; - max-height: var(--aa-panel-max-height); - overflow-x: hidden; - overflow-y: auto; - padding: calc((16 * 1 * 1px) / 2); - padding: calc(calc(16 * 1 * 1px) / 2); - padding: var(--aa-spacing-half); - scrollbar-color: rgba(255, 255, 255, 1) rgba(234, 234, 234, 1); - scrollbar-color: rgba( - var(--aa-scrollbar-thumb-background-color-rgb), - var(--aa-scrollbar-thumb-background-color-alpha) - ) - rgba( - var(--aa-scrollbar-track-background-color-rgb), - var(--aa-scrollbar-track-background-color-alpha) - ); - scrollbar-width: thin; + margin: 0; + max-height: 650px; + max-height: var(--aa-panel-max-height); + overflow-x: hidden; + overflow-y: auto; + padding: calc((16 * 1 * 1px) / 2); + padding: calc(calc(16 * 1 * 1px) / 2); + padding: var(--aa-spacing-half); + scrollbar-color: rgba(255, 255, 255, 1) rgba(234, 234, 234, 1); + scrollbar-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), + var(--aa-scrollbar-thumb-background-color-alpha)) rgba(var(--aa-scrollbar-track-background-color-rgb), + var(--aa-scrollbar-track-background-color-alpha)); + scrollbar-width: thin; } + .aa-Panel--scrollable::-webkit-scrollbar { - width: 13px; - width: var(--aa-scrollbar-width); + width: 13px; + width: var(--aa-scrollbar-width); } + .aa-Panel--scrollable::-webkit-scrollbar-track { - background-color: rgba(234, 234, 234, 1); - background-color: rgba( - var(--aa-scrollbar-track-background-color-rgb), - var(--aa-scrollbar-track-background-color-alpha) - ); + background-color: rgba(234, 234, 234, 1); + background-color: rgba(var(--aa-scrollbar-track-background-color-rgb), + var(--aa-scrollbar-track-background-color-alpha)); } + .aa-Panel--scrollable::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 1); - background-color: rgba( - var(--aa-scrollbar-thumb-background-color-rgb), - var(--aa-scrollbar-thumb-background-color-alpha) - ); - border-radius: 9999px; - border: 3px solid rgba(234, 234, 234, 1); - border: 3px solid - rgba( - var(--aa-scrollbar-track-background-color-rgb), - var(--aa-scrollbar-track-background-color-alpha) - ); - border-right-width: 2px; + background-color: rgba(255, 255, 255, 1); + background-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), + var(--aa-scrollbar-thumb-background-color-alpha)); + border-radius: 9999px; + border: 3px solid rgba(234, 234, 234, 1); + border: 3px solid rgba(var(--aa-scrollbar-track-background-color-rgb), + var(--aa-scrollbar-track-background-color-alpha)); + border-right-width: 2px; } + .aa-Source { - margin: 0; - padding: 0; - position: relative; - width: 100%; + margin: 0; + padding: 0; + position: relative; + width: 100%; } + .aa-Source:empty { - display: none; + display: none; } + .aa-SourceNoResults { - font-size: 1em; - margin: 0; - padding: calc(16 * 1 * 1px); - padding: var(--aa-spacing); + font-size: 1em; + margin: 0; + padding: calc(16 * 1 * 1px); + padding: var(--aa-spacing); } + .aa-List { - list-style: none; - margin: 0; + list-style: none; + margin: 0; } + .aa-List, .aa-SourceHeader { - padding: 0; - position: relative; + padding: 0; + position: relative; } + .aa-SourceHeader { - margin: calc((16 * 1 * 1px) / 2) 0.5em calc((16 * 1 * 1px) / 2) 0; - margin: calc(calc(16 * 1 * 1px) / 2) 0.5em calc(calc(16 * 1 * 1px) / 2) 0; - margin: var(--aa-spacing-half) 0.5em var(--aa-spacing-half) 0; + margin: calc((16 * 1 * 1px) / 2) 0.5em calc((16 * 1 * 1px) / 2) 0; + margin: calc(calc(16 * 1 * 1px) / 2) 0.5em calc(calc(16 * 1 * 1px) / 2) 0; + margin: var(--aa-spacing-half) 0.5em var(--aa-spacing-half) 0; } + .aa-SourceHeader:empty { - display: none; + display: none; } + .aa-SourceHeaderTitle { - background: rgba(255, 255, 255, 1); - background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - color: rgba(62, 52, 211, 1); - color: rgba(var(--aa-primary-color-rgb), 1); - display: inline-block; - font-size: 0.8em; - font-weight: 600; - font-weight: var(--aa-font-weight-semibold); - margin: 0; - padding: 0 calc((16 * 1 * 1px) / 2) 0 0; - padding: 0 calc(calc(16 * 1 * 1px) / 2) 0 0; - padding: 0 var(--aa-spacing-half) 0 0; - position: relative; - z-index: 9999; - z-index: var(--aa-base-z-index); + background: rgba(255, 255, 255, 1); + background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); + color: rgba(62, 52, 211, 1); + color: rgba(var(--aa-primary-color-rgb), 1); + display: inline-block; + font-size: 0.8em; + font-weight: 600; + font-weight: var(--aa-font-weight-semibold); + margin: 0; + padding: 0 calc((16 * 1 * 1px) / 2) 0 0; + padding: 0 calc(calc(16 * 1 * 1px) / 2) 0 0; + padding: 0 var(--aa-spacing-half) 0 0; + position: relative; + z-index: 9999; + z-index: var(--aa-base-z-index); } + .aa-SourceHeaderLine { - border-bottom: 1px solid rgba(62, 52, 211, 1); - border-bottom: 1px solid rgba(var(--aa-primary-color-rgb), 1); - display: block; - height: 2px; - left: 0; - margin: 0; - opacity: 0.3; - padding: 0; - position: absolute; - right: 0; - top: calc((16 * 1 * 1px) / 2); - top: calc(calc(16 * 1 * 1px) / 2); - top: var(--aa-spacing-half); - z-index: calc(9999 - 1); - z-index: calc(var(--aa-base-z-index) - 1); + border-bottom: 1px solid rgba(62, 52, 211, 1); + border-bottom: 1px solid rgba(var(--aa-primary-color-rgb), 1); + display: block; + height: 2px; + left: 0; + margin: 0; + opacity: 0.3; + padding: 0; + position: absolute; + right: 0; + top: calc((16 * 1 * 1px) / 2); + top: calc(calc(16 * 1 * 1px) / 2); + top: var(--aa-spacing-half); + z-index: calc(9999 - 1); + z-index: calc(var(--aa-base-z-index) - 1); } + .aa-SourceFooterSeeAll { - background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(128, 126, 163, 0.14)); - background: linear-gradient( - 180deg, - rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)), - rgba(128, 126, 163, 0.14) - ); - border: 1px solid rgba(128, 126, 163, 0.6); - border: 1px solid rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - border-radius: 5px; - box-shadow: - inset 0 0 2px #fff, - 0 2px 2px -1px rgba(76, 69, 88, 0.15); - color: inherit; - font-size: 0.95em; - font-weight: 500; - font-weight: var(--aa-font-weight-medium); - padding: 0.475em 1em 0.6em; - -webkit-text-decoration: none; - text-decoration: none; + background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(128, 126, 163, 0.14)); + background: linear-gradient(180deg, + rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)), + rgba(128, 126, 163, 0.14)); + border: 1px solid rgba(128, 126, 163, 0.6); + border: 1px solid rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); + border-radius: 5px; + box-shadow: + inset 0 0 2px #fff, + 0 2px 2px -1px rgba(76, 69, 88, 0.15); + color: inherit; + font-size: 0.95em; + font-weight: 500; + font-weight: var(--aa-font-weight-medium); + padding: 0.475em 1em 0.6em; + -webkit-text-decoration: none; + text-decoration: none; } + .aa-SourceFooterSeeAll:focus, .aa-SourceFooterSeeAll:hover { - border: 1px solid rgba(62, 52, 211, 1); - border: 1px solid rgba(var(--aa-primary-color-rgb), 1); - color: rgba(62, 52, 211, 1); - color: rgba(var(--aa-primary-color-rgb), 1); + border: 1px solid rgba(62, 52, 211, 1); + border: 1px solid rgba(var(--aa-primary-color-rgb), 1); + color: rgba(62, 52, 211, 1); + color: rgba(var(--aa-primary-color-rgb), 1); } + .aa-Item { - align-items: center; - border-radius: 3px; - cursor: pointer; - display: grid; - min-height: calc((16 * 1 * 1px) * 2.5); - min-height: calc(calc(16 * 1 * 1px) * 2.5); - min-height: calc(var(--aa-spacing) * 2.5); - padding: calc(((16 * 1 * 1px) / 2) / 2); - padding: calc(calc(calc(16 * 1 * 1px) / 2) / 2); - padding: calc(var(--aa-spacing-half) / 2); + align-items: center; + border-radius: 3px; + cursor: pointer; + display: grid; + min-height: calc((16 * 1 * 1px) * 2.5); + min-height: calc(calc(16 * 1 * 1px) * 2.5); + min-height: calc(var(--aa-spacing) * 2.5); + padding: calc(((16 * 1 * 1px) / 2) / 2); + padding: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + padding: calc(var(--aa-spacing-half) / 2); } + .aa-Item[aria-selected='true'] { - background-color: rgba(179, 173, 214, 0.205); - background-color: rgba(var(--aa-selected-color-rgb), var(--aa-selected-color-alpha)); + background-color: rgba(179, 173, 214, 0.205); + background-color: rgba(var(--aa-selected-color-rgb), var(--aa-selected-color-alpha)); } + .aa-Item[aria-selected='true'] .aa-ActiveOnly, .aa-Item[aria-selected='true'] .aa-ItemActionButton { - visibility: visible; + visibility: visible; } + .aa-ItemIcon { - align-items: center; - background: rgba(255, 255, 255, 1); - background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - border-radius: 3px; - box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3); - box-shadow: inset 0 0 0 1px - rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); - color: rgba(119, 119, 163, 1); - color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha)); - display: flex; - flex-shrink: 0; - font-size: 0.7em; - height: calc(20px + ((16 * 1 * 1px) / 2)); - height: calc(20px + calc(calc(16 * 1 * 1px) / 2)); - height: calc(var(--aa-icon-size) + var(--aa-spacing-half)); - justify-content: center; - overflow: hidden; - stroke-width: 1.6; - stroke-width: var(--aa-icon-stroke-width); - text-align: center; - width: calc(20px + ((16 * 1 * 1px) / 2)); - width: calc(20px + calc(calc(16 * 1 * 1px) / 2)); - width: calc(var(--aa-icon-size) + var(--aa-spacing-half)); + align-items: center; + background: rgba(255, 255, 255, 1); + background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); + border-radius: 3px; + box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3); + box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); + color: rgba(119, 119, 163, 1); + color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha)); + display: flex; + flex-shrink: 0; + font-size: 0.7em; + height: calc(20px + ((16 * 1 * 1px) / 2)); + height: calc(20px + calc(calc(16 * 1 * 1px) / 2)); + height: calc(var(--aa-icon-size) + var(--aa-spacing-half)); + justify-content: center; + overflow: hidden; + stroke-width: 1.6; + stroke-width: var(--aa-icon-stroke-width); + text-align: center; + width: calc(20px + ((16 * 1 * 1px) / 2)); + width: calc(20px + calc(calc(16 * 1 * 1px) / 2)); + width: calc(var(--aa-icon-size) + var(--aa-spacing-half)); } + .aa-ItemIcon img { - height: auto; - max-height: calc(20px + ((16 * 1 * 1px) / 2) - 8px); - max-height: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px); - max-height: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px); - max-width: calc(20px + ((16 * 1 * 1px) / 2) - 8px); - max-width: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px); - max-width: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px); - width: auto; + height: auto; + max-height: calc(20px + ((16 * 1 * 1px) / 2) - 8px); + max-height: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px); + max-height: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px); + max-width: calc(20px + ((16 * 1 * 1px) / 2) - 8px); + max-width: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px); + max-width: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px); + width: auto; } + .aa-ItemIcon svg { - height: 20px; - height: var(--aa-icon-size); - width: 20px; - width: var(--aa-icon-size); + height: 20px; + height: var(--aa-icon-size); + width: 20px; + width: var(--aa-icon-size); } + .aa-ItemIcon--alignTop { - align-self: flex-start; + align-self: flex-start; } + .aa-ItemIcon--noBorder { - background: none; - box-shadow: none; + background: none; + box-shadow: none; } + .aa-ItemIcon--picture { - height: 96px; - width: 96px; + height: 96px; + width: 96px; } + .aa-ItemIcon--picture img { - max-height: 100%; - max-width: 100%; - padding: calc((16 * 1 * 1px) / 2); - padding: calc(calc(16 * 1 * 1px) / 2); - padding: var(--aa-spacing-half); + max-height: 100%; + max-width: 100%; + padding: calc((16 * 1 * 1px) / 2); + padding: calc(calc(16 * 1 * 1px) / 2); + padding: var(--aa-spacing-half); } + .aa-ItemContent { - align-items: center; - cursor: pointer; - display: grid; - gap: calc((16 * 1 * 1px) / 2); - gap: calc(calc(16 * 1 * 1px) / 2); - grid-gap: calc((16 * 1 * 1px) / 2); - grid-gap: calc(calc(16 * 1 * 1px) / 2); - grid-gap: var(--aa-spacing-half); - gap: var(--aa-spacing-half); - grid-auto-flow: column; - line-height: 1.25em; - overflow: hidden; + align-items: center; + cursor: pointer; + display: grid; + gap: calc((16 * 1 * 1px) / 2); + gap: calc(calc(16 * 1 * 1px) / 2); + grid-gap: calc((16 * 1 * 1px) / 2); + grid-gap: calc(calc(16 * 1 * 1px) / 2); + grid-gap: var(--aa-spacing-half); + gap: var(--aa-spacing-half); + grid-auto-flow: column; + line-height: 1.25em; + overflow: hidden; } + .aa-ItemContent:empty { - display: none; + display: none; } + .aa-ItemContent mark { - background: none; - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font-style: normal; - font-weight: 700; - font-weight: var(--aa-font-weight-bold); + background: none; + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + font-style: normal; + font-weight: 700; + font-weight: var(--aa-font-weight-bold); } + .aa-ItemContent--dual { - display: flex; - flex-direction: column; - justify-content: space-between; - text-align: left; + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: left; } + .aa-ItemContent--dual .aa-ItemContentSubtitle, .aa-ItemContent--dual .aa-ItemContentTitle { - display: block; + display: block; } + .aa-ItemContent--indented { - padding-left: calc(20px + (16 * 1 * 1px)); - padding-left: calc(20px + calc(16 * 1 * 1px)); - padding-left: calc(var(--aa-icon-size) + var(--aa-spacing)); + padding-left: calc(20px + (16 * 1 * 1px)); + padding-left: calc(20px + calc(16 * 1 * 1px)); + padding-left: calc(var(--aa-icon-size) + var(--aa-spacing)); } + .aa-ItemContentBody { - display: grid; - gap: calc(((16 * 1 * 1px) / 2) / 2); - gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); - grid-gap: calc(((16 * 1 * 1px) / 2) / 2); - grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); - grid-gap: calc(var(--aa-spacing-half) / 2); - gap: calc(var(--aa-spacing-half) / 2); + display: grid; + gap: calc(((16 * 1 * 1px) / 2) / 2); + gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + grid-gap: calc(((16 * 1 * 1px) / 2) / 2); + grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + grid-gap: calc(var(--aa-spacing-half) / 2); + gap: calc(var(--aa-spacing-half) / 2); } + .aa-ItemContentTitle { - display: inline-block; - margin: 0 0.5em 0 0; - max-width: 100%; - overflow: hidden; - padding: 0; - text-overflow: ellipsis; - white-space: nowrap; + display: inline-block; + margin: 0 0.5em 0 0; + max-width: 100%; + overflow: hidden; + padding: 0; + text-overflow: ellipsis; + white-space: nowrap; } + .aa-ItemContentSubtitle { - font-size: 0.92em; + font-size: 0.92em; } + .aa-ItemContentSubtitleIcon:before { - border-color: rgba(128, 126, 163, 0.64); - border-color: rgba(var(--aa-muted-color-rgb), 0.64); - border-style: solid; - content: ''; - display: inline-block; - left: 1px; - position: relative; - top: -3px; + border-color: rgba(128, 126, 163, 0.64); + border-color: rgba(var(--aa-muted-color-rgb), 0.64); + border-style: solid; + content: ''; + display: inline-block; + left: 1px; + position: relative; + top: -3px; } + .aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon:before { - border-width: 0 0 1.5px; - margin-left: calc((16 * 1 * 1px) / 2); - margin-left: calc(calc(16 * 1 * 1px) / 2); - margin-left: var(--aa-spacing-half); - margin-right: calc(((16 * 1 * 1px) / 2) / 2); - margin-right: calc(calc(calc(16 * 1 * 1px) / 2) / 2); - margin-right: calc(var(--aa-spacing-half) / 2); - width: calc(((16 * 1 * 1px) / 2) + 2px); - width: calc(calc(calc(16 * 1 * 1px) / 2) + 2px); - width: calc(var(--aa-spacing-half) + 2px); + border-width: 0 0 1.5px; + margin-left: calc((16 * 1 * 1px) / 2); + margin-left: calc(calc(16 * 1 * 1px) / 2); + margin-left: var(--aa-spacing-half); + margin-right: calc(((16 * 1 * 1px) / 2) / 2); + margin-right: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + margin-right: calc(var(--aa-spacing-half) / 2); + width: calc(((16 * 1 * 1px) / 2) + 2px); + width: calc(calc(calc(16 * 1 * 1px) / 2) + 2px); + width: calc(var(--aa-spacing-half) + 2px); } + .aa-ItemContentSubtitle--standalone { - align-items: center; - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - display: grid; - gap: calc((16 * 1 * 1px) / 2); - gap: calc(calc(16 * 1 * 1px) / 2); - grid-gap: calc((16 * 1 * 1px) / 2); - grid-gap: calc(calc(16 * 1 * 1px) / 2); - grid-gap: var(--aa-spacing-half); - gap: var(--aa-spacing-half); - grid-auto-flow: column; - justify-content: start; + align-items: center; + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + display: grid; + gap: calc((16 * 1 * 1px) / 2); + gap: calc(calc(16 * 1 * 1px) / 2); + grid-gap: calc((16 * 1 * 1px) / 2); + grid-gap: calc(calc(16 * 1 * 1px) / 2); + grid-gap: var(--aa-spacing-half); + gap: var(--aa-spacing-half); + grid-auto-flow: column; + justify-content: start; } + .aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon:before { - border-radius: 0 0 0 3px; - border-width: 0 0 1.5px 1.5px; - height: calc((16 * 1 * 1px) / 2); - height: calc(calc(16 * 1 * 1px) / 2); - height: var(--aa-spacing-half); - width: calc((16 * 1 * 1px) / 2); - width: calc(calc(16 * 1 * 1px) / 2); - width: var(--aa-spacing-half); + border-radius: 0 0 0 3px; + border-width: 0 0 1.5px 1.5px; + height: calc((16 * 1 * 1px) / 2); + height: calc(calc(16 * 1 * 1px) / 2); + height: var(--aa-spacing-half); + width: calc((16 * 1 * 1px) / 2); + width: calc(calc(16 * 1 * 1px) / 2); + width: var(--aa-spacing-half); } + .aa-ItemContentSubtitleCategory { - color: rgba(128, 126, 163, 1); - color: rgba(var(--aa-muted-color-rgb), 1); - font-weight: 500; + color: rgba(128, 126, 163, 1); + color: rgba(var(--aa-muted-color-rgb), 1); + font-weight: 500; } + .aa-ItemContentDescription { - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font-size: 0.85em; - max-width: 100%; - overflow-x: hidden; - text-overflow: ellipsis; + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + font-size: 0.85em; + max-width: 100%; + overflow-x: hidden; + text-overflow: ellipsis; } + .aa-ItemContentDescription:empty { - display: none; + display: none; } + .aa-ItemContentDescription mark { - background: rgba(245, 223, 77, 0.5); - background: rgba( - var(--aa-description-highlight-background-color-rgb), - var(--aa-description-highlight-background-color-alpha) - ); - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - font-style: normal; - font-weight: 500; - font-weight: var(--aa-font-weight-medium); + background: rgba(245, 223, 77, 0.5); + background: rgba(var(--aa-description-highlight-background-color-rgb), + var(--aa-description-highlight-background-color-alpha)); + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + font-style: normal; + font-weight: 500; + font-weight: var(--aa-font-weight-medium); } + .aa-ItemContentDash { - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - display: none; - opacity: 0.4; + color: rgba(128, 126, 163, 0.6); + color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); + display: none; + opacity: 0.4; } + .aa-ItemContentTag { - background-color: rgba(62, 52, 211, 0.2); - background-color: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)); - border-radius: 3px; - margin: 0 0.4em 0 0; - padding: 0.08em 0.3em; + background-color: rgba(62, 52, 211, 0.2); + background-color: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)); + border-radius: 3px; + margin: 0 0.4em 0 0; + padding: 0.08em 0.3em; } + .aa-ItemLink, .aa-ItemWrapper { - align-items: center; - color: inherit; - display: grid; - gap: calc(((16 * 1 * 1px) / 2) / 2); - gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); - grid-gap: calc(((16 * 1 * 1px) / 2) / 2); - grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); - grid-gap: calc(var(--aa-spacing-half) / 2); - gap: calc(var(--aa-spacing-half) / 2); - grid-auto-flow: column; - justify-content: space-between; - width: 100%; + align-items: center; + color: inherit; + display: grid; + gap: calc(((16 * 1 * 1px) / 2) / 2); + gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + grid-gap: calc(((16 * 1 * 1px) / 2) / 2); + grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + grid-gap: calc(var(--aa-spacing-half) / 2); + gap: calc(var(--aa-spacing-half) / 2); + grid-auto-flow: column; + justify-content: space-between; + width: 100%; } + .aa-ItemLink { - color: inherit; - -webkit-text-decoration: none; - text-decoration: none; + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; } + .aa-ItemActions { - display: grid; - grid-auto-flow: column; - height: 100%; - justify-self: end; - margin: 0 calc((16 * 1 * 1px) / -3); - margin: 0 calc(calc(16 * 1 * 1px) / -3); - margin: 0 calc(var(--aa-spacing) / -3); - padding: 0 2px 0 0; + display: grid; + grid-auto-flow: column; + height: 100%; + justify-self: end; + margin: 0 calc((16 * 1 * 1px) / -3); + margin: 0 calc(calc(16 * 1 * 1px) / -3); + margin: 0 calc(var(--aa-spacing) / -3); + padding: 0 2px 0 0; } + .aa-ItemActionButton { - align-items: center; - background: none; - border: 0; - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - cursor: pointer; - display: flex; - flex-shrink: 0; - padding: 0; + align-items: center; + background: none; + border: 0; + color: rgba(128, 126, 163, 0.6); + color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); + cursor: pointer; + display: flex; + flex-shrink: 0; + padding: 0; } + .aa-ItemActionButton:focus svg, .aa-ItemActionButton:hover svg { - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); } + @media (hover: none) and (pointer: coarse) { - .aa-ItemActionButton:focus svg, - .aa-ItemActionButton:hover svg { - color: inherit; - } + + .aa-ItemActionButton:focus svg, + .aa-ItemActionButton:hover svg { + color: inherit; + } } + .aa-ItemActionButton svg { - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - margin: 0; - margin: calc(calc(16 * 1 * 1px) / 3); - margin: calc(var(--aa-spacing) / 3); - stroke-width: 1.6; - stroke-width: var(--aa-icon-stroke-width); - width: 20px; - width: var(--aa-action-icon-size); + color: rgba(128, 126, 163, 0.6); + color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); + margin: 0; + margin: calc(calc(16 * 1 * 1px) / 3); + margin: calc(var(--aa-spacing) / 3); + stroke-width: 1.6; + stroke-width: var(--aa-icon-stroke-width); + width: 20px; + width: var(--aa-action-icon-size); } + .aa-ActiveOnly { - visibility: hidden; + visibility: hidden; } + .aa-PanelHeader { - align-items: center; - background: rgba(62, 52, 211, 1); - background: rgba(var(--aa-primary-color-rgb), 1); - color: #fff; - display: grid; - height: var(--aa-modal-header-height); - margin: 0; - padding: calc((16 * 1 * 1px) / 2) calc(16 * 1 * 1px); - padding: calc(calc(16 * 1 * 1px) / 2) calc(16 * 1 * 1px); - padding: var(--aa-spacing-half) var(--aa-spacing); - position: relative; + align-items: center; + background: rgba(62, 52, 211, 1); + background: rgba(var(--aa-primary-color-rgb), 1); + color: #fff; + display: grid; + height: var(--aa-modal-header-height); + margin: 0; + padding: calc((16 * 1 * 1px) / 2) calc(16 * 1 * 1px); + padding: calc(calc(16 * 1 * 1px) / 2) calc(16 * 1 * 1px); + padding: var(--aa-spacing-half) var(--aa-spacing); + position: relative; } + .aa-PanelHeader:after { - background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); - background-image: linear-gradient( - rgba(var(--aa-background-color-rgb), 1), - rgba(var(--aa-background-color-rgb), 0) - ); - bottom: calc(((16 * 1 * 1px) / 2) * -1); - bottom: calc(calc(calc(16 * 1 * 1px) / 2) * -1); - bottom: calc(var(--aa-spacing-half) * -1); - content: ''; - height: calc((16 * 1 * 1px) / 2); - height: calc(calc(16 * 1 * 1px) / 2); - height: var(--aa-spacing-half); - left: 0; - pointer-events: none; - position: absolute; - right: 0; - z-index: 9999; - z-index: var(--aa-base-z-index); + background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); + background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), + rgba(var(--aa-background-color-rgb), 0)); + bottom: calc(((16 * 1 * 1px) / 2) * -1); + bottom: calc(calc(calc(16 * 1 * 1px) / 2) * -1); + bottom: calc(var(--aa-spacing-half) * -1); + content: ''; + height: calc((16 * 1 * 1px) / 2); + height: calc(calc(16 * 1 * 1px) / 2); + height: var(--aa-spacing-half); + left: 0; + pointer-events: none; + position: absolute; + right: 0; + z-index: 9999; + z-index: var(--aa-base-z-index); } + .aa-PanelFooter { - background-color: rgba(255, 255, 255, 1); - background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - box-shadow: inset 0 1px 0 rgba(128, 126, 163, 0.3); - box-shadow: inset 0 1px 0 - rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); - display: flex; - justify-content: space-between; - margin: 0; - padding: calc(16 * 1 * 1px); - padding: var(--aa-spacing); - position: relative; - z-index: 9999; - z-index: var(--aa-base-z-index); + background-color: rgba(255, 255, 255, 1); + background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); + box-shadow: inset 0 1px 0 rgba(128, 126, 163, 0.3); + box-shadow: inset 0 1px 0 rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); + display: flex; + justify-content: space-between; + margin: 0; + padding: calc(16 * 1 * 1px); + padding: var(--aa-spacing); + position: relative; + z-index: 9999; + z-index: var(--aa-base-z-index); } + .aa-PanelFooter:after { - background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(128, 126, 163, 0.6)); - background-image: linear-gradient( - rgba(var(--aa-background-color-rgb), 0), - rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)) - ); - content: ''; - height: calc(16 * 1 * 1px); - height: var(--aa-spacing); - left: 0; - opacity: 0.12; - pointer-events: none; - position: absolute; - right: 0; - top: calc((16 * 1 * 1px) * -1); - top: calc(calc(16 * 1 * 1px) * -1); - top: calc(var(--aa-spacing) * -1); - z-index: calc(9999 - 1); - z-index: calc(var(--aa-base-z-index) - 1); + background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(128, 126, 163, 0.6)); + background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), + rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha))); + content: ''; + height: calc(16 * 1 * 1px); + height: var(--aa-spacing); + left: 0; + opacity: 0.12; + pointer-events: none; + position: absolute; + right: 0; + top: calc((16 * 1 * 1px) * -1); + top: calc(calc(16 * 1 * 1px) * -1); + top: calc(var(--aa-spacing) * -1); + z-index: calc(9999 - 1); + z-index: calc(var(--aa-base-z-index) - 1); } + .aa-DetachedContainer { - background: rgba(255, 255, 255, 1); - background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - bottom: 0; - box-shadow: - 0 0 0 1px rgba(35, 38, 59, 0.1), - 0 6px 16px -4px rgba(35, 38, 59, 0.15); - box-shadow: var(--aa-panel-shadow); - display: flex; - flex-direction: column; - left: 0; - margin: 0; - overflow: hidden; - padding: 0; - position: fixed; - right: 0; - top: 0; - z-index: 9999; - z-index: var(--aa-base-z-index); + background: rgba(255, 255, 255, 1); + background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); + bottom: 0; + box-shadow: + 0 0 0 1px rgba(35, 38, 59, 0.1), + 0 6px 16px -4px rgba(35, 38, 59, 0.15); + box-shadow: var(--aa-panel-shadow); + display: flex; + flex-direction: column; + left: 0; + margin: 0; + overflow: hidden; + padding: 0; + position: fixed; + right: 0; + top: 0; + z-index: 9999; + z-index: var(--aa-base-z-index); } + .aa-DetachedContainer:after { - height: 32px; + height: 32px; } + .aa-DetachedContainer .aa-SourceHeader { - margin: calc((16 * 1 * 1px) / 2) 0 calc((16 * 1 * 1px) / 2) 2px; - margin: calc(calc(16 * 1 * 1px) / 2) 0 calc(calc(16 * 1 * 1px) / 2) 2px; - margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px; + margin: calc((16 * 1 * 1px) / 2) 0 calc((16 * 1 * 1px) / 2) 2px; + margin: calc(calc(16 * 1 * 1px) / 2) 0 calc(calc(16 * 1 * 1px) / 2) 2px; + margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px; } + .aa-DetachedContainer .aa-Panel { - background-color: rgba(255, 255, 255, 1); - background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); - border-radius: 0; - box-shadow: none; - flex-grow: 1; - margin: 0; - padding: 0; - position: relative; + background-color: rgba(255, 255, 255, 1); + background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)); + border-radius: 0; + box-shadow: none; + flex-grow: 1; + margin: 0; + padding: 0; + position: relative; } + .aa-DetachedContainer .aa-PanelLayout { - bottom: 0; - box-shadow: none; - left: 0; - margin: 0; - max-height: none; - overflow-y: auto; - position: absolute; - right: 0; - top: 0; - width: 100%; + bottom: 0; + box-shadow: none; + left: 0; + margin: 0; + max-height: none; + overflow-y: auto; + position: absolute; + right: 0; + top: 0; + width: 100%; } + .aa-DetachedFormContainer { - border-bottom: 1px solid rgba(128, 126, 163, 0.3); - border-bottom: 1px solid - rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); - display: flex; - flex-direction: row; - justify-content: space-between; - margin: 0; - padding: calc((16 * 1 * 1px) / 2); - padding: calc(calc(16 * 1 * 1px) / 2); - padding: var(--aa-spacing-half); + border-bottom: 1px solid rgba(128, 126, 163, 0.3); + border-bottom: 1px solid rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 0; + padding: calc((16 * 1 * 1px) / 2); + padding: calc(calc(16 * 1 * 1px) / 2); + padding: var(--aa-spacing-half); } + .aa-DetachedCancelButton { - background: none; - border: 0; - border-radius: 3px; - color: inherit; - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); - cursor: pointer; - font: inherit; - margin: 0 0 0 calc((16 * 1 * 1px) / 2); - margin: 0 0 0 calc(calc(16 * 1 * 1px) / 2); - margin: 0 0 0 var(--aa-spacing-half); - padding: 0 calc((16 * 1 * 1px) / 2); - padding: 0 calc(calc(16 * 1 * 1px) / 2); - padding: 0 var(--aa-spacing-half); + background: none; + border: 0; + border-radius: 3px; + color: inherit; + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + cursor: pointer; + font: inherit; + margin: 0 0 0 calc((16 * 1 * 1px) / 2); + margin: 0 0 0 calc(calc(16 * 1 * 1px) / 2); + margin: 0 0 0 var(--aa-spacing-half); + padding: 0 calc((16 * 1 * 1px) / 2); + padding: 0 calc(calc(16 * 1 * 1px) / 2); + padding: 0 var(--aa-spacing-half); } + .aa-DetachedCancelButton:focus, .aa-DetachedCancelButton:hover { - box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3); - box-shadow: inset 0 0 0 1px - rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); + box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3); + box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); } + .aa-DetachedContainer--modal { - border-radius: 6px; - bottom: inherit; - height: auto; - margin: 0 auto; - max-width: 680px; - max-width: var(--aa-detached-modal-max-width); - position: absolute; - top: 3%; + border-radius: 6px; + bottom: inherit; + height: auto; + margin: 0 auto; + max-width: 680px; + max-width: var(--aa-detached-modal-max-width); + position: absolute; + top: 3%; } + .aa-DetachedContainer--modal .aa-PanelLayout { - max-height: 500px; - max-height: var(--aa-detached-modal-max-height); - padding-bottom: calc((16 * 1 * 1px) / 2); - padding-bottom: calc(calc(16 * 1 * 1px) / 2); - padding-bottom: var(--aa-spacing-half); - position: static; + max-height: 500px; + max-height: var(--aa-detached-modal-max-height); + padding-bottom: calc((16 * 1 * 1px) / 2); + padding-bottom: calc(calc(16 * 1 * 1px) / 2); + padding-bottom: var(--aa-spacing-half); + position: static; } + .aa-DetachedContainer--modal .aa-PanelLayout:empty { - display: none; + display: none; } + .aa-DetachedSearchButton { - align-items: center; - background-color: rgba(255, 255, 255, 1); - background-color: rgba( - var(--aa-input-background-color-rgb), - var(--aa-input-background-color-alpha) - ); - border: 1px solid rgba(128, 126, 163, 0.8); - border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha)); - border-radius: 3px; - color: rgba(128, 126, 163, 0.6); - color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); - cursor: pointer; - display: flex; - font: inherit; - font-family: inherit; - font-family: var(--aa-font-family); - font-size: calc(16 * 1px); - font-size: var(--aa-font-size); - height: 44px; - height: var(--aa-search-input-height); - margin: 0; - padding: 0 calc(44px / 8); - padding: 0 calc(var(--aa-search-input-height) / 8); - position: relative; - text-align: left; - width: 100%; + align-items: center; + background-color: rgba(255, 255, 255, 1); + background-color: rgba(var(--aa-input-background-color-rgb), + var(--aa-input-background-color-alpha)); + border: 1px solid rgba(128, 126, 163, 0.8); + border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha)); + border-radius: 3px; + color: rgba(128, 126, 163, 0.6); + color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)); + cursor: pointer; + display: flex; + font: inherit; + font-family: inherit; + font-family: var(--aa-font-family); + font-size: calc(16 * 1px); + font-size: var(--aa-font-size); + height: 44px; + height: var(--aa-search-input-height); + margin: 0; + padding: 0 calc(44px / 8); + padding: 0 calc(var(--aa-search-input-height) / 8); + position: relative; + text-align: left; + width: 100%; } + .aa-DetachedSearchButton:focus { - border-color: rgba(62, 52, 211, 1); - border-color: rgba(var(--aa-primary-color-rgb), 1); - box-shadow: - rgba(62, 52, 211, 0.2) 0 0 0 3px, - inset rgba(62, 52, 211, 0.2) 0 0 0 2px; - box-shadow: - rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 3px, - inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px; - outline: medium none currentColor; + border-color: rgba(62, 52, 211, 1); + border-color: rgba(var(--aa-primary-color-rgb), 1); + box-shadow: + rgba(62, 52, 211, 0.2) 0 0 0 3px, + inset rgba(62, 52, 211, 0.2) 0 0 0 2px; + box-shadow: + rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 3px, + inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px; + outline: medium none currentColor; } + .aa-DetachedSearchButtonIcon { - align-items: center; - color: rgba(62, 52, 211, 1); - color: rgba(var(--aa-primary-color-rgb), 1); - cursor: auto; - display: flex; - flex-shrink: 0; - height: 100%; - justify-content: center; - width: calc(20px + (16 * 1 * 1px)); - width: calc(20px + calc(16 * 1 * 1px)); - width: calc(var(--aa-icon-size) + var(--aa-spacing)); + align-items: center; + color: rgba(62, 52, 211, 1); + color: rgba(var(--aa-primary-color-rgb), 1); + cursor: auto; + display: flex; + flex-shrink: 0; + height: 100%; + justify-content: center; + width: calc(20px + (16 * 1 * 1px)); + width: calc(20px + calc(16 * 1 * 1px)); + width: calc(var(--aa-icon-size) + var(--aa-spacing)); } + .aa-DetachedSearchButtonQuery { - color: rgba(38, 38, 39, 1); - color: rgba(var(--aa-text-color-rgb), 1); - line-height: 1.25em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), 1); + line-height: 1.25em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + .aa-DetachedSearchButtonPlaceholder[hidden] { - display: none; + display: none; } + .aa-Detached { - height: 100vh; - overflow: hidden; + height: 100vh; + overflow: hidden; } + .aa-DetachedOverlay { - background-color: rgba(115, 114, 129, 0.4); - background-color: rgba(var(--aa-overlay-color-rgb), var(--aa-overlay-color-alpha)); - height: 100vh; - left: 0; - margin: 0; - padding: 0; - position: fixed; - right: 0; - top: 0; - z-index: calc(9999 - 1); - z-index: calc(var(--aa-base-z-index) - 1); + background-color: rgba(115, 114, 129, 0.4); + background-color: rgba(var(--aa-overlay-color-rgb), var(--aa-overlay-color-alpha)); + height: 100vh; + left: 0; + margin: 0; + padding: 0; + position: fixed; + right: 0; + top: 0; + z-index: calc(9999 - 1); + z-index: calc(var(--aa-base-z-index) - 1); } + .aa-GradientBottom, .aa-GradientTop { - height: calc((16 * 1 * 1px) / 2); - height: calc(calc(16 * 1 * 1px) / 2); - height: var(--aa-spacing-half); - left: 0; - pointer-events: none; - position: absolute; - right: 0; - z-index: 9999; - z-index: var(--aa-base-z-index); + height: calc((16 * 1 * 1px) / 2); + height: calc(calc(16 * 1 * 1px) / 2); + height: var(--aa-spacing-half); + left: 0; + pointer-events: none; + position: absolute; + right: 0; + z-index: 9999; + z-index: var(--aa-base-z-index); } + .aa-GradientTop { - background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); - background-image: linear-gradient( - rgba(var(--aa-background-color-rgb), 1), - rgba(var(--aa-background-color-rgb), 0) - ); - top: 0; + background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); + background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), + rgba(var(--aa-background-color-rgb), 0)); + top: 0; } + .aa-GradientBottom { - background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); - background-image: linear-gradient( - rgba(var(--aa-background-color-rgb), 0), - rgba(var(--aa-background-color-rgb), 1) - ); - border-bottom-left-radius: calc((16 * 1 * 1px) / 4); - border-bottom-left-radius: calc(calc(16 * 1 * 1px) / 4); - border-bottom-left-radius: calc(var(--aa-spacing) / 4); - border-bottom-right-radius: calc((16 * 1 * 1px) / 4); - border-bottom-right-radius: calc(calc(16 * 1 * 1px) / 4); - border-bottom-right-radius: calc(var(--aa-spacing) / 4); - bottom: 0; + background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); + background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), + rgba(var(--aa-background-color-rgb), 1)); + border-bottom-left-radius: calc((16 * 1 * 1px) / 4); + border-bottom-left-radius: calc(calc(16 * 1 * 1px) / 4); + border-bottom-left-radius: calc(var(--aa-spacing) / 4); + border-bottom-right-radius: calc((16 * 1 * 1px) / 4); + border-bottom-right-radius: calc(calc(16 * 1 * 1px) / 4); + border-bottom-right-radius: calc(var(--aa-spacing) / 4); + bottom: 0; } + @media (hover: none) and (pointer: coarse) { - .aa-DesktopOnly { - display: none; - } + .aa-DesktopOnly { + display: none; + } } + @media (hover: hover) { - .aa-TouchOnly { - display: none; - } + .aa-TouchOnly { + display: none; + } } diff --git a/src/styles/code.css b/src/styles/code.css index 998d74f..e9a00d1 100644 --- a/src/styles/code.css +++ b/src/styles/code.css @@ -1,94 +1,95 @@ html.dark .shiki, html.dark .shiki span { - color: var(--shiki-dark) !important; - background-color: var(--shiki-dark-bg) !important; - /* Optional, if you also want font styles */ - font-style: var(--shiki-dark-font-style) !important; - font-weight: var(--shiki-dark-font-weight) !important; - text-decoration: var(--shiki-dark-text-decoration) !important; + color: var(--shiki-dark) !important; + background-color: var(--shiki-dark-bg) !important; + /* Optional, if you also want font styles */ + font-style: var(--shiki-dark-font-style) !important; + font-weight: var(--shiki-dark-font-weight) !important; + text-decoration: var(--shiki-dark-text-decoration) !important; } pre { - border: 1px solid #eaeaea; + border: 1px solid #eaeaea; } html.dark pre { - border: 1px solid #333; + border: 1px solid #333; } .prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) { - color: var(--tw-prose-pre-code); - background-color: var(--tw-prose-pre-bg); - overflow-x: auto; - font-weight: 400; - font-size: 0.875em; - line-height: 1.7142857; - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - border-radius: 0.375rem; + color: var(--tw-prose-pre-code); + background-color: var(--tw-prose-pre-bg); + overflow-x: auto; + font-weight: 400; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; - /*padding-top: 0;*/ - padding-inline-end: 1.1428571em; - padding-bottom: 0.8571429em; - padding-inline-start: 1.1428571em; + /*padding-top: 0;*/ + padding-inline-end: 1.1428571em; + padding-bottom: 0.8571429em; + padding-inline-start: 1.1428571em; } pre { - & .pre-header { - align-items: flex-start; - display: flex; - flex-direction: column; - justify-content: center; - left: 0px; - position: sticky; - top: 0px; - width: 100%; + & .pre-header { + align-items: flex-start; + display: flex; + flex-direction: column; + justify-content: center; + left: 0px; + position: sticky; + top: 0px; + width: 100%; - & .pre-title { - background-color: var(--code-block-background-color); - border-radius: var(--code-block-border-radius); - font-size: var(--code-block-font-size); - line-height: 1rem; - min-width: 100%; - padding: calc(16px * 0.5) calc(16px * 1); - text-align: center; - width: max-content; - } + & .pre-title { + background-color: var(--code-block-background-color); + border-radius: var(--code-block-border-radius); + font-size: var(--code-block-font-size); + line-height: 1rem; + min-width: 100%; + padding: calc(16px * 0.5) calc(16px * 1); + text-align: center; + width: max-content; + } - & .wrapper-copy-code { - align-items: center; - flex-direction: row; - display: flex; - justify-content: space-between; - width: 100%; - border-bottom: 1px solid #e5e7eb; - margin-bottom: 0.5em; + & .wrapper-copy-code { + align-items: center; + flex-direction: row; + display: flex; + justify-content: space-between; + width: 100%; + border-bottom: 1px solid #e5e7eb; + margin-bottom: 0.5em; - & .copy-code { - background-color: transparent; - border: none; - border-radius: var(--code-block-border-radius); - color: var(--code-block-font-color); - font-family: monospace; - font-size: var(--code-block-font-size); - line-height: 1rem; - margin-top: calc(16px * 0.25); - margin-bottom: calc(16px * 0.25); - padding-top: calc(16px * 0.5) calc(16px * 1); - padding-bottom: calc(16px * 0.5) calc(16px * 1); - } + & .copy-code { + background-color: transparent; + border: none; + border-radius: var(--code-block-border-radius); + color: var(--code-block-font-color); + font-family: monospace; + font-size: var(--code-block-font-size); + line-height: 1rem; + margin-top: calc(16px * 0.25); + margin-bottom: calc(16px * 0.25); + padding-top: calc(16px * 0.5) calc(16px * 1); + padding-bottom: calc(16px * 0.5) calc(16px * 1); + } - & .code-block-title { - /* muted text color */ - color: #999; - } - } + & .code-block-title { + /* muted text color */ + color: #999; + } + } - html.dark & .wrapper-copy-code { - border-bottom: 1px solid #333; - } - html.dark & .code-block-title { - color: #555; - } - } + html.dark & .wrapper-copy-code { + border-bottom: 1px solid #333; + } + + html.dark & .code-block-title { + color: #555; + } + } } diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css index 9a10ea8..2c0c52a 100644 --- a/src/styles/docsearch.css +++ b/src/styles/docsearch.css @@ -1,465 +1,543 @@ :root { - --docsearch-primary-color: #5468ff; - --docsearch-text-color: #1c1e21; - --docsearch-spacing: 12px; - --docsearch-icon-stroke-width: 1.4; - --docsearch-highlight-color: var(--docsearch-primary-color); - --docsearch-muted-color: #969faf; - --docsearch-container-background: rgba(101, 108, 133, 0.8); - --docsearch-logo-color: #5468ff; - --docsearch-modal-width: 560px; - --docsearch-modal-height: 600px; - --docsearch-modal-background: #f5f6f7; - --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64; - --docsearch-searchbox-height: 56px; - --docsearch-searchbox-background: #ebedf0; - --docsearch-searchbox-focus-background: #fff; - --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color); - --docsearch-hit-height: 56px; - --docsearch-hit-color: #444950; - --docsearch-hit-active-color: #fff; - --docsearch-hit-background: #fff; - --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1; - --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8); - --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, - 0 1px 2px 1px rgba(30, 35, 90, 0.4); - --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, - 0 1px 1px 0 rgba(30, 35, 90, 0.4); - --docsearch-footer-height: 44px; - --docsearch-footer-background: #fff; - --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12); -} + --docsearch-primary-color: #5468ff; + --docsearch-text-color: #1c1e21; + --docsearch-spacing: 12px; + --docsearch-icon-stroke-width: 1.4; + --docsearch-highlight-color: var(--docsearch-primary-color); + --docsearch-muted-color: #969faf; + --docsearch-container-background: rgba(101, 108, 133, 0.8); + --docsearch-logo-color: #5468ff; + --docsearch-modal-width: 560px; + --docsearch-modal-height: 600px; + --docsearch-modal-background: #f5f6f7; + --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64; + --docsearch-searchbox-height: 56px; + --docsearch-searchbox-background: #ebedf0; + --docsearch-searchbox-focus-background: #fff; + --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color); + --docsearch-hit-height: 56px; + --docsearch-hit-color: #444950; + --docsearch-hit-active-color: #fff; + --docsearch-hit-background: #fff; + --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1; + --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8); + --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, + 0 1px 2px 1px rgba(30, 35, 90, 0.4); + --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, + 0 1px 1px 0 rgba(30, 35, 90, 0.4); + --docsearch-footer-height: 44px; + --docsearch-footer-background: #fff; + --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12); +} + html[data-theme='dark'] { - --docsearch-text-color: #f5f6f7; - --docsearch-container-background: rgba(9, 10, 17, 0.8); - --docsearch-modal-background: #15172a; - --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; - --docsearch-searchbox-background: #090a11; - --docsearch-searchbox-focus-background: #000; - --docsearch-hit-color: #bec3c9; - --docsearch-hit-shadow: none; - --docsearch-hit-background: #090a11; - --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b); - --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, - 0 2px 2px 0 rgba(3, 4, 9, 0.3); - --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, - 0 1px 1px 0 #0304094d; - --docsearch-footer-background: #1e2136; - --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2); - --docsearch-logo-color: #fff; - --docsearch-muted-color: #7f8497; -} + --docsearch-text-color: #f5f6f7; + --docsearch-container-background: rgba(9, 10, 17, 0.8); + --docsearch-modal-background: #15172a; + --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; + --docsearch-searchbox-background: #090a11; + --docsearch-searchbox-focus-background: #000; + --docsearch-hit-color: #bec3c9; + --docsearch-hit-shadow: none; + --docsearch-hit-background: #090a11; + --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b); + --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, + 0 2px 2px 0 rgba(3, 4, 9, 0.3); + --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, + 0 1px 1px 0 #0304094d; + --docsearch-footer-background: #1e2136; + --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2); + --docsearch-logo-color: #fff; + --docsearch-muted-color: #7f8497; +} + .DocSearch-Button { - align-items: center; - background: var(--docsearch-searchbox-background); - border: 0; - border-radius: 40px; - color: var(--docsearch-muted-color); - cursor: pointer; - display: flex; - font-weight: 500; - height: 36px; - justify-content: space-between; - margin: 0 0 0 16px; - padding: 0 8px; - user-select: none; -} + align-items: center; + background: var(--docsearch-searchbox-background); + border: 0; + border-radius: 40px; + color: var(--docsearch-muted-color); + cursor: pointer; + display: flex; + font-weight: 500; + height: 30px; + justify-content: space-between; + margin: 0 0 0 16px; + padding: 0 8px; + user-select: none; +} + .DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover { - background: var(--docsearch-searchbox-focus-background); - box-shadow: var(--docsearch-searchbox-shadow); - color: var(--docsearch-text-color); - outline: none; + background: var(--docsearch-searchbox-focus-background); + box-shadow: var(--docsearch-searchbox-shadow); + color: var(--docsearch-text-color); + outline: none; } + .DocSearch-Button-Container { - align-items: center; - display: flex; + align-items: center; + display: flex; } + .DocSearch-Search-Icon { - stroke-width: 1.6; + stroke-width: 1.6; } + .DocSearch-Button .DocSearch-Search-Icon { - color: var(--docsearch-text-color); + color: var(--docsearch-text-color); } + .DocSearch-Button-Placeholder { - font-size: 1rem; - padding: 0 12px 0 6px; + font-size: 1rem; + padding: 0 12px 0 6px; } + .DocSearch-Button-Keys { - display: flex; - min-width: calc(40px + 0.8em); + display: flex; + min-width: calc(40px + 0.8em); } + .DocSearch-Button-Key { - align-items: center; - background: var(--docsearch-key-gradient); - border: 0; - border-radius: 3px; - box-shadow: var(--docsearch-key-shadow); - color: var(--docsearch-muted-color); - display: flex; - height: 18px; - justify-content: center; - margin-right: 0.4em; - padding: 0 0 2px; - position: relative; - top: -1px; - width: 20px; -} + align-items: center; + background: var(--docsearch-key-gradient); + border: 0; + border-radius: 3px; + box-shadow: var(--docsearch-key-shadow); + color: var(--docsearch-muted-color); + display: flex; + height: 18px; + justify-content: center; + margin-right: 0.4em; + padding: 0 0 2px; + position: relative; + top: -1px; + width: 20px; +} + .DocSearch-Button-Key--pressed { - box-shadow: var(--docsearch-key-pressed-shadow); - transform: translate3d(0, 1px, 0); -} + box-shadow: var(--docsearch-key-pressed-shadow); + transform: translate3d(0, 1px, 0); +} + +@media (max-width: 768px) { + + .DocSearch-Button-Keys, + .DocSearch-Button-Placeholder { + display: none; + } +} + .DocSearch--active { - overflow: hidden !important; + overflow: hidden !important; } + .DocSearch-Container, .DocSearch-Container * { - box-sizing: border-box; + box-sizing: border-box; } + .DocSearch-Container { - background-color: var(--docsearch-container-background); - height: 100vh; - left: 0; - position: fixed; - top: 0; - width: 100vw; - z-index: 200; -} + background-color: var(--docsearch-container-background); + height: 100vh; + left: 0; + position: fixed; + top: 0; + width: 100vw; + z-index: 200; +} + .DocSearch-Container a { - text-decoration: none; + text-decoration: none; } + .DocSearch-Link { - appearance: none; - background: none; - border: 0; - color: var(--docsearch-highlight-color); - cursor: pointer; - font: inherit; - margin: 0; - padding: 0; -} + appearance: none; + background: none; + border: 0; + color: var(--docsearch-highlight-color); + cursor: pointer; + font: inherit; + margin: 0; + padding: 0; +} + .DocSearch-Modal { - background: var(--docsearch-modal-background); - border-radius: 6px; - box-shadow: var(--docsearch-modal-shadow); - flex-direction: column; - margin: 60px auto auto; - max-width: var(--docsearch-modal-width); - position: relative; -} + background: var(--docsearch-modal-background); + border-radius: 6px; + box-shadow: var(--docsearch-modal-shadow); + flex-direction: column; + margin: 60px auto auto; + max-width: var(--docsearch-modal-width); + position: relative; +} + .DocSearch-SearchBar { - display: flex; - padding: var(--docsearch-spacing) var(--docsearch-spacing) 0; + display: flex; + padding: var(--docsearch-spacing) var(--docsearch-spacing) 0; } + .DocSearch-Form { - align-items: center; - background: var(--docsearch-searchbox-focus-background); - border-radius: 4px; - box-shadow: var(--docsearch-searchbox-shadow); - display: flex; - height: var(--docsearch-searchbox-height); - margin: 0; - padding: 0 var(--docsearch-spacing); - position: relative; - width: 100%; -} + align-items: center; + background: var(--docsearch-searchbox-focus-background); + border-radius: 4px; + box-shadow: var(--docsearch-searchbox-shadow); + display: flex; + height: var(--docsearch-searchbox-height); + margin: 0; + padding: 0 var(--docsearch-spacing); + position: relative; + width: 100%; +} + .DocSearch-Input { - appearance: none; - background: transparent; - border: 0; - color: var(--docsearch-text-color); - flex: 1; - font: inherit; - font-size: 1.2em; - height: 100%; - outline: none; - padding: 0 0 0 8px; - width: 80%; -} + appearance: none; + background: transparent; + border: 0; + color: var(--docsearch-text-color); + flex: 1; + font: inherit; + font-size: 1.2em; + height: 100%; + outline: none; + padding: 0 0 0 8px; + width: 80%; +} + .DocSearch-Input::placeholder { - color: var(--docsearch-muted-color); - opacity: 1; + color: var(--docsearch-muted-color); + opacity: 1; } + .DocSearch-Input::-webkit-search-cancel-button, .DocSearch-Input::-webkit-search-decoration, .DocSearch-Input::-webkit-search-results-button, .DocSearch-Input::-webkit-search-results-decoration { - display: none; + display: none; } + .DocSearch-LoadingIndicator, .DocSearch-MagnifierLabel, .DocSearch-Reset { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } + .DocSearch-MagnifierLabel, .DocSearch-Reset { - align-items: center; - color: var(--docsearch-highlight-color); - display: flex; - justify-content: center; + align-items: center; + color: var(--docsearch-highlight-color); + display: flex; + justify-content: center; } + .DocSearch-Container--Stalled .DocSearch-MagnifierLabel, .DocSearch-LoadingIndicator { - display: none; + display: none; } + .DocSearch-Container--Stalled .DocSearch-LoadingIndicator { - align-items: center; - color: var(--docsearch-highlight-color); - display: flex; - justify-content: center; + align-items: center; + color: var(--docsearch-highlight-color); + display: flex; + justify-content: center; } + @media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Reset { - animation: none; - appearance: none; - background: none; - border: 0; - border-radius: 50%; - color: var(--docsearch-icon-color); - cursor: pointer; - right: 0; - stroke-width: var(--docsearch-icon-stroke-width); - } -} + .DocSearch-Reset { + animation: none; + appearance: none; + background: none; + border: 0; + border-radius: 50%; + color: var(--docsearch-icon-color); + cursor: pointer; + right: 0; + stroke-width: var(--docsearch-icon-stroke-width); + } +} + .DocSearch-Reset { - animation: fade-in 0.1s ease-in forwards; - appearance: none; - background: none; - border: 0; - border-radius: 50%; - color: var(--docsearch-icon-color); - cursor: pointer; - padding: 2px; - right: 0; - stroke-width: var(--docsearch-icon-stroke-width); -} + animation: fade-in 0.1s ease-in forwards; + appearance: none; + background: none; + border: 0; + border-radius: 50%; + color: var(--docsearch-icon-color); + cursor: pointer; + padding: 2px; + right: 0; + stroke-width: var(--docsearch-icon-stroke-width); +} + .DocSearch-Reset[hidden] { - display: none; + display: none; } + .DocSearch-Reset:hover { - color: var(--docsearch-highlight-color); + color: var(--docsearch-highlight-color); } + .DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg { - height: 24px; - width: 24px; + height: 24px; + width: 24px; } + .DocSearch-Cancel { - display: none; + display: none; } + .DocSearch-Dropdown { - max-height: calc( - var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - - var(--docsearch-footer-height) - ); - min-height: var(--docsearch-spacing); - overflow-y: auto; - overflow-y: overlay; - padding: 0 var(--docsearch-spacing); - scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background); - scrollbar-width: thin; -} + max-height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height)); + min-height: var(--docsearch-spacing); + overflow-y: auto; + overflow-y: overlay; + padding: 0 var(--docsearch-spacing); + scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background); + scrollbar-width: thin; +} + .DocSearch-Dropdown::-webkit-scrollbar { - width: 12px; + width: 12px; } + .DocSearch-Dropdown::-webkit-scrollbar-track { - background: transparent; + background: transparent; } + .DocSearch-Dropdown::-webkit-scrollbar-thumb { - background-color: var(--docsearch-muted-color); - border: 3px solid var(--docsearch-modal-background); - border-radius: 20px; + background-color: var(--docsearch-muted-color); + border: 3px solid var(--docsearch-modal-background); + border-radius: 20px; } + .DocSearch-Dropdown ul { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } + .DocSearch-Label { - font-size: 0.75em; - line-height: 1.6em; + font-size: 0.75em; + line-height: 1.6em; } + .DocSearch-Help, .DocSearch-Label { - color: var(--docsearch-muted-color); + color: var(--docsearch-muted-color); } + .DocSearch-Help { - font-size: 0.9em; - margin: 0; - user-select: none; + font-size: 0.9em; + margin: 0; + user-select: none; } + .DocSearch-Title { - font-size: 1.2em; + font-size: 1.2em; } + .DocSearch-Logo a { - display: flex; + display: flex; } + .DocSearch-Logo svg { - color: var(--docsearch-logo-color); - margin-left: 8px; + color: var(--docsearch-logo-color); + margin-left: 8px; } + .DocSearch-Hits:last-of-type { - margin-bottom: 24px; + margin-bottom: 24px; } + .DocSearch-Hits mark { - background: none; - color: var(--docsearch-highlight-color); + background: none; + color: var(--docsearch-highlight-color); } + .DocSearch-HitsFooter { - color: var(--docsearch-muted-color); - display: flex; - font-size: 0.85em; - justify-content: center; - margin-bottom: var(--docsearch-spacing); - padding: var(--docsearch-spacing); -} + color: var(--docsearch-muted-color); + display: flex; + font-size: 0.85em; + justify-content: center; + margin-bottom: var(--docsearch-spacing); + padding: var(--docsearch-spacing); +} + .DocSearch-HitsFooter a { - border-bottom: 1px solid; - color: inherit; + border-bottom: 1px solid; + color: inherit; } + .DocSearch-Hit { - border-radius: 4px; - display: flex; - padding-bottom: 4px; - position: relative; + border-radius: 4px; + display: flex; + padding-bottom: 4px; + position: relative; } + @media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit--deleting { - transition: none; - } + .DocSearch-Hit--deleting { + transition: none; + } } + .DocSearch-Hit--deleting { - opacity: 0; - transition: all 0.25s linear; + opacity: 0; + transition: all 0.25s linear; } + @media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit--favoriting { - transition: none; - } + .DocSearch-Hit--favoriting { + transition: none; + } } + .DocSearch-Hit--favoriting { - transform: scale(0); - transform-origin: top center; - transition: all 0.25s linear; - transition-delay: 0.25s; + transform: scale(0); + transform-origin: top center; + transition: all 0.25s linear; + transition-delay: 0.25s; } + .DocSearch-Hit a { - background: var(--docsearch-hit-background); - border-radius: 4px; - box-shadow: var(--docsearch-hit-shadow); - display: block; - padding-left: var(--docsearch-spacing); - width: 100%; -} + background: var(--docsearch-hit-background); + border-radius: 4px; + box-shadow: var(--docsearch-hit-shadow); + display: block; + padding-left: var(--docsearch-spacing); + width: 100%; +} + .DocSearch-Hit-source { - background: var(--docsearch-modal-background); - color: var(--docsearch-highlight-color); - font-size: 0.85em; - font-weight: 600; - line-height: 32px; - margin: 0 -4px; - padding: 8px 4px 0; - position: sticky; - top: 0; - z-index: 10; -} + background: var(--docsearch-modal-background); + color: var(--docsearch-highlight-color); + font-size: 0.85em; + font-weight: 600; + line-height: 32px; + margin: 0 -4px; + padding: 8px 4px 0; + position: sticky; + top: 0; + z-index: 10; +} + .DocSearch-Hit-Tree { - color: var(--docsearch-muted-color); - height: var(--docsearch-hit-height); - opacity: 0.5; - stroke-width: var(--docsearch-icon-stroke-width); - width: 24px; + color: var(--docsearch-muted-color); + height: var(--docsearch-hit-height); + opacity: 0.5; + stroke-width: var(--docsearch-icon-stroke-width); + width: 24px; } + .DocSearch-Hit[aria-selected='true'] a { - background-color: var(--docsearch-highlight-color); + background-color: var(--docsearch-highlight-color); } + .DocSearch-Hit[aria-selected='true'] mark { - text-decoration: underline; + text-decoration: underline; } + .DocSearch-Hit-Container { - align-items: center; - color: var(--docsearch-hit-color); - display: flex; - flex-direction: row; - height: var(--docsearch-hit-height); - padding: 0 var(--docsearch-spacing) 0 0; -} + align-items: center; + color: var(--docsearch-hit-color); + display: flex; + flex-direction: row; + height: var(--docsearch-hit-height); + padding: 0 var(--docsearch-spacing) 0 0; +} + .DocSearch-Hit-icon { - height: 20px; - width: 20px; + height: 20px; + width: 20px; } + .DocSearch-Hit-action, .DocSearch-Hit-icon { - color: var(--docsearch-muted-color); - stroke-width: var(--docsearch-icon-stroke-width); + color: var(--docsearch-muted-color); + stroke-width: var(--docsearch-icon-stroke-width); } + .DocSearch-Hit-action { - align-items: center; - display: flex; - height: 22px; - width: 22px; + align-items: center; + display: flex; + height: 22px; + width: 22px; } + .DocSearch-Hit-action svg { - display: block; - height: 18px; - width: 18px; + display: block; + height: 18px; + width: 18px; } -.DocSearch-Hit-action + .DocSearch-Hit-action { - margin-left: 6px; + +.DocSearch-Hit-action+.DocSearch-Hit-action { + margin-left: 6px; } + .DocSearch-Hit-action-button { - appearance: none; - background: none; - border: 0; - border-radius: 50%; - color: inherit; - cursor: pointer; - padding: 2px; -} + appearance: none; + background: none; + border: 0; + border-radius: 50%; + color: inherit; + cursor: pointer; + padding: 2px; +} + svg.DocSearch-Hit-Select-Icon { - display: none; + display: none; } + .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon { - display: block; + display: block; } + .DocSearch-Hit-action-button:focus, .DocSearch-Hit-action-button:hover { - background: rgba(0, 0, 0, 0.2); - transition: background-color 0.1s ease-in; + background: rgba(0, 0, 0, 0.2); + transition: background-color 0.1s ease-in; } + @media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:focus, - .DocSearch-Hit-action-button:hover { - transition: none; - } + + .DocSearch-Hit-action-button:focus, + .DocSearch-Hit-action-button:hover { + transition: none; + } } + .DocSearch-Hit-action-button:focus path, .DocSearch-Hit-action-button:hover path { - fill: #fff; + fill: #fff; } + .DocSearch-Hit-content-wrapper { - display: flex; - flex: 1 1 auto; - flex-direction: column; - font-weight: 500; - justify-content: center; - line-height: 1.2em; - margin: 0 8px; - overflow-x: hidden; - position: relative; - text-overflow: ellipsis; - white-space: nowrap; - width: 80%; -} + display: flex; + flex: 1 1 auto; + flex-direction: column; + font-weight: 500; + justify-content: center; + line-height: 1.2em; + margin: 0 8px; + overflow-x: hidden; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; + width: 80%; +} + .DocSearch-Hit-title { - font-size: 0.9em; + font-size: 0.9em; } + .DocSearch-Hit-path { - color: var(--docsearch-muted-color); - font-size: 0.75em; + color: var(--docsearch-muted-color); + font-size: 0.75em; } + .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon, @@ -467,116 +545,133 @@ svg.DocSearch-Hit-Select-Icon { .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title, .DocSearch-Hit[aria-selected='true'] mark { - color: var(--docsearch-hit-active-color) !important; + color: var(--docsearch-hit-active-color) !important; } + @media screen and (prefers-reduced-motion: reduce) { - .DocSearch-Hit-action-button:focus, - .DocSearch-Hit-action-button:hover { - background: rgba(0, 0, 0, 0.2); - transition: none; - } -} + + .DocSearch-Hit-action-button:focus, + .DocSearch-Hit-action-button:hover { + background: rgba(0, 0, 0, 0.2); + transition: none; + } +} + .DocSearch-ErrorScreen, .DocSearch-NoResults, .DocSearch-StartScreen { - font-size: 0.9em; - margin: 0 auto; - padding: 36px 0; - text-align: center; - width: 80%; + font-size: 0.9em; + margin: 0 auto; + padding: 36px 0; + text-align: center; + width: 80%; } + .DocSearch-Screen-Icon { - color: var(--docsearch-muted-color); - padding-bottom: 12px; + color: var(--docsearch-muted-color); + padding-bottom: 12px; } + .DocSearch-NoResults-Prefill-List { - display: inline-block; - padding-bottom: 24px; - text-align: left; + display: inline-block; + padding-bottom: 24px; + text-align: left; } + .DocSearch-NoResults-Prefill-List ul { - display: inline-block; - padding: 8px 0 0; + display: inline-block; + padding: 8px 0 0; } + .DocSearch-NoResults-Prefill-List li { - list-style-position: inside; - list-style-type: '» '; + list-style-position: inside; + list-style-type: '» '; } + .DocSearch-Prefill { - appearance: none; - background: none; - border: 0; - border-radius: 1em; - color: var(--docsearch-highlight-color); - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: 700; - padding: 0; -} + appearance: none; + background: none; + border: 0; + border-radius: 1em; + color: var(--docsearch-highlight-color); + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: 700; + padding: 0; +} + .DocSearch-Prefill:focus, .DocSearch-Prefill:hover { - outline: none; - text-decoration: underline; + outline: none; + text-decoration: underline; } + .DocSearch-Footer { - align-items: center; - background: var(--docsearch-footer-background); - border-radius: 0 0 8px 8px; - box-shadow: var(--docsearch-footer-shadow); - display: flex; - flex-direction: row-reverse; - flex-shrink: 0; - height: var(--docsearch-footer-height); - justify-content: space-between; - padding: 0 var(--docsearch-spacing); - position: relative; - user-select: none; - width: 100%; - z-index: 300; -} + align-items: center; + background: var(--docsearch-footer-background); + border-radius: 0 0 8px 8px; + box-shadow: var(--docsearch-footer-shadow); + display: flex; + flex-direction: row-reverse; + flex-shrink: 0; + height: var(--docsearch-footer-height); + justify-content: space-between; + padding: 0 var(--docsearch-spacing); + position: relative; + user-select: none; + width: 100%; + z-index: 300; +} + .DocSearch-Commands { - color: var(--docsearch-muted-color); - display: flex; - list-style: none; - margin: 0; - padding: 0; + color: var(--docsearch-muted-color); + display: flex; + list-style: none; + margin: 0; + padding: 0; } + .DocSearch-Commands li { - align-items: center; - display: flex; + align-items: center; + display: flex; } + .DocSearch-Commands li:not(:last-of-type) { - margin-right: 0.8em; + margin-right: 0.8em; } + .DocSearch-Commands-Key { - align-items: center; - background: var(--docsearch-key-gradient); - border: 0; - border-radius: 2px; - box-shadow: var(--docsearch-key-shadow); - color: var(--docsearch-muted-color); - display: flex; - height: 18px; - justify-content: center; - margin-right: 0.4em; - padding: 0 0 1px; - width: 20px; -} + align-items: center; + background: var(--docsearch-key-gradient); + border: 0; + border-radius: 2px; + box-shadow: var(--docsearch-key-shadow); + color: var(--docsearch-muted-color); + display: flex; + height: 18px; + justify-content: center; + margin-right: 0.4em; + padding: 0 0 1px; + width: 20px; +} + .DocSearch-VisuallyHiddenForAccessibility { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -} + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + @keyframes fade-in { - 0% { - opacity: 0; - } - to { - opacity: 1; - } + 0% { + opacity: 0; + } + + to { + opacity: 1; + } }