search

primary-theme / obsidian

Comfy, playful but productive theme for Obsidian. "Primary instantly puts you in a relaxed state that opens the door to creativity and exploration. Wonderfully executed down to the smallest details,"
GNU General Public License v3.0
846 stars 38 forks source link

I don't think I had such a nostalgia for a project in my life. #182

Open Write opened 7 months ago

Write commented 7 months ago

I tried numerous theme and no one come close to this one.

I always miss it so much, it was so freaking beautiful. The beautifulness of the UI was cosy and soothing, putting me in just the right mood to write.

All others theme since then are just -meh-.

Thanks Cecilia, and I'm still hoping that one day, the project will be back from the dead.

quinn-p-mchugh commented 6 months ago

I can related to this.

Is there a theme that comes close to the "warm, cozy" feel that Primary exudes?

Write commented 6 months ago

Couldn't find one ¯_(ツ)_/¯ , I'd wish someone would point me to one if it exist.

quinn-p-mchugh commented 6 months ago

@Write Best I could find is these style settings for modifying the Minimal Theme's colors to match that of Primary's.

Simply install the Minimal Theme and import the provided JSON using Minimal's Style Settings plugin.

Write commented 6 months ago

@Write Best I could find is these style settings for modifying the Minimal Theme's colors to match that of Primary's.

Simply install the Minimal Theme and import the provided JSON using Minimal's Style Settings plugin.

Thanks ! That's really a great workaround. I like it. Just for correctness : The plugin to install is Style Settings and not Minimal's Style Settings.

Write commented 6 months ago

I looked for a way to add fonts, given it's not in the snippet of your links.

Just add a custom snippets named primary-fonts.css (for example) in Settings > Appearence All fonts are self-contained as fonts are stored in base64 (I just copy pasted required parts from Primary css theme).

https://bin.drop.tf/?642e4d78d5e17829#7NKBVpor79263jksYBdkJT9tihNDaSP3QQpUUWoLFyN8

EDIT : I've updated Karla base64 font thanks to this website : https://hellogreg.github.io/woff2base/ so bold works now.

dannuen commented 3 months ago

Couldn't find one ¯(ツ)/¯ , I'd wish someone would point me to one if it exist.

I extracted these from the theme.css of the Primary theme and created a snippet with it. I’m currently using this snippet with the Anupuccin theme. It’s pretty much the same code.

body
{
/*──────────Duration, Transitions & Animations──────────*/
  /* Duration */
  --duration-none: 0;
  --duration-superfast: 70ms;
  --duration-fast-1: 140ms;
  --duration-fast-2: 260ms;
  --duration-moderate-1: 300ms;
  --duration-moderate-2: 440ms;
  --duration-slow-1: 560ms;
  --duration-slow-2: 600ms;
  /* Transitions & Animations */
  --motion-smooth: cubic-bezier(0.45,0.05,0.55,0.95); /* easeInOutSine */
  --motion-delay: cubic-bezier(0.65,0.05,0.36,1); /* easeInOutCubic */
  --motion-jumpy: cubic-bezier(0.68,-0.55,0.27,1.55); /* easeInOutBack */
  /* Tabs */
  --tab-background-active: var(--background-primary);
  --tab-text-color: var(--text-faint);
  --tab-text-color-focused: var(--text-muted);
  --tab-text-color-focused-active: var(--text-normal);
  --tab-font-size: var(--font-ui-small);
  --tab-font-weight: inherit;
  --tab-container-background: var(--background-secondary);
  --tab-divider-color: var(--background-modifier-border-hover);
  --tab-outline-color: var(--divider-color);
  --tab-outline-width: 1px;
  --tab-curve: 6px;
  --tab-radius: var(--radius-s);
  --tab-radius-active: 12px 12px 0 0;
  --tab-width: 200px;
  --tab-max-width: 320px;
  --accent-h: 254;
  --accent-s: 80%;
  --accent-l: 68%;
  --background-modifier-hover: rgba(var(--mono-rgb-0), 1.0);
} /*    End of Variables (body)   */
/*────────────────────────────────────
++++++++++++Theme Colors++++++++++++++
────────────────────────────────────*/
/*────────────────────────────────────
            Light Theme
────────────────────────────────────*/
.theme-light {
  color-scheme: light;
  --mono-rgb-0: 255, 255, 255;
  --mono-rgb-100: 0, 0, 0;
  --mono-hsl-0: 35, 36%, 95%;
  --mono-hsl-100: 31, 45%, 20%;
  --color-red-rgb: 228, 55, 75;
  --color-red: #E4374B;
  --color-green-rgb: 12, 181, 79;
  --color-green: var(--color-l-green);
  --color-orange: var(--color-l-orange);
  --color-yellow: var(--color-l-yellow);
  --color-blue: var(--color-l-blue);
  --color-purple: var(--color-l-violet);
  --color-violet: var(--color-l-violet);
  --color-base-00: var(--color-l-white);
  --color-base-05: var(--color-l-gray-10);
  --color-base-10: var(--color-l-gray-20);
  --color-base-20: var(--color-l-gray-30);
  --color-base-25: var(--color-l-gray-40);
  --color-base-30: var(--color-l-gray-50);
  --color-base-35: var(--color-l-gray-60);
  --color-base-40: var(--color-l-gray-70);
  --color-base-50: var(--color-l-gray-80);
  --color-base-60: var(--color-l-gray-90);
  --color-base-70: var(--color-l-gray-100);
  --color-base-100: var(--color-l-black);
  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%));
  --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%));
  --input-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12),
  0 2px 3px 0 rgba(0,0,0,.05),
  0 1px 1.5px 0 rgba(0,0,0,.03),
  0 1px 2px 0 rgba(0,0,0,.04),
  0 0 0 0 transparent;
  --input-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.17),
  0 2px 3px 0 rgba(0,0,0,.1),
  0 1px 1.5px 0 rgba(0,0,0,.03),
  0 1px 2px 0 rgba(0,0,0,.04),
  0 0 0 0 transparent;
  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028),
  0px 3.4px 6.7px rgba(0, 0, 0, .042),
  0px 15px 30px rgba(0, 0, 0, .07);
  --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);
  /*─────────Original Obsidian Variables──────────*/
  --background-primary: var(--color-l-white);
  --background-primary-alt: var(--color-l-gray-10);
  --background-secondary: var(--color-l-gray-20);
  --background-secondary-alt: var(--color-l-gray-20);
  --background-modifier-border: var(--color-l-gray-40);
  --background-modifier-form-field: var(--color-l-gray-30);
  --background-modifier-form-field-highlighted: var(--color-l-gray-40);
  --background-modifier-box-shadow: var(--color-l-shadow-100);
  --background-modifier-success: var(--color-l-green-300);
  --background-modifier-error: var(--color-l-red-300);
  --background-modifier-error-hover: var(--color-l-red-500);
  --background-modifier-cover: var(--color-l-shadow-cover);
  --text-normal: var(--color-l-black);
  --text-muted: var(--color-l-gray-60);
  --text-faint: var(--color-l-gray-50);
  --text-accent: var(--color-l-yellow-900);
  --text-accent-hover:var(--color-l-yellow-500);
  --text-error: var(--color-l-red);
  --text-error-hover: var(--color-l-red-900);
  --text-highlight-bg: var(--color-l-highlight-yellow);
  --text-highlight-bg-active: var(--color-l-highlight-yellow);
  --highlight-mix-blend-mode: darken;
  --text-selection: var(--color-l-gray-40);
  --text-on-accent: var(--color-l-gray-10);
  --interactive-hover: var(--color-l-gray-10);
  --interactive-accent: var(--color-l-gray-60);
  --interactive-accent-rgb: 207, 182, 150;
  --interactive-accent-hover: var(--color-l-gray-70);
  --interactive-success: var(--color-l-green-500);
  --scrollbar-bg: transparent;
  --scrollbar-thumb-bg: var(--background-modifier-border);
  --scrollbar-active-thumb-bg: var(--interactive-accent);
  /*──────────The PRIMARY Color Palette for Light Theme──────────*/
  --color-l-whiter: hsl(36, 36%, 96.9%);
  --color-l-white: hsl(var(--mono-hsl-0));
  --color-l-gray: var(--color-l-gray-50);
  --color-l-gray-10: hsl(36, 37%, 92%);
  --color-l-gray-20: hsl(35, 35%, 90%);
  --color-l-gray-30: hsl(34, 36%, 88%);
  --color-l-gray-40: hsl(36, 37%, 83%);
  --color-l-gray-50: hsl(34, 37%, 70%);
  --color-l-gray-60: hsl(34, 28%, 60%);
  --color-l-gray-70: hsl(31, 23%, 50%);
  --color-l-gray-80: hsl(34, 27%, 40%);
  --color-l-gray-90: hsl(34, 30%, 37%);
  --color-l-gray-100: hsl(35, 32%, 30%);
  --color-l-black: hsl(var(--mono-hsl-100));
  --color-l-blacker: hsl(32, 55%, 12%);
  --color-l-shadow-10: rgba(168, 160, 148, 0.8);
  --color-l-shadow-50: rgba(180, 172, 161, 0.3);
  --color-l-shadow-100: rgba(75, 70, 64, 0.2);
  --color-l-shadow-cover: rgba(177, 171, 164, 0.5);
  --color-l-yellow: var(--color-l-yellow-500);
  --color-l-yellow-300: hsl(43, 71%, 67%);
  --color-l-yellow-500: hsl(43, 78%, 52%);
  --color-l-yellow-700: hsl(43, 100%, 42%);
  --color-l-yellow-900: hsl(43, 89%, 38%);
  --color-l-red: var(--color-l-red-500);
  --color-l-red-300: hsl(4, 54%, 61%);
  --color-l-red-500: hsl(4, 72%, 55%);
  --color-l-red-700: hsl(4, 56%, 48%);
  --color-l-red-900: hsl(4, 66%, 30%);
  --color-l-blue: var(--color-l-blue-500);
  --color-l-blue-300: hsl(198, 39%, 56%);
  --color-l-blue-500: hsl(205, 66%, 46%);
  --color-l-blue-700: hsl(205, 63%, 39%);
  --color-l-blue-900: hsl(205, 95%, 25%);
  --color-l-orange: var(--color-l-orange-500);
  --color-l-orange-300: hsl(26, 66%, 57%);
  --color-l-orange-500: hsl(21, 82%, 55%);
  --color-l-orange-700: hsl(18, 69%, 50%);
  --color-l-orange-900: hsl(24, 96%, 35%);
  --color-l-orange-a: hsl(27, 81%, 46%);
  --color-l-green: var(--color-l-green-500);
  --color-l-green-300: hsl(154, 58%, 65%);
  --color-l-green-500: hsl(154, 47%, 49%);
  --color-l-green-700: hsl(155, 52%, 38%);
  --color-l-green-900: hsl(165, 63%, 29%);
  --color-l-violet: var(--color-l-violet-500);
  --color-l-violet-300: hsl(270, 50%, 74%);
  --color-l-violet-500: hsl(266, 31%, 57%);
  --color-l-violet-700: hsl(267, 37%, 43%);
  --color-l-violet-900: hsl(266, 70%, 30%);
  /*~ Highlights */
  --ui-color-highlight-text: var(--color-l-black);
  --ui-color-highlight-bg: hsl(43, 85%, 79%);
  --color-highlight-yellow: rgba(255, 187, 0, 0.2);
  --color-highlight-red: rgba(240, 79, 106, 0.2);
  --color-highlight-blue: rgba(40, 178, 194, 0.2);
  --color-highlight-orange: rgba(255, 115, 0, 0.2);
  --color-highlight-green: rgba(153, 189, 36, 0.2);
  --color-highlight-violet: rgba(113, 122, 255, 0.2);
  /*~ Graph View */
  --graph-color-node-resolved: var(--color-l-blue-500);
  --graph-color-node-unresolved: var(--color-l-yellow-500);
  --graph-color-node-unresolved-opacity: 1;
  --graph-color-node-tag: var(--color-l-red-500);
  --graph-color-node-attachment: var(--color-l-green-300);
  --graph-color-node-focused: var(--color-l-gray-80);
  --graph-color-node-border-hover: var(--color-l-gray-50);
  --graph-color-node-arrow: var(--color-l-gray-60);
  --graph-color-node-line: var(--color-l-gray-40);
  --graph-color-node-line-hover: var(--color-l-gray-50);
  --graph-color-node-text: var(--color-l-black);
}

