diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index b0c09dc..132d7f0 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1,3 +1,2 @@ @use "./base.scss"; - -// put your custom CSS here! +@use "themes"; diff --git a/quartz/styles/themes/_index.scss b/quartz/styles/themes/_index.scss new file mode 100644 index 0000000..41931d3 --- /dev/null +++ b/quartz/styles/themes/_index.scss @@ -0,0 +1,1457 @@ +@use "sass:color"; +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +/* Quartz imports */ +@use "../variables.scss" as *; +/* quartz themes dark-only */ + +:root:root { + --background-modifier-border: var(--s-bg-transparent); + --background-modifier-border-focus: var(--s-green-primary-color); + --background-modifier-form-field: var(--color-base-25); + --background-modifier-hover: var(--s-hover-bg-color-green); + --background-primary: var(--s-bg-transparent); + --background-primary-alt: var(--s-bg-transparent); + --background-secondary: var(--s-bg-transparent); + --caret-color: #ff0000; + --color-accent: var(--s-green-primary-color); + --color-accent-1: hsl( + calc(var(--accent-h) - 3), + calc(var(--accent-s) * 1.02), + calc(var(--accent-l) * 1.15) + ); + --color-accent-2: hsl( + calc(var(--accent-h) - 5), + calc(var(--accent-s) * 1.05), + calc(var(--accent-l) * 1.29) + ); + --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); + --color-base-00: #1e1e1e; + --color-base-10: #242424; + --color-base-100: #dadada; + --color-base-20: #262626; + --color-base-25: #2a2a2a; + --color-base-30: #363636; + --color-base-35: #3f3f3f; + --color-base-40: #555555; + --color-base-50: #666666; + --color-base-70: #b3b3b3; + --color-blue: #027aff; + --color-blue-rgb: 2, 122, 255; + --color-cyan: #53dfdd; + --color-cyan-rgb: 83, 223, 221; + --color-green: #44cf6e; + --color-green-rgb: 68, 207, 110; + --color-orange: #e9973f; + --color-orange-rgb: 233, 151, 63; + --color-pink: #fa99cd; + --color-purple: #a882ff; + --color-purple-rgb: 168, 130, 255; + --color-red: #fb464c; + --color-red-rgb: 251, 70, 76; + --color-yellow: #e0de71; + --highlight-mix-blend-mode: darken; + --inline-title-color: white; + --interactive-accent: var(--s-green-primary-color); + --interactive-accent-hover: var(--yellow-faint); + --mono-rgb-100: 255, 255, 255; + --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), + 0px 30px 90px rgba(0, 0, 0, 0.2); + --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179), + 0px 15px 30px rgba(0, 0, 0, 0.3); + --text-accent: var(--s-green-secondary-color); + --text-accent-hover: var(--s-green-primary-color); + --text-faint: var(--platinum-faint); + --text-highlight-bg: #5b5721; + --text-normal: var(--platinum); + color-scheme: dark; + + .callout { + --callout-blend-mode: lighten; + } +} + +.darkmode { + display: none; +} + +/* latin-ext */ +@font-face { + font-family: "Figtree"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/figtree/v7/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_d_QG5XyEA25WTzZO_OSg.woff2) + format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, + U+0329, U+1D00-1DBF, 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: "Figtree"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/figtree/v7/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_d_QG5ZyEA25WTzZO8.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* cyrillic-ext */ +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVk6OThhvAWV8.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOVk6OThhvAWV8.woff2) + format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek */ +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOVOVk6OThhvAWV8.woff2) + format("woff2"); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNVOVk6OThhvAWV8.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, + U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNFOVk6OThhvAWV8.woff2) + format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, + U+0329, U+1D00-1DBF, 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: "JetBrains Mono"; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOVk6OThhvA.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +:root { + --accent-h: 110; + --accent-l: 77%; + --accent-s: 90; + --level-1: rgb(191, 96, 107); + --level-2: rgb(207, 134, 110); + --level-3: rgb(235, 203, 140); + --level-4: rgb(153, 190, 141); + --level-5: rgb(179, 138, 163); + --level-6: rgb(155, 180, 196); + --platinum: #c7c7c7; + --platinum-faint: #b2b2b8; + --s-bg-primary-color: #141414; + --s-bg-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiPjxkZWZzPjxmaWx0ZXIgaWQ9Im5ubm9pc2UtZmlsdGVyIiB4PSItMjAlIiB5PSItMjAlIiB3aWR0aD0iMTQwJSIgaGVpZ2h0PSIxNDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHByaW1pdGl2ZVVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJsaW5lYXJSR0IiPgoJPGZlVHVyYnVsZW5jZSB0eXBlPSJ0dXJidWxlbmNlIiBiYXNlRnJlcXVlbmN5PSIwLjIiIG51bU9jdGF2ZXM9IjQiIHNlZWQ9IjE1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlc3VsdD0idHVyYnVsZW5jZSI+PC9mZVR1cmJ1bGVuY2U+Cgk8ZmVTcGVjdWxhckxpZ2h0aW5nIHN1cmZhY2VTY2FsZT0iNDAiIHNwZWN1bGFyQ29uc3RhbnQ9IjAuNzUiIHNwZWN1bGFyRXhwb25lbnQ9IjIwIiBsaWdodGluZy1jb2xvcj0iI2JlYjdkZiIgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBpbj0idHVyYnVsZW5jZSIgcmVzdWx0PSJzcGVjdWxhckxpZ2h0aW5nIj4KICAgIAkJPGZlRGlzdGFudExpZ2h0IGF6aW11dGg9IjMiIGVsZXZhdGlvbj0iMTAwIj48L2ZlRGlzdGFudExpZ2h0PgogIAk8L2ZlU3BlY3VsYXJMaWdodGluZz4KICAKPC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9yZWN0PjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSIjYmViN2RmIiBmaWx0ZXI9InVybCgjbm5ub2lzZS1maWx0ZXIpIj48L3JlY3Q+PC9zdmc+"); + --s-bg-transparent: transparent; + --s-green-primary-color: #a1f98f; + --s-green-secondary-color: #36a372; + --s-hover-bg-color-green: #a1f98f24; + --yellow-faint: #ffe699; +} +body { + --accent-h: 258; + --accent-l: 66%; + --accent-s: 88%; + --background-modifier-border: var(--color-base-30); + --background-modifier-border-focus: var(--color-base-40); + --background-modifier-border-hover: var(--color-base-35); + --background-modifier-form-field: var(--color-base-00); + --background-modifier-hover: rgba(var(--mono-rgb-100), 0.067); + --background-primary: var(--color-base-00); + --background-primary-alt: var(--color-base-10); + --background-secondary: var(--color-base-20); + --bold-color: inherit; + --bold-modifier: 200; + --bold-weight: calc(var(--font-weight) + var(--bold-modifier)); + --border-width: 1px; + --callout-blend-mode: var(--highlight-mix-blend-mode); + --callout-border-opacity: 0.25; + --callout-border-width: 0px; + --callout-bug: var(--s-color-red, var(--color-red-rgb)); + --callout-content-background: transparent; + --callout-content-padding: 0; + --callout-default: var(--s-color-blue, var(--color-blue-rgb)); + --callout-error: var(--s-color-red, var(--color-red-rgb)); + --callout-example: var(--s-color-purple, var(--color-purple-rgb)); + --callout-fail: var(--s-color-red, var(--color-red-rgb)); + --callout-important: var(--s-color-bright-blue, var(--color-cyan-rgb)); + --callout-info: var(--s-color-blue, var(--color-blue-rgb)); + --callout-question: var(--s-color-orange, var(--color-orange-rgb)); + --callout-quote: var(--s-color-gray, var(--gray)); + --callout-radius: var(--radius-s); + --callout-success: var(--s-color-green, var(--color-green-rgb)); + --callout-summary: var(--s-color-bright-blue, var(--color-cyan-rgb)); + --callout-tip: var(--s-color-bright-blue, var(--color-cyan-rgb)); + --callout-title-color: inherit; + --callout-title-padding: 0; + --callout-title-size: inherit; + --callout-title-weight: calc(var(--font-weight) + var(--bold-modifier)); + --callout-todo: var(--s-color-blue, var(--color-blue-rgb)); + --callout-warning: var(--s-color-orange, var(--color-orange-rgb)); + --caret-color: var(--text-normal); + --checkbox-border-color: var(--text-faint); + --checkbox-border-color-hover: var(--text-muted); + --checkbox-color: var(--interactive-accent); + --checkbox-color-hover: var(--interactive-accent-hover); + --checkbox-marker-color: var(--background-primary); + --checkbox-radius: var(--radius-s); + --checkbox-size: var(--font-text-size); + --code-background: var(--background-primary-alt); + --code-border-color: var(--background-modifier-border); + --code-border-width: 0px; + --code-comment: var(--text-faint); + --code-function: var(--color-yellow); + --code-important: var(--color-orange); + --code-keyword: var(--color-pink); + --code-normal: var(--text-normal); + --code-property: var(--color-cyan); + --code-punctuation: var(--text-muted); + --code-radius: var(--radius-s); + --code-size: var(--font-smaller); + --code-string: var(--color-green); + --code-tag: var(--color-red); + --code-value: var(--color-purple); + --code-white-space: pre-wrap; + --collapse-icon-color: var(--text-faint); + --collapse-icon-color-collapsed: var(--text-accent); + --cursor: default; + --cursor-link: pointer; + --font-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, + "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + --font-interface: var(--font-interface-override), var(--font-interface-theme), + var(--default-font, "??"), var(--font-default); + --font-interface-override: "??"; + --font-interface-theme: "Figtree", "azer"; + --font-medium: 500; + --font-monospace: var(--font-monospace-override), var(--font-monospace-theme), + var(--font-monospace-default); + --font-monospace-default: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono", + "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace; + --font-monospace-override: "??"; + --font-monospace-theme: "JetBrains Mono", "azer"; + --font-normal: 400; + --font-print: var(--font-print-override), var(--font-text-override), var(--font-text-theme), + "Arial"; + --font-print-override: "??"; + --font-smaller: 0.875em; + --font-text: var(--font-print); + --font-text-override: "??"; + --font-text-size: 16px; + --font-text-theme: "Figtree", "azer"; + --font-ui-medium: 15px; + --font-ui-small: 13px; + --font-ui-smaller: 12px; + --font-weight: var(--font-normal); + --graph-line: var(--color-base-35, var(--background-modifier-border-focus)); + --graph-node: var(--text-muted); + --graph-node-tag: var(--color-green); + --graph-node-unresolved: var(--text-faint); + --graph-text: var(--text-normal); + --gray: 158, 158, 158; + --h1-color: var(--level-1); + --h1-font: inherit; + --h1-line-height: 1.2; + --h1-size: 1.802em; + --h1-style: normal; + --h1-variant: normal; + --h1-weight: 700; + --h2-color: var(--level-2); + --h2-font: inherit; + --h2-line-height: 1.2; + --h2-size: 1.602em; + --h2-style: normal; + --h2-variant: normal; + --h2-weight: 600; + --h3-color: var(--level-3); + --h3-font: inherit; + --h3-line-height: 1.3; + --h3-size: 1.424em; + --h3-style: normal; + --h3-variant: normal; + --h3-weight: 600; + --h4-color: var(--level-4); + --h4-font: inherit; + --h4-line-height: 1.4; + --h4-size: 1.266em; + --h4-style: normal; + --h4-variant: normal; + --h4-weight: 600; + --h5-color: var(--level-5); + --h5-font: inherit; + --h5-line-height: var(--line-height-normal); + --h5-size: 1.125em; + --h5-style: normal; + --h5-variant: normal; + --h5-weight: 600; + --h6-color: var(--level-6); + --h6-font: inherit; + --h6-line-height: var(--line-height-normal); + --h6-size: 1em; + --h6-style: normal; + --h6-variant: normal; + --h6-weight: 600; + --hr-color: var(--background-modifier-border); + --hr-thickness: 2px; + --icon-color: var(--text-muted); + --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12); + --indentation-guide-width: 1px; + --inline-title-color: var(--h1-color); + --inline-title-font: var(--h1-font); + --input-border-width: 1px; + --input-height: 30px; + --input-radius: 5px; + --interactive-accent: var(--color-accent-1); + --interactive-accent-hover: var(--color-accent-2); + --interactive-accent-hsl: var(--color-accent-hsl); + --italic-color: inherit; + --layer-popover: 30; + --line-height-normal: 1.5; + --line-height-tight: 1.3; + --link-color: var(--text-accent); + --link-color-hover: var(--text-accent-hover); + --link-external-color: var(--text-accent); + --link-external-color-hover: var(--text-accent-hover); + --link-external-filter: none; + --link-weight: var(--font-weight); + --metadata-input-text-color: var(--text-normal); + --nav-heading-color: var(--text-normal); + --nav-heading-weight: var(--font-medium); + --nav-indentation-guide-color: var(--indentation-guide-color); + --nav-indentation-guide-width: var(--indentation-guide-width); + --nav-item-background-active: var(--background-modifier-hover); + --nav-item-children-margin-start: var(--size-4-3); + --nav-item-children-padding-start: var(--size-2-2); + --nav-item-color: var(--text-muted); + --nav-item-color-active: var(--text-normal); + --nav-item-padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-6); + --nav-item-size: var(--font-ui-small); + --nav-item-weight: inherit; + --nav-item-weight-active: inherit; + --p-spacing: 1rem; + --popover-max-height: 95vh; + --prompt-border-color: var(--color-base-40, var(--background-modifier-border-focus)); + --prompt-border-width: var(--border-width); + --prompt-input-height: 40px; + --radius-l: 12px; + --radius-m: 8px; + --radius-s: 4px; + --search-icon-color: var(--text-muted); + --size-2-1: 2px; + --size-2-2: 4px; + --size-4-1: 4px; + --size-4-12: 48px; + --size-4-2: 8px; + --size-4-3: 12px; + --size-4-4: 16px; + --size-4-6: 24px; + --tag-background: hsla(var(--interactive-accent-hsl), 0.1); + --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2); + --tag-border-color: hsla(var(--interactive-accent-hsl), 0.15); + --tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15); + --tag-border-width: 0px; + --tag-color: var(--text-accent); + --tag-color-hover: var(--text-accent); + --tag-decoration: none; + --tag-decoration-hover: none; + --tag-radius: 2em; + --tag-weight: inherit; + --text-accent: var(--color-accent); + --text-accent-hover: var(--color-accent-2); + --text-faint: var(--color-base-50); + --text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.4); + --text-highlight-bg-rgb: 255, 208, 0; + --text-muted: var(--color-base-70); + --text-normal: var(--color-base-100); + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-user-select: none; + background: var(--s-bg-svg); + background-color: var(--s-bg-primary-color); + caret-color: var(--caret-color); + color: var(--text-normal); + contain: initial; + font-family: var(--font-interface); + font-size: var(--font-ui-medium); + height: 100%; + line-height: var(--line-height-tight); + margin: 0; + overflow: initial; + overscroll-behavior: none; + padding: 0; + padding-top: 0; + text-rendering: optimizeLegibility; + user-select: none; + width: 100%; +} +/* START DARK */ +:root, +html { + --background-modifier-border: var(--s-bg-transparent); + --background-modifier-border-focus: var(--s-green-primary-color); + --background-modifier-form-field: var(--color-base-25); + --background-modifier-hover: var(--s-hover-bg-color-green); + --background-primary: var(--s-bg-transparent); + --background-primary-alt: var(--s-bg-transparent); + --background-secondary: var(--s-bg-transparent); + --caret-color: #ff0000; + --color-accent: var(--s-green-primary-color); + --color-accent-1: hsl( + calc(var(--accent-h) - 3), + calc(var(--accent-s) * 1.02), + calc(var(--accent-l) * 1.15) + ); + --color-accent-2: hsl( + calc(var(--accent-h) - 5), + calc(var(--accent-s) * 1.05), + calc(var(--accent-l) * 1.29) + ); + --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); + --color-base-00: #1e1e1e; + --color-base-10: #242424; + --color-base-100: #dadada; + --color-base-20: #262626; + --color-base-25: #2a2a2a; + --color-base-30: #363636; + --color-base-35: #3f3f3f; + --color-base-40: #555555; + --color-base-50: #666666; + --color-base-70: #b3b3b3; + --color-blue: #027aff; + --color-blue-rgb: 2, 122, 255; + --color-cyan: #53dfdd; + --color-cyan-rgb: 83, 223, 221; + --color-green: #44cf6e; + --color-green-rgb: 68, 207, 110; + --color-orange: #e9973f; + --color-orange-rgb: 233, 151, 63; + --color-pink: #fa99cd; + --color-purple: #a882ff; + --color-purple-rgb: 168, 130, 255; + --color-red: #fb464c; + --color-red-rgb: 251, 70, 76; + --color-yellow: #e0de71; + --highlight-mix-blend-mode: darken; + --inline-title-color: white; + --interactive-accent: var(--s-green-primary-color); + --interactive-accent-hover: var(--yellow-faint); + --mono-rgb-100: 255, 255, 255; + --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), + 0px 30px 90px rgba(0, 0, 0, 0.2); + --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179), + 0px 15px 30px rgba(0, 0, 0, 0.3); + --text-accent: var(--s-green-secondary-color); + --text-accent-hover: var(--s-green-primary-color); + --text-faint: var(--platinum-faint); + --text-highlight-bg: #5b5721; + --text-normal: var(--platinum); + color-scheme: dark; + code[data-theme*=" "] { + color: var(--shiki-dark); + background-color: var(--shiki-dark-bg); + } + code[data-theme*=" "] span { + color: var(--shiki-dark); + } +} +/* END DARK */ +/* CALLOUTS */ +:root, +html { + .callout { + --callout-color: var(--callout-default); + background-color: rgba(var(--callout-color), 0.1); + border-color: rgba(var(--callout-color), var(--callout-border-opacity)); + border-radius: var(--callout-radius); + border-style: solid; + border-width: var(--callout-border-width); + margin: 1em 0; + mix-blend-mode: var(--callout-blend-mode); + overflow: hidden; + padding: var(--size-4-3); + background-color: rgba(var(--callout-color), 0.1); + overflow-x: auto; + overflow-y: hidden; + &[data-callout] { + --callout-color: var(--callout-default); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="abstract"] { + --callout-color: var(--callout-summary); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="summary"] { + --callout-color: var(--callout-summary); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="tldr"] { + --callout-color: var(--callout-summary); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="info"] { + --callout-color: var(--callout-info); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="todo"] { + --callout-color: var(--callout-todo); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="important"] { + --callout-color: var(--callout-important); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="tip"] { + --callout-color: var(--callout-tip); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="hint"] { + --callout-color: var(--callout-tip); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="success"] { + --callout-color: var(--callout-success); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="check"] { + --callout-color: var(--callout-success); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="done"] { + --callout-color: var(--callout-success); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="question"] { + --callout-color: var(--callout-question); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="help"] { + --callout-color: var(--callout-question); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="faq"] { + --callout-color: var(--callout-question); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="warning"] { + --callout-color: var(--callout-warning); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="caution"] { + --callout-color: var(--callout-warning); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="attention"] { + --callout-color: var(--callout-warning); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="failure"] { + --callout-color: var(--callout-fail); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="fail"] { + --callout-color: var(--callout-fail); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="missing"] { + --callout-color: var(--callout-fail); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="danger"] { + --callout-color: var(--callout-error); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="error"] { + --callout-color: var(--callout-error); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="bug"] { + --callout-color: var(--callout-bug); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="example"] { + --callout-color: var(--callout-example); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="quote"] { + --callout-color: var(--callout-quote); + background-color: rgba(var(--callout-color), 0.1); + } + &[data-callout="cite"] { + --callout-color: var(--callout-quote); + background-color: rgba(var(--callout-color), 0.1); + } + } + .callout-title { + align-items: flex-start; + color: rgb(var(--callout-color)); + display: flex; + font-size: var(--callout-title-size); + gap: var(--size-4-1); + line-height: var(--line-height-tight); + padding: var(--callout-title-padding); + & > .callout-title-inner > p { + --font-weight: var(--callout-title-weight); + color: var(--callout-title-color); + font-weight: var(--font-weight); + } + .callout-title-inner { + --font-weight: var(--callout-title-weight); + color: var(--callout-title-color); + font-weight: var(--font-weight); + } + } + & > .callout-content { + background-color: var(--callout-content-background); + overflow-x: auto; + padding: var(--callout-content-padding); + } +} +body { + --quartz-text-highlight: var(--text-highlight-bg, var(--background-modifier-hover)) !important; + background-color: var(--background-primary); + section, + .page > #quartz-body .sidebar { + &.left, + &.left:has(.explorer), + &.right { + background-color: var(--background-primary); + } + } + .highlight, + ::selection, + ::-moz-selection { + background: var(--quartz-text-highlight, var(--tertiary)); + } + /* LINKS */ + a, + footer a { + --font-weight: var(--link-weight); + color: var(--text-a, var(--link-color)); + font-weight: var(--link-weight); + outline: none; + /* text-decoration-line: var(--link-decoration); */ + /* text-decoration-thickness: var(--link-decoration-thickness); */ + cursor: var(--cursor-link); + transition: opacity 0.15s ease-in-out; + background-position: center right; + background-repeat: no-repeat; + &:hover { + color: var(--text-a-hover, var(--link-color-hover)); + /* text-decoration-line: var(--link-decoration-hover); */ + } + &.internal { + color: var(--text-a, var(--link-color)); + background-color: color-mix(in srgb, var(--text-a, var(--link-color)), #0000 85%); + &.tag-link { + --highlight-fallback: 258, 88%, 66%; + color: var(--tag-color, var(--text-accent)); + text-decoration: var(--tag-decoration, none); + background-color: var( + --tag-background, + hsla( + var(--interactive-accent-hsl, var(--color-accent-hsl, var(--highlight-fallback))), + 0.1 + ) + ); + &:hover { + color: var(--tag-color-hover, var(--text-accent)); + text-decoration: var(--tag-decoration-hover, none); + background-color: var( + --tag-background-hover, + hsla(var(--interactive-accent-hsl, var(--highlight-fallback)), 0.2) + ); + } + } + } + &.external { + color: var(--link-external-color); + /* text-decoration-line: var(--link-external-decoration); */ + background-position: center right; + background-repeat: no-repeat; + background-image: linear-gradient(transparent, transparent); + background-color: transparent; + /* background-size: 13px; */ + /* padding-inline-end: 16px; */ + /* background-position-y: 4px; */ + cursor: var(--cursor-link); + filter: var(--link-external-filter); + transition: opacity 0.15s ease-in-out; + &:hover { + color: var(--link-external-color-hover); + /* text-decoration-line: var(--link-external-decoration-hover); */ + } + } + } + /* TAGS */ + a.tag { + background-color: var(--tag-background); + border: var(--tag-border-width) solid var(--tag-border-color); + border-radius: var(--tag-radius); + color: var(--tag-color); + /* font-size: var(--tag-size); */ + font-weight: var(--tag-weight); + /* text-decoration: var(--tag-decoration); */ + /* padding: var(--tag-padding-y) var(--tag-padding-x); */ + /* line-height: 1; */ + &:hover { + background-color: var(--tag-background-hover); + border: var(--tag-border-width) solid var(--tag-border-color-hover); + color: var(--tag-color-hover); + text-decoration: var(--tag-decoration-hover); + } + } + input[type="checkbox"] { + appearance: none; + appearance: none; + border-radius: var(--checkbox-radius); + border: 1px solid var(--checkbox-border-color); + flex-shrink: 0; + padding: 0; + margin: 0; + margin-inline-end: 6px; + width: var(--checkbox-size); + height: var(--checkbox-size); + position: relative; + transition: box-shadow 0.15s ease-in-out; + } + input[type="checkbox"]:hover, + input[type="checkbox"]:active, + input[type="checkbox"]:focus { + outline: 0; + border-color: var(--checkbox-border-color-hover); + } + input[type="checkbox"]:focus-visible { + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); + } + input[type="checkbox"]:checked:after { + content: ""; + top: -1px; + inset-inline-start: -1px; + position: absolute; + width: var(--checkbox-size); + height: var(--checkbox-size); + display: block; + background-color: var(--checkbox-marker-color); + mask-position: 52% 52%; + mask-size: 65%; + mask-repeat: no-repeat; + mask-image: url('data:image/svg+xml; utf8, '); + } + input[type="checkbox"]:checked { + background-color: var(--checkbox-color); + border-color: var(--checkbox-color); + } + @media (hover: hover) { + input[type="checkbox"]:checked:hover { + background-color: var(--checkbox-color-hover); + border-color: var(--checkbox-color-hover); + } + } + input[type="checkbox"][data-indeterminate="true"]:not(:checked):after { + content: ""; + position: absolute; + top: calc(var(--checkbox-size) / 2 - 2px); + width: calc(var(--checkbox-size) - 6px); + left: 0; + right: 0; + margin: 0 auto; + height: 2px; + display: block; + border-radius: 2px; + background-color: var(--text-normal); + } + /* HEADINGS */ + h1 { + --font-weight: var(--h1-weight); + color: var(--h1-color); + font-family: var(--h1-font); + font-size: var(--h1-size); + font-style: var(--h1-style); + font-variant: var(--h1-variant); + font-weight: var(--font-weight); + letter-spacing: -0.015em; + line-height: var(--h1-line-height); + margin-block-end: var(--p-spacing); + margin-block-start: var(--p-spacing); + } + h1 a { + --link-weight: var(--h1-weight); + } + h2 { + --font-weight: var(--h2-weight); + color: var(--h2-color); + font-family: var(--h2-font); + font-size: var(--h2-size); + font-style: var(--h2-style); + font-variant: var(--h2-variant); + font-weight: var(--font-weight); + letter-spacing: -0.015em; + line-height: var(--h2-line-height); + margin-block-end: var(--p-spacing); + margin-block-start: var(--p-spacing); + } + h2 a { + --link-weight: var(--h2-weight); + } + h3 { + --font-weight: var(--h3-weight); + color: var(--h3-color); + font-family: var(--h3-font); + font-size: var(--h3-size); + font-style: var(--h3-style); + font-variant: var(--h3-variant); + font-weight: var(--font-weight); + letter-spacing: -0.015em; + line-height: var(--h3-line-height); + margin-block-end: var(--p-spacing); + margin-block-start: var(--p-spacing); + } + h3 a { + --link-weight: var(--h3-weight); + } + h4 { + --font-weight: var(--h4-weight); + color: var(--h4-color); + font-family: var(--h4-font); + font-size: var(--h4-size); + font-style: var(--h4-style); + font-variant: var(--h4-variant); + font-weight: var(--font-weight); + letter-spacing: 0.015em; + line-height: var(--h4-line-height); + margin-block-end: var(--p-spacing); + margin-block-start: var(--p-spacing); + } + h4 a { + --link-weight: var(--h4-weight); + } + h5 { + --font-weight: var(--h5-weight); + color: var(--h5-color); + font-family: var(--h5-font); + font-size: var(--h5-size); + font-style: var(--h5-style); + font-variant: var(--h5-variant); + font-weight: var(--font-weight); + letter-spacing: 0.015em; + line-height: var(--h5-line-height); + margin-block-end: var(--p-spacing); + margin-block-start: var(--p-spacing); + } + h5 a { + --link-weight: var(--h5-weight); + } + h6 { + --font-weight: var(--h6-weight); + color: var(--h6-color); + font-family: var(--h6-font); + font-size: var(--h6-size); + font-style: var(--h6-style); + font-variant: var(--h6-variant); + font-weight: var(--font-weight); + letter-spacing: 0.015em; + line-height: var(--h6-line-height); + margin-block-end: var(--p-spacing); + margin-block-start: var(--p-spacing); + } + h6 a { + --link-weight: var(--h6-weight); + } + /* CODE */ + pre { + background-color: var(--code-background); + border: var(--code-border-width) solid var(--code-border-color); + border-radius: var(--code-radius); + min-height: 38px; + overflow-x: auto; + padding: var(--size-4-3) var(--size-4-4); + position: relative; + white-space: var(--code-white-space); + white-space: pre; + & > code { + background-color: transparent; + border: none; + padding: 0; + } + } + code { + -webkit-box-decoration-break: clone; + background-color: var(--code-background); + border: var(--code-border-width) solid var(--code-border-color); + border-radius: var(--code-radius); + color: var(--code-normal); + font-family: var(--font-monospace); + font-size: var(--code-size); + padding: 0.15em 0.3em; + background-color: var(--code-background); + //color: var(--code-color); + span[style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"] { + //color: var(--code-value) !important; + color: var(--color-purple) !important; + } + span[style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"] { + //color: var(--code-function) !important; + color: var(--color-blue) !important; + } + span[style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"] { + //color: var(--code-string) !important; + color: var(--color-cyan) !important; + } + span[style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;"] { + //color: var(--code-property) !important; + color: var(--code-yellow) !important; + } + span[style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"] { + //color: var(--code-normal) !important; + color: var(--code-normal) !important; + } + span[style="--shiki-light:#586069;--shiki-dark:#D1D5DA;"] { + //color: var(--code-punctuation) !important; + color: var(--text-muted) !important; + } + span[style="--shiki-light:#F6F8FA;--shiki-dark:#2F363D;"] { + //color: var(--code-comment) !important; + color: var(--text-faint) !important; + } + span[style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"] { + //color: var(--code-comment) !important; + color: var(--code-comment) !important; + } + span[style="--shiki-light:#22863A;--shiki-dark:#85E89D;"] { + //color: var(--code-tag) !important; + color: var(--color-green) !important; + } + span[style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"] { + //color: var(--code-important) !important; + color: var(--color-orange) !important; + } + span[style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;"] { + //color: var(--text-operator) !important; + color: var(--color-pink) !important; + } + span[style="--shiki-light:#D73A49;--shiki-dark:#F97583;"] { + //color: var(--code-keyword) !important; + color: var(--color-red) !important; + } + } + .clipboard-button { + background-color: var(--s-hover-bg-color-green); + box-shadow: none; + color: var(--text-muted); + cursor: pointer; + font-family: var(--font-interface); + font-size: var(--font-ui-smaller); + height: auto; + inset-inline-end: 0; + margin: 6px; + padding: 6px 8px; + position: absolute; + top: 0; + &:hover { + background-color: var(--background-modifier-hover); + } + & > svg { + fill: var(--search-icon-color, var(--text-muted, var(--darkgray))); + } + } + /* METADATA */ + .content-meta { + color: var(--metadata-input-text-color); + } + /* BREADCRUMBS */ + .breadcrumbs-element p { + color: var(--text-faint); + } + /* BACKLINKS */ + .backlinks { + h3 { + --font-weight: var(--h3-weight); + color: var(--h3-color); + font-family: var(--h3-font); + font-size: var(--h3-size); + font-style: var(--h3-style); + font-variant: var(--h3-variant); + font-weight: var(--font-weight); + letter-spacing: -0.015em; + line-height: var(--h3-line-height); + margin-block-end: var(--p-spacing); + margin-block-start: var(--p-spacing); + } + ul li { + color: var(--nav-heading-color); + font-weight: var(--nav-heading-weight); + } + } + /* EXPLORER */ + .explorer { + @media all and ($mobile) { + &:not(.collapsed) > .explorer-content { + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + } + } + .explorer-content { + @media all and ($mobile) { + background-color: var(--background-primary); + } + .folder-container { + --folder-closed-icon: url('data:image/svg+xml;utf8,'); + --folder-open-icon: url('data:image/svg+xml;utf8,'); + color: var(--icon-color); + text-overflow: ellipsis; + position: relative; + & > svg { + opacity: 0.001; + position: absolute; + } + &:before { + width: 16px; + height: 16px; + min-width: 16px; + min-height: 16px; + display: flex; + align-self: center; + background: var(--icon-color); + content: ""; + } + & > div { + width: 100%; + } + } + li:has(> .folder-outer:not(.open)) > .folder-container:before { + background: var(--collapse-icon-color-collapsed, var(--icon-color)); + mask-image: var(--folder-closed-icon); + -webkit-mask-image: var(--folder-closed-icon); + } + li:has(> .folder-outer.open) > .folder-container:before { + background: var(--collapse-icon-color, var(--icon-color)); + mask-image: var(--folder-open-icon); + -webkit-mask-image: var(--folder-open-icon); + } + .folder-outer > ul.content { + border-inline-start: var(--nav-indentation-guide-width) dashed + var(--nav-indentation-guide-color); + margin-bottom: 1px; + margin-inline-start: var( + --nav-item-children-margin-start, + var(--nav-item-children-margin-left) + ); + padding-inline-start: var( + --nav-item-children-padding-start, + var(--nav-item-children-padding-left) + ); + } + ul.explorer-ul li { + text-overflow: ellipsis; + position: relative; + a { + border-radius: var(--radius-s); + color: var(--nav-item-color); + cursor: var(--cursor); + display: flex; + font-size: var(--nav-item-size); + font-weight: var(--nav-item-weight); + line-height: var(--line-height-tight); + margin-bottom: var(--size-2-1); + padding: var(--nav-item-padding); + &.active, + &:hover { + background-color: var(--nav-item-background-active); + color: var(--nav-item-color-active); + font-weight: var(--nav-item-weight-active); + } + &[data-for$="/index"] { + padding-inline-start: 8px; + } + padding-inline-start: 0; + } + > a:before { + --file-icon: url('data:image/svg+xml;utf8,'); + width: 16px; + height: 16px; + min-width: 16px; + min-height: 16px; + content: ""; + display: flex; + align-self: center; + background: var(--icon-color); + mask-image: var(--file-icon); + -webkit-mask-image: var(--file-icon); + margin-inline-end: 8px; + } + } + } + } + /* TOC */ + .toc { + h3 { + --font-weight: var(--h3-weight); + color: var(--h3-color); + font-family: var(--h3-font); + font-size: var(--h3-size); + font-style: var(--h3-style); + font-variant: var(--h3-variant); + font-weight: var(--font-weight); + letter-spacing: -0.015em; + line-height: var(--h3-line-height); + margin-block-end: var(--p-spacing); + margin-block-start: var(--p-spacing); + } + ul.toc-content.overflow { + li, + li > a { + color: var(--nav-item-color); + font-weight: var(--nav-item-weight); + font-size: var(--nav-item-size); + } + } + } + .backlinks, + .explorer, + .graph, + .toc { + h3 { + --font-weight: var(--h3-weight); + color: var(--h3-color); + font-family: var(--h3-font); + font-size: var(--h3-size); + font-style: var(--h3-style); + font-variant: var(--h3-variant); + font-weight: var(--font-weight); + letter-spacing: -0.015em; + line-height: var(--h3-line-height); + margin-block-end: var(--p-spacing); + margin-block-start: var(--p-spacing); + min-height: calc(2 * var(--p-spacing) + var(--h3-line-height)); + } + } + /* ICONS */ + button.readermode { + & > svg { + display: none; + } + /* lucide book-open icon */ + --readermode-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvb2stb3Blbi1pY29uIGx1Y2lkZS1ib29rLW9wZW4iPjxwYXRoIGQ9Ik0xMiA3djE0Ii8+PHBhdGggZD0iTTMgMThhMSAxIDAgMCAxLTEtMVY0YTEgMSAwIDAgMSAxLTFoNWE0IDQgMCAwIDEgNCA0IDQgNCAwIDAgMSA0LTRoNWExIDEgMCAwIDEgMSAxdjEzYTEgMSAwIDAgMS0xIDFoLTZhMyAzIDAgMCAwLTMgMyAzIDMgMCAwIDAtMy0zeiIvPjwvc3ZnPg=="); + background: var(--icon-color) !important; + mask-image: var(--readermode-icon); + -webkit-mask-image: var(--readermode-icon); + width: 24px; + height: 24px; + } + button.global-graph-icon { + & > svg { + display: none; + } + /* lucide git-fork icon */ + --graph-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdpdC1mb3JrLWljb24gbHVjaWRlLWdpdC1mb3JrIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjE4IiByPSIzIi8+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjMiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjYiIHI9IjMiLz48cGF0aCBkPSJNMTggOXYyYzAgLjYtLjQgMS0xIDFIN2MtLjYgMC0xLS40LTEtMVY5Ii8+PHBhdGggZD0iTTEyIDEydjMiLz48L3N2Zz4="); + background: var(--icon-color) !important; + mask-image: var(--graph-icon); + -webkit-mask-image: var(--graph-icon); + width: 24px; + height: 24px; + } + button.darkmode { + & > svg { + display: none !important; + } + /* lucide moon icon */ + --moon-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1vb24taWNvbiBsdWNpZGUtbW9vbiI+PHBhdGggZD0iTTEyIDNhNiA2IDAgMCAwIDkgOSA5IDkgMCAxIDEtOS05WiIvPjwvc3ZnPg=="); + /* lucide sun icon */ + --sun-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXN1bi1pY29uIGx1Y2lkZS1zdW4iPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQiLz48cGF0aCBkPSJNMTIgMnYyIi8+PHBhdGggZD0iTTEyIDIwdjIiLz48cGF0aCBkPSJtNC45MyA0LjkzIDEuNDEgMS40MSIvPjxwYXRoIGQ9Im0xNy42NiAxNy42NiAxLjQxIDEuNDEiLz48cGF0aCBkPSJNMiAxMmgyIi8+PHBhdGggZD0iTTIwIDEyaDIiLz48cGF0aCBkPSJtNi4zNCAxNy42Ni0xLjQxIDEuNDEiLz48cGF0aCBkPSJtMTkuMDcgNC45My0xLjQxIDEuNDEiLz48L3N2Zz4="); + background: var(--icon-color) !important; + width: 24px; + height: 24px; + } + .explorer svg, + button.toc-header .fold, + .global-graph-icon, + .readermode, + .darkmode { + color: var(--icon-color); + stroke: var(--icon-color); + } + /* SEARCH */ + .search { + & > .search-button { + -webkit-app-region: no-drag; + background: var(--background-modifier-form-field); + border: var(--input-border-width) solid var(--background-modifier-border); + border-radius: var(--input-radius); + color: var(--text-normal); + font-family: inherit; + font-size: var(--font-normal); + height: var(--input-height); + outline: none; + padding: var(--size-4-1) var(--size-4-2); + svg { + color: var(--search-icon-color, var(--text-muted, var(--darkgray))); + stroke: var(--search-icon-color, var(--text-muted, var(--darkgray))); + } + } + & > .search-container { + & > .search-space { + background-color: var(--background-primary); + border: var(--prompt-border-width) solid var(--prompt-border-color); + border-radius: var(--radius-l); + box-shadow: var(--shadow-l); + margin: 12vh auto; + & > input { + background-color: var(--background-primary); + border: none; + border-bottom: 1px solid var(--background-secondary); + border-radius: 0; + font-size: var(--font-normal); + height: var(--prompt-input-height); + padding: var(--size-4-6); + padding-inline-end: var(--size-4-12); + width: 100%; + margin-bottom: 0; + border-bottom: none; + background: transparent; + } + & > * { + color: var(--text-normal); + background: transparent; + margin-bottom: 0; + box-shadow: none; + } + & > .search-layout { + &.display-results { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + & .highlight { + font-weight: bold; + background-color: var(--text-highlight-bg); + color: var(--text-normal); + } + & > .preview-container { + color: var(--text-normal); + } + & > .results-container { + & .result-card { + @media all and not ($mobile) { + display: flex; + &.no-match { + display: block; + } + } + &:hover, + &:focus, + &.focus { + background-color: var(--background-modifier-hover); + } + & > ul > li > p { + background-color: transparent; + color: var(--text-normal); + &.match-tag { + color: var(--tag-color); + } + } + } + } + } + } + } + } + /* PAGE TITLE */ + .page-title, + .page-title a { + color: var(--inline-title-color, var(--h1-color, var(--link-color, var(--darkgray)))); + font-family: var(--inline-title-font, var(--h1-font, var(--font-text, inherit))); + } + /* GRAPH */ + .graph { + & > .graph-outer { + border: 1px solid var(--background-modifier-border-hover, var(--color-base-35)); + --background-modifier-border-focus: var(--color-base-40); + & > .global-graph-icon { + color: var(--search-icon-color, var(--text-muted, var(--darkgray))); + &:hover { + background-color: var(--background-modifier-hover); + } + } + } + & > .global-graph-outer { + & > .global-graph-container { + border: 1px solid var(--background-modifier-border-hover, var(--color-base-35)); + background-color: var(--background-primary); + } + } + } + /* MISC */ + hr { + border: none; + border-top: var(--hr-thickness, 2px) solid; + border-color: var(--hr-color, var(--background-modifier-border, var(--lightgray))); + } + details.toc { + & summary { + cursor: pointer; + &::marker { + color: var(--text-muted); + } + } + } + /* POPOVER */ + .popover { + animation: 0.3s pop cubic-bezier(0.17, 0.89, 0.32, 1.27); + background-color: var(--background-primary); + border: 1px solid var(--background-modifier-border); + border-radius: var(--radius-m); + box-shadow: var(--shadow-s); + display: flex; + max-height: var(--popover-max-height); + position: absolute; + z-index: var(--layer-popover); + display: block; + position: fixed; + z-index: 999; + background-color: unset; + border: unset; + & .popover-inner { + border: 1px solid var(--background-modifier-border); + background-color: var(--background-primary); + + border-radius: var(--radius-m); + } + } + /* BACKGROUNDS */ + section { + background-color: var(--background-primary); + } + .page > #quartz-body { + .sidebar { + background-color: var(--background-primary); + &.left:has(.explorer) { + background-color: var(--background-primary); + } + } + } + /* TEXT */ + .page article p > strong, + strong { + color: var(--bold-color); + font-weight: var(--bold-weight); + } + .page article p > i, + .page article p > em, + i, + em { + color: var(--italic-color); + font-style: italic; + } + .page article p, + .page article ul, + .page article text, + .page article tr, + .page article td, + .page article li, + .page article ol, + .page article ul, + .page article .katex, + .page article .math, + p, + ul, + text, + tr, + td, + li, + ol, + ul, + .katex, + .math { + color: var(--text-normal); + font-family: var(--font-text, var(--font-default)); + hyphens: none; + } + .page article a, + a { + font-family: var(--font-text, var(--font-default)); + hyphens: none; + } + /* override user-select */ + user-select: text; + -webkit-user-select: text; +} +:root { + button.darkmode { + mask-image: var(--sun-icon); + -webkit-mask-image: var(--sun-icon); + } +} +:root { + button.darkmode { + mask-image: var(--moon-icon); + -webkit-mask-image: var(--moon-icon); + } +} +/* FONT OVERRIDES */ +:root:root:root { +} +/* START CANVAS GRAPH WORKAROUND */ +/* START DARK GRAPH */ +:root:root { + --highlight-fallback: 258, 88%, 66%; + --lightgray: var( + --graph-line, + var( + --color-base-35, + var( + --background-modifier-border-focus, + var(--background-modifier-border, var(--color-base-30, #363636)) + ) + ) + ) !important; + --gray: var( + --graph-node, + var( + --text-muted, + var( + --graph-text, + var(--text-normal, var(--checkbox-border-color, var(--text-faint, #666666))) + ) + ) + ) !important; + --darkgray: var( + --graph-node-unresolved, + var(--text-faint, var(--text-normal, var(--color-base-100, #dadada))) + ) !important; + --tertiary: var( + --graph-node-tag, + var( + --color-green, + var(--link-color-hover, var(--text-accent-hover, var(--color-accent-2, #c5b6fc))) + ) + ) !important; +} +/* END DARK GRAPH */ +/* END CANVAS GRAPH WORKAROUND */