BinaryDigit/binarydigitlol.github.io
1
0
Fork 0
mirror of https://github.com/binarydigitlol/binarydigitlol.github.io.git synced 2025-06-20 17:02:24 +00:00
Code Issues Packages Projects Releases Wiki Activity
binarydigitlol.github.io/quartz/styles/themes/_index.scss

1458 lines
50 KiB
SCSS
Raw Blame History

@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, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23000000"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}
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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 5h-8.586L9.707 3.293A.997.997 0 0 0 9 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2zM4 19V7h16l.002 12H4z"></path></svg>');
--folder-open-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.165 19.551c.186.28.499.449.835.449h15c.4 0 .762-.238.919-.606l3-7A.998.998 0 0 0 21 11h-1V8c0-1.103-.897-2-2-2h-6.655L8.789 4H4c-1.103 0-2 .897-2 2v13h.007a1 1 0 0 0 .158.551zM18 8v3H6c-.4 0-.762.238-.919.606L4 14.129V8h14z"></path></svg>');
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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=""><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>');
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 */
Reference in New Issue View Git Blame Copy Permalink