/*────────────────────────────────────
            Dark Theme
────────────────────────────────────*/
.theme-dark {
  /*─────────Original Obsidian Variables──────────*/
  color-scheme: dark;
  --mono-rgb-0: 35, 30, 26;
  --mono-rgb-100: 230, 207, 179;
  --color-red-rgb: 219, 96, 87;
  --color-red: var(--color-d-red);
  --color-green-rgb: 56, 178, 125;
  --color-green: var(--color-d-green);
  --color-orange: var(--color-d-orange);
  --color-yellow: var(--color-d-yellow);
  --color-blue: var(--color-d-blue);
  --color-base-00: var(--color-d-black);
  --color-base-10: var(--color-d-gray-90);
  --color-base-20: var(--color-d-gray-80);
  --color-base-25: var(--color-d-gray-70);
  --color-base-30: var(--color-d-gray-60);
  --color-base-35: var(--color-d-gray-50);
  --color-base-40: var(--color-d-gray-40);
  --color-base-50: var(--color-d-gray-30);
  --color-base-60: var(--color-d-gray-20);
  --color-base-70: var(--color-d-gray-10);
  --color-base-100: var(--color-d-white);
  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%));
  --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%));
  /* Backgrounds */
  --background-primary: var(--color-d-gray-70);
  --background-primary-alt: var(--color-d-gray-90);
  --background-secondary: var(--color-d-black);
  --background-secondary-alt: var(--color-d-black);
  --background-modifier-hover: rgba(var(--mono-rgb-100), 0.05);
  --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15);
  --background-modifier-border: var(--color-d-gray-50);
  --background-modifier-border-hover: var(--color-base-35);
  --background-modifier-border-focus: var(--color-base-40);
  --background-modifier-error-rgb: var(--color-red-rgb);
  --background-modifier-error: var(--color-d-red-500);
  --background-modifier-error-hover: var(--color-d-red-700);
  --background-modifier-success-rgb: var(--color-green-rgb);
  --background-modifier-success: var(--color-d-green-300);
  --background-modifier-message: rgba(0, 0, 0, 0.9);
  --background-modifier-form-field: var(--color-d-blacker);
  --background-modifier-form-field-highlighted: var(--color-d-black);
  --background-modifier-box-shadow: var(--color-d-shadow-100);
  --background-modifier-cover: var(--color-d-shadow-cover);
  --text-normal: var(--color-d-white);
  --text-muted: var(--color-d-gray-20);
  --text-faint: var(--color-d-gray-30);
  --text-accent: var(--color-d-yellow-500);
  --text-accent-hover:var(--color-d-yellow-300) ;
  --text-error: var(--color-d-red-500);
  --text-error-hover: var(--color-d-red-300);
  --text-highlight-bg: var(--color-d-highlight-yellow);
  --text-highlight-bg-active: var(--color-d-highlight-yellow);
  --highlight-mix-blend-mode: lighten;
  --text-selection: var(--color-d-gray-50);
  --text-on-accent: var(--color-d-white);
  --interactive-hover: var(--color-d-gray-60);
  --interactive-accent: var(--color-d-gray-40);
  --interactive-accent-rgb: 92, 78, 61;
  --interactive-accent-hover: var(--color-d-gray-50);
  --interactive-success: var(--color-d-green-700);
  --scrollbar-bg: transparent;
  --scrollbar-thumb-bg: var(--background-modifier-border);
  --scrollbar-active-thumb-bg: var(--interactive-accent);
  /*──────────The PRIMARY Color Palette for Dark Theme──────────*/
  --color-d-whiter: hsl(33, 66%, 90%);
  --color-d-white: hsl(34, 50%, 80%);
  --color-d-gray: var(--color-d-gray-50);
  --color-d-gray-10: hsl(34, 18%, 62%);
  --color-d-gray-20: hsl(35, 27%, 55%);
  --color-d-gray-30: hsl(34, 24%, 30%);
  --color-d-gray-40: hsl(33, 22%, 30%);
  --color-d-gray-50: hsl(33, 20%, 20%);
  --color-d-gray-60: hsl(30, 19%, 17%);
  --color-d-gray-70: hsl(27, 14%, 15%);
  --color-d-gray-80: hsl(32, 19%, 13%);
  --color-d-gray-90: hsl(30, 15%, 13%);
  --color-d-gray-100: hsl(30, 20%, 8%);
  --color-d-black: hsl(27, 15%, 12%);
  --color-d-blacker: hsl(26, 16%, 9%);
  --color-d-shadow-10: rgba(29, 21, 13, 0.45);
  --color-d-shadow-50: rgba(29, 26, 22, 0.75);
  --color-d-shadow-100: rgba(19, 16, 13, 0.95);
  --color-d-shadow-cover: rgba(37, 34, 29, 0.74);
  --color-d-yellow: var(--color-d-yellow-500);
  --color-d-yellow-300: hsl(46, 91%, 69%);
  --color-d-yellow-500: hsl(50, 100%, 46%);
  --color-d-yellow-700: hsl(43, 100%, 42%);
  --color-d-yellow-900: hsl(39, 92%, 33%);
  --color-d-yellow-a: hsl(43, 75%, 52%);
  --color-d-red: var(--color-d-red-500);
  --color-d-red-300: hsl(4, 100%, 68%);
  --color-d-red-500: hsl(4, 65%, 60%);
  --color-d-red-700: hsl(4, 90%, 61%);
  --color-d-red-900: hsl(4, 77%, 38%);
  --color-d-red-a: hsl(4, 61%, 53%);
  --color-d-blue: var(--color-d-blue-500);
  --color-d-blue-300: hsl(198, 39%, 56%);
  --color-d-blue-500: hsl(198, 62%, 57%);
  --color-d-blue-700: hsl(198, 57%, 55%);
  --color-d-blue-900: hsl(198, 75%, 35%);
  --color-d-blue-a: hsl(197, 58%, 48%);
  --color-d-orange: var(--color-d-orange-500);
  --color-d-orange-300: hsl(22, 92%, 64%);
  --color-d-orange-500: hsl(22, 92%, 57%);
  --color-d-orange-700: hsl(21, 88%, 51%);
  --color-d-orange-900: hsl(20, 80%, 41%);
  --color-d-orange-a: hsl(27, 77%, 51%);
  --color-d-green: var(--color-d-green-500);
  --color-d-green-300: hsl(150, 66%, 53%);
  --color-d-green-500: hsl(154, 52%, 46%);
  --color-d-green-700: hsl(154, 61%, 39%);
  --color-d-green-900: hsl(155, 81%, 24%);
  --color-d-green-a: hsl(96, 50%, 49%);
  --color-d-violet: var(--color-d-violet-500);
  --color-d-violet-300: hsl(256, 63%, 74%);
  --color-d-violet-500: hsl(263, 60%, 67%);
  --color-d-violet-700: hsl(256, 52%, 57%);
  --color-d-violet-900: hsl(256, 44%, 50%);
  --color-d-violet-a: hsl(246, 53%, 67%);
  /*~ Highlights */
  --ui-color-highlight-text: var(--color-d-black);
  --ui-color-highlight-bg: hsl(43, 61%, 56%);
  --color-highlight-yellow: rgba(255, 187, 0, 0.2);
  --color-highlight-red: rgba(240, 79, 106, 0.2);
  --color-highlight-blue: rgba(40, 178, 194, 0.2);
  --color-highlight-orange: rgba(255, 115, 0, 0.2);
  --color-highlight-green: rgba(153, 189, 36, 0.2);
  --color-highlight-violet: rgba(113, 122, 255, 0.2);
  /*~ Graph View */
  --graph-color-node-resolved: var(--color-d-blue-900);
  --graph-color-node-unresolved: var(--color-d-yellow-700);
  --graph-color-node-unresolved-opacity: 1;
  --graph-color-node-tag: var(--color-d-red-500);
  --graph-color-node-attachment: var(--color-d-green-500);
  --graph-color-node-focused: var(--color-d-white);
  --graph-color-node-border-hover: var(--color-d-gray-10);
  --graph-color-node-arrow: var(--color-d-gray-40);
  --graph-color-node-line: var(--color-d-gray-50);
  --graph-color-node-line-hover: var(--color-d-gray-40);
  --graph-color-node-text: var(--color-d-gray-10);
}
/*──────────Note Colors──────────*/
.theme-light {
    --md-color-text: var(--text-normal);
    --md-color-text-muted: var(--text-muted);
    --md-color-text-faint: var(--text-faint);
    --md-color-bold: var(--color-l-red-500);
    --md-color-italic: var(--color-l-blue-500);
    --md-color-bolditalic: var(--color-l-blacker);
    --md-color-strikethrough: var(--text-faint);
    --md-color-highlight-text: var(--text-normal);
    --md-color-highlight-bg: var(--color-highlight-yellow);
    --md-color-bold-highlight-text: var(--text-normal);
    --md-color-bold-highlight-bg: var(--color-highlight-red);
    --md-color-italic-highlight-text: var(--text-normal);
    --md-color-italic-highlight-bg: var(--color-highlight-blue);
    --md-color-bi-highlight-text: var(--text-normal);
    --md-color-bi-highlight-bg: var(--color-highlight-green);
    --md-color-comment: var(--text-muted);
    --md-color-footnote: var(--text-normal);
    --md-color-footnote-link: var(--color-l-green-700);
    --md-color-footnote-link-hover: var(--color-l-green-500);
    --md-color-footnote-link-active: var(--color-l-green-900);
    --md-color-reslink: var(--color-l-yellow-700);
    --md-color-reslink-hover: var(--color-l-yellow-500);
    --md-color-reslink-active: var(--color-l-yellow-900);
    --md-color-unreslink: var(--text-muted);
    --md-color-unreslink-hover: var(--color-l-yellow-700);
    --md-color-unreslink-active: var(--color-l-yellow-900);
    --md-color-extlink: var(--color-l-yellow-700);
    --md-color-extlink-hover: var(--color-l-yellow-500);
    --md-color-extlink-active: var(--color-l-yellow-900);
    --md-color-blockquotes: var(--text-normal);
    --md-color-blockquotes-formatting: var(--text-faint);
    --md-color-blockquotes-border: var(--background-modifier-border);
    --md-color-blockquotes-bg: var(--color-l-whiter);
    --md-color-tag: var(--color-l-blue-700);
    --md-color-tag-hover: var(--color-l-blue-500);
    --md-color-tag-active: var(--color-l-blue-900);
    --md-color-code-yellow-1: var(--color-l-yellow-500);
    --md-color-code-yellow-2: var(--color-l-yellow-700);
    --md-color-code-red-1: var(--color-l-red-300);
    --md-color-code-red-2: var(--color-l-red-500);
    --md-color-code-blue-1: var(--color-l-blue-500);
    --md-color-code-blue-2: var(--color-l-blue-700);
    --md-color-code-gray: var(--color-l-gray-50);
    --md-color-code-white: var(--color-l-blacker);
    --md-color-formatting: var(--color-l-gray-50);
    --md-color-border: var(--background-modifier-border);
    --md-embed-bg: var(--color-l-gray-10);
    --md-color-bullet: var(--md-color-text-faint);
    --md-find-highlight-bg: var(--color-highlight-violet);
    --md-unchecked-bg-color: rgba(255, 255, 255, 0.4);
    --md-unchecked-bg-color-hover: var(--color-l-gray-whiter);
    --md-unchecked-bg-color-active: var(--color-l-gray-20);
    --md-checked-bg-color: var(--color-l-green-500);
  }

  .theme-dark {
    --md-color-text: var(--text-normal);
    --md-color-text-muted: var(--text-muted);
    --md-color-text-faint: var(--text-faint);
    --md-color-bold: var(--color-d-red-700);
    --md-color-italic: var(--color-d-blue-700);
    --md-color-bolditalic: var(--color-d-whiter);
    --md-color-strikethrough: var(--text-faint);
    --md-color-highlight-text: var(--text-normal);
    --md-color-highlight-bg: var(--color-highlight-yellow);
    --md-color-bold-highlight-text: var(--text-normal);
    --md-color-bold-highlight-bg: var(--color-highlight-red);
    --md-color-italic-highlight-text: var(--text-normal);
    --md-color-italic-highlight-bg: var(--color-highlight-blue);
    --md-color-bi-highlight-text: var(--text-normal);
    --md-color-bi-highlight-bg: var(--color-highlight-green);
    --md-color-comment: var(--text-muted);
    --md-color-footnote: var(--text-normal);
    --md-color-footnote-link: var(--color-d-green-700);
    --md-color-footnote-link-hover: var(--color-d-green-500);
    --md-color-footnote-link-active: var(--color-d-green-900);
    --md-color-reslink: var(--color-d-yellow-500);
    --md-color-reslink-hover: var(--color-d-yellow-300);
    --md-color-reslink-active: var(--color-d-yellow-700);
    --md-color-unreslink: var(--text-muted);
    --md-color-unreslink-hover: var(--color-d-yellow-500);
    --md-color-unreslink-active: var(--color-d-yellow-700);
    --md-color-extlink: var(--color-d-yellow-500);
    --md-color-extlink-hover: var(--color-d-yellow-300);
    --md-color-extlink-active: var(--color-d-yellow-700);
    --md-color-blockquotes: var(--text-normal);
    --md-color-blockquotes-formatting: var(--text-faint);
    --md-color-blockquotes-border: var(--background-modifier-border);
    --md-color-blockquotes-bg: var(--color-d-blacker);
    --md-color-tag: var(--color-d-blue-700);
    --md-color-tag-hover: var(--color-d-blue-300);
    --md-color-tag-active: var(--color-d-blue-900);
    --md-color-code-yellow-1: var(--color-d-yellow-700);
    --md-color-code-yellow-2: var(--color-d-yellow-500);
    --md-color-code-red-1: var(--color-d-red-500);
    --md-color-code-red-2: var(--color-d-red-300);
    --md-color-code-blue-1: var(--color-d-blue-300);
    --md-color-code-blue-2: var(--color-d-blue-500);
    --md-color-code-gray: var(--text-faint);
    --md-color-code-white: var(--color-d-whiter);
    --md-color-formatting: var(--color-d-gray-40);
    --md-color-border: var(--background-modifier-border);
    --md-embed-bg: var(--color-d-gray-90);
    --md-color-bullet: var(--md-color-text-faint);
    --md-find-highlight-bg: var(--color-highlight-violet);
    --md-unchecked-bg-color: rgba(0, 0, 0, 0.2);
    --md-unchecked-bg-color-hover: var(--color-d-gray-100);
    --md-unchecked-bg-color-active: var(--color-d-gray-70);
    --md-checked-bg-color: var(--color-d-green-900);
  }
/*──────────Emphasis──────────*/
/* Bold */
strong,
.cm-strong,
.cm-s-obsidian span.cm-quote.cm-strong,
.markdown-preview-view strong {
  color: var(--md-color-bold);
}

/* Italic */
em,
.cm-em,
.cm-s-obsidian span.cm-quote.cm-em,
.markdown-preview-view em {
  color: var(--md-color-italic);
}

/* Bold & Italic */
strong em, em strong,
.cm-strong.cm-em,
.markdown-preview-view strong em {
  color: var(--md-color-bolditalic);
}

/* Strikethrough */
del,
.cm-strikethrough,
.cm-s-obsidian span.cm-quote.cm-strikethrough,
.markdown-preview-view del {
  color: var(--md-color-strikethrough);
}
del:hover,
.cm-strikethrough:hover,
.cm-s-obsidian span.cm-quote.cm-strikethrough:hover,
.markdown-preview-view del:hover {
  text-decoration: none;
}

.markdown-preview-view h1 del, .markdown-preview-view h2 del, .markdown-preview-view h3 del, .markdown-preview-view h4 del, .markdown-preview-view h5 del, .markdown-preview-view h6 del {
  color: var(--md-color-strikethrough);
}

/* Highlight [Highlight] */
mark,
.cm-s-obsidian span.cm-highlight,
.markdown-source-view.is-live-preview .cm-header.cm-formatting-highlight,
.cm-s-obsidian span.cm-quote.cm-highlight,
.callout mark,
.markdown-preview-view mark,
.popover mark,
.markdown-embed mark {
  color: var(--md-color-highlight-text);
  background: var(--md-color-highlight-bg);
  padding: 2px 2px;
  border-radius: var(--size-2-1);
}

/* Highlight [Bold + Highlight] */
.cm-s-obsidian span.cm-highlight.cm-strong,
.cm-s-obsidian span.cm-quote.cm-highlight.cm-strong {
  color: var(--md-color-bold-highlight-text);
  background: var(--md-color-bold-highlight-bg);
}

.markdown-preview-view.markdown-preview-view mark strong,
.markdown-embed.markdown-embed mark strong,
.reveal mark strong {
  color: var(--md-color-bold-highlight-text);
}

.callout strong > mark,
.markdown-preview-view.markdown-preview-view strong > mark,
.popover strong > mark,
.markdown-embed.markdown-embed strong > mark,
.reveal strong > mark {
  background: var(--md-color-bold-highlight-bg);
}

/* Highlight [Italic + Highlight] */
.cm-s-obsidian span.cm-highlight.cm-em,
.cm-s-obsidian span.cm-quote.cm-highlight.cm-em {
  color: var(--md-color-italic-highlight-text);
  background: var(--md-color-italic-highlight-bg);
}

.callout em > mark,
.markdown-preview-view mark em,
.popover mark em,
.markdown-embed mark em,
.reveal mark em {
  color: var(--md-color-italic-highlight-text);
}

.callout em > mark,
.markdown-preview-view.markdown-preview-view em > mark,
.popover em > mark,
.markdown-embed.markdown-embed em > mark,
.reveal em > mark {
  background: var(--md-color-italic-highlight-bg);
}

/* Highlight [Bold + Italic + Highlight] */
.cm-s-obsidian span.cm-highlight.cm-strong.cm-em,
.cm-s-obsidian span.cm-quote.cm-highlight.cm-strong.cm-em {
  color: var(--md-color-bi-highlight-text);
  background: var(--md-color-bi-highlight-bg);
}

.callout strong > em > mark,
.markdown-preview-view.markdown-preview-view strong > em > mark,
.popover strong > em > mark,
.markdown-embed.markdown-embed strong > em > mark,
.reveal strong > em > mark {
  background: var(--md-color-bi-highlight-bg);
}

/* Comments */
.cm-s-obsidian span.cm-comment,
.cm-s-obsidian span.cm-comment.cm-quote {
  color: var(--md-color-comment);
}
/* Modal Close Close Buttons */
.slides-close-btn,
.modal-close-button {
  right: calc(var(--size-4-2) + var(--size-2-1));
  top: var(--size-4-2);
  font-family: Inter, sans-serif;
  font-weight: 200;
  font-size: var(--size-4-6);
  height: var(--size-4-6);
  width: var(--size-4-6);
  border-radius: var(--size-4-6);
  z-index: 9;
}
.slides-close-btn:before,
.modal-close-button:before {
  position: absolute;
  right: 4px;
  top: 0;
}
.theme-light .slides-close-btn:before,
.theme-light .modal-close-button:before {
  color: var(--color-l-gray-20);
}
.theme-dark .slides-close-btn:before,
.theme-dark .modal-close-button:before {
  color: var(--color-d-gray-80);
}
.theme-light .slides-close-btn,
.theme-light .modal-close-button {
  background: var(--color-l-red-300);
  box-shadow: 0px 1px 2px 0px rgba(100, 100, 100, 0.5), 0px -2px 0px 0px rgba(100, 20, 20, 0.18) inset;
}
.theme-light .slides-close-btn:hover,
.theme-light .modal-close-button:hover {
  background: var(--color-l-red-500);
}
.theme-light .slides-close-btn:active,
.theme-light .modal-close-button:active {
  background: var(--color-l-red-700);
  box-shadow: 0px 0px 0px 2px rgba(150, 20, 20, 0.55) inset;
}
.theme-light .slides-close-btn:active:before,
.theme-light .modal-close-button:active:before {
  color: var(--color-l-red-900);
}
.theme-dark .slides-close-btn,
.theme-dark .modal-close-button {
  background: var(--color-d-red-500);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25), 0px -2px 0px 0px rgba(50, 10, 10, 0.35) inset;
}
.theme-dark .slides-close-btn:hover,
.theme-dark .modal-close-button:hover {
  background: var(--color-d-red-300);
}
.theme-dark .slides-close-btn:active,
.theme-dark .modal-close-button:active {
  background: var(--color-d-red-700);
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.45) inset;
}
.theme-dark .slides-close-btn:active:before,
.theme-dark .modal-close-button:active:before {
  color: var(--color-d-red-900);
}
/*──────────Blockquotes──────────*/
/* Source View Blockquotes */
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
    font-style: italic;
    background: var(--md-color-blockquotes-bg);
    padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-3);
    border-left: 2px solid var(--md-color-blockquotes-border);
  }
  .markdown-source-view.mod-cm6 .cm-blockquote-border {
    border-left: 2px solid var(--md-color-blockquotes-border);
  }

  /* Source View Emphasis in Blockquotes Fix */
  .cm-s-obsidian span.cm-quote {
    color: var(--md-color-blockquotes);
  }
  .cm-s-obsidian span.cm-formatting-quote {
    color: var(--md-color-blockquotes-formatting);
  }

  /* Preview View Blockquotes */
  .markdown-preview-view blockquote {
    font-style: italic;
    background: var(--md-color-blockquotes-bg);
    padding: var(--size-4-4) var(--size-4-9) var(--size-4-4) var(--size-4-9);
    border-radius: var(--size-4-2);
    border: 1px solid var(--md-color-blockquotes-border);
    margin-left: var(--size-0-0);
    margin-right: var(--size-0-0);
  }
  /*──────────Internal & External Links──────────*/
/* Opacity of Unresolved Links Fix */
.markdown-source-view.mod-cm6 .is-unresolved,
.markdown-preview-view .internal-link.is-unresolved {
  opacity: 1;
}

