diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-09-03 07:47:36 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-09-03 07:47:36 +0000 |
commit | 1f6a9795ed529247bb3370c5efeb009a81d30c8b (patch) | |
tree | b0bb57ba2ba39cb69b7426cbc73632d1d0186c79 /docs/static/theme.css | |
parent | Adding debian version 0.45+dfsg-1. (diff) | |
download | jinjax-1f6a9795ed529247bb3370c5efeb009a81d30c8b.tar.xz jinjax-1f6a9795ed529247bb3370c5efeb009a81d30c8b.zip |
Merging upstream version 0.46.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'docs/static/theme.css')
-rw-r--r-- | docs/static/theme.css | 1808 |
1 files changed, 1808 insertions, 0 deletions
diff --git a/docs/static/theme.css b/docs/static/theme.css new file mode 100644 index 0000000..8dad4aa --- /dev/null +++ b/docs/static/theme.css @@ -0,0 +1,1808 @@ +/* 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; + } +} |