Quartz sync: Jun 17, 2025, 8:48 AM

This commit is contained in:
Liz 2025-06-17 08:48:44 -04:00
parent ef761dcb4f
commit 50ced3dafb

View File

@ -5,18 +5,14 @@
@use "sass:string";
/* Quartz imports */
@use "../variables.scss" as *;
/* quartz themes dark-only */
/* quartz themes */
:root:root {
--background-modifier-border: var(--s-bg-transparent);
--background-modifier-border-focus: var(--s-green-primary-color);
:root[saved-theme="dark"] {
--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);
--background-primary: rgb(25, 18, 63);
--background-secondary: var(--background-secondary-dark, rgb(45, 45, 45));
--code-background: var(--code-background-dark, rgb(33, 19, 19));
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--color-accent-1: hsl(
calc(var(--accent-h) - 3),
calc(var(--accent-s) * 1.02),
@ -53,19 +49,15 @@
--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);
--interactive-accent: var(--color-accent);
--interactive-accent-hover: var(--color-accent-1);
--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);
--text-accent: var(--color-accent-1);
--text-normal: #ffffff;
color-scheme: dark;
.callout {
@ -73,16 +65,103 @@
}
}
.darkmode {
display: none;
:root[saved-theme="light"] {
--background-primary: rgb(255, 250, 205);
--background-secondary: var(--background-secondary-light, rgb(240, 240, 240));
--code-background: var(--code-background-light, rgb(255, 255, 255));
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--color-accent-1: hsl(
calc(var(--accent-h) - 1),
calc(var(--accent-s) * 1.01),
calc(var(--accent-l) * 1.075)
);
--color-accent-2: hsl(
calc(var(--accent-h) - 3),
calc(var(--accent-s) * 1.02),
calc(var(--accent-l) * 1.15)
);
--color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
--color-base-00: #ffffff;
--color-base-10: #fafafa;
--color-base-100: #222222;
--color-base-20: #f6f6f6;
--color-base-25: #e3e3e3;
--color-base-30: #e0e0e0;
--color-base-35: #d4d4d4;
--color-base-40: #bdbdbd;
--color-base-50: #ababab;
--color-base-70: #5c5c5c;
--color-blue: #086ddd;
--color-blue-rgb: 8, 109, 221;
--color-cyan: #00bfbc;
--color-cyan-rgb: 0, 191, 188;
--color-green: #08b94e;
--color-green-rgb: 8, 185, 78;
--color-orange: #ec7500;
--color-orange-rgb: 236, 117, 0;
--color-pink: #d53984;
--color-purple: #7852ee;
--color-purple-rgb: 120, 82, 238;
--color-red: #e93147;
--color-red-rgb: 233, 49, 71;
--color-yellow: #e0ac00;
--highlight-mix-blend-mode: darken;
--mono-rgb-100: 0, 0, 0;
--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.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042),
0px 15px 30px rgba(0, 0, 0, 0.07);
--text-normal: #0c0909;
color-scheme: light;
.callout {
--callout-blend-mode: darken;
}
}
/* latin-ext */
/* cyrillic-ext */
@font-face {
font-family: "Figtree";
font-family: "Manrope";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/figtree/v7/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_d_QG5XyEA25WTzZO_OSg.woff2)
src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_P-bnTfc7AGraJwA.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: "Manrope";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_G-bnTfc7AGraJwA.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_B-bnTfc7AGraJwA.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: "Manrope";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_N-bnTfc7AGraJwA.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: "Manrope";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_M-bnTfc7AGraJwA.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,
@ -90,10 +169,10 @@
}
/* latin */
@font-face {
font-family: "Figtree";
font-family: "Manrope";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/figtree/v7/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_d_QG5ZyEA25WTzZO8.woff2)
src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_C-bnTfc7AGrY.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;
@ -101,47 +180,42 @@
/* cyrillic-ext */
@font-face {
font-family: "JetBrains Mono";
font-family: "Nunito Sans";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVk6OThhvAWV8.woff2)
font-stretch: 100%;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXvlUlIfM0qh1d65g.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-family: "Nunito Sans";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOVk6OThhvAWV8.woff2)
font-stretch: 100%;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXt1UlIfM0qh1d65g.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-family: "Nunito Sans";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNVOVk6OThhvAWV8.woff2)
font-stretch: 100%;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXvFUlIfM0qh1d65g.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-family: "Nunito Sans";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNFOVk6OThhvAWV8.woff2)
font-stretch: 100%;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXvVUlIfM0qh1d65g.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,
@ -149,34 +223,17 @@
}
/* latin */
@font-face {
font-family: "JetBrains Mono";
font-family: "Nunito Sans";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOVk6OThhvA.woff2)
font-stretch: 100%;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXs1UlIfM0qh1d.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;
@ -197,27 +254,28 @@ body {
--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-bug: 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-default: var(--color-blue-rgb);
--callout-error: var(--color-red-rgb);
--callout-example: var(--color-purple-rgb);
--callout-fail: var(--color-red-rgb);
--callout-important: var(--color-cyan-rgb);
--callout-info: var(--color-blue-rgb);
--callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6);
--callout-question: var(--color-orange-rgb);
--callout-quote: 158, 158, 158;
--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-success: var(--color-green-rgb);
--callout-summary: var(--color-cyan-rgb);
--callout-tip: 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));
--callout-todo: var(--color-blue-rgb);
--callout-warning: var(--color-orange-rgb);
--caret-color: var(--text-normal);
--checkbox-border-color: var(--text-faint);
--checkbox-border-color-hover: var(--text-muted);
@ -251,69 +309,62 @@ body {
--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-interface-theme: "??";
--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-monospace-theme: "??";
--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: var(--body-font, Manrope), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
--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-color: inherit;
--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-color: inherit;
--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-color: inherit;
--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-color: inherit;
--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-color: inherit;
--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-color: inherit;
--h6-font: inherit;
--h6-line-height: var(--line-height-normal);
--h6-size: 1em;
@ -394,12 +445,12 @@ body {
--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);
background: none;
background-color: var(--background-primary);
caret-color: var(--caret-color);
color: var(--text-normal);
contain: initial;
font-family: var(--font-interface);
font-family: var(--font-text);
font-size: var(--font-ui-medium);
height: 100%;
line-height: var(--line-height-tight);
@ -413,17 +464,13 @@ body {
width: 100%;
}
/* START DARK */
:root,
html {
--background-modifier-border: var(--s-bg-transparent);
--background-modifier-border-focus: var(--s-green-primary-color);
:root[saved-theme="dark"],
html[saved-theme="dark"] {
--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);
--background-primary: rgb(25, 18, 63);
--background-secondary: var(--background-secondary-dark, rgb(45, 45, 45));
--code-background: var(--code-background-dark, rgb(33, 19, 19));
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--color-accent-1: hsl(
calc(var(--accent-h) - 3),
calc(var(--accent-s) * 1.02),
@ -460,19 +507,15 @@ html {
--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);
--interactive-accent: var(--color-accent);
--interactive-accent-hover: var(--color-accent-1);
--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);
--text-accent: var(--color-accent-1);
--text-normal: #ffffff;
color-scheme: dark;
code[data-theme*=" "] {
color: var(--shiki-dark);
@ -483,6 +526,65 @@ html {
}
}
/* END DARK */
/* START LIGHT */
:root[saved-theme="light"],
html[saved-theme="light"] {
--background-primary: rgb(255, 250, 205);
--background-secondary: var(--background-secondary-light, rgb(240, 240, 240));
--code-background: var(--code-background-light, rgb(255, 255, 255));
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--color-accent-1: hsl(
calc(var(--accent-h) - 1),
calc(var(--accent-s) * 1.01),
calc(var(--accent-l) * 1.075)
);
--color-accent-2: hsl(
calc(var(--accent-h) - 3),
calc(var(--accent-s) * 1.02),
calc(var(--accent-l) * 1.15)
);
--color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
--color-base-00: #ffffff;
--color-base-10: #fafafa;
--color-base-100: #222222;
--color-base-20: #f6f6f6;
--color-base-25: #e3e3e3;
--color-base-30: #e0e0e0;
--color-base-35: #d4d4d4;
--color-base-40: #bdbdbd;
--color-base-50: #ababab;
--color-base-70: #5c5c5c;
--color-blue: #086ddd;
--color-blue-rgb: 8, 109, 221;
--color-cyan: #00bfbc;
--color-cyan-rgb: 0, 191, 188;
--color-green: #08b94e;
--color-green-rgb: 8, 185, 78;
--color-orange: #ec7500;
--color-orange-rgb: 236, 117, 0;
--color-pink: #d53984;
--color-purple: #7852ee;
--color-purple-rgb: 120, 82, 238;
--color-red: #e93147;
--color-red-rgb: 233, 49, 71;
--color-yellow: #e0ac00;
--highlight-mix-blend-mode: darken;
--mono-rgb-100: 0, 0, 0;
--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.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042),
0px 15px 30px rgba(0, 0, 0, 0.07);
--text-normal: #0c0909;
color-scheme: light;
code[data-theme*=" "] {
color: var(--shiki-light);
background-color: var(--shiki-light-bg);
}
code[data-theme*=" "] span {
color: var(--shiki-light);
}
}
/* END LIGHT */
/* CALLOUTS */
:root,
html {
@ -496,7 +598,7 @@ html {
margin: 1em 0;
mix-blend-mode: var(--callout-blend-mode);
overflow: hidden;
padding: var(--size-4-3);
padding: var(--callout-padding);
background-color: rgba(var(--callout-color), 0.1);
overflow-x: auto;
overflow-y: hidden;
@ -963,10 +1065,9 @@ body {
}
}
.clipboard-button {
background-color: var(--s-hover-bg-color-green);
background-color: transparent;
box-shadow: none;
color: var(--text-muted);
cursor: pointer;
font-family: var(--font-interface);
font-size: var(--font-ui-smaller);
height: auto;
@ -1057,7 +1158,7 @@ body {
-webkit-mask-image: var(--folder-open-icon);
}
.folder-outer > ul.content {
border-inline-start: var(--nav-indentation-guide-width) dashed
border-inline-start: var(--nav-indentation-guide-width) solid
var(--nav-indentation-guide-color);
margin-bottom: 1px;
margin-inline-start: var(
@ -1207,7 +1308,7 @@ body {
border-radius: var(--input-radius);
color: var(--text-normal);
font-family: inherit;
font-size: var(--font-normal);
font-size: var(--font-ui-small);
height: var(--input-height);
outline: none;
padding: var(--size-4-1) var(--size-4-2);
@ -1228,7 +1329,7 @@ body {
border: none;
border-bottom: 1px solid var(--background-secondary);
border-radius: 0;
font-size: var(--font-normal);
font-size: var(--font-ui-medium);
height: var(--prompt-input-height);
padding: var(--size-4-6);
padding-inline-end: var(--size-4-12);
@ -1323,7 +1424,6 @@ body {
}
/* 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);
@ -1402,13 +1502,13 @@ body {
user-select: text;
-webkit-user-select: text;
}
:root {
:root[saved-theme="light"] {
button.darkmode {
mask-image: var(--sun-icon);
-webkit-mask-image: var(--sun-icon);
}
}
:root {
:root[saved-theme="dark"] {
button.darkmode {
mask-image: var(--moon-icon);
-webkit-mask-image: var(--moon-icon);
@ -1418,8 +1518,34 @@ body {
:root:root:root {
}
/* START CANVAS GRAPH WORKAROUND */
/* START LIGHT GRAPH */
:root:root[saved-theme="light"] {
--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, #e0e0e0))
)
)
) !important;
--darkgray: var(
--graph-node-unresolved,
var(--text-faint, var(--text-normal, var(--color-base-100, #222222)))
) !important;
--tertiary: var(
--graph-node-tag,
var(
--color-green,
var(--link-color-hover, var(--text-accent-hover, var(--color-accent-2, #a386f9)))
)
) !important;
}
/* END LIGHT GRAPH */
/* START DARK GRAPH */
:root:root {
:root:root[saved-theme="dark"] {
--highlight-fallback: 258, 88%, 66%;
--lightgray: var(
--graph-line,
@ -1431,16 +1557,6 @@ body {
)
)
) !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)))