/* Source View Resolved Links */
.markdown-source-view.mod-cm6 span:where(.cm-url.cm-url, .cm-blockid, .cm-inline-code.cm-link, .cm-hmd-internal-link, .cm-header.cm-hmd-internal-link, .cm-hmd-internal-link .cm-underline) {
  color: var(--md-color-reslink);
  text-decoration: underline solid 1px;
  text-underline-position: under;
  transition: var(--duration-superfast) var(--motion-smooth);
}
.markdown-source-view.mod-cm6 span:where(.cm-url.cm-url, .cm-blockid, .cm-inline-code.cm-link, .cm-hmd-internal-link, .cm-header.cm-hmd-internal-link, .cm-hmd-internal-link .cm-underline):hover {
  color: var(--md-color-reslink-hover);
  text-decoration: underline solid 1px;
}
.markdown-source-view.mod-cm6 span:where(.cm-url.cm-url, .cm-blockid, .cm-inline-code.cm-link, .cm-hmd-internal-link, .cm-header.cm-hmd-internal-link, .cm-hmd-internal-link .cm-underline):active {
  color: var(--md-color-reslink-active);
  text-decoration: underline solid 1px;
}
.no-link-underline.no-link-underline .markdown-source-view.mod-cm6 span:where(.cm-url.cm-url, .cm-blockid, .cm-inline-code.cm-link, .cm-hmd-internal-link, .cm-header.cm-hmd-internal-link, .cm-hmd-internal-link .cm-underline) {
  text-decoration: none;
}

/* Source View Unresolved Links */
.markdown-source-view.mod-cm6 span.is-unresolved span:where(.cm-url, .cm-blockid, .cm-link, .cm-underline) {
  color: var(--md-color-unreslink);
  text-decoration: underline solid 1px;
  text-underline-position: under;
  transition: var(--duration-superfast) var(--motion-smooth);
}
.markdown-source-view.mod-cm6 span.is-unresolved span:where(.cm-url, .cm-blockid, .cm-link, .cm-underline):hover {
  color: var(--md-color-unreslink-hover);
}
.markdown-source-view.mod-cm6 span.is-unresolved span:where(.cm-url, .cm-blockid, .cm-link, .cm-underline):active {
  color: var(--md-color-unreslink-active);
}
.no-link-underline.no-link-underline .markdown-source-view.mod-cm6 span.is-unresolved {
  text-decoration: none;
}

.markdown-source-view.mod-cm6 span.is-unresolved .cm-hmd-internal-link {
  color: var(--md-color-unreslink);
}
.markdown-source-view.mod-cm6 span.is-unresolved .cm-hmd-internal-link:hover {
  text-decoration: none;
}

.no-link-underline .cm-s-obsidian span.cm-hmd-internal-link:hover {
  text-decoration: none;
}
/*────────────────────────────────────
        Buttons Component
────────────────────────────────────*/
/* don't remove !important */
.theme-light button,
.theme-dark button {
  font-family: var(Barlow) !important;
  padding: var(--size-2-3) var(--size-4-4) var(--size-4-2) var(--size-4-4);
  margin-top: var(--size-2-3);
  margin-bottom: var(--size-2-3);
  margin-right: var(--size-4-2);
  border-radius: var(--size-4-5);
  transition: var(--duration-superfast) var(--motion-smooth);
}
.theme-light button:last-child,
.theme-dark button:last-child {
  margin-right: 0;
}
.theme-light button:only-child,
.theme-dark button:only-child {
  margin-left: 0;
  margin-right: 0;
}
.mod-community-plugin .setting-item-control .theme-light button,
.mod-community-plugin .setting-item-control .theme-dark button {
  box-shadow: none;
}
.graph-controls .theme-light button,
.graph-controls .theme-dark button {
  font-size: var(--font-scale-0);
}
.theme-light button.copy-code-button,
.theme-dark button.copy-code-button {
  padding: var(--size-2-1) var(--size-4-2) var(--size-2-3) var(--size-4-2) !important;
  border-radius: var(--size-2-2);
  margin-top: var(--size-2-2);
  margin-right: var(--size-2-2);
}

.theme-light .modal button,
.theme-light .graph-controls button,
.theme-light .workspace button,
.theme-light .popover button {
  border: 1px solid rgba(100, 100, 100, 0.4);
  box-shadow: 0 -2px 0 0 rgba(100, 100, 100, 0.4) inset, 0 2px 4px 0 rgba(100, 100, 100, 0.3);
}
.theme-light .modal button:active,
.theme-light .graph-controls button:active,
.theme-light .workspace button:active,
.theme-light .popover button:active {
  box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.3) inset, 0 1px 1px 0 rgba(100, 100, 100, 0.1);
  transition: var(--duration-superfast) var(--motion-smooth);
}
.theme-dark .modal button,
.theme-dark .graph-controls button,
.theme-dark .workspace button,
.theme-dark .popover button {
  color: var(--color-d-white);
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.28) inset, 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.theme-dark .modal button:active,
.theme-dark .graph-controls button:active,
.theme-dark .workspace button:active,
.theme-dark .popover button:active {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  transition: var(--duration-superfast) var(--motion-smooth);
}

.theme-light .modal button:not(.mod-cta, .mod-warning),
.theme-light .modal.mod-settings button:not(.mod-cta, .mod-warning),
.theme-light .workspace button:not(.graph-controls button, .document-search-button),
.theme-light .popover button:not(.graph-controls button, .document-search-button),
.theme-light .search-result-file-match-destination-file {
  color: var(--color-l-gray-80);
  background: var(--color-l-whiter);
  border: 1px solid rgba(100, 100, 100, 0.3);
  box-shadow: 0 -2px 0 0 rgba(100, 100, 100, 0.2) inset, 0 2px 4px 0 rgba(100, 100, 100, 0.1);
}
.theme-light .modal button:not(.mod-cta, .mod-warning):hover, .theme-light .modal button:not(.mod-cta, .mod-warning):focus,
.theme-light .modal.mod-settings button:not(.mod-cta, .mod-warning):hover,
.theme-light .modal.mod-settings button:not(.mod-cta, .mod-warning):focus,
.theme-light .workspace button:not(.graph-controls button, .document-search-button):hover,
.theme-light .workspace button:not(.graph-controls button, .document-search-button):focus,
.theme-light .popover button:not(.graph-controls button, .document-search-button):hover,
.theme-light .popover button:not(.graph-controls button, .document-search-button):focus,
.theme-light .search-result-file-match-destination-file:hover,
.theme-light .search-result-file-match-destination-file:focus {
  background: var(--color-l-gray-10);
}
.theme-light .modal button:not(.mod-cta, .mod-warning):active,
.theme-light .modal.mod-settings button:not(.mod-cta, .mod-warning):active,
.theme-light .workspace button:not(.graph-controls button, .document-search-button):active,
.theme-light .popover button:not(.graph-controls button, .document-search-button):active,
.theme-light .search-result-file-match-destination-file:active {
  box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.1) inset, 0 1px 1px 0 rgba(100, 100, 100, 0.1);
  transition: var(--duration-superfast) var(--motion-smooth);
}
.theme-dark .modal button:not(.mod-cta, .mod-warning),
.theme-dark .modal.mod-settings button:not(.mod-cta, .mod-warning),
.theme-dark .workspace button:not(.graph-controls button, .document-search-button),
.theme-dark .popover button:not(.graph-controls button, .document-search-button),
.theme-dark .search-result-file-match-destination-file {
  color: var(--color-d-white);
  background: var(--color-d-black);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.3) inset, 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.theme-dark .modal button:not(.mod-cta, .mod-warning):hover,
.theme-dark .modal.mod-settings button:not(.mod-cta, .mod-warning):hover,
.theme-dark .workspace button:not(.graph-controls button, .document-search-button):hover,
.theme-dark .popover button:not(.graph-controls button, .document-search-button):hover,
.theme-dark .search-result-file-match-destination-file:hover {
  background: var(--color-d-blacker);
}
.theme-dark .modal button:not(.mod-cta, .mod-warning):active,
.theme-dark .modal.mod-settings button:not(.mod-cta, .mod-warning):active,
.theme-dark .workspace button:not(.graph-controls button, .document-search-button):active,
.theme-dark .popover button:not(.graph-controls button, .document-search-button):active,
.theme-dark .search-result-file-match-destination-file:active {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  transition: var(--duration-superfast) var(--motion-smooth);
}

button.clickable-icon[aria-label="Change sort order"] {
  margin-left: 0;
  margin-right: var(--size-4-2);
}

span.community-theme-remove-button.clickable-icon {
  top: 6px;
  right: -3px;
  color: var(--text-on-accent);
  padding: var(--size-2-2) var(--size-2-2) var(--size-0-0) var(--size-2-2);
}
.theme-light span.community-theme-remove-button.clickable-icon {
  color: var(--color-l-gray-20);
  background: var(--color-l-red-300);
  box-shadow: 0 1px 2px 0 rgba(100, 100, 100, 0.5), 0 -2px 0 0 rgba(100, 20, 20, 0.18) inset;
}
.theme-light span.community-theme-remove-button.clickable-icon:hover {
  background: var(--color-l-red-500);
}
.theme-light span.community-theme-remove-button.clickable-icon:active {
  color: var(--color-l-red-900);
  background: var(--color-l-red-700);
  box-shadow: 0 0 0 2px rgba(150, 20, 20, 0.55) inset;
  transition: var(--duration-superfast) var(--motion-smooth);
}
.theme-dark span.community-theme-remove-button.clickable-icon {
  color: var(--color-d-white);
  background: var(--color-d-red-500);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 -2px 0 0 rgba(85, 8, 8, 0.38) inset;
}
.theme-dark span.community-theme-remove-button.clickable-icon:hover {
  background: var(--color-d-red-300);
}
.theme-dark span.community-theme-remove-button.clickable-icon:active {
  color: var(--color-d-red-900);
  background: var(--color-d-red-700);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45) inset;
  transition: var(--duration-superfast) var(--motion-smooth);
}
/*────────────────────────────────────
    Toggle (Checkboxes for Modals)
────────────────────────────────────*/
.checkbox-container {
    height: calc(3px + var(--size-4-6));
    width: calc(2px + var(--size-4-12));
    border-radius: var(--size-4-8);
  }
  .checkbox-container:after {
    height: calc(4px + var(--size-4-4));
    width: calc(4px + var(--size-4-4));
    border-radius: var(--size-4-8);
    margin: 2.5px 0 0 0px;
  }
  .checkbox-container:active::after {
    width: calc(4px + var(--size-4-6));
  }
  .checkbox-container.is-enabled {
    transition: var(--duration-fast-2) var(--motion-smooth);
  }
  .checkbox-container.is-enabled:after {
    transform: translate3d(24px, 0, 0);
    margin-left: 1px;
  }
  .checkbox-container.is-enabled:active::after {
    left: -8px;
  }
  .theme-light .checkbox-container {
    background: var(--color-l-gray-40);
    border: 1px solid var(--color-l-gray-40);
    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5), 0px 0px 2px 1px rgba(100, 100, 100, 0.35) inset;
  }
  .theme-light .checkbox-container::after {
    background: var(--color-l-whiter);
    box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.45), 0px -2px 0px 0px rgba(100, 100, 100, 0.15) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.9) inset;
  }
  .theme-light .checkbox-container.is-enabled {
    border: 1px solid var(--color-l-green-300);
    background: var(--color-l-green-500);
  }
  .theme-dark .checkbox-container {
    background: var(--color-d-gray-40);
    border: 1px solid var(--color-d-gray-30);
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 0px 2px 1px rgba(0, 0, 0, 0.35) inset;
  }
  .theme-dark .checkbox-container::after {
    background: var(--color-d-white);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.45), 0px -2px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.35) inset;
  }
  .theme-dark .checkbox-container.is-enabled {
    border: 1px solid var(--color-d-green-700);
    background: var(--color-d-green-900);
  }

  /*────────────────────────────────────
                  Slider
  ────────────────────────────────────*/
  input[type=range] {
    min-width: 150px;
    background-color: transparent;
    padding: 0;
    -webkit-appearance: none;
    cursor: default;
  }
  input[type=range]::-webkit-slider-runnable-track {
    height: var(--size-2-3);
    border-radius: var(--size-2-3);
  }
  .theme-light input[type=range]::-webkit-slider-runnable-track {
    background: var(--background-modifier-border);
    border-radius: var(--size-2-2);
    border: 1px solid rgba(100, 100, 100, 0.2);
  }
  .theme-dark input[type=range]::-webkit-slider-runnable-track {
    background: var(--background-modifier-border);
    border-radius: var(--size-2-2);
    border: 1px solid rgba(0, 0, 0, 0.4);
  }
  input[type=range]::-webkit-slider-thumb {
    height: var(--size-4-5);
    width: var(--size-4-2);
    margin-top: -2px;
    cursor: ew-resize;
    transition: var(--duration-fast-1) var(--motion-jumpy);
    border-radius: var(--size-4-4);
  }
  .theme-light input[type=range]::-webkit-slider-thumb {
    background: var(--color-l-blue-300);
    border: 1px solid rgba(100, 100, 100, 0.5);
    box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.45), 0px -2px 0px 0px rgba(100, 100, 100, 0.15) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.35) inset;
  }
  .theme-dark input[type=range]::-webkit-slider-thumb {
    background: var(--color-d-blue-700);
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.45), 0px -2px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.35) inset;
  }

/*────────────────────────────────────
            Tab Header
────────────────────────────────────*/
/*─────────Tab Header Container──────────*/
.workspace-split.mod-left-split .workspace-tab-header-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.workspace-split.mod-right-split .workspace-tab-header-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.workspace-tabs {
  padding-right: 0;
}

/*─────────Tab Header Icons──────────*/
.workspace-tab-header-container {
  height: none;
  padding: var(--scale-0-0) var(--scale-0-0) var(--scale-0-0) var(--scale-0-0);
  margin: var(--scale-2-6) var(--scale-0-0) var(--scale-0-0) var(--scale-0-0);
}

.mod-left-split .workspace-tab-header, .mod-right-split .workspace-tab-header {
  /*
  Applied for All 
  Tab Header Icon Container
  */
  height: var(--scale-2-18);
  padding: 4px;
  margin: 0px;
  border-radius: var(--scale-2-4);
  transition: var(--duration-superfast) var(--motion-smooth);
}

.workspace-tab-header-inner {
  background: transparent !important;
}
.workspace-tab-header-inner, .workspace-tab-header-inner-icon {
  padding: var(--scale-0-0);
}
.workspace-tab-header.is-active {
  border-radius: var(--scale-2-4);
}
.workspace-tab-container-before.is-before-active, .workspace-tab-container-after.is-after-active, .workspace-tab-header.is-before-active, .workspace-tab-header.is-after-active {
  background: transparent;
}

.workspace-tab-container-before, .workspace-tab-container-after {
  margin: calc(-1 * var(--scale-2-3));
}

/*─────────Tab Header for Light Mode──────────*/
.theme-light .workspace-tab-header.is-active {
  background: var(--color-l-white);
  box-shadow: 0px -2px 0px 0px rgba(100, 100, 100, 0.15) inset;
}
.theme-light .workspace-tab-header:not(.workspace-tab-header.is-active) {
  border: 1px solid var(--color-l-gray-50);
}
.theme-light .workspace-tab-header:not(.workspace-tab-header.is-active):hover {
  border: 1px solid var(--color-l-gray-60);
  transform: translateY(-2px);
  box-shadow: 0px 3px 3px -1px rgba(100, 100, 100, 0.15);
  cursor: pointer;
}
.theme-light .workspace-tab-header:not(.workspace-tab-header.is-active):hover .workspace-tab-header-inner-icon {
  color: var(--color-l-gray-60);
}
.theme-light .workspace-tab-header:not(.workspace-tab-header.is-active):active {
  transform: translateY(2px);
  box-shadow: 0px 0px 0px 2px rgba(150, 150, 150, 0.15) inset;
}
.theme-light .mod-left-split .workspace-tab-header.is-active:nth-child(3n+1) {
  color: var(--color-l-yellow-500);
  border: 1px solid var(--color-l-yellow-500);
}
.theme-light .mod-left-split .workspace-tab-header.is-active:nth-child(3n+2) {
  color: var(--color-l-red-500);
  border: 1px solid var(--color-l-red-500);
}
.theme-light .mod-left-split .workspace-tab-header.is-active:nth-child(3n+3) {
  color: var(--color-l-blue-500);
  border: 1px solid var(--color-l-blue-500);
}
.theme-light .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+1) {
  color: var(--color-l-yellow-500);
  border: 1px solid var(--color-l-yellow-500);
}
.theme-light .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+2) {
  color: var(--color-l-red-500);
  border: 1px solid var(--color-l-red-500);
}
.theme-light .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+3) {
  color: var(--color-l-blue-500);
  border: 1px solid var(--color-l-blue-500);
}

/*─────────Tab Header for Dark Mode──────────*/
.theme-dark .workspace-tab-header {
  transition: var(--duration-superfast) var(--motion-smooth) !important;
}
.theme-dark .workspace-tab-header.is-active {
  background: var(--color-d-gray-70);
  box-shadow: 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset;
}
.theme-dark .workspace-tab-header:not(.workspace-tab-header.is-active) {
  border: 1px solid var(--color-d-gray-50);
}
.theme-dark .workspace-tab-header:not(.workspace-tab-header.is-active):hover {
  border: 1px solid var(--color-d-gray-30);
  transform: translateY(-1.5px);
  box-shadow: 0px 3px 3px -1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.theme-dark .workspace-tab-header:not(.workspace-tab-header.is-active):hover .workspace-tab-header-inner-icon {
  color: var(--color-d-gray-30);
}
.theme-dark .workspace-tab-header:not(.workspace-tab-header.is-active):active {
  transform: translateY(1.5px);
  box-shadow: 0px 0px 0px 2.5px rgba(0, 0, 0, 0.2) inset;
}
.theme-dark .mod-left-split .workspace-tab-header.is-active:nth-child(3n+1) {
  color: var(--color-d-yellow-700);
  border: 1px solid var(--color-d-yellow-700);
}
.theme-dark .mod-left-split .workspace-tab-header.is-active:nth-child(3n+2) {
  color: var(--color-d-red-700);
  border: 1px solid var(--color-d-red-700);
}
.theme-dark .mod-left-split .workspace-tab-header.is-active:nth-child(3n+3) {
  color: var(--color-d-blue-700);
  border: 1px solid var(--color-d-blue-700);
}
.theme-dark .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+1) {
  color: var(--color-d-yellow-700);
  border: 1px solid var(--color-d-yellow-700);
}
.theme-dark .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+2) {
  color: var(--color-d-red-700);
  border: 1px solid var(--color-d-red-700);
}
.theme-dark .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+3) {
  color: var(--color-d-blue-700);
  border: 1px solid var(--color-d-blue-700);
}

