diff options
Diffstat (limited to 'docs/static/theme.css')
-rw-r--r-- | docs/static/theme.css | 1808 |
1 files changed, 0 insertions, 1808 deletions
diff --git a/docs/static/theme.css b/docs/static/theme.css deleted file mode 100644 index 8dad4aa..0000000 --- a/docs/static/theme.css +++ /dev/null @@ -1,1808 +0,0 @@ -/* latin */ -@font-face { - font-family: "Karla"; - font-style: normal; - font-weight: 400; - src: url("./fonts/karla-regular-.woff2") format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin-ext */ -@font-face { - font-family: "Karla"; - font-style: normal; - font-weight: 400; - src: url("./fonts/karla-regular-ext.woff2") format("woff2"); - unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: "Karla"; - font-style: normal; - font-weight: 700; - src: url("./fonts/karla-bold.woff2") format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin-ext */ -@font-face { - font-family: "Karla"; - font-style: normal; - font-weight: 700; - src: url("./fonts/karla-bold-ext.woff2") format("woff2"); - unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -@font-face { - font-family: "Material Symbols Rounded"; - font-style: normal; - font-weight: 100 700; - font-display: block; - src: url("./fonts/material-symbols-rounded.woff2") format("woff2"); -} - -/* ---------------------------------------------------------------------- */ - -html { - --cd-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --cd-font-sans: Karla, sans-serif; - --cd-font-icons: "Material Symbols Rounded"; - - --cd-padding-left: max(1rem, env(safe-area-inset-right)); - --cd-padding-right: max(1rem, env(safe-area-inset-left)); - - --cd-brand-color: #fbbf24; - --cd-bg-color-light: rgb(255 255 255); - --cd-bg-color-dark: rgb(23 23 23); - - --cd-bg-color: var(--cd-bg-color-light); - --cd-bg-color-hover: rgb(240, 240, 240); - --cd-text-color: rgb(23 23 23); - --cd-text-color-mild: rgb(63 63 70); - --cd-border-color: #e3e3e4; - - --cd-nav-bg-color: rgba(255, 255, 255, 0.8); - --cd-nav-bg-color-hover: rgb(244, 244, 244); - - --doc-symbol-parameter-fg-color: #df50af; - --doc-symbol-attribute-fg-color: #953800; - --doc-symbol-function-fg-color: #8250df; - --doc-symbol-method-fg-color: #8250df; - --doc-symbol-class-fg-color: #0550ae; - --doc-symbol-module-fg-color: #5cad0f; - - --doc-symbol-parameter-bg-color: #df50af1a; - --doc-symbol-attribute-bg-color: #9538001a; - --doc-symbol-function-bg-color: #8250df1a; - --doc-symbol-method-bg-color: #8250df1a; - --doc-symbol-class-bg-color: #0550ae1a; - --doc-symbol-module-bg-color: #5cad0f1a; -} - -html.dark { - --cd-brand-color: #3451b2; - - --cd-bg-color: var(--cd-bg-color-dark); - --cd-bg-color-hover: rgb(40 40 40); - --cd-text-color: rgb(250 250 250); - --cd-text-color-mild: rgb(161 161 170); - --cd-border-color: rgb(60 60 60); - - --cd-nav-bg-color: rgba(60, 60, 60, 0.8); - --cd-nav-bg-color-hover: rgb(70, 70, 70); - - --doc-symbol-parameter-fg-color: #ffa8cc; - --doc-symbol-attribute-fg-color: #ffa657; - --doc-symbol-function-fg-color: #d2a8ff; - --doc-symbol-method-fg-color: #d2a8ff; - --doc-symbol-class-fg-color: #79c0ff; - --doc-symbol-module-fg-color: #baff79; - - --doc-symbol-parameter-bg-color: #ffa8cc1a; - --doc-symbol-attribute-bg-color: #ffa6571a; - --doc-symbol-function-bg-color: #d2a8ff1a; - --doc-symbol-method-bg-color: #d2a8ff1a; - --doc-symbol-class-bg-color: #79c0ff1a; - --doc-symbol-module-bg-color: #baff791a; -} - -/* ---------------------------------------------------------------------- */ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ -*, -::before, -::after { - /* 1 */ - box-sizing: border-box; - /* 2 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; -} -::before, -::after { - --cd-content: ""; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Set default font sans -4. Disable tap highlights on iOS -*/ -html, -:host { - /* 1 */ - line-height: 1.5; - /* 2 */ - tab-size: 4; - /* 3 */ - -webkit-text-size-adjust: 100%; - /* 4 */ - font-family: var(--cd-font-sans); - font-feature-settings: normal; - font-variation-settings: normal; - /* 5 */ - -webkit-tap-highlight-color: transparent; -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class - directly on the `html` element. -*/ -body { - /* 1 */ - margin: 0; - /* 2 */ - line-height: inherit; -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ -hr { - /* 1 */ - height: 0; - /* 2 */ - color: inherit; - /* 3 */ - border-top-width: 1px; -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* Remove the default font size and weight for headings. */ -h1, h2, h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit; -} - -/* Reset links to optimize for opt-in styling instead of opt-out. */ -a { - color: inherit; - text-decoration: inherit; -} - -/* Add the correct font weight in Edge and Safari. */ -b, strong { - font-weight: bolder; -} - -/* -1. Use the user"s configured `mono` font-family by default. -2. Correct the odd `em` font sizing in all browsers. -*/ -code, kbd, samp, pre { - /* 1 */ - font-family: var(--cd-font-mono); - font-feature-settings: normal; - font-variation-settings: normal; - /* 2 */ - font-size: 1em; -} - -/* Add the correct font size in all browsers. */ -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in -all browsers. -*/ -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sub { - bottom: -0.25em; -} -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ -table { - /* 1 */ - text-indent: 0; - /* 2 */ - border-color: inherit; - /* 3 */ - border-collapse: collapse; -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ -button, input, optgroup, select, textarea { - /* 1 */ - font-family: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - font-size: 100%; - font-weight: inherit; - line-height: inherit; - letter-spacing: inherit; - color: inherit; - /* 2 */ - margin: 0; - /* 3 */ - padding: 0; -} - -/* Remove the inheritance of text transform in Edge and Firefox. */ -button, select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ -button, -input:where([type="button"]), -input:where([type="reset"]), -input:where([type="submit"]) { - /* 1 */ - -webkit-appearance: button; - /* 2 */ - background-color: transparent; - background-image: none; -} - -/* Use the modern Firefox focus style for all focusable elements. */ -:-moz-focusring { - outline: auto; -} - -/* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ -:-moz-ui-invalid { - box-shadow: none; -} - -/* Add the correct vertical alignment in Chrome and Firefox. */ -progress { - vertical-align: baseline; -} - -/* Correct the cursor style of increment and decrement buttons in Safari. */ -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ -[type="search"] { - /* 1 */ - -webkit-appearance: textfield; - /* 2 */ - outline-offset: -2px; -} - -/* Remove the inner padding in Chrome and Safari on macOS. */ -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ -::-webkit-file-upload-button { - /* 1 */ - -webkit-appearance: button; - /* 2 */ - font: inherit; -} - -/* Add the correct display in Chrome and Safari. */ -summary { - display: list-item; -} - -/* Removes the default spacing and border for appropriate elements. */ -blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { - margin: 0; -} -fieldset { - margin: 0; - padding: 0; -} -legend { - padding: 0; -} -ol, ul, menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* Reset default styling for dialogs. */ -dialog { - padding: 0; -} - -/* Prevent resizing textareas horizontally by default. */ -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user"s configured gray 400 color. -*/ -input::-moz-placeholder, -textarea::-moz-placeholder { - /* 1 */ - opacity: 1; - /* 2 */ - color: #9ca3af; -} -input::placeholder, -textarea::placeholder { - /* 1 */ - opacity: 1; - /* 2 */ - color: #9ca3af; -} - -/* Set the default cursor for buttons. */ -button, -[role="button"] { - cursor: pointer; -} - -/* Make sure disabled buttons don"t get the pointer cursor. */ -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ -img, svg, video, canvas, audio, iframe, embed, object { - /* 1 */ - display: block; - /* 2 */ - vertical-align: middle; -} - -/* -Constrain images and videos to the parent width and preserve their -intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ -img, video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden] { - display: none; -} - -/* ---------------------------------------------------------------------- */ - -html:has(.cd-nav-mobile:popover-open) { - overflow: hidden !important; - overflow-x: hidden !important; - overflow-y: hidden !important; -} -body { - position: relative; - min-height: 100vh; - color: var(--cd-text-color); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background-color: var(--cd-bg-color-light); - transition: background 100ms linear; -} -html.dark body { - background-color: var(--cd-bg-color-dark); -} - -.keys, -kbd:not(.keys > kbd) { - font-family: var(--cd-font-mono); - display: inline-block; - padding: 0.2rem 0.25rem; - margin-left: 0.1rem; - margin-right: 0.1rem; - font-size: 0.875rem; - line-height: 1; - font-weight: 500; - letter-spacing: -0.025em; - line-height: 1; - border-radius: 0.25rem; - border-width: 1px; - border-color: #ffffff; - box-shadow: 0 0 2px 0 #000; - - &:is(.dark *) { - border-color: rgb(0 0 0); - background-color: rgb(24 24 27); - } -} - -.scrollbar-thin { - scrollbar-width: thin; /* Firefox */ -} -.scrollbar-thin::-webkit-scrollbar { - /* Safari and Chrome */ - width: 2px; - background-color: ButtonFace; -} -.scrollbar-default { - -ms-overflow-style: auto; /* IE and Edge */ - scrollbar-width: auto; /* Firefox */ -} -.scrollbar-default::-webkit-scrollbar { - /* Safari and Chrome */ - width: auto; -} - -a.headerlink { - margin-left: .25rem; - display: inline-block; - text-decoration-line: none; - opacity: 0; - transition-property: opacity; - transition-timing-function: cubic-bezier(.4,0,.2,1); - transition-duration: .15s; -} -h2:hover a.headerlink, -h3:hover a.headerlink, -h4:hover a.headerlink, -h5:hover a.headerlink, -h6:hover a.headerlink { - opacity: 0.5; -} - -/* ---------------------------------------------------------------------- */ - -.doc-symbol { - border-radius: 0.1rem; - padding: 0 0.3em; - font-weight: bold; -} -.doc-symbol-attr { - color: var(--doc-symbol-attribute-fg-color) !important; - background-color: var(--doc-symbol-attribute-bg-color) !important; -} -.doc-symbol-function { - color: var(--doc-symbol-function-fg-color) !important; - background-color: var(--doc-symbol-function-bg-color) !important; -} -.doc-symbol-method { - color: var(--doc-symbol-method-fg-color) !important; - background-color: var(--doc-symbol-method-bg-color) !important; -} -.doc-symbol-class { - color: var(--doc-symbol-class-fg-color) !important; - background-color: var(--doc-symbol-class-bg-color) !important; -} -.doc-symbol-module { - color: var(--doc-symbol-module-fg-color) !important; - background-color: var(--doc-symbol-module-bg-color) !important; -} - -.doc-oname { - font-weight: normal; -} -.doc-olabel { - font-size: 0.6em !important; - color: #36464e !important; - font-weight: 400; - padding: 0.1rem 0.4rem !important; -} - -.doc-attrs ~ .doc-methods, -.doc-properties ~ .doc-methods { - margin-top; 1rem; -} - -/* ---------------------------------------------------------------------- */ - -.icon { - font-family: var(--cd-font-icons); - font-weight: normal; - font-style: normal; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - font-feature-settings: "liga"; - cursor: default; - pointer-events: none; -} - -/* ---------------------------------------------------------------------- */ - -.cd-source { - display: flex; - align-items: center; - font-size: 0.85rem; - line-height: 1.2; - white-space: nowrap; - cursor: pointer; - text-decoration: none; - padding: 0.5rem 0.75rem; - min-width: 150px; - backdrop-filter: blur(4px); - background-color: var(--cd-nav-bg-color); - border-radius: 1rem; - transition: background 300ms ease-in-out; - - &:hover { - background-color: var(--cd-nav-bg-color-hover); - } - & > div { - opacity: 0.8; - transition: opacity 300ms ease-in-out; - } - &:hover > div { - opacity: 1; - } - & .cd-source__icon { - padding-right: 0.5rem; - } - & .cd-source__icon svg { - height: 1.5rem; - width: 1.5rem; - fill: currentcolor; - display: block; - } - & .cd-source__label { - font-size: 0.9rem; - font-weight: bold; - } - & .cd-source__repo { - display: inline-block; - max-width: calc(100% - 1.2rem); - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - } - @media (max-width: 480px) { - & { - min-width: 0; - } - & .cd-source__icon { - padding-right: 0; - } - & .cd-source__repo { - display: none; - } - } - & .cd-source__facts { - display: hidden; - gap: 0.4rem; - list-style-type: none; - margin: 0.1rem 0 0; - overflow: hidden; - padding: 0; - width: 100%; - opacity: 0; - transform: translateY(100%); - transition: all 0.5s ease-out; - } - & .cd-source__facts.cd-source__facts--visible { - display: flex; - opacity: 1; - transform: translateY(0); - } - & .cd-source__facts [data-fact] { - overflow: hidden; - text-overflow: ellipsis; - display: flex; - align-items: center; - line-height: 1; - } - & .cd-source__facts [data-fact]:nth-child(1n+2) { - flex-shrink: 0; - } - & .cd-source__facts [data-fact]:not([hidden]):before { - width: 0.6rem; - padding-right: 0.8rem; - font-family: var(--cd-font-icons); - font-weight: normal; - font-style: normal; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - font-feature-settings: "liga"; - cursor: default; - pointer-events: none; - } - & .cd-source__facts [data-fact="version"]:not([hidden]):before { - content: "tag"; - } - & .cd-source__facts [data-fact="stars"]:not([hidden]):before { - content: "star"; - } - & .cd-source__facts [data-fact="forks"]:not([hidden]):before { - content: "fork_right"; - } - & .cd-source__facts [data-fact="numrepos"]:not([hidden]):before { - content: "numbers"; - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-cards { - & { - display: grid; - grid-gap: 1rem; - } - @media (min-width: 480px) { - & { grid-template-columns: repeat(2, 1fr); } - } - @media (min-width: 900px) { - & { grid-template-columns: repeat(4, 1fr); } - } - & a.card { - display: block; - border: 1px solid var(--cd-border-color); - padding: 1rem; - border-radius: 6px; - background-color: var(--cd-bg-color); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - } - & a.card:hover { - display: block; - background-color: var(--cd-bg-color-hover); - } - & a.card h2 { - text-decoration: none; - font-family: var(--cd-font-sans); - font-weight: bold; - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-text-button { - display: inline-flex; - cursor: pointer; - touch-action: manipulation; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - align-items: center; - justify-content: center; - white-space: nowrap; - border-radius: 0.25rem; - border-width: 1px; - border-color: rgb(228 228 231); - background-color: rgb(250 250 250); - padding: 0.25rem 0.5rem; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 600; - color: rgb(39 39 42); - - &:hover { - border-color: rgb(212 212 216); - background-color: rgb(244 244 245); - color: rgb(24 24 27); - box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);; - } - &:focus { - outline-style: solid; - outline-offset: 1px; - outline-color: rgb(82 82 91 / 0.5); - } - &:active { - border-color: rgb(161 161 170); - } - &:disabled { - cursor: default; - outline: 2px solid transparent; - outline-offset: 2px; - } - &:is(.dark *) { - border-color: rgb(82 82 91); - background-color: rgb(82 82 91 / 0.1); - color: rgb(228 228 231); - } - &:is(.dark *):hover { - border-color: rgb(113 113 122); - background-color: rgb(24 24 27); - color: rgb(244 244 245); - } - &:is(.dark *):active { - border-color: var(--cd-bg-color); - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-callout { - --bg-color: rgb(244 244 245); - --border-color: rgb(212 212 216); - --text-color: rgb(39 39 42); - - &.type-note, - &.type-info, - &.type-todo { - --bg-color: rgb(244 244 245); - --border-color: rgb(212 212 216); - --text-color: rgb(39 39 42); - } - &.type-tip { - --bg-color: rgb(254 249 195); - --border-color: rgb(254 240 138); - --text-color: rgb(133 77 14); - } - &.type-alert { - --bg-color: rgb(255 237 213); - --border-color: rgb(254 215 170); - --text-color: rgb(154 52 18); - } - &.type-warning { - --bg-color: rgb(255 237 213); - --border-color: rgb(254 215 170); - --text-color: rgb(154 52 18); - } - &.type-danger { - --bg-color: rgb(255 228 230); - --border-color: rgb(254 205 211); - --text-color: rgb(136 19 55); - } - &.type-error { - --bg-color: rgb(255 228 230); - --border-color: rgb(254 205 211); - --text-color: rgb(136 19 55); - } - &.type-internal { - --bg-color: rgb(231 229 228); - --border-color: rgb(214 211 209); - --text-color: rgb(28 25 23); - } - & { - position: relative; - border-top-width: 1px; - border-bottom-width: 1px; - overflow: hidden; - margin-left: -1rem; - margin-right: -1rem; - background-color: var(--bg-color); - border-color: var(--border-color); - color: var(--text-color); - } - @media (min-width: 640px) { - & { - border-left-width: 1px; - border-right-width: 1px; - border-radius: 0.25rem; - margin-left: 0; - margin-right: 0; - } - } - &:is(.dark *) { - background-color: oklch(from var(--bg-color) calc(l * 2) calc(c * 3) h / 0.8); - border-color: oklch(from var(--border-color) calc(l * 1.5) c h); - color: oklch(from var(--text-color) calc(l * 0.5) c h); - } - &:is(.dark *) ::selection { - background-color: oklch(from var(--bg-color) calc(l * 1.2) calc(c * 4) h) - } - &:is(aside) { - display: flex; - align-items: flex-start; - padding: 1.25rem 1rem 1rem; - } - @media (min-width: 640px) { - &:is(aside) { - padding-left: 1.25rem; - padding-right: 1.25rem; - } - } - & summary { - display: flex; - align-items: center; - font-weight: 700; - height: 3rem; - padding-left: 1.25rem; - padding-right: 1.25rem; - cursor: pointer; - } - & .icon { - margin: -0.1rem 1rem 0 -0.25rem; - opacity: 0.9; - font-size: 1.2rem; - line-height: 1.4; - } - @media (max-width: 639px) { - & .icon { - display: none; - } - } - & .icon.arrow { - margin-left: auto; - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } - & details&[open] .icon.arrow { - transform: rotate(180deg); - } - & .content { - line-height: 1.4; - } - & details& .content { - padding: 0 1rem 1rem; - } - @media (min-width: 640px) { - & details& .content { - padding: 0 1.25rem 1rem; - } - } -} -/* Cannot be nested */ -.cd-callout::selection { - background-color: oklch(from var(--bg-color) calc(l * 0.9) calc(c * 3) h); -} - -/* ---------------------------------------------------------------------- */ - -.cd-example-tabs { - position: relative; - margin-top: 2rem; - margin-bottom: 3rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - - & .example-tabgroup { - width: 100%; - overflow: hidden; - position: relative; - border: 1px solid #999; - border-radius: 0.4rem; - } - - & .example-tablist { - z-index: 0; - display: flex; - border-bottom: 1px solid #999; - background-color: rgb(249 250 251); - overflow-x: auto; - overflow-y: hidden; - -ms-scroll-chaining: none; - overscroll-behavior: contain; - width: 100%; - text-align: center; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - color: rgb(107 114 128); - } - & .example-tablist:is(.dark *) { - border-color: rgb(75 85 99); - background-color: rgb(55 65 81); - color: rgb(156 173 175); - } - - & .example-tab { - user-select: none; - border-right-width: 1px; - border-color: #999; - background-color: rgb(255 255 255); - padding: 0.5rem 1.6rem; - color: #333; - } - & .example-tab:is(.dark *) { - border-color: rgb(75 85 99); - background-color: rgb(31 41 55); - color: rgb(255 255 255); - } - & .example-tab:not(.ui-disabled):not(.ui-selected):hover { - background-color: rgb(249 250 251); - color: rgb(55 65 81); - } - & .example-tab:not(.ui-disabled):not(.ui-selected):hover:is(.dark *) { - background-color: rgb(55 65 81); - color: rgb(255 255 255); - } - & .example-tab.ui-disabled { - color: rgb(193 204 220); - } - & .example-tab.ui-selected { - color: black; - background-color: #e7e9ed; - } - & .example-tab.ui-selected:is(.dark *) { - color: white; - background-color: #111; - } - - & .example-tabpanel { - width: 100%; - flex-grow: 0;` - z-index: 10; - overflow: auto; - position: relative; - max-height: 400px; - } - & .example-tabpanel.ui-hidden { - display: none; - } - & .example-tabpanel div.highlight { - margin: 0; - padding: 0; - border-radius: 0; - font-size: 0.9rem; - } - & .example-tabpanel div.highlight pre { - border-radius: 0; - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-footer { - padding-top: 1.25rem; - padding-bottom: 1.25rem; - padding-left: var(--cd-padding-left); - padding-right: var(--cd-padding-right); - font-size: 0.875rem; - line-height: 1.25rem; - text-align: center; - border-top: 1px solid rgb(228 228 231); - - &:is(.dark *){ - border-color: rgb(82 82 91); - } - & .wrapper { - display: flex; - align-items: center; - } - & .copy { - margin-right: auto; - text-align: left; - padding: 0 16px; - } - & .built-with { - height: 100%; - color: rgb(113 113 122); - } - & .built-with:is(.dark *) { - color: inherit; - } - & .built-with a { - text-decoration: underline; - cursor: pointer; - } - & .themeswitch { - margin-left: 1.5rem; - margin-right: 0; - opacity: 0.8; - border-radius: 1rem; - background-color: var(--cd-nav-bg-color); - transition: opacity 300ms ease-in-out, background 300ms ease-in-out; - padding-left: 0.5rem; - padding-right: 0.5rem; - } - & .themeswitch:hover { - opacity: 1; - background-color: var(--cd-nav-bg-color-hover); - } - @media (max-width: 640px) { - & .built-with, - & .themeswitch { - display: none; - } - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-header { - margin-bottom: 2rem; - - & div p { - margin-bottom: 0.5rem; - font-size: 0.875rem; - line-height: 1; - font-weight: 600; - } - & h1 { - display: inline-block; - font-size: 1.9rem; - line-height: 1.25rem; - color: rgb(24 24 27); - font-weight: 800; - margin: 0; - } - & h1:is(.dark *) { - color: rgb(228 228 231); - } - @media (min-width: 640px) { - & h1 { - font-size: 2.2rem; - } - } - & p.description { - margin-top: 0.25rem; - font-size: 1.125rem; - line-height: 1.75rem; - color: var(--cd-text-color-mild); - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-navbar { - display: flex; - align-items: center; - border-radius: 1rem; - padding: 0 0.75rem; - font-size: 0.875rem; - font-weight: bold; - backdrop-filter: blur(4px); - background-color: var(--cd-nav-bg-color); - box-shadow: rgb(15, 15, 15) 0px 0px 0px 0px inset, - rgba(163, 163, 170, 0.3) 0px 0px 0px 1px inset, - rgba(255, 255, 255, 0.2) 0px 20px 25px -5px, - rgba(255, 255, 255, 0.2) 0px 8px 10px -6px; - - &:is(.dark *) { - box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px inset, - rgba(63, 63, 70, 0.3) 0px 0px 0px 1px inset, - rgba(0, 0, 0, 0.2) 0px 20px 25px -5px, - rgba(0, 0, 0, 0.2) 0px 8px 10px -6px; - } - - & a { - white-space: nowrap; - padding: 0.75rem; - } - & a, - & button { - opacity: 0.8; - transition: opacity 300ms ease-in-out, background 300ms ease-in-out; - border-radius: 4px; - } - & a:hover, - & button:hover { - opacity: 1; - background-color: var(--cd-nav-bg-color-hover); - } - & a svg { - height: 20px; - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-nav-top { - z-index: 1000; - width: 100%; - margin-top: 1rem; - - /* @media ((min-width: 1024px) and (min-height: 640px)) { - & { - position: sticky; - top: 1rem; - } - } */ - & .wrapper { - margin-left: auto; - margin-right: auto; - display: flex; - max-width: 100rem; - align-items: center; - padding-left: var(--cd-padding-left); - padding-right: var(--cd-padding-right); - } - - & .logo { - padding: 0.75rem; - margin-left: -0.75rem; - margin-right: auto; - background-color: transparent; - transition: background 300ms ease-in-out; - } - @media (min-width: 640px) { - & .logo { - border-radius: 4px; - backdrop-filter: blur(4px); - background-color: var(--cd-nav-bg-color); - } - } - - & .nav-links { - display: none; - } - @media (min-width: 768px) { - & .nav-links { - display: inline-flex; - } - } - & .nav-extra { - margin-left: 0.75rem; - } - & .nav-links > .themeswitch { - border: none; - outline: none; - margin-left: 0.25rem; - } - & .cd-toggle-sidebar { - font-size: 1rem; - margin-left: 0.75rem; - width: 4.5rem; - line-height: 1; - padding: 0.75rem 0.5rem; - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-nav-global { - /* position: sticky; */ - /* top: 0; */ - z-index: 0; - width: 12rem; - border-right-width: 1px; - border-color: rgb(228 228 231); - padding-right: 1rem; - padding-bottom: 2rem; - font-size: 0.875rem; - line-height: 1.2; - flex-shrink: 0; - /* - @media (min-height: 640px) { - & { - overflow-y: auto; - height: 100vh; - top: 3rem; - min-height: calc(100vh - 3rem); - } - } */ - - @media (min-width: 1536px) { - & { - font-size: 1rem; - line-height: 1.5rem; - width: 18rem; - } - } - &:is(.dark *) { - border-color: rgb(82 82 91); - } - - & nav { - display: flex; - width: 100%; - flex-direction: column; - padding-bottom: 3.5rem; - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-nav-local { - position: sticky; - top: 5rem; - z-index: 0; - width: 25rem; - height: calc(100vh - 6.5rem); - margin-right: -1rem; - overflow: hidden; - border-left-width: 1px; - border-color: rgb(228 228 231); - - &:is(.dark *) { - border-color: rgb(82 82 91); - } - & .wrapper { - position: absolute; - inset: 0; - overflow-y: auto; - overflow-x: hidden; - -ms-scroll-chaining: none; - overscroll-behavior: contain; - scroll-behavior: smooth; - padding: 1.5rem 0.25rem; - font-size: 0.9rem; - line-height: 1.2; - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-nav-mobile { - position: fixed; - left: 0; - top: 0; - height: 100vh; - width: 100%; - min-width: 360px; - max-width: 640px; - -ms-scroll-chaining: none; - overscroll-behavior: contain; - margin: 0; - padding: 0 0 4rem 0; - background-color: var(--cd-bg-color-hover); - color: var(--cd-text-color); - - transition: all 0.2s allow-discrete; - /* Final state of the exit animation */ - opacity: 0; - transform: translateX(-100%); - - &:popover-open { - opacity: 1; - transform: translateX(0); - } - /* Needs to be after the previous &:popover-open rule - to take effect, as the specificity is the same */ - @starting-style { - &:popover-open { - opacity: 0; - transform: translateX(-100%); - } - } - - @media (min-width: 640px) { - & { - border-right: 1px solid var(--cd-border-color); - } - } - & header { - margin: 1rem 0; - display: flex; - align-items: center; - padding-left: var(--cd-padding-left); - padding-right: var(--cd-padding-right); - } - & .logo { - margin-right: auto; - } - & .themeswitch { - border: none; - background: none; - outline: none; - } - & .cd-toggle-sidebar { - font-size: 1rem; - margin-left: 0.75rem; - width: 4.5rem; - line-height: 1; - padding: 0.75rem 0.5rem; - } - - & .toc { - margin-bottom: 1.25rem; - display: flex; - flex-direction: column; - -ms-scroll-chaining: none; - overscroll-behavior: contain; - padding-left: var(--cd-padding-left); - padding-right: var(--cd-padding-right); - font-size: 1rem; - line-height: 1.5rem; - } -} -/* Transition for the popover's backdrop. - ::backdrop cannot be nested */ -.cd-nav-mobile::backdrop { - transition: all 0.5s allow-discrete; - /* Final state of the exit animation */ - backdrop-filter: blur(0); - background-color: rgb(0 0 0 / 0%); -} -.cd-nav-mobile:popover-open::backdrop { - backdrop-filter: blur(2px); - background-color: rgb(0 0 0 / 15%); -} -@starting-style { - .cd-nav-mobile:popover-open::backdrop { - backdrop-filter: blur(0); - background-color: rgb(0 0 0 / 0%); - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-page-single > main { - margin: 0; - max-width: 100%; - padding: 0; -} - -.cd-page { - & .page-wrapper { - z-index: 10; - margin-left: auto; - margin-right: auto; - display: flex; - max-width: 100rem; - padding-top: 1rem; - padding-left: var(--cd-padding-left); - padding-right: var(--cd-padding-right); - padding-bottom: 1.5rem; - min-width: 360px; - } - & .page-wrapper > main { - width: 100%; - padding-top: 1rem; - } - @media (min-width: 640px) { - & { - padding-bottom: 1rem; - } - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-prevnext { - display: flex; - align-items: stretch; - width: 100%; - margin-top: 2rem; - padding-top: 2rem; - padding-bottom: 2rem; - padding-left: var(--cd-padding-left); - padding-right: var(--cd-padding-right); - border-top: 1px solid var(--cd-border-color); - font-family: var(--cd-font-sans); - - & a.prev, - & a.next { - display: flex; - align-items: center; - padding: 0.75rem 0.25rem; - text-decoration: none; - width: 50%; - border: 1px solid var(--cd-border-color); - color: var(--cd-text-color); - border-radius: 10px; - transition: all 0.2s ease-in; - } - & a.prev { - margin-right: 1.25rem; - justify-content: flex-start; - text-align: left; - } - & a.next { - margin-left: auto; - justify-content: flex-end; - text-align: right; - } - & a.prev:hover, - & a.next:hover { - border-color: rgb(113, 113, 122); - } - &:is(.dark *) a.prev:hover, - &:is(.dark *) a.next:hover { - border-color: rgb(150, 150, 150); - } - & .section { - font-size: 0.875rem; - line-height: 1; - color: rgb(113, 113, 122); - margin-bottom: 0.1rem; - } - &:is(.dark *) .section { - color: rgb(150, 150, 150); - } - & .title { - font-size: 1rem; - line-height: 1.1; - } - & i { - opacity: 0.8; - font-style: normal; - font-size: 1.4rem; - padding: 0 0.5rem; - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-theme-switch { - display: flex; - align-items: center; - justify-content: center; - -webkit-tap-highlight-color: transparent; - - & { - font-weight: 400; - height: 2.5rem; - width: 2.5rem; - flex-grow: 0; - padding: 0.2rem; - } - @media (min-width: 1024px) { - & { - width: auto; - } - } - & svg { - padding: 0.3rem; - margin: 0; - } - &:is(.dark *) svg { - padding: 0.1rem; - } - & .sun-and-moon { - pointer-events: none; - display: block; - height: 100%; - width: 100%; - } - & .sun { - transform-origin: center; - transform: scale(1, 1); - transform: translate3d(0, 0, 0); - fill: #3f3f46; - stroke: transparent; - } - &:hover .sun { - fill: #27272a; - } - &:focus-visible .sun { - fill: #27272a; - } - @media (prefers-reduced-motion: no-preference) { - & .sun { - transition-property: transform; - transition-timing-function: cubic-bezier(0.5, 1.25, 0.75, 1.25); - transition-duration: 0.5s; - } - } - & .sun:is(.dark *) { - transform: scale(1.75, 1).75; - fill: #e4e4e7; - } - &:hover .sun:is(.dark *) { - fill: #f4f4f5; - } - &:focus-visible .sun:is(.dark *) { - fill: #f4f4f5; - } - @media (prefers-reduced-motion: no-preference) { - & .sun:is(.dark *) { - transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); - transition-duration: 250ms; - } - } - & .sun-beams { - transform-origin: center; - stroke: #3f3f46; - stroke-width: 2; - } - &:hover .sun-beams { - stroke: #27272a; - } - &:focus-visible .sun-beams { - stroke: #27272a; - } - @media (prefers-reduced-motion: no-preference) { - & .sun-beams { - transition-property: transform, opacity; - transition-timing-function: cubic-bezier(0.5, 1.5, 0.75, 1.25); - transition-duration: 400ms; - } - } - & .sun-beams:is(.dark *) { - transform: translate3d(0, 0, 0); - transform: rotate(-25deg); - stroke: #e4e4e7; - opacity: 0; - } - &:hover .sun-beams:is(.dark *) { - stroke: #f4f4f5; - } - &:focus-visible .sun-beams:is(.dark *) { - stroke: #f4f4f5; - } - @media (prefers-reduced-motion: no-preference) { - & .sun-beams:is(.dark *) { - transition-duration: 150ms; - } - } - & .moon { - transform-origin: center; - fill: #52525b; - } - &:hover .moon { - fill: #71717a; - } - & .moon circle { - transform: translate3d(0, 0, 0); - } - @media (prefers-reduced-motion: no-preference) { - & .moon circle { - transition-property: transform; - transition-timing-function: cubic-bezier(0, 0, 0, 1); - transition-duration: 0.3s; - } - } - & .moon circle:is(.dark *) { - transform: translateX(-7px); - } - @media (prefers-reduced-motion: no-preference) { - & .moon circle:is(.dark *) { - transition-delay: 0.3s; - } - } - & .light-text, - & .dark-text { - padding: 0.5rem; - padding-left: 0; - display: none; - white-space: nowrap; - font-weight: bold; - text-align: left; - } - @media (min-width: 1024px) { - & .light-text { - display: block; - } - & .light-text:is(.dark *) { - display: none; - } - & .dark-text:is(.dark *) { - display: block; - } - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-toc { - & details, - & section { - margin-top: 1.5rem; - } - - & summary { - margin-bottom: 0.5rem; - font-weight: 600; - color: rgb(39 39 42); - } - & summary:is(.dark *) { - color: rgb(244 244 245); - } - - & h2 { - margin-bottom: 0.5rem; - font-weight: 600; - color: rgb(39 39 42); - } - & h2:is(.dark *) { - color: rgb(244 244 245); - } - - & .page { - border-left-width: 2px; - border-color: rgb(244 244 245); - padding-left: 0.5rem; - } - & .page:hover { - border-color: rgb(212 212 216); - } - - & .page:is(.dark *) { - border-color: rgb(63 63 70 / 0.5); - } - & .page:is(.dark *):hover { - border-color: rgb(161 161 170); - } - - & a { - position: relative; - display: flex; - align-items: center; - border-radius: 0.25rem; - border-width: 1px; - border-color: transparent; - line-height: 1.2; - margin: 0; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - color: rgb(63 63 70); - } - & a:hover { - color: rgb(0 0 0); - } - & a:is(.dark *) { - color: rgb(161 161 170); - } - & a:is(.dark *):hover { - color: rgb(244 244 245); - } - & .active a { - border-color: rgb(228 228 231); - background-color: rgb(244 244 245); - font-weight: bold; - color: rgb(39 39 42); - } - & .active:is(.dark *) a { - color: black; - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-toc-page { - margin-top: -0.25rem; - - & li { - position: relative; - display: flex; - align-items: center; - } - - & li::after { - content: ""; - display: block; - position: absolute; - inset: 0; - background-color: var(--cd-brand-color); - border-radius: 0.25rem; - opacity: 0; - transition: opacity 0.2s ease-in-out; - z-index: -1; - } - - & li:has(a.active)::after { - opacity: 0.15; - } - - & a { - display: flex; - align-items: center; - color: rgb(82 82 91); - padding: 0.3rem 0 0.3rem 0.5rem; - } - & a:is(.dark *) { - color: rgb(161 161 170); - } - & a:hover:not(.active) { - & span { - text-decoration: underline; - } - } - - & li.indent-0 a { - padding-left: 0rem; - font-size: smaller; - text-transform: uppercase; - font-weight: bold; - border-bottom-width: 1px; - } - & li.indent-1 a { - padding-left: 0rem; - font-weight: bold; - } - & li.indent-2 a { padding-left: 1rem; } - & li.indent-3 a { padding-left: 1.5rem; } - & li.indent-4 a { padding-left: 2rem; } - & li.indent-5 a { padding-left: 2.5rem; } - & li.indent-6 a { padding-left: 3rem; } - - & li a::before { - content: ""; - display: inline-flex; - align-items: center; - justify-content: right; - line-height: 1; - height: 8px; - width: 8px; - margin: 0 0.5rem 0 0.5rem; - flex-grow: 0; - flex-shrink: 0; - } - li.indent-2 a::before { content: "○" } - li.indent-3 a::before { content: "•" } - li.indent-4 a::before { content: "·" } - li.indent-5 a::before { content: "⁃" } - li.indent-6 a::before { content: "·" } - - & li a.active::before { - content: ""; - border-radius: 3px; - background-color: var(--cd-brand-color); - } -} - -/* ---------------------------------------------------------------------- */ - -.cd-nav-global, -.cd-nav-local, -.cd-nav-mobile { - display: none; -} -.cd-nav-mobile:popover-open, -.cd-nav-top .cd-toggle-sidebar { - display: block; -} - -@media (min-width: 924px) { - .cd-nav-mobile, - .cd-nav-top .cd-toggle-sidebar { - display: none; - } -} - -@media (min-width: 924px) { - .cd-nav-global { - display: block; - } -} - -@media (min-width: 1024px) { - .cd-page .page-wrapper > main { - margin-left: 2.5rem; - margin-right: 2.5rem; - } - .cd-nav-local { - display: block; - } -} |