/*────────────────────────────────────
            Nav Header
────────────────────────────────────*/
/*─────────Nav Header Container──────────*/
.workspace-split.mod-left-split .nav-header,
.workspace-split.mod-right-split .nav-header {
  padding: var(--size-2-1) var(--size-2-2) var(--size-2-1) var(--size-2-2);
  margin: var(--size-0-0) var(--size-0-0) var(--size-0-0) var(--size-0-0);
}
.workspace-split.mod-left-split .nav-header .nav-buttons-container,
.workspace-split.mod-right-split .nav-header .nav-buttons-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  vertical-align: middle;
}

/*─────────Nav Header Buttons──────────*/
.nav-action-button {
  background: none;
  height: var(--size-4-8);
  padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-2);
  margin: var(--size-0-0) var(--size-0-0) var(--size-0-0) var(--size-0-0);
  border-radius: var(--size-2-3);
  opacity: 1;
  display: flex;
  align-items: center;
}
.theme-light .nav-action-button {
  color: var(--color-l-gray-60);
}
.theme-light .nav-action-button.is-active {
  color: var(--color-l-black);
  background-color: transparent;
}
.theme-light .nav-action-button.is-active:hover {
  color: var(--color-l-gray-80);
}
.theme-light .nav-action-button.is-active:active {
  color: var(--color-l-gray-50);
}
.theme-light .nav-action-button:not(.nav-action-button.is-active):hover {
  color: var(--color-l-gray-80);
  background-color: transparent;
}
.theme-light .nav-action-button:not(.nav-action-button.is-active):active {
  color: var(--color-l-gray-50);
}
.theme-dark .nav-action-button {
  color: var(--color-d-gray-40);
}
.theme-dark .nav-action-button.is-active {
  color: var(--color-d-gray-20);
  background-color: transparent;
}
.theme-dark .nav-action-button.is-active:hover {
  color: var(--color-d-white);
}
.theme-dark .nav-action-button.is-active:active {
  color: var(--color-d-gray-50);
}
.theme-dark .nav-action-button:not(.nav-action-button.is-active):hover {
  color: var(--color-d-gray-20);
  background-color: transparent;
}
.theme-dark .nav-action-button:not(.nav-action-button.is-active):active {
  color: var(--color-d-gray-50);
}

/*────────────────────────────────────
            File Explorer
────────────────────────────────────*/
/*─────────Vault Title──────────*/
.nav-folder.mod-root > .nav-folder-title[data-path="/"] {
  color: var(--text-muted);
  font-size: var(--font-scale-0-5);
  background: var(--background-secondary);
  top: 0;
  width: 100%;
  position: sticky;
  justify-content: center;
  border: 1px solid var(--background-modifier-border);
  margin-bottom: var(--size-2-2);
  z-index: 2;
}
.nav-folder.mod-root > .nav-folder-title[data-path="/"]:hover {
  color: var(--text-muted);
  background: var(--background-secondary);
}

.nav-folder-collapse-indicator {
  align-items: flex-start;
}

.workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title,
.workspace-leaf.mod-active .nav-file.has-focus {
  border-color: transparent;
  background-color: none;
}

body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
  color: unset;
}

/* File Explorer for Light Mode */
.theme-light .nav-folder-title:not([data-path="/"]), .theme-light .nav-file-title {
  color: var(--color-l-gray-80);
  background: transparent;
}
.theme-light .nav-folder-title:not([data-path="/"]):hover, .theme-light .nav-file-title:hover {
  color: var(--color-l-gray-80) !important;
  background: var(--color-l-gray-10) !important;
}
.theme-light .nav-folder-title:not([data-path="/"]):active, .theme-light .nav-file-title:active {
  color: var(--color-l-gray-50) !important;
  background: var(--color-l-gray-40) !important;
}
.theme-light .nav-file-title.is-active {
  background: var(--color-l-gray-10);
  border: 1px solid rgba(100, 100, 100, 0.3);
  box-shadow: 0px -2px 0px 0px rgba(100, 100, 100, 0.1) inset, 0px 2px 4px 0px rgba(100, 100, 100, 0.1);
}
.theme-light .nav-file-tag {
  background: var(--color-l-gray-10);
}

/* File Explorer for Dark Mode */
.theme-dark .nav-folder-title:not([data-path="/"]), .theme-dark .nav-file-title {
  color: var(--color-d-gray-20);
  background: transparent;
}
.theme-dark .nav-folder-title:not([data-path="/"]):hover, .theme-dark .nav-file-title:hover {
  color: var(--color-d-gray-20) !important;
  background: var(--color-d-gray-60) !important;
}
.theme-dark .nav-folder-title:not([data-path="/"]):active, .theme-dark .nav-file-title:active {
  color: var(--color-d-gray-40) !important;
  background: var(--color-d-blacker) !important;
}
.theme-dark .nav-file-title.is-active {
  background: var(--color-d-gray-70);
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.theme-dark .nav-file-tag {
  background: var(--color-d-gray-50);
}

/*────────────────────────────────────
            Modals
────────────────────────────────────*/
/*─────────All Modals──────────*/
/*─────────Settings Modal──────────*/
/*─────────Command, Quick Switcher etc. Modals──────────*/

.theme-light .modal.mod-settings, .theme-light .modal.mod-settings .vertical-tab-container {
  box-shadow: var(--shadow-xl) var(--color-l-shadow-100);
}
.theme-dark .modal.mod-settings, .theme-dark .modal.mod-settings .vertical-tab-container {
  box-shadow: var(--shadow-xl) var(--color-d-shadow-100);
}
.modal.mod-settings .setting-item-control button.clickable-icon, .modal.mod-settings .vertical-tab-container .setting-item-control button.clickable-icon {
  padding: 0;
  margin-right: var(--size-4-2);
}
.modal.mod-community-theme.mod-community-theme, .modal.mod-community-plugin {
  width: clamp(200px, 90vw, 960px);
  min-height: 90vh;
  overflow: hidden;
}
.modal.mod-image-lightbox {
  width: clamp(200px, 95vw, 1920px);
  min-height: 20vh;
  height: auto;
  max-height: 90vh;
  border-radius: var(--size-4-4);
  overflow-y: hidden;
}
.modal .vertical-tab-nav-item {
  text-transform: capitalize;
}

.modal .modal-content .vertical-tab-header-group, .modal .modal-content .vertical-tab-nav-item {
  background: var(--background-secondary);
}
.modal .modal-content .vertical-tab-header-group-title {
  font-weight: var(--font-bold);
  text-transform: uppercase;
}
.modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item {
  background: transparent;
  padding: var(--size-2-2) var(--size-4-2) var(--size-2-2) var(--size-4-4);
  border: 1px solid transparent;
  border-radius: var(--size-2-2);
  border-left: none;
  margin: var(--size-0-0) var(--size-4-2) var(--size-0-0) var(--size-4-2);
  transition: var(--duration-superfast) var(--motion-smooth);
}
.modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:last-of-type {
  margin-bottom: calc(var(--size-4-2) + var(--size-2-1));
}
.modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item.is-active {
  font-weight: var(--font-bold);
  z-index: 2;
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:hover {
  color: var(--color-l-gray-80);
  background: var(--color-l-gray-10);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:active {
  color: var(--color-l-gray-50);
  background: var(--color-l-gray-40);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item.is-active {
  color: var(--color-l-whiter);
  border: 1px solid rgba(100, 100, 100, 0.3);
  box-shadow: 0px -2px 0px 0px rgba(100, 100, 100, 0.15) inset, 0px 1px 4px 0px rgba(100, 100, 100, 0.25);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+1).is-active {
  background: var(--color-l-yellow-500);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+2).is-active {
  background: var(--color-l-red-300);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+3).is-active {
  background: var(--color-l-blue-300);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:hover {
  color: var(--color-d-gray-20);
  background: var(--color-d-gray-60);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:active {
  color: var(--color-d-gray-40);
  background: var(--color-d-blacker);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item.is-active {
  color: var(--color-d-black);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+1).is-active {
  background: var(--color-d-yellow-700);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+2).is-active {
  background: var(--color-d-red-500);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+3).is-active {
  background: var(--color-d-blue-300);
}

  /*────────────────────────────────────
              Dropdown
  ────────────────────────────────────*/
  .dropdown {
    font-family: Barlow;
    line-height: var(--line-height-1);
    padding: var(--size-2-2) var(--size-4-4) var(--size-2-2) var(--size-4-4);
    margin: var(--size-2-2) 0;
    transition: var(--duration-fast-1) var(--motion-smooth);
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24' width='100%25' height='100%25'%3E%3Cpath d='M18.71,8.21a1,1,0,0,0-1.42,0l-4.58,4.58a1,1,0,0,1-1.42,0L6.71,8.21a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41l4.59,4.59a3,3,0,0,0,4.24,0l4.59-4.59A1,1,0,0,0,18.71,8.21Z'/%3E%3C/svg%3E%0A");
  }
  .theme-light .dropdown {
    color: var(--color-l-gray-80);
    background-color: var(--color-l-whiter);
    border: 1px solid rgba(100, 100, 100, 0.5);
    border-radius: var(--size-2-2);
    box-shadow: 0px -2px 0px 0px rgba(100, 100, 100, 0.1) inset, 0px 2px 4px 0px rgba(100, 100, 100, 0.1);
  }
  .theme-light .dropdown:hover {
    background-color: var(--color-l-gray-20);
    transition: var(--duration-fast-1) var(--motion-delay);
  }
  .theme-dark .dropdown {
    color: var(--color-d-gray-10);
    background-color: var(--color-d-gray-90);
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }
  .theme-dark .dropdown:hover {
    background-color: var(--color-d-blacker);
    transition: var(--duration-fast-1) var(--motion-delay);
  }
/*────────────────────────────────────
        Vault Launch Progress
────────────────────────────────────*/
.is-loading:before,
.search-result-container.is-loading:before {
  background-color: var(--background-primary);
  animation: var(--duration-slow-2) var(--motion-smooth) infinite progress-bar;
}

.progress-bar {
  background: var(--background-primary);
}
.progress-bar-indicator {
  width: 35%;
  overflow: hidden;
  height: var(--size-4-3);
  border-radius: var(--size-4-3);
  border: 1px solid var(--background-modifier-border);
}
.is-mobile .progress-bar-indicator {
  width: 65%;
}
.progress-bar-line {
  height: var(--size-4-3);
  position: absolute;
  background: var(--background-secondary);
  border-radius: var(--size-4-3);
}
.progress-bar-subline {
  height: var(--size-4-3);
  border-radius: var(--size-4-3);
}
.theme-light .progress-bar-subline { /* VLP for Light Mode */
  background: var(--color-l-green-500);
}
.theme-dark .progress-bar-subline { /* VLP for Dark Mode */
  background: var(--color-d-green-900);
}
.progress-bar-message {
  display: none;
}

@media (min-width: 1000pt) {
  .is-mobile {
    /*──────────Aside HTML / Sidenotes──────────*/
  }
}
/*────────────────────────────────────
++++++++++++++++++++++++++++++++++++++
            Graph View
++++++++++++++++++++++++++++++++++++++
──────────────────────────────────────*/
.workspace-leaf-content[data-type=graph] .view-content {
    padding: 0;
  }

  .graph-controls {
    max-width: initial;
    padding: var(--size-4-2) var(--size-4-6) var(--size-4-4) var(--size-4-2);
    margin-top: var(--size-4-1);
    margin-left: var(--size-4-1);
    border-radius: var(--size-4-2);
    transition: var(--duration-fast-2) var(--motion-smooth);
  }
  .graph-controls.is-close {
    padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-2);
    margin-top: var(--size-4-1);
    margin-left: var(--size-4-1);
    border-radius: var(--size-4-2);
    opacity: 1;
  }
  .graph-controls.is-close .graph-controls-buttons.mod-open, .graph-controls.is-close .graph-controls-buttons.mod-animate {
    padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-2);
    margin: 0;
  }

  /*─────────Graph View Colors──────────*/
  .theme-light .graph-view.color-fill,
  .theme-dark .graph-view.color-fill {
    color: var(--graph-color-node-resolved);
  }
  .theme-light .graph-view.color-fill-unresolved,
  .theme-dark .graph-view.color-fill-unresolved {
    color: var(--graph-color-node-unresolved);
    opacity: var(--graph-color-node-unresolved-opacity);
  }
  .theme-light .graph-view.color-fill-tag,
  .theme-dark .graph-view.color-fill-tag {
    color: var(--graph-color-node-tag);
  }
  .theme-light .graph-view.color-fill-attachment,
  .theme-dark .graph-view.color-fill-attachment {
    color: var(--graph-color-node-attachment);
  }
  .theme-light .graph-view.color-fill-focused,
  .theme-dark .graph-view.color-fill-focused { /* Focused Node */
    color: var(--graph-color-node-focused);
  }
  .theme-light .graph-view.color-circle,
  .theme-dark .graph-view.color-circle { /* Node Cirle on Hover (Border) */
    color: var(--graph-color-node-border-hover);
  }
  .theme-light .graph-view.color-arrow,
  .theme-dark .graph-view.color-arrow {
    color: var(--graph-color-node-arrow);
  }
  .theme-light .graph-view.color-line,
  .theme-dark .graph-view.color-line {
    color: var(--graph-color-node-line);
  }
  .theme-light .graph-view.color-line-highlight,
  .theme-dark .graph-view.color-line-highlight { /* Node Line on Hover */
    color: var(--graph-color-node-line-hover);
  }
  .theme-light .graph-view.color-text,
  .theme-dark .graph-view.color-text {
    color: var(--graph-color-node-text);
  }

  /*~ Graph View Controls for Light Theme ~*/
  .theme-light .graph-controls {
    background-color: var(--color-l-white);
    color: var(--color-l-gray-60);
    border: 1px solid var(--background-modifier-border);
    box-shadow: var(--shadow-s);
  }
  .theme-light .graph-controls.is-close {
    min-width: inherit;
    box-shadow: none;
  }
  .theme-light .graph-controls .setting-item-name {
    color: var(--color-l-gray-80);
  }

  /*~ Graph View Controls for Dark Theme ~*/
  .theme-dark .graph-controls {
    background-color: var(--color-d-gray-70);
    color: var(--color-d-gray-50);
    border: 1px solid var(--background-modifier-border);
    box-shadow: var(--shadow-s) var(--color-d-shadow-100);
  }
  .theme-dark .graph-controls.is-close {
    min-width: inherit;
    box-shadow: none;
  }
  .theme-dark .graph-controls .setting-item-name {
    color: var(--color-d-gray-10);
  }
/*────────────────────────────────────
            Scrollbars
────────────────────────────────────*/
body:not(.native-scrollbars) ::-webkit-scrollbar,
body:not(.native-scrollbars) .graph-controls::-webkit-scrollbar {
  visibility: visible;
  width: var(--size-2-2);
  height: var(--size-2-2);
  border-radius: 0;
  display: inherit;
  background: var(--scrollbar-bg);
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  visibility: visible;
  background: var(scrollbar-thumb-bg);
  border-radius: 0;
}
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-active-thumb-bg);
  border-radius: 0;
}

/* Thin Scrollbar */
.scrollbar__thin.scrollbar__thin:not(.native-scrollbars) ::-webkit-scrollbar, .scrollbar__thin.scrollbar__thin:not(.native-scrollbars) .graph-controls::-webkit-scrollbar {
  visibility: visible;
  width: var(--size-2-2);
  height: var(--size-2-2);
  border-radius: 0;
  display: inherit;
  background: var(--scrollbar-bg);
}
.scrollbar__thin.scrollbar__thin:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  visibility: visible;
  background: var(scrollbar-thumb-bg);
  border-radius: 0;
}
.scrollbar__thin.scrollbar__thin:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-active-thumb-bg);
  border-radius: 0;
}

/* Mac (Grabbable) Scrollbar */
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) ::-webkit-scrollbar {
  background: var(--scrollbar-bg);
  visibility: visible;
  width: 12px;
  height: 12px;
  border-radius: 0;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) ::-webkit-scrollbar-thumb, .scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .node-insert-event ::-webkit-scrollbar-thumb {
  visibility: visible;
  background: var(scrollbar-thumb-bg);
  border: 5px solid var(--background-primary);
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover, .scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .node-insert-event ::-webkit-scrollbar-thumb:hover {
  background: var(--interactive-accent);
  border-width: 3px;
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active, .scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .node-insert-event ::-webkit-scrollbar-thumb:active {
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .workspace-tabs ::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border: 5px solid var(--background-secondary);
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .workspace-tabs ::-webkit-scrollbar-thumb:hover {
  background: var(--interactive-accent);
  border-width: 3px;
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .workspace-tabs ::-webkit-scrollbar-thumb:active {
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .markdown-embed:not(.hover-popover .markdown-embed) ::-webkit-scrollbar-thumb {
  border: 5px solid var(--background-primary-alt);
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .markdown-embed:not(.hover-popover .markdown-embed) ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-active-thumb-bg);
  border-width: 3px;
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .markdown-embed:not(.hover-popover .markdown-embed) ::-webkit-scrollbar-thumb:active {
  border-radius: 24px;
}

body.plugin-sliding-panes.scrollbar__mac .workspace-split.mod-vertical.mod-root {
  background: var(--background-primary);
}

body.plugin-sliding-panes-rotate-header .workspace > .mod-root > .workspace-leaf > .workspace-leaf-content > .view-content {
  border-bottom: 1px solid var(--background-modifier-border);
}
Lmasey commented 3 months ago

Couldn't find one ¯(ツ)/¯ , I'd wish someone would point me to one if it exist.

I extracted these from the theme.css of the Primary theme and created a snippet with it. I’m currently using this snippet with the Anupuccin theme. It’s pretty much the same code.

body
{
/*──────────Duration, Transitions & Animations──────────*/
  /* Duration */
  --duration-none: 0;
  --duration-superfast: 70ms;
  --duration-fast-1: 140ms;
  --duration-fast-2: 260ms;
  --duration-moderate-1: 300ms;
  --duration-moderate-2: 440ms;
  --duration-slow-1: 560ms;
  --duration-slow-2: 600ms;
  /* Transitions & Animations */
  --motion-smooth: cubic-bezier(0.45,0.05,0.55,0.95); /* easeInOutSine */
  --motion-delay: cubic-bezier(0.65,0.05,0.36,1); /* easeInOutCubic */
  --motion-jumpy: cubic-bezier(0.68,-0.55,0.27,1.55); /* easeInOutBack */
  /* Tabs */
  --tab-background-active: var(--background-primary);
  --tab-text-color: var(--text-faint);
  --tab-text-color-focused: var(--text-muted);
  --tab-text-color-focused-active: var(--text-normal);
  --tab-font-size: var(--font-ui-small);
  --tab-font-weight: inherit;
  --tab-container-background: var(--background-secondary);
  --tab-divider-color: var(--background-modifier-border-hover);
  --tab-outline-color: var(--divider-color);
  --tab-outline-width: 1px;
  --tab-curve: 6px;
  --tab-radius: var(--radius-s);
  --tab-radius-active: 12px 12px 0 0;
  --tab-width: 200px;
  --tab-max-width: 320px;
  --accent-h: 254;
  --accent-s: 80%;
  --accent-l: 68%;
  --background-modifier-hover: rgba(var(--mono-rgb-0), 1.0);
} /*    End of Variables (body)   */
/*────────────────────────────────────
++++++++++++Theme Colors++++++++++++++
────────────────────────────────────*/
/*────────────────────────────────────
            Light Theme
────────────────────────────────────*/
.theme-light {
  color-scheme: light;
  --mono-rgb-0: 255, 255, 255;
  --mono-rgb-100: 0, 0, 0;
  --mono-hsl-0: 35, 36%, 95%;
  --mono-hsl-100: 31, 45%, 20%;
  --color-red-rgb: 228, 55, 75;
  --color-red: #E4374B;
  --color-green-rgb: 12, 181, 79;
  --color-green: var(--color-l-green);
  --color-orange: var(--color-l-orange);
  --color-yellow: var(--color-l-yellow);
  --color-blue: var(--color-l-blue);
  --color-purple: var(--color-l-violet);
  --color-violet: var(--color-l-violet);
  --color-base-00: var(--color-l-white);
  --color-base-05: var(--color-l-gray-10);
  --color-base-10: var(--color-l-gray-20);
  --color-base-20: var(--color-l-gray-30);
  --color-base-25: var(--color-l-gray-40);
  --color-base-30: var(--color-l-gray-50);
  --color-base-35: var(--color-l-gray-60);
  --color-base-40: var(--color-l-gray-70);
  --color-base-50: var(--color-l-gray-80);
  --color-base-60: var(--color-l-gray-90);
  --color-base-70: var(--color-l-gray-100);
  --color-base-100: var(--color-l-black);
  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%));
  --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%));
  --input-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12),
  0 2px 3px 0 rgba(0,0,0,.05),
  0 1px 1.5px 0 rgba(0,0,0,.03),
  0 1px 2px 0 rgba(0,0,0,.04),
  0 0 0 0 transparent;
  --input-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.17),
  0 2px 3px 0 rgba(0,0,0,.1),
  0 1px 1.5px 0 rgba(0,0,0,.03),
  0 1px 2px 0 rgba(0,0,0,.04),
  0 0 0 0 transparent;
  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028),
  0px 3.4px 6.7px rgba(0, 0, 0, .042),
  0px 15px 30px rgba(0, 0, 0, .07);
  --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);
  /*─────────Original Obsidian Variables──────────*/
  --background-primary: var(--color-l-white);
  --background-primary-alt: var(--color-l-gray-10);
  --background-secondary: var(--color-l-gray-20);
  --background-secondary-alt: var(--color-l-gray-20);
  --background-modifier-border: var(--color-l-gray-40);
  --background-modifier-form-field: var(--color-l-gray-30);
  --background-modifier-form-field-highlighted: var(--color-l-gray-40);
  --background-modifier-box-shadow: var(--color-l-shadow-100);
  --background-modifier-success: var(--color-l-green-300);
  --background-modifier-error: var(--color-l-red-300);
  --background-modifier-error-hover: var(--color-l-red-500);
  --background-modifier-cover: var(--color-l-shadow-cover);
  --text-normal: var(--color-l-black);
  --text-muted: var(--color-l-gray-60);
  --text-faint: var(--color-l-gray-50);
  --text-accent: var(--color-l-yellow-900);
  --text-accent-hover:var(--color-l-yellow-500);
  --text-error: var(--color-l-red);
  --text-error-hover: var(--color-l-red-900);
  --text-highlight-bg: var(--color-l-highlight-yellow);
  --text-highlight-bg-active: var(--color-l-highlight-yellow);
  --highlight-mix-blend-mode: darken;
  --text-selection: var(--color-l-gray-40);
  --text-on-accent: var(--color-l-gray-10);
  --interactive-hover: var(--color-l-gray-10);
  --interactive-accent: var(--color-l-gray-60);
  --interactive-accent-rgb: 207, 182, 150;
  --interactive-accent-hover: var(--color-l-gray-70);
  --interactive-success: var(--color-l-green-500);
  --scrollbar-bg: transparent;
  --scrollbar-thumb-bg: var(--background-modifier-border);
  --scrollbar-active-thumb-bg: var(--interactive-accent);
  /*──────────The PRIMARY Color Palette for Light Theme──────────*/
  --color-l-whiter: hsl(36, 36%, 96.9%);
  --color-l-white: hsl(var(--mono-hsl-0));
  --color-l-gray: var(--color-l-gray-50);
  --color-l-gray-10: hsl(36, 37%, 92%);
  --color-l-gray-20: hsl(35, 35%, 90%);
  --color-l-gray-30: hsl(34, 36%, 88%);
  --color-l-gray-40: hsl(36, 37%, 83%);
  --color-l-gray-50: hsl(34, 37%, 70%);
  --color-l-gray-60: hsl(34, 28%, 60%);
  --color-l-gray-70: hsl(31, 23%, 50%);
  --color-l-gray-80: hsl(34, 27%, 40%);
  --color-l-gray-90: hsl(34, 30%, 37%);
  --color-l-gray-100: hsl(35, 32%, 30%);
  --color-l-black: hsl(var(--mono-hsl-100));
  --color-l-blacker: hsl(32, 55%, 12%);
  --color-l-shadow-10: rgba(168, 160, 148, 0.8);
  --color-l-shadow-50: rgba(180, 172, 161, 0.3);
  --color-l-shadow-100: rgba(75, 70, 64, 0.2);
  --color-l-shadow-cover: rgba(177, 171, 164, 0.5);
  --color-l-yellow: var(--color-l-yellow-500);
  --color-l-yellow-300: hsl(43, 71%, 67%);
  --color-l-yellow-500: hsl(43, 78%, 52%);
  --color-l-yellow-700: hsl(43, 100%, 42%);
  --color-l-yellow-900: hsl(43, 89%, 38%);
  --color-l-red: var(--color-l-red-500);
  --color-l-red-300: hsl(4, 54%, 61%);
  --color-l-red-500: hsl(4, 72%, 55%);
  --color-l-red-700: hsl(4, 56%, 48%);
  --color-l-red-900: hsl(4, 66%, 30%);
  --color-l-blue: var(--color-l-blue-500);
  --color-l-blue-300: hsl(198, 39%, 56%);
  --color-l-blue-500: hsl(205, 66%, 46%);
  --color-l-blue-700: hsl(205, 63%, 39%);
  --color-l-blue-900: hsl(205, 95%, 25%);
  --color-l-orange: var(--color-l-orange-500);
  --color-l-orange-300: hsl(26, 66%, 57%);
  --color-l-orange-500: hsl(21, 82%, 55%);
  --color-l-orange-700: hsl(18, 69%, 50%);
  --color-l-orange-900: hsl(24, 96%, 35%);
  --color-l-orange-a: hsl(27, 81%, 46%);
  --color-l-green: var(--color-l-green-500);
  --color-l-green-300: hsl(154, 58%, 65%);
  --color-l-green-500: hsl(154, 47%, 49%);
  --color-l-green-700: hsl(155, 52%, 38%);
  --color-l-green-900: hsl(165, 63%, 29%);
  --color-l-violet: var(--color-l-violet-500);
  --color-l-violet-300: hsl(270, 50%, 74%);
  --color-l-violet-500: hsl(266, 31%, 57%);
  --color-l-violet-700: hsl(267, 37%, 43%);
  --color-l-violet-900: hsl(266, 70%, 30%);
  /*~ Highlights */
  --ui-color-highlight-text: var(--color-l-black);
  --ui-color-highlight-bg: hsl(43, 85%, 79%);
  --color-highlight-yellow: rgba(255, 187, 0, 0.2);
  --color-highlight-red: rgba(240, 79, 106, 0.2);
  --color-highlight-blue: rgba(40, 178, 194, 0.2);
  --color-highlight-orange: rgba(255, 115, 0, 0.2);
  --color-highlight-green: rgba(153, 189, 36, 0.2);
  --color-highlight-violet: rgba(113, 122, 255, 0.2);
  /*~ Graph View */
  --graph-color-node-resolved: var(--color-l-blue-500);
  --graph-color-node-unresolved: var(--color-l-yellow-500);
  --graph-color-node-unresolved-opacity: 1;
  --graph-color-node-tag: var(--color-l-red-500);
  --graph-color-node-attachment: var(--color-l-green-300);
  --graph-color-node-focused: var(--color-l-gray-80);
  --graph-color-node-border-hover: var(--color-l-gray-50);
  --graph-color-node-arrow: var(--color-l-gray-60);
  --graph-color-node-line: var(--color-l-gray-40);
  --graph-color-node-line-hover: var(--color-l-gray-50);
  --graph-color-node-text: var(--color-l-black);
}

/*────────────────────────────────────
            Dark Theme
────────────────────────────────────*/
.theme-dark {
  /*─────────Original Obsidian Variables──────────*/
  color-scheme: dark;
  --mono-rgb-0: 35, 30, 26;
  --mono-rgb-100: 230, 207, 179;
  --color-red-rgb: 219, 96, 87;
  --color-red: var(--color-d-red);
  --color-green-rgb: 56, 178, 125;
  --color-green: var(--color-d-green);
  --color-orange: var(--color-d-orange);
  --color-yellow: var(--color-d-yellow);
  --color-blue: var(--color-d-blue);
  --color-base-00: var(--color-d-black);
  --color-base-10: var(--color-d-gray-90);
  --color-base-20: var(--color-d-gray-80);
  --color-base-25: var(--color-d-gray-70);
  --color-base-30: var(--color-d-gray-60);
  --color-base-35: var(--color-d-gray-50);
  --color-base-40: var(--color-d-gray-40);
  --color-base-50: var(--color-d-gray-30);
  --color-base-60: var(--color-d-gray-20);
  --color-base-70: var(--color-d-gray-10);
  --color-base-100: var(--color-d-white);
  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%));
  --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%));
  /* Backgrounds */
  --background-primary: var(--color-d-gray-70);
  --background-primary-alt: var(--color-d-gray-90);
  --background-secondary: var(--color-d-black);
  --background-secondary-alt: var(--color-d-black);
  --background-modifier-hover: rgba(var(--mono-rgb-100), 0.05);
  --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15);
  --background-modifier-border: var(--color-d-gray-50);
  --background-modifier-border-hover: var(--color-base-35);
  --background-modifier-border-focus: var(--color-base-40);
  --background-modifier-error-rgb: var(--color-red-rgb);
  --background-modifier-error: var(--color-d-red-500);
  --background-modifier-error-hover: var(--color-d-red-700);
  --background-modifier-success-rgb: var(--color-green-rgb);
  --background-modifier-success: var(--color-d-green-300);
  --background-modifier-message: rgba(0, 0, 0, 0.9);
  --background-modifier-form-field: var(--color-d-blacker);
  --background-modifier-form-field-highlighted: var(--color-d-black);
  --background-modifier-box-shadow: var(--color-d-shadow-100);
  --background-modifier-cover: var(--color-d-shadow-cover);
  --text-normal: var(--color-d-white);
  --text-muted: var(--color-d-gray-20);
  --text-faint: var(--color-d-gray-30);
  --text-accent: var(--color-d-yellow-500);
  --text-accent-hover:var(--color-d-yellow-300) ;
  --text-error: var(--color-d-red-500);
  --text-error-hover: var(--color-d-red-300);
  --text-highlight-bg: var(--color-d-highlight-yellow);
  --text-highlight-bg-active: var(--color-d-highlight-yellow);
  --highlight-mix-blend-mode: lighten;
  --text-selection: var(--color-d-gray-50);
  --text-on-accent: var(--color-d-white);
  --interactive-hover: var(--color-d-gray-60);
  --interactive-accent: var(--color-d-gray-40);
  --interactive-accent-rgb: 92, 78, 61;
  --interactive-accent-hover: var(--color-d-gray-50);
  --interactive-success: var(--color-d-green-700);
  --scrollbar-bg: transparent;
  --scrollbar-thumb-bg: var(--background-modifier-border);
  --scrollbar-active-thumb-bg: var(--interactive-accent);
  /*──────────The PRIMARY Color Palette for Dark Theme──────────*/
  --color-d-whiter: hsl(33, 66%, 90%);
  --color-d-white: hsl(34, 50%, 80%);
  --color-d-gray: var(--color-d-gray-50);
  --color-d-gray-10: hsl(34, 18%, 62%);
  --color-d-gray-20: hsl(35, 27%, 55%);
  --color-d-gray-30: hsl(34, 24%, 30%);
  --color-d-gray-40: hsl(33, 22%, 30%);
  --color-d-gray-50: hsl(33, 20%, 20%);
  --color-d-gray-60: hsl(30, 19%, 17%);
  --color-d-gray-70: hsl(27, 14%, 15%);
  --color-d-gray-80: hsl(32, 19%, 13%);
  --color-d-gray-90: hsl(30, 15%, 13%);
  --color-d-gray-100: hsl(30, 20%, 8%);
  --color-d-black: hsl(27, 15%, 12%);
  --color-d-blacker: hsl(26, 16%, 9%);
  --color-d-shadow-10: rgba(29, 21, 13, 0.45);
  --color-d-shadow-50: rgba(29, 26, 22, 0.75);
  --color-d-shadow-100: rgba(19, 16, 13, 0.95);
  --color-d-shadow-cover: rgba(37, 34, 29, 0.74);
  --color-d-yellow: var(--color-d-yellow-500);
  --color-d-yellow-300: hsl(46, 91%, 69%);
  --color-d-yellow-500: hsl(50, 100%, 46%);
  --color-d-yellow-700: hsl(43, 100%, 42%);
  --color-d-yellow-900: hsl(39, 92%, 33%);
  --color-d-yellow-a: hsl(43, 75%, 52%);
  --color-d-red: var(--color-d-red-500);
  --color-d-red-300: hsl(4, 100%, 68%);
  --color-d-red-500: hsl(4, 65%, 60%);
  --color-d-red-700: hsl(4, 90%, 61%);
  --color-d-red-900: hsl(4, 77%, 38%);
  --color-d-red-a: hsl(4, 61%, 53%);
  --color-d-blue: var(--color-d-blue-500);
  --color-d-blue-300: hsl(198, 39%, 56%);
  --color-d-blue-500: hsl(198, 62%, 57%);
  --color-d-blue-700: hsl(198, 57%, 55%);
  --color-d-blue-900: hsl(198, 75%, 35%);
  --color-d-blue-a: hsl(197, 58%, 48%);
  --color-d-orange: var(--color-d-orange-500);
  --color-d-orange-300: hsl(22, 92%, 64%);
  --color-d-orange-500: hsl(22, 92%, 57%);
  --color-d-orange-700: hsl(21, 88%, 51%);
  --color-d-orange-900: hsl(20, 80%, 41%);
  --color-d-orange-a: hsl(27, 77%, 51%);
  --color-d-green: var(--color-d-green-500);
  --color-d-green-300: hsl(150, 66%, 53%);
  --color-d-green-500: hsl(154, 52%, 46%);
  --color-d-green-700: hsl(154, 61%, 39%);
  --color-d-green-900: hsl(155, 81%, 24%);
  --color-d-green-a: hsl(96, 50%, 49%);
  --color-d-violet: var(--color-d-violet-500);
  --color-d-violet-300: hsl(256, 63%, 74%);
  --color-d-violet-500: hsl(263, 60%, 67%);
  --color-d-violet-700: hsl(256, 52%, 57%);
  --color-d-violet-900: hsl(256, 44%, 50%);
  --color-d-violet-a: hsl(246, 53%, 67%);
  /*~ Highlights */
  --ui-color-highlight-text: var(--color-d-black);
  --ui-color-highlight-bg: hsl(43, 61%, 56%);
  --color-highlight-yellow: rgba(255, 187, 0, 0.2);
  --color-highlight-red: rgba(240, 79, 106, 0.2);
  --color-highlight-blue: rgba(40, 178, 194, 0.2);
  --color-highlight-orange: rgba(255, 115, 0, 0.2);
  --color-highlight-green: rgba(153, 189, 36, 0.2);
  --color-highlight-violet: rgba(113, 122, 255, 0.2);
  /*~ Graph View */
  --graph-color-node-resolved: var(--color-d-blue-900);
  --graph-color-node-unresolved: var(--color-d-yellow-700);
  --graph-color-node-unresolved-opacity: 1;
  --graph-color-node-tag: var(--color-d-red-500);
  --graph-color-node-attachment: var(--color-d-green-500);
  --graph-color-node-focused: var(--color-d-white);
  --graph-color-node-border-hover: var(--color-d-gray-10);
  --graph-color-node-arrow: var(--color-d-gray-40);
  --graph-color-node-line: var(--color-d-gray-50);
  --graph-color-node-line-hover: var(--color-d-gray-40);
  --graph-color-node-text: var(--color-d-gray-10);
}
/*──────────Note Colors──────────*/
.theme-light {
    --md-color-text: var(--text-normal);
    --md-color-text-muted: var(--text-muted);
    --md-color-text-faint: var(--text-faint);
    --md-color-bold: var(--color-l-red-500);
    --md-color-italic: var(--color-l-blue-500);
    --md-color-bolditalic: var(--color-l-blacker);
    --md-color-strikethrough: var(--text-faint);
    --md-color-highlight-text: var(--text-normal);
    --md-color-highlight-bg: var(--color-highlight-yellow);
    --md-color-bold-highlight-text: var(--text-normal);
    --md-color-bold-highlight-bg: var(--color-highlight-red);
    --md-color-italic-highlight-text: var(--text-normal);
    --md-color-italic-highlight-bg: var(--color-highlight-blue);
    --md-color-bi-highlight-text: var(--text-normal);
    --md-color-bi-highlight-bg: var(--color-highlight-green);
    --md-color-comment: var(--text-muted);
    --md-color-footnote: var(--text-normal);
    --md-color-footnote-link: var(--color-l-green-700);
    --md-color-footnote-link-hover: var(--color-l-green-500);
    --md-color-footnote-link-active: var(--color-l-green-900);
    --md-color-reslink: var(--color-l-yellow-700);
    --md-color-reslink-hover: var(--color-l-yellow-500);
    --md-color-reslink-active: var(--color-l-yellow-900);
    --md-color-unreslink: var(--text-muted);
    --md-color-unreslink-hover: var(--color-l-yellow-700);
    --md-color-unreslink-active: var(--color-l-yellow-900);
    --md-color-extlink: var(--color-l-yellow-700);
    --md-color-extlink-hover: var(--color-l-yellow-500);
    --md-color-extlink-active: var(--color-l-yellow-900);
    --md-color-blockquotes: var(--text-normal);
    --md-color-blockquotes-formatting: var(--text-faint);
    --md-color-blockquotes-border: var(--background-modifier-border);
    --md-color-blockquotes-bg: var(--color-l-whiter);
    --md-color-tag: var(--color-l-blue-700);
    --md-color-tag-hover: var(--color-l-blue-500);
    --md-color-tag-active: var(--color-l-blue-900);
    --md-color-code-yellow-1: var(--color-l-yellow-500);
    --md-color-code-yellow-2: var(--color-l-yellow-700);
    --md-color-code-red-1: var(--color-l-red-300);
    --md-color-code-red-2: var(--color-l-red-500);
    --md-color-code-blue-1: var(--color-l-blue-500);
    --md-color-code-blue-2: var(--color-l-blue-700);
    --md-color-code-gray: var(--color-l-gray-50);
    --md-color-code-white: var(--color-l-blacker);
    --md-color-formatting: var(--color-l-gray-50);
    --md-color-border: var(--background-modifier-border);
    --md-embed-bg: var(--color-l-gray-10);
    --md-color-bullet: var(--md-color-text-faint);
    --md-find-highlight-bg: var(--color-highlight-violet);
    --md-unchecked-bg-color: rgba(255, 255, 255, 0.4);
    --md-unchecked-bg-color-hover: var(--color-l-gray-whiter);
    --md-unchecked-bg-color-active: var(--color-l-gray-20);
    --md-checked-bg-color: var(--color-l-green-500);
  }

  .theme-dark {
    --md-color-text: var(--text-normal);
    --md-color-text-muted: var(--text-muted);
    --md-color-text-faint: var(--text-faint);
    --md-color-bold: var(--color-d-red-700);
    --md-color-italic: var(--color-d-blue-700);
    --md-color-bolditalic: var(--color-d-whiter);
    --md-color-strikethrough: var(--text-faint);
    --md-color-highlight-text: var(--text-normal);
    --md-color-highlight-bg: var(--color-highlight-yellow);
    --md-color-bold-highlight-text: var(--text-normal);
    --md-color-bold-highlight-bg: var(--color-highlight-red);
    --md-color-italic-highlight-text: var(--text-normal);
    --md-color-italic-highlight-bg: var(--color-highlight-blue);
    --md-color-bi-highlight-text: var(--text-normal);
    --md-color-bi-highlight-bg: var(--color-highlight-green);
    --md-color-comment: var(--text-muted);
    --md-color-footnote: var(--text-normal);
    --md-color-footnote-link: var(--color-d-green-700);
    --md-color-footnote-link-hover: var(--color-d-green-500);
    --md-color-footnote-link-active: var(--color-d-green-900);
    --md-color-reslink: var(--color-d-yellow-500);
    --md-color-reslink-hover: var(--color-d-yellow-300);
    --md-color-reslink-active: var(--color-d-yellow-700);
    --md-color-unreslink: var(--text-muted);
    --md-color-unreslink-hover: var(--color-d-yellow-500);
    --md-color-unreslink-active: var(--color-d-yellow-700);
    --md-color-extlink: var(--color-d-yellow-500);
    --md-color-extlink-hover: var(--color-d-yellow-300);
    --md-color-extlink-active: var(--color-d-yellow-700);
    --md-color-blockquotes: var(--text-normal);
    --md-color-blockquotes-formatting: var(--text-faint);
    --md-color-blockquotes-border: var(--background-modifier-border);
    --md-color-blockquotes-bg: var(--color-d-blacker);
    --md-color-tag: var(--color-d-blue-700);
    --md-color-tag-hover: var(--color-d-blue-300);
    --md-color-tag-active: var(--color-d-blue-900);
    --md-color-code-yellow-1: var(--color-d-yellow-700);
    --md-color-code-yellow-2: var(--color-d-yellow-500);
    --md-color-code-red-1: var(--color-d-red-500);
    --md-color-code-red-2: var(--color-d-red-300);
    --md-color-code-blue-1: var(--color-d-blue-300);
    --md-color-code-blue-2: var(--color-d-blue-500);
    --md-color-code-gray: var(--text-faint);
    --md-color-code-white: var(--color-d-whiter);
    --md-color-formatting: var(--color-d-gray-40);
    --md-color-border: var(--background-modifier-border);
    --md-embed-bg: var(--color-d-gray-90);
    --md-color-bullet: var(--md-color-text-faint);
    --md-find-highlight-bg: var(--color-highlight-violet);
    --md-unchecked-bg-color: rgba(0, 0, 0, 0.2);
    --md-unchecked-bg-color-hover: var(--color-d-gray-100);
    --md-unchecked-bg-color-active: var(--color-d-gray-70);
    --md-checked-bg-color: var(--color-d-green-900);
  }
/*──────────Emphasis──────────*/
/* Bold */
strong,
.cm-strong,
.cm-s-obsidian span.cm-quote.cm-strong,
.markdown-preview-view strong {
  color: var(--md-color-bold);
}

/* Italic */
em,
.cm-em,
.cm-s-obsidian span.cm-quote.cm-em,
.markdown-preview-view em {
  color: var(--md-color-italic);
}

/* Bold & Italic */
strong em, em strong,
.cm-strong.cm-em,
.markdown-preview-view strong em {
  color: var(--md-color-bolditalic);
}

/* Strikethrough */
del,
.cm-strikethrough,
.cm-s-obsidian span.cm-quote.cm-strikethrough,
.markdown-preview-view del {
  color: var(--md-color-strikethrough);
}
del:hover,
.cm-strikethrough:hover,
.cm-s-obsidian span.cm-quote.cm-strikethrough:hover,
.markdown-preview-view del:hover {
  text-decoration: none;
}

.markdown-preview-view h1 del, .markdown-preview-view h2 del, .markdown-preview-view h3 del, .markdown-preview-view h4 del, .markdown-preview-view h5 del, .markdown-preview-view h6 del {
  color: var(--md-color-strikethrough);
}

/* Highlight [Highlight] */
mark,
.cm-s-obsidian span.cm-highlight,
.markdown-source-view.is-live-preview .cm-header.cm-formatting-highlight,
.cm-s-obsidian span.cm-quote.cm-highlight,
.callout mark,
.markdown-preview-view mark,
.popover mark,
.markdown-embed mark {
  color: var(--md-color-highlight-text);
  background: var(--md-color-highlight-bg);
  padding: 2px 2px;
  border-radius: var(--size-2-1);
}

/* Highlight [Bold + Highlight] */
.cm-s-obsidian span.cm-highlight.cm-strong,
.cm-s-obsidian span.cm-quote.cm-highlight.cm-strong {
  color: var(--md-color-bold-highlight-text);
  background: var(--md-color-bold-highlight-bg);
}

.markdown-preview-view.markdown-preview-view mark strong,
.markdown-embed.markdown-embed mark strong,
.reveal mark strong {
  color: var(--md-color-bold-highlight-text);
}

.callout strong > mark,
.markdown-preview-view.markdown-preview-view strong > mark,
.popover strong > mark,
.markdown-embed.markdown-embed strong > mark,
.reveal strong > mark {
  background: var(--md-color-bold-highlight-bg);
}

/* Highlight [Italic + Highlight] */
.cm-s-obsidian span.cm-highlight.cm-em,
.cm-s-obsidian span.cm-quote.cm-highlight.cm-em {
  color: var(--md-color-italic-highlight-text);
  background: var(--md-color-italic-highlight-bg);
}

.callout em > mark,
.markdown-preview-view mark em,
.popover mark em,
.markdown-embed mark em,
.reveal mark em {
  color: var(--md-color-italic-highlight-text);
}

.callout em > mark,
.markdown-preview-view.markdown-preview-view em > mark,
.popover em > mark,
.markdown-embed.markdown-embed em > mark,
.reveal em > mark {
  background: var(--md-color-italic-highlight-bg);
}

/* Highlight [Bold + Italic + Highlight] */
.cm-s-obsidian span.cm-highlight.cm-strong.cm-em,
.cm-s-obsidian span.cm-quote.cm-highlight.cm-strong.cm-em {
  color: var(--md-color-bi-highlight-text);
  background: var(--md-color-bi-highlight-bg);
}

.callout strong > em > mark,
.markdown-preview-view.markdown-preview-view strong > em > mark,
.popover strong > em > mark,
.markdown-embed.markdown-embed strong > em > mark,
.reveal strong > em > mark {
  background: var(--md-color-bi-highlight-bg);
}

/* Comments */
.cm-s-obsidian span.cm-comment,
.cm-s-obsidian span.cm-comment.cm-quote {
  color: var(--md-color-comment);
}
/* Modal Close Close Buttons */
.slides-close-btn,
.modal-close-button {
  right: calc(var(--size-4-2) + var(--size-2-1));
  top: var(--size-4-2);
  font-family: Inter, sans-serif;
  font-weight: 200;
  font-size: var(--size-4-6);
  height: var(--size-4-6);
  width: var(--size-4-6);
  border-radius: var(--size-4-6);
  z-index: 9;
}
.slides-close-btn:before,
.modal-close-button:before {
  position: absolute;
  right: 4px;
  top: 0;
}
.theme-light .slides-close-btn:before,
.theme-light .modal-close-button:before {
  color: var(--color-l-gray-20);
}
.theme-dark .slides-close-btn:before,
.theme-dark .modal-close-button:before {
  color: var(--color-d-gray-80);
}
.theme-light .slides-close-btn,
.theme-light .modal-close-button {
  background: var(--color-l-red-300);
  box-shadow: 0px 1px 2px 0px rgba(100, 100, 100, 0.5), 0px -2px 0px 0px rgba(100, 20, 20, 0.18) inset;
}
.theme-light .slides-close-btn:hover,
.theme-light .modal-close-button:hover {
  background: var(--color-l-red-500);
}
.theme-light .slides-close-btn:active,
.theme-light .modal-close-button:active {
  background: var(--color-l-red-700);
  box-shadow: 0px 0px 0px 2px rgba(150, 20, 20, 0.55) inset;
}
.theme-light .slides-close-btn:active:before,
.theme-light .modal-close-button:active:before {
  color: var(--color-l-red-900);
}
.theme-dark .slides-close-btn,
.theme-dark .modal-close-button {
  background: var(--color-d-red-500);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25), 0px -2px 0px 0px rgba(50, 10, 10, 0.35) inset;
}
.theme-dark .slides-close-btn:hover,
.theme-dark .modal-close-button:hover {
  background: var(--color-d-red-300);
}
.theme-dark .slides-close-btn:active,
.theme-dark .modal-close-button:active {
  background: var(--color-d-red-700);
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.45) inset;
}
.theme-dark .slides-close-btn:active:before,
.theme-dark .modal-close-button:active:before {
  color: var(--color-d-red-900);
}
/*──────────Blockquotes──────────*/
/* Source View Blockquotes */
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
    font-style: italic;
    background: var(--md-color-blockquotes-bg);
    padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-3);
    border-left: 2px solid var(--md-color-blockquotes-border);
  }
  .markdown-source-view.mod-cm6 .cm-blockquote-border {
    border-left: 2px solid var(--md-color-blockquotes-border);
  }

  /* Source View Emphasis in Blockquotes Fix */
  .cm-s-obsidian span.cm-quote {
    color: var(--md-color-blockquotes);
  }
  .cm-s-obsidian span.cm-formatting-quote {
    color: var(--md-color-blockquotes-formatting);
  }

  /* Preview View Blockquotes */
  .markdown-preview-view blockquote {
    font-style: italic;
    background: var(--md-color-blockquotes-bg);
    padding: var(--size-4-4) var(--size-4-9) var(--size-4-4) var(--size-4-9);
    border-radius: var(--size-4-2);
    border: 1px solid var(--md-color-blockquotes-border);
    margin-left: var(--size-0-0);
    margin-right: var(--size-0-0);
  }
  /*──────────Internal & External Links──────────*/
/* Opacity of Unresolved Links Fix */
.markdown-source-view.mod-cm6 .is-unresolved,
.markdown-preview-view .internal-link.is-unresolved {
  opacity: 1;
}

/* Source View Resolved Links */
.markdown-source-view.mod-cm6 span:where(.cm-url.cm-url, .cm-blockid, .cm-inline-code.cm-link, .cm-hmd-internal-link, .cm-header.cm-hmd-internal-link, .cm-hmd-internal-link .cm-underline) {
  color: var(--md-color-reslink);
  text-decoration: underline solid 1px;
  text-underline-position: under;
  transition: var(--duration-superfast) var(--motion-smooth);
}
.markdown-source-view.mod-cm6 span:where(.cm-url.cm-url, .cm-blockid, .cm-inline-code.cm-link, .cm-hmd-internal-link, .cm-header.cm-hmd-internal-link, .cm-hmd-internal-link .cm-underline):hover {
  color: var(--md-color-reslink-hover);
  text-decoration: underline solid 1px;
}
.markdown-source-view.mod-cm6 span:where(.cm-url.cm-url, .cm-blockid, .cm-inline-code.cm-link, .cm-hmd-internal-link, .cm-header.cm-hmd-internal-link, .cm-hmd-internal-link .cm-underline):active {
  color: var(--md-color-reslink-active);
  text-decoration: underline solid 1px;
}
.no-link-underline.no-link-underline .markdown-source-view.mod-cm6 span:where(.cm-url.cm-url, .cm-blockid, .cm-inline-code.cm-link, .cm-hmd-internal-link, .cm-header.cm-hmd-internal-link, .cm-hmd-internal-link .cm-underline) {
  text-decoration: none;
}

/* Source View Unresolved Links */
.markdown-source-view.mod-cm6 span.is-unresolved span:where(.cm-url, .cm-blockid, .cm-link, .cm-underline) {
  color: var(--md-color-unreslink);
  text-decoration: underline solid 1px;
  text-underline-position: under;
  transition: var(--duration-superfast) var(--motion-smooth);
}
.markdown-source-view.mod-cm6 span.is-unresolved span:where(.cm-url, .cm-blockid, .cm-link, .cm-underline):hover {
  color: var(--md-color-unreslink-hover);
}
.markdown-source-view.mod-cm6 span.is-unresolved span:where(.cm-url, .cm-blockid, .cm-link, .cm-underline):active {
  color: var(--md-color-unreslink-active);
}
.no-link-underline.no-link-underline .markdown-source-view.mod-cm6 span.is-unresolved {
  text-decoration: none;
}

.markdown-source-view.mod-cm6 span.is-unresolved .cm-hmd-internal-link {
  color: var(--md-color-unreslink);
}
.markdown-source-view.mod-cm6 span.is-unresolved .cm-hmd-internal-link:hover {
  text-decoration: none;
}

.no-link-underline .cm-s-obsidian span.cm-hmd-internal-link:hover {
  text-decoration: none;
}
/*────────────────────────────────────
        Buttons Component
────────────────────────────────────*/
/* don't remove !important */
.theme-light button,
.theme-dark button {
  font-family: var(Barlow) !important;
  padding: var(--size-2-3) var(--size-4-4) var(--size-4-2) var(--size-4-4);
  margin-top: var(--size-2-3);
  margin-bottom: var(--size-2-3);
  margin-right: var(--size-4-2);
  border-radius: var(--size-4-5);
  transition: var(--duration-superfast) var(--motion-smooth);
}
.theme-light button:last-child,
.theme-dark button:last-child {
  margin-right: 0;
}
.theme-light button:only-child,
.theme-dark button:only-child {
  margin-left: 0;
  margin-right: 0;
}
.mod-community-plugin .setting-item-control .theme-light button,
.mod-community-plugin .setting-item-control .theme-dark button {
  box-shadow: none;
}
.graph-controls .theme-light button,
.graph-controls .theme-dark button {
  font-size: var(--font-scale-0);
}
.theme-light button.copy-code-button,
.theme-dark button.copy-code-button {
  padding: var(--size-2-1) var(--size-4-2) var(--size-2-3) var(--size-4-2) !important;
  border-radius: var(--size-2-2);
  margin-top: var(--size-2-2);
  margin-right: var(--size-2-2);
}

.theme-light .modal button,
.theme-light .graph-controls button,
.theme-light .workspace button,
.theme-light .popover button {
  border: 1px solid rgba(100, 100, 100, 0.4);
  box-shadow: 0 -2px 0 0 rgba(100, 100, 100, 0.4) inset, 0 2px 4px 0 rgba(100, 100, 100, 0.3);
}
.theme-light .modal button:active,
.theme-light .graph-controls button:active,
.theme-light .workspace button:active,
.theme-light .popover button:active {
  box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.3) inset, 0 1px 1px 0 rgba(100, 100, 100, 0.1);
  transition: var(--duration-superfast) var(--motion-smooth);
}
.theme-dark .modal button,
.theme-dark .graph-controls button,
.theme-dark .workspace button,
.theme-dark .popover button {
  color: var(--color-d-white);
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.28) inset, 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.theme-dark .modal button:active,
.theme-dark .graph-controls button:active,
.theme-dark .workspace button:active,
.theme-dark .popover button:active {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  transition: var(--duration-superfast) var(--motion-smooth);
}

.theme-light .modal button:not(.mod-cta, .mod-warning),
.theme-light .modal.mod-settings button:not(.mod-cta, .mod-warning),
.theme-light .workspace button:not(.graph-controls button, .document-search-button),
.theme-light .popover button:not(.graph-controls button, .document-search-button),
.theme-light .search-result-file-match-destination-file {
  color: var(--color-l-gray-80);
  background: var(--color-l-whiter);
  border: 1px solid rgba(100, 100, 100, 0.3);
  box-shadow: 0 -2px 0 0 rgba(100, 100, 100, 0.2) inset, 0 2px 4px 0 rgba(100, 100, 100, 0.1);
}
.theme-light .modal button:not(.mod-cta, .mod-warning):hover, .theme-light .modal button:not(.mod-cta, .mod-warning):focus,
.theme-light .modal.mod-settings button:not(.mod-cta, .mod-warning):hover,
.theme-light .modal.mod-settings button:not(.mod-cta, .mod-warning):focus,
.theme-light .workspace button:not(.graph-controls button, .document-search-button):hover,
.theme-light .workspace button:not(.graph-controls button, .document-search-button):focus,
.theme-light .popover button:not(.graph-controls button, .document-search-button):hover,
.theme-light .popover button:not(.graph-controls button, .document-search-button):focus,
.theme-light .search-result-file-match-destination-file:hover,
.theme-light .search-result-file-match-destination-file:focus {
  background: var(--color-l-gray-10);
}
.theme-light .modal button:not(.mod-cta, .mod-warning):active,
.theme-light .modal.mod-settings button:not(.mod-cta, .mod-warning):active,
.theme-light .workspace button:not(.graph-controls button, .document-search-button):active,
.theme-light .popover button:not(.graph-controls button, .document-search-button):active,
.theme-light .search-result-file-match-destination-file:active {
  box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.1) inset, 0 1px 1px 0 rgba(100, 100, 100, 0.1);
  transition: var(--duration-superfast) var(--motion-smooth);
}
.theme-dark .modal button:not(.mod-cta, .mod-warning),
.theme-dark .modal.mod-settings button:not(.mod-cta, .mod-warning),
.theme-dark .workspace button:not(.graph-controls button, .document-search-button),
.theme-dark .popover button:not(.graph-controls button, .document-search-button),
.theme-dark .search-result-file-match-destination-file {
  color: var(--color-d-white);
  background: var(--color-d-black);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.3) inset, 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.theme-dark .modal button:not(.mod-cta, .mod-warning):hover,
.theme-dark .modal.mod-settings button:not(.mod-cta, .mod-warning):hover,
.theme-dark .workspace button:not(.graph-controls button, .document-search-button):hover,
.theme-dark .popover button:not(.graph-controls button, .document-search-button):hover,
.theme-dark .search-result-file-match-destination-file:hover {
  background: var(--color-d-blacker);
}
.theme-dark .modal button:not(.mod-cta, .mod-warning):active,
.theme-dark .modal.mod-settings button:not(.mod-cta, .mod-warning):active,
.theme-dark .workspace button:not(.graph-controls button, .document-search-button):active,
.theme-dark .popover button:not(.graph-controls button, .document-search-button):active,
.theme-dark .search-result-file-match-destination-file:active {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  transition: var(--duration-superfast) var(--motion-smooth);
}

button.clickable-icon[aria-label="Change sort order"] {
  margin-left: 0;
  margin-right: var(--size-4-2);
}

span.community-theme-remove-button.clickable-icon {
  top: 6px;
  right: -3px;
  color: var(--text-on-accent);
  padding: var(--size-2-2) var(--size-2-2) var(--size-0-0) var(--size-2-2);
}
.theme-light span.community-theme-remove-button.clickable-icon {
  color: var(--color-l-gray-20);
  background: var(--color-l-red-300);
  box-shadow: 0 1px 2px 0 rgba(100, 100, 100, 0.5), 0 -2px 0 0 rgba(100, 20, 20, 0.18) inset;
}
.theme-light span.community-theme-remove-button.clickable-icon:hover {
  background: var(--color-l-red-500);
}
.theme-light span.community-theme-remove-button.clickable-icon:active {
  color: var(--color-l-red-900);
  background: var(--color-l-red-700);
  box-shadow: 0 0 0 2px rgba(150, 20, 20, 0.55) inset;
  transition: var(--duration-superfast) var(--motion-smooth);
}
.theme-dark span.community-theme-remove-button.clickable-icon {
  color: var(--color-d-white);
  background: var(--color-d-red-500);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 -2px 0 0 rgba(85, 8, 8, 0.38) inset;
}
.theme-dark span.community-theme-remove-button.clickable-icon:hover {
  background: var(--color-d-red-300);
}
.theme-dark span.community-theme-remove-button.clickable-icon:active {
  color: var(--color-d-red-900);
  background: var(--color-d-red-700);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45) inset;
  transition: var(--duration-superfast) var(--motion-smooth);
}
/*────────────────────────────────────
    Toggle (Checkboxes for Modals)
────────────────────────────────────*/
.checkbox-container {
    height: calc(3px + var(--size-4-6));
    width: calc(2px + var(--size-4-12));
    border-radius: var(--size-4-8);
  }
  .checkbox-container:after {
    height: calc(4px + var(--size-4-4));
    width: calc(4px + var(--size-4-4));
    border-radius: var(--size-4-8);
    margin: 2.5px 0 0 0px;
  }
  .checkbox-container:active::after {
    width: calc(4px + var(--size-4-6));
  }
  .checkbox-container.is-enabled {
    transition: var(--duration-fast-2) var(--motion-smooth);
  }
  .checkbox-container.is-enabled:after {
    transform: translate3d(24px, 0, 0);
    margin-left: 1px;
  }
  .checkbox-container.is-enabled:active::after {
    left: -8px;
  }
  .theme-light .checkbox-container {
    background: var(--color-l-gray-40);
    border: 1px solid var(--color-l-gray-40);
    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5), 0px 0px 2px 1px rgba(100, 100, 100, 0.35) inset;
  }
  .theme-light .checkbox-container::after {
    background: var(--color-l-whiter);
    box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.45), 0px -2px 0px 0px rgba(100, 100, 100, 0.15) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.9) inset;
  }
  .theme-light .checkbox-container.is-enabled {
    border: 1px solid var(--color-l-green-300);
    background: var(--color-l-green-500);
  }
  .theme-dark .checkbox-container {
    background: var(--color-d-gray-40);
    border: 1px solid var(--color-d-gray-30);
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 0px 2px 1px rgba(0, 0, 0, 0.35) inset;
  }
  .theme-dark .checkbox-container::after {
    background: var(--color-d-white);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.45), 0px -2px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.35) inset;
  }
  .theme-dark .checkbox-container.is-enabled {
    border: 1px solid var(--color-d-green-700);
    background: var(--color-d-green-900);
  }

  /*────────────────────────────────────
                  Slider
  ────────────────────────────────────*/
  input[type=range] {
    min-width: 150px;
    background-color: transparent;
    padding: 0;
    -webkit-appearance: none;
    cursor: default;
  }
  input[type=range]::-webkit-slider-runnable-track {
    height: var(--size-2-3);
    border-radius: var(--size-2-3);
  }
  .theme-light input[type=range]::-webkit-slider-runnable-track {
    background: var(--background-modifier-border);
    border-radius: var(--size-2-2);
    border: 1px solid rgba(100, 100, 100, 0.2);
  }
  .theme-dark input[type=range]::-webkit-slider-runnable-track {
    background: var(--background-modifier-border);
    border-radius: var(--size-2-2);
    border: 1px solid rgba(0, 0, 0, 0.4);
  }
  input[type=range]::-webkit-slider-thumb {
    height: var(--size-4-5);
    width: var(--size-4-2);
    margin-top: -2px;
    cursor: ew-resize;
    transition: var(--duration-fast-1) var(--motion-jumpy);
    border-radius: var(--size-4-4);
  }
  .theme-light input[type=range]::-webkit-slider-thumb {
    background: var(--color-l-blue-300);
    border: 1px solid rgba(100, 100, 100, 0.5);
    box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.45), 0px -2px 0px 0px rgba(100, 100, 100, 0.15) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.35) inset;
  }
  .theme-dark input[type=range]::-webkit-slider-thumb {
    background: var(--color-d-blue-700);
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.45), 0px -2px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.35) inset;
  }

/*────────────────────────────────────
            Tab Header
────────────────────────────────────*/
/*─────────Tab Header Container──────────*/
.workspace-split.mod-left-split .workspace-tab-header-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.workspace-split.mod-right-split .workspace-tab-header-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.workspace-tabs {
  padding-right: 0;
}

/*─────────Tab Header Icons──────────*/
.workspace-tab-header-container {
  height: none;
  padding: var(--scale-0-0) var(--scale-0-0) var(--scale-0-0) var(--scale-0-0);
  margin: var(--scale-2-6) var(--scale-0-0) var(--scale-0-0) var(--scale-0-0);
}

.mod-left-split .workspace-tab-header, .mod-right-split .workspace-tab-header {
  /*
  Applied for All 
  Tab Header Icon Container
  */
  height: var(--scale-2-18);
  padding: 4px;
  margin: 0px;
  border-radius: var(--scale-2-4);
  transition: var(--duration-superfast) var(--motion-smooth);
}

.workspace-tab-header-inner {
  background: transparent !important;
}
.workspace-tab-header-inner, .workspace-tab-header-inner-icon {
  padding: var(--scale-0-0);
}
.workspace-tab-header.is-active {
  border-radius: var(--scale-2-4);
}
.workspace-tab-container-before.is-before-active, .workspace-tab-container-after.is-after-active, .workspace-tab-header.is-before-active, .workspace-tab-header.is-after-active {
  background: transparent;
}

.workspace-tab-container-before, .workspace-tab-container-after {
  margin: calc(-1 * var(--scale-2-3));
}

/*─────────Tab Header for Light Mode──────────*/
.theme-light .workspace-tab-header.is-active {
  background: var(--color-l-white);
  box-shadow: 0px -2px 0px 0px rgba(100, 100, 100, 0.15) inset;
}
.theme-light .workspace-tab-header:not(.workspace-tab-header.is-active) {
  border: 1px solid var(--color-l-gray-50);
}
.theme-light .workspace-tab-header:not(.workspace-tab-header.is-active):hover {
  border: 1px solid var(--color-l-gray-60);
  transform: translateY(-2px);
  box-shadow: 0px 3px 3px -1px rgba(100, 100, 100, 0.15);
  cursor: pointer;
}
.theme-light .workspace-tab-header:not(.workspace-tab-header.is-active):hover .workspace-tab-header-inner-icon {
  color: var(--color-l-gray-60);
}
.theme-light .workspace-tab-header:not(.workspace-tab-header.is-active):active {
  transform: translateY(2px);
  box-shadow: 0px 0px 0px 2px rgba(150, 150, 150, 0.15) inset;
}
.theme-light .mod-left-split .workspace-tab-header.is-active:nth-child(3n+1) {
  color: var(--color-l-yellow-500);
  border: 1px solid var(--color-l-yellow-500);
}
.theme-light .mod-left-split .workspace-tab-header.is-active:nth-child(3n+2) {
  color: var(--color-l-red-500);
  border: 1px solid var(--color-l-red-500);
}
.theme-light .mod-left-split .workspace-tab-header.is-active:nth-child(3n+3) {
  color: var(--color-l-blue-500);
  border: 1px solid var(--color-l-blue-500);
}
.theme-light .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+1) {
  color: var(--color-l-yellow-500);
  border: 1px solid var(--color-l-yellow-500);
}
.theme-light .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+2) {
  color: var(--color-l-red-500);
  border: 1px solid var(--color-l-red-500);
}
.theme-light .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+3) {
  color: var(--color-l-blue-500);
  border: 1px solid var(--color-l-blue-500);
}

/*─────────Tab Header for Dark Mode──────────*/
.theme-dark .workspace-tab-header {
  transition: var(--duration-superfast) var(--motion-smooth) !important;
}
.theme-dark .workspace-tab-header.is-active {
  background: var(--color-d-gray-70);
  box-shadow: 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset;
}
.theme-dark .workspace-tab-header:not(.workspace-tab-header.is-active) {
  border: 1px solid var(--color-d-gray-50);
}
.theme-dark .workspace-tab-header:not(.workspace-tab-header.is-active):hover {
  border: 1px solid var(--color-d-gray-30);
  transform: translateY(-1.5px);
  box-shadow: 0px 3px 3px -1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.theme-dark .workspace-tab-header:not(.workspace-tab-header.is-active):hover .workspace-tab-header-inner-icon {
  color: var(--color-d-gray-30);
}
.theme-dark .workspace-tab-header:not(.workspace-tab-header.is-active):active {
  transform: translateY(1.5px);
  box-shadow: 0px 0px 0px 2.5px rgba(0, 0, 0, 0.2) inset;
}
.theme-dark .mod-left-split .workspace-tab-header.is-active:nth-child(3n+1) {
  color: var(--color-d-yellow-700);
  border: 1px solid var(--color-d-yellow-700);
}
.theme-dark .mod-left-split .workspace-tab-header.is-active:nth-child(3n+2) {
  color: var(--color-d-red-700);
  border: 1px solid var(--color-d-red-700);
}
.theme-dark .mod-left-split .workspace-tab-header.is-active:nth-child(3n+3) {
  color: var(--color-d-blue-700);
  border: 1px solid var(--color-d-blue-700);
}
.theme-dark .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+1) {
  color: var(--color-d-yellow-700);
  border: 1px solid var(--color-d-yellow-700);
}
.theme-dark .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+2) {
  color: var(--color-d-red-700);
  border: 1px solid var(--color-d-red-700);
}
.theme-dark .mod-right-split .workspace-tab-header.is-active:nth-last-child(3n+3) {
  color: var(--color-d-blue-700);
  border: 1px solid var(--color-d-blue-700);
}

/*────────────────────────────────────
            Nav Header
────────────────────────────────────*/
/*─────────Nav Header Container──────────*/
.workspace-split.mod-left-split .nav-header,
.workspace-split.mod-right-split .nav-header {
  padding: var(--size-2-1) var(--size-2-2) var(--size-2-1) var(--size-2-2);
  margin: var(--size-0-0) var(--size-0-0) var(--size-0-0) var(--size-0-0);
}
.workspace-split.mod-left-split .nav-header .nav-buttons-container,
.workspace-split.mod-right-split .nav-header .nav-buttons-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  vertical-align: middle;
}

/*─────────Nav Header Buttons──────────*/
.nav-action-button {
  background: none;
  height: var(--size-4-8);
  padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-2);
  margin: var(--size-0-0) var(--size-0-0) var(--size-0-0) var(--size-0-0);
  border-radius: var(--size-2-3);
  opacity: 1;
  display: flex;
  align-items: center;
}
.theme-light .nav-action-button {
  color: var(--color-l-gray-60);
}
.theme-light .nav-action-button.is-active {
  color: var(--color-l-black);
  background-color: transparent;
}
.theme-light .nav-action-button.is-active:hover {
  color: var(--color-l-gray-80);
}
.theme-light .nav-action-button.is-active:active {
  color: var(--color-l-gray-50);
}
.theme-light .nav-action-button:not(.nav-action-button.is-active):hover {
  color: var(--color-l-gray-80);
  background-color: transparent;
}
.theme-light .nav-action-button:not(.nav-action-button.is-active):active {
  color: var(--color-l-gray-50);
}
.theme-dark .nav-action-button {
  color: var(--color-d-gray-40);
}
.theme-dark .nav-action-button.is-active {
  color: var(--color-d-gray-20);
  background-color: transparent;
}
.theme-dark .nav-action-button.is-active:hover {
  color: var(--color-d-white);
}
.theme-dark .nav-action-button.is-active:active {
  color: var(--color-d-gray-50);
}
.theme-dark .nav-action-button:not(.nav-action-button.is-active):hover {
  color: var(--color-d-gray-20);
  background-color: transparent;
}
.theme-dark .nav-action-button:not(.nav-action-button.is-active):active {
  color: var(--color-d-gray-50);
}

/*────────────────────────────────────
            File Explorer
────────────────────────────────────*/
/*─────────Vault Title──────────*/
.nav-folder.mod-root > .nav-folder-title[data-path="/"] {
  color: var(--text-muted);
  font-size: var(--font-scale-0-5);
  background: var(--background-secondary);
  top: 0;
  width: 100%;
  position: sticky;
  justify-content: center;
  border: 1px solid var(--background-modifier-border);
  margin-bottom: var(--size-2-2);
  z-index: 2;
}
.nav-folder.mod-root > .nav-folder-title[data-path="/"]:hover {
  color: var(--text-muted);
  background: var(--background-secondary);
}

.nav-folder-collapse-indicator {
  align-items: flex-start;
}

.workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title,
.workspace-leaf.mod-active .nav-file.has-focus {
  border-color: transparent;
  background-color: none;
}

body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
  color: unset;
}

/* File Explorer for Light Mode */
.theme-light .nav-folder-title:not([data-path="/"]), .theme-light .nav-file-title {
  color: var(--color-l-gray-80);
  background: transparent;
}
.theme-light .nav-folder-title:not([data-path="/"]):hover, .theme-light .nav-file-title:hover {
  color: var(--color-l-gray-80) !important;
  background: var(--color-l-gray-10) !important;
}
.theme-light .nav-folder-title:not([data-path="/"]):active, .theme-light .nav-file-title:active {
  color: var(--color-l-gray-50) !important;
  background: var(--color-l-gray-40) !important;
}
.theme-light .nav-file-title.is-active {
  background: var(--color-l-gray-10);
  border: 1px solid rgba(100, 100, 100, 0.3);
  box-shadow: 0px -2px 0px 0px rgba(100, 100, 100, 0.1) inset, 0px 2px 4px 0px rgba(100, 100, 100, 0.1);
}
.theme-light .nav-file-tag {
  background: var(--color-l-gray-10);
}

/* File Explorer for Dark Mode */
.theme-dark .nav-folder-title:not([data-path="/"]), .theme-dark .nav-file-title {
  color: var(--color-d-gray-20);
  background: transparent;
}
.theme-dark .nav-folder-title:not([data-path="/"]):hover, .theme-dark .nav-file-title:hover {
  color: var(--color-d-gray-20) !important;
  background: var(--color-d-gray-60) !important;
}
.theme-dark .nav-folder-title:not([data-path="/"]):active, .theme-dark .nav-file-title:active {
  color: var(--color-d-gray-40) !important;
  background: var(--color-d-blacker) !important;
}
.theme-dark .nav-file-title.is-active {
  background: var(--color-d-gray-70);
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.theme-dark .nav-file-tag {
  background: var(--color-d-gray-50);
}

/*────────────────────────────────────
            Modals
────────────────────────────────────*/
/*─────────All Modals──────────*/
/*─────────Settings Modal──────────*/
/*─────────Command, Quick Switcher etc. Modals──────────*/

.theme-light .modal.mod-settings, .theme-light .modal.mod-settings .vertical-tab-container {
  box-shadow: var(--shadow-xl) var(--color-l-shadow-100);
}
.theme-dark .modal.mod-settings, .theme-dark .modal.mod-settings .vertical-tab-container {
  box-shadow: var(--shadow-xl) var(--color-d-shadow-100);
}
.modal.mod-settings .setting-item-control button.clickable-icon, .modal.mod-settings .vertical-tab-container .setting-item-control button.clickable-icon {
  padding: 0;
  margin-right: var(--size-4-2);
}
.modal.mod-community-theme.mod-community-theme, .modal.mod-community-plugin {
  width: clamp(200px, 90vw, 960px);
  min-height: 90vh;
  overflow: hidden;
}
.modal.mod-image-lightbox {
  width: clamp(200px, 95vw, 1920px);
  min-height: 20vh;
  height: auto;
  max-height: 90vh;
  border-radius: var(--size-4-4);
  overflow-y: hidden;
}
.modal .vertical-tab-nav-item {
  text-transform: capitalize;
}

.modal .modal-content .vertical-tab-header-group, .modal .modal-content .vertical-tab-nav-item {
  background: var(--background-secondary);
}
.modal .modal-content .vertical-tab-header-group-title {
  font-weight: var(--font-bold);
  text-transform: uppercase;
}
.modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item {
  background: transparent;
  padding: var(--size-2-2) var(--size-4-2) var(--size-2-2) var(--size-4-4);
  border: 1px solid transparent;
  border-radius: var(--size-2-2);
  border-left: none;
  margin: var(--size-0-0) var(--size-4-2) var(--size-0-0) var(--size-4-2);
  transition: var(--duration-superfast) var(--motion-smooth);
}
.modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:last-of-type {
  margin-bottom: calc(var(--size-4-2) + var(--size-2-1));
}
.modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item.is-active {
  font-weight: var(--font-bold);
  z-index: 2;
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:hover {
  color: var(--color-l-gray-80);
  background: var(--color-l-gray-10);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:active {
  color: var(--color-l-gray-50);
  background: var(--color-l-gray-40);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item.is-active {
  color: var(--color-l-whiter);
  border: 1px solid rgba(100, 100, 100, 0.3);
  box-shadow: 0px -2px 0px 0px rgba(100, 100, 100, 0.15) inset, 0px 1px 4px 0px rgba(100, 100, 100, 0.25);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+1).is-active {
  background: var(--color-l-yellow-500);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+2).is-active {
  background: var(--color-l-red-300);
}
.theme-light .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+3).is-active {
  background: var(--color-l-blue-300);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:hover {
  color: var(--color-d-gray-20);
  background: var(--color-d-gray-60);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:active {
  color: var(--color-d-gray-40);
  background: var(--color-d-blacker);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item.is-active {
  color: var(--color-d-black);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+1).is-active {
  background: var(--color-d-yellow-700);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+2).is-active {
  background: var(--color-d-red-500);
}
.theme-dark .modal .modal-content .vertical-tab-header-group-items .vertical-tab-nav-item:nth-child(3n+3).is-active {
  background: var(--color-d-blue-300);
}

  /*────────────────────────────────────
              Dropdown
  ────────────────────────────────────*/
  .dropdown {
    font-family: Barlow;
    line-height: var(--line-height-1);
    padding: var(--size-2-2) var(--size-4-4) var(--size-2-2) var(--size-4-4);
    margin: var(--size-2-2) 0;
    transition: var(--duration-fast-1) var(--motion-smooth);
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24' width='100%25' height='100%25'%3E%3Cpath d='M18.71,8.21a1,1,0,0,0-1.42,0l-4.58,4.58a1,1,0,0,1-1.42,0L6.71,8.21a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41l4.59,4.59a3,3,0,0,0,4.24,0l4.59-4.59A1,1,0,0,0,18.71,8.21Z'/%3E%3C/svg%3E%0A");
  }
  .theme-light .dropdown {
    color: var(--color-l-gray-80);
    background-color: var(--color-l-whiter);
    border: 1px solid rgba(100, 100, 100, 0.5);
    border-radius: var(--size-2-2);
    box-shadow: 0px -2px 0px 0px rgba(100, 100, 100, 0.1) inset, 0px 2px 4px 0px rgba(100, 100, 100, 0.1);
  }
  .theme-light .dropdown:hover {
    background-color: var(--color-l-gray-20);
    transition: var(--duration-fast-1) var(--motion-delay);
  }
  .theme-dark .dropdown {
    color: var(--color-d-gray-10);
    background-color: var(--color-d-gray-90);
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.15) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  }
  .theme-dark .dropdown:hover {
    background-color: var(--color-d-blacker);
    transition: var(--duration-fast-1) var(--motion-delay);
  }
/*────────────────────────────────────
        Vault Launch Progress
────────────────────────────────────*/
.is-loading:before,
.search-result-container.is-loading:before {
  background-color: var(--background-primary);
  animation: var(--duration-slow-2) var(--motion-smooth) infinite progress-bar;
}

.progress-bar {
  background: var(--background-primary);
}
.progress-bar-indicator {
  width: 35%;
  overflow: hidden;
  height: var(--size-4-3);
  border-radius: var(--size-4-3);
  border: 1px solid var(--background-modifier-border);
}
.is-mobile .progress-bar-indicator {
  width: 65%;
}
.progress-bar-line {
  height: var(--size-4-3);
  position: absolute;
  background: var(--background-secondary);
  border-radius: var(--size-4-3);
}
.progress-bar-subline {
  height: var(--size-4-3);
  border-radius: var(--size-4-3);
}
.theme-light .progress-bar-subline { /* VLP for Light Mode */
  background: var(--color-l-green-500);
}
.theme-dark .progress-bar-subline { /* VLP for Dark Mode */
  background: var(--color-d-green-900);
}
.progress-bar-message {
  display: none;
}

@media (min-width: 1000pt) {
  .is-mobile {
    /*──────────Aside HTML / Sidenotes──────────*/
  }
}
/*────────────────────────────────────
++++++++++++++++++++++++++++++++++++++
            Graph View
++++++++++++++++++++++++++++++++++++++
──────────────────────────────────────*/
.workspace-leaf-content[data-type=graph] .view-content {
    padding: 0;
  }

  .graph-controls {
    max-width: initial;
    padding: var(--size-4-2) var(--size-4-6) var(--size-4-4) var(--size-4-2);
    margin-top: var(--size-4-1);
    margin-left: var(--size-4-1);
    border-radius: var(--size-4-2);
    transition: var(--duration-fast-2) var(--motion-smooth);
  }
  .graph-controls.is-close {
    padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-2);
    margin-top: var(--size-4-1);
    margin-left: var(--size-4-1);
    border-radius: var(--size-4-2);
    opacity: 1;
  }
  .graph-controls.is-close .graph-controls-buttons.mod-open, .graph-controls.is-close .graph-controls-buttons.mod-animate {
    padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-2);
    margin: 0;
  }

  /*─────────Graph View Colors──────────*/
  .theme-light .graph-view.color-fill,
  .theme-dark .graph-view.color-fill {
    color: var(--graph-color-node-resolved);
  }
  .theme-light .graph-view.color-fill-unresolved,
  .theme-dark .graph-view.color-fill-unresolved {
    color: var(--graph-color-node-unresolved);
    opacity: var(--graph-color-node-unresolved-opacity);
  }
  .theme-light .graph-view.color-fill-tag,
  .theme-dark .graph-view.color-fill-tag {
    color: var(--graph-color-node-tag);
  }
  .theme-light .graph-view.color-fill-attachment,
  .theme-dark .graph-view.color-fill-attachment {
    color: var(--graph-color-node-attachment);
  }
  .theme-light .graph-view.color-fill-focused,
  .theme-dark .graph-view.color-fill-focused { /* Focused Node */
    color: var(--graph-color-node-focused);
  }
  .theme-light .graph-view.color-circle,
  .theme-dark .graph-view.color-circle { /* Node Cirle on Hover (Border) */
    color: var(--graph-color-node-border-hover);
  }
  .theme-light .graph-view.color-arrow,
  .theme-dark .graph-view.color-arrow {
    color: var(--graph-color-node-arrow);
  }
  .theme-light .graph-view.color-line,
  .theme-dark .graph-view.color-line {
    color: var(--graph-color-node-line);
  }
  .theme-light .graph-view.color-line-highlight,
  .theme-dark .graph-view.color-line-highlight { /* Node Line on Hover */
    color: var(--graph-color-node-line-hover);
  }
  .theme-light .graph-view.color-text,
  .theme-dark .graph-view.color-text {
    color: var(--graph-color-node-text);
  }

  /*~ Graph View Controls for Light Theme ~*/
  .theme-light .graph-controls {
    background-color: var(--color-l-white);
    color: var(--color-l-gray-60);
    border: 1px solid var(--background-modifier-border);
    box-shadow: var(--shadow-s);
  }
  .theme-light .graph-controls.is-close {
    min-width: inherit;
    box-shadow: none;
  }
  .theme-light .graph-controls .setting-item-name {
    color: var(--color-l-gray-80);
  }

  /*~ Graph View Controls for Dark Theme ~*/
  .theme-dark .graph-controls {
    background-color: var(--color-d-gray-70);
    color: var(--color-d-gray-50);
    border: 1px solid var(--background-modifier-border);
    box-shadow: var(--shadow-s) var(--color-d-shadow-100);
  }
  .theme-dark .graph-controls.is-close {
    min-width: inherit;
    box-shadow: none;
  }
  .theme-dark .graph-controls .setting-item-name {
    color: var(--color-d-gray-10);
  }
/*────────────────────────────────────
            Scrollbars
────────────────────────────────────*/
body:not(.native-scrollbars) ::-webkit-scrollbar,
body:not(.native-scrollbars) .graph-controls::-webkit-scrollbar {
  visibility: visible;
  width: var(--size-2-2);
  height: var(--size-2-2);
  border-radius: 0;
  display: inherit;
  background: var(--scrollbar-bg);
}

body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  visibility: visible;
  background: var(scrollbar-thumb-bg);
  border-radius: 0;
}
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-active-thumb-bg);
  border-radius: 0;
}

/* Thin Scrollbar */
.scrollbar__thin.scrollbar__thin:not(.native-scrollbars) ::-webkit-scrollbar, .scrollbar__thin.scrollbar__thin:not(.native-scrollbars) .graph-controls::-webkit-scrollbar {
  visibility: visible;
  width: var(--size-2-2);
  height: var(--size-2-2);
  border-radius: 0;
  display: inherit;
  background: var(--scrollbar-bg);
}
.scrollbar__thin.scrollbar__thin:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  visibility: visible;
  background: var(scrollbar-thumb-bg);
  border-radius: 0;
}
.scrollbar__thin.scrollbar__thin:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-active-thumb-bg);
  border-radius: 0;
}

/* Mac (Grabbable) Scrollbar */
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) ::-webkit-scrollbar {
  background: var(--scrollbar-bg);
  visibility: visible;
  width: 12px;
  height: 12px;
  border-radius: 0;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) ::-webkit-scrollbar-thumb, .scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .node-insert-event ::-webkit-scrollbar-thumb {
  visibility: visible;
  background: var(scrollbar-thumb-bg);
  border: 5px solid var(--background-primary);
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover, .scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .node-insert-event ::-webkit-scrollbar-thumb:hover {
  background: var(--interactive-accent);
  border-width: 3px;
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active, .scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .node-insert-event ::-webkit-scrollbar-thumb:active {
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .workspace-tabs ::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border: 5px solid var(--background-secondary);
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .workspace-tabs ::-webkit-scrollbar-thumb:hover {
  background: var(--interactive-accent);
  border-width: 3px;
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .workspace-tabs ::-webkit-scrollbar-thumb:active {
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .markdown-embed:not(.hover-popover .markdown-embed) ::-webkit-scrollbar-thumb {
  border: 5px solid var(--background-primary-alt);
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .markdown-embed:not(.hover-popover .markdown-embed) ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-active-thumb-bg);
  border-width: 3px;
  border-radius: 24px;
}
.scrollbar__mac.scrollbar__mac:not(.native-scrollbars) .markdown-embed:not(.hover-popover .markdown-embed) ::-webkit-scrollbar-thumb:active {
  border-radius: 24px;
}

body.plugin-sliding-panes.scrollbar__mac .workspace-split.mod-vertical.mod-root {
  background: var(--background-primary);
}

body.plugin-sliding-panes-rotate-header .workspace > .mod-root > .workspace-leaf > .workspace-leaf-content > .view-content {
  border-bottom: 1px solid var(--background-modifier-border);
}

Do I use this as a snippet or can I add it in the style settings area?

Lmasey commented 3 months ago

I tried numerous theme and no one come close to this one.

I always miss it so much, it was so freaking beautiful. The beautifulness of the UI was cosy and soothing, putting me in just the right mood to write.

All others theme since then are just -meh-.

Thanks Cecilia, and I'm still hoping that one day, the project will be back from the dead.

Nothing compares!! It has everything I've been looking for. I would even pay for it!