mirror of
https://github.com/kazi-aidah/blobob.git
synced 2026-07-22 04:30:27 +00:00
8244370d52
Add all base CSS source files for the Obsidian theme, cross-platform build scripts, project documentation, and update .gitignore.
10084 lines
324 KiB
CSS
10084 lines
324 KiB
CSS
:root {
|
||
--nav-hide-text: "My Vault";
|
||
--before-active-line: ">>";
|
||
--before-active-line-color: #7c3aed;
|
||
--before-active-line-margin: -20px;
|
||
}
|
||
|
||
.workspace-tab-container {
|
||
display: flex;
|
||
overflow: visible;
|
||
}
|
||
|
||
/* =========
|
||
Dark theme vars
|
||
========= */
|
||
.theme-dark {
|
||
--tag-radius: var(--button-radius) !important;
|
||
--button-shadow: #00000050;
|
||
--canvas-background: var(--background-primary);
|
||
--blockquote-border-thickness: 4px;
|
||
|
||
--toggle-thumb-color: var(--text-normal);
|
||
--caret-color: var(--color-accent);
|
||
--checkbox-color: var(--color-tang);
|
||
--text-error: rgb(255, 138, 138);
|
||
|
||
--background-primary: #1e1f22;
|
||
--background-primary-alt: #26272b;
|
||
|
||
--background-secondary: #1e1f22;
|
||
--background-secondary-alt: #36393d;
|
||
|
||
--titlebar-background: #1b1b1f;
|
||
--titlebar-background-focused: #19191d;
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--code-background: #19191d;
|
||
--code-border-color: var(--background-secondary-alt);
|
||
--code-border-width: 2px;
|
||
--code-radius: var(--button-radius);
|
||
|
||
--interactive-normal: var(--button-background);
|
||
--interactive-hover: var(--button-background-hover);
|
||
|
||
--background-modifier-form-field: #303439;
|
||
--background-modifier-form-field-hover: #29292d;
|
||
--dropdown-background: #303439;
|
||
--dropdown-background-hover: #3c4048;
|
||
--button-background: #303439;
|
||
--button-background-hover: #3c4048;
|
||
--background-modifier-border: #31353e;
|
||
--background-modifier-border-hover: #484848;
|
||
|
||
--accent-red: var(--color-red);
|
||
--accent-orange: var(--color-orange);
|
||
--accent-yellow: var(--color-yellow);
|
||
--accent-green: var(--color-green);
|
||
--accent-cyan: var(--color-cyan);
|
||
--accent-blue: var(--color-blue);
|
||
--accent-purple: var(--color-purple);
|
||
--accent-pink: var(--color-pink);
|
||
--accent-brown: var(--color-brown);
|
||
--accent-gray: var(--text-normal);
|
||
|
||
/* --color-red: #a93f3f; */
|
||
--color-red: #da4b4b;
|
||
--color-orange: #cc692a;
|
||
--color-yellow: #e8b05a;
|
||
--color-green: #a3bd6a;
|
||
--color-cyan: #42adbbff;
|
||
--color-blue: #4281bb;
|
||
--color-purple: #965daf;
|
||
--color-pink: #c85b92;
|
||
--color-brown: #9b674b;
|
||
--color-gray: var(--text-normal);
|
||
|
||
--text-normal: #bababa;
|
||
--text-muted: #80807c;
|
||
--text-faint: var(--text-muted);
|
||
|
||
--hr-color: var(--background-modifier-border-focus);
|
||
|
||
--tab-radius: 8px;
|
||
|
||
--text-highlight-bg: hsl(var(--interactive-accent-hsl), 0.5);
|
||
|
||
--button-radius: 20px;
|
||
}
|
||
|
||
/* === DARK THEME COLOR OPTIONS === */
|
||
|
||
.theme-dark.neutral-gray {
|
||
--toggle-thumb-color: white;
|
||
}
|
||
.theme-dark.darker-gray {
|
||
--background-primary: #171717;
|
||
--background-primary-alt: #202020;
|
||
--background-secondary: #171717;
|
||
--background-secondary-alt: #2a2a2a;
|
||
--titlebar-background: #141414;
|
||
--titlebar-background-focused: #111111;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #191919;
|
||
--text-normal: #bababa;
|
||
--text-muted: #888888;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #2a2a2a;
|
||
--background-modifier-form-field-hover: #2e2e2e;
|
||
--dropdown-background: #363636;
|
||
--dropdown-background-hover: #404040;
|
||
--button-background: #363636;
|
||
--button-background-hover: #404040;
|
||
--background-modifier-border: #353535;
|
||
--background-modifier-border-focus: #505050;
|
||
}
|
||
|
||
.theme-dark.dark-night {
|
||
--background-primary: #0b0e16;
|
||
--background-primary-alt: #161b2a;
|
||
--background-secondary: #0e1220;
|
||
--background-secondary-alt: #1f2438;
|
||
--titlebar-background: #070a14;
|
||
--titlebar-background-focused: #05070f;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #0f1424;
|
||
--text-normal: #b4c2d2;
|
||
--text-muted: #7d8593;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #1c2135;
|
||
--background-modifier-form-field-hover: #262d46;
|
||
--dropdown-background: #1c2135;
|
||
--dropdown-background-hover: #242a42;
|
||
--button-background: #1c2135;
|
||
--button-background-hover: #242a42;
|
||
--background-modifier-border: #1c2135;
|
||
--background-modifier-border-hover: #242a42;
|
||
--background-modifier-border-focus: #2a3150;
|
||
}
|
||
|
||
.theme-dark.cold-memory {
|
||
--background-primary: #14161b;
|
||
--background-primary-alt: #1b202a;
|
||
--background-secondary: #1e222f;
|
||
--background-secondary-alt: #293042;
|
||
--titlebar-background: #1e222f;
|
||
--titlebar-background-focused: #1e222f;
|
||
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--code-background: #15171b;
|
||
|
||
--text-normal: #b7c4d6;
|
||
--text-muted: #7c8aa3;
|
||
--text-error: #ff8a8a;
|
||
|
||
--background-modifier-form-field: #293042;
|
||
--background-modifier-form-field-hover: #374057;
|
||
|
||
--dropdown-background: #293042;
|
||
--dropdown-background-hover: #374057;
|
||
|
||
--button-background: #293042;
|
||
--button-background-hover: #374057;
|
||
|
||
--background-modifier-border: #293045;
|
||
--background-modifier-border-hover: #303950;
|
||
--background-modifier-border-focus: #3a4661;
|
||
|
||
/* input {
|
||
background-color: var(--background-modifier-form-field) !important;
|
||
background: var(--background-modifier-form-field) !important;
|
||
} */
|
||
}
|
||
|
||
.theme-dark.amoled {
|
||
--background-primary: #000000;
|
||
--background-primary-alt: #111111;
|
||
--background-secondary: #000000;
|
||
--background-secondary-alt: #1a1a1a;
|
||
--titlebar-background: #000000;
|
||
--titlebar-background-focused: #000000;
|
||
--tab-container-background: #050505;
|
||
--code-background: #0a0a0a;
|
||
--text-normal: #e0e0e0;
|
||
--text-muted: #808080;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #0d0d0d;
|
||
--background-modifier-form-field-hover: #111111;
|
||
--dropdown-background: #1a1a1a;
|
||
--dropdown-background-hover: #222222;
|
||
--button-background: #1a1a1a;
|
||
--button-background-hover: #222222;
|
||
--background-modifier-border: #0d0d0d;
|
||
--background-modifier-border-hover: #1a1a1a;
|
||
--background-modifier-border-focus: #2a2a2a;
|
||
}
|
||
|
||
.theme-dark.noble-blue {
|
||
--background-primary: #0d1b2a;
|
||
--background-primary-alt: #1b263b;
|
||
--background-secondary: #0d1b2a;
|
||
--background-secondary-alt: #2d3748;
|
||
--titlebar-background: #0a1522;
|
||
--titlebar-background-focused: #08111c;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #0f1a29;
|
||
--text-normal: #e2e8f0;
|
||
--text-muted: #94a3b8;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #141d2c;
|
||
--background-modifier-form-field-hover: #1e293b;
|
||
--dropdown-background: #253147;
|
||
--dropdown-background-hover: #2d3b5a;
|
||
--button-background: #253147;
|
||
--button-background-hover: #2d3b5a;
|
||
--background-modifier-border: #1c2738;
|
||
--background-modifier-border-hover: #253147;
|
||
--background-modifier-border-focus: #324369;
|
||
}
|
||
|
||
.theme-dark.magic-purply {
|
||
--background-primary: #1a1034;
|
||
--background-primary-alt: #2c1f56;
|
||
--background-secondary: #1a1034;
|
||
--background-secondary-alt: #3d2a6a;
|
||
--titlebar-background: #150d2c;
|
||
--titlebar-background-focused: #120a25;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #1f153d;
|
||
--text-normal: #e9d5ff;
|
||
--text-muted: #8e81b6;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #251a45;
|
||
--background-modifier-form-field-hover: #2a1f4d;
|
||
--dropdown-background: #35255e;
|
||
--dropdown-background-hover: #3f2c70;
|
||
--button-background: #35255e;
|
||
--button-background-hover: #3f2c70;
|
||
--background-modifier-border: #2a1f4d;
|
||
--background-modifier-border-hover: #35255e;
|
||
--background-modifier-border-focus: #4a3482;
|
||
}
|
||
|
||
.theme-dark.midnight-emerald {
|
||
--background-primary: #0c2d2a;
|
||
--background-primary-alt: #17403c;
|
||
--background-secondary: #0c2d2a;
|
||
--background-secondary-alt: #235750;
|
||
--titlebar-background: #092421;
|
||
--titlebar-background-focused: #071d1a;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #0e3531;
|
||
--text-normal: #d1fae5;
|
||
--text-muted: #6ee7b7;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #153934;
|
||
--background-modifier-form-field-hover: #19433e;
|
||
--dropdown-background: #1f4e48;
|
||
--dropdown-background-hover: #255a53;
|
||
--button-background: #1f4e48;
|
||
--button-background-hover: #255a53;
|
||
--background-modifier-border: #1c3f3a;
|
||
--background-modifier-border-hover: #235750;
|
||
--background-modifier-border-focus: #2d6c63;
|
||
}
|
||
|
||
.theme-dark.deep-ocean {
|
||
--background-primary: #0f172a;
|
||
--background-primary-alt: #1e293b;
|
||
--background-secondary: #0f172a;
|
||
--background-secondary-alt: #334155;
|
||
--titlebar-background: #0c1424;
|
||
--titlebar-background-focused: #0a1120;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #131c30;
|
||
--text-normal: #b7cae1;
|
||
--text-muted: #94a3b8;
|
||
--text-error: #ff8a8a;
|
||
--toggle-thumb-color: #cfd9e7;
|
||
--background-modifier-form-field: #1a2536;
|
||
--background-modifier-form-field-hover: #1e293b;
|
||
--dropdown-background: #253147;
|
||
--dropdown-background-hover: #2d3b5a;
|
||
--button-background: #253147;
|
||
--button-background-hover: #2d3b5a;
|
||
--background-modifier-border: #1e293b;
|
||
--background-modifier-border-hover: #253147;
|
||
--background-modifier-border-focus: #344664;
|
||
}
|
||
|
||
.theme-dark.crimson-twilight {
|
||
--background-primary: #1f0a1a;
|
||
--background-primary-alt: #3d142f;
|
||
--background-secondary: #1f0a1a;
|
||
--background-secondary-alt: #5a1f44;
|
||
--titlebar-background: #1a0715;
|
||
--titlebar-background-focused: #150511;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #240f1e;
|
||
--text-normal: #fecdd3;
|
||
--text-muted: #cc9aa0;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #2d1426;
|
||
--background-modifier-form-field-hover: #34182c;
|
||
--dropdown-background: #422033;
|
||
--dropdown-background-hover: #4d263c;
|
||
--button-background: #422033;
|
||
--button-background-hover: #4d263c;
|
||
--background-modifier-border: #34182c;
|
||
--background-modifier-border-hover: #422033;
|
||
--background-modifier-border-focus: #5a2c46;
|
||
}
|
||
|
||
.theme-dark.golden-hour {
|
||
--background-primary: #2c1a0d;
|
||
--background-primary-alt: #4a2c1a;
|
||
--background-secondary: #2c1a0d;
|
||
--background-secondary-alt: #6b3f22;
|
||
--titlebar-background: #241508;
|
||
--titlebar-background-focused: #1d1106;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #311e10;
|
||
--text-normal: #fde68a;
|
||
--text-muted: #fbbf24;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #3a2414;
|
||
--background-modifier-form-field-hover: #422a18;
|
||
--dropdown-background: #52331d;
|
||
--dropdown-background-hover: #5e3b22;
|
||
--button-background: #52331d;
|
||
--button-background-hover: #5e3b22;
|
||
--background-modifier-border: #3a2414;
|
||
--background-modifier-border-hover: #48301c;
|
||
--background-modifier-border-focus: #6d4629;
|
||
}
|
||
|
||
.theme-dark.violet-dream {
|
||
--background-primary: #1e0f33;
|
||
--background-primary-alt: #341c5c;
|
||
--background-secondary: #1e0f33;
|
||
--background-secondary-alt: #4a2a7d;
|
||
--titlebar-background: #180c2b;
|
||
--titlebar-background-focused: #140a24;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #23133c;
|
||
--text-normal: #f3e8ff;
|
||
--text-muted: #d8b4fe;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #2a1a4a;
|
||
--background-modifier-form-field-hover: #301e55;
|
||
--dropdown-background: #3b256e;
|
||
--dropdown-background-hover: #452b81;
|
||
--button-background: #3b256e;
|
||
--button-background-hover: #452b81;
|
||
--background-modifier-border: #2a1a4a;
|
||
--background-modifier-border-hover: #362059;
|
||
--background-modifier-border-focus: #4c2f8c;
|
||
}
|
||
|
||
.theme-dark.slate-smoke {
|
||
--background-primary: #1a202c;
|
||
--background-primary-alt: #2d3748;
|
||
--background-secondary: #1a202c;
|
||
--background-secondary-alt: #4a5568;
|
||
--titlebar-background: #171d28;
|
||
--titlebar-background-focused: #141a24;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #1f2532;
|
||
--text-normal: #edf2f7;
|
||
--text-muted: #a0aec0;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #252c3b;
|
||
--background-modifier-form-field-hover: #293241;
|
||
--dropdown-background: #343e52;
|
||
--dropdown-background-hover: #3d4960;
|
||
--button-background: #343e52;
|
||
--button-background-hover: #3d4960;
|
||
--background-modifier-border: #2d3748;
|
||
--background-modifier-border-hover: #374151;
|
||
--background-modifier-border-focus: #4a5568;
|
||
}
|
||
|
||
.theme-dark.chocolate {
|
||
--background-primary: #2a1a0f;
|
||
--background-primary-alt: #3d2818;
|
||
--background-secondary: #2a1a0f;
|
||
--background-secondary-alt: #553723;
|
||
--titlebar-background: #23150c;
|
||
--titlebar-background-focused: #1d1209;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #2f1e12;
|
||
--text-normal: #f5e6d3;
|
||
--text-muted: #d4a574;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #311f11;
|
||
--background-modifier-form-field-hover: #3d2818;
|
||
--dropdown-background: #45321f;
|
||
--dropdown-background-hover: #513a25;
|
||
--button-background: #45321f;
|
||
--button-background-hover: #513a25;
|
||
--background-modifier-border: #362314;
|
||
--background-modifier-border-hover: #423021;
|
||
--background-modifier-border-focus: #5c422b;
|
||
}
|
||
|
||
.theme-dark.dark-chocolate {
|
||
--background-primary: #1b0f08;
|
||
--background-primary-alt: #2a170d;
|
||
--background-secondary: #1b0f08;
|
||
--background-secondary-alt: #3a2214;
|
||
--titlebar-background: #150b06;
|
||
--titlebar-background-focused: #110804;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #21120a;
|
||
--text-normal: #f1dcc6;
|
||
--text-muted: #c39a6b;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #1e0f08;
|
||
--background-modifier-form-field-hover: #2a170d;
|
||
--dropdown-background: #332013;
|
||
--dropdown-background-hover: #3b2617;
|
||
--button-background: #332013;
|
||
--button-background-hover: #3b2617;
|
||
--background-modifier-border: #25140b;
|
||
--background-modifier-border-hover: #332013;
|
||
--background-modifier-border-focus: #4a321e;
|
||
}
|
||
.theme-dark.rose-gold {
|
||
--background-primary: #2a1a1f;
|
||
--background-primary-alt: #3d252c;
|
||
--background-secondary: #2a1a1f;
|
||
--background-secondary-alt: #52303a;
|
||
--titlebar-background: #23151a;
|
||
--titlebar-background-focused: #1d1215;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #2f1e23;
|
||
--text-normal: #f4e0e9;
|
||
--text-muted: #e0b4c2;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #311e24;
|
||
--background-modifier-form-field-hover: #3d252c;
|
||
--dropdown-background: #453036;
|
||
--dropdown-background-hover: #503740;
|
||
--button-background: #453036;
|
||
--button-background-hover: #503740;
|
||
--background-modifier-border: #3d252c;
|
||
--background-modifier-border-hover: #453036;
|
||
--background-modifier-border-focus: #9c647a;
|
||
}
|
||
.theme-dark.arctic-ice {
|
||
--background-primary: #0f1a2a;
|
||
--background-primary-alt: #1a2840;
|
||
--background-secondary: #0f1a2a;
|
||
--background-secondary-alt: #24365a;
|
||
--titlebar-background: #0c1524;
|
||
--titlebar-background-focused: #0a1120;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #131e32;
|
||
--text-normal: #e0f2fe;
|
||
--text-muted: #a5d8ff;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #253654;
|
||
--background-modifier-form-field-hover: #1f2e4a;
|
||
--dropdown-background: #24365a;
|
||
--dropdown-background-hover: #2a3e68;
|
||
--button-background: #24365a;
|
||
--button-background-hover: #2a3e68;
|
||
--background-modifier-border: #1f2e4a;
|
||
--background-modifier-border-hover: #24365a;
|
||
--background-modifier-border-focus: #587598;
|
||
}
|
||
.theme-dark.comfort-choco {
|
||
--background-primary: #261e17;
|
||
--background-primary-alt: #372d23;
|
||
--background-secondary: #261e17;
|
||
--background-secondary-alt: #483c2f;
|
||
--titlebar-background: #201912;
|
||
--titlebar-background-focused: #1a140e;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #2b231a;
|
||
--text-normal: #f0e6d6;
|
||
--text-muted: #d4c4a8;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #31271e;
|
||
--background-modifier-form-field-hover: #372d23;
|
||
--dropdown-background: #3d3328;
|
||
--dropdown-background-hover: #473c30;
|
||
--button-background: #3d3328;
|
||
--button-background-hover: #473c30;
|
||
--background-modifier-border: #372d23;
|
||
--background-modifier-border-hover: #3d3328;
|
||
--background-modifier-border-focus: #6d5f43;
|
||
}
|
||
.theme-dark.lavendar {
|
||
--background-primary: #1c1a2e;
|
||
--background-primary-alt: #2a2744;
|
||
--background-secondary: #1c1a2e;
|
||
--background-secondary-alt: #38355c;
|
||
--titlebar-background: #171526;
|
||
--titlebar-background-focused: #131120;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #211e36;
|
||
--text-normal: #e6e4f2;
|
||
--text-muted: #b8b4d9;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #23203c;
|
||
--background-modifier-form-field-hover: #2a2744;
|
||
--dropdown-background: #302d50;
|
||
--dropdown-background-hover: #38355c;
|
||
--button-background: #302d50;
|
||
--button-background-hover: #38355c;
|
||
--background-modifier-border: #2a2744;
|
||
--background-modifier-border-hover: #302d50;
|
||
--background-modifier-border-focus: #5b5496;
|
||
}
|
||
|
||
.theme-dark.more-olives {
|
||
--background-primary: #181c18;
|
||
--background-primary-alt: #232823;
|
||
--background-secondary: #181c18;
|
||
--background-secondary-alt: #2f352f;
|
||
--titlebar-background: #141714;
|
||
--titlebar-background-focused: #101210;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #1c201c;
|
||
--text-normal: #eaf3ea;
|
||
--text-muted: #a4b9a4;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #1b1f1b;
|
||
--background-modifier-form-field-hover: #262b26;
|
||
--dropdown-background: #2a302a;
|
||
--dropdown-background-hover: #333a33;
|
||
--button-background: #2a302a;
|
||
--button-background-hover: #333a33;
|
||
--background-modifier-border: #232823;
|
||
--background-modifier-border-hover: #2a302a;
|
||
--background-modifier-border-focus: #404c40;
|
||
}
|
||
|
||
.theme-dark.caramel {
|
||
--background-primary: #261a0f;
|
||
--background-primary-alt: #382513;
|
||
--background-secondary: #261a0f;
|
||
--background-secondary-alt: #4a3019;
|
||
--titlebar-background: #1f140a;
|
||
--titlebar-background-focused: #191008;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #2d1e11;
|
||
--text-normal: #ffeccc;
|
||
--text-muted: #e0b879;
|
||
--text-error: #ff9966;
|
||
--background-modifier-form-field: #473017;
|
||
--background-modifier-form-field-hover: #432b15;
|
||
--dropdown-background: #4a3019;
|
||
--dropdown-background-hover: #55361d;
|
||
--button-background: #4a3019;
|
||
--button-background-hover: #55361d;
|
||
--background-modifier-border: #3a2611;
|
||
--background-modifier-border-hover: #462c16;
|
||
--background-modifier-border-focus: #63401f;
|
||
}
|
||
.theme-dark.mafia-red {
|
||
--background-primary: #0a0a0a;
|
||
--background-primary-alt: #111111;
|
||
--background-secondary: #0a0a0a;
|
||
--background-secondary-alt: #1a1a1a;
|
||
--titlebar-background: #050505;
|
||
--titlebar-background-focused: #000000;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #101010;
|
||
--text-normal: #dbd7d1;
|
||
--text-muted: #aaaaaa;
|
||
--text-error: #ff7070;
|
||
--background-modifier-form-field: #151515;
|
||
--background-modifier-form-field-hover: #1a1a1a;
|
||
--dropdown-background: #1a1a1a;
|
||
--dropdown-background-hover: #222222;
|
||
--button-background: #1a1a1a;
|
||
--button-background-hover: #222222;
|
||
--background-modifier-border: #222222;
|
||
--background-modifier-border-hover: #2a2a2a;
|
||
--background-modifier-border-focus: #333333;
|
||
--color-accent-hsl: 0, 100%, 50%;
|
||
--color-accent: #c51e1e;
|
||
--color-accent-1: #da3232;
|
||
--color-accent-2: #ff5151;
|
||
--interactive-accent: #b32626;
|
||
--text-on-accent: #fff;
|
||
--link-color: #be3a3a;
|
||
--link-unresolved-color: #a22525;
|
||
--link-color-hover: #8b0000;
|
||
--toggle-thumb-color: #b32626;
|
||
|
||
.checkbox-container.is-enabled::after {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.checkbox-container.is-enabled:hover {
|
||
background-color: #710000;
|
||
}
|
||
|
||
/* .menu-item.tappable {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
.menu {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
a, .internal-link, .external-link {
|
||
border-radius: 0px !important;
|
||
} */
|
||
}
|
||
|
||
.theme-dark.golden-earth {
|
||
--background-primary: #18140a;
|
||
--background-primary-alt: #221c0f;
|
||
--background-secondary: #1e180c;
|
||
--background-secondary-alt: #2a2212;
|
||
--titlebar-background: #141108;
|
||
--titlebar-background-focused: #100d06;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #211b0e;
|
||
--background-modifier-form-field: #302615;
|
||
--background-modifier-form-field-hover: #2c2313;
|
||
--dropdown-background: #2a2212;
|
||
--dropdown-background-hover: #342a17;
|
||
--button-background: #3a2f18;
|
||
--button-background-hover: #4a3b1d;
|
||
--background-modifier-border: #4a3a1c;
|
||
--background-modifier-border-hover: #5c4822;
|
||
--background-modifier-border-focus: #7a5f2c;
|
||
--text-normal: #d6a967;
|
||
--text-muted: #cc9a3a;
|
||
--text-error: #ff7043;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-dark.muted-green {
|
||
--background-primary: #1b2a20;
|
||
--background-primary-alt: #213328;
|
||
--background-secondary: #24382c;
|
||
--background-secondary-alt: #2a4234;
|
||
--titlebar-background: #16241b;
|
||
--titlebar-background-focused: #142018;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #1f3126;
|
||
--background-modifier-form-field: #2a4033;
|
||
--background-modifier-form-field-hover: #335244;
|
||
--dropdown-background: #24382c;
|
||
--dropdown-background-hover: #2f4a3b;
|
||
--button-background: #355c46;
|
||
--button-background-hover: #3f6f55;
|
||
--background-modifier-border: #3e5f4b;
|
||
--background-modifier-border-hover: #4e7a61;
|
||
--background-modifier-border-focus: #497356;
|
||
--text-normal: #e6f2e9;
|
||
--text-muted: #a7c0b1;
|
||
--text-error: #d46a5f;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-dark.forest-green {
|
||
--background-primary: #0d1710;
|
||
--background-primary-alt: #111c14;
|
||
--background-secondary: #142117;
|
||
--background-secondary-alt: #18261c;
|
||
--titlebar-background: #0b140e;
|
||
--titlebar-background-focused: #0a120d;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #0f1a13;
|
||
--background-modifier-form-field: #132016;
|
||
--background-modifier-form-field-hover: #1a2b20;
|
||
--dropdown-background: #142117;
|
||
--dropdown-background-hover: #1e3527;
|
||
--button-background: #1a2f22;
|
||
--button-background-hover: #23482f;
|
||
--button-background-active: #2a5a3a;
|
||
--background-modifier-border: #2a5c38;
|
||
--background-modifier-border-hover: #38754c;
|
||
--background-modifier-border-focus: #4a8f62;
|
||
--text-normal: #bddec8;
|
||
--text-muted: #8ac99f;
|
||
--text-faint: #5e9a7a;
|
||
--text-accent: #a8e0b9;
|
||
--text-error: #ff9a85;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
--toggle-track-color: #2a5c38;
|
||
--toggle-track-color-hover: #38754c;
|
||
}
|
||
|
||
.theme-dark.deep-purple {
|
||
--background-primary: #120d17;
|
||
--background-primary-alt: #18112b;
|
||
--background-secondary: #1a1429;
|
||
--background-secondary-alt: #231b35;
|
||
--titlebar-background: #0f0b1a;
|
||
--titlebar-background-focused: #0c0916;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #161128;
|
||
--background-modifier-form-field: #1d1530;
|
||
--background-modifier-form-field-hover: #2a1f40;
|
||
--dropdown-background: #1e1633;
|
||
--dropdown-background-hover: #2f2350;
|
||
--button-background: #36296b;
|
||
--button-background-hover: #4a3890;
|
||
--button-background-active: #5f47b5;
|
||
--background-modifier-border: #4a3a8a;
|
||
--background-modifier-border-hover: #624daa;
|
||
--background-modifier-border-focus: #7d63cf;
|
||
--text-normal: #d5c6f2;
|
||
--text-muted: #b29ae0;
|
||
--text-faint: #8a71b5;
|
||
--text-accent: #c7afff;
|
||
--text-error: #ffa58e;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
--toggle-track-color: #4a3a8a;
|
||
--toggle-track-color-hover: #624daa;
|
||
}
|
||
|
||
.theme-dark.deep-red {
|
||
--background-primary: #170d0d;
|
||
--background-primary-alt: #2b1111;
|
||
--background-secondary: #291414;
|
||
--background-secondary-alt: #351b1b;
|
||
--titlebar-background: #1a0f0f;
|
||
--titlebar-background-focused: #160c0c;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #281212;
|
||
--background-modifier-form-field: #301616;
|
||
--background-modifier-form-field-hover: #402020;
|
||
--dropdown-background: #331717;
|
||
--dropdown-background-hover: #502727;
|
||
--button-background: #6b2a2a;
|
||
--button-background-hover: #903737;
|
||
--button-background-active: #b54545;
|
||
--background-modifier-border: #8a3a3a;
|
||
--background-modifier-border-hover: #aa4d4d;
|
||
--background-modifier-border-focus: #cf6363;
|
||
--text-normal: #f2cfcf;
|
||
--text-muted: #e0a1a1;
|
||
--text-faint: #b56f6f;
|
||
--text-accent: #ffb8b8;
|
||
--text-error: #ffb0a0;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
--toggle-track-color: #8a3a3a;
|
||
--toggle-track-color-hover: #aa4d4d;
|
||
}
|
||
|
||
.theme-dark.deep-blue {
|
||
--background-primary: #0d1117;
|
||
--background-primary-alt: #11172b;
|
||
--background-secondary: #141c29;
|
||
--background-secondary-alt: #1b2635;
|
||
--titlebar-background: #0b0f1a;
|
||
--titlebar-background-focused: #090d16;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #0f1728;
|
||
--background-modifier-form-field: #162030;
|
||
--background-modifier-form-field-hover: #202e40;
|
||
--dropdown-background: #172133;
|
||
--dropdown-background-hover: #253950;
|
||
--button-background: #2a3f6b;
|
||
--button-background-hover: #355590;
|
||
--button-background-active: #426bb5;
|
||
--background-modifier-border: #3a558a;
|
||
--background-modifier-border-hover: #4d6daa;
|
||
--background-modifier-border-focus: #6389cf;
|
||
--text-normal: #c6dcf2;
|
||
--text-muted: #9abce0;
|
||
--text-faint: #7192b5;
|
||
--text-accent: #afd4ff;
|
||
--text-error: #ffa58e;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
--toggle-track-color: #3a558a;
|
||
--toggle-track-color-hover: #4d6daa;
|
||
}
|
||
|
||
.theme-dark.deep-magenta {
|
||
--background-primary: #170d14;
|
||
--background-primary-alt: #281120;
|
||
--background-secondary: #25131e;
|
||
--background-secondary-alt: #311928;
|
||
--titlebar-background: #130b11;
|
||
--titlebar-background-focused: #10090e;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #22121b;
|
||
--background-modifier-form-field: #2b1521;
|
||
--background-modifier-form-field-hover: #381c2b;
|
||
--dropdown-background: #2e1723;
|
||
--dropdown-background-hover: #452133;
|
||
--button-background: #632652;
|
||
--button-background-hover: #82306b;
|
||
--button-background-active: #a13d84;
|
||
--background-modifier-border: #7a3365;
|
||
--background-modifier-border-hover: #94417e;
|
||
--background-modifier-border-focus: #b3549f;
|
||
--text-normal: #f2c6e6;
|
||
--text-muted: #e09ad0;
|
||
--text-faint: #b571a6;
|
||
--text-accent: #ffafe9;
|
||
--text-error: #ffa58e;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
--toggle-track-color: #7a3365;
|
||
--toggle-track-color-hover: #94417e;
|
||
}
|
||
|
||
.theme-dark.deep-hotpink {
|
||
--background-primary: #1a0d12;
|
||
--background-primary-alt: #24111a;
|
||
--background-secondary: #20131b;
|
||
--background-secondary-alt: #2c1925;
|
||
--titlebar-background: #160b10;
|
||
--titlebar-background-focused: #12090e;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #23121b;
|
||
--background-modifier-form-field: #271520;
|
||
--background-modifier-form-field-hover: #301a27;
|
||
--dropdown-background: #2c1925;
|
||
--dropdown-background-hover: #3a202a;
|
||
--button-background: #4a2636;
|
||
--button-background-hover: #612f46;
|
||
--background-modifier-border: #68374b;
|
||
--background-modifier-border-hover: #804460;
|
||
--background-modifier-border-focus: #a8597a;
|
||
--text-normal: #ffb8dd;
|
||
--text-muted: #ff85c0;
|
||
--text-error: #ff7b6b;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-dark.wine {
|
||
--background-primary: #1a050f;
|
||
--background-primary-alt: #2d0b1c;
|
||
--background-secondary: #1a050f;
|
||
--background-secondary-alt: #3c1028;
|
||
--titlebar-background: #16040d;
|
||
--titlebar-background-focused: #13030b;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #1f0714;
|
||
--text-normal: #f0d9e6;
|
||
--text-muted: #d4b0c9;
|
||
--text-error: #ff8a8a;
|
||
--background-modifier-form-field: #3d0d25;
|
||
--background-modifier-form-field-hover: #350e22;
|
||
--dropdown-background: #3c1028;
|
||
--dropdown-background-hover: #481332;
|
||
--button-background: #3c1028;
|
||
--button-background-hover: #481332;
|
||
--background-modifier-border: #2d0b1c;
|
||
--background-modifier-border-hover: #3c1028;
|
||
--background-modifier-border-focus: #5c1a40;
|
||
--link-color: #cc338a;
|
||
--link-unresolved-color: #b32d7a;
|
||
--link-color-hover: #b32670;;
|
||
}
|
||
|
||
|
||
|
||
.theme-dark.tasty-chocolate {
|
||
--background-primary: #1a140d;
|
||
--background-primary-alt: #2c1f14;
|
||
--background-secondary: #1a140d;
|
||
--background-secondary-alt: #3a2a20;
|
||
--titlebar-background: #16110c;
|
||
--titlebar-background-focused: #140f0a;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #1e1810;
|
||
--text-normal: #e6d8c9;
|
||
--text-muted: #b8a58e;
|
||
--text-error: #d46b5f;
|
||
--background-modifier-form-field: #241a12;
|
||
--background-modifier-form-field-hover: #352618;
|
||
--dropdown-background: #3a2a20;
|
||
--dropdown-background-hover: #453323;
|
||
--button-background: #3a2a20;
|
||
--button-background-hover: #453323;
|
||
--background-modifier-border: #2c1f14;
|
||
--background-modifier-border-hover: #3a2a20;
|
||
--background-modifier-border-focus: #55402e;
|
||
}
|
||
|
||
|
||
.theme-dark.tasty-chocolate-2 {
|
||
--background-primary: #1f1810;
|
||
--background-primary-alt: #312619;
|
||
--background-secondary: #1f1810;
|
||
--background-secondary-alt: #433421;
|
||
--titlebar-background: #1b150e;
|
||
--titlebar-background-focused: #18120c;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #241d14;
|
||
--text-normal: #f0e6d6;
|
||
--text-muted: #d4c4a8;
|
||
--text-error: #d46b5f;
|
||
--background-modifier-form-field: #453522;
|
||
--background-modifier-form-field-hover: #392c1f;
|
||
--dropdown-background: #433421;
|
||
--dropdown-background-hover: #4e3c26;
|
||
--button-background: #433421;
|
||
--button-background-hover: #4e3c26;
|
||
--background-modifier-border: #312619;
|
||
--background-modifier-border-hover: #403325;
|
||
--background-modifier-border-focus: #5c4a35;
|
||
}
|
||
|
||
.theme-dark.velvet {
|
||
--background-primary: #1a0f0f;
|
||
--background-primary-alt: #2c1818;
|
||
--background-secondary: #1a0f0f;
|
||
--background-secondary-alt: #3a2222;
|
||
--titlebar-background: #160d0d;
|
||
--titlebar-background-focused: #130b0b;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #1e1313;
|
||
--text-normal: #f2cfcf;
|
||
--text-muted: #d4a8a8;
|
||
--text-error: #d46b5f;
|
||
--background-modifier-form-field: #3e2424;
|
||
--background-modifier-form-field-hover: #351d1d;
|
||
--dropdown-background: #3a2222;
|
||
--dropdown-background-hover: #462828;
|
||
--button-background: #3a2222;
|
||
--button-background-hover: #462828;
|
||
--background-modifier-border: #2c1818;
|
||
--background-modifier-border-hover: #3a2222;
|
||
--background-modifier-border-focus: #553434;
|
||
}
|
||
|
||
.theme-dark.leather {
|
||
--background-primary: #201a14;
|
||
--background-primary-alt: #332a20;
|
||
--background-secondary: #201a14;
|
||
--background-secondary-alt: #443829;
|
||
--titlebar-background: #1c1712;
|
||
--titlebar-background-focused: #191410;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #251e18;
|
||
--text-normal: #f2e8dc;
|
||
--text-muted: #d4c8b8;
|
||
--text-error: #d46b5f;
|
||
--background-modifier-form-field: #3e3326;
|
||
--background-modifier-form-field-hover: #3b3025;
|
||
--dropdown-background: #443829;
|
||
--dropdown-background-hover: #504330;
|
||
--button-background: #443829;
|
||
--button-background-hover: #504330;
|
||
--background-modifier-border: #332a20;
|
||
--background-modifier-border-hover: #443829;
|
||
--background-modifier-border-focus: #5d503c;
|
||
}
|
||
|
||
.theme-dark.green-road {
|
||
--background-primary: #161a20;
|
||
--background-primary-alt: #222831;
|
||
--background-secondary: #15181d;
|
||
--background-secondary-alt: #353d42;
|
||
--titlebar-background: #12151a;
|
||
--titlebar-background-focused: #101318;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #1b1f26;
|
||
|
||
--text-normal: #e6e9e3;
|
||
--text-muted: #b8beb6;
|
||
|
||
--background-modifier-form-field: #333743;
|
||
--background-modifier-form-field-hover: #2f3833;
|
||
|
||
--dropdown-background: #2b3236;
|
||
--dropdown-background-hover: #353d42;
|
||
|
||
--button-background: #474f27;
|
||
--button-background-hover: #464f1d;
|
||
|
||
--background-modifier-border: #404d58;
|
||
--background-modifier-border-hover: #3a4248;
|
||
--background-modifier-border-focus: #5e6b52;
|
||
|
||
--color-accent-hsl: 75, 28%, 38%;
|
||
--color-accent: #7f8d42;
|
||
--color-accent-1: #6f7a42;
|
||
--color-accent-2: #8f9f4f;
|
||
|
||
--interactive-accent: #60a590;
|
||
--text-on-accent: #ffffff;
|
||
|
||
--link-color: #6f8a5a;
|
||
--link-unresolved-color: #5f7a5f;
|
||
--link-color-hover: #7f8d42;
|
||
|
||
--toggle-thumb-color: #6f7a42;
|
||
|
||
.checkbox-container.is-enabled::after {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.checkbox-container.is-enabled,
|
||
.checkbox-container.is-enabled::after {
|
||
background-color: #68823e;
|
||
}
|
||
|
||
.checkbox-container.is-enabled:hover {
|
||
background-color: #2e4036;
|
||
}
|
||
|
||
/* .checkbox-container {
|
||
background-color: #2e4036;
|
||
} */
|
||
}
|
||
|
||
|
||
.theme-dark.red-forest {
|
||
--background-primary: #2f2f2f;
|
||
--background-primary-alt: #262626;
|
||
--background-secondary: #262626;
|
||
--background-secondary-alt: #333333;
|
||
--titlebar-background: #242424;
|
||
--titlebar-background-focused: #1f1f1f;
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #1f1f1f;
|
||
--text-normal: #e6e9e3;
|
||
--text-muted: #b8beb6;
|
||
--text-error: #b54a45;
|
||
--background-modifier-form-field: #383838;
|
||
--background-modifier-form-field-hover: #444444;
|
||
--dropdown-background: #353535;
|
||
--dropdown-background-hover: #404040;
|
||
|
||
--button-background: #944b4b;
|
||
--button-background-hover: #b34949;
|
||
|
||
--background-modifier-border: #4a2a2a;
|
||
--background-modifier-border-hover: #5a3333;
|
||
--background-modifier-border-focus: #7a3f3f;
|
||
|
||
--color-accent-hsl: 0, 45%, 40%;
|
||
--color-accent: #b34949;
|
||
--color-accent-1: #a04646;
|
||
--color-accent-2: #b85656;
|
||
|
||
|
||
/* red accent buttons */
|
||
--interactive-accent: #944b4b;
|
||
--interactive-accent-hover: #944b4b;
|
||
|
||
/* green normal buttons */
|
||
--interactive-normal: #6f7a42;
|
||
--interactive-hover: #7f8d42;
|
||
|
||
--text-on-accent: #ffffff;
|
||
--link-color: #6f8a5a;
|
||
--link-unresolved-color: #7a3f3f;
|
||
--link-color-hover: #7f8d42;
|
||
--toggle-thumb-color: #6f7a42;
|
||
|
||
.checkbox-container {
|
||
background-color: #484848;
|
||
}
|
||
|
||
.checkbox-container.is-enabled {
|
||
background-color: #944b4b;
|
||
}
|
||
|
||
.checkbox-container.is-enabled::after {
|
||
background-color: #b8a577;
|
||
}
|
||
|
||
.checkbox-container.is-enabled:hover {
|
||
background-color: #2e4036;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.theme-dark ::selection,
|
||
.theme-light ::selection {
|
||
background-color: hsl(var(--interactive-accent-hsl), 0.3) !important;
|
||
}
|
||
|
||
|
||
.cm-s-obsidian span.cm-highlight, mark,
|
||
body .cm-s-obsidian span.cm-highlight,
|
||
body mark {
|
||
border-radius: 6px;
|
||
padding: 2px 4px;
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.4) !important;
|
||
border: none;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.underlined-highlight .cm-s-obsidian span.cm-highlight,
|
||
.underlined-highlight mark {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.3) !important;
|
||
border-bottom: 2px solid hsla(var(--interactive-accent-hsl), 0.6) !important;
|
||
padding: 2px 4px;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.bordered-highlight .cm-s-obsidian span.cm-highlight,
|
||
.bordered-highlight mark {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.4) !important;
|
||
border: 2px solid hsla(var(--interactive-accent-hsl), 0.6) !important;
|
||
padding: 0px 4px;
|
||
padding-top: 2px;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
.only-underline .cm-s-obsidian span.cm-highlight,
|
||
.only-underline mark {
|
||
background-color: transparent !important;
|
||
border-bottom: 2px solid hsla(var(--interactive-accent-hsl), 0.6) !important;
|
||
padding: 2px 4px;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.only-border .cm-s-obsidian span.cm-highlight,
|
||
.only-border mark {
|
||
background-color: transparent !important;
|
||
border: 2px solid hsla(var(--interactive-accent-hsl), 0.6) !important;
|
||
padding: 0px 4px;
|
||
padding-top: 2px;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
/* =========
|
||
Light theme vars
|
||
========= */
|
||
.theme-light {
|
||
--tag-radius: var(--button-radius) !important;
|
||
--ribbon-background: var(--titlebar-background-focused);
|
||
--button-shadow: #00000025;
|
||
--blockquote-border-thickness: 4px;
|
||
--toggle-thumb-color: var(--text-normal);
|
||
--caret-color: var(--color-accent);
|
||
--checkbox-color: var(--color-blue);
|
||
--text-error: rgb(220, 80, 80);
|
||
|
||
--background-primary: #f8f9fa;
|
||
--background-primary-alt: #e9ecef;
|
||
|
||
--background-secondary: #f1f3f5;
|
||
--background-secondary-alt: #e9ecef;
|
||
|
||
--titlebar-background: #f1f3f5;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--code-background: var(--background-secondary);
|
||
--code-border-color: var(--background-secondary-alt);
|
||
--code-border-width: 2px;
|
||
--code-radius: var(--button-radius);
|
||
|
||
--interactive-normal: var(--button-background);
|
||
--interactive-hover: var(--button-background-hover);
|
||
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #f8f9fa;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #f8f9fa;
|
||
--button-background: #e9ecef;
|
||
--button-background-hover: #dee2e6;
|
||
--background-modifier-border: #dee2e6;
|
||
--background-modifier-border-hover: #ced4da;
|
||
|
||
--accent-red: var(--color-red);
|
||
--accent-orange: var(--color-orange);
|
||
--accent-yellow: var(--color-yellow);
|
||
--accent-green: var(--color-green);
|
||
--accent-cyan: var(--color-cyan);
|
||
--accent-blue: var(--color-blue);
|
||
--accent-purple: var(--color-purple);
|
||
--accent-pink: var(--color-pink);
|
||
--accent-brown: var(--color-brown);
|
||
--accent-gray: var(--text-muted);
|
||
|
||
--color-red: #e03131;
|
||
--color-orange: #e8590c;
|
||
--color-yellow: #f08c00;
|
||
--color-green: #2f9e44;
|
||
--color-cyan: #0c8599;
|
||
--color-blue: #1971c2;
|
||
--color-purple: #5f3dc4;
|
||
--color-pink: #c2255c;
|
||
--color-brown: #7b4b11;
|
||
--color-gray: #868e96;
|
||
|
||
--text-normal: #212529;
|
||
--text-muted: #495057;
|
||
--text-faint: #6c757d;
|
||
|
||
--hr-color: var(--background-modifier-border);
|
||
|
||
--tab-radius: 8px;
|
||
--text-highlight-bg: rgba(255, 224, 130, 0.5);
|
||
--button-radius: 20px;
|
||
}
|
||
|
||
.theme-light.paper-white {
|
||
--background-primary: #ffffff;
|
||
--background-primary-alt: #f8f9fa;
|
||
--background-secondary: #f8f9fa;
|
||
--background-secondary-alt: #e9ecef;
|
||
--titlebar-background: #f8f9fa;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #212529;
|
||
--text-muted: #495057;
|
||
--text-error: #e03131;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #f8f9fa;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #f8f9fa;
|
||
--button-background: #e9ecef;
|
||
--button-background-hover: #dee2e6;
|
||
--background-modifier-border: #dee2e6;
|
||
--background-modifier-border-hover: #ced4da;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.light-gray {
|
||
--background-primary: #f0f2f5;
|
||
--background-primary-alt: #e6e8eb;
|
||
--background-secondary: #e6e8eb;
|
||
--background-secondary-alt: #d8dbdf;
|
||
--titlebar-background: #e6e8eb;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #2d3748;
|
||
--text-muted: #4a5568;
|
||
--text-error: #c53030;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #f7fafc;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #f7fafc;
|
||
--button-background: #e2e8f0;
|
||
--button-background-hover: #cbd5e0;
|
||
--background-modifier-border: #e2e8f0;
|
||
--background-modifier-border-hover: #cbd5e0;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.soft-sand {
|
||
--background-primary: #fdf6e3;
|
||
--background-primary-alt: #f5e9d1;
|
||
--background-secondary: #f5e9d1;
|
||
--background-secondary-alt: #eed9b7;
|
||
--titlebar-background: #f5e9d1;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #fffef8;
|
||
--text-normal: #5c4b3a;
|
||
--text-muted: #8a7a6b;
|
||
--text-error: #c44141;
|
||
--background-modifier-form-field: #fffef8;
|
||
--background-modifier-form-field-hover: #fdf6e3;
|
||
--dropdown-background: #fffef8;
|
||
--dropdown-background-hover: #fdf6e3;
|
||
--button-background: #f0e0c2;
|
||
--button-background-hover: #e6d1af;
|
||
--background-modifier-border: #e6d1af;
|
||
--background-modifier-border-hover: #d4be9c;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.green {
|
||
--background-primary: #f0fdf4;
|
||
--background-primary-alt: #dcfce7;
|
||
--background-secondary: #dcfce7;
|
||
--background-secondary-alt: #bbf7d0;
|
||
--titlebar-background: #dcfce7;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #14532d;
|
||
--text-muted: #166534;
|
||
--text-error: #dc2626;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #f0fdf4;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #f0fdf4;
|
||
--button-background: #bbf7d0;
|
||
--button-background-hover: #86efac;
|
||
--background-modifier-border: #86efac;
|
||
--background-modifier-border-hover: #4ade80;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.purple {
|
||
--background-primary: #faf5ff;
|
||
--background-primary-alt: #f3e8ff;
|
||
--background-secondary: #f3e8ff;
|
||
--background-secondary-alt: #e9d5ff;
|
||
--titlebar-background: #f3e8ff;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #581c87;
|
||
--text-muted: #7c3aed;
|
||
--text-error: #be185d;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #faf5ff;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #faf5ff;
|
||
--button-background: #e9d5ff;
|
||
--button-background-hover: #d8b4fe;
|
||
--background-modifier-border: #d8b4fe;
|
||
--background-modifier-border-hover: #c084fc;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.blue {
|
||
--background-primary: #f0f9ff;
|
||
--background-primary-alt: #e0f2fe;
|
||
--background-secondary: #e0f2fe;
|
||
--background-secondary-alt: #bae6fd;
|
||
--titlebar-background: #e0f2fe;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #0c4a6e;
|
||
--text-muted: #0369a1;
|
||
--text-error: #be123c;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #f0f9ff;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #f0f9ff;
|
||
--button-background: #bae6fd;
|
||
--button-background-hover: #7dd3fc;
|
||
--background-modifier-border: #7dd3fc;
|
||
--background-modifier-border-hover: #38bdf8;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.peach {
|
||
--background-primary: #fff7ed;
|
||
--background-primary-alt: #ffedd5;
|
||
--background-secondary: #ffedd5;
|
||
--background-secondary-alt: #fed7aa;
|
||
--titlebar-background: #ffedd5;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #7c2d12;
|
||
--text-muted: #c2410c;
|
||
--text-error: #b91c1c;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #fff7ed;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #fff7ed;
|
||
--button-background: #fed7aa;
|
||
--button-background-hover: #fdba74;
|
||
--background-modifier-border: #fdba74;
|
||
--background-modifier-border-hover: #fb923c;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.pink {
|
||
--background-primary: #fff1f2;
|
||
--background-primary-alt: #ffe4e6;
|
||
--background-secondary: #ffe4e6;
|
||
--background-secondary-alt: #fecdd3;
|
||
--titlebar-background: #ffe4e6;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #881337;
|
||
--text-muted: #be123c;
|
||
--text-error: #b91c1c;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #fff1f2;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #fff1f2;
|
||
--button-background: #fecdd3;
|
||
--button-background-hover: #fda4af;
|
||
--background-modifier-border: #fda4af;
|
||
--background-modifier-border-hover: #fb7185;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.cyan {
|
||
--background-primary: #f0fdfa;
|
||
--background-primary-alt: #ccfbf1;
|
||
--background-secondary: #ccfbf1;
|
||
--background-secondary-alt: #99f6e4;
|
||
--titlebar-background: #ccfbf1;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #134e4a;
|
||
--text-muted: #0d9488;
|
||
--text-error: #dc2626;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #f0fdfa;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #f0fdfa;
|
||
--button-background: #99f6e4;
|
||
--button-background-hover: #5eead4;
|
||
--background-modifier-border: #5eead4;
|
||
--background-modifier-border-hover: #2dd4bf;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.yellow {
|
||
--background-primary: #fefce8;
|
||
--background-primary-alt: #fef9c3;
|
||
--background-secondary: #fef9c3;
|
||
--background-secondary-alt: #fef08a;
|
||
--titlebar-background: #fef9c3;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #854d0e;
|
||
--text-muted: #ca8a04;
|
||
--text-error: #b91c1c;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #fefce8;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #fefce8;
|
||
--button-background: #fef08a;
|
||
--button-background-hover: #fde047;
|
||
--background-modifier-border: #fde047;
|
||
--background-modifier-border-hover: #facc15;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.cloud-white {
|
||
--background-primary: #f8fafc;
|
||
--background-primary-alt: #f1f5f9;
|
||
--background-secondary: #f1f5f9;
|
||
--background-secondary-alt: #e2e8f0;
|
||
--titlebar-background: #f1f5f9;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #1e293b;
|
||
--text-muted: #475569;
|
||
--text-error: #dc2626;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #f8fafc;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #f8fafc;
|
||
--button-background: #e2e8f0;
|
||
--button-background-hover: #cbd5e1;
|
||
--background-modifier-border: #cbd5e1;
|
||
--background-modifier-border-hover: #94a3b8;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.azure {
|
||
--background-primary: #eff6ff;
|
||
--background-primary-alt: #dbeafe;
|
||
--background-secondary: #dbeafe;
|
||
--background-secondary-alt: #bfdbfe;
|
||
--titlebar-background: #dbeafe;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #1e3a8a;
|
||
--text-muted: #1d4ed8;
|
||
--text-error: #b91c1c;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #eff6ff;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #eff6ff;
|
||
--button-background: #bfdbfe;
|
||
--button-background-hover: #93c5fd;
|
||
--background-modifier-border: #93c5fd;
|
||
--background-modifier-border-hover: #60a5fa;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.herb {
|
||
--background-primary: #f1f8e9;
|
||
--background-primary-alt: #e1f2da;
|
||
--background-secondary: #e8f5e9;
|
||
--background-secondary-alt: #c8e6c9;
|
||
--titlebar-background: #e8f5e9;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #2e7d32;
|
||
--text-muted: #4caf50;
|
||
--text-error: #c62828;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #f1f8e9;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #f1f8e9;
|
||
--button-background: #c8e6c9;
|
||
--button-background-hover: #a5d6a7;
|
||
--background-modifier-border: #a5d6a7;
|
||
--background-modifier-border-hover: #81c784;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.toothpaste {
|
||
--background-primary: #d0f7ff;
|
||
--background-primary-alt: #a8f0ff;
|
||
--background-secondary: #a8f0ff;
|
||
--background-secondary-alt: #70e0ff;
|
||
--titlebar-background: #a8f0ff;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #004f63;
|
||
--text-muted: #007a8f;
|
||
--text-error: #c62828;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #d0f7ff;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #d0f7ff;
|
||
--button-background: #70e0ff;
|
||
--button-background-hover: #3fd4ff;
|
||
--background-modifier-border: #33c7e0;
|
||
--background-modifier-border-hover: #00b4d9;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.rose {
|
||
--background-primary: #f6d6df;
|
||
--background-primary-alt: #efb9c8;
|
||
--background-secondary: #efb9c8;
|
||
--background-secondary-alt: #e79aad;
|
||
--titlebar-background: #efb9c8;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #6b1238;
|
||
--text-muted: #8c2a52;
|
||
--text-error: #a61d2d;
|
||
--background-modifier-form-field: #fffafa;
|
||
--background-modifier-form-field-hover: #f6d6df;
|
||
--dropdown-background: #fffafa;
|
||
--dropdown-background-hover: #f6d6df;
|
||
--button-background: #e79aad;
|
||
--button-background-hover: #dc7f99;
|
||
--background-modifier-border: #d86c8a;
|
||
--background-modifier-border-hover: #c95678;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.yellow-teeth {
|
||
--background-primary: #f5f2d8;
|
||
--background-primary-alt: #ece6b8;
|
||
--background-secondary: #ece6b8;
|
||
--background-secondary-alt: #e0d68f;
|
||
--titlebar-background: #ece6b8;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #fffef8;
|
||
--text-normal: #6f6400;
|
||
--text-muted: #8a7f1a;
|
||
--text-error: #9e2a2b;
|
||
--background-modifier-form-field: #fffef8;
|
||
--background-modifier-form-field-hover: #f5f2d8;
|
||
--dropdown-background: #fffef8;
|
||
--dropdown-background-hover: #f5f2d8;
|
||
--button-background: #e0d68f;
|
||
--button-background-hover: #d4c96a;
|
||
--background-modifier-border: #c2b83f;
|
||
--background-modifier-border-hover: #b0a62c;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.blood {
|
||
--background-primary: #f2d6d9;
|
||
--background-primary-alt: #e6b3b8;
|
||
--background-secondary: #e6b3b8;
|
||
--background-secondary-alt: #d48a92;
|
||
--titlebar-background: #e6b3b8;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #6f0f14;
|
||
--text-muted: #8a2a2f;
|
||
--text-error: #4d0000;
|
||
--background-modifier-form-field: #fffafa;
|
||
--background-modifier-form-field-hover: #f2d6d9;
|
||
--dropdown-background: #fffafa;
|
||
--dropdown-background-hover: #f2d6d9;
|
||
--button-background: #d48a92;
|
||
--button-background-hover: #c46b74;
|
||
--background-modifier-border: #b94a52;
|
||
--background-modifier-border-hover: #a33239;
|
||
--toggle-thumb-color: var(--background-secondary-alt);
|
||
--color-accent: #c51e1e;
|
||
--color-accent-1: #da3232;
|
||
--color-accent-2: #ff5151;
|
||
--interactive-accent: #b32626;
|
||
}
|
||
|
||
.theme-light.corporate {
|
||
--background-primary: #e7ebef;
|
||
--background-primary-alt: #d6dde5;
|
||
--background-secondary: #d6dde5;
|
||
--background-secondary-alt: #c1ccd8;
|
||
--titlebar-background: #d6dde5;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #1f2a37;
|
||
--text-muted: #3a4a5e;
|
||
--text-error: #8b1d1d;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #e7ebef;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #e7ebef;
|
||
--button-background: #c1ccd8;
|
||
--button-background-hover: #aebccc;
|
||
--background-modifier-border: #8fa3b8;
|
||
--background-modifier-border-hover: #738aa3;
|
||
}
|
||
|
||
.theme-light.payesh {
|
||
--background-primary: #e7e7de;
|
||
--background-primary-alt: #d8d8c9;
|
||
--background-secondary: #d8d8c9;
|
||
--background-secondary-alt: #c9c9b5;
|
||
--titlebar-background: #d8d8c9;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #5d5c5a;
|
||
--text-muted: #7a7976;
|
||
--text-error: #c62828;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #f5f5f0;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #f5f5f0;
|
||
--button-background: #c9c9b5;
|
||
--button-background-hover: #b8b8a0;
|
||
--background-modifier-border: #a9a98c;
|
||
--background-modifier-border-hover: #989876;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.chicken {
|
||
--background-primary: #fff8e1;
|
||
--background-primary-alt: #ffecb3;
|
||
--background-secondary: #ffecb3;
|
||
--background-secondary-alt: #ffe082;
|
||
--titlebar-background: #ffecb3;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
|
||
--text-normal: #eb8502;
|
||
--text-muted: #ffa000;
|
||
--text-error: #c62828;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-hover: #fff8e1;
|
||
--dropdown-background: #ffffff;
|
||
--dropdown-background-hover: #fff8e1;
|
||
--button-background: #ffe082;
|
||
--button-background-hover: #ffd54f;
|
||
--background-modifier-border: #ffca28;
|
||
--background-modifier-border-hover: #ffb300;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.disgust {
|
||
--toggle-thumb-color: white;
|
||
--background-primary: #f2f4e6;
|
||
--background-primary-alt: #e1e5c0;
|
||
--background-secondary: #e1e5c0;
|
||
--background-secondary-alt: #c8d197;
|
||
--titlebar-background: #e1e5c0;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #f9f9f2;
|
||
--text-normal: #7a7015;
|
||
--text-muted: #9c9a3c;
|
||
--text-error: #9e2a2b;
|
||
--background-modifier-form-field: #f9f9f2;
|
||
--background-modifier-form-field-hover: #f2f4e6;
|
||
--dropdown-background: #f9f9f2;
|
||
--dropdown-background-hover: #f2f4e6;
|
||
--button-background: #c8d197;
|
||
--button-background-hover: #aeb761;
|
||
--background-modifier-border: #aeb761;
|
||
--background-modifier-border-hover: #8e944c;
|
||
}
|
||
|
||
.theme-light.gray {
|
||
--toggle-thumb-color: var(--background-primary);
|
||
--caret-color: black;
|
||
--background-primary: #808080;
|
||
--background-primary-alt: #7a7a7a;
|
||
--background-secondary: #7a7a7a;
|
||
--background-secondary-alt: #737373;
|
||
--titlebar-background: #7a7a7a;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #dcdcdc;
|
||
--text-normal: #000000;
|
||
--text-muted: #333333;
|
||
--text-error: #c62828;
|
||
--background-modifier-form-field: #dcdcdc;
|
||
--background-modifier-form-field-hover: #e0e0e0;
|
||
--dropdown-background: #dcdcdc;
|
||
--dropdown-background-hover: #e0e0e0;
|
||
--button-background: #737373;
|
||
--button-background-hover: #6a6a6a;
|
||
--background-modifier-border: #666666;
|
||
--background-modifier-border-hover: #5c5c5c;
|
||
}
|
||
|
||
.theme-light.jade {
|
||
--background-primary: #dcedc8;
|
||
--background-primary-alt: #c5e1a5;
|
||
--background-secondary: #c8e6c9;
|
||
--background-secondary-alt: #a5d6a7;
|
||
--titlebar-background: #c8e6c9;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #e8f5e9;
|
||
--text-normal: #1b5e20;
|
||
--text-muted: #2e7d32;
|
||
--text-error: #b71c1c;
|
||
--background-modifier-form-field: #f1f8e9;
|
||
--background-modifier-form-field-hover: #dcedc8;
|
||
--dropdown-background: #f1f8e9;
|
||
--dropdown-background-hover: #dcedc8;
|
||
--button-background: #a5d6a7;
|
||
--button-background-hover: #81c784;
|
||
--background-modifier-border: #81c784;
|
||
--background-modifier-border-hover: #66bb6a;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.olive {
|
||
--olive-base: #636b2f;
|
||
--background-primary: #e3e7d6;
|
||
--background-primary-alt: #d3d9bf;
|
||
--background-secondary: #d0d6ba;
|
||
--background-secondary-alt: #bfc7a1;
|
||
--titlebar-background: #d0d6ba;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #f0f3e8;
|
||
--text-normal: #2f3316;
|
||
--text-muted: #4a5030;
|
||
--text-error: #8b1d1d;
|
||
--background-modifier-form-field: #f0f3e8;
|
||
--background-modifier-form-field-hover: #e3e7d6;
|
||
--dropdown-background: #f0f3e8;
|
||
--dropdown-background-hover: #e3e7d6;
|
||
--button-background: #bfc7a1;
|
||
--button-background-hover: #aeb88c;
|
||
--background-modifier-border: #aeb88c;
|
||
--background-modifier-border-hover: #9aa56f;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
--color-accent: #636b2f;
|
||
--color-accent-1: #747d38;
|
||
--color-accent-2: #8a9446;
|
||
}
|
||
|
||
.theme-light.cream-blue {
|
||
--cream-base: #f6f1e7;
|
||
--red-accent: #e53935;
|
||
--cyan-accent: #00acc1;
|
||
--background-primary: #f6f1e7;
|
||
--background-primary-alt: #efe7d8;
|
||
--background-secondary: #efe7d8;
|
||
--background-secondary-alt: #e5dcc8;
|
||
--titlebar-background: #efe7d8;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #fbf8f2;
|
||
--text-normal: #3b3328;
|
||
--text-muted: #6b6256;
|
||
--text-error: var(--red-accent);
|
||
--background-modifier-form-field: #fbf8f2;
|
||
--background-modifier-form-field-hover: #f6f1e7;
|
||
--dropdown-background: #fbf8f2;
|
||
--dropdown-background-hover: #f6f1e7;
|
||
--button-background: #e5dcc8;
|
||
--button-background-hover: #d9cfb8;
|
||
--background-modifier-border: #d9cfb8;
|
||
--background-modifier-border-hover: #cbbf9f;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
--color-accent: #007f8f;
|
||
--color-accent-1: #26c6da;
|
||
--color-accent-2: #4dd0e1;
|
||
--interactive-accent: #26c6da;
|
||
--interactive-accent-hsl: 187, 71%, 50%;
|
||
--accent-red: var(--red-accent);
|
||
}
|
||
|
||
.theme-light.cream {
|
||
--cream-base: #f6f1e7;
|
||
--red-accent: #e53935;
|
||
--cyan-accent: #00acc1;
|
||
--background-primary: #f6f1e7;
|
||
--background-primary-alt: #efe7d8;
|
||
--background-secondary: #efe7d8;
|
||
--background-secondary-alt: #e5dcc8;
|
||
--titlebar-background: #efe7d8;
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
--tab-container-background: var(--titlebar-background);
|
||
--code-background: #fbf8f2;
|
||
--text-normal: #3b3328;
|
||
--text-muted: #6b6256;
|
||
--text-error: var(--red-accent);
|
||
--background-modifier-form-field: #fbf8f2;
|
||
--background-modifier-form-field-hover: #f6f1e7;
|
||
--dropdown-background: #fbf8f2;
|
||
--dropdown-background-hover: #f6f1e7;
|
||
--button-background: #e5dcc8;
|
||
--button-background-hover: #d9cfb8;
|
||
--background-modifier-border: #d9cfb8;
|
||
--background-modifier-border-hover: #cbbf9f;
|
||
--toggle-thumb-color: var(--background-primary);
|
||
--accent-red: var(--red-accent);
|
||
}
|
||
|
||
/* RETRO ISH STYLING, NO MORE */
|
||
/*
|
||
.theme-light ::selection {
|
||
background: rgba(74, 111, 165, 0.2);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.theme-light textarea,
|
||
.theme-light select {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
color: var(--text-normal);
|
||
font-family: inherit;
|
||
}
|
||
|
||
.theme-light button {
|
||
background: linear-gradient(180deg,
|
||
rgba(255, 255, 255, 0.9),
|
||
rgba(230, 232, 235, 0.9));
|
||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
padding: 6px 12px;
|
||
margin: auto 2px;
|
||
color: var(--text-normal);
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease;
|
||
gap: 4px !important;
|
||
}
|
||
|
||
.theme-light button:hover {
|
||
background: linear-gradient(180deg,
|
||
rgba(230, 232, 235, 0.9),
|
||
rgba(255, 255, 255, 0.9));
|
||
border-color: rgba(0, 0, 0, 0.2);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.theme-light button:active {
|
||
background: linear-gradient(180deg,
|
||
rgba(255, 255, 255, 0.9),
|
||
rgba(230, 232, 235, 0.9));
|
||
transform: translateY(1px);
|
||
} */
|
||
|
||
/* ================================== */
|
||
/* COOL EXTRA STUFF */
|
||
/* ================================== */
|
||
|
||
/* ===== focus mode ===== */
|
||
.focus-mode .titlebar-button-container {
|
||
display: none !important;
|
||
}
|
||
|
||
.focus-mode .workspace-tab-header-container,
|
||
.focus-mode .status-bar,
|
||
.focus-mode .metadata-properties-heading,
|
||
.focus-mode ::-webkit-scrollbar {
|
||
display: none !important;
|
||
}
|
||
|
||
.focus-mode .workspace-tab-container:has(.cm-scroller) {
|
||
padding-bottom: 14px;
|
||
padding-top: 4px !important;
|
||
}
|
||
|
||
/* ===== Lined Notebook ===== */
|
||
.lined .cm-line {
|
||
border-bottom: 1.5px solid rgba(128, 128, 128, 0.178) !important;
|
||
}
|
||
|
||
/* ===== hide status bar ===== */
|
||
.hide-status-bar .status-bar {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ===== center status bar ===== */
|
||
.centered-statusbar {
|
||
.status-bar {
|
||
background-color: transparent !important;
|
||
position: fixed;
|
||
right: 33% !important;
|
||
bottom: 0px;
|
||
backdrop-filter: blur(15px);
|
||
border-top: 1px solid var(--shade-plus-darker);
|
||
border-left: 1px solid var(--shade-plus-darker);
|
||
border-top-left-radius: 5px;
|
||
border-top-right-radius: 5px;
|
||
border-bottom-left-radius: 5px;
|
||
border-bottom-right-radius: 5px;
|
||
line-height: 1;
|
||
padding: 8px 12px 8px 0;
|
||
opacity: 0.5 !important;
|
||
transition: calc(var(--animation-duration) * 0.6667);
|
||
background-color: transparent !important;
|
||
border: none;
|
||
padding: 8px !important;
|
||
transform: none !important;
|
||
font-size: smaller;
|
||
}
|
||
|
||
.status-bar:hover {
|
||
opacity: 1 !important;
|
||
transition: calc(var(--animation-duration) * 0.6667);
|
||
background-color: transparent !important;
|
||
padding: 8px !important;
|
||
transform: none !important;
|
||
transition: none;
|
||
}
|
||
|
||
.status-bar-item {
|
||
padding: 0 0 0 10px;
|
||
}
|
||
|
||
.workspace-tab-container:has(.cm-scroller) {
|
||
padding-bottom: 40px !important;
|
||
padding-top: 8px !important;
|
||
}
|
||
}
|
||
|
||
/* ===== icon styles ===== */
|
||
.filled svg {
|
||
fill: currentColor;
|
||
fill-opacity: 25%;
|
||
}
|
||
|
||
.big svg,
|
||
.big svg.svg-icon,
|
||
.big .clickable-icon {
|
||
--icon-size: 22px !important;
|
||
}
|
||
|
||
.big-filled svg,
|
||
.big-filled svg.svg-icon,
|
||
.big-filled .clickable-icon {
|
||
--icon-size: 22px !important;
|
||
fill: currentColor;
|
||
fill-opacity: 25%;
|
||
}
|
||
|
||
.big-filled .workspace-tab-header .workspace-tab-header-inner-icon,
|
||
.big .workspace-tab-header .workspace-tab-header-inner-icon {
|
||
--icon-size: 18px !important;
|
||
width: 22px;
|
||
}
|
||
/* ==================================================
|
||
RIBBON STYLE
|
||
================================================== */
|
||
|
||
/* Default ribbon styling */
|
||
.workspace-ribbon.side-dock-ribbon,
|
||
.sidebar-toggle-button {
|
||
/* background-color: var(--ribbon-background) !important; */
|
||
border: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
|
||
/* Only apply when the left ribbon is visible */
|
||
|
||
/* Sidebar toggle button */
|
||
|
||
/* ribbon on, sidebar off (collapsed) */
|
||
.workspace-ribbon.is-collapsed .sidebar-toggle-button.mod-left .clickable-icon {
|
||
margin-bottom: 10px !important;
|
||
margin-left: 0px !important;
|
||
margin-top: -4px !important;
|
||
}
|
||
|
||
/* ribbon on, sidebar on (not collapsed) */
|
||
.workspace-ribbon:not(.is-collapsed) .sidebar-toggle-button.mod-left .clickable-icon {
|
||
margin-bottom: 10px !important;
|
||
margin-left: 0px !important;
|
||
margin-top: -4px !important;
|
||
}
|
||
|
||
/* ribbon off, sidebar on — handled below in workspace-tab-header-container rules */
|
||
|
||
|
||
/* .sidebar-toggle-button.mod-left .clickable-icon {
|
||
margin-bottom: 10px !important;
|
||
margin-left: 0px !important;
|
||
margin-top: -4px !important;
|
||
} */
|
||
|
||
/* .workspace:has(.workspace-ribbon:is(.is-collapsed)) .workspace-tab-header-container-inner {
|
||
margin-left: 0px !important;
|
||
} */
|
||
|
||
/* .workspace:has(.workspace-ribbon:is(.is-collapsed)) .workspace-tab-header-container-inner {
|
||
margin-left: -16px !important;
|
||
}
|
||
|
||
.workspace:has(.workspace-ribbon:not(.is-collapsed)) .workspace-tab-header-container-inner {
|
||
margin-left: 20px !important;
|
||
} */
|
||
|
||
.workspace:has(.workspace-ribbon:is(.is-collapsed)) .workspace-tab-header-container-inner {
|
||
margin-left: 0px !important;
|
||
}
|
||
|
||
.workspace-ribbon.mod-left {
|
||
border-right: 1.5px solid var(--background-modifier-border) !important;
|
||
}
|
||
|
||
.bubble {
|
||
.workspace-ribbon.mod-left.is-collapsed {
|
||
border-right: 0px solid var(--background-modifier-border) !important;
|
||
}
|
||
}
|
||
|
||
/* Ribbon icon */
|
||
|
||
.side-dock-actions {
|
||
gap: 2px;
|
||
margin-top: -3px;
|
||
opacity: 0.7;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.workspace-ribbon.side-dock-ribbon:hover .side-dock-actions {
|
||
opacity: 1;
|
||
}
|
||
|
||
.workspace-ribbon.side-dock-ribbon .clickable-icon {
|
||
background-color: transparent;
|
||
border-radius: var(--button-radius) !important;
|
||
padding: 6px !important;
|
||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
|
||
}
|
||
|
||
.workspace-ribbon.side-dock-ribbon .clickable-icon:hover {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
color: var(--interactive-accent);
|
||
border-radius: var(--button-radius) !important;
|
||
transform: scale(1);
|
||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), all 0.2s ease !important;
|
||
}
|
||
|
||
.workspace-ribbon.side-dock-ribbon .clickable-icon:active {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
color: var(--interactive-accent);
|
||
border-radius: var(--button-radius) !important;
|
||
transform: scale(0.8);
|
||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), all 0.2s ease !important;
|
||
}
|
||
|
||
/* ----------- */
|
||
|
||
.ribbon-no-anim .workspace-ribbon.side-dock-ribbon .clickable-icon {
|
||
transform: scale(0.9) !important;
|
||
}
|
||
|
||
.ribbon-no-anim .workspace-ribbon.side-dock-ribbon .clickable-icon:hover {
|
||
transform: scale(0.9) !important;
|
||
}
|
||
|
||
.workspace-ribbon.side-dock-ribbon .clickable-icon:active {
|
||
transform: scale(0.9) !important;
|
||
}
|
||
|
||
/* --------- */
|
||
|
||
/* Left sidebar toggle button */
|
||
.sidebar-toggle-button.mod-left .clickable-icon {
|
||
background-color: transparent !important;
|
||
color: var(--text-muted);
|
||
padding: 4px 4px !important;
|
||
height: 34px;
|
||
width: 40px;
|
||
margin-left: 6px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.workspace-tab-header-container .sidebar-toggle-button.mod-left .clickable-icon {
|
||
background-color: transparent !important;
|
||
color: var(--text-muted) !important;
|
||
border-radius: var(--button-radius) !important;
|
||
padding: 6px 8px !important;
|
||
height: 34px !important;
|
||
width: 40px !important;
|
||
margin-top: -6px;
|
||
margin-right: -14px;
|
||
transform: scale(1) translateX(0) !important;
|
||
}
|
||
|
||
/* ribbon off, sidebar on */
|
||
.sidebar-toggle-button.mod-left .clickable-icon {
|
||
margin-right: -2px !important;
|
||
margin-left: 0px !important;
|
||
}
|
||
|
||
.workspace-tab-header-container .sidebar-toggle-button.mod-left .clickable-icon:hover {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
color: var(--interactive-accent) !important;
|
||
border-radius: var(--button-radius) !important;
|
||
padding: 6px 8px !important;
|
||
height: 34px !important;
|
||
width: 40px !important;
|
||
margin-top: -6px;
|
||
margin-right: -14px;
|
||
transform: scale(1) translateX(0) !important;
|
||
}
|
||
|
||
/* Right sidebar toggle button */
|
||
.sidebar-toggle-button.mod-right .clickable-icon {
|
||
background-color: transparent !important;
|
||
color: var(--text-muted) !important;
|
||
border-radius: var(--button-radius) !important;
|
||
padding: 6px 8px !important;
|
||
height: 34px;
|
||
width: 40px;
|
||
margin-top: -6px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.sidebar-toggle-button.mod-right .clickable-icon:hover {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
color: var(--interactive-accent);
|
||
border-radius: var(--button-radius) !important;
|
||
padding: 6px 8px !important;
|
||
height: 34px;
|
||
width: 40px;
|
||
margin-top: -6px;
|
||
}
|
||
|
||
.workspace-tab-header-container .sidebar-toggle-button.mod-right .clickable-icon {
|
||
background-color: transparent !important;
|
||
color: var(--text-muted) !important;
|
||
border-radius: var(--button-radius) !important;
|
||
padding: 6px 8px !important;
|
||
height: 34px !important;
|
||
width: 40px !important;
|
||
margin-top: -6px;
|
||
margin-right: 34px;
|
||
}
|
||
|
||
.workspace-tab-header-container .sidebar-toggle-button.mod-right .clickable-icon:hover {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
color: var(--interactive-accent) !important;
|
||
border-radius: var(--button-radius) !important;
|
||
padding: 6px 8px !important;
|
||
height: 34px !important;
|
||
width: 40px !important;
|
||
margin-top: -6px;
|
||
}
|
||
|
||
/* active + both sidebar toggle buttons */
|
||
.workspace-tab-header-container .sidebar-toggle-button.mod-right .clickable-icon:active,
|
||
.workspace-tab-header-container .sidebar-toggle-button.mod-left .clickable-icon:active {
|
||
transform: scale(0.8) !important;
|
||
}
|
||
|
||
.workspace-tab-header-container .workspace-tab-header-new-tab {
|
||
margin-right: 24px !important;
|
||
margin-top: -2px !important;
|
||
}
|
||
|
||
|
||
|
||
/* ==================================================
|
||
BULLET STUFF
|
||
================================================== */
|
||
|
||
body.custom-bullets-enabled {
|
||
/* Remove default bullets from everywhere */
|
||
.markdown-rendered ul {
|
||
list-style-type: none !important;
|
||
}
|
||
|
||
.markdown-rendered .list-bullet:after {
|
||
display: none;
|
||
margin-inline-start: 0em !important;
|
||
}
|
||
|
||
.list-bullet:after {
|
||
content: "" !important;
|
||
}
|
||
|
||
/* Reading Mode Bullets */
|
||
ul > li::before {
|
||
content: var(--custom-bullet-level-1, "+") !important;
|
||
font-weight: 500 !important;
|
||
font-size: 20px !important;
|
||
margin-right: 0.5em !important;
|
||
color: var(--italic-color) !important;
|
||
}
|
||
|
||
ul ul > li::before {
|
||
content: var(--custom-bullet-level-2, "-") !important;
|
||
font-weight: normal !important;
|
||
margin-right: 0.5em !important;
|
||
color: var(--text-faint) !important;
|
||
}
|
||
|
||
ul ul ul > li::before {
|
||
content: var(--custom-bullet-level-3, "=") !important;
|
||
font-weight: normal !important;
|
||
margin-right: 0.5em !important;
|
||
color: var(--text-faint) !important;
|
||
}
|
||
|
||
/* Preserve Ordered List Numbering */
|
||
ol > li::before {
|
||
content: "" !important;
|
||
}
|
||
|
||
ol {
|
||
list-style-type: decimal !important;
|
||
}
|
||
|
||
ol > li::marker {
|
||
/* Keep default numbering */
|
||
}
|
||
|
||
ul ul > li::before,
|
||
ul ol > li::before,
|
||
ol ul > li::before,
|
||
ol ol > li::before {
|
||
content: var(--custom-bullet-level-2, "-") !important;
|
||
font-weight: normal !important;
|
||
margin-right: 0.5em !important;
|
||
color: var(--italic-color) !important;
|
||
}
|
||
|
||
/* Live Preview Bullets - Level 1 */
|
||
.HyperMD-list-line.HyperMD-list-line-1.cm-line:not(
|
||
:has(.cm-formatting-list-ol)
|
||
)::before {
|
||
content: var(--custom-bullet-level-1, "+") !important;
|
||
color: var(--italic-color);
|
||
font-weight: 500;
|
||
margin-right: -20px !important;
|
||
font-size: 20px !important;
|
||
}
|
||
|
||
/* Level 2 */
|
||
.cm-list-2 .list-bullet:after {
|
||
content: var(--custom-bullet-level-2, "-") !important;
|
||
color: var(--text-faint) !important;
|
||
font-weight: normal;
|
||
margin-right: 0.5em !important;
|
||
display: inline !important;
|
||
background: none !important;
|
||
border: none !important;
|
||
width: auto !important;
|
||
height: auto !important;
|
||
min-width: 0 !important;
|
||
min-height: 0 !important;
|
||
line-height: normal !important;
|
||
}
|
||
|
||
.cm-list-1 .list-bullet:after {
|
||
content: "" !important;
|
||
display: none !important;
|
||
}
|
||
|
||
/* Level 3 */
|
||
.cm-list-3 .list-bullet:after {
|
||
content: var(--custom-bullet-level-3, "=") !important;
|
||
color: var(--text-faint) !important;
|
||
font-weight: normal;
|
||
margin-right: 0.5em !important;
|
||
background: none !important;
|
||
border: none !important;
|
||
width: auto !important;
|
||
height: auto !important;
|
||
display: inline !important;
|
||
}
|
||
|
||
/* Hide bullet for checkboxes */
|
||
.HyperMD-list-line:has(input[type="checkbox"])::before {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* ==================================================
|
||
INLINE TITLE
|
||
================================================== */
|
||
|
||
.center-inline-title .inline-title {
|
||
position: relative;
|
||
text-align: center;
|
||
display: inline-block;
|
||
padding: 20px;
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.left-inline-title .inline-title {
|
||
position: relative;
|
||
text-align: left;
|
||
display: inline-block;
|
||
padding: 20px;
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.right-inline-title .inline-title {
|
||
position: relative;
|
||
text-align: right;
|
||
display: inline-block;
|
||
padding: 20px;
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.special-inline-title .inline-title {
|
||
text-align: center;
|
||
position: relative;
|
||
display: inline-block;
|
||
padding: 0 0px;
|
||
display: flex !important;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5em;
|
||
width: 100%;
|
||
transition: 0.3s all ease;
|
||
color: var(--h3-color);
|
||
text-transform: none !important;
|
||
}
|
||
|
||
.special-inline-title .inline-title:before,
|
||
.special-inline-title .inline-title:after {
|
||
content: "";
|
||
flex-grow: 1;
|
||
height: 3px;
|
||
background-color: var(--interactive-accent);
|
||
/* background-color: #cf5915; */
|
||
margin: 0px 0px;
|
||
/* opacity: 0.8; */
|
||
border-radius: 0px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
|
||
/* ==================================================
|
||
ACTIVE LINE
|
||
================================================== */
|
||
.text-before-active-line .cm-line.cm-active::before {
|
||
content: var(--before-active-line);
|
||
color: var(--before-active-line-color);
|
||
margin-right: 6px;
|
||
margin-left: var(--before-active-line-margin);
|
||
}
|
||
|
||
.highlight-active-line .cm-active.cm-line {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
/* padding-left: 10px; */
|
||
border-radius: 0;
|
||
border-inline-start: 3px solid hsla(var(--interactive-accent-hsl), 0.8);
|
||
|
||
padding-inline-start: 6px;
|
||
|
||
transition: background-color 0s ease;
|
||
}
|
||
|
||
.highlight-active-line-with-face .cm-active.cm-line::before {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
border-radius: 20px;
|
||
transition:
|
||
background-color calc(var(--animation-duration) * 0.6667) ease,
|
||
background-image calc(var(--animation-duration) * 66.6667) !important;
|
||
transition-delay: background-image 2s !important;
|
||
padding: 0px;
|
||
margin-inline-end: 10px;
|
||
margin-inline-start: -28px;
|
||
|
||
content: "";
|
||
display: inline-block;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 12px;
|
||
background-color: var(--color-yellow) !important;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='13' cy='60' r='16' fill='orange'/><circle cx='87' cy='58' r='16' fill='orange'/><path d='M15 40 Q25 65 40 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/><path d='M60 40 Q65 65 85 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/><ellipse cx='50' cy='78' rx='15' ry='18' fill='maroon'/></svg>");
|
||
background-size: 70% 70%;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
vertical-align: middle;
|
||
z-index: 0 !important;
|
||
}
|
||
|
||
.highlight-active-line-with-face .cm-active.cm-line {
|
||
border-inline-start: 3px solid hsla(var(--interactive-accent-hsl), 0.8);
|
||
}
|
||
|
||
.center-active-line .cm-active.cm-line {
|
||
text-align: center;
|
||
}
|
||
|
||
.huge-text-active-line .cm-active {
|
||
font-size: larger;
|
||
}
|
||
|
||
/* ==================================================
|
||
TAB HEADER
|
||
================================================== */
|
||
|
||
.workspace-split.mod-root .workspace-tab-header.is-active::before,
|
||
.workspace-split.mod-root .workspace-tab-header.is-active::after {
|
||
box-shadow: none;
|
||
/* box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve)* 4) var(--tab-background-active); */
|
||
}
|
||
|
||
/* .workspace-split.mod-vertical.mod-root .workspace-tab-header.autofit-tab {
|
||
width: var(--header-width) !important;
|
||
min-width: var(--header-width) !important;
|
||
max-width: var(--header-width) !important;
|
||
position: relative;
|
||
/* margin-bottom: 8px; */
|
||
/* margin-left: -10px !important;
|
||
} */
|
||
|
||
.workspace .mod-root .workspace-tab-header-inner::after {
|
||
display: none;
|
||
}
|
||
|
||
.workspace-tab-header.is-active {
|
||
color: var(--tab-text-color-focused-active);
|
||
background-color: var(--background-primary);
|
||
/* border-radius: 20px !important; */
|
||
border-bottom: none !important;
|
||
padding-bottom: 0px !important;
|
||
}
|
||
|
||
.workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
|
||
height: 100%;
|
||
border-radius: 0px !important;
|
||
/* padding-bottom: 4px !important; */
|
||
margin-top: -2px !important;
|
||
}
|
||
|
||
.workspace-tab-header-container {
|
||
/* border-bottom: var(--tab-outline-width) solid var(--tab-outline-color); */
|
||
border-bottom: none;
|
||
background-color: var(--tab-container-background);
|
||
}
|
||
|
||
.workspace-tab-header-container {
|
||
box-shadow: inset 0 -1px 0 var(--tab-outline-color);
|
||
}
|
||
|
||
.mod-root .workspace-tab-header-container {
|
||
/* padding-left: 4px !important; */
|
||
padding-top: 2px;
|
||
}
|
||
|
||
.bubble .workspace-tab-header-container-inner {
|
||
padding-bottom: -6px;
|
||
margin-bottom: -2px;
|
||
}
|
||
|
||
.view-header {
|
||
border-bottom: 1.5px solid var(--tab-outline-color);
|
||
/* height: 50px; */
|
||
}
|
||
|
||
.view-header-title {
|
||
/* font-size: 20px !important; */
|
||
color: var(--text-muted) !important;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
/* text-decoration: underline;
|
||
text-underline-offset: 3px; */
|
||
}
|
||
|
||
/* view title casing overrides */
|
||
.view-title-case-none .view-header-title {
|
||
text-transform: none;
|
||
letter-spacing: normal;
|
||
}
|
||
.view-title-case-upper .view-header-title {
|
||
text-transform: uppercase;
|
||
}
|
||
.view-title-case-lower .view-header-title {
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
/* metadata property key casing */
|
||
.meta-key-case-upper .metadata-property-key-input {
|
||
text-transform: uppercase;
|
||
}
|
||
.meta-key-case-lower .metadata-property-key-input {
|
||
text-transform: lowercase;
|
||
}
|
||
.meta-key-case-none .metadata-property-key-input {
|
||
text-transform: none;
|
||
}
|
||
|
||
/* tab close btn */
|
||
.workspace
|
||
.mod-root
|
||
.workspace-tab-header
|
||
.workspace-tab-header-inner-close-button {
|
||
margin-right: 2px !important;
|
||
z-index: 1001 !important;
|
||
border-radius: 20px;
|
||
order: -1;
|
||
|
||
display: flex !important;
|
||
transform: scale(0.1);
|
||
opacity: 0;
|
||
width: 0;
|
||
margin-left: -8px;
|
||
transition:
|
||
transform calc(var(--animation-duration) * 0.6667) cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
opacity calc(var(--animation-duration) * 0.6667) ease-out,
|
||
width calc(var(--animation-duration) * 0.6667) ease-out,
|
||
margin-left calc(var(--animation-duration) * 0.6667) ease-out !important;
|
||
pointer-events: none;
|
||
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
/* close button - tab hover */
|
||
.workspace
|
||
.mod-root
|
||
.workspace-tab-header:hover
|
||
.workspace-tab-header-inner-close-button {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
width: auto;
|
||
margin-left: 0px;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* close button - tab hover */
|
||
.workspace
|
||
.mod-root
|
||
.workspace-tab-header.is-active:hover
|
||
.workspace-tab-header-inner-close-button {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
width: auto;
|
||
margin-left: -4px;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.workspace
|
||
.mod-root
|
||
.workspace-tab-header
|
||
.workspace-tab-header-inner-close-button:hover {
|
||
background-color: var(--background-modifier-hover) !important;
|
||
border: 2px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* hide icon on hover, show close btn */
|
||
/* .workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button:hover .workspace-tab-header-inner-icon {
|
||
display: none;
|
||
} */
|
||
|
||
/* tabs in left and right sidebars */
|
||
.workspace .mod-left-split .workspace-tab-header,
|
||
.workspace .mod-right-split .workspace-tab-header {
|
||
transition:
|
||
border-radius calc(var(--animation-duration) * 1.3333) cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
margin calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2),
|
||
padding calc(var(--animation-duration) * 1.6667) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
background-color calc(var(--animation-duration) * 1) ease,
|
||
filter calc(var(--animation-duration) * 0.6667) ease,
|
||
transform calc(var(--animation-duration) * 1) ease !important;
|
||
}
|
||
|
||
.workspace .mod-left-split .workspace-tab-header.is-active,
|
||
.workspace .mod-right-split .workspace-tab-header.is-active {
|
||
padding: 0px !important;
|
||
margin: 0px !important;
|
||
transform: scale(1);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.workspace .mod-left-split .workspace-tab-header:hover,
|
||
.workspace .mod-right-split .workspace-tab-header:hover {
|
||
transform: scale(1);
|
||
filter: brightness(1.5);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.workspace .mod-left-split .workspace-tab-header.is-active:hover,
|
||
.workspace .mod-right-split .workspace-tab-header.is-active:hover {
|
||
transform: scale(1) translateY(0px);
|
||
filter: brightness(1.05);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
/* active tab for left sidebar */
|
||
/* .workspace .mod-left-split .workspace-tab-header.is-active {
|
||
padding: 0px !important;
|
||
} */
|
||
|
||
/* for right sidebar */
|
||
/* .workspace .mod-right-split .workspace-tab-header.is-active {
|
||
padding: 0px !important;
|
||
} */
|
||
|
||
/* body:not(.workspace):not(.mod-root) .workspace-tab-header.is-active {
|
||
padding: 20px !important;
|
||
} */
|
||
|
||
/* .workspace .mod-root .workspace-tab-header.is-active {
|
||
padding: 20px !important;
|
||
} */
|
||
|
||
/* .workspace-tab-header-inner-icon {
|
||
z-index: 1001 !important;
|
||
}
|
||
|
||
.workspace-tab-header-inner-title, workspace-tab-header-inner {
|
||
z-index: 2000 !important;
|
||
} */
|
||
|
||
/* hide tab close btn */
|
||
.hide-tab-close-btn
|
||
.workspace
|
||
.mod-root
|
||
.workspace-tab-header
|
||
.workspace-tab-header-inner-close-button {
|
||
margin-right: 6px !important;
|
||
display: none !important;
|
||
}
|
||
|
||
/* non active tab icon darkening */
|
||
.workspace-tab-header-inner:has(.workspace-tab-header-inner-title) {
|
||
filter: brightness(0.7);
|
||
}
|
||
|
||
/* tab icon brightening if active */
|
||
.workspace-tab-header.is-active
|
||
.workspace-tab-header-inner:has(.workspace-tab-header-inner-title) {
|
||
filter: brightness(1);
|
||
}
|
||
|
||
/* THE CURVE */
|
||
.theme-dark {
|
||
--tab-curve: 20px;
|
||
}
|
||
|
||
.workspace-split.mod-root .workspace-tab-header.is-active::before,
|
||
.workspace-split.mod-root .workspace-tab-header.is-active::after {
|
||
box-shadow:
|
||
inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color),
|
||
0 0 0 calc(var(--tab-curve) * 4) var(--tab-background-active) !important;
|
||
z-index: 0 !important;
|
||
}
|
||
|
||
.workspace
|
||
.mod-root
|
||
.workspace-tab-header.is-active
|
||
.workspace-tab-header-inner-close-button {
|
||
margin-right: 2px !important;
|
||
z-index: 1005 !important;
|
||
}
|
||
|
||
/* Remove styles when tab has a pinned icon sob */
|
||
.workspace-split.mod-root
|
||
.workspace-tab-header.is-active:has(.mod-pinned)::before,
|
||
.workspace-split.mod-root
|
||
.workspace-tab-header.is-active:has(.mod-pinned)::after {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.pin-icon-only .workspace-tab-header:has(.mod-pinned) {
|
||
border-radius: 2px !important;
|
||
margin: 0px 2px;
|
||
/* box-shadow: 0px 0px 0px 3px var(--color-brown); */
|
||
}
|
||
|
||
/* .sidebar-toggle-button.mod-left {
|
||
margin-inline-end: 10px !important;
|
||
} */
|
||
|
||
|
||
|
||
/* === pinned tab styling === */
|
||
|
||
/* Pin icon z-index */
|
||
.workspace-tab-header-status-container {
|
||
z-index: 1001 !important;
|
||
}
|
||
|
||
/* Hide close button on pinned tabs */
|
||
.pin-icon-only .workspace .mod-root .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-close-button {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Base pinned tab styling */
|
||
.pin-icon-only .workspace-tab-header:has(.mod-pinned) {
|
||
--tab-max-width: 38px !important;
|
||
border-radius: 10px 10px 0 0 !important;
|
||
background-color: var(--tab-background);
|
||
border: 0px solid var(--background-modifier-border);
|
||
border-bottom: 0;
|
||
margin-top: 0px;
|
||
padding-bottom: 10px !important;
|
||
transition-property: border-radius, max-width, margin, padding, transform, background-color !important;
|
||
transition-duration: calc(var(--animation-duration) * 1.3333), calc(var(--animation-duration) * 1.3333), calc(var(--animation-duration) * 1.3333), calc(var(--animation-duration) * 1.3333), calc(var(--animation-duration) * 1), 0s !important;
|
||
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), cubic-bezier(0.34, 1.56, 0.64, 1), cubic-bezier(0.34, 1.56, 0.64, 1), cubic-bezier(0.34, 1.56, 0.64, 1), cubic-bezier(0.68, -0.55, 0.265, 1.55), ease !important;
|
||
}
|
||
|
||
/* Hover state - tab and icon */
|
||
.pin-icon-only .workspace-tab-header:has(.mod-pinned):hover,
|
||
.pin-icon-only .workspace-tab-header:has(.mod-pinned):hover .workspace-tab-header-inner-icon {
|
||
/* --tab-max-width: 64px !important; */
|
||
/* margin: 4px 2px !important; */
|
||
border-radius: 14px 14px 0 0 !important;
|
||
transform: scale(1.03);
|
||
transition-property: border-radius, max-width, margin, transform !important;
|
||
transition-duration: calc(var(--animation-duration) * 1), calc(var(--animation-duration) * 1), calc(var(--animation-duration) * 1), calc(var(--animation-duration) * 0.8333) !important;
|
||
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55), cubic-bezier(0.68, -0.55, 0.265, 1.55), cubic-bezier(0.68, -0.55, 0.265, 1.55), cubic-bezier(0.68, -0.6, 0.32, 1.6) !important;
|
||
}
|
||
|
||
/* Active pinned tab */
|
||
.pin-icon-only .workspace-tab-header.is-active:has(.mod-pinned) {
|
||
--tab-max-width: 58px !important;
|
||
background-color: var(--tab-background-active) !important;
|
||
border-radius: 10px 10px 0 0 !important;
|
||
border: 0px solid var(--background-modifier-border);
|
||
margin-top: 0px;
|
||
padding-bottom: 8px !important;
|
||
margin-top: 0px;
|
||
padding-left: 0 !important;
|
||
padding-right: 0 !important;
|
||
height: 40px;
|
||
transition-property: border-radius, margin, padding, background-color, max-width !important;
|
||
transition-duration: calc(var(--animation-duration) * 1.3333), calc(var(--animation-duration) * 1.3333), calc(var(--animation-duration) * 1.3333), 0s !important;
|
||
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275), cubic-bezier(0.175, 0.885, 0.32, 1.275), cubic-bezier(0.175, 0.885, 0.32, 1.275), ease !important;
|
||
}
|
||
|
||
/* Inner hover for non-active tabs */
|
||
.pin-icon-only .workspace-tab-header:has(.mod-pinned):not(.is-active):hover .workspace-tab-header-inner {
|
||
height: 30px;
|
||
border-radius: 8px !important;
|
||
background: none !important;
|
||
transform: translateY(-1px);
|
||
transition-property: max-width, border-radius, transform !important;
|
||
transition-duration: calc(var(--animation-duration) * 0.8333), calc(var(--animation-duration) * 0.8333), calc(var(--animation-duration) * 0.6667) !important;
|
||
transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6), cubic-bezier(0.68, -0.6, 0.32, 1.6), cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
|
||
}
|
||
|
||
/* Inner transition */
|
||
.pin-icon-only .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner {
|
||
transition: transform calc(var(--animation-duration) * 1) cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
|
||
}
|
||
|
||
/* Icon hover effect */
|
||
.pin-icon-only .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-icon:hover {
|
||
transform: scale(1.1) rotate(5deg);
|
||
transition: transform calc(var(--animation-duration) * 1) cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
|
||
}
|
||
|
||
.pin-icon-only .workspace-tab-header-status-container {
|
||
z-index: 1001 !important;
|
||
display: none;
|
||
}
|
||
|
||
.pin-icon-only .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-title {
|
||
display: none !important;
|
||
}
|
||
|
||
/* === bubble tab === */
|
||
/* .bubble .workspace-tab-header,
|
||
.bubble .workspace-tab-header.is-active,
|
||
.bubble .workspace-tab-header.is-active:hover,
|
||
.bubble .workspace-tab-header:not(.is-active)
|
||
margin-left: 0 !important;
|
||
margin-right: 0 !important;
|
||
--tab-curve: 0px !important;
|
||
border-radius: 12px !important;
|
||
transition: border-radius 0s ease !important;
|
||
} */
|
||
|
||
.bubble.theme-dark {
|
||
--tab-background: var(--background-primary);
|
||
}
|
||
|
||
/* focused dark inside */
|
||
.bubble.theme-dark.bubble-border {
|
||
--tab-background: var(--background-primary);
|
||
.workspace-tab-header.is-active {
|
||
outline: 2px solid var(--background-modifier-border-focus) !important;
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.workspace-leaf {
|
||
border: 2px solid var(--background-modifier-border-focus) !important;
|
||
--tab-background: var(--background-primary);
|
||
background-color: var(--tab-background);
|
||
}
|
||
.workspace-sidedock-vault-profile {
|
||
background-color: var(--background-primary-alt) !important;
|
||
}
|
||
.workspace-ribbon {
|
||
background-color: var(--background-primary-alt) !important;
|
||
}
|
||
}
|
||
|
||
/* dark outside */
|
||
.bubble.theme-dark.bubble-focused-dark-outside {
|
||
--ribbon-background: var(--tab-background);
|
||
|
||
--tab-background: var(--background-primary-alt);
|
||
.workspace-tab-header.is-active {
|
||
background-color: var(--tab-background);
|
||
outline: 2px solid var(--background-modifier-border-focus);
|
||
}
|
||
|
||
.workspace-leaf {
|
||
border: 2px solid var(--background-modifier-border-focus);
|
||
border-radius: 20px;
|
||
background-color: var(--background-primary-alt) !important;
|
||
background: var(--background-primary-alt) !important;
|
||
}
|
||
|
||
.workspace-leaf-content,
|
||
.view-header,
|
||
.view-content {
|
||
border-color: var(--background-modifier-border-focus);
|
||
background-color: var(--background-primary-alt) !important;
|
||
background: var(--background-primary-alt) !important;
|
||
}
|
||
|
||
.workspace-sidedock-vault-profile {
|
||
border-top: none !important;
|
||
/* background-color: none !important;
|
||
background: none !important; */
|
||
}
|
||
|
||
.workspace-tab-container {
|
||
background-color: var(--background-primary);
|
||
}
|
||
|
||
.app-container {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.workspace-tab-header-container {
|
||
background-color: var(--background-primary) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.titlebar-button {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.titlebar-button.mod-close:hover {
|
||
color: var(--text-error);
|
||
background-color: rgba(var(--color-red-rgb), 0.2) !important;
|
||
}
|
||
|
||
.titlebar-button-container {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.workspace-ribbon {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.sidebar-toggle-button {
|
||
background-color: var(--background-primary) !important;
|
||
border-bottom: 0px solid var(--background-primary) !important;
|
||
}
|
||
|
||
.workspace-ribbon::before {
|
||
background-color: var(--background-primary);
|
||
border-bottom: 2px solid var(--background-primary) !important;
|
||
}
|
||
|
||
.workspace-sidedock-vault-profile {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
}
|
||
|
||
/* dark outside */
|
||
.bubble.theme-dark.bubble-dark-outside {
|
||
--tab-background: var(--background-primary-alt);
|
||
.workspace-tab-header.is-active {
|
||
background-color: var(--background-primary-alt);
|
||
}
|
||
|
||
.workspace-leaf {
|
||
border-radius: 20px;
|
||
background-color: var(--tab-background) !important;
|
||
background: var(--tab-background) !important;
|
||
|
||
--tab-background: var(--background-primary-alt);
|
||
}
|
||
|
||
.workspace-leaf-content,
|
||
.view-header,
|
||
.view-content {
|
||
background-color: var(--background-primary-alt) !important;
|
||
background: var(--background-primary-alt) !important;
|
||
}
|
||
|
||
.workspace-sidedock-vault-profile {
|
||
border-top: none !important;
|
||
}
|
||
|
||
.workspace-tab-container {
|
||
background-color: var(--background-primary);
|
||
}
|
||
|
||
.app-container {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.workspace-tab-header-container {
|
||
background-color: var(--background-primary) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.titlebar-button {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.titlebar-button.mod-close:hover {
|
||
color: var(--text-error);
|
||
background-color: rgba(var(--color-red-rgb), 0.2) !important;
|
||
}
|
||
|
||
.titlebar-button-container {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.workspace-ribbon {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.sidebar-toggle-button {
|
||
background-color: var(--background-primary) !important;
|
||
border-bottom: 0px solid var(--background-primary) !important;
|
||
}
|
||
|
||
.workspace-ribbon::before {
|
||
background-color: var(--background-primary);
|
||
border-bottom: 2px solid var(--background-primary) !important;
|
||
}
|
||
|
||
.workspace-sidedock-vault-profile {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
/* .workspace-tab-header.is-active {
|
||
background-color: var(--background-primary) !important;
|
||
} */
|
||
}
|
||
|
||
.bubble.theme-dark.bubble-dark-inside {
|
||
.workspace-ribbon {
|
||
background-color: var(--background-primary-alt) !important;
|
||
}
|
||
|
||
.sidebar-toggle-button {
|
||
background-color: var(--background-primary-alt) !important;
|
||
border-bottom: 0px solid var(--background-primary-alt) !important;
|
||
}
|
||
|
||
.workspace-ribbon::before {
|
||
background-color: var(--background-secondary-alt);
|
||
border-bottom: 2px solid var(--background-primary-alt) !important;
|
||
}
|
||
.workspace-sidedock-vault-profile {
|
||
background-color: var(--background-primary-alt) !important;
|
||
}
|
||
|
||
.workspace-tab-header.is-active {
|
||
background-color: var(--background-primary-alt) !important;
|
||
}
|
||
}
|
||
|
||
.theme-light.bubble {
|
||
.workspace-tab-header.is-active:has(.mod-pinned) {
|
||
background-color: var(--background-primary) !important;
|
||
border-radius: 20px !important;
|
||
height: 27px !important;
|
||
padding-bottom: 2px !important;
|
||
}
|
||
|
||
.workspace-tab-header.is-active {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
}
|
||
|
||
.bubble {
|
||
/* pinned tabs */
|
||
.workspace-tab-header.is-active:has(.mod-pinned) {
|
||
margin-top: 2px !important;
|
||
}
|
||
|
||
.workspace-tab-header.is-active:has(.mod-pinned) {
|
||
background-color: var(--tab-background) !important;
|
||
border-radius: var(--button-radius, 20px) !important;
|
||
height: 27px !important;
|
||
padding-bottom: 3px !important;
|
||
}
|
||
|
||
.workspace-tab-header:has(.mod-pinned) {
|
||
background-color: transparent !important;
|
||
border: 0 !important;
|
||
border-radius: var(--button-radius, 20px) !important;
|
||
height: 27px !important;
|
||
padding-bottom: -px !important;
|
||
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease;
|
||
}
|
||
|
||
.workspace-tab-header:has(.mod-pinned):hover {
|
||
background-color: var(--tab-background) !important;
|
||
border-radius: var(--button-radius, 20px) !important;
|
||
/* --tab-max-width: 52px !important; */
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease;
|
||
}
|
||
|
||
|
||
.mod-sidedock
|
||
.workspace-tab-header-container-inner
|
||
.workspace-tab-header.is-active {
|
||
transform: translateY(2px) translateX(0px) !important;
|
||
margin: -2px 2px !important;
|
||
}
|
||
|
||
/* bubble rounded tab */
|
||
.workspace-tab-header {
|
||
margin: 3px 5px 5px 3px;
|
||
--tab-curve: 0 !important;
|
||
border-radius: var(--button-radius, 12px) !important;
|
||
padding-left: 0px !important;
|
||
transform: translateY(4px) !important;
|
||
|
||
transition:
|
||
border-radius calc(var(--animation-duration) * 1.3333) cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
margin calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2),
|
||
padding calc(var(--animation-duration) * 1.6667) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
background-color 0s ease !important;
|
||
}
|
||
|
||
.workspace-tab-header.is-active {
|
||
--tab-curve: 0;
|
||
color: var(--tab-text-color-focused-active);
|
||
background-color: var(--tab-background-active);
|
||
outline: 2px solid var(--background-modifier-border);
|
||
margin: 3px 5px 5px 3px;
|
||
border-radius: var(--button-radius, 12px) !important;
|
||
border-bottom: none !important;
|
||
padding-bottom: 0px !important;
|
||
padding-left: 8px !important;
|
||
padding-right: 8px !important;
|
||
text-overflow: ellipsis;
|
||
transform: translateY(-1px) !important;
|
||
|
||
transition:
|
||
border-radius calc(var(--animation-duration) * 1.6667) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
margin calc(var(--animation-duration) * 1.6667) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
padding calc(var(--animation-duration) * 1) ease,
|
||
background-color calc(var(--animation-duration) * 1.3333) cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
transform calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||
background-color 0s ease !important;
|
||
}
|
||
|
||
.workspace-tab-header:hover {
|
||
transition: color 0s cubic-bezier(0.175, 0.885, 0.32, 1.4) !important;
|
||
}
|
||
|
||
.workspace-tab-header.is-active:hover {
|
||
--tab-curve: 0 !important;
|
||
border-radius: var(--button-radius, 12px) !important;
|
||
transition:
|
||
border-radius calc(var(--animation-duration) * 1) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
background-color 0s ease,
|
||
margin calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.4) !important;
|
||
}
|
||
|
||
.workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
|
||
height: 100%;
|
||
border-radius: var(--button-radius, 12px) !important;
|
||
margin-right: 2px;
|
||
margin-left: 2px;
|
||
margin-top: -2px !important;
|
||
transition: all calc(var(--animation-duration) * 1.3333) cubic-bezier(0.34, 1.56, 0.64, 1) !important;
|
||
}
|
||
|
||
.workspace-split.mod-vertical.mod-root
|
||
.workspace-tab-header:not(.is-active):not(:has(.mod-pinned)) {
|
||
margin-left: 0px !important;
|
||
margin-right: -3px !important;
|
||
transition:
|
||
margin-left calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2),
|
||
margin-right calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2) !important;
|
||
}
|
||
|
||
.workspace-tab-header .workspace-tab-header-inner {
|
||
transition:
|
||
border-radius calc(var(--animation-duration) * 1.3333) cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
margin calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2),
|
||
padding calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2) !important;
|
||
}
|
||
|
||
.workspace-tab-header:not(.is-active):hover {
|
||
transform: translateY(2px);
|
||
transition:
|
||
transform calc(var(--animation-duration) * 1) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
border-radius calc(var(--animation-duration) * 1) cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
|
||
}
|
||
|
||
.workspace-tab-header {
|
||
transition-timing-function: cubic-bezier(
|
||
0.175,
|
||
0.885,
|
||
0.32,
|
||
1.2
|
||
) !important;
|
||
}
|
||
|
||
.workspace-tab-container:has(.cm-scroller) {
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
.workspace-leaf {
|
||
margin-top: none !important;
|
||
margin: 4px !important;
|
||
border: 2px solid var(--background-modifier-border);
|
||
border-radius: 20px;
|
||
background-color: var(--background-primary);
|
||
}
|
||
|
||
.workspace-sidedock-vault-profile {
|
||
border-top: none !important;
|
||
}
|
||
|
||
.workspace-tab-container {
|
||
background-color: var(--background-primary-alt);
|
||
padding: 4px;
|
||
padding-top: 0px !important;
|
||
}
|
||
|
||
.app-container {
|
||
background-color: var(--background-primary-alt) !important;
|
||
}
|
||
|
||
.horizontal-main-container {
|
||
padding: 3px;
|
||
}
|
||
|
||
.workspace-leaf-resize-handle {
|
||
--divider-width: 0px !important;
|
||
}
|
||
|
||
.workspace-tab-header-container {
|
||
background-color: var(--background-primary-alt) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.titlebar-button {
|
||
background-color: var(--background-primary-alt) !important;
|
||
margin-top: 8px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.titlebar-button-container {
|
||
background-color: var(--background-primary-alt) !important;
|
||
margin-right: 12px;
|
||
padding-left: 0px !important;
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
.bubble .workspace-tab-header-container::after {
|
||
opacity: 0 !important;
|
||
width: 0 !important;
|
||
background: transparent !important;
|
||
}
|
||
}
|
||
|
||
/* === default tab === */
|
||
.default-tab {
|
||
.workspace-tab-header,
|
||
.workspace-tab-header.is-active {
|
||
margin: 0px;
|
||
padding-left: 0px !important;
|
||
border-radius: 20px !important;
|
||
corner-shape: initial !important;
|
||
|
||
transition:
|
||
margin calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2),
|
||
padding calc(var(--animation-duration) * 1.6667) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
background-color 0s ease !important;
|
||
}
|
||
|
||
|
||
/* border-bottom-left-radius: 0px !important;
|
||
border-bottom-right-radius: 0px !important; */
|
||
|
||
/* .workspace-tab-header.is-active {
|
||
--tab-curve: 18px !important;
|
||
color: var(--tab-text-color-focused-active);
|
||
background-color: var(--background-primary);
|
||
border-radius: 16px !important;
|
||
|
||
border-bottom: none !important;
|
||
padding: 0px 4px !important;
|
||
padding-bottom: 0px !important;
|
||
margin-inline-start: 7px;
|
||
transition: border-radius calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 4),
|
||
padding 0.3s ease,
|
||
margin 0.3s cubic-bezier(0.175, 0.885, 0.32, 4),
|
||
margin-inline-start 0s ease !important;
|
||
z-index: -1 !important;
|
||
|
||
padding: 0 10px !important;
|
||
|
||
} */
|
||
|
||
/* old animation - old is gold */
|
||
.workspace-tab-header.is-active {
|
||
color: var(--tab-text-color-focused-active);
|
||
background-color: var(--tab-background-active);
|
||
|
||
border-bottom: none !important;
|
||
|
||
/* border-bottom-left-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important; */
|
||
|
||
padding-bottom: 0px !important;
|
||
|
||
text-overflow: ellipsis;
|
||
|
||
transition:
|
||
margin calc(var(--animation-duration) * 1.6667) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
padding calc(var(--animation-duration) * 1) ease,
|
||
background-color calc(var(--animation-duration) * 1.3333) cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
transform calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||
background-color 0s ease !important;
|
||
}
|
||
|
||
/* come here */
|
||
.workspace-tab-header.is-active:not(.mod-pinned) {
|
||
margin-left: 5px !important;
|
||
margin-right: 5px !important;
|
||
|
||
padding-left: 4px !important;
|
||
padding-right: 4px !important;
|
||
}
|
||
|
||
/* .workspace .mod-left-split .workspace-tab-header.is-active:not(.mod-pinned),
|
||
.workspace .mod-right-split .workspace-tab-header.is-active:not(.mod-pinned) {
|
||
margin-left: 5px !important;
|
||
margin-right: 5px !important;
|
||
margin-bottom: -10px !important;
|
||
|
||
padding: 2px 2px 4px 2px !important;
|
||
border-radius: 10px 10px 0px 0px !important;
|
||
|
||
background-color: var(--background-secondary);
|
||
border: 1.5px solid var(--background-modifier-border);
|
||
} */
|
||
|
||
/* .workspace .mod-left-split .workspace-tab-header.is-active::before,
|
||
.workspace .mod-right-split .workspace-tab-header.is-active::after {
|
||
box-shadow:
|
||
inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color),
|
||
0 0 0 calc(var(--tab-curve) * 4) var(--tab-background-active) !important;
|
||
z-index: 0 !important;
|
||
} */
|
||
|
||
.workspace-tab-header-container-inner {
|
||
margin-top: 8px !important;
|
||
}
|
||
|
||
/* .workspace-tab-header.is-active {
|
||
--tab-curve: 16px;
|
||
color: var(--tab-text-color-focused-active);
|
||
background-color: var(--tab-background-active);
|
||
border-radius: 20px !important;
|
||
|
||
border-bottom: none !important;
|
||
padding-bottom: 0px !important;
|
||
margin-left: 7px;
|
||
transition: border-radius calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 4),
|
||
margin 0.4s cubic-bezier(0.175, 0.885, 0.32, 2) !important;
|
||
|
||
} */
|
||
|
||
.workspace-tab-header:hover {
|
||
transition: color 0s cubic-bezier(0.175, 0.885, 0.32, 1.4) !important;
|
||
}
|
||
|
||
.workspace-tab-header.is-active:hover {
|
||
--tab-curve: 14px !important;
|
||
/* border-radius: 20px !important; */
|
||
|
||
/* border-bottom-left-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important; */
|
||
|
||
transition:
|
||
border-radius calc(var(--animation-duration) * 1) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
background-color 0s ease,
|
||
margin calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.4) !important;
|
||
}
|
||
|
||
.workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
|
||
height: 100%;
|
||
border-radius: 10px !important;
|
||
border-top-left-radius: 15px !important;
|
||
border-top-right-radius: 15px !important;
|
||
/* padding-bottom: 4px !important; */
|
||
margin-right: 2px;
|
||
margin-left: 2px;
|
||
margin-top: -2px !important;
|
||
transform: translateY(2px);
|
||
|
||
transition: all calc(var(--animation-duration) * 1.3333) cubic-bezier(0.34, 1.56, 0.64, 1) !important;
|
||
}
|
||
|
||
.workspace-split.mod-vertical.mod-root
|
||
.workspace-tab-header:not(.is-active):not(:has(.mod-pinned)) {
|
||
margin-left: 0px !important;
|
||
margin-right: -3px !important;
|
||
|
||
transition:
|
||
margin-left calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2),
|
||
margin-right calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2) !important;
|
||
}
|
||
|
||
.workspace-tab-header .workspace-tab-header-inner {
|
||
transition:
|
||
border-radius calc(var(--animation-duration) * 1.3333) cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
margin calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2),
|
||
padding calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 1.2) !important;
|
||
}
|
||
|
||
/* non-active tabs hover */
|
||
.workspace-tab-header:not(.is-active):hover {
|
||
transform: translateY(-1px);
|
||
transition:
|
||
transform calc(var(--animation-duration) * 1) cubic-bezier(0.68, -0.55, 0.265, 1.55),
|
||
border-radius calc(var(--animation-duration) * 1) cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
|
||
}
|
||
|
||
/* hpver -> no hover */
|
||
.workspace-tab-header {
|
||
transition-timing-function: cubic-bezier(
|
||
0.175,
|
||
0.885,
|
||
0.32,
|
||
1.2
|
||
) !important;
|
||
}
|
||
}
|
||
|
||
|
||
/* === default tab less rounded === */
|
||
.default-tab-rounded {
|
||
.workspace-tab-header {
|
||
margin: 0px !important;
|
||
--tab-curve: 0px !important;
|
||
border-radius: var(--button-radius) var(--button-radius) 0px 0px !important;
|
||
padding-left: 0px !important;
|
||
box-shadow: 0px 0px 0px 1px transparent;
|
||
transition: all calc(var(--animation-duration) * 1.2) cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
|
||
}
|
||
|
||
/* Active tab spacing */
|
||
.workspace-tab-header.is-active:not(.mod-pinned) {
|
||
margin-left: 5px !important;
|
||
margin-right: 5px !important;
|
||
padding-left: 4px !important;
|
||
padding-right: 4px !important;
|
||
|
||
border: 1px solid var(--background-modifier-border);
|
||
transition: padding cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
margin cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
}
|
||
|
||
/* Side active tabs */
|
||
.workspace .mod-left-split .workspace-tab-header.is-active:not(.mod-pinned),
|
||
.workspace .mod-right-split .workspace-tab-header.is-active:not(.mod-pinned) {
|
||
margin-left: 5px !important;
|
||
margin-right: 5px !important;
|
||
margin-bottom: -10px !important;
|
||
padding: 2px 2px 4px 2px !important;
|
||
border-radius: var(--button-radius) var(--button-radius) 0px 0px !important;
|
||
background-color: var(--background-secondary);
|
||
border: 1.5px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.workspace-tab-header-container-inner {
|
||
margin-top: 8px !important;
|
||
}
|
||
|
||
.workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
|
||
height: 100%;
|
||
border-radius: 10px !important;
|
||
border-top-left-radius: 15px !important;
|
||
border-top-right-radius: 15px !important;
|
||
margin-right: 2px;
|
||
margin-left: 2px;
|
||
margin-top: -2px !important;
|
||
transition: all calc(var(--animation-duration) * 1.2) cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
|
||
}
|
||
|
||
.workspace-tab-header:not(.is-active) .workspace-tab-header-inner:hover {
|
||
/* border: 2px solid red !important; */
|
||
border-radius: 6px !important;
|
||
transition: all calc(var(--animation-duration) * 1.2) cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
|
||
}
|
||
|
||
.workspace-tab-header:not(.is-active) .workspace-tab-header-inner:active {
|
||
border-radius: var(--button-radius) var(--button-radius) 0px 0px !important;
|
||
corner-shape: var(--corner-shape);
|
||
background-color: var(--background-secondary);
|
||
margin-bottom: -4px !important;
|
||
margin-top: 2px !important;
|
||
padding: 10px 8px !important;
|
||
padding-top: 14px !important;
|
||
opacity: 1 !important;
|
||
background-color: var(--background-secondary) !important;
|
||
box-shadow: 0px 0px 0px 1.5px var(--background-modifier-border);
|
||
transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
|
||
}
|
||
|
||
.workspace-split.mod-vertical.mod-root .workspace-tab-header:not(.is-active):not(:has(.mod-pinned)) {
|
||
margin-left: 0px !important;
|
||
margin-right: -3px !important;
|
||
}
|
||
|
||
.workspace-tab-header .workspace-tab-header-inner {
|
||
transition: all calc(var(--animation-duration) * 1.2) cubic-bezier(0.2, 0.9, 0.4, 1.1) !important;
|
||
}
|
||
|
||
.workspace .mod-left-split .workspace-tab-header:not(.is-active):hover {
|
||
transform: translateY(1px) !important;
|
||
opacity: 0.8 !important;
|
||
}
|
||
|
||
.workspace-tab-header:not(.is-active):hover {
|
||
transform: translateY(-1px);
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
.workspace-tab-header:not(.is-active) {
|
||
transform: translateY(8px);
|
||
opacity: 0.6 !important;
|
||
}
|
||
}
|
||
|
||
.default-tab-rounded.scoop .workspace-tab-header,
|
||
.default-tab-rounded.scoop .workspace-tab-header.is-active {
|
||
border-radius: 3px 3px 0 0 !important;
|
||
corner-shape: scoop !important;
|
||
}
|
||
|
||
.default-tab-rounded.hexagon .workspace-tab-header,
|
||
.default-tab-rounded.hexagon .workspace-tab-header.is-active {
|
||
border-radius: 3px 3px 0 0 !important;
|
||
corner-shape: bevel !important;
|
||
}
|
||
|
||
/* DO: Ease-out for all color changes */
|
||
/* DO: Add a dropdown for cssclasses case style */
|
||
|
||
/* ===== HEADING COLORS DROPDOWN ===== */
|
||
/* Color options for all headings - only apply when per-heading-colors-toggle is OFF */
|
||
body:not(.per-heading-colors-toggle).heading-color-normal .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-normal h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-normal h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-normal h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-normal h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-normal h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-normal h6 {
|
||
color: var(--text-normal) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-accent .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-accent h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-accent h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-accent h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-accent h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-accent h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-accent h6 {
|
||
color: var(--interactive-accent) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-red .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-red h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-red h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-red h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-red h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-red h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-red h6 {
|
||
color: var(--color-red) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-orange .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-orange h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-orange h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-orange h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-orange h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-orange h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-orange h6 {
|
||
color: var(--color-orange) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-yellow .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-yellow h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-yellow h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-yellow h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-yellow h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-yellow h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-yellow h6 {
|
||
color: var(--color-yellow) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-green .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-green h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-green h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-green h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-green h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-green h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-green h6 {
|
||
color: var(--color-green) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-cyan .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-cyan h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-cyan h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-cyan h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-cyan h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-cyan h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-cyan h6 {
|
||
color: var(--color-cyan) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-blue .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-blue h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-blue h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-blue h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-blue h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-blue h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-blue h6 {
|
||
color: var(--color-blue) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-purple .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-purple h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-purple h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-purple h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-purple h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-purple h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-purple h6 {
|
||
color: var(--color-purple) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-pink .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-pink h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-pink h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-pink h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-pink h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-pink h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-pink h6 {
|
||
color: var(--color-pink) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-gray .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-gray h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-gray h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-gray h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-gray h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-gray h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-gray h6 {
|
||
color: var(--text-muted) !important;
|
||
}
|
||
|
||
body:not(.per-heading-colors-toggle).heading-color-brown .cm-header,
|
||
body:not(.per-heading-colors-toggle).heading-color-brown h1,
|
||
body:not(.per-heading-colors-toggle).heading-color-brown h2,
|
||
body:not(.per-heading-colors-toggle).heading-color-brown h3,
|
||
body:not(.per-heading-colors-toggle).heading-color-brown h4,
|
||
body:not(.per-heading-colors-toggle).heading-color-brown h5,
|
||
body:not(.per-heading-colors-toggle).heading-color-brown h6 {
|
||
color: var(--color-brown) !important;
|
||
}
|
||
|
||
/* ===== PER-HEADING COLOR RULES ===== */
|
||
|
||
/* H1 Color options */
|
||
body.per-heading-colors-toggle.h1-color-normal .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-normal h1 {
|
||
color: var(--text-normal) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-accent .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-accent h1 {
|
||
color: var(--interactive-accent) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-red .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-red h1 {
|
||
color: var(--color-red) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-orange .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-orange h1 {
|
||
color: var(--color-orange) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-yellow .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-yellow h1 {
|
||
color: var(--color-yellow) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-green .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-green h1 {
|
||
color: var(--color-green) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-cyan .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-cyan h1 {
|
||
color: var(--color-cyan) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-blue .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-blue h1 {
|
||
color: var(--color-blue) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-purple .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-purple h1 {
|
||
color: var(--color-purple) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-pink .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-pink h1 {
|
||
color: var(--color-pink) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-gray .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-gray h1 {
|
||
color: var(--text-muted) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h1-color-brown .cm-header-1,
|
||
body.per-heading-colors-toggle.h1-color-brown h1 {
|
||
color: var(--color-brown) !important;
|
||
}
|
||
|
||
/* H2 Color options */
|
||
body.per-heading-colors-toggle.h2-color-normal .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-normal h2 {
|
||
color: var(--text-normal) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-accent .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-accent h2 {
|
||
color: var(--interactive-accent) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-red .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-red h2 {
|
||
color: var(--color-red) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-orange .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-orange h2 {
|
||
color: var(--color-orange) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-yellow .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-yellow h2 {
|
||
color: var(--color-yellow) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-green .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-green h2 {
|
||
color: var(--color-green) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-cyan .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-cyan h2 {
|
||
color: var(--color-cyan) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-blue .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-blue h2 {
|
||
color: var(--color-blue) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-purple .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-purple h2 {
|
||
color: var(--color-purple) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-pink .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-pink h2 {
|
||
color: var(--color-pink) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-gray .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-gray h2 {
|
||
color: var(--text-muted) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h2-color-brown .cm-header-2,
|
||
body.per-heading-colors-toggle.h2-color-brown h2 {
|
||
color: var(--color-brown) !important;
|
||
}
|
||
|
||
/* H3 Color options */
|
||
body.per-heading-colors-toggle.h3-color-normal .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-normal h3 {
|
||
color: var(--text-normal) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-accent .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-accent h3 {
|
||
color: var(--interactive-accent) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-red .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-red h3 {
|
||
color: var(--color-red) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-orange .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-orange h3 {
|
||
color: var(--color-orange) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-yellow .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-yellow h3 {
|
||
color: var(--color-yellow) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-green .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-green h3 {
|
||
color: var(--color-green) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-cyan .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-cyan h3 {
|
||
color: var(--color-cyan) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-blue .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-blue h3 {
|
||
color: var(--color-blue) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-purple .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-purple h3 {
|
||
color: var(--color-purple) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-pink .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-pink h3 {
|
||
color: var(--color-pink) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-gray .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-gray h3 {
|
||
color: var(--text-muted) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h3-color-brown .cm-header-3,
|
||
body.per-heading-colors-toggle.h3-color-brown h3 {
|
||
color: var(--color-brown) !important;
|
||
}
|
||
|
||
/* H4 Color options */
|
||
body.per-heading-colors-toggle.h4-color-normal .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-normal h4 {
|
||
color: var(--text-normal) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-accent .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-accent h4 {
|
||
color: var(--interactive-accent) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-red .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-red h4 {
|
||
color: var(--color-red) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-orange .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-orange h4 {
|
||
color: var(--color-orange) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-yellow .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-yellow h4 {
|
||
color: var(--color-yellow) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-green .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-green h4 {
|
||
color: var(--color-green) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-cyan .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-cyan h4 {
|
||
color: var(--color-cyan) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-blue .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-blue h4 {
|
||
color: var(--color-blue) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-purple .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-purple h4 {
|
||
color: var(--color-purple) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-pink .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-pink h4 {
|
||
color: var(--color-pink) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-gray .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-gray h4 {
|
||
color: var(--text-muted) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h4-color-brown .cm-header-4,
|
||
body.per-heading-colors-toggle.h4-color-brown h4 {
|
||
color: var(--color-brown) !important;
|
||
}
|
||
|
||
/* H5 Color options */
|
||
body.per-heading-colors-toggle.h5-color-normal .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-normal h5 {
|
||
color: var(--text-normal) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-accent .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-accent h5 {
|
||
color: var(--interactive-accent) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-red .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-red h5 {
|
||
color: var(--color-red) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-orange .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-orange h5 {
|
||
color: var(--color-orange) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-yellow .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-yellow h5 {
|
||
color: var(--color-yellow) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-green .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-green h5 {
|
||
color: var(--color-green) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-cyan .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-cyan h5 {
|
||
color: var(--color-cyan) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-blue .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-blue h5 {
|
||
color: var(--color-blue) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-purple .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-purple h5 {
|
||
color: var(--color-purple) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-pink .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-pink h5 {
|
||
color: var(--color-pink) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-gray .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-gray h5 {
|
||
color: var(--text-muted) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h5-color-brown .cm-header-5,
|
||
body.per-heading-colors-toggle.h5-color-brown h5 {
|
||
color: var(--color-brown) !important;
|
||
}
|
||
|
||
/* H6 Color options */
|
||
body.per-heading-colors-toggle.h6-color-normal .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-normal h6 {
|
||
color: var(--text-normal) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-accent .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-accent h6 {
|
||
color: var(--interactive-accent) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-red .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-red h6 {
|
||
color: var(--color-red) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-orange .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-orange h6 {
|
||
color: var(--color-orange) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-yellow .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-yellow h6 {
|
||
color: var(--color-yellow) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-green .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-green h6 {
|
||
color: var(--color-green) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-cyan .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-cyan h6 {
|
||
color: var(--color-cyan) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-blue .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-blue h6 {
|
||
color: var(--color-blue) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-purple .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-purple h6 {
|
||
color: var(--color-purple) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-pink .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-pink h6 {
|
||
color: var(--color-pink) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-gray .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-gray h6 {
|
||
color: var(--text-muted) !important;
|
||
}
|
||
body.per-heading-colors-toggle.h6-color-brown .cm-header-6,
|
||
body.per-heading-colors-toggle.h6-color-brown h6 {
|
||
color: var(--color-brown) !important;
|
||
}
|
||
|
||
/* H6 Color options */
|
||
.per-heading-colors-toggle.h6-color-normal h6 {
|
||
color: var(--text-normal) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-accent h6 {
|
||
color: var(--interactive-accent) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-red h6 {
|
||
color: var(--color-red) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-orange h6 {
|
||
color: var(--color-orange) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-yellow h6 {
|
||
color: var(--color-yellow) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-green h6 {
|
||
color: var(--color-green) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-cyan h6 {
|
||
color: var(--color-cyan) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-blue h6 {
|
||
color: var(--color-blue) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-purple h6 {
|
||
color: var(--color-purple) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-pink h6 {
|
||
color: var(--color-pink) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-gray h6 {
|
||
color: var(--text-muted) !important;
|
||
}
|
||
.per-heading-colors-toggle.h6-color-brown h6 {
|
||
color: var(--color-brown) !important;
|
||
}
|
||
|
||
/* ======== BOLD, ITALIC, BOLDITALICAAAA */
|
||
|
||
:root {
|
||
--italic-color: var(--color-normal);
|
||
--bold-color: var(--color-normal);
|
||
--bolditalic-color: var(--color-normal);
|
||
}
|
||
|
||
body.italic-color-normal {
|
||
--italic-color: var(--color-normal);
|
||
}
|
||
body.italic-color-muted {
|
||
--italic-color: var(--color-muted);
|
||
}
|
||
body.italic-color-accent {
|
||
--italic-color: var(--color-accent);
|
||
}
|
||
body.italic-color-red {
|
||
--italic-color: var(--color-red);
|
||
}
|
||
body.italic-color-orange {
|
||
--italic-color: var(--color-orange);
|
||
}
|
||
body.italic-color-yellow {
|
||
--italic-color: var(--color-yellow);
|
||
}
|
||
body.italic-color-green {
|
||
--italic-color: var(--color-green);
|
||
}
|
||
body.italic-color-cyan {
|
||
--italic-color: var(--color-cyan);
|
||
}
|
||
body.italic-color-blue {
|
||
--italic-color: var(--color-blue);
|
||
}
|
||
body.italic-color-purple {
|
||
--italic-color: var(--color-purple);
|
||
}
|
||
body.italic-color-pink {
|
||
--italic-color: var(--color-pink);
|
||
}
|
||
body.italic-color-gray {
|
||
--italic-color: var(--color-gray);
|
||
}
|
||
body.italic-color-brown {
|
||
--italic-color: var(--color-brown);
|
||
}
|
||
|
||
body.bold-color-normal {
|
||
--bold-color: var(--color-normal);
|
||
}
|
||
body.bold-color-muted {
|
||
--bold-color: var(--color-muted);
|
||
}
|
||
body.bold-color-accent {
|
||
--bold-color: var(--color-accent);
|
||
}
|
||
body.bold-color-red {
|
||
--bold-color: var(--color-red);
|
||
}
|
||
body.bold-color-orange {
|
||
--bold-color: var(--color-orange);
|
||
}
|
||
body.bold-color-yellow {
|
||
--bold-color: var(--color-yellow);
|
||
}
|
||
body.bold-color-green {
|
||
--bold-color: var(--color-green);
|
||
}
|
||
body.bold-color-cyan {
|
||
--bold-color: var(--color-cyan);
|
||
}
|
||
body.bold-color-blue {
|
||
--bold-color: var(--color-blue);
|
||
}
|
||
body.bold-color-purple {
|
||
--bold-color: var(--color-purple);
|
||
}
|
||
body.bold-color-pink {
|
||
--bold-color: var(--color-pink);
|
||
}
|
||
body.bold-color-gray {
|
||
--bold-color: var(--color-gray);
|
||
}
|
||
body.bold-color-brown {
|
||
--bold-color: var(--color-brown);
|
||
}
|
||
|
||
body.bolditalic-color-normal {
|
||
--bolditalic-color: var(--color-normal);
|
||
}
|
||
body.bolditalic-color-muted {
|
||
--bolditalic-color: var(--color-muted);
|
||
}
|
||
body.bolditalic-color-accent {
|
||
--bolditalic-color: var(--color-accent);
|
||
}
|
||
body.bolditalic-color-red {
|
||
--bolditalic-color: var(--color-red);
|
||
}
|
||
body.bolditalic-color-orange {
|
||
--bolditalic-color: var(--color-orange);
|
||
}
|
||
body.bolditalic-color-yellow {
|
||
--bolditalic-color: var(--color-yellow);
|
||
}
|
||
body.bolditalic-color-green {
|
||
--bolditalic-color: var(--color-green);
|
||
}
|
||
body.bolditalic-color-cyan {
|
||
--bolditalic-color: var(--color-cyan);
|
||
}
|
||
body.bolditalic-color-blue {
|
||
--bolditalic-color: var(--color-blue);
|
||
}
|
||
body.bolditalic-color-purple {
|
||
--bolditalic-color: var(--color-purple);
|
||
}
|
||
body.bolditalic-color-pink {
|
||
--bolditalic-color: var(--color-pink);
|
||
}
|
||
body.bolditalic-color-gray {
|
||
--bolditalic-color: var(--color-gray);
|
||
}
|
||
body.bolditalic-color-brown {
|
||
--bolditalic-color: var(--color-brown);
|
||
}
|
||
|
||
em {
|
||
color: var(--italic-color) !important;
|
||
}
|
||
strong {
|
||
color: var(--bold-color) !important;
|
||
}
|
||
strong em,
|
||
em strong {
|
||
color: var(--bolditalic-color) !important;
|
||
}
|
||
|
||
.cm-em {
|
||
color: var(--italic-color) !important;
|
||
}
|
||
.cm-strong {
|
||
color: var(--bold-color) !important;
|
||
}
|
||
.cm-strong.cm-em {
|
||
color: var(--bolditalic-color) !important;
|
||
}
|
||
|
||
/* ===== BASIC ELEMENTS ===== */
|
||
|
||
.popover .markdown-embed-link {
|
||
margin: 10px 4px;
|
||
}
|
||
|
||
.circular-tiptip {
|
||
--button-radius: 20px;
|
||
--input-radius: 20px;
|
||
}
|
||
|
||
.round-tiptip {
|
||
--button-radius: 6px;
|
||
--input-radius: 6px;
|
||
}
|
||
|
||
.rounded-tiptip {
|
||
--button-radius: 10px;
|
||
--input-radius: 10px;
|
||
}
|
||
|
||
.lil-round-tiptip {
|
||
--button-radius: 10px;
|
||
--input-radius: 10px;
|
||
}
|
||
|
||
.sharp-tiptip {
|
||
--button-radius: 0px;
|
||
--input-radius: 0px;
|
||
}
|
||
|
||
.eye-tiptip {
|
||
--button-radius: 50%;
|
||
--input-radius: 50%;
|
||
}
|
||
|
||
.sock-tiptip {
|
||
--button-radius: 10%;
|
||
--input-radius: 10%;
|
||
}
|
||
|
||
/* === Shape Tiptips === */
|
||
|
||
/* Hexagon Tiptip */
|
||
.hexagon-tiptip select,
|
||
.hexagon-tiptip input,
|
||
.hexagon-tiptip textarea,
|
||
.hexagon-tiptip button,
|
||
.hexagon-tiptip .mod-cta,
|
||
.hexagon-tiptip .setting-item-control button,
|
||
.hexagon-tiptip .menu-item.tappable,
|
||
.hexagon-tiptip .vertical-tab-nav-item,
|
||
.hexagon-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.hexagon-tiptip .suggestion-hotkey,
|
||
.hexagon-tiptip .setting-hotkey,
|
||
.hexagon-tiptip .kanban-plugin__item,
|
||
.hexagon-tiptip img {
|
||
corner-shape: bevel !important;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
/* increased */
|
||
.hexagon-tiptip .menu,
|
||
.hexagon-tiptip .modal,
|
||
.hexagon-tiptip .prompt,
|
||
.hexagon-tiptip,
|
||
.hexagon-tiptip .notice,
|
||
.hexagon-tiptip .kanban-plugin__lane,
|
||
.hexagon-tiptip .popover {
|
||
corner-shape: bevel !important;
|
||
border-radius: 12px !important;
|
||
--corner-shape: bevel;
|
||
}
|
||
|
||
/* Scoop Tiptip */
|
||
.scoop-tiptip select,
|
||
.scoop-tiptip input,
|
||
.scoop-tiptip textarea,
|
||
.scoop-tiptip button,
|
||
.scoop-tiptip .mod-cta,
|
||
.scoop-tiptip .setting-item-control button,
|
||
.scoop-tiptip .menu-item.tappable,
|
||
.scoop-tiptip .vertical-tab-nav-item,
|
||
.scoop-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.scoop-tiptip .suggestion-hotkey,
|
||
.scoop-tiptip .setting-hotkey,
|
||
.scoop-tiptip .kanban-plugin__item,
|
||
.scoop-tiptip img {
|
||
corner-shape: scoop !important;
|
||
border-radius: 6px !important;
|
||
--corner-shape: scoop;
|
||
}
|
||
|
||
.scoop-tiptip .menu,
|
||
.scoop-tiptip .modal,
|
||
.scoop-tiptip .prompt,
|
||
.scoop-tiptip,
|
||
.scoop-tiptip .notice,
|
||
.scoop-tiptip .kanban-plugin__lane,
|
||
.scoop-tiptip .popover {
|
||
corner-shape: scoop !important;
|
||
border-radius: 7px !important;
|
||
--corner-shape: scoop;
|
||
}
|
||
|
||
/* Decreased */
|
||
.bubble.scoop-tiptip .menu,
|
||
.bubble.scoop-tiptip .modal,
|
||
.bubble.scoop-tiptip .prompt,
|
||
.bubble.scoop-tiptip,
|
||
.bubble.scoop-tiptip .notice,
|
||
.bubble.scoop-tiptip .kanban-plugin__lane,
|
||
.bubble.scoop-tiptip .popover,
|
||
.bubble.scoop-tiptip .workspace-leaf {
|
||
border-radius: 10px !important;
|
||
corner-shape: scoop;
|
||
}
|
||
|
||
.bubble.scoop-tiptip .workspace-tab-header,
|
||
.bubble.scoop-tiptip .workspace-tab-header:active {
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
.default-tab-rounded.scoop-tiptip .workspace-tab-header:not(.is-active) .workspace-tab-header-inner:active {
|
||
border-radius: 6px 6px 0px 0px !important;
|
||
}
|
||
|
||
.default-tab-rounded.circular-tiptip .workspace-tab-header,
|
||
.default-tab-rounded.circular-tiptip .workspace-tab-header:not(.is-active) .workspace-tab-header-inner:active {
|
||
border-radius: 14px 14px 0px 0px !important;
|
||
}
|
||
|
||
.bubble .workspace-leaf {
|
||
border-radius: var(--button-radius) !important;
|
||
corner-shape: var(--corner-shape) !important;
|
||
}
|
||
|
||
.bubble.sock-tiptip .workspace-leaf {
|
||
border-radius: 2% !important;
|
||
corner-shape: var(--corner-shape) !important;
|
||
}
|
||
|
||
.default-tab-rounded.hexagon-tiptip .workspace-tab-header,
|
||
.default-tab-rounded.scoop-tiptip .workspace-tab-header {
|
||
border-radius: 8px 8px 0px 0px !important;
|
||
}
|
||
|
||
.default-tab-rounded.hexagon-tiptip .workspace-tab-header:not(.is-active) .workspace-tab-header-inner:active {
|
||
border-radius: 8px 8px 0px 0px !important;
|
||
}
|
||
|
||
|
||
|
||
/* Squircle Tiptip */
|
||
.squircle-tiptip select,
|
||
.squircle-tiptip input,
|
||
.squircle-tiptip textarea,
|
||
.squircle-tiptip button,
|
||
.squircle-tiptip .mod-cta,
|
||
.squircle-tiptip .setting-item-control button,
|
||
.squircle-tiptip .menu-item.tappable,
|
||
.squircle-tiptip .vertical-tab-nav-item,
|
||
.squircle-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.squircle-tiptip .suggestion-hotkey,
|
||
.squircle-tiptip .setting-hotkey,
|
||
.squircle-tiptip .kanban-plugin__item,
|
||
.squircle-tiptip img {
|
||
corner-shape: squircle !important;
|
||
border-radius: 7px !important;
|
||
--corner-shape: squircle;
|
||
}
|
||
|
||
.squircle-tiptip .menu,
|
||
.squircle-tiptip .modal,
|
||
.squircle-tiptip .prompt,
|
||
.squircle-tiptip,
|
||
.squircle-tiptip .notice,
|
||
.squircle-tiptip .kanban-plugin__lane,
|
||
.squircle-tiptip .popover {
|
||
corner-shape: squircle !important;
|
||
border-radius: 12px !important;
|
||
--corner-shape: squircle;
|
||
}
|
||
|
||
/* Round & Rounded Tiptips */
|
||
.round-tiptip .menu,
|
||
.round-tiptip .modal,
|
||
.round-tiptip .prompt,
|
||
.rounded-tiptip .menu,
|
||
.rounded-tiptip .modal,
|
||
.rounded-tiptip .prompt {
|
||
border-radius: calc(var(--button-radius) + 2px) !important;
|
||
}
|
||
|
||
/* Sharp Tiptip */
|
||
.sharp-tiptip .menu,
|
||
.sharp-tiptip .modal,
|
||
.sharp-tiptip .prompt,
|
||
.sharp-tiptip .suggestion-item.mod-complex.is-selected {
|
||
border-radius: 0px !important;
|
||
}
|
||
|
||
/* Sock Tiptip */
|
||
.sock-tiptip .menu,
|
||
.sock-tiptip .modal,
|
||
.sock-tiptip .prompt,
|
||
.sock-tiptip .kanban-plugin__lane,
|
||
.sock-tiptip img,
|
||
.sock-tiptip .popover {
|
||
border-radius: 1.7% !important;
|
||
}
|
||
|
||
/* Circular Tiptip */
|
||
.circular-tiptip .suggestion-item.mod-complex.is-selected {
|
||
border-radius: 100px !important;
|
||
}
|
||
|
||
/* Eye Tiptip */
|
||
.eye-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.eye-tiptip .suggestion-hotkey,
|
||
.eye-tiptip .setting-hotkey {
|
||
border-radius: var(--button-radius) !important;
|
||
}
|
||
|
||
.eye-tiptip .kanban-plugin__item {
|
||
border-radius: 20% !important;
|
||
}
|
||
|
||
.eye-tiptip .kanban-plugin__lane,
|
||
.eye-tiptip .menu,
|
||
.eye-tiptip .modal,
|
||
.eye-tiptip .prompt,
|
||
.eye-tiptip img,
|
||
.eye-tiptip .popover {
|
||
border-radius: 4% !important;
|
||
}
|
||
|
||
/* === Button Shapes === */
|
||
|
||
/* Circular Buttons */
|
||
.circular-tiptip select,
|
||
.circular-tiptip input,
|
||
.circular-tiptip textarea,
|
||
.circular-tiptip button,
|
||
.circular-tiptip .mod-cta,
|
||
.circular-tiptip .setting-item-control button,
|
||
.circular-tiptip .clickable-icon,
|
||
.circular-tiptip .menu-item.tappable,
|
||
.circular-tiptip .vertical-tab-nav-item,
|
||
.circular-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.circular-tiptip .suggestion-hotkey,
|
||
.circular-tiptip .setting-hotkey,
|
||
.circular-tiptip .kanban-plugin__item,
|
||
.circular-tiptip img {
|
||
border-radius: 100px !important;
|
||
}
|
||
|
||
/* Rounded Buttons */
|
||
.rounded-tiptip select,
|
||
.rounded-tiptip input,
|
||
.rounded-tiptip textarea,
|
||
.rounded-tiptip button,
|
||
.rounded-tiptip .mod-cta,
|
||
.rounded-tiptip .setting-item-control button,
|
||
.rounded-tiptip .clickable-icon,
|
||
.rounded-tiptip .menu-item.tappable,
|
||
.rounded-tiptip .vertical-tab-nav-item,
|
||
.rounded-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.rounded-tiptip .suggestion-hotkey,
|
||
.rounded-tiptip .setting-hotkey,
|
||
.rounded-tiptip .kanban-plugin__item,
|
||
.rounded-tiptip img {
|
||
border-radius: 12px !important;
|
||
}
|
||
|
||
/* Round Buttons */
|
||
.round-tiptip select,
|
||
.round-tiptip input,
|
||
.round-tiptip textarea,
|
||
.round-tiptip button,
|
||
.round-tiptip .mod-cta,
|
||
.round-tiptip .setting-item-control button,
|
||
.round-tiptip .clickable-icon,
|
||
.round-tiptip .menu-item.tappable,
|
||
.round-tiptip .vertical-tab-nav-item,
|
||
.round-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.round-tiptip .suggestion-hotkey,
|
||
.round-tiptip .setting-hotkey,
|
||
.round-tiptip .kanban-plugin__item,
|
||
.round-tiptip img {
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
/* Sharp Buttons */
|
||
.sharp-tiptip select,
|
||
.sharp-tiptip input,
|
||
.sharp-tiptip textarea,
|
||
.sharp-tiptip button,
|
||
.sharp-tiptip .mod-cta,
|
||
.sharp-tiptip .setting-item-control button,
|
||
.sharp-tiptip .clickable-icon,
|
||
.sharp-tiptip .menu-item.tappable,
|
||
.sharp-tiptip .vertical-tab-nav-item,
|
||
.sharp-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.sharp-tiptip .suggestion-hotkey,
|
||
.sharp-tiptip .setting-hotkey,
|
||
.sharp-tiptip .kanban-plugin__item,
|
||
.sharp-tiptip img {
|
||
border-radius: 0px !important;
|
||
}
|
||
|
||
/* Sock Buttons */
|
||
.sock-tiptip select,
|
||
.sock-tiptip input,
|
||
.sock-tiptip textarea,
|
||
.sock-tiptip button,
|
||
.sock-tiptip .mod-cta,
|
||
.sock-tiptip .setting-item-control button,
|
||
.sock-tiptip .clickable-icon,
|
||
.sock-tiptip .menu-item.tappable,
|
||
.sock-tiptip .vertical-tab-nav-item,
|
||
.sock-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.sock-tiptip .suggestion-hotkey,
|
||
.sock-tiptip .setting-hotkey,
|
||
.sock-tiptip .kanban-plugin__item,
|
||
.sock-tiptip img {
|
||
border-radius: 1.7% !important;
|
||
}
|
||
|
||
/* Eye Buttons */
|
||
.eye-tiptip select,
|
||
.eye-tiptip input,
|
||
.eye-tiptip textarea,
|
||
.eye-tiptip button,
|
||
.eye-tiptip .mod-cta,
|
||
.eye-tiptip .setting-item-control button,
|
||
.eye-tiptip .clickable-icon,
|
||
.eye-tiptip .menu-item.tappable,
|
||
.eye-tiptip .vertical-tab-nav-item,
|
||
.eye-tiptip .suggestion-item.mod-complex.is-selected,
|
||
.eye-tiptip .suggestion-hotkey,
|
||
.eye-tiptip .setting-hotkey,
|
||
.eye-tiptip .kanban-plugin__item,
|
||
.eye-tiptip img {
|
||
border-radius: 20% / 50% !important;
|
||
}
|
||
|
||
/* Global Shape */
|
||
select,
|
||
input,
|
||
textarea,
|
||
button,
|
||
.mod-cta,
|
||
.setting-item-control button,
|
||
.clickable-icon,
|
||
.menu-item.tappable,
|
||
.vertical-tab-nav-item,
|
||
.suggestion-item.mod-complex.is-selected,
|
||
.suggestion-hotkey,
|
||
.setting-hotkey,
|
||
.kanban-plugin__item,
|
||
.workspace-tab-header,
|
||
img {
|
||
corner-shape: var(--corner-shape, initial) !important;
|
||
}
|
||
|
||
/* bordered */
|
||
|
||
body:not(.view-header) .button-bordered button,
|
||
.button-bordered .setting-item-control button,
|
||
.button-bordered select {
|
||
border: 2px solid var(--background-modifier-border-focus) !important;
|
||
}
|
||
|
||
.button-bordered button.mod-cta {
|
||
border: 2px solid var(--color-accent-1) !important;
|
||
}
|
||
|
||
/* 3d */
|
||
|
||
body:not(.view-header) .button-3d button,
|
||
.button-3d .mod-cta,
|
||
.button-3d select,
|
||
.button-3d .setting-item-control button {
|
||
border-bottom: 3px solid var(--button-shadow) !important;
|
||
transition: border-bottom 0.1s ease, transform 0.1s ease;
|
||
}
|
||
|
||
body:not(.view-header) .button-3d button:hover,
|
||
.button-3d .mod-cta:hover,
|
||
.button-3d select:hover,
|
||
.button-3d .setting-item-control button:hover {
|
||
border-bottom: 5px solid var(--button-shadow) !important;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
body:not(.view-header) .button-3d button:active,
|
||
.button-3d .mod-cta:active,
|
||
.button-3d select:active,
|
||
.button-3d .setting-item-control button:active {
|
||
border-bottom: 0px solid var(--button-shadow) !important;
|
||
transform: translateY(2px);
|
||
}
|
||
|
||
/* boredered 3d */
|
||
|
||
body:not(.view-header) .button-bordered-3d button,
|
||
.button-bordered-3d .mod-cta,
|
||
.button-bordered-3d select,
|
||
.button-bordered-3d .setting-item-control button {
|
||
border: 2px solid var(--background-modifier-border-focus) !important;
|
||
border-bottom: 3px solid var(--button-shadow) !important;
|
||
transition: border-bottom 0.1s ease, transform 0.1s ease;
|
||
}
|
||
|
||
body:not(.view-header) .button-bordered-3d button:hover,
|
||
.button-bordered-3d .mod-cta:hover,
|
||
.button-bordered-3d select:hover,
|
||
.button-bordered-3d .setting-item-control button:hover {
|
||
border: 2px solid var(--background-modifier-border-focus) !important;
|
||
border-bottom: 5px solid var(--button-shadow) !important;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
|
||
body:not(.view-header) .button-bordered-3d button:active,
|
||
.button-bordered-3d .mod-cta:active,
|
||
.button-bordered-3d select:active,
|
||
.button-bordered-3d .setting-item-control button:active {
|
||
border: 2px solid var(--background-modifier-border-focus) !important;
|
||
border-bottom: 0px solid var(--button-shadow) !important;
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
/* glw */
|
||
|
||
.button-glow button,
|
||
.button-glow .mod-cta,
|
||
.button-glow select,
|
||
.button-glow .setting-item-control button {
|
||
box-shadow: 0 0 0px var(--color-accent) !important;
|
||
transition: box-shadow 0.2s ease;
|
||
}
|
||
|
||
.button-glow button:hover,
|
||
.button-glow .mod-cta:hover,
|
||
.button-glow select:hover,
|
||
.button-glow .setting-item-control button:hover {
|
||
box-shadow: 0 0 8px var(--text-normal) !important;
|
||
}
|
||
|
||
/* ------------- */
|
||
|
||
.clickable-icon {
|
||
/* transition: all calc(var(--animation-duration) * 0.3333) ease; */
|
||
transition: all 0.2s ease;
|
||
border-radius: 20px !important;
|
||
border: 2px solid transparent !important;
|
||
transition: 0.2s ease cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
.clickable-icon:hover {
|
||
/* transform: scale(1.2); */
|
||
transition: all 0.2s ease;
|
||
border-radius: 20px !important;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.clickable-icon:active {
|
||
border-radius: 10px !important;
|
||
transform: scale(0.8);
|
||
/* border: 2px solid currentColor !important; */
|
||
color: var(--color-accent-1);
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
}
|
||
|
||
.button-bordered .clickable-icon:active {
|
||
border-radius: 10px !important;
|
||
transform: scale(0.8);
|
||
border: 2px solid currentColor !important;
|
||
color: var(--color-accent-1);
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
}
|
||
|
||
.clickable-icon.extra-setting-button[aria-label*="donate to support" i]:hover {
|
||
color: var(--color-pink) !important;
|
||
background-color: rgba(var(--color-pink-rgb), 0.1);
|
||
}
|
||
|
||
.clickable-icon.extra-setting-button[aria-label*="uninstall" i]:hover {
|
||
color: var(--text-error) !important;
|
||
background-color: rgba(var(--color-red-rgb), 0.2);
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
.clickable-icon.extra-setting-button[aria-label*="delete" i]:hover {
|
||
color: var(--text-error) !important;
|
||
background-color: rgba(var(--color-red-rgb), 0.2);
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
.clickable-icon.extra-setting-button[aria-label*="remove" i]:hover {
|
||
color: var(--text-error) !important;
|
||
background-color: rgba(var(--color-red-rgb), 0.2);
|
||
}
|
||
|
||
.modal-close-button.clickable-icon:hover {
|
||
border-radius: 8px !important;
|
||
color: var(--text-error);
|
||
background-color: rgba(var(--color-red-rgb), 0.2) !important;
|
||
transition: calc(var(--animation-duration) * 0.6667) ease !important;
|
||
}
|
||
|
||
.workspace-tab-header-new-tab .clickable-icon:hover {
|
||
border-radius: 20px !important;
|
||
color: var(--color-accent);
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2);
|
||
transition: calc(var(--animation-duration) * 0.6667) ease !important;
|
||
}
|
||
|
||
/* .workspace-tab-header-new-tab .clickable-icon:active {
|
||
border-radius: 8px !important;
|
||
color: var(--color-green);
|
||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||
transition: calc(var(--animation-duration) * 0.6667) ease !important;
|
||
} */
|
||
|
||
.workspace-tab-header-new-tab .clickable-icon:active {
|
||
border-radius: 8px !important;
|
||
color: var(--color-accent);
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2);
|
||
transition: calc(var(--animation-duration) * 0.6667) ease !important;
|
||
}
|
||
|
||
/* =========================
|
||
BUTTONS
|
||
========================= */
|
||
|
||
button, button:hover, button:active {
|
||
transition: background-color 0.2s ease,
|
||
border-radius 0.2s ease,
|
||
transform calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
|
||
}
|
||
|
||
/* scale butt */
|
||
|
||
.button-scale button {
|
||
transition:
|
||
all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
background-color calc(var(--animation-duration) * 0.6667) ease;
|
||
transform: scale(1);
|
||
outline: 0px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.button-scale button:hover {
|
||
transform: scale(1.06);
|
||
z-index: 1000 !important;
|
||
}
|
||
|
||
.button-scale button:active {
|
||
border-radius: 10px !important;
|
||
transform: scale(0.9);
|
||
transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
outline: 0px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* shrink butt */
|
||
|
||
.button-shrink button {
|
||
transition:
|
||
all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
background-color calc(var(--animation-duration) * 0.6667) ease;
|
||
transform: scale(1);
|
||
outline: 0px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.button-shrink button:hover {
|
||
transform: scale(0.9);
|
||
z-index: 1000 !important;
|
||
}
|
||
|
||
.button-shrink button:active {
|
||
border-radius: 10px !important;
|
||
transform: scale(0.7);
|
||
opacity: 0.7;
|
||
transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
outline: 0px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* tilt butt */
|
||
|
||
.button-tilt button {
|
||
transition:
|
||
transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1),
|
||
background-color 0.15s ease,
|
||
opacity 0.1s ease;
|
||
|
||
transform: rotate(0deg);
|
||
will-change: transform;
|
||
display: inline-block;
|
||
}
|
||
|
||
.button-tilt button:hover {
|
||
transform: rotate(3deg);
|
||
z-index: 1;
|
||
}
|
||
|
||
.button-tilt button:active {
|
||
transform: rotate(-4deg) scale(0.97);
|
||
opacity: 0.85;
|
||
transition: transform 0.08s cubic-bezier(0.2, 0.9, 0.4, 1.1);
|
||
}
|
||
|
||
.button-tilt button:focus-visible {
|
||
outline: 2px solid var(--background-modifier-border);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
|
||
|
||
/* bounce butt */
|
||
|
||
.button-bounce button {
|
||
transform: scale(1);
|
||
}
|
||
|
||
.button-bounce button {
|
||
transition: transform 0.2s ease-out;
|
||
}
|
||
|
||
.button-bounce button:hover {
|
||
/* transform: scale(1.05); */
|
||
animation: softBounce 0.6s infinite;
|
||
}
|
||
|
||
@keyframes softBounce {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.02); }
|
||
}
|
||
|
||
/* @keyframes hoverBounce {
|
||
0% { transform: scale(1, 1); }
|
||
100% { transform: scale(1.03, 0.97); }
|
||
} */
|
||
|
||
.button-bounce button:active {
|
||
animation: clickBounce 0.35s ease;
|
||
}
|
||
|
||
@keyframes clickBounce {
|
||
0% { transform: scale(1, 1); }
|
||
30% { transform: scale(1.1, 0.85); }
|
||
60% { transform: scale(0.95, 1.05); }
|
||
100% { transform: scale(1, 1); }
|
||
}
|
||
|
||
|
||
/* =========================
|
||
SELECTS
|
||
========================= */
|
||
|
||
select {
|
||
margin-right: 0px !important;
|
||
transition:
|
||
all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
background-color calc(var(--animation-duration) * 0.6667) ease;
|
||
padding: auto 20px !important;
|
||
text-align: center;
|
||
}
|
||
|
||
/* select:hover {
|
||
transform: scale(1.1);
|
||
} */
|
||
|
||
select:active {
|
||
padding: auto 26px !important;
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
input[type="text"] {
|
||
/* border: var(--input-border-width) solid var(--background-modifier-border); */
|
||
/* border: 2px solid var(--background-modifier-border-hover) !important; */
|
||
/* box-shadow:
|
||
0px -0.8px 0px 1px var(--background-modifier-form-field-hover),
|
||
0px 1px 0.3px 1px #00000040; */
|
||
|
||
--background-modifier-form-field: var(--background-secondary-alt);
|
||
--background-modifier-form-field-hover: var(--background-secondary-alt);
|
||
--background-modifier-border-focus: var(--text-muted);
|
||
--background-modifier-border-width: 2px;
|
||
--input-border-width: 0px;
|
||
|
||
transition:
|
||
border-radius calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.2),
|
||
background calc(var(--animation-duration) * 0.6667) ease,
|
||
background-color calc(var(--animation-duration) * 0.6667) ease,
|
||
border calc(var(--animation-duration) * 0.3333) ease !important;
|
||
}
|
||
|
||
input:focus {
|
||
border-radius: 10px !important;
|
||
transition: border-radius calc(var(--animation-duration) * 0.6667) cubic-bezier(0.175, 0.885, 0.32, 1.2);
|
||
}
|
||
|
||
.menu {
|
||
border-radius: 20px;
|
||
transition: all calc(var(--animation-duration) * 0.6667) cubic-bezier(0.175, 0.885, 0.32, 2) !important;
|
||
/* padding: 0px 30px !important; */
|
||
overflow: auto !important;
|
||
opacity: 1;
|
||
}
|
||
|
||
.menu-item.tappable.selected:active {
|
||
border-radius: 26px;
|
||
/* padding: 2px 8px !important; */
|
||
transition: all calc(var(--animation-duration) * 0.3333) ease;
|
||
/* background-color: hsla(var(--interactive-accent-hsl), 0.6) !important; */
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
.menu-item.tappable {
|
||
border-radius: 20px;
|
||
padding: 6px 8px !important;
|
||
transition: all calc(var(--animation-duration) * 0.3333) ease !important;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.menu-item.tappable {
|
||
border-radius: 12px;
|
||
margin: 8px 0px;
|
||
padding: 12px !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
.menu {
|
||
border-radius: 20px !important;
|
||
}
|
||
.view-header {
|
||
background-color: var(--background-secondary-alt) !important;
|
||
}
|
||
|
||
.view-header .clickable-icon {
|
||
background-color: var(--background-secondary-alt) !important;
|
||
background: var(--background-secondary-alt) !important;
|
||
}
|
||
.clickable-icon {
|
||
&:hover {
|
||
transform: scale(0.8);
|
||
}
|
||
&:active {
|
||
transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-item.tappable.selected {
|
||
color: var(--color-accent) !important;
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
}
|
||
|
||
.menu-item.tappable.selected .menu-item-icon {
|
||
color: var(--color-accent) !important;
|
||
}
|
||
|
||
/* Red for delete/remove opts */
|
||
.menu-item.tappable[data-section*="delete"]:not(.is-disabled),
|
||
.menu-item.tappable[data-section*="Delete"]:not(.is-disabled),
|
||
.menu-item.tappable[data-section*="DELETE"]:not(.is-disabled) {
|
||
color: var(--text-error) !important;
|
||
background-color: rgba(var(--color-red-rgb), 0.3) !important;
|
||
}
|
||
|
||
.menu-item.tappable[data-section*="delete"]:not(.is-disabled) .menu-item-icon,
|
||
.menu-item.tappable[data-section*="Delete"]:not(.is-disabled) .menu-item-icon,
|
||
.menu-item.tappable[data-section*="DELETE"]:not(.is-disabled) .menu-item-icon {
|
||
color: var(--text-error) !important;
|
||
}
|
||
|
||
.menu-item.tappable[data-section*="remove"]:not(.is-disabled),
|
||
.menu-item.tappable[data-section*="Remove"]:not(.is-disabled),
|
||
.menu-item.tappable[data-section*="REMOVE"]:not(.is-disabled) {
|
||
color: var(--text-error) !important;
|
||
background-color: rgba(var(--color-red-rgb), 0.3) !important;
|
||
}
|
||
|
||
.menu-item.tappable[data-section*="remove"]:not(.is-disabled) .menu-item-icon,
|
||
.menu-item.tappable[data-section*="Remove"]:not(.is-disabled) .menu-item-icon,
|
||
.menu-item.tappable[data-section*="REMOVE"]:not(.is-disabled) .menu-item-icon {
|
||
color: var(--text-error) !important;
|
||
}
|
||
|
||
/* is-warning class */
|
||
.menu-item.tappable.is-warning {
|
||
color: var(--text-error) !important;
|
||
}
|
||
|
||
.menu-item.tappable.is-warning .menu-item-icon {
|
||
color: var(--text-error) !important;
|
||
}
|
||
|
||
.menu-item.tappable.is-warning.selected {
|
||
color: var(--text-error) !important;
|
||
background-color: rgba(var(--color-red-rgb), 0.3) !important;
|
||
}
|
||
|
||
.menu-item.tappable.is-warning.selected .menu-item-icon {
|
||
color: var(--text-error) !important;
|
||
}
|
||
|
||
/* ===== TABS ===== */
|
||
|
||
vertical-tab-nav-item-icon,
|
||
.horizontal-tab-nav-item.is-active .vertical-tab-nav-item-icon,
|
||
.vertical-tab-nav-item.is-active .vertical-tab-nav-item-icon {
|
||
color: var(--text-on-accent);
|
||
transition: color 0s;
|
||
/* display: none; */
|
||
}
|
||
|
||
.vertical-tab-nav-item.is-active {
|
||
border-radius: var(--button-radius);
|
||
|
||
transition:
|
||
padding calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.8),
|
||
background-color 0s ease,
|
||
color 0s ease;
|
||
/* animation-delay: background-color 0.1s, color 0.1s; */
|
||
|
||
padding: 8px 8px !important;
|
||
text-align: center;
|
||
color: var(--text-on-accent);
|
||
background-color: var(--interactive-accent) !important;
|
||
font-weight: bolder;
|
||
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
transform: scaleX(1) translateX(0px);
|
||
}
|
||
|
||
.vertical-tab-nav-item {
|
||
border-radius: 20px;
|
||
transition: all calc(var(--animation-duration) * 0.3333) ease-out;
|
||
}
|
||
|
||
.vertical-tab-nav-item:not(.is-active):hover {
|
||
border-radius: var(--button-radius);
|
||
transform: translateX(6px);
|
||
padding: 8px 8px;
|
||
transition: all calc(var(--animation-duration) * 0.3333) ease-out;
|
||
/* text-align: center; */
|
||
transition-delay:
|
||
text-center 4s ease,
|
||
background-color 2s ease !important;
|
||
}
|
||
|
||
.vertical-tab-nav-item:not(.is-active) {
|
||
border-radius: var(--button-radius);
|
||
padding: 8px 8px;
|
||
}
|
||
|
||
/* ======== OLD VERTICAL TAB ============ */
|
||
|
||
/* ===== TABS ===== */
|
||
|
||
.vertical-tab-nav-item.is-active {
|
||
/* border-radius: 10px; */
|
||
transition: transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 1.5);
|
||
padding: 6px 8px !important;
|
||
text-align: center;
|
||
}
|
||
|
||
.vertical-tab-nav-item {
|
||
/* border-radius: 20px; */
|
||
transition: all calc(var(--animation-duration) * 0.3333) ease-out;
|
||
}
|
||
|
||
.vertical-tab-nav-item:not(.is-active):hover {
|
||
background: none !important;
|
||
/* border-radius: 20px; */
|
||
transform: translateX(6px);
|
||
transition: all calc(var(--animation-duration) * 0.3333) ease-out;
|
||
}
|
||
|
||
.vertical-tab-nav-item:not(.is-active):active {
|
||
/* background-color: var(--color-accent) !important; */
|
||
/* border-radius: 20px; */
|
||
transform: translateX(30px) !important;
|
||
transition: transform calc(var(--animation-duration) * 0.1667) ease-in;
|
||
/* background-color 0.2s ease-in;
|
||
transition-delay: background-color 0.05s ease; */
|
||
}
|
||
|
||
/* .vertical-tab-nav-item:not(.is-active):hover .vertical-tab-nav-item-title {
|
||
transform: translateX(10px);
|
||
transition: all calc(var(--animation-duration) * 0.3333) ease-out;
|
||
} */
|
||
|
||
.vertical-tab-nav-item:not(.is-active):active {
|
||
/* background-color: var(--color-accent) !important; */
|
||
transform: ScaleX(6px) translateX(10px) !important;
|
||
padding: 10px 8px;
|
||
transition: all calc(var(--animation-duration) * 0.1667);
|
||
/* text-align: center; */
|
||
flex-direction: column;
|
||
/* background-color 0.2s ease-in;
|
||
transition-delay: background-color 0.05s ease; */
|
||
}
|
||
|
||
/* .vertical-tab-nav-item:not(.is-active):active:hover {
|
||
transform: ScaleX(6px), translateX(0) !important;
|
||
} */
|
||
|
||
/* .vertical-tab-nav-item:not(.is-active):active .vertical-tab-nav-item-icon {
|
||
display: none;
|
||
} */
|
||
|
||
/* .vertical-tab-nav-item:not(.is-active):hover .vertical-tab-nav-item-icon {
|
||
display: none;
|
||
} */
|
||
|
||
.vertical-tab-nav-item:not(.is-active):active {
|
||
background-color: transparent;
|
||
transform: translateX(30px) !important;
|
||
transition: all calc(var(--animation-duration) * 0.1667);
|
||
flex-direction: row;
|
||
}
|
||
|
||
/* ===== CODE BLOCKS ===== */
|
||
|
||
.code-block-flair {
|
||
border-radius: 20px !important;
|
||
transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
}
|
||
|
||
.code-block-flair:hover {
|
||
color: var(--color-accent) !important;
|
||
border-radius: 10px !important;
|
||
transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1);
|
||
}
|
||
|
||
.code-block-flair:active {
|
||
border-radius: 10px !important;
|
||
transform: scale(0.6);
|
||
}
|
||
|
||
/* ===== STATUS BAR ===== */
|
||
|
||
.status-bar {
|
||
border-radius: 14px !important;
|
||
transition: all calc(var(--animation-duration) * 0.6667) cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
|
||
/* padding: 0px 30px !important; */
|
||
overflow: auto !important;
|
||
opacity: 1;
|
||
/* filter: brightness(0.7); */
|
||
/* transform: translateY(10%); */
|
||
border-bottom-left-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
border-top-right-radius: 0 !important;
|
||
}
|
||
|
||
.status-bar:hover {
|
||
border-radius: 10px !important;
|
||
padding: 10px 8px !important;
|
||
transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 1.5);
|
||
/* filter: brightness(1); */
|
||
transform: translateX(0);
|
||
border-bottom-left-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
border-top-right-radius: 0 !important;
|
||
color: var(--text-normal) !important;
|
||
}
|
||
|
||
.dim-status-bar .status-bar {
|
||
opacity: 0 !important;
|
||
}
|
||
|
||
.dim-status-bar .status-bar:hover {
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* ===== SETTINGS UI ===== */
|
||
|
||
.setting-hotkey,
|
||
.suggestion-hotkey {
|
||
/* color: var(--color-accent-2) !important; */
|
||
/* color: var(--text-on-accent); */
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.3) !important;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
input[type="color"].color {
|
||
border-radius: 20px !important;
|
||
transition: all calc(var(--animation-duration) * 1) ease-out;
|
||
transform: scale(1);
|
||
outline: 0px solid var(--background-modifier-border);
|
||
}
|
||
|
||
input[type="color"]:hover {
|
||
transform: scale(1.1) !important;
|
||
}
|
||
|
||
/* === ANIMATION SPEED VARIABLE === */
|
||
:root {
|
||
--animation-speed-raw: 550ms;
|
||
}
|
||
|
||
body {
|
||
--animation-duration: calc(850ms - var(--animation-speed-raw));
|
||
--nav-indentation-guide-width: 0px;
|
||
--indentation-guide-width: 0px;
|
||
--indentation-guide-color: var(--text-muted);
|
||
}
|
||
|
||
.setting-item {
|
||
transform: translateX(0px) !important;
|
||
transition: all var(--animation-duration) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
}
|
||
|
||
.setting-item:hover {
|
||
transform: translateY(-3px) !important;
|
||
transition: transform var(--animation-duration) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
}
|
||
|
||
/* disable settings animation */
|
||
.disable-settings-animation .setting-item {
|
||
transform: none !important;
|
||
transition: none !important;
|
||
}
|
||
.disable-settings-animation .setting-item:hover {
|
||
transform: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
/* disable button/dropdown/input animations */
|
||
.disable-ui-animations button,
|
||
.disable-ui-animations select,
|
||
.disable-ui-animations input,
|
||
.disable-ui-animations textarea,
|
||
.disable-ui-animations .mod-cta,
|
||
.disable-ui-animations .setting-item-control button,
|
||
.disable-ui-animations .dropdown {
|
||
transition: none !important;
|
||
animation: none !important;
|
||
}
|
||
|
||
/* disable clickable icon animations */
|
||
.disable-icon-animations .clickable-icon,
|
||
.disable-icon-animations .clickable-icon:hover,
|
||
.disable-icon-animations .clickable-icon:active {
|
||
transition: none !important;
|
||
animation: none !important;
|
||
transform: none !important;
|
||
}
|
||
|
||
/* ===== MODALS & PROMPTS ===== */
|
||
|
||
.modal {
|
||
border-radius: 20px !important;
|
||
border: 2px solid var(--background-modifier-border) !important;
|
||
z-index: 1005;
|
||
}
|
||
|
||
/* OLD MODAL OPENING ANIM */
|
||
/* .modal-container {
|
||
animation: modal-bounce-in calc(var(--animation-duration) * 0.7333) cubic-bezier(0.175, 0.885, 0.32, 1.5);
|
||
transform-origin: center;
|
||
}
|
||
@keyframes modal-bounce-in {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(18px) scale(0.97);
|
||
}
|
||
65% {
|
||
opacity: 1;
|
||
transform: translateY(-1px) scale(1.01);
|
||
}
|
||
100% {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
} */
|
||
|
||
.modal-container {
|
||
transform-origin: center;
|
||
animation: modal-open calc(var(--animation-duration) * 0.8333) cubic-bezier(0.175, 0.885, 0.32, 1.7);
|
||
}
|
||
|
||
@keyframes modal-open {
|
||
0% {
|
||
transform: translateY(18px) scale(0.99);
|
||
}
|
||
65% {
|
||
transform: translateY(-1px) scale(1.01);
|
||
}
|
||
100% {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
/* ==== COMMAND PALETTE ==== */
|
||
|
||
.prompt {
|
||
border-radius: 20px;
|
||
border: 2px solid var(--background-modifier-border) !important;
|
||
}
|
||
|
||
.suggestion-item {
|
||
border-radius: var(--button-radius);
|
||
corner-shape: var(--corner-shape);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.suggestion-item.is-selected {
|
||
border-radius: var(--button-radius);
|
||
corner-shape: var(--corner-shape);
|
||
color: var(--color-accent-1);
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
}
|
||
|
||
.suggestion-item .suggestion-content {
|
||
margin-left: 0px;
|
||
transition: margin 0.2s ease;
|
||
transition-delay: margin 0.1s ease;
|
||
}
|
||
|
||
.suggestion-item.is-selected {
|
||
margin: 4px;
|
||
margin-right: 0px;
|
||
}
|
||
|
||
/* .prompt::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 30px;
|
||
height: 34px;
|
||
pointer-events: none;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(0, 0, 0, 0),
|
||
var(--background-primary)
|
||
);
|
||
} */
|
||
|
||
input.prompt-input {
|
||
border-radius: 0px !important;
|
||
border-bottom: 2px solid var(--background-modifier-border);
|
||
}
|
||
|
||
input.prompt-input:focus {
|
||
border-radius: 0px !important;
|
||
border-bottom: 2px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* ===== hide prompt instructions ===== */
|
||
|
||
.hide-prompt-instructions .prompt-instructions {
|
||
display: none;
|
||
}
|
||
|
||
.hide-prompt-instructions .prompt::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: -10px;
|
||
height: 34px;
|
||
pointer-events: none;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(0, 0, 0, 0),
|
||
var(--background-primary)
|
||
);
|
||
}
|
||
|
||
/* ===== NAVIGATION ===== */
|
||
|
||
@media (min-width: 600px) {
|
||
.nav-header {
|
||
/* margin-top: -30px; */
|
||
transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.2);
|
||
border-bottom: 1.5px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.nav-buttons-container {
|
||
position: relative;
|
||
transition: opacity calc(var(--animation-duration) * 6.6667) ease;
|
||
transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.6);
|
||
margin: -6.2px;
|
||
}
|
||
|
||
/* Hide the buttons and show text */
|
||
.workspace-leaf-content[data-type="file-explorer"]
|
||
.nav-buttons-container::after {
|
||
content: var(--nav-hide-text) !important;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: var(--text-muted);
|
||
opacity: 1;
|
||
pointer-events: none;
|
||
transition: opacity 0s ease;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
/* On hover, show buttons + hide text */
|
||
.workspace-leaf-content[data-type="file-explorer"]
|
||
.nav-buttons-container:hover {
|
||
opacity: 1;
|
||
padding: 10px 0 !important;
|
||
}
|
||
|
||
.workspace-leaf-content[data-type="file-explorer"]
|
||
.nav-buttons-container:hover::after {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Initially hide buttons */
|
||
.workspace-leaf-content[data-type="file-explorer"]
|
||
.nav-buttons-container:not(:hover)
|
||
> * {
|
||
opacity: 0;
|
||
transition: opacity 0ms ease;
|
||
margin: auto !important;
|
||
}
|
||
|
||
.workspace-leaf-content[data-type="file-explorer"] .nav-files-container {
|
||
padding-top: 10px;
|
||
}
|
||
}
|
||
|
||
/* ===== FILE EXPLORER ===== */
|
||
|
||
.tree-item-self, .tree-item-self:hover, .tree-item-self:active {
|
||
border-radius: var(--nav-file-radius) !important;
|
||
transition: all 0.2s ease !important;
|
||
}
|
||
|
||
.file-exp-left {
|
||
.nav-file-title .tree-item-icon {
|
||
margin-inline-start: -20.5px !important;
|
||
}
|
||
|
||
.nav-file-title.is-active .tree-item-icon {
|
||
margin-inline-start: -15.5px !important;
|
||
}
|
||
|
||
.tree-item-self.is-active {
|
||
padding: 10px 4px;
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2);
|
||
color: var(--color-accent-1);
|
||
margin: 8px 0;
|
||
transition: all calc(var(--animation-duration) * 1) ease;
|
||
gap: 4px;
|
||
}
|
||
|
||
.tree-item-self.is-active:hover {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.25) !important;
|
||
color: var(--color-accent-1) !important;
|
||
margin: 10px 0;
|
||
transition: all calc(var(--animation-duration) * 1) ease;
|
||
}
|
||
|
||
.tree-item-self.is-active .tree-item-icon {
|
||
position: static !important;
|
||
margin-right: 3px;
|
||
}
|
||
}
|
||
|
||
.file-exp-center {
|
||
.tree-item-self {
|
||
border-radius: var(--button-radius);
|
||
corner-shape: var(--corner-shape);
|
||
transition: background-color calc(var(--animation-duration) * 0.6667) ease;
|
||
}
|
||
|
||
.nav-file-title.is-active .tree-item-icon {
|
||
margin-inline-start: -15.5px !important;
|
||
}
|
||
|
||
/* .tree-item-self .nav-file-title {
|
||
display: flex;
|
||
justify-content: center;
|
||
} */
|
||
|
||
.nav-file-title .tree-item-icon {
|
||
margin-inline-start: -20.5px !important;
|
||
}
|
||
|
||
.tree-item-self.is-active {
|
||
padding: 10px 4px;
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2);
|
||
color: var(--color-accent-1);
|
||
margin: 8px 0;
|
||
transition: all calc(var(--animation-duration) * 1) ease !important;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
|
||
.tree-item-self.is-active:hover {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.25) !important;
|
||
color: var(--color-accent-1) !important;
|
||
margin: 10px 0;
|
||
padding: 12px 4px;
|
||
transition: all calc(var(--animation-duration) * 1) ease !important;
|
||
}
|
||
|
||
.tree-item-self.is-active .nav-file-title,
|
||
.tree-item-self.is-active .tree-item-inner.nav-file-title-content,
|
||
.tree-item-self.is-active .nav-file-tag {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tree-item-self.is-active .tree-item-icon {
|
||
position: static !important;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
/* === folder - I DO NOT LIKE IT ARGH === */
|
||
/* .nav-folder-title {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
padding: 10px 4px;
|
||
margin: 4px 0;
|
||
border-radius: 8px;
|
||
background-color: var(--background-modifier-hover);
|
||
transition: all calc(var(--animation-duration) * 1) ease;
|
||
|
||
border-top: 2px solid var(--background-modifier-border-hover);
|
||
}
|
||
|
||
.nav-folder-title .tree-item-icon {
|
||
position: static !important;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.nav-folder-title:hover {
|
||
background-color: var(--background-modifier-border-hover) !important;
|
||
}
|
||
|
||
|
||
.tree-item-children {
|
||
padding-inline-start: 6px;
|
||
margin-inline-start: 10px;
|
||
margin-inline-end: 4px;
|
||
|
||
border-inline-start: 2px dashed var(--background-modifier-border-hover);
|
||
|
||
padding-bottom: 4px;
|
||
margin-bottom: 8px;
|
||
border-bottom: 2px dashed var(--background-modifier-border-hover);
|
||
border-bottom-left-radius: 12px;
|
||
} */
|
||
|
||
/* Center Font Text */
|
||
.center-folder-title .nav-folder-title {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.center-folder-title .nav-folder-title .tree-item-icon {
|
||
position: static !important;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.nav-folder-title:hover {
|
||
background-color: var(--background-modifier-border-hover) !important;
|
||
}
|
||
|
||
/* base folder styling */
|
||
.nav-folder-title {
|
||
/* --icon-color: var(--color-accent-1); */
|
||
/* --nav-collapse-icon-color: var(--color-accent-1); */
|
||
/* --nav-collapse-icon-color-collapsed: var(--color-accent-1); */
|
||
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
padding-top: 6px !important;
|
||
padding-bottom: 6px !important;
|
||
margin-bottom: 6px !important;
|
||
padding-left: 30px !important;
|
||
|
||
/* background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
background-image: none !important; */
|
||
/* color: var(--color-accent-1) !important; */
|
||
box-shadow: none !important;
|
||
border: none;
|
||
|
||
transition:
|
||
border calc(var(--animation-duration) * 0.6667) ease,
|
||
padding calc(var(--animation-duration) * 0.6667) ease,
|
||
padding-left 0s ease,
|
||
margin calc(var(--animation-duration) * 0.6667) ease,
|
||
border-radius calc(var(--animation-duration) * 0.6667),
|
||
box-shadow calc(var(--animation-duration) * 0.6667) ease,
|
||
background-color calc(var(--animation-duration) * 0.6667) ease !important;
|
||
|
||
/* &:hover {
|
||
border-radius: 6px;
|
||
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.3) !important;
|
||
color: var(--color-accent-2) !important;
|
||
|
||
transition:
|
||
border calc(var(--animation-duration) * 0.6667) ease,
|
||
padding calc(var(--animation-duration) * 0.6667) ease,
|
||
padding-left 0s ease,
|
||
margin calc(var(--animation-duration) * 0.6667) ease,
|
||
border-radius calc(var(--animation-duration) * 0.6667),
|
||
box-shadow calc(var(--animation-duration) * 0.6667) ease,
|
||
background-color calc(var(--animation-duration) * 0.6667) ease !important;
|
||
} */
|
||
}
|
||
|
||
.tree-item-self:hover {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
}
|
||
|
||
/* folder none */
|
||
.folder-none .nav-folder-title {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
padding-top: 6px !important;
|
||
padding-bottom: 6px !important;
|
||
margin-bottom: 3px !important;
|
||
box-shadow: none !important;
|
||
border: none;
|
||
}
|
||
|
||
.accented .nav-folder-title {
|
||
--icon-color: var(--color-accent-1);
|
||
--nav-collapse-icon-color: var(--color-accent-1);
|
||
--nav-collapse-icon-color-collapsed: var(--color-accent-1);
|
||
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
padding-top: 6px !important;
|
||
padding-bottom: 6px !important;
|
||
margin-bottom: 6px !important;
|
||
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
background-image: none !important;
|
||
color: var(--color-accent-1) !important;
|
||
box-shadow: none !important;
|
||
border: none;
|
||
|
||
transition:
|
||
border calc(var(--animation-duration) * 0.6667) ease,
|
||
padding calc(var(--animation-duration) * 0.6667) ease,
|
||
padding-left 0s ease,
|
||
margin calc(var(--animation-duration) * 0.6667) ease,
|
||
border-radius calc(var(--animation-duration) * 0.6667),
|
||
box-shadow calc(var(--animation-duration) * 0.6667) ease,
|
||
background-color calc(var(--animation-duration) * 0.6667) ease !important;
|
||
|
||
&:hover {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.3) !important;
|
||
color: var(--color-accent-2) !important;
|
||
|
||
transition:
|
||
border calc(var(--animation-duration) * 0.6667) ease,
|
||
padding calc(var(--animation-duration) * 0.6667) ease,
|
||
padding-left 0s ease,
|
||
margin calc(var(--animation-duration) * 0.6667) ease,
|
||
border-radius calc(var(--animation-duration) * 0.6667),
|
||
box-shadow calc(var(--animation-duration) * 0.6667) ease,
|
||
background-color calc(var(--animation-duration) * 0.6667) ease !important;
|
||
}
|
||
}
|
||
|
||
.mechanical .nav-folder-title {
|
||
--icon-color: var(--text-normal) !important;
|
||
--nav-collapse-icon-color: var(--text-normal);
|
||
--nav-collapse-icon-color-collapsed: var(--text-normal);
|
||
|
||
border-radius: var(--nav-folder-radius);
|
||
padding-top: 6px !important;
|
||
padding-bottom: 6px !important;
|
||
margin-bottom: 6px !important;
|
||
|
||
background-color: var(--background-primary-alt);
|
||
background-image: linear-gradient(
|
||
180deg,
|
||
var(--background-primary-alt),
|
||
var(--background-secondary-alt)
|
||
) !important;
|
||
color: var(--text-normal) !important;
|
||
border: 2px solid var(--background-modifier-border);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.huge .nav-folder-title {
|
||
--icon-color: var(--color-accent-1);
|
||
--nav-collapse-icon-color: var(--color-accent-1);
|
||
--nav-collapse-icon-color-collapsed: var(--color-accent-1);
|
||
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
padding-top: 20px !important;
|
||
padding-bottom: 20px !important;
|
||
margin-bottom: 6px !important;
|
||
padding-left: 40px !important;
|
||
|
||
background-color: var(--background-secondary-alt);
|
||
/* background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
background-image: none !important;
|
||
color: var(--color-accent-1) !important; */
|
||
box-shadow: none !important;
|
||
border: none;
|
||
}
|
||
|
||
.thick .nav-folder-title {
|
||
--icon-color: var(--color-accent-1);
|
||
--nav-collapse-icon-color: var(--color-accent-1);
|
||
--nav-collapse-icon-color-collapsed: var(--color-accent-1);
|
||
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
padding-top: 10px !important;
|
||
padding-bottom: 10px !important;
|
||
padding-left: 30px !important;
|
||
margin-bottom: 6px !important;
|
||
|
||
background-color: var(--background-secondary-alt);
|
||
/* background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
background-image: none !important;
|
||
color: var(--color-accent-1) !important; */
|
||
box-shadow: none !important;
|
||
border: none;
|
||
}
|
||
|
||
/* .tree-item-self .tree-item-icon {
|
||
--icon-color:
|
||
--nav-collapse-icon-color:
|
||
--nav-collapse-icon-color-collapsed:
|
||
} */
|
||
|
||
.svg-icon.help {
|
||
/* todo: remember to add a toggle for this */
|
||
display: none !important;
|
||
}
|
||
|
||
/* body .nav-file-title.is-active:hover, body .nav-folder-title.is-active:hover, .nav-file-title.is-active, .nav-folder-title.is-active {
|
||
text-align: center !important;
|
||
} */
|
||
|
||
/* style setting color picker */
|
||
.pickr .pcr-button::after,
|
||
.pickr .pcr-button::before,
|
||
.pickr,
|
||
button.pcr-button {
|
||
border-radius: 50%;
|
||
border: none !important;
|
||
}
|
||
|
||
.button-bordered .pickr button {
|
||
border: none !important;
|
||
background-color: none !important;
|
||
background: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.pcr-app {
|
||
background: var(--background-primary);
|
||
border: 3px solid var(--background-modifier-border);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.pcr-palette,
|
||
.pcr-palette::before,
|
||
.pcr-palette::after {
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
.pcr-result {
|
||
background-color: var(--background-modifier-form-field) !important;
|
||
}
|
||
|
||
.pcr-swatches button {
|
||
border-radius: 50% !important;
|
||
}
|
||
|
||
/* --- style settings --- */
|
||
.style-settings-heading {
|
||
border-radius: var(--setting-items-radius);
|
||
background-color: var(--background-primary-alt);
|
||
padding: 10px 20px !important;
|
||
border: 2px solid var(--background-modifier-border);
|
||
margin: 16px 0px !important;
|
||
box-shadow: 0px 2px 4px var(--background-modifier-border);
|
||
transition: all 0.2s ease !important;
|
||
filter: brightness(1.3);
|
||
}
|
||
|
||
.style-settings-heading.is-collapsed {
|
||
padding: 8px 20px !important;
|
||
box-shadow: 0px 2px 2px var(--background-modifier-border);
|
||
filter: brightness(1);
|
||
}
|
||
|
||
/* center h1 heading */
|
||
.setting-item-heading[data-level="1"] .setting-item-name {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
white-space: nowrap;
|
||
padding-top: 0 !important;
|
||
}
|
||
|
||
/* Level 2 */
|
||
.setting-item-heading[data-level="2"] {
|
||
background-color: var(--background-secondary) !important;
|
||
/* border-left: 6px solid var(--interactive-accent) !important; */
|
||
border-radius: 10px !important;
|
||
padding: 8px 16px !important;
|
||
margin-left: 16px !important;
|
||
width: calc(100% - 16px) !important;
|
||
filter: brightness(1) !important;
|
||
}
|
||
|
||
/* heading pretext */
|
||
.setting-item-heading .setting-item-name::before {
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.setting-item-heading[data-level="1"] .setting-item-name::before {
|
||
content: "#1 ";
|
||
color: var(--color-red);
|
||
}
|
||
|
||
.setting-item-heading[data-level="2"] .setting-item-name::before {
|
||
content: "#2 ";
|
||
color: var(--color-orange);
|
||
}
|
||
|
||
.setting-item-heading[data-level="3"] .setting-item-name::before {
|
||
content: "#3 ";
|
||
color: var(--color-yellow);
|
||
}
|
||
|
||
.setting-item-heading[data-level="4"] .setting-item-name::before {
|
||
content: "#4 ";
|
||
color: var(--color-green);
|
||
}
|
||
|
||
.setting-item-heading[data-level="5"] .setting-item-name::before {
|
||
content: "#5 ";
|
||
color: var(--color-blue);
|
||
}
|
||
|
||
/* hide arrow */
|
||
.setting-item-heading[data-level="1"] .style-settings-collapse-indicator,
|
||
.setting-item-heading[data-level="2"] .style-settings-collapse-indicator,
|
||
.setting-item-heading[data-level="3"] .style-settings-collapse-indicator,
|
||
.setting-item-heading[data-level="4"] .style-settings-collapse-indicator,
|
||
.setting-item-heading[data-level="5"] .style-settings-collapse-indicator {
|
||
display: none;
|
||
}
|
||
/* Level 3 */
|
||
.setting-item-heading[data-level="3"] {
|
||
background-color: var(--background-primary) !important;
|
||
border-bottom: 2px dotted var(--background-modifier-border) !important;
|
||
border-radius: 8px !important;
|
||
padding: 6px 12px !important;
|
||
margin-left: 32px !important;
|
||
width: calc(100% - 32px) !important;
|
||
font-size: 0.9em !important;
|
||
filter: brightness(1) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Level 4 */
|
||
.setting-item-heading[data-level="4"] {
|
||
background: transparent !important;
|
||
border: none !important;
|
||
padding: 4px 8px !important;
|
||
margin-left: 48px !important;
|
||
width: calc(100% - 48px) !important;
|
||
font-size: 0.85em !important;
|
||
font-weight: normal !important;
|
||
box-shadow: none !important;
|
||
filter: brightness(1) !important;
|
||
}
|
||
|
||
/* Level 5 */
|
||
.setting-item-heading[data-level="5"] {
|
||
background: transparent !important;
|
||
border: none !important;
|
||
padding: 2px 4px !important;
|
||
margin-left: 64px !important;
|
||
width: calc(100% - 64px) !important;
|
||
font-size: 0.8em !important;
|
||
font-weight: lighter !important;
|
||
opacity: 0.8 !important;
|
||
box-shadow: none !important;
|
||
filter: brightness(1) !important;
|
||
}
|
||
|
||
/* ===== FOLDER STYLES =====
|
||
Accent Dot — folder-dot-accent
|
||
Rainbow Dot — folder-dot-rainbow
|
||
Accent Frame — folder-frame-accent
|
||
Rainbow Frame — folder-frame-rainbow
|
||
Accent Subtle — folder-subtle-accent
|
||
Rainbow Subtle — folder-subtle-rainbow
|
||
Accent Solid — folder-solid-accent
|
||
Rainbow Solid — folder-solid-rainbow
|
||
Accent Gradient — folder-gradient-hue
|
||
*/
|
||
|
||
|
||
|
||
/* ── Rainbow: assign --folder-color per nth-child ── */
|
||
body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+2) { --folder-color: var(--color-red); --folder-color-rgb: var(--color-red-rgb); }
|
||
body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+3) { --folder-color: var(--color-orange); --folder-color-rgb: var(--color-orange-rgb); }
|
||
body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+4) { --folder-color: var(--color-yellow); --folder-color-rgb: var(--color-yellow-rgb); }
|
||
body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+5) { --folder-color: var(--color-green); --folder-color-rgb: var(--color-green-rgb); }
|
||
body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+6) { --folder-color: var(--color-cyan); --folder-color-rgb: var(--color-cyan-rgb); }
|
||
body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+7) { --folder-color: var(--color-blue); --folder-color-rgb: var(--color-blue-rgb); }
|
||
body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+8) { --folder-color: var(--color-purple); --folder-color-rgb: var(--color-purple-rgb); }
|
||
body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+9) { --folder-color: var(--color-pink); --folder-color-rgb: var(--color-pink-rgb); }
|
||
|
||
/* ── Shared: reset blobob's accent background on nav-folder-title for all folder styles ── */
|
||
body:is(.folder-dot-accent, .folder-dot-rainbow,
|
||
.folder-frame-accent, .folder-frame-rainbow,
|
||
.folder-subtle-accent, .folder-subtle-rainbow,
|
||
.folder-solid-accent, .folder-solid-rainbow,
|
||
.folder-gradient-hue)
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
background-color: transparent !important;
|
||
background-image: none !important;
|
||
}
|
||
|
||
/* ── Shared: hide the SVG chevron for dot styles ── */
|
||
body:is(.folder-dot-accent, .folder-dot-rainbow)
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon svg {
|
||
display: none;
|
||
}
|
||
|
||
/* ── Shared: dot pseudo-element base ── */
|
||
body:is(.folder-dot-accent, .folder-dot-rainbow)
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon::before {
|
||
display: block;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
content: "";
|
||
}
|
||
|
||
/* ── ACCENT DOT ── */
|
||
body.folder-dot-accent
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon::before {
|
||
background-color: var(--color-accent);
|
||
}
|
||
body.folder-dot-accent
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
color: var(--color-accent) !important;
|
||
--nav-collapse-icon-color: var(--color-accent);
|
||
--icon-color: var(--color-accent);
|
||
}
|
||
|
||
/* ── RAINBOW DOT ── */
|
||
body.folder-dot-rainbow
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon::before {
|
||
background-color: var(--folder-color, var(--text-muted));
|
||
}
|
||
body.folder-dot-rainbow
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
background-color: rgba(var(--folder-color-rgb, var(--color-red-rgb)), 0.15) !important;
|
||
color: var(--folder-color, var(--text-normal)) !important;
|
||
--nav-collapse-icon-color: var(--folder-color, var(--text-muted));
|
||
--icon-color: var(--folder-color, var(--text-muted));
|
||
}
|
||
|
||
/* ── ACCENT FRAME ── */
|
||
body.folder-frame-accent
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.1) !important;
|
||
border: 2px solid var(--color-accent) !important;
|
||
color: var(--color-accent) !important;
|
||
--nav-collapse-icon-color: var(--color-accent);
|
||
--icon-color: var(--color-accent);
|
||
}
|
||
|
||
/* ── RAINBOW FRAME ── */
|
||
body.folder-frame-rainbow
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
background-color: rgba(var(--folder-color-rgb, var(--color-red-rgb)), 0.1) !important;
|
||
border: 2px solid var(--folder-color, var(--text-muted)) !important;
|
||
color: var(--folder-color, var(--text-normal)) !important;
|
||
--nav-collapse-icon-color: var(--folder-color, var(--text-muted));
|
||
--icon-color: var(--folder-color, var(--text-muted));
|
||
}
|
||
|
||
/* ── ACCENT SUBTLE ── */
|
||
body.folder-subtle-accent
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
color: var(--color-accent) !important;
|
||
--nav-collapse-icon-color: var(--color-accent);
|
||
--icon-color: var(--color-accent);
|
||
}
|
||
|
||
/* ── RAINBOW SUBTLE ── */
|
||
body.folder-subtle-rainbow
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
background-color: rgba(var(--folder-color-rgb, var(--color-red-rgb)), 0.2) !important;
|
||
color: var(--folder-color, var(--text-normal)) !important;
|
||
--nav-collapse-icon-color: var(--folder-color, var(--text-muted));
|
||
--icon-color: var(--folder-color, var(--text-muted));
|
||
}
|
||
|
||
/* ── ACCENT SOLID ── */
|
||
body.folder-solid-accent
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
background-color: var(--color-accent) !important;
|
||
color: var(--text-on-accent) !important;
|
||
--nav-collapse-icon-color: var(--text-on-accent);
|
||
--icon-color: var(--text-on-accent);
|
||
}
|
||
|
||
/* ── RAINBOW SOLID ── */
|
||
body.folder-solid-rainbow
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
background-color: var(--folder-color, var(--text-muted)) !important;
|
||
color: white !important;
|
||
--nav-collapse-icon-color: white;
|
||
--icon-color: white;
|
||
}
|
||
|
||
/* ── ACCENT GRADIENT WITH LINEAR ANIMATION ── */
|
||
body.folder-gradient-hue .nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
transition: all 0.3s ease !important;
|
||
animation: colorShift 8s linear infinite !important;
|
||
}
|
||
|
||
/* Keyframes for smooth color shifting */
|
||
@keyframes colorShift {
|
||
0% {
|
||
filter: hue-rotate(0deg);
|
||
}
|
||
100% {
|
||
filter: hue-rotate(360deg);
|
||
}
|
||
}
|
||
|
||
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+2) > .nav-folder-title {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.24) !important;
|
||
color: hsla(var(--interactive-accent-hsl), 1) !important;
|
||
--icon-color: hsla(var(--interactive-accent-hsl), 1) !important;
|
||
--nav-collapse-icon-color: hsla(var(--interactive-accent-hsl), 1) !important;
|
||
--nav-collapse-icon-color-collapsed: hsla(var(--interactive-accent-hsl), 1) !important;
|
||
}
|
||
|
||
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+3) > .nav-folder-title {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.21) !important;
|
||
color: hsla(var(--interactive-accent-hsl), 0.9) !important;
|
||
--icon-color: hsla(var(--interactive-accent-hsl), 0.9) !important;
|
||
--nav-collapse-icon-color: hsla(var(--interactive-accent-hsl), 0.9) !important;
|
||
--nav-collapse-icon-color-collapsed: hsla(var(--interactive-accent-hsl), 0.9) !important;
|
||
}
|
||
|
||
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+4) > .nav-folder-title {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.19) !important;
|
||
color: hsla(var(--interactive-accent-hsl), 0.85) !important;
|
||
--icon-color: hsla(var(--interactive-accent-hsl), 0.85) !important;
|
||
--nav-collapse-icon-color: hsla(var(--interactive-accent-hsl), 0.85) !important;
|
||
--nav-collapse-icon-color-collapsed: hsla(var(--interactive-accent-hsl), 0.85) !important;
|
||
}
|
||
|
||
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+5) > .nav-folder-title {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.17) !important;
|
||
color: hsla(var(--interactive-accent-hsl), 0.8) !important;
|
||
--icon-color: hsla(var(--interactive-accent-hsl), 0.8) !important;
|
||
--nav-collapse-icon-color: hsla(var(--interactive-accent-hsl), 0.8) !important;
|
||
--nav-collapse-icon-color-collapsed: hsla(var(--interactive-accent-hsl), 0.8) !important;
|
||
}
|
||
|
||
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+6) > .nav-folder-title {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.15) !important;
|
||
color: hsla(var(--interactive-accent-hsl), 0.75) !important;
|
||
--icon-color: hsla(var(--interactive-accent-hsl), 0.75) !important;
|
||
--nav-collapse-icon-color: hsla(var(--interactive-accent-hsl), 0.75) !important;
|
||
--nav-collapse-icon-color-collapsed: hsla(var(--interactive-accent-hsl), 0.75) !important;
|
||
}
|
||
|
||
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+7) > .nav-folder-title {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.13) !important;
|
||
color: hsla(var(--interactive-accent-hsl), 0.7) !important;
|
||
--icon-color: hsla(var(--interactive-accent-hsl), 0.7) !important;
|
||
--nav-collapse-icon-color: hsla(var(--interactive-accent-hsl), 0.7) !important;
|
||
--nav-collapse-icon-color-collapsed: hsla(var(--interactive-accent-hsl), 0.7) !important;
|
||
}
|
||
|
||
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+8) > .nav-folder-title {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.11) !important;
|
||
color: hsla(var(--interactive-accent-hsl), 0.65) !important;
|
||
--icon-color: hsla(var(--interactive-accent-hsl), 0.65) !important;
|
||
--nav-collapse-icon-color: hsla(var(--interactive-accent-hsl), 0.65) !important;
|
||
--nav-collapse-icon-color-collapsed: hsla(var(--interactive-accent-hsl), 0.65) !important;
|
||
}
|
||
|
||
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+9) > .nav-folder-title {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.09) !important;
|
||
color: hsla(var(--interactive-accent-hsl), 0.6) !important;
|
||
--icon-color: hsla(var(--interactive-accent-hsl), 0.6) !important;
|
||
--nav-collapse-icon-color: hsla(var(--interactive-accent-hsl), 0.6) !important;
|
||
--nav-collapse-icon-color-collapsed: hsla(var(--interactive-accent-hsl), 0.6) !important;
|
||
}
|
||
|
||
/* ── Bouncy Folders toggle ── */
|
||
body.bouncy-folders .nav-folder-title {
|
||
transition:
|
||
border calc(var(--animation-duration) * 0.6667) ease,
|
||
padding calc(var(--animation-duration) * 0.6667) ease-out,
|
||
padding-left 0s ease,
|
||
margin calc(var(--animation-duration) * 0.6667) ease,
|
||
border-radius calc(var(--animation-duration) * 0.6667),
|
||
box-shadow calc(var(--animation-duration) * 0.6667) ease !important;
|
||
|
||
&:hover {
|
||
padding-top: 10px !important;
|
||
padding-bottom: 10px !important;
|
||
transition:
|
||
border calc(var(--animation-duration) * 0.6667) ease,
|
||
padding calc(var(--animation-duration) * 0.6667) cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||
padding-left 0s ease,
|
||
margin calc(var(--animation-duration) * 0.6667) ease,
|
||
border-radius calc(var(--animation-duration) * 0.6667),
|
||
box-shadow calc(var(--animation-duration) * 0.6667) ease !important;
|
||
}
|
||
|
||
&:active {
|
||
padding-top: 4px !important;
|
||
padding-bottom: 4px !important;
|
||
}
|
||
}
|
||
|
||
/* ===== HIDE SIDEBAR TOGGLE BUTTONS ===== */
|
||
|
||
body.hide-sidebar-toggle-left .sidebar-toggle-button.mod-left {
|
||
display: none !important;
|
||
}
|
||
|
||
body.hide-sidebar-toggle-right .sidebar-toggle-button.mod-right {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ===== BOLD FOLDER NAMES ===== */
|
||
|
||
body.bold-folders .nav-folder-title {
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
/* ===== ACTIVE FILE STYLING FIX ===== */
|
||
|
||
/* Ensure nav-file-title.is-active has clear, visible styling */
|
||
body .nav-file-title.is-active,
|
||
body .nav-file-title.is-active:hover {
|
||
color: var(--color-accent-1) !important;
|
||
font-weight: 600 !important;
|
||
padding: 6px;
|
||
transition: font-weight 0.2s ease;
|
||
}
|
||
|
||
body .nav-file-title,
|
||
body .nav-file-title:hover {
|
||
padding: 6px;
|
||
transition: font-weight 0.2s ease;
|
||
}
|
||
|
||
/* Fix: active file background should not bleed through folder title overrides */
|
||
.nav-file-title.is-active {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
border-radius: var(--nav-file-radius) !important;
|
||
color: var(--color-accent-1) !important;
|
||
}
|
||
|
||
.nav-file-title.is-active:hover {
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.3) !important;
|
||
color: var(--color-accent-2) !important;
|
||
}
|
||
|
||
/* ===== TAB STYLE — LEFT TOP ===== */
|
||
|
||
/* Labels Only */
|
||
body.tab-top-left-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space {
|
||
--sidebar-tab-text-display: inline-block;
|
||
}
|
||
body.tab-top-left-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner-icon {
|
||
display: none;
|
||
}
|
||
body.tab-top-left-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner-title {
|
||
display: inline-block !important;
|
||
}
|
||
body.tab-top-left-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner {
|
||
width: auto !important;
|
||
}
|
||
|
||
/* Icons + Labels */
|
||
body.tab-top-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space {
|
||
--sidebar-tab-text-display: inline-block;
|
||
}
|
||
body.tab-top-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner-title {
|
||
display: inline-block !important;
|
||
}
|
||
body.tab-top-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner {
|
||
width: auto !important;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Icons Only */
|
||
body.tab-top-left-icons .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner-title {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ===== TAB STYLE — RIGHT TOP ===== */
|
||
|
||
/* Labels Only */
|
||
body.tab-top-right-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space {
|
||
--sidebar-tab-text-display: inline-block;
|
||
}
|
||
body.tab-top-right-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner-icon {
|
||
display: none;
|
||
}
|
||
body.tab-top-right-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner-title {
|
||
display: inline-block !important;
|
||
}
|
||
body.tab-top-right-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner {
|
||
width: auto !important;
|
||
}
|
||
|
||
/* Icons + Labels */
|
||
body.tab-top-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space {
|
||
--sidebar-tab-text-display: inline-block;
|
||
}
|
||
body.tab-top-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner-title {
|
||
display: inline-block !important;
|
||
}
|
||
body.tab-top-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner {
|
||
width: auto !important;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Icons Only */
|
||
body.tab-top-right-icons .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner-title {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ===== TAB STYLE — LEFT (bottom) ===== */
|
||
|
||
/* Labels Only */
|
||
body.tab-left-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) {
|
||
--sidebar-tab-text-display: inline-block;
|
||
}
|
||
body.tab-left-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-icon {
|
||
display: none;
|
||
}
|
||
body.tab-left-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
|
||
display: inline-block !important;
|
||
}
|
||
body.tab-left-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner {
|
||
width: auto !important;
|
||
}
|
||
|
||
/* Icons + Labels */
|
||
body.tab-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) {
|
||
--sidebar-tab-text-display: inline-block;
|
||
}
|
||
body.tab-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
|
||
display: inline-block !important;
|
||
}
|
||
body.tab-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner {
|
||
width: auto !important;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Icons Only */
|
||
body.tab-left-icons .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ===== TAB STYLE — RIGHT (bottom) ===== */
|
||
|
||
/* Labels Only */
|
||
body.tab-right-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) {
|
||
--sidebar-tab-text-display: inline-block;
|
||
}
|
||
body.tab-right-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-icon {
|
||
display: none;
|
||
}
|
||
body.tab-right-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
|
||
display: inline-block !important;
|
||
}
|
||
body.tab-right-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner {
|
||
width: auto !important;
|
||
}
|
||
|
||
/* Icons + Labels */
|
||
body.tab-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) {
|
||
--sidebar-tab-text-display: inline-block;
|
||
}
|
||
body.tab-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
|
||
display: inline-block !important;
|
||
}
|
||
body.tab-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner {
|
||
width: auto !important;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Icons Only */
|
||
body.tab-right-icons .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ===== PROPERTIES ====== */
|
||
|
||
/* ------------------------------------------- */
|
||
|
||
/* sidebar file properties UNcustomization */
|
||
.workspace-leaf-content[data-type="file-properties"] .metadata-container {
|
||
.metadata-content {
|
||
background-color: var(--background-secondary) !important;
|
||
/* border-radius: var(--button-radius); */
|
||
}
|
||
}
|
||
|
||
/* ===== RESET FOR FILE PROPERTIES WORKSPACE ===== */
|
||
.workspace-leaf-content[data-type="file-properties"] .metadata-container {
|
||
/* Reset all the custom styles */
|
||
background-color: var(--background-primary) !important;
|
||
border: none !important;
|
||
border-radius: 0 !important;
|
||
box-shadow: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
transform: none !important;
|
||
opacity: 1 !important;
|
||
animation: none !important;
|
||
transition: none !important;
|
||
width: auto !important;
|
||
justify-content: normal !important;
|
||
}
|
||
|
||
.workspace-leaf-content[data-type="file-properties"] .metadata-property-value {
|
||
padding-bottom: 10px !important;
|
||
/* border-bottom: 0px !important; */
|
||
}
|
||
|
||
/* Reset any specific property styles for file properties workspace */
|
||
.workspace-leaf-content[data-type="file-properties"]
|
||
.properties-1
|
||
.metadata-container,
|
||
.workspace-leaf-content[data-type="file-properties"]
|
||
.properties-2
|
||
.metadata-container,
|
||
.workspace-leaf-content[data-type="file-properties"]
|
||
.properties-3
|
||
.metadata-container,
|
||
.workspace-leaf-content[data-type="file-properties"]
|
||
.properties-4
|
||
.metadata-container,
|
||
.workspace-leaf-content[data-type="file-properties"]
|
||
.properties-5
|
||
.metadata-container {
|
||
background-color: var(--background-primary) !important;
|
||
border: none !important;
|
||
border-radius: 0 !important;
|
||
box-shadow: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
transform: none !important;
|
||
opacity: 1 !important;
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
/* Reset heading styles */
|
||
.workspace-leaf-content[data-type="file-properties"]
|
||
.metadata-properties-heading {
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
justify-content: normal !important;
|
||
text-align: left !important;
|
||
}
|
||
|
||
/* Reset content styles */
|
||
.workspace-leaf-content[data-type="file-properties"] .metadata-content {
|
||
padding: 0 !important;
|
||
transform: none !important;
|
||
opacity: 1 !important;
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
/* Reset animations */
|
||
.workspace-leaf-content[data-type="file-properties"]
|
||
.metadata-container
|
||
.metadata-content,
|
||
.workspace-leaf-content[data-type="file-properties"]
|
||
.metadata-container.is-collapsed
|
||
.metadata-content,
|
||
.workspace-leaf-content[data-type="file-properties"]
|
||
.metadata-container:not(.is-collapsed)
|
||
.metadata-content {
|
||
transform: none !important;
|
||
opacity: 1 !important;
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
/* ------------------------------ */
|
||
|
||
/* = dim unless hovered = */
|
||
.dim-properties .metadata-container {
|
||
opacity: 0.6 !important;
|
||
transition: opacity calc(var(--animation-duration) * 1) ease !important;
|
||
}
|
||
|
||
.dim-properties .metadata-container:hover {
|
||
opacity: 1 !important;
|
||
transition: opacity calc(var(--animation-duration) * 1) ease !important;
|
||
}
|
||
|
||
/* 1 */
|
||
.properties-1 .metadata-container {
|
||
border: 2px solid var(--text-faint) !important;
|
||
border-radius: 20px;
|
||
--input-height: var(--metadata-input-height);
|
||
background-color: var(--background-secondary-alt);
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
box-shadow: 0px 3px 0px 0px var(--text-faint);
|
||
}
|
||
|
||
.properties-1 .metadata-properties-heading {
|
||
border-bottom: 2px solid var(--text-faint) !important;
|
||
width: 100%;
|
||
padding: 0.5em 1.4em;
|
||
padding-bottom: 16px;
|
||
transition: border-bottom 0s ease;
|
||
transition-delay: border-bottom 0.2s;
|
||
}
|
||
|
||
.properties-1 .metadata-content {
|
||
padding: 10px 20px;
|
||
}
|
||
|
||
.properties-1 .metadata-container.is-collapsed .metadata-properties-heading {
|
||
border-bottom: 0px !important;
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
/* 2 */
|
||
.properties-2 .metadata-container {
|
||
border: solid 2px var(--text-faint) !important;
|
||
margin-bottom: 1.3rem;
|
||
padding: 1.4rem 1.5rem;
|
||
border-radius: 20px;
|
||
--input-height: var(--metadata-input-height);
|
||
background-color: var(--background-secondary-alt);
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
box-shadow: 0px 3px 0px 0px var(--text-faint);
|
||
}
|
||
|
||
.properties-2 .metadata-container.is-collapsed {
|
||
padding-top: 0.5em;
|
||
padding-bottom: 0.2em;
|
||
}
|
||
|
||
.properties-2 .metadata-container.is-collapsed .metadata-properties-heading {
|
||
border-bottom: none !important;
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
/* 3 */
|
||
.properties-3 .metadata-container {
|
||
margin-top: -15px;
|
||
margin-bottom: 1.3rem;
|
||
border-radius: 0 0 8px 8px;
|
||
--input-height: var(--metadata-input-height);
|
||
background: var(--background-secondary-alt);
|
||
padding: 1rem;
|
||
width: 100%;
|
||
border-bottom: solid 3.5px var(--color-accent);
|
||
border-top: solid 3.5px var(--color-accent);
|
||
margin-right: 0px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.properties-3 .metadata-container .is-collapsed {
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
/* 4 */
|
||
.properties-4 .metadata-container {
|
||
border-top: solid 3.5px var(--color-accent);
|
||
border: solid 2px var(--text-faint);
|
||
margin-bottom: 1.3rem;
|
||
margin-top: -10px;
|
||
border-radius: 0 0 10px 10px;
|
||
--input-height: var(--metadata-input-height);
|
||
background: var(--background-secondary-alt);
|
||
padding: 1rem 1.3rem;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
box-shadow: 0px 4px 0px 0px var(--text-faint);
|
||
}
|
||
|
||
/* 5 */
|
||
.properties-5 .metadata-container {
|
||
border-bottom: 2px solid var(--text-faint);
|
||
border-top: 2px solid var(--text-faint);
|
||
padding: 20px 20px;
|
||
}
|
||
|
||
/* arrow chevron */
|
||
/* .hide-properties-arrow.properties-1 .collapse-indicator.collapse-icon,
|
||
.hide-properties-arrow.properties-2 .collapse-indicator.collapse-icon,
|
||
.hide-properties-arrow.properties-3 .collapse-indicator.collapse-icon,
|
||
.hide-properties-arrow.properties-4 .collapse-indicator.collapse-icon,
|
||
.hide-properties-arrow.properties-5 .collapse-indicator.collapse-icon {
|
||
opacity: 0 !important;
|
||
} */
|
||
|
||
/* hide properties arrow */
|
||
.hide-properties-arrow
|
||
.metadata-container
|
||
.metadata-properties-heading
|
||
.collapse-indicator.collapse-icon {
|
||
opacity: 0 !important;
|
||
visibility: hidden !important;
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
.hide-properties-arrow
|
||
.metadata-container
|
||
.metadata-properties-heading
|
||
.collapse-indicator.collapse-icon {
|
||
display: none !important;
|
||
}
|
||
|
||
.hide-properties-arrow
|
||
.metadata-container
|
||
.metadata-properties-heading
|
||
.collapse-indicator.collapse-icon
|
||
svg {
|
||
display: none !important;
|
||
}
|
||
|
||
/* MY default behaviour: SHOW ARROW ONLY WHEN HOVERED */
|
||
.metadata-container
|
||
.metadata-properties-heading
|
||
.collapse-indicator.collapse-icon {
|
||
opacity: 0 !important;
|
||
transition: opacity calc(var(--animation-duration) * 0.6667) ease;
|
||
}
|
||
|
||
.metadata-container.is-collapsed
|
||
.metadata-properties-heading:hover
|
||
.collapse-indicator.collapse-icon,
|
||
.metadata-container:not(.is-collapsed)
|
||
.metadata-properties-heading
|
||
.collapse-indicator.collapse-icon {
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* center properties */
|
||
.center-properties-heading.properties-1 .metadata-properties-heading,
|
||
.center-properties-heading.properties-2 .metadata-properties-heading,
|
||
.center-properties-heading.properties-3 .metadata-properties-heading,
|
||
.center-properties-heading.properties-4 .metadata-properties-heading,
|
||
.center-properties-heading.properties-5 .metadata-properties-heading {
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ===== PROPERTIES CONTENTS ANIMATION AHHH ======= */
|
||
|
||
.properties-1 .metadata-container .metadata-content,
|
||
.properties-2 .metadata-container .metadata-content,
|
||
.properties-3 .metadata-container .metadata-content,
|
||
.properties-4 .metadata-container .metadata-content,
|
||
.properties-5 .metadata-container .metadata-content {
|
||
transform-origin: top;
|
||
transition:
|
||
transform calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
opacity calc(var(--animation-duration) * 1.3333) ease;
|
||
}
|
||
|
||
/* Collapsed state */
|
||
.metadata-container.is-collapsed .metadata-content {
|
||
transform: scaleY(0.9);
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Expanded state */
|
||
.metadata-container:not(.is-collapsed) .metadata-content {
|
||
transform: scaleY(1.05);
|
||
opacity: 1;
|
||
transition:
|
||
transform calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
opacity calc(var(--animation-duration) * 1.3333) ease;
|
||
}
|
||
|
||
/* settle back from overshoot */
|
||
.metadata-container:not(.is-collapsed) .metadata-content {
|
||
animation: settle-bounce calc(var(--animation-duration) * 1.3333) forwards;
|
||
}
|
||
|
||
@keyframes settle-bounce {
|
||
0% {
|
||
transform: scaleY(1.05);
|
||
}
|
||
60% {
|
||
transform: scaleY(0.98);
|
||
}
|
||
100% {
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
|
||
/* ======= ANIMATE PROPERTIES CONATINER POOSOSO ===== */
|
||
.properties-1 .metadata-container,
|
||
.properties-2 .metadata-container,
|
||
.properties-3 .metadata-container,
|
||
.properties-4 .metadata-container,
|
||
.properties-5 .metadata-container {
|
||
transform-origin: top;
|
||
transition:
|
||
transform calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
padding calc(var(--animation-duration) * 1.3333) ease,
|
||
opacity calc(var(--animation-duration) * 1.3333) ease;
|
||
}
|
||
|
||
/* Collapsed state */
|
||
.metadata-container.is-collapsed {
|
||
transform: scaleY(1);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* Expanded state */
|
||
.metadata-container:not(.is-collapsed) {
|
||
transform: scaleY(1.15);
|
||
opacity: 1;
|
||
transition: transform calc(var(--animation-duration) * 1.6667) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
animation: settle-container calc(var(--animation-duration) * 1.6667) forwards;
|
||
}
|
||
|
||
/* Bounce back to normal scale */
|
||
@keyframes settle-container {
|
||
0% {
|
||
transform: scaleY(1);
|
||
}
|
||
/* 16% { transform: scaleY(0.9); } */
|
||
40% {
|
||
transform: scaleY(1.025);
|
||
}
|
||
/* 95% { transform: scaleY(0.99); } */
|
||
100% {
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
|
||
/* Closing animation */
|
||
.metadata-container.is-collapsed {
|
||
animation: collapse-bounce calc(var(--animation-duration) * 1.5) cubic-bezier(0.175, 0.885, 0.32, 2)
|
||
forwards;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* Closing bouncey baby */
|
||
@keyframes collapse-bounce {
|
||
0% {
|
||
transform: scaleY(1);
|
||
}
|
||
/* 40% { transform: scaleY(1.06); } */
|
||
60% {
|
||
transform: scaleY(0.94);
|
||
}
|
||
100% {
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
|
||
/* === TAGS === */
|
||
.metadata-property[data-property-key="tags"] .multi-select-pill,
|
||
.metadata-property[data-property-key="cssclasses"] .multi-select-pill {
|
||
transition: all calc(var(--animation-duration) * 0.5) ease;
|
||
}
|
||
|
||
.metadata-property[data-property-key="tags"] .multi-select-pill {
|
||
letter-spacing: 0.08em;
|
||
border-radius: 20px !important;
|
||
padding: 4px 4px !important;
|
||
padding-top: 0.35em !important;
|
||
/* border: 0.15em solid var(--tag-color);
|
||
box-shadow: 0px 1.5px 0px 0px var(--tag-color); */
|
||
/* text-transform: uppercase; */
|
||
letter-spacing: 0.09em;
|
||
font-size: 0.9em;
|
||
background-color: var(--tag-background);
|
||
color: var(--tag-color) !important;
|
||
}
|
||
|
||
.metadata-property[data-property-key="tags"] .multi-select-pill:hover {
|
||
/* border: 0.15em solid var(--tag-color-hover);
|
||
box-shadow: 0px 1.5px 0px 0px var(--tag-color-hover); */
|
||
|
||
background-color: var(--tag-background-hover);
|
||
/* border: 0.2em solid var(--tag-color); */
|
||
/* font-weight: bold; */
|
||
}
|
||
|
||
/* x icon */
|
||
.metadata-property[data-property-key="tags"] .multi-select-pill svg {
|
||
color: var(--tag-color) !important;
|
||
margin: 1px;
|
||
margin-right: 0px;
|
||
}
|
||
|
||
/* ===== CSSCLASSES ===== */
|
||
|
||
/* === CSSCLASSES ONE === */
|
||
.cssclasses-1
|
||
.metadata-property[data-property-key="cssclasses"]
|
||
.multi-select-pill {
|
||
border-radius: 20px !important;
|
||
padding: 4px 12px !important;
|
||
border: 0.15em solid var(--color-accent);
|
||
box-shadow: 0px 1.5px 0px 0px var(--color-accent);
|
||
/* text-transform: uppercase; */
|
||
letter-spacing: 0.09em;
|
||
background-color: transparent;
|
||
color: var(--color-accent-2) !important;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.cssclasses-1
|
||
.metadata-property[data-property-key="cssclasses"]
|
||
.multi-select-pill:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
border: 0.2em solid var(--color-accent-2);
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* x icon */
|
||
.cssclasses-1
|
||
.metadata-property[data-property-key="cssclasses"]
|
||
.multi-select-pill
|
||
svg {
|
||
color: var(--color-accent-2) !important;
|
||
margin: 2px;
|
||
margin-right: 0px;
|
||
}
|
||
|
||
/* === CSSCLASSES TWO === */
|
||
.cssclasses-2
|
||
.metadata-property[data-property-key="cssclasses"]
|
||
.multi-select-pill {
|
||
border-radius: 20px !important;
|
||
padding: 0px 6px !important;
|
||
box-shadow: 0px 0px 0px 1px var(--text-normal);
|
||
/* text-transform: uppercase; */
|
||
letter-spacing: 0.09em;
|
||
background-color: transparent;
|
||
color: var(--text-normal) !important;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
/* x icon */
|
||
.cssclasses-2
|
||
.metadata-property[data-property-key="cssclasses"]
|
||
.multi-select-pill
|
||
svg {
|
||
color: var(--text-normal) !important;
|
||
margin: 2px;
|
||
margin-right: 0px;
|
||
}
|
||
|
||
/* === CSSCLASSES THREE === */
|
||
.cssclasses-3
|
||
.metadata-property[data-property-key="cssclasses"]
|
||
.multi-select-pill {
|
||
padding: 3px 12px !important;
|
||
/* text-transform: uppercase; */
|
||
letter-spacing: 0.09em;
|
||
background-color: rgba(var(--mono-rgb-100), 0.1) !important;
|
||
color: var(--text-normal) !important;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.cssclasses-3
|
||
.metadata-property[data-property-key="cssclasses"]
|
||
.multi-select-pill:hover {
|
||
padding: 3px 12px !important;
|
||
/* text-transform: uppercase; */
|
||
letter-spacing: 0.09em;
|
||
background-color: rgba(var(--mono-rgb-100), 0.2) !important;
|
||
color: var(--text-normal) !important;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
/* x icon */
|
||
.cssclasses-3
|
||
.metadata-property[data-property-key="cssclasses"]
|
||
.multi-select-pill
|
||
svg {
|
||
color: var(--text-normal) !important;
|
||
margin: 2px;
|
||
margin-right: 0px;
|
||
}
|
||
|
||
.workspace-leaf-content[data-type="file-properties"] .metadata-property-value {
|
||
padding: 4px !important;
|
||
}
|
||
|
||
/* bubbletry */
|
||
/* body .workspace-tab-container {
|
||
margin: 14px 10px 14px !important;
|
||
border-radius: 12px;
|
||
border: 2px solid var(--background-modifier-border);
|
||
filter: brightness(1);
|
||
} */
|
||
|
||
.metadata-property,
|
||
.metadata-property-key,
|
||
.metadata-property-value {
|
||
border: none !important;
|
||
}
|
||
|
||
/* property key icon styles: accent color, normal text color, muted color, hidden */
|
||
.mpk-accent-color .metadata-property-key-input {
|
||
border-radius: 20px !important;
|
||
padding: 4px 10px !important;
|
||
letter-spacing: 0.09em;
|
||
background-color: transparent;
|
||
color: var(--color-accent-1) !important;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.mpk-accent-color .metadata-property-icon {
|
||
color: var(--color-accent-1) !important;
|
||
}
|
||
|
||
/* accent-color + hidden */
|
||
.mpk-accent-color-hidden .metadata-property-key-input {
|
||
border-radius: 20px !important;
|
||
letter-spacing: 0.09em;
|
||
background-color: transparent;
|
||
color: var(--color-accent-1) !important;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.mpk-accent-color-hidden .metadata-property-icon {
|
||
color: var(--color-accent-1) !important;
|
||
display: none;
|
||
}
|
||
|
||
/* ? normal */
|
||
.mpk-normal-color .metadata-property-key-input {
|
||
border-radius: 20px !important;
|
||
padding: 4px 12px !important;
|
||
letter-spacing: 0.09em;
|
||
background-color: transparent;
|
||
color: var(--text-normal) !important;
|
||
}
|
||
|
||
.mpk-normal-color .metadata-property-icon {
|
||
color: var(--text-normal) !important;
|
||
}
|
||
|
||
/* ? muted */
|
||
.mpk-muted-color .metadata-property-key-input {
|
||
border-radius: 20px !important;
|
||
padding: 4px 12px !important;
|
||
letter-spacing: 0.09em;
|
||
background-color: transparent;
|
||
color: var(--text-muted) !important;
|
||
}
|
||
|
||
.mpk-key-only .metadata-property-icon {
|
||
color: var(--text-muted) !important;
|
||
}
|
||
|
||
/* ? hidden */
|
||
.mpk-key-only .metadata-property-key-input {
|
||
border-radius: 20px !important;
|
||
padding: 4px 12px !important;
|
||
letter-spacing: 0.09em;
|
||
background-color: transparent;
|
||
color: var(--text-muted) !important;
|
||
}
|
||
|
||
.mpk-key-only .metadata-property-icon {
|
||
color: var(--text-muted) !important;
|
||
display: none !important;
|
||
}
|
||
|
||
/* popover */
|
||
.popover {
|
||
border-radius: var(--button-radius);
|
||
border: 2px solid var(--background-modifier-border-focus)
|
||
}
|
||
|
||
/* ===== NOTICES ===== */
|
||
|
||
.notice {
|
||
background-color: var(--background-primary);
|
||
color: var(--text-accent);
|
||
border: 2px solid var(--background-modifier-border);
|
||
border-radius: var(--button-radius);
|
||
padding: 20px;
|
||
}
|
||
|
||
.notice-message::before {
|
||
content: "Notice: ";
|
||
color: var(--color-red);
|
||
}
|
||
|
||
.notice,
|
||
.notice-container {
|
||
animation: notice-in calc(var(--animation-duration) * 1.1667) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
transform-origin: top center;
|
||
z-index: 2000;
|
||
}
|
||
|
||
@keyframes notice-in {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-8px) scale(0.96);
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
/* ===== CANVAS ===== */
|
||
|
||
.canvas-node[data-shape="pill"] .canvas-node-container {
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.canvas-sharp-cards .canvas-node-container {
|
||
border: 2.5px solid rgb(var(--canvas-color)) !important;
|
||
border-radius: 0px;
|
||
}
|
||
|
||
.canvas-control-group {
|
||
border-radius: 0;
|
||
border-top-left-radius: var(--radius-l) !important;
|
||
border-bottom-left-radius: var(--radius-l) !important;
|
||
margin-right: -8px;
|
||
border: 2px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.canvas-control-item {
|
||
transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
padding: 8px 10px;
|
||
background-color: var(--titlebar-background) !important;
|
||
}
|
||
|
||
.canvas-control-item:hover {
|
||
transform: scale(1.2);
|
||
color: var(--color-accent-1) !important;
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2);
|
||
background-color: var(--background-secondary-alt) !important;
|
||
}
|
||
|
||
.canvas-control-item:active {
|
||
transform: scale(1);
|
||
color: var(--color-accent-1) !important;
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2);
|
||
}
|
||
|
||
.canvas-card-menu-button.mod-draggable:hover {
|
||
transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2) !important;
|
||
transform: scale(1.2) translateY(0) !important;
|
||
}
|
||
|
||
.canvas-card-menu {
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* ===== CANVAS STYLING ===== */
|
||
.theme-light,
|
||
.theme-dark {
|
||
--canvas-color-6: 172, 124, 196;
|
||
--canvas-color-5: 105, 147, 194;
|
||
--canvas-color-4: 87, 147, 100;
|
||
--canvas-color-3: 255, 221, 140;
|
||
--canvas-color-2: 229, 156, 88;
|
||
--canvas-color-1: 215, 97, 76;
|
||
}
|
||
|
||
.canvas-node:not(.is-themed) .canvas-node-container {
|
||
border-color: var(--background-modifier-border) !important;
|
||
}
|
||
|
||
.canvas-edges > g:not(.is-themed) path.canvas-display-path {
|
||
stroke: var(--background-modifier-border) !important;
|
||
}
|
||
|
||
/*.canvas-edges > g:not(.is-themed) marker path {
|
||
fill: var(--background-modifier-border) !important;
|
||
stroke: var(--background-modifier-border) !important;
|
||
}*/
|
||
|
||
body.theme-dark {
|
||
--canvas-color: 62, 70, 83 !important;
|
||
}
|
||
|
||
.canvas-node-container {
|
||
border: 2.5px solid rgb(var(--canvas-color)) !important;
|
||
border-radius: var(--button-radius);
|
||
}
|
||
|
||
.canvas-node-content.markdown-embed
|
||
> .markdown-embed-content
|
||
> .markdown-preview-view {
|
||
font-size: 1.5em !important;
|
||
}
|
||
|
||
.canvas-node.is-themed .canvas-node-content {
|
||
background-color: rgba(var(--canvas-color), 0.26) !important;
|
||
}
|
||
|
||
/* ===== CALLOUTS ===== */
|
||
|
||
li.task-list-item {
|
||
display: flex;
|
||
/* this flex fixes a visual issue for checkboxes in callouts */
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
li.task-list-item .always-color-text-highlight {
|
||
margin-inline-start: 2px;
|
||
}
|
||
|
||
.callout {
|
||
--callout-border-width: 3px;
|
||
--callout-radius: 12px;
|
||
--callout-padding: 0px;
|
||
border: var(--callout-border-width) solid
|
||
rgba(var(--callout-color), var(--callout-border-opacity));
|
||
border-radius: var(--callout-radius);
|
||
margin: 1em 0;
|
||
mix-blend-mode: var(--callout-blend-mode);
|
||
background-color: rgba(var(--callout-color), 0.1);
|
||
padding: var(--callout-padding);
|
||
}
|
||
|
||
.callout-title {
|
||
--callout-title-padding: 10px 14px;
|
||
padding: var(--callout-title-padding);
|
||
display: flex;
|
||
gap: var(--size-4-1);
|
||
font-size: var(--callout-title-size);
|
||
color: rgb(var(--callout-color));
|
||
line-height: var(--line-height-tight);
|
||
align-items: flex-start;
|
||
border-bottom: 2px solid
|
||
rgba(var(--callout-color), var(--callout-border-opacity));
|
||
transition: border-bottom-width calc(var(--animation-duration) * 0.3333) ease;
|
||
}
|
||
|
||
.callout.is-collapsed > .callout-title {
|
||
border-bottom-width: 0;
|
||
transition-delay: 0.1s;
|
||
}
|
||
|
||
.callout-content {
|
||
padding-inline-start: 24px;
|
||
padding-inline-end: 24px;
|
||
}
|
||
|
||
.callout-content img {
|
||
border-radius: var(--radius-m);
|
||
margin: 6px 0px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.callout-content table {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ===== CALLOUT ANIMATION ===== */
|
||
|
||
.callout {
|
||
transform-origin: top;
|
||
transition:
|
||
transform calc(var(--animation-duration) * 1.5) cubic-bezier(0.175, 0.885, 0.32, 2.2),
|
||
max-height calc(var(--animation-duration) * 1.5) ease,
|
||
padding calc(var(--animation-duration) * 1) ease,
|
||
opacity calc(var(--animation-duration) * 1) ease;
|
||
overflow: hidden;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* OPEN STATE */
|
||
.callout:not(.is-collapsed) {
|
||
transform: scaleY(1);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* CLOSE STATE */
|
||
.callout.is-collapsed {
|
||
transform: scaleY(0.95);
|
||
opacity: 1;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/* OPEN SETTLE */
|
||
@keyframes callout-open-settle {
|
||
0% {
|
||
transform: scaleY(0.9);
|
||
}
|
||
60% {
|
||
transform: scaleY(1.03);
|
||
}
|
||
100% {
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
|
||
/* CLOSE BOUNCE */
|
||
@keyframes callout-close-bounce {
|
||
0% {
|
||
transform: scaleY(1);
|
||
}
|
||
40% {
|
||
transform: scaleY(1.05);
|
||
}
|
||
100% {
|
||
transform: scaleY(0.95);
|
||
}
|
||
}
|
||
|
||
.callout-title {
|
||
transition: border-bottom-width calc(var(--animation-duration) * 0.5) ease;
|
||
gap: 10px;
|
||
}
|
||
|
||
.callout.is-collapsed > .callout-title {
|
||
border-bottom-width: 0;
|
||
}
|
||
|
||
:root {
|
||
--link-decoration: none;
|
||
--link-color: var(--color-accent-2);
|
||
}
|
||
|
||
/* ==== LINKS ==== */
|
||
a {
|
||
/* color: var(--link-color) !important; */
|
||
/* background-color: hsla(var(--interactive-accent-hsl), 0.2) !important; */
|
||
font-weight: var(--link-weight);
|
||
outline: none;
|
||
text-decoration: none !important;
|
||
/* padding: 2px 6px; */
|
||
border-radius: 6px !important;
|
||
padding: 2px 5px;
|
||
}
|
||
|
||
.cm-s-obsidian span.cm-underline, .markdown-preview-view u, u {
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
/* === External Links === */
|
||
|
||
/* === Reading Mode === */
|
||
a.external-link {
|
||
background-color: transparent !important;
|
||
color: var(--text-normal) !important;
|
||
text-decoration: underline !important;
|
||
text-decoration-thickness: 1px !important;
|
||
text-underline-offset: 2px !important;
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease !important;
|
||
padding: 2px 0px !important;
|
||
}
|
||
|
||
a.external-link:hover {
|
||
text-decoration-thickness: 2px !important;
|
||
background-color: var(--background-secondary-alt) !important;
|
||
border-radius: 8px !important;
|
||
font-weight: 600 !important;
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease !important;
|
||
padding: 2px 6px !important;
|
||
}
|
||
|
||
.external-link {
|
||
/* hide gogo icon */
|
||
/* display: none !important; */
|
||
background-color: transparent !important;
|
||
text-decoration: underline !important;
|
||
color: var(--color-accent) !important;
|
||
background-image: none;
|
||
margin-right: 0px;
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease !important;
|
||
padding: 2px 0px !important;
|
||
}
|
||
|
||
.external-link:hover {
|
||
background-color: var(--background-secondary-alt) !important;
|
||
margin-right: 0px;
|
||
transition: all calc(var(--animation-duration) * 0.6667) ease !important;
|
||
padding: 2px 0px !important;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-link .cm-underline,
|
||
.markdown-source-view.mod-cm6 .cm-url .cm-underline {
|
||
background-color: transparent !important;
|
||
text-decoration: underline !important;
|
||
color: var(--text-normal) !important;
|
||
transition: all calc(var(--animation-duration) * 0.5) ease !important;
|
||
padding: 2px 0px !important;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-link .cm-underline:hover,
|
||
.markdown-source-view.mod-cm6 .cm-url .cm-underline:hover {
|
||
background-color: var(--background-secondary-alt) !important;
|
||
text-decoration-thickness: 2px !important;
|
||
border-radius: 8px !important;
|
||
transition: all calc(var(--animation-duration) * 0.5) ease !important;
|
||
padding: 2px 6px !important;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
|
||
.markdown-rendered .internal-link {
|
||
color: var(--link-color) !important;
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
border-radius: 6px;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
transition: background-color calc(var(--animation-duration) * 1.6667) ease;
|
||
box-decoration-break: clone;
|
||
|
||
&:hover {
|
||
color: var(--link-color);
|
||
}
|
||
}
|
||
|
||
/* ===== CODEBLOCKS ===== */
|
||
|
||
.markdown-rendered pre {
|
||
position: relative;
|
||
padding: var(--size-4-3) var(--size-4-4);
|
||
min-height: 38px;
|
||
background-color: var(--code-background);
|
||
border-radius: var(--code-radius);
|
||
white-space: var(--code-white-space);
|
||
border: var(--code-border-width) solid var(--code-border-color);
|
||
overflow-x: auto;
|
||
border: 3px solid var(--background-modifier-border) !important;
|
||
}
|
||
|
||
.markdown-rendered code {
|
||
background-color: var(--code-background) !important;
|
||
}
|
||
|
||
/* === EMBEDS ==== */
|
||
.inline-embed > .markdown-embed-content > .markdown-source-view,
|
||
.inline-embed > .markdown-embed-content > .markdown-preview-view {
|
||
background-color: var(--background-primary);
|
||
border: 2px solid var(--interactive-accent) !important;
|
||
padding: 20px 0 !important;
|
||
border-radius: 12px !important;
|
||
border-bottom: 4px solid var(--interactive-accent) !important;
|
||
padding-inline-start: 12px !important;
|
||
}
|
||
|
||
.markdown-embed {
|
||
/* font-style: var(--embed-font-style);
|
||
background-color: var(--embed-background);
|
||
border-top: var(--embed-border-top);
|
||
border-inline-end: var(--embed-border-end, var(--embed-border-right)); */
|
||
border-bottom: var(--embed-border-bottom);
|
||
border-inline-start: none;
|
||
}
|
||
|
||
|
||
.special-inline-title .markdown-preview-section .inline-title {
|
||
text-align: center;
|
||
position: relative;
|
||
display: inline-block;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
|
||
.markdown-embed-link {
|
||
border-radius: 20px !important;
|
||
transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
z-index: 1000 !important;
|
||
top: -4px;
|
||
transform: scale(0.8);
|
||
}
|
||
|
||
.markdown-embed-link:hover {
|
||
transform: scale(0.9);
|
||
transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
}
|
||
|
||
.markdown-embed-link:active {
|
||
border-radius: 10px !important;
|
||
transform: scale(0.7);
|
||
color: var(--color-accent-1);
|
||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||
}
|
||
|
||
/* ===== TABLE ===== */
|
||
.markdown-source-view.mod-cm6 .table-wrapper {
|
||
width: 95% !important;
|
||
max-height: none !important;
|
||
outline: 3px solid var(--table-border-color);
|
||
}
|
||
|
||
.markdown-preview-view table {
|
||
border: 3px solid var(--table-border-color);
|
||
}
|
||
|
||
td,
|
||
th {
|
||
outline: 1px solid var(--table-border-color);
|
||
}
|
||
|
||
/* ===== TABLEQUAL – equal-width columns ===== */
|
||
.table-equal.markdown-preview-view table,
|
||
.table-equal.markdown-source-view.mod-cm6 .cm-table-widget table {
|
||
width: 100% !important;
|
||
table-layout: fixed !important; /* FORCE equal column widths */
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.table-equal.markdown-preview-view table td,
|
||
.table-equal.markdown-preview-view table th,
|
||
.table-equal.markdown-source-view.mod-cm6 .cm-table-widget td,
|
||
.table-equal.markdown-source-view.mod-cm6 .cm-table-widget th {
|
||
white-space: normal !important;
|
||
word-break: break-word;
|
||
padding: 6px;
|
||
}
|
||
|
||
/* ===== naturale resizing ===== */
|
||
.markdown-preview-view table,
|
||
.markdown-source-view.mod-cm6 .cm-table-widget table {
|
||
width: 100% !important;
|
||
table-layout: auto !important; /* allow natural sizing okie? */
|
||
/* margin-top: -30px !important; */
|
||
}
|
||
|
||
.markdown-preview-view table td,
|
||
.markdown-preview-view table th,
|
||
.markdown-source-view.mod-cm6 .cm-table-widget td,
|
||
.markdown-source-view.mod-cm6 .cm-table-widget th {
|
||
white-space: normal !important;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* ===== TABLE VISUALS ====== */
|
||
|
||
/* === Live Preview: SPACE INSIDE CELLS === */
|
||
.markdown-source-view.mod-cm6 .table-cell-wrapper {
|
||
margin: 4px 6px;
|
||
}
|
||
|
||
.cm-html-embed thead > tr > th,
|
||
.markdown-rendered thead > tr > th,
|
||
.cm-html-embed tbody > tr > td,
|
||
.markdown-rendered tbody > tr > td {
|
||
border-radius: 0px;
|
||
}
|
||
|
||
.cm-html-embed thead > tr > th,
|
||
.markdown-rendered thead > tr > th,
|
||
.cm-html-embed tbody > tr > td,
|
||
.markdown-rendered tbody > tr > td {
|
||
border-radius: 0px;
|
||
}
|
||
|
||
/* === Reading View === */
|
||
.markdown-preview-view table {
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
border-radius: 0px;
|
||
outline: 1px solid var(--table-border-color);
|
||
overflow: hidden;
|
||
margin: 1em 0;
|
||
}
|
||
|
||
.markdown-preview-view th,
|
||
.markdown-preview-view td {
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
/* Table headers: darkened background */
|
||
.markdown-preview-view table th,
|
||
.markdown-source-view.mod-cm6 .cm-table-widget th {
|
||
--titlebar-background-focused: var(--titlebar-background);
|
||
color: var(--text-normal);
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* === Horizontal lines only mode === */
|
||
|
||
.table-hor-lines-only.markdown-preview-view table td,
|
||
.table-hor-lines-only.markdown-preview-view table th,
|
||
.table-hor-lines-only.markdown-source-view.mod-cm6 .cm-table-widget td,
|
||
.table-hor-lines-only.markdown-source-view.mod-cm6 .cm-table-widget th {
|
||
border-left: none !important;
|
||
border-right: none !important;
|
||
border-top: none !important;
|
||
}
|
||
|
||
.table-hor-lines-only.markdown-preview-view table tr + tr td,
|
||
.table-hor-lines-only.markdown-source-view.mod-cm6 .cm-table-widget tr + tr td {
|
||
border-top: 1.5px solid var(--background-modifier-border) !important;
|
||
}
|
||
|
||
.table-hor-lines-only.markdown-preview-view table th,
|
||
.table-hor-lines-only.markdown-source-view.mod-cm6 .cm-table-widget th {
|
||
border-bottom: 2px solid var(--background-modifier-border) !important;
|
||
}
|
||
|
||
.table-hor-lines-only td,
|
||
.table-hor-lines-only th {
|
||
outline: none !important;
|
||
border-left: none !important;
|
||
border-right: none !important;
|
||
border-top: none !important;
|
||
}
|
||
|
||
/* === Vertical lines only mode === */
|
||
|
||
.table-ver-lines-only.markdown-preview-view table td,
|
||
.table-ver-lines-only.markdown-preview-view table th,
|
||
.table-ver-lines-only.markdown-source-view.mod-cm6 .cm-table-widget td,
|
||
.table-ver-lines-only.markdown-source-view.mod-cm6 .cm-table-widget th {
|
||
border-top: none !important;
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
.table-ver-lines-only.markdown-preview-view table td,
|
||
.table-ver-lines-only.markdown-preview-view table th,
|
||
.table-ver-lines-only.markdown-source-view.mod-cm6 .cm-table-widget td,
|
||
.table-ver-lines-only.markdown-source-view.mod-cm6 .cm-table-widget th {
|
||
border-left: 1.5px solid var(--background-modifier-border) !important;
|
||
border-right: 1.5px solid var(--background-modifier-border) !important;
|
||
}
|
||
|
||
.table-ver-lines-only td,
|
||
.table-ver-lines-only th {
|
||
outline: none !important;
|
||
border-top: none !important;
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
/* ===== WORKSPACE TABS ===== */
|
||
.workspace-tab-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.workspace-tab-header-tab-list {
|
||
order: -1;
|
||
margin-left: 0 !important;
|
||
margin-right: 0 !important;
|
||
border-radius: 20px;
|
||
/* display: flex; add this to get the tab list for sidebars too yyoy*/
|
||
gap: 4px;
|
||
}
|
||
|
||
.hide-tab-list .workspace-tab-header-tab-list {
|
||
display: none !important;
|
||
}
|
||
|
||
/* LEFT SIDEBAR TOGGLE */
|
||
/* .sidebar-toggle-button.mod-left {
|
||
order: -2;
|
||
margin-right: 8px;
|
||
} */
|
||
|
||
/* NEW TAB BUTTON */
|
||
.workspace-tab-header-new-tab {
|
||
/* padding: 0 6px !important; */
|
||
margin-right: 6px !important;
|
||
background: transparent !important;
|
||
background-color: transparent !important;
|
||
order: 999; /* force at the end */
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
/* RIGHT SIDEBAR TOGGLE */
|
||
.sidebar-toggle-button.mod-right {
|
||
order: 1000; /* after new tab */
|
||
flex: 0 0 auto;
|
||
align-self: center;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
height: 24px;
|
||
width: 24px;
|
||
padding: 0;
|
||
}
|
||
|
||
/* .is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-right-space .workspace-tab-header-container {
|
||
padding-right: 20px !important;
|
||
} */
|
||
|
||
.is-hidden-frameless:not(.is-fullscreen)
|
||
.workspace-tabs.mod-top-right-space
|
||
.workspace-tab-header-container {
|
||
padding-right: calc(-2% + var(--frame-right-space));
|
||
}
|
||
|
||
/* === other plugins support */
|
||
.kanban-styling {
|
||
/* --- mainbody --- */
|
||
.kanban-plugin__lane {
|
||
border-radius: var(--button-radius);
|
||
border: 2.5px solid var(--background-modifier-border);
|
||
box-shadow: 0px 2px 0px var(--background-modifier-border);
|
||
}
|
||
|
||
|
||
/* --- item cards --- */
|
||
|
||
.kanban-plugin__item {
|
||
border-radius: var(--button-radius);
|
||
border: 2px solid var(--background-modifier-border);
|
||
box-shadow: 0px 2px 0px var(--background-modifier-border);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.kanban-plugin__item-title-wrapper {
|
||
background-color: var(--background-primary) !important;
|
||
padding: 12px;
|
||
}
|
||
|
||
.kanban-plugin__item p {
|
||
font-size: 16px !important;
|
||
transition: font-size 0.2s ease-out;
|
||
}
|
||
|
||
/* Icons */
|
||
.kanban-plugin__item .kanban-plugin__icon {
|
||
opacity: 0;
|
||
}
|
||
|
||
.kanban-plugin__item .kanban-plugin__icon:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.kanban-plugin__item .kanban-plugin__icon svg {
|
||
--icon-size: 12px !important;
|
||
}
|
||
|
||
.kanban-plugin__item-title-wrapper .tag {
|
||
padding: 3px 5px !important;
|
||
margin-left: 1px;
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
.kanban-plugin__item-title-wrapper p {
|
||
line-height: 1.6 !important;
|
||
}
|
||
|
||
.kanban-plugin__item-title-wrapper {
|
||
background-color: var(--background-primary) !important;
|
||
padding: 8px 10px !important;
|
||
}
|
||
|
||
.kanban-plugin__item-metadata-date-relative {
|
||
margin-top: -3px;
|
||
}
|
||
|
||
.kanban-plugin__date, .cm-kanban-time-wrapper, .cm-kanban-date-wrapper {
|
||
display: inline;
|
||
}
|
||
|
||
|
||
/* =========================
|
||
BUTTONS
|
||
========================= */
|
||
|
||
button.kanban-plugin__new-item-button {
|
||
width: 100%;
|
||
background-color: var(--button-background);
|
||
color: var(--surface);
|
||
box-shadow: none;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1.5);
|
||
}
|
||
|
||
button.kanban-plugin__new-item-button:hover {
|
||
background-color: var(--button-background-hover);
|
||
color: var(--surface);
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* the + text */
|
||
.kanban-plugin__item-button-plus {
|
||
margin-inline-end: 4px;
|
||
}
|
||
|
||
.kanban-plugin__item-input-wrapper {
|
||
border-radius: 0px !important;
|
||
}
|
||
|
||
}
|
||
|
||
/* --- kanban boards take up 100% width --- */
|
||
|
||
body.kanban-full .kanban-plugin__board {
|
||
display: flex !important;
|
||
}
|
||
|
||
body.kanban-full .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
|
||
flex: 100% !important;
|
||
width: 100% !important;
|
||
min-width: 0 !important;
|
||
height: 100%;
|
||
}
|
||
|
||
body.kanban-full .kanban-plugin__board > div {
|
||
width: 100% !important;
|
||
margin-left: 20px !important;
|
||
}
|
||
|
||
/* --- image captions support --- */
|
||
body.image-captions-styling {
|
||
.image-captions-figure, .theme-dark .image-captions-caption {
|
||
background-color: var(--background-secondary-alt);
|
||
color: var(--text-normal);
|
||
/* box-shadow: 0px 5px 0px -1px var(--text-faint); */
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.image-captions-caption {
|
||
background-color: var(--background-secondary-alt);
|
||
border-radius: 0px 0px 14px 14px;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.image-captions-figure {
|
||
border-radius: 12px 12px 0px 0px;
|
||
}
|
||
|
||
|
||
.image-captions-figure img {
|
||
border-radius: 8px !important;
|
||
transform: scale(0.99);
|
||
corner-shape: squircle !important;
|
||
}
|
||
|
||
/* .internal-embed.media-embed.image-embed, */
|
||
.image-captions-figure, .image-captions-caption {
|
||
border: 2.5px solid var(--background-modifier-border);
|
||
corner-shape: squircle;
|
||
}
|
||
|
||
.image-captions-caption {
|
||
border: 2.5px solid var(--background-modifier-border);
|
||
border-top: none !important;
|
||
border-bottom: 6px solid var(--background-modifier-border) !important;
|
||
}
|
||
}
|
||
|
||
|
||
img {
|
||
border-radius: var(--button-radius);
|
||
}
|
||
|
||
/* =========================
|
||
Add Card Button (PREPEND HOVER EXPAND)
|
||
========================= */
|
||
|
||
body.kanban-prepend-hover-expand
|
||
.kanban-plugin__item-button-wrapper {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
body.kanban-prepend-hover-expand
|
||
.kanban-plugin__item-button-wrapper:hover {
|
||
max-height: 60px;
|
||
transition: max-height 0.3s ease,
|
||
opacity 0.15s ease,
|
||
all 0.2s ease;
|
||
}
|
||
|
||
body.kanban-prepend-hover-expand
|
||
button.kanban-plugin__new-item-button {
|
||
transform: scale(1.2) translateY(2px);
|
||
transition: max-height 0.3s ease,
|
||
opacity 0.15s ease,
|
||
all 0.2s ease;
|
||
}
|
||
|
||
body.kanban-prepend-hover-expand
|
||
.kanban-plugin__item-button-wrapper:hover
|
||
button.kanban-plugin__new-item-button {
|
||
transform: scale(1);
|
||
}
|
||
|
||
/* --- extra --- */
|
||
body.kanban-hover-biggen
|
||
.kanban-plugin__item:hover p {
|
||
font-size: 20px !important;
|
||
}
|
||
|
||
.kanban-redden-metadata .kanban-plugin__item-metadata {
|
||
color: var(--color-red);
|
||
}
|
||
|
||
|
||
|
||
/* ===== MIN MAX CLOSE BUTTONS ===== */
|
||
|
||
.titlebar-button {
|
||
position: relative;
|
||
background-color: transparent;
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
/* hide default icons */
|
||
.titlebar-button svg {
|
||
display: none;
|
||
}
|
||
|
||
/* icon base */
|
||
.titlebar-button::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
margin: auto;
|
||
width: 14px;
|
||
height: 14px;
|
||
background-color: currentColor;
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-position: center;
|
||
-webkit-mask-size: contain;
|
||
mask-repeat: no-repeat;
|
||
mask-position: center;
|
||
mask-size: contain;
|
||
pointer-events: none;
|
||
transition: transform calc(var(--animation-duration) * 0.5) cubic-bezier(0.175, 0.885, 0.32, 1.2);
|
||
}
|
||
|
||
.titlebar-button.mod-close:hover {
|
||
color: var(--text-error);
|
||
background-color: rgba(var(--color-red-rgb), 0.2) !important;
|
||
}
|
||
|
||
.titlebar-button:hover::before {
|
||
transform: scale(1.15);
|
||
}
|
||
|
||
|
||
.g-min-y-max {
|
||
.titlebar-button.mod-maximize:hover {
|
||
color: var(--color-yellow);
|
||
background-color: rgba(var(--color-yellow-rgb), 0.2) !important;
|
||
}
|
||
|
||
.titlebar-button.mod-minimize:hover {
|
||
color: var(--color-green);
|
||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||
}
|
||
}
|
||
|
||
.y-min-g-max {
|
||
.titlebar-button.mod-maximize:hover {
|
||
color: var(--color-green);
|
||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||
}
|
||
|
||
.titlebar-button.mod-minimize:hover {
|
||
color: var(--color-yellow);
|
||
background-color: rgba(var(--color-yellow-rgb), 0.2) !important;
|
||
}
|
||
}
|
||
|
||
|
||
/* close */
|
||
.titlebar-button.mod-close::before {
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='50' cy='50' r='42' stroke='black' stroke-width='8' fill='none'/>\
|
||
<line x1='32' y1='32' x2='68' y2='68' stroke='black' stroke-width='8' stroke-linecap='round'/>\
|
||
<line x1='68' y1='32' x2='32' y2='68' stroke='black' stroke-width='8' stroke-linecap='round'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* minimize */
|
||
.titlebar-button.mod-minimize::before {
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='50' cy='50' r='10' fill='black'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* maximize */
|
||
.titlebar-button.mod-maximize::before {
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<rect x='28' y='28' width='44' height='44' rx='4' fill='none' stroke='black' stroke-width='8'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* hover states */
|
||
.titlebar-button:hover {
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* ===== SLIDERS ===== */
|
||
|
||
input.slider {
|
||
height: 10px !important;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
input.slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
border-radius: 4px !important;
|
||
background-color: var(--interactive-accent);
|
||
cursor: pointer;
|
||
width: 20px !important;
|
||
transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 1.5);
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<!-- Angry eyes \\/ -->\
|
||
<line x1='28' y1='34' x2='42' y2='38' stroke='black' stroke-width='7' stroke-linecap='round'/>\
|
||
<line x1='58' y1='38' x2='72' y2='34' stroke='black' stroke-width='7' stroke-linecap='round'/>\
|
||
<!-- Straight mouth -->\
|
||
<line x1='40' y1='55' x2='60' y2='55' stroke='black' stroke-width='7' stroke-linecap='round'/>\
|
||
</svg>");
|
||
}
|
||
|
||
input.slider::-webkit-slider-thumb:hover {
|
||
-webkit-appearance: none;
|
||
transform: scale(1.2);
|
||
appearance: none;
|
||
border-radius: 20px !important;
|
||
width: 18px !important;
|
||
transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='35' cy='40' r='5' fill='black'/>\
|
||
<circle cx='65' cy='40' r='5' fill='black'/>\
|
||
<path d='M30 60 Q50 72 70 60' stroke='black' stroke-width='6' fill='none' stroke-linecap='round'/>\
|
||
</svg>");
|
||
}
|
||
|
||
.hide-properties-arrow
|
||
.metadata-container
|
||
.metadata-properties-heading
|
||
.collapse-indicator.collapse-icon {
|
||
opacity: 0 !important;
|
||
visibility: hidden !important;
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
/* TOGGLE STYLING */
|
||
.checkbox-container {
|
||
border-radius: 10px;
|
||
transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
}
|
||
|
||
.checkbox-container:not(.is-enabled)::after {
|
||
border-radius: 10px;
|
||
transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
}
|
||
|
||
.checkbox-container.is-enabled {
|
||
border-radius: 6px;
|
||
transition: all calc(var(--animation-duration) * 0.3333) ease-out;
|
||
}
|
||
|
||
.checkbox-container.is-enabled::after {
|
||
border-radius: 6px;
|
||
transition:
|
||
transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
border-radius calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
|
||
}
|
||
|
||
.checkbox-container::after {
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 70%;
|
||
}
|
||
|
||
.checkbox-container.is-enabled::after {
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 70%;
|
||
transition:
|
||
background-size calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 1.5);
|
||
}
|
||
|
||
.checkbox-container:not(.is-enabled):hover::after {
|
||
transform: scale(1.5);
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='35' cy='40' r='6' fill='black'/>\
|
||
<circle cx='65' cy='40' r='6' fill='black'/>\
|
||
<path d='M30 60 Q50 72 70 60' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
|
||
</svg>");
|
||
}
|
||
|
||
.theme-light .checkbox-container:not(.is-enabled):hover::after {
|
||
border: 1px solid var(--background-modifier-border);
|
||
}
|
||
|
||
.theme-light .checkbox-container.is-enabled:hover::after {
|
||
border: 1px solid var(--background-modifier-border) !important;
|
||
transition:
|
||
transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
border calc(var(--animation-duration) * 0.3333) ease;
|
||
}
|
||
|
||
.checkbox-container.is-enabled:hover::after {
|
||
background-size: 100%;
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<!-- Angry eyes flipped \\/ -->\
|
||
<line x1='28' y1='34' x2='42' y2='38' stroke='black' stroke-width='8' stroke-linecap='round'/>\
|
||
<line x1='58' y1='38' x2='72' y2='34' stroke='black' stroke-width='8' stroke-linecap='round'/>\
|
||
<!-- Straight mouth -->\
|
||
<line x1='40' y1='55' x2='60' y2='55' stroke='black' stroke-width='6' stroke-linecap='round'/>\
|
||
</svg>");
|
||
transform: scale(1.5) translateX(1em);
|
||
transition:
|
||
transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
border calc(var(--animation-duration) * 0.3333) ease;
|
||
}
|
||
|
||
input[type="checkbox"] {
|
||
transform: scale(1);
|
||
transition: transform calc(var(--animation-duration) * 0.3333) ease !important;
|
||
}
|
||
|
||
input[type="checkbox"]:checked:hover {
|
||
background-color: var(--checkbox-color);
|
||
border-color: var(--checkbox-color);
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
/* ===== TASK LIST CHECKBOXES ===== */
|
||
|
||
:root {
|
||
--color-tang: #e59c58;
|
||
}
|
||
|
||
/* ===== LE CHECKBOXES ===== */
|
||
|
||
body:not(.disable-checkboxes) {
|
||
/* base */
|
||
.task-list-item-checkbox {
|
||
/* padding: 16px !important; enable this to scale babies up */
|
||
color: var(--text-muted);
|
||
border-color: currentColor !important;
|
||
border-radius: 8px !important;
|
||
border-width: 2px !important;
|
||
width: 23px !important;
|
||
height: 23px !important;
|
||
background-color: var(--text-normal);
|
||
position: relative;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
|
||
cursor: pointer;
|
||
transition:
|
||
all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
padding calc(var(--animation-duration) * 0.3333) ease,
|
||
border-radius calc(var(--animation-duration) * 0.6667) ease !important;
|
||
}
|
||
|
||
/* hide tick */
|
||
.task-list-item-checkbox::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 20px;
|
||
height: 20px;
|
||
transform: translate(-50%, -50%);
|
||
background: none !important;
|
||
}
|
||
|
||
/* hide default checkmark */
|
||
.task-list-item-checkbox:checked {
|
||
color: var(--color-tang);
|
||
border-color: currentColor !important;
|
||
|
||
background-color: var(--color-orange);
|
||
border-radius: 20px !important;
|
||
transform: scale(0.96) !important;
|
||
transition:
|
||
transform calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2),
|
||
padding calc(var(--animation-duration) * 0.3333) ease,
|
||
border-radius calc(var(--animation-duration) * 0.6667) ease !important;
|
||
}
|
||
|
||
/* sad */
|
||
.task-list-item-checkbox::before {
|
||
/* padding: 16px !important; scale this to size up faces */
|
||
padding: 2px !important;
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 20px;
|
||
height: 20px;
|
||
transform: translate(-50%, -40%); /* y pos */
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><line x1='28' y1='38' x2='42' y2='34' stroke='black' stroke-width='8' stroke-linecap='round'/><line x1='58' y1='34' x2='72' y2='38' stroke='black' stroke-width='8' stroke-linecap='round'/><line x1='40' y1='55' x2='60' y2='55' stroke='black' stroke-width='8' stroke-linecap='round'/></svg>");
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* checked: smiley + n eyes */
|
||
.task-list-item-checkbox:checked::before,
|
||
li > .task-list-item-checkbox:checked::before {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M25 40 Q35 35 40 40' stroke='black' stroke-width='7' fill='none' stroke-linecap='round'/><path d='M60 40 Q65 35 75 40' stroke='black' stroke-width='7' fill='none' stroke-linecap='round'/><path d='M35 55 Q50 65 65 55' stroke='black' stroke-width='8' fill='none' stroke-linecap='round'/></svg>");
|
||
transform: translate(-50%, -47%);
|
||
}
|
||
|
||
.task-list-item-checkbox:not(:checked):hover {
|
||
transform: scale(1.25) !important;
|
||
border-radius: 6px !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.task-list-item-checkbox:not(:checked) {
|
||
box-shadow: 0px 1px 2px var(--checkbox-border-color) !important;
|
||
transform: translateY(0px) scale(1.1) !important;
|
||
}
|
||
|
||
.task-list-item-checkbox:checked:hover {
|
||
transform: scale(1.05) !important;
|
||
box-shadow: none !important;
|
||
background-color: none !important;
|
||
background: currentColor !important;
|
||
filter: brightness(1.2);
|
||
}
|
||
|
||
:root {
|
||
--checklist-done-decoration: none;
|
||
}
|
||
|
||
/* hide strikethrough */
|
||
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
|
||
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] {
|
||
text-decoration: none !important;
|
||
color: var(--checklist-done-color);
|
||
}
|
||
|
||
/* x - default */
|
||
input[data-task="x"]:checked,
|
||
li[data-task="x"] > input:checked,
|
||
li[data-task="x"] > p > input:checked {
|
||
color: var(--color-tang);
|
||
background-color: currentColor;
|
||
border-color: var(--color-tang) !important;
|
||
}
|
||
|
||
/* / - in progress Checky */
|
||
input[data-task="/"]:checked,
|
||
li[data-task="/"] > input:checked,
|
||
li[data-task="/"] > p > input:checked {
|
||
color: var(--color-yellow);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 10px !important;
|
||
width: 23px;
|
||
height: 23px;
|
||
mask-position: 0px -2px;
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE with UoU */
|
||
.task-list-item-checkbox[data-task="/"]:checked::before,
|
||
li[data-task="/"] > .task-list-item-checkbox:checked::before {
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='13' cy='60' r='16' fill='orange'/>\
|
||
<circle cx='87' cy='58' r='16' fill='orange'/>\
|
||
\
|
||
<path d='M15 40 Q25 65 40 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
|
||
<path d='M60 40 Q65 65 85 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
|
||
<ellipse cx='50' cy='78' rx='15' ry='18' fill='maroon'/>\
|
||
</svg>");
|
||
|
||
background-size:
|
||
60% 70%,
|
||
cover;
|
||
background-position:
|
||
center center,
|
||
center center;
|
||
background-repeat: no-repeat, no-repeat;
|
||
}
|
||
|
||
/* - - cancelled Checky */
|
||
input[data-task="-"]:checked,
|
||
li[data-task="-"] > input:checked,
|
||
li[data-task="-"] > p > input:checked {
|
||
color: var(--color-orange);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 2px !important;
|
||
width: 20px !important;
|
||
height: 20px;
|
||
mask-position: 0px -2px;
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE with /0o0\ */
|
||
.task-list-item-checkbox[data-task="-"]:checked::before,
|
||
li[data-task="-"] > .task-list-item-checkbox:checked::before {
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<line x1='18' y1='19' x2='42' y2='18' stroke='black' stroke-width='10' stroke-linecap='round'/>\
|
||
<line x1='65' y1='24' x2='85' y2='34' stroke='black' stroke-width='10' stroke-linecap='round'/>\
|
||
\
|
||
<line x1='28' y1='64' x2='79' y2='64' stroke='black' stroke-width='10' stroke-linecap='round'/>\
|
||
</svg>");
|
||
|
||
background-size:
|
||
60% 70%,
|
||
cover;
|
||
background-position:
|
||
center center,
|
||
center center;
|
||
background-repeat: no-repeat, no-repeat;
|
||
}
|
||
|
||
/* ? - Question Checky */
|
||
input[data-task="?"]:checked,
|
||
li[data-task="?"] > input:checked,
|
||
li[data-task="?"] > p > input:checked {
|
||
color: var(--color-orange);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0 !important;
|
||
width: 23px;
|
||
height: 23px;
|
||
mask-size: cover !important;
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='.5 0 16 16'><path d='M8 1.25a2.1 2.1 0 00-1.55.68L1.14 11.44a2.06 2.06 0 00.77 2.81c.3.17.65.26 1 .26h11.38a2.1 2.1 0 001.85-1.1 2.06 2.06 0 00-.16-2.1L9.55 1.93A2.08 2.08 0 008 1.25z'/></svg>");
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE with /0o0\ */
|
||
.task-list-item-checkbox[data-task="?"]:checked::before,
|
||
li[data-task="?"] > .task-list-item-checkbox:checked::before {
|
||
background-position: 3.5px 4px !important;
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<line x1='18' y1='19' x2='42' y2='18' stroke='black' stroke-width='10' stroke-linecap='round'/>\
|
||
<line x1='58' y1='24' x2='79' y2='34' stroke='black' stroke-width='10' stroke-linecap='round'/>\
|
||
\
|
||
<circle cx='35' cy='30' r='9' fill='black'/>\
|
||
<circle cx='70' cy='35' r='10' fill='black'/>\
|
||
<ellipse cx='52' cy='65' rx='15' ry='18' fill='black'/>\
|
||
</svg>");
|
||
|
||
background-size:
|
||
60% 70%,
|
||
cover;
|
||
background-position:
|
||
center center,
|
||
center center;
|
||
background-repeat: no-repeat, no-repeat;
|
||
}
|
||
|
||
/* h = heart checkbox */
|
||
input[data-task="h"]:checked,
|
||
li[data-task="h"] > input:checked,
|
||
li[data-task="h"] > p > input:checked {
|
||
color: var(--color-pink);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0 !important;
|
||
width: 23px;
|
||
height: 23px;
|
||
mask-position: calc(50% - -1px) 50%;
|
||
mask-size: 24px;
|
||
|
||
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.8 1 20 21"><path d="M12 22q-.4 0-.7-.2l-2.3-2.4C3.8 15.8 2 12.9 2 9.5 2 6.5 4.5 4 7.5 4c1.3 0 2.6.6 3.5 1.5C11.9 4.6 13.2 4 14.5 4 17.5 4 20 6.5 20 9.5c0 3.4-2.8 6.3-6.3 9.9l-0.7 0.8z" fill="black"/></svg>');
|
||
}
|
||
|
||
/* T = triangle checkbox */
|
||
input[data-task="T"]:checked,
|
||
li[data-task="T"] > input:checked,
|
||
li[data-task="T"] > p > input:checked {
|
||
color: var(--color-orange);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0 !important;
|
||
width: 23px;
|
||
height: 23px;
|
||
mask-size: cover !important;
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='.5 0 16 16'><path d='M8 1.25a2.1 2.1 0 00-1.55.68L1.14 11.44a2.06 2.06 0 00.77 2.81c.3.17.65.26 1 .26h11.38a2.1 2.1 0 001.85-1.1 2.06 2.06 0 00-.16-2.1L9.55 1.93A2.08 2.08 0 008 1.25z'/></svg>");
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE with 0u0 */
|
||
.task-list-item-checkbox[data-task="T"]:checked::before,
|
||
li[data-task="T"] > .task-list-item-checkbox:checked::before {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='35' cy='30' r='10' fill='black'/><circle cx='70' cy='35' r='10' fill='black'/><path d='M20 60 Q60 95 80 60' stroke='black' stroke-width='16' fill='none' stroke-linecap='round'/></svg>");
|
||
background-size:
|
||
50% 50%,
|
||
cover;
|
||
background-position:
|
||
center center,
|
||
center center;
|
||
background-repeat: no-repeat, no-repeat;
|
||
}
|
||
|
||
/* t = time */
|
||
input[data-task="t"]:checked,
|
||
li[data-task="t"] > input:checked,
|
||
li[data-task="t"] > p > input:checked {
|
||
color: var(--color-cyan);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0;
|
||
width: 23px;
|
||
height: 23px;
|
||
mask-size: 0px -2px;
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,\
|
||
<svg fill='black' viewBox='-32 0 512 512' xmlns='http://www.w3.org/2000/svg'>\
|
||
<path d='M432 304c0 114.9-93.1 208-208 208S16 418.9 16 304c0-104 76.3-190.2 176-205.5V64h-28c-6.6 0-12-5.4-12-12V12c0-6.6 5.4-12 12-12h120c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-28v34.5c37.5 5.8 71.7 21.6 99.7 44.6l27.5-27.5c4.7-4.7 12.3-4.7 17 0l28.3 28.3c4.7 4.7 4.7 12.3 0 17l-29.4 29.4-.6.6C419.7 223.3 432 262.2 432 304zm-176 36V188.5c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12V340c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE with 0u0 */
|
||
.task-list-item-checkbox[data-task="t"]:checked::before,
|
||
li[data-task="t"] > .task-list-item-checkbox:checked::before {
|
||
background-image: none;
|
||
}
|
||
|
||
/* s = star checkbox */
|
||
input[data-task="s"]:checked,
|
||
li[data-task="s"] > input:checked,
|
||
li[data-task="s"] > p > input:checked {
|
||
color: var(--color-yellow);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0;
|
||
width: 23px !important;
|
||
height: 23px;
|
||
mask-position: center center;
|
||
mask-size:
|
||
100% 100%,
|
||
contain;
|
||
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 2 22 22"><path d="M9.15316 5.40838C10.4198 3.13613 11.0531 2 12 2C12.9469 2 13.5802 3.13612 14.8468 5.40837L15.1745 5.99623C15.5345 6.64193 15.7144 6.96479 15.9951 7.17781C16.2757 7.39083 16.6251 7.4699 17.3241 7.62805L17.9605 7.77203C20.4201 8.32856 21.65 8.60682 21.9426 9.54773C22.2352 10.4886 21.3968 11.4691 19.7199 13.4299L19.2861 13.9372C18.8096 14.4944 18.5713 14.773 18.4641 15.1177C18.357 15.4624 18.393 15.8341 18.465 16.5776L18.5306 17.2544C18.7841 19.8706 18.9109 21.1787 18.1449 21.7602C17.3788 22.3417 16.2273 21.8115 13.9243 20.7512L13.3285 20.4768C12.6741 20.1755 12.3469 20.0248 12 20.0248C11.6531 20.0248 11.3259 20.1755 10.6715 20.4768L10.0757 20.7512C7.77268 21.8115 6.62118 22.3417 5.85515 21.7602C5.08912 21.1787 5.21588 19.8706 5.4694 17.2544L5.53498 16.5776C5.60703 15.8341 5.64305 15.4624 5.53586 15.1177C5.42868 14.773 5.19043 14.4944 4.71392 13.9372L4.2801 13.4299C2.60325 11.4691 1.76482 10.4886 2.05742 9.54773C2.35002 8.60682 3.57986 8.32856 6.03954 7.77203L6.67589 7.62805C7.37485 7.4699 7.72433 7.39083 8.00494 7.17781C8.28555 6.96479 8.46553 6.64194 8.82547 5.99623L9.15316 5.40838Z" fill="black"/></svg>');
|
||
|
||
background-color: none !important;
|
||
background-size:
|
||
50% 50%,
|
||
cover !important;
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE WITH 0o0 */
|
||
.task-list-item-checkbox[data-task="s"]:checked::before,
|
||
li[data-task="s"] > .task-list-item-checkbox:checked::before {
|
||
background-size:
|
||
70% 70%,
|
||
cover !important;
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='23' cy='50' r='10' fill='orange'/>\
|
||
<circle cx='77' cy='50' r='10' fill='orange'/>\
|
||
<path d='M25 40 Q35 35 40 35' stroke='maroon' stroke-width='10' fill='none' stroke-linecap='round'/>\
|
||
<path d='M60 40 Q65 35 75 40' stroke='maroon' stroke-width='10' fill='none' stroke-linecap='round'/>\
|
||
<ellipse cx='52' cy='65' rx='10' ry='12' fill='maroon'/>\
|
||
</svg>");
|
||
|
||
background-size:
|
||
50% 50%,
|
||
cover;
|
||
background-position:
|
||
center center,
|
||
center center;
|
||
background-repeat: no-repeat, no-repeat;
|
||
}
|
||
|
||
/* i = info checkbox */
|
||
input[data-task="i"]:checked,
|
||
li[data-task="i"] > input:checked,
|
||
li[data-task="i"] > p > input:checked {
|
||
color: var(--color-blue);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0;
|
||
width: 23px;
|
||
height: 23px;
|
||
mask-position: center center;
|
||
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
|
||
<path d='M14 3.072a8 8 0 0 1 2.32 11.834l5.387 5.387a1 1 0 0 1 -1.414 1.414l-5.388 -5.387a8 8 0 0 1 -12.905 -6.32l.005 -.285a8 8 0 0 1 11.995 -6.643m-4 8.928a1 1 0 0 0 -1 1l.007 .127a1 1 0 0 0 1.993 -.117l-.007 -.127a1 1 0 0 0 -.993 -.883m0 -6a1 1 0 0 0 -1 1v3a1 1 0 0 0 2 0v-3a1 1 0 0 0 -1 -1'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* REMOVE DEFAULT FACE for i */
|
||
.task-list-item-checkbox[data-task="i"]:checked::before,
|
||
li[data-task="i"] > .task-list-item-checkbox:checked::before {
|
||
background-image: none;
|
||
}
|
||
|
||
/* A = arrow */
|
||
input[data-task="A"]:checked,
|
||
li[data-task="A"] > input:checked,
|
||
li[data-task="A"] > p > input:checked {
|
||
color: var(--color-yellow);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0;
|
||
width: 23px;
|
||
height: 23px;
|
||
mask-position: center center;
|
||
mask-size: 100% 100% !important;
|
||
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 6l-.112 .006a1 1 0 0 0 -.669 1.619l3.501 4.375l-3.5 4.375a1 1 0 0 0 .78 1.625h6a1 1 0 0 0 .78 -.375l4 -5a1 1 0 0 0 0 -1.25l-4 -5a1 1 0 0 0 -.78 -.375h-6z" /></svg>');
|
||
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 6l-.112 .006a1 1 0 0 0 -.669 1.619l3.501 4.375l-3.5 4.375a1 1 0 0 0 .78 1.625h6a1 1 0 0 0 .78 -.375l4 -5a1 1 0 0 0 0 -1.25l-4 -5a1 1 0 0 0 -.78 -.375h-6z" /></svg>');
|
||
}
|
||
|
||
/* REMOVE DEFAULT FACE for A */
|
||
.task-list-item-checkbox[data-task="A"]:checked::before,
|
||
li[data-task="A"] > .task-list-item-checkbox:checked::before {
|
||
background-image: none;
|
||
}
|
||
|
||
/* S = arrow */
|
||
input[data-task="S"]:checked,
|
||
li[data-task="S"] > input:checked,
|
||
li[data-task="S"] > p > input:checked {
|
||
color: var(--color-yellow);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0;
|
||
width: 23px;
|
||
height: 23px;
|
||
mask-position: center center;
|
||
mask-size: 100% 100% !important;
|
||
color: var(--color-brown);
|
||
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 13.478v4.522a3 3 0 0 1 -3 3h-14a3 3 0 0 1 -3 -3v-4.522l.553 .277a20.999 20.999 0 0 0 18.897 -.002l.55 -.275zm-8 -11.478a3 3 0 0 1 3 3v1h2a3 3 0 0 1 3 3v2.242l-1.447 .724a19.002 19.002 0 0 1 -16.726 .186l-.647 -.32l-1.18 -.59v-2.242a3 3 0 0 1 3 -3h2v-1a3 3 0 0 1 3 -3h4zm-2 8a1 1 0 0 0 -1 1a1 1 0 1 0 2 .01c0 -.562 -.448 -1.01 -1 -1.01zm2 -6h-4a1 1 0 0 0 -1 1v1h6v-1a1 1 0 0 0 -1 -1z" /></svg>');
|
||
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 13.478v4.522a3 3 0 0 1 -3 3h-14a3 3 0 0 1 -3 -3v-4.522l.553 .277a20.999 20.999 0 0 0 18.897 -.002l.55 -.275zm-8 -11.478a3 3 0 0 1 3 3v1h2a3 3 0 0 1 3 3v2.242l-1.447 .724a19.002 19.002 0 0 1 -16.726 .186l-.647 -.32l-1.18 -.59v-2.242a3 3 0 0 1 3 -3h2v-1a3 3 0 0 1 3 -3h4zm-2 8a1 1 0 0 0 -1 1a1 1 0 1 0 2 .01c0 -.562 -.448 -1.01 -1 -1.01zm2 -6h-4a1 1 0 0 0 -1 1v1h6v-1a1 1 0 0 0 -1 -1z" /></svg>');
|
||
}
|
||
|
||
/* REMOVE DEFAULT FACE for S */
|
||
.task-list-item-checkbox[data-task="S"]:checked::before,
|
||
li[data-task="S"] > .task-list-item-checkbox:checked::before {
|
||
background-image: none;
|
||
}
|
||
|
||
/* o = oooo */
|
||
input[data-task="o"]:checked,
|
||
li[data-task="o"] > input:checked,
|
||
li[data-task="o"] > p > input:checked {
|
||
color: var(--color-gray);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0;
|
||
width: 23px;
|
||
height: 23px;
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE for o with oOo */
|
||
.task-list-item-checkbox[data-task="o"]:checked::before,
|
||
li[data-task="o"] > .task-list-item-checkbox:checked::before {
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='23' cy='40' r='7' fill='gray'/>\
|
||
<circle cx='77' cy='50' r='7' fill='gray'/>\
|
||
<circle cx='35' cy='30' r='10' fill='black'/>\
|
||
<circle cx='70' cy='35' r='10' fill='black'/>\
|
||
<ellipse cx='52' cy='65' rx='15' ry='18' fill='black'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* c = crying */
|
||
input[data-task="c"]:checked,
|
||
li[data-task="c"] > input:checked,
|
||
li[data-task="c"] > p > input:checked {
|
||
color: var(--color-yellow);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0;
|
||
width: 23px;
|
||
height: 23px;
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE for c with oOo */
|
||
.task-list-item-checkbox[data-task="c"]:checked::before,
|
||
li[data-task="c"] > .task-list-item-checkbox:checked::before {
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<rect x='20' y='43' width='14' height='70' rx='3' ry='3' fill='%235aa8e5'/>\
|
||
<rect x='70' y='43' width='14' height='70' rx='3' ry='3' fill='%235aa8e5'/>\
|
||
<path d='M25 40 Q35 35 40 40' stroke='black' stroke-width='7' fill='none' stroke-linecap='round'/>\
|
||
<path d='M60 40 Q65 35 75 40' stroke='black' stroke-width='7' fill='none' stroke-linecap='round'/>\
|
||
<ellipse cx='52' cy='65' rx='12' ry='15' fill='brown'/>\
|
||
<ellipse cx='23' cy='105' rx='12' ry='15' fill='%235aa8e5'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* r = reminder */
|
||
input[data-task="r"]:checked,
|
||
li[data-task="r"] > input:checked,
|
||
li[data-task="r"] > p > input:checked {
|
||
color: var(--color-orange);
|
||
background-color: currentColor;
|
||
border: none;
|
||
border-radius: 0;
|
||
width: 26px;
|
||
height: 26px;
|
||
mask-position: center center;
|
||
mask-size: 26px;
|
||
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M9.4257 43.2461L46.5742 43.2461C48.8005 43.2461 50.1133 42.0977 50.1133 40.4102C50.1133 38.0664 47.746 35.957 45.707 33.8711C44.1601 32.2539 43.7382 28.9258 43.5742 26.2305C43.3867 17.2305 41.0195 11.0195 34.7617 8.7695C33.8945 5.7226 31.457 3.2852 28.0117 3.2852C24.5429 3.2852 22.1289 5.7226 21.2382 8.7695C15.0039 11.0195 12.6132 17.2305 12.4492 26.2305C12.2617 28.9258 11.8632 32.2539 10.2929 33.8711C8.2773 35.957 5.8867 38.0664 5.8867 40.4102C5.8867 42.0977 7.2226 43.2461 9.4257 43.2461ZM20.8632 46.4336C21.1445 49.8555 24.0273 52.7148 28.0117 52.7148C31.9726 52.7148 34.8554 49.8555 35.1601 46.4336Z" fill="black"/></svg>');
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE for r with \-/ */
|
||
.task-list-item-checkbox[data-task="r"]:checked::before,
|
||
li[data-task="r"] > .task-list-item-checkbox:checked::before {
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<!-- Angry eyes \\/ -->\
|
||
<line x1='28' y1='39' x2='42' y2='38' stroke='black' stroke-width='7' stroke-linecap='round'/>\
|
||
<line x1='58' y1='24' x2='72' y2='34' stroke='black' stroke-width='7' stroke-linecap='round'/>\
|
||
<circle cx='40' cy='30' r='6' fill='black'/>\
|
||
<circle cx='60' cy='35' r='6' fill='black'/>\
|
||
<!-- Straight mouth -->\
|
||
<line x1='40' y1='55' x2='60' y2='55' stroke='black' stroke-width='7' stroke-linecap='round'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* g - gear */
|
||
input[data-task="g"]:checked,
|
||
li[data-task="g"] > input:checked,
|
||
li[data-task="g"] > p > input:checked {
|
||
color: var(--color-tang);
|
||
background-color: currentColor;
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20369.793%20369.792%27%3E%3Cpath%20d=%27M320.83,140.434l-1.759-0.627l-6.87-16.399l0.745-1.685c20.812-47.201,19.377-48.609,15.925-52.031L301.11,42.61c-1.135-1.126-3.128-1.918-4.846-1.918c-1.562,0-6.293,0-47.294,18.57L247.326,60l-16.916-6.812l-0.679-1.684C210.45,3.762,208.475,3.762,203.677,3.762h-39.205c-4.78,0-6.957,0-24.836,47.825l-0.673,1.741l-16.828,6.86l-1.609-0.669C92.774,47.819,76.57,41.886,72.346,41.886c-1.714,0-3.714,0.769-4.854,1.892l-27.787,27.16c-3.525,3.477-4.987,4.933,16.915,51.149l0.805,1.714l-6.881,16.381l-1.684,0.651C0,159.715,0,161.556,0,166.474v38.418c0,4.931,0,6.979,48.957,24.524l1.75,0.618l6.882,16.333l-0.739,1.669c-20.812,47.223-19.492,48.501-15.949,52.025L68.62,327.18c1.162,1.117,3.173,1.915,4.888,1.915c1.552,0,6.272,0,47.3-18.561l1.643-0.769l16.927,6.846l0.658,1.693c19.293,47.726,21.275,47.726,26.076,47.726h39.217c4.924,0,6.966,0,24.859-47.857l0.667-1.742l16.855-6.814l1.604,0.654c27.729,11.733,43.925,17.654,48.122,17.654c1.699,0,3.717-0.745,4.876-1.893l27.832-27.219c3.501-3.495,4.96-4.924-16.981-51.096l-0.816-1.734l6.869-16.31l1.64-0.643c48.938-18.981,48.938-20.831,48.938-25.755v-38.395C369.793,159.95,369.793,157.914,320.83,140.434z%20M184.896,247.203c-35.038,0-63.542-27.959-63.542-62.3c0-34.342,28.505-62.264,63.542-62.264c35.023,0,63.522,27.928,63.522,62.264C248.419,219.238,219.92,247.203,184.896,247.203z%27/%3E%3C/svg%3E");
|
||
}
|
||
|
||
/* REPLACE DEFAULT FACE for g with \-/ */
|
||
.task-list-item-checkbox[data-task="g"]:checked::before,
|
||
li[data-task="g"] > .task-list-item-checkbox:checked::before {
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<!-- Angry eyes \\/ -->\
|
||
<circle cx='70' cy='30' r='5' fill='black'/>\
|
||
<circle cx='30' cy='25' r='5' fill='black'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* DANGER LABEL */
|
||
/* .HyperMD-list-line[data-task="D"] > label,
|
||
.HyperMD-list-line[data-task="D"] > span,
|
||
.HyperMD-list-line[data-task="D"] > .cm-list-1,
|
||
.HyperMD-list-line[data-task="D"] > .cm-list-2,
|
||
.HyperMD-list-line[data-task="D"] > .cm-list-3 {
|
||
background-color: #33221d !important;
|
||
border-radius: 10px;
|
||
border-top-left-radius: 0px;
|
||
border-bottom-left-radius: 0px;
|
||
padding: 2px 4px;
|
||
margin: -4.8px;
|
||
transition: background-color calc(var(--animation-duration) * 0.6667) ease;
|
||
}
|
||
|
||
.HyperMD-list-line[data-task="D"] > label {
|
||
padding: 2px 0px !important;
|
||
border-radius: 0px;
|
||
}
|
||
|
||
.HyperMD-list-line[data-task="D"] > span {
|
||
background-color: #e59c4b !important;
|
||
margin-right: -3px;
|
||
padding-left: 6px;
|
||
} */
|
||
|
||
input[data-task="D"]:checked,
|
||
li[data-task="D"] > input:checked {
|
||
--checkbox-marker-color: transparent;
|
||
border: none;
|
||
border-radius: 0px !important;
|
||
background-color: currentColor;
|
||
background-image: none;
|
||
-webkit-mask-size: 100%;
|
||
mask-size: 100%;
|
||
-webkit-mask-position: 50% 50%;
|
||
mask-position: 50% 50%;
|
||
width: 26px !important;
|
||
height: 24px;
|
||
/* transform: translateX(-4px) !important;
|
||
}
|
||
|
||
input[data-task="D"]:checked:hover,
|
||
li[data-task="D"] > input:checked:hover {
|
||
/* transform: translateX(-4px) !important; */
|
||
color: var(--color-red);
|
||
}
|
||
|
||
input[data-task="D"]:checked,
|
||
li[data-task="D"] > input:checked,
|
||
li[data-task="D"] > p > input:checked {
|
||
color: var(--color-yellow);
|
||
background-color: currentColor;
|
||
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10V13ZM13 15.9888C13 15.4365 12.5523 14.9888 12 14.9888C11.4477 14.9888 11 15.4365 11 15.9888V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15.9888ZM9.37735 4.66136C10.5204 2.60393 13.4793 2.60393 14.6223 4.66136L21.2233 16.5431C22.3341 18.5427 20.8882 21 18.6008 21H5.39885C3.11139 21 1.66549 18.5427 2.77637 16.5431L9.37735 4.66136Z" fill="black"/></svg>');
|
||
}
|
||
|
||
/* REMOVE DEFAULT FACE for d */
|
||
.task-list-item-checkbox[data-task="D"]:checked::before,
|
||
li[data-task="D"] > .task-list-item-checkbox:checked::before {
|
||
background-image: none;
|
||
}
|
||
|
||
input[data-task="I"]:checked,
|
||
li[data-task="I"] > input:checked,
|
||
li[data-task="I"] > p > input:checked {
|
||
color: var(--color-yellow);
|
||
mask-size: 26px;
|
||
mask-position: center center;
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
|
||
<path d='M0 0h24v24H0z' fill='none'/>\
|
||
<path d='M9 20h6'/>\
|
||
<path d='M12 20v-8'/>\
|
||
<path d='M5 12h14l-4 -8h-6z'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* REMOVE DEFAULT FACE for I */
|
||
.task-list-item-checkbox[data-task="I"]:checked::before,
|
||
li[data-task="I"] > .task-list-item-checkbox:checked::before {
|
||
background-image: none;
|
||
}
|
||
|
||
input[data-task="!"]:checked,
|
||
li[data-task="!"] > input:checked,
|
||
li[data-task="!"] > p > input:checked {
|
||
color: var(--color-pink);
|
||
background-color: currentColor;
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M479.72-58.43q-47.34%200-80.77-33.67-33.43-33.66-33.43-80.93%200-47.27%2033.71-80.82%2033.71-33.54%2081.05-33.54%2047.34%200%2080.77%2033.78%2033.43%2033.78%2033.43%2081.22%200%2047.43-33.71%2080.69-33.71%2033.27-81.05%2033.27Zm.56-312.7q-45.58%200-77.52-31.88-31.93-31.88-31.93-77.29v-306.14q0-46.06%2031.65-77.9%2031.65-31.83%2077.24-31.83%2045.58%200%2077.52%2031.83%2031.93%2031.84%2031.93%2077.9v306.14q0%2045.41-31.65%2077.29-31.65%2031.88-77.24%2031.88Z%22%2F%3E%3C%2Fsvg%3E");
|
||
mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M479.72-58.43q-47.34%200-80.77-33.67-33.43-33.66-33.43-80.93%200-47.27%2033.71-80.82%2033.71-33.54%2081.05-33.54%2047.34%200%2080.77%2033.78%2033.43%2033.78%2033.43%2081.22%200%2047.43-33.71%2080.69-33.71%2033.27-81.05%2033.27Zm.56-312.7q-45.58%200-77.52-31.88-31.93-31.88-31.93-77.29v-306.14q0-46.06%2031.65-77.9%2031.65-31.83%2077.24-31.83%2045.58%200%2077.52%2031.83%2031.93%2031.84%2031.93%2077.9v306.14q0%2045.41-31.65%2077.29-31.65%2031.88-77.24%2031.88Z%22%2F%3E%3C%2Fsvg%3E");
|
||
}
|
||
|
||
/* REMOVE DEFAULT FACE for ! */
|
||
.task-list-item-checkbox[data-task="!"]:checked::before,
|
||
li[data-task="!"] > .task-list-item-checkbox:checked::before {
|
||
background-image: none;
|
||
}
|
||
|
||
input[data-task="b"]:checked,
|
||
li[data-task="b"] > input:checked,
|
||
li[data-task="b"] > p > input:checked {
|
||
color: white;
|
||
background-color: currentColor;
|
||
mask-size: 26px;
|
||
mask-position: center center;
|
||
border: 4px solid white;
|
||
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='23' cy='50' r='7' fill='pink'/>\
|
||
<circle cx='77' cy='50' r='7' fill='pink'/>\
|
||
<circle cx='35' cy='40' r='7' fill='black'/>\
|
||
<circle cx='65' cy='40' r='7' fill='black'/>\
|
||
<path d='M40 57 Q50 70 60 57' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
|
||
</svg>");
|
||
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
|
||
<path d='M0 0h24v24H0z' fill='none'/>\
|
||
<path d='M12 3c2.779 0 5.349 1.556 7.243 4.082c1.728 2.306 2.757 5.259 2.757 8.016c0 1.47-.293 2.718-.903 3.745c-.603 1.014-1.479 1.758-2.582 2.257c-1.593.718-3.335.9-6.515.9c-3.175 0-4.92-.183-6.514-.9c-1.012-.457-1.833-1.12-2.426-2.01l-.157-.247c-.61-1.028-.903-2.274-.903-3.745c0-2.757 1.03-5.71 2.757-8.016c1.893-2.526 4.463-4.082 7.243-4.082'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* add DEFAULT FACE for b blob da pop hehehehhe */
|
||
.task-list-item-checkbox[data-task="b"]:checked::before,
|
||
li[data-task="b"] > .task-list-item-checkbox:checked::before {
|
||
border: 2px solid white !important;
|
||
background-color: currentColor;
|
||
background-image: none;
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='27' cy='50' r='7' fill='pink'/>\
|
||
<circle cx='73' cy='50' r='7' fill='pink'/>\
|
||
<circle cx='37' cy='40' r='6' fill='black'/>\
|
||
<circle cx='63' cy='40' r='6' fill='black'/>\
|
||
<path d='M40 55 Q50 65 60 55' stroke='black' stroke-width='8' fill='none' stroke-linecap='round'/>\
|
||
</svg>");
|
||
}
|
||
|
||
/* w - weather */
|
||
input[data-task="w"]:checked,
|
||
li[data-task="w"] > input:checked,
|
||
li[data-task="w"] > p > input:checked {
|
||
color: var(--color-blue);
|
||
background-color: currentColor;
|
||
mask-size: 26px;
|
||
mask-position: center center;
|
||
border: 4px solid var(--color-blue);
|
||
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 384'><path d='M384,186.8c0-55.76-46.656-101.12-104-101.12c-4.36,0-8.664,0.256-12.912,0.776C253.568,45.32,213.632,16,168,16 C110.656,16,64,61.4,64,117.2c0,0.896,0.008,1.784,0.032,2.672C26.592,130.024,0,163.096,0,202.32C0,249.56,39.48,288,88,288 c8.832,0,16-7.168,16-16c0-8.832-7.168-16-16-16c-30.88,0-56-24.08-56-53.68c0-27.928,21.888-50.888,50.912-53.416 c4.536-0.4,8.696-2.712,11.424-6.36c2.728-3.656,3.768-8.296,2.864-12.76c-0.8-3.928-1.2-8.16-1.2-12.584 C96,79.04,128.304,48,168,48c35.72,0,66.368,25.576,71.288,59.496c0.664,4.592,3.296,8.672,7.208,11.176 c3.92,2.504,8.712,3.176,13.168,1.864c6.416-1.896,13.256-2.856,20.336-2.856c39.696,0,72,31.008,72,69.12 c0,38.16-32.304,69.2-72,69.2h-4.208c-15.304-31.416-40.344-64.936-47.088-73.736c-6.056-7.896-19.344-7.896-25.4,0 C193.4,195.184,144,261.4,144,296c0,39.696,32.304,72,72,72s72-32.304,72-72c0-2.6-0.36-5.432-0.88-8.352 C341.144,284.064,384,240.264,384,186.8z M216,336c-22.056,0-40-17.944-40-40c0-14.336,20.544-49.064,40-76.88 c13.32,19.04,27.136,41.312,34.536,58.072c0.232,0.68,0.512,1.336,0.832,1.968C254.256,286.024,256,291.872,256,296 C256,318.056,238.056,336,216,336z'/></svg>");
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-position: center;
|
||
-webkit-mask-size: contain;
|
||
mask-image: -webkit-mask-image;
|
||
mask-repeat: no-repeat;
|
||
mask-position: center;
|
||
mask-size: contain;
|
||
}
|
||
|
||
.task-list-item-checkbox[data-task="w"]:checked::before,
|
||
li[data-task="w"] > .task-list-item-checkbox:checked::before {
|
||
border: 2px solid var(--color-blue) !important;
|
||
color: var(--color-blue);
|
||
background-color: currentColor;
|
||
background-image: none;
|
||
}
|
||
|
||
input[data-task="w"]:checked:hover,
|
||
li[data-task="w"] > input:checked:hover {
|
||
transform: translateX(0) !important;
|
||
border: 2px solid var(--color-blue) !important;
|
||
color: var(--color-blue) !important;
|
||
background-color: currentColor;
|
||
}
|
||
}
|
||
|
||
/* hide strikethrough - works regardless of custom checkboxes */
|
||
.hide-strikethrough .markdown-preview-view .task-list-item.is-checked,
|
||
.hide-strikethrough .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
|
||
.hide-strikethrough .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] {
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
/* ====== LOADING SCREEN TEXT ===== */
|
||
.progress-bar-message::before {
|
||
padding: 10px;
|
||
content: "";
|
||
display: inline-block;
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-right: 6px;
|
||
border-radius: 50%;
|
||
background-color: var(--color-yellow);
|
||
background-image: url("data:image/svg+xml;utf8,\
|
||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
|
||
<circle cx='13' cy='60' r='16' fill='orange'/>\
|
||
<circle cx='87' cy='58' r='16' fill='orange'/>\
|
||
<path d='M15 40 Q25 65 40 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
|
||
<path d='M60 40 Q65 65 85 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
|
||
<ellipse cx='50' cy='78' rx='15' ry='18' fill='maroon'/>\
|
||
</svg>");
|
||
background-size: 70% 70%;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
vertical-align: middle;
|
||
|
||
animation: float calc(var(--animation-duration) * 6.6667) ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0px);
|
||
}
|
||
50% {
|
||
transform: translateY(8px);
|
||
}
|
||
}
|
||
|
||
.progress-bar-message {
|
||
font-size: 0;
|
||
}
|
||
|
||
/* ===== style settings ===== */
|
||
/* @settings
|
||
name: blobob theme
|
||
id: blobob-theme
|
||
collapsed: false
|
||
settings:
|
||
|
||
########################################
|
||
# Theme
|
||
########################################
|
||
|
||
- id: heading-lf
|
||
title: Look & Feel
|
||
type: heading
|
||
level: 1
|
||
collapsed: false
|
||
|
||
- id: dark-theme-colors
|
||
title: Dark Theme Colors
|
||
description: Set the theme colors for dark mode
|
||
type: class-select
|
||
default: neutral-gray
|
||
options:
|
||
|
||
- label: Amoled
|
||
value: amoled
|
||
- label: Darker Gray
|
||
value: darker-gray
|
||
- label: Neutral Gray
|
||
value: neutral-gray
|
||
- label: Slate Smoke
|
||
value: slate-smoke
|
||
- label: Arctic Ice
|
||
value: arctic-ice
|
||
- label: Noble Blue
|
||
value: noble-blue
|
||
- label: Cold Memory
|
||
value: cold-memory
|
||
- label: Dark Night
|
||
value: dark-night
|
||
- label: Deep Blue
|
||
value: deep-blue
|
||
- label: Deep Purple
|
||
value: deep-purple
|
||
- label: Violet Dream
|
||
value: violet-dream
|
||
- label: Magic Purple
|
||
value: magic-purply
|
||
- label: Lavendar
|
||
value: lavendar
|
||
- label: Emerald
|
||
value: midnight-emerald
|
||
- label: Muted Green
|
||
value: muted-green
|
||
- label: More Olives
|
||
value: more-olives
|
||
- label: Deep Green
|
||
value: forest-green
|
||
- label: Rose Gold
|
||
value: rose-gold
|
||
- label: Crimson Twilight
|
||
value: crimson-twilight
|
||
- label: Wine
|
||
value: wine
|
||
- label: Deep Hotpink
|
||
value: deep-hotpink
|
||
- label: Deep Magenta
|
||
value: deep-magenta
|
||
- label: Golden Earth
|
||
value: golden-earth
|
||
- label: Golden Hour
|
||
value: golden-hour
|
||
- label: Caramel
|
||
value: caramel
|
||
- label: Chocolate
|
||
value: chocolate
|
||
- label: Dark Chocolate
|
||
value: dark-chocolate
|
||
- label: Comfort Chocolate
|
||
value: comfort-choco
|
||
- label: Tasty Chocolate
|
||
value: tasty-chocolate
|
||
- label: Tasty Chocolate 2
|
||
value: tasty-chocolate-2
|
||
- label: Leather
|
||
value: leather
|
||
- label: Velvet Maroon
|
||
value: velvet
|
||
- label: Deep Red
|
||
value: deep-red
|
||
- label: Mafia Red
|
||
value: mafia-red
|
||
- label: Red Forest
|
||
value: red-forest
|
||
- label: Green Road
|
||
value: green-road
|
||
|
||
|
||
|
||
|
||
- id: light-theme-colors
|
||
title: Light Theme Colors
|
||
description: Set the theme colors for light mode
|
||
type: class-select
|
||
default: paper-white
|
||
options:
|
||
- label: Cloud White
|
||
value: cloud-white
|
||
- label: Paper White
|
||
value: paper-white
|
||
- label: Light Gray
|
||
value: light-gray
|
||
- label: Sand
|
||
value: soft-sand
|
||
- label: Peach
|
||
value: peach
|
||
- label: Yellow
|
||
value: yellow
|
||
- label: Green
|
||
value: green
|
||
- label: Cyan
|
||
value: cyan
|
||
- label: Blue
|
||
value: blue
|
||
- label: Azure
|
||
value: azure
|
||
- label: Purple
|
||
value: purple
|
||
- label: Pink
|
||
value: pink
|
||
- label: Herb
|
||
value: herb
|
||
- label: Olive
|
||
value: olive
|
||
- label: Jade
|
||
value: jade
|
||
- label: Rose
|
||
value: rose
|
||
- label: Yellow Teeth
|
||
value: yellow-teeth
|
||
- label: Toothpaste
|
||
value: toothpaste
|
||
- label: Blood
|
||
value: blood
|
||
- label: Corporate
|
||
value: corporate
|
||
- label: Disgust
|
||
value: disgust
|
||
- label: Payesh
|
||
value: payesh
|
||
- label: Chicken
|
||
value: chicken
|
||
- label: Cream
|
||
value: cream
|
||
- label: Cream Blue
|
||
value: cream-blue
|
||
- label: 50% Gray
|
||
value: gray
|
||
|
||
- id: workspace-layout
|
||
title: Layout & Tab Style
|
||
description: Set the workspace layout for desktop
|
||
type: class-select
|
||
default: default-tab-rounded
|
||
options:
|
||
- label: One
|
||
value: default-tab
|
||
- label: Two
|
||
value: default-tab-rounded
|
||
- label: Three
|
||
value: bubble
|
||
|
||
- id: bubble-styling
|
||
title: Bubble Layout - Color options
|
||
description: Only affects dark mode
|
||
type: class-select
|
||
default: bubble-dark-inside
|
||
options:
|
||
- label: Dark inside
|
||
value: bubble-dark-inside
|
||
- label: Focused dark inside
|
||
value: bubble-border
|
||
- label: Dark outside
|
||
value: bubble-dark-outside
|
||
- label: Focused Dark outside
|
||
value: bubble-focused-dark-outside
|
||
|
||
- id: icons-buttons
|
||
title: Icons & Buttons
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
|
||
- id: tiptips
|
||
title: Select, Buttons & Input Radiuses
|
||
description: Set the border radius for selects, buttons, and inputs
|
||
type: class-select
|
||
default: circular-tiptip
|
||
options:
|
||
- label: Circular
|
||
value: circular-tiptip
|
||
- label: Rounded
|
||
value: rounded-tiptip
|
||
- label: Round
|
||
value: round-tiptip
|
||
- label: Sharp
|
||
value: sharp-tiptip
|
||
- label: Hexagon
|
||
value: hexagon-tiptip
|
||
- label: Scoop
|
||
value: scoop-tiptip
|
||
- label: Squircle
|
||
value: squircle-tiptip
|
||
- label: Sock
|
||
value: sock-tiptip
|
||
- label: Eye
|
||
value: eye-tiptip
|
||
|
||
- id: button-style
|
||
title: Button & dropdown select Style
|
||
type: class-select
|
||
default: default
|
||
options:
|
||
- label: Default
|
||
value: default
|
||
- label: Bordered
|
||
value: button-bordered
|
||
- label: 3D
|
||
value: button-3d
|
||
- label: Bordered 3D
|
||
value: button-bordered-3d
|
||
- label: Glow
|
||
value: button-glow
|
||
|
||
- id: button-animation
|
||
title: Button Animation Style
|
||
type: class-select
|
||
default: default
|
||
options:
|
||
- label: None
|
||
value: none
|
||
- label: Scale
|
||
value: button-scale
|
||
- label: Shrink
|
||
value: button-shrink
|
||
- label: Bounce
|
||
value: button-bounce
|
||
- label: Tilt
|
||
value: button-tilt
|
||
|
||
- id: icon-style
|
||
title: Icon style
|
||
description: Set the icon style
|
||
type: class-select
|
||
default: filled
|
||
options:
|
||
- label: Default
|
||
value: default
|
||
- label: Filled
|
||
value: filled
|
||
- label: Big
|
||
value: big
|
||
- label: Big Filled
|
||
value: big-filled
|
||
|
||
- id: ui-elements
|
||
title: UI Elements
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
|
||
- id: focus-mode
|
||
title: Focus mode
|
||
description: Removes UI elements. You should assign a hotkey to use it.
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: true
|
||
|
||
- id: inline-title
|
||
title: Inline Title Alignment
|
||
description:
|
||
type: class-select
|
||
default: center-inline-title
|
||
options:
|
||
- label: Center
|
||
value: center-inline-title
|
||
- label: Left
|
||
value: left-inline-title
|
||
- label: Right
|
||
value: right-inline-title
|
||
- label: --- special ---
|
||
value: special-inline-title
|
||
|
||
- id: view-title-casing
|
||
title: View Header title casing
|
||
description: Change the text case of the view header title
|
||
type: class-select
|
||
default: view-title-case-none
|
||
options:
|
||
- label: No change
|
||
value: view-title-case-none
|
||
- label: Uppercase
|
||
value: view-title-case-upper
|
||
- label: Lowercase
|
||
value: view-title-case-lower
|
||
|
||
- id: hide-breadcrumbs
|
||
title: Hide Breadcrumbs
|
||
type: class-toggle
|
||
default: true
|
||
|
||
- id: ribbon-style
|
||
title: Ribbon style
|
||
description: Set the ribbon style
|
||
type: class-select
|
||
default: default
|
||
options:
|
||
- label: Default
|
||
value: default
|
||
- label: Unanimated Ribbon
|
||
value: ribbon-no-anim
|
||
|
||
- id: status-bar
|
||
title: Status bar behaviour
|
||
type: class-select
|
||
default: default
|
||
options:
|
||
- label: Default
|
||
value: default
|
||
- label: Show on hover
|
||
value: dim-status-bar
|
||
- label: Hidden
|
||
value: hide-status-bar
|
||
- label: Centered
|
||
value: centered-statusbar
|
||
|
||
- id: color-min-max
|
||
title: Color Minimize & Maximize buttons
|
||
type: class-select
|
||
default: none
|
||
options:
|
||
- label: none
|
||
value: none
|
||
- label: Green-min Yellow-max
|
||
value: g-min-y-max
|
||
- label: Yellow-min Green-max
|
||
value: y-min-g-max
|
||
|
||
- id: table-hor-lines-only
|
||
title: Hide Vertical Lines in Tables
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: false
|
||
|
||
- id: table-ver-lines-only
|
||
title: Hide Horizontal Lines in Tables
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: false
|
||
|
||
- id: heading-editor
|
||
title: Editor & Text Appearance
|
||
type: heading
|
||
level: 1
|
||
collapsed: true
|
||
|
||
- id: highlight-styles
|
||
title: Highlight styles
|
||
description: change the style of ==highlight==
|
||
type: class-select
|
||
default: default
|
||
options:
|
||
- label: Default Highlight
|
||
value: default
|
||
- label: Bordered Highlight
|
||
value: bordered-highlight
|
||
- label: Underlined Highlight
|
||
value: underlined-highlight
|
||
- label: Only border
|
||
value: only-border
|
||
- label: Only underline
|
||
value: only-underline
|
||
|
||
- id: lined
|
||
title: Lined Notebook
|
||
description: Adds lines to the editor
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: true
|
||
|
||
- id: active-line
|
||
title: Active Line Behaviour
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
|
||
- id: highlight-active-line
|
||
title: Highlight active line
|
||
type: class-toggle
|
||
default: true
|
||
addCommand: true
|
||
|
||
- id: highlight-active-line-with-face
|
||
title: Highlight active line with face
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: false
|
||
|
||
- id: huge-text-active-line
|
||
title: Big active line text
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: true
|
||
|
||
- id: center-active-line
|
||
title: Center active line
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: true
|
||
|
||
- id: dim-inactive
|
||
title: Darken inactive lines
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: true
|
||
|
||
- id: float-inactive
|
||
title: Make inactive lines float
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: true
|
||
|
||
- id: pre-act-line
|
||
title: Active Line Prefix
|
||
type: heading
|
||
level: 3
|
||
collapsed: true
|
||
|
||
- id: text-before-active-line
|
||
title: Enable active line prefix
|
||
description: Text shown before the active line
|
||
type: class-toggle
|
||
default: false
|
||
|
||
- id: before-active-line
|
||
title: Active line prefix text
|
||
description: Customize the text shown before the active line (e.g. ">>" or "→")
|
||
type: variable-text
|
||
default: ">>"
|
||
quotes: true
|
||
|
||
- id: before-active-line-margin
|
||
title: Active line prefix margin
|
||
description: Negative value pulls the prefix outside the editor edge
|
||
type: variable-number
|
||
default: -20
|
||
format: px
|
||
|
||
- id: before-active-line-color
|
||
title: Active line prefix color
|
||
description: Color of the prefix text shown before the active line
|
||
type: variable-color
|
||
format: hex
|
||
opacity: false
|
||
default: '#7c3aed'
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
########################################
|
||
# Text colours
|
||
########################################
|
||
|
||
- id: heading-text-colors-section
|
||
title: Text Emphasis Colors
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
|
||
- id: italic
|
||
title: Italic Text Color
|
||
description: Sets the color for all italic text
|
||
type: class-select
|
||
default: italic-color-normal
|
||
options:
|
||
- label: Normal Color
|
||
value: italic-color-normal
|
||
- label: Muted Color
|
||
value: italic-color-muted
|
||
- label: Accent Color
|
||
value: italic-color-accent
|
||
- label: Red
|
||
value: italic-color-red
|
||
- label: Orange
|
||
value: italic-color-orange
|
||
- label: Yellow
|
||
value: italic-color-yellow
|
||
- label: Green
|
||
value: italic-color-green
|
||
- label: Cyan
|
||
value: italic-color-cyan
|
||
- label: Blue
|
||
value: italic-color-blue
|
||
- label: Purple
|
||
value: italic-color-purple
|
||
- label: Pink
|
||
value: italic-color-pink
|
||
- label: Gray
|
||
value: italic-color-gray
|
||
- label: Brown
|
||
value: italic-color-brown
|
||
|
||
- id: heading-bold
|
||
title: Bold Text Color
|
||
description: Sets the color for all bold text
|
||
type: class-select
|
||
default: bold-color-normal
|
||
options:
|
||
- label: Normal Color
|
||
value: bold-color-normal
|
||
- label: Muted Color
|
||
value: bold-color-muted
|
||
- label: Accent Color
|
||
value: bold-color-accent
|
||
- label: Red
|
||
value: bold-color-red
|
||
- label: Orange
|
||
value: bold-color-orange
|
||
- label: Yellow
|
||
value: bold-color-yellow
|
||
- label: Green
|
||
value: bold-color-green
|
||
- label: Cyan
|
||
value: bold-color-cyan
|
||
- label: Blue
|
||
value: bold-color-blue
|
||
- label: Purple
|
||
value: bold-color-purple
|
||
- label: Pink
|
||
value: bold-color-pink
|
||
- label: Gray
|
||
value: bold-color-gray
|
||
- label: Brown
|
||
value: bold-color-brown
|
||
|
||
- id: heading-bolditalic
|
||
title: Bold Italic Text Color
|
||
description: Sets the color for all bold italic text
|
||
type: class-select
|
||
default: bolditalic-color-normal
|
||
options:
|
||
- label: Normal Color
|
||
value: bolditalic-color-normal
|
||
- label: Muted Color
|
||
value: bolditalic-color-muted
|
||
- label: Accent Color
|
||
value: bolditalic-color-accent
|
||
- label: Red
|
||
value: bolditalic-color-red
|
||
- label: Orange
|
||
value: bolditalic-color-orange
|
||
- label: Yellow
|
||
value: bolditalic-color-yellow
|
||
- label: Green
|
||
value: bolditalic-color-green
|
||
- label: Cyan
|
||
value: bolditalic-color-cyan
|
||
- label: Blue
|
||
value: bolditalic-color-blue
|
||
- label: Purple
|
||
value: bolditalic-color-purple
|
||
- label: Pink
|
||
value: bolditalic-color-pink
|
||
- label: Gray
|
||
value: bolditalic-color-gray
|
||
- label: Brown
|
||
value: bolditalic-color-brown
|
||
|
||
|
||
########################################
|
||
# Headings
|
||
########################################
|
||
|
||
- id: heading-colors-section
|
||
title: Heading Colors
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
|
||
- id: heading-colors
|
||
title: All Headings Color
|
||
description: Set the color of all headings
|
||
type: class-select
|
||
default: heading-color-accent
|
||
options:
|
||
- label: Normal Color
|
||
value: heading-color-normal
|
||
- label: Accent Color
|
||
value: heading-color-accent
|
||
- label: Red
|
||
value: heading-color-red
|
||
- label: Orange
|
||
value: heading-color-orange
|
||
- label: Yellow
|
||
value: heading-color-yellow
|
||
- label: Green
|
||
value: heading-color-green
|
||
- label: Cyan
|
||
value: heading-color-cyan
|
||
- label: Blue
|
||
value: heading-color-blue
|
||
- label: Purple
|
||
value: heading-color-purple
|
||
- label: Pink
|
||
value: heading-color-pink
|
||
- label: Gray
|
||
value: heading-color-gray
|
||
- label: Brown
|
||
value: heading-color-brown
|
||
|
||
- id: per-heading-colors-toggle
|
||
title: Enable Per-Heading Colors
|
||
description: Allow individual color selection for each heading level (H1-H6)
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: false
|
||
|
||
- id: h1-color
|
||
title: H1 Color
|
||
description: Set the color for H1 headings
|
||
type: class-select
|
||
default: h1-color-accent
|
||
showIf: per-heading-colors-toggle
|
||
options:
|
||
- label: Normal Color
|
||
value: h1-color-normal
|
||
- label: Accent Color
|
||
value: h1-color-accent
|
||
- label: Red
|
||
value: h1-color-red
|
||
- label: Orange
|
||
value: h1-color-orange
|
||
- label: Yellow
|
||
value: h1-color-yellow
|
||
- label: Green
|
||
value: h1-color-green
|
||
- label: Cyan
|
||
value: h1-color-cyan
|
||
- label: Blue
|
||
value: h1-color-blue
|
||
- label: Purple
|
||
value: h1-color-purple
|
||
- label: Pink
|
||
value: h1-color-pink
|
||
- label: Gray
|
||
value: h1-color-gray
|
||
- label: Brown
|
||
value: h1-color-brown
|
||
|
||
- id: h2-color
|
||
title: H2 Color
|
||
description: Set the color for H2 headings
|
||
type: class-select
|
||
default: h2-color-accent
|
||
showIf: per-heading-colors-toggle
|
||
options:
|
||
- label: Normal Color
|
||
value: h2-color-normal
|
||
- label: Accent Color
|
||
value: h2-color-accent
|
||
- label: Red
|
||
value: h2-color-red
|
||
- label: Orange
|
||
value: h2-color-orange
|
||
- label: Yellow
|
||
value: h2-color-yellow
|
||
- label: Green
|
||
value: h2-color-green
|
||
- label: Cyan
|
||
value: h2-color-cyan
|
||
- label: Blue
|
||
value: h2-color-blue
|
||
- label: Purple
|
||
value: h2-color-purple
|
||
- label: Pink
|
||
value: h2-color-pink
|
||
- label: Gray
|
||
value: h2-color-gray
|
||
- label: Brown
|
||
value: h2-color-brown
|
||
|
||
- id: h3-color
|
||
title: H3 Color
|
||
description: Set the color for H3 headings
|
||
type: class-select
|
||
default: h3-color-accent
|
||
showIf: per-heading-colors-toggle
|
||
options:
|
||
- label: Normal Color
|
||
value: h3-color-normal
|
||
- label: Accent Color
|
||
value: h3-color-accent
|
||
- label: Red
|
||
value: h3-color-red
|
||
- label: Orange
|
||
value: h3-color-orange
|
||
- label: Yellow
|
||
value: h3-color-yellow
|
||
- label: Green
|
||
value: h3-color-green
|
||
- label: Cyan
|
||
value: h3-color-cyan
|
||
- label: Blue
|
||
value: h3-color-blue
|
||
- label: Purple
|
||
value: h3-color-purple
|
||
- label: Pink
|
||
value: h3-color-pink
|
||
- label: Gray
|
||
value: h3-color-gray
|
||
- label: Brown
|
||
value: h3-color-brown
|
||
|
||
- id: h4-color
|
||
title: H4 Color
|
||
description: Set the color for H4 headings
|
||
type: class-select
|
||
default: h4-color-accent
|
||
showIf: per-heading-colors-toggle
|
||
options:
|
||
- label: Normal Color
|
||
value: h4-color-normal
|
||
- label: Accent Color
|
||
value: h4-color-accent
|
||
- label: Red
|
||
value: h4-color-red
|
||
- label: Orange
|
||
value: h4-color-orange
|
||
- label: Yellow
|
||
value: h4-color-yellow
|
||
- label: Green
|
||
value: h4-color-green
|
||
- label: Cyan
|
||
value: h4-color-cyan
|
||
- label: Blue
|
||
value: h4-color-blue
|
||
- label: Purple
|
||
value: h4-color-purple
|
||
- label: Pink
|
||
value: h4-color-pink
|
||
- label: Gray
|
||
value: h4-color-gray
|
||
- label: Brown
|
||
value: h4-color-brown
|
||
|
||
- id: h5-color
|
||
title: H5 Color
|
||
description: Set the color for H5 headings
|
||
type: class-select
|
||
default: h5-color-accent
|
||
showIf: per-heading-colors-toggle
|
||
options:
|
||
- label: Normal Color
|
||
value: h5-color-normal
|
||
- label: Accent Color
|
||
value: h5-color-accent
|
||
- label: Red
|
||
value: h5-color-red
|
||
- label: Orange
|
||
value: h5-color-orange
|
||
- label: Yellow
|
||
value: h5-color-yellow
|
||
- label: Green
|
||
value: h5-color-green
|
||
- label: Cyan
|
||
value: h5-color-cyan
|
||
- label: Blue
|
||
value: h5-color-blue
|
||
- label: Purple
|
||
value: h5-color-purple
|
||
- label: Pink
|
||
value: h5-color-pink
|
||
- label: Gray
|
||
value: h5-color-gray
|
||
- label: Brown
|
||
value: h5-color-brown
|
||
|
||
- id: h6-color
|
||
title: H6 Color
|
||
description: Set the color for H6 headings
|
||
type: class-select
|
||
default: h6-color-accent
|
||
showIf: per-heading-colors-toggle
|
||
options:
|
||
- label: Normal Color
|
||
value: h6-color-normal
|
||
- label: Accent Color
|
||
value: h6-color-accent
|
||
- label: Red
|
||
value: h6-color-red
|
||
- label: Orange
|
||
value: h6-color-orange
|
||
- label: Yellow
|
||
value: h6-color-yellow
|
||
- label: Green
|
||
value: h6-color-green
|
||
- label: Cyan
|
||
value: h6-color-cyan
|
||
- label: Blue
|
||
value: h6-color-blue
|
||
- label: Purple
|
||
value: h6-color-purple
|
||
- label: Pink
|
||
value: h6-color-pink
|
||
- label: Gray
|
||
value: h6-color-gray
|
||
- label: Brown
|
||
value: h6-color-brown
|
||
|
||
########################################
|
||
# Lists & Checkboxes
|
||
########################################
|
||
- id: heading-checkboxes
|
||
title: Lists & Checkboxes
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
|
||
- id: custom-bullets-enabled
|
||
title: Enable custom bullets
|
||
type: class-toggle
|
||
default: true
|
||
- id: custom-bullet-level-1
|
||
title: 1st level bullet
|
||
type: variable-text
|
||
default: "+"
|
||
quotes: true
|
||
- id: custom-bullet-level-2
|
||
title: 2nd level bullet
|
||
type: variable-text
|
||
default: "-"
|
||
quotes: true
|
||
- id: custom-bullet-level-3
|
||
title: 3rd level bullet
|
||
type: variable-text
|
||
default: "="
|
||
quotes: true
|
||
|
||
- id: disable-checkboxes
|
||
title: Disable checkboxes
|
||
description: Disable this if you don't want to use blobob theme's checkboxes.
|
||
type: class-toggle
|
||
default: false
|
||
|
||
- id: hide-strikethrough
|
||
title: Hide Strikethrough in checked list
|
||
type: class-toggle
|
||
default: true
|
||
addCommand: false
|
||
|
||
########################################
|
||
# Tabs & Navigation
|
||
########################################
|
||
- id: heading-tabs
|
||
title: Tabs & Navigation
|
||
type: heading
|
||
level: 1
|
||
collapsed: true
|
||
|
||
- id: hide-tab-list
|
||
title: Hide tab list
|
||
type: class-toggle
|
||
default: true
|
||
|
||
- id: hide-tab-close-btn
|
||
title: Hide tab close button
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: false
|
||
|
||
- id: pin-icon-only
|
||
title: Show only icon on pinned tabs
|
||
type: class-toggle
|
||
default: true
|
||
addCommand: false
|
||
|
||
- id: hide-sidebar-toggle-left
|
||
title: Hide Left Sidebar Toggle Button
|
||
type: class-toggle
|
||
default: false
|
||
|
||
- id: hide-sidebar-toggle-right
|
||
title: Hide Right Sidebar Toggle Button
|
||
type: class-toggle
|
||
default: false
|
||
|
||
|
||
- id: tab-top-left-style
|
||
title: Tab Style (Left top)
|
||
description: Style for the top-left sidebar tab strip
|
||
type: class-select
|
||
default: tab-top-left-icons
|
||
options:
|
||
- label: Icons Only
|
||
value: tab-top-left-icons
|
||
- label: Labels Only
|
||
value: tab-top-left-labels
|
||
- label: Icons + Labels
|
||
value: tab-top-left-icons-labels
|
||
|
||
- id: tab-top-right-style
|
||
title: Tab Style (Right top)
|
||
description: Style for the top-right sidebar tab strip
|
||
type: class-select
|
||
default: tab-top-right-icons
|
||
options:
|
||
- label: Icons Only
|
||
value: tab-top-right-icons
|
||
- label: Labels Only
|
||
value: tab-top-right-labels
|
||
- label: Icons + Labels
|
||
value: tab-top-right-icons-labels
|
||
|
||
- id: tab-left-style
|
||
title: Tab Style (Left)
|
||
description: Style for the left sidebar tab strip
|
||
type: class-select
|
||
default: tab-left-icons
|
||
options:
|
||
- label: Icons Only
|
||
value: tab-left-icons
|
||
- label: Labels Only
|
||
value: tab-left-labels
|
||
- label: Icons + Labels
|
||
value: tab-left-icons-labels
|
||
|
||
- id: tab-right-style
|
||
title: Tab Style (Right)
|
||
description: Style for the right sidebar tab strip
|
||
type: class-select
|
||
default: tab-right-icons
|
||
options:
|
||
- label: Icons Only
|
||
value: tab-right-icons
|
||
- label: Labels Only
|
||
value: tab-right-labels
|
||
- label: Icons + Labels
|
||
value: tab-right-icons-labels
|
||
|
||
########################################
|
||
# File Explorer
|
||
########################################
|
||
|
||
- id: heading-file-explorer
|
||
title: File Explorer
|
||
type: heading
|
||
level: 1
|
||
collapsed: true
|
||
|
||
# ── Folders ──────────────────────────────
|
||
|
||
- id: folder-style
|
||
title: Folders Style
|
||
description: Select the folder style and color accent
|
||
type: class-select
|
||
default: none
|
||
options:
|
||
- label: None
|
||
value: folder-none
|
||
- label: Accented
|
||
value: accented
|
||
- label: Mechanical
|
||
value: mechanical
|
||
- label: Thick
|
||
value: thick
|
||
- label: Huge
|
||
value: huge
|
||
- label: Accent Dot
|
||
value: folder-dot-accent
|
||
- label: Rainbow Dot
|
||
value: folder-dot-rainbow
|
||
- label: Accent Border
|
||
value: folder-frame-accent
|
||
- label: Rainbow Border
|
||
value: folder-frame-rainbow
|
||
- label: Accent Subtle
|
||
value: folder-subtle-accent
|
||
- label: Rainbow Subtle
|
||
value: folder-subtle-rainbow
|
||
- label: Accent Solid
|
||
value: folder-solid-accent
|
||
- label: Rainbow Solid
|
||
value: folder-solid-rainbow
|
||
- label: Animated Hue
|
||
value: folder-gradient-hue
|
||
|
||
- id: bouncy-folders
|
||
title: Bouncy Folders
|
||
description: "Adds a bounce animation to folders. Works with any folder style."
|
||
type: class-toggle
|
||
default: true
|
||
|
||
- id: nav-folder-radius
|
||
title: Folder Border Radius
|
||
description: Border radius of folders
|
||
type: variable-number-slider
|
||
default: 8
|
||
min: 0
|
||
max: 24
|
||
step: 1
|
||
format: px
|
||
|
||
- id: bold-folders
|
||
title: Bold folder title
|
||
description: Make folder names bold in the file explorer
|
||
type: class-toggle
|
||
default: false
|
||
|
||
- id: center-folder-title
|
||
title: Center folder title
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: false
|
||
|
||
- id: hide-folder-arrow
|
||
title: Hide folder Collapse Arrow
|
||
description: Hides the chevron/arrow icon on folder titles (but shows iconic icons ;D)
|
||
type: class-toggle
|
||
default: false
|
||
|
||
# ── Files ────────────────────────────────
|
||
|
||
- id: file-exp
|
||
title: File Explorer active file styling
|
||
description:
|
||
type: class-select
|
||
default: file-exp-left
|
||
options:
|
||
- label: Center
|
||
value: file-exp-center
|
||
- label: Left
|
||
value: file-exp-left
|
||
- label: none
|
||
value: none
|
||
|
||
- id: nav-file-radius
|
||
title: File Border Radius
|
||
description: Border radius of files
|
||
type: variable-number-slider
|
||
default: 8
|
||
min: 0
|
||
max: 24
|
||
step: 1
|
||
format: px
|
||
|
||
# ── Other ────────────────────────────────
|
||
|
||
- id: nav-hide-text
|
||
title: Hide Action Buttons in File Explorer with Text
|
||
description: Text shown when buttons are hidden in file explorer. USE "" between your text
|
||
type: variable-text
|
||
default: My Vault
|
||
quote: true
|
||
|
||
- id: nav-indentation-guide-width
|
||
title: File explorer indentation guides thickness
|
||
type: variable-number-slider
|
||
format: px
|
||
default: 0
|
||
min: 0
|
||
max: 3
|
||
step: 1
|
||
|
||
|
||
########################################
|
||
# Properties Panel
|
||
########################################
|
||
- id: heading-properties
|
||
title: Properties Panel
|
||
type: heading
|
||
level: 1
|
||
collapsed: true
|
||
|
||
- id: properties-style
|
||
title: Properties Style
|
||
description: Select the properties layout style
|
||
type: class-select
|
||
default: properties-1
|
||
options:
|
||
- label: Style 1
|
||
value: properties-1
|
||
- label: Style 2
|
||
value: properties-2
|
||
- label: Style 3
|
||
value: properties-3
|
||
- label: Style 4
|
||
value: properties-4
|
||
- label: Style 5
|
||
value: properties-5
|
||
- label: Obsidian Default
|
||
value: Obsidian-default
|
||
|
||
- id: dim-properties
|
||
title: Dim Properties unless hovered
|
||
type: class-toggle
|
||
default: true
|
||
addCommand: false
|
||
|
||
- id: hide-properties-arrow
|
||
title: Hide arrow in properties heading
|
||
type: class-toggle
|
||
default: true
|
||
addCommand: false
|
||
|
||
- id: center-properties-heading
|
||
title: Center properties heading
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: false
|
||
|
||
- id: cssclasses-properties-style
|
||
title: Cssclasses Style
|
||
type: class-select
|
||
default: cssclasses-3
|
||
options:
|
||
- label: Style 1
|
||
value: cssclasses-1
|
||
- label: Style 2
|
||
value: cssclasses-2
|
||
- label: Style 3
|
||
value: cssclasses-3
|
||
- label: Obsidian Default
|
||
value: Obsidian-default
|
||
|
||
- id: metadata-key-style
|
||
title: Properties metadata key Style
|
||
type: class-select
|
||
default: mpk-accent-color
|
||
options:
|
||
- label: Accent Color
|
||
value: mpk-accent-color
|
||
- label: Normal Color
|
||
value: mpk-normal-color
|
||
- label: Muted Color
|
||
value: mpk-muted-color
|
||
- label: Hidden Icon
|
||
value: mpk-key-only
|
||
- label: Accent + Hidden Icon
|
||
value: mpk-accent-color-hidden
|
||
- label: Obsidian Default
|
||
value: Obsidian-default
|
||
|
||
- id: metadata-key-casing
|
||
title: Metadata property key casing
|
||
description: Change the text transform of property key labels
|
||
type: class-select
|
||
default: meta-key-case-none
|
||
options:
|
||
- label: No change
|
||
value: meta-key-case-none
|
||
- label: Uppercase
|
||
value: meta-key-case-upper
|
||
- label: Lowercase
|
||
value: meta-key-case-lower
|
||
|
||
########################################
|
||
# Command Palette
|
||
########################################
|
||
- id: heading-command-palette
|
||
title: Command Palette
|
||
type: heading
|
||
level: 1
|
||
collapsed: true
|
||
|
||
- id: hide-prompt-instructions
|
||
title: Hide Instructions in Command Palette
|
||
type: class-toggle
|
||
default: false
|
||
addCommand: false
|
||
|
||
########################################
|
||
# Animations
|
||
########################################
|
||
- id: heading-animations
|
||
title: Animations
|
||
type: heading
|
||
level: 1
|
||
collapsed: true
|
||
|
||
- id: disable-settings-animation
|
||
title: Disable settings item animation
|
||
description: Disables the hover lift animation on settings items
|
||
type: class-toggle
|
||
default: true
|
||
|
||
- id: disable-ui-animations
|
||
title: Disable button, dropdown & input animations
|
||
description: Disables transition animations on buttons, dropdowns, and input boxes
|
||
type: class-toggle
|
||
default: false
|
||
|
||
- id: disable-icon-animations
|
||
title: Disable clickable icon animations
|
||
description: Disables scale/transform animations on clickable icons
|
||
type: class-toggle
|
||
default: false
|
||
|
||
- id: animation-speed-raw
|
||
title: Animation speed
|
||
description: Drag left for slower, right for faster animations. Default is the middle.
|
||
type: variable-number-slider
|
||
default: 550
|
||
min: 50
|
||
max: 800
|
||
step: 10
|
||
format: ms
|
||
|
||
########################################
|
||
# Other Plugin Styling
|
||
########################################
|
||
- id: plugin-styling
|
||
title: Other Plugin Styling
|
||
type: heading
|
||
level: 1
|
||
collapsed: true
|
||
|
||
- id: kanban-styling
|
||
title: Enable Kanban styling
|
||
description:
|
||
type: class-toggle
|
||
default: true
|
||
|
||
- id: kanban-full
|
||
title: Kanban - take up full width
|
||
description: Makes kanban boards take up full width
|
||
type: class-toggle
|
||
default: true
|
||
|
||
- id: kanban-prepend-hover-expand
|
||
title: Kanban - Prepend Hover
|
||
description: Shows "+ Add a Card" button ON HOVER
|
||
type: class-toggle
|
||
default: false
|
||
|
||
- id: kanban-hover-biggen
|
||
title: Kanban - cards increase size on hover
|
||
description: Increases font size ON HOVER
|
||
type: class-toggle
|
||
default: false
|
||
|
||
- id: kanban-redden-metadata
|
||
title: Kanban - redden metadata date
|
||
description: Colors the date red
|
||
type: class-toggle
|
||
default: false
|
||
|
||
- id: image-captions-styling
|
||
title: Enable Image Captions styling
|
||
description:
|
||
type: class-toggle
|
||
default: true
|
||
|
||
*/
|
||
|
||
|
||
|
||
.hide-breadcrumbs .view-header-breadcrumb {
|
||
display: none;
|
||
}
|
||
|
||
.hide-breadcrumbs .view-header-breadcrumb-separator {
|
||
display: none;
|
||
}
|
||
|
||
/* Vertical Tabs Plugin Fix */
|
||
.workspace-leaf.obsidian-vertical-tabs-tab-content .tree-item-self.is-active {
|
||
padding: 0px;
|
||
}
|
||
|
||
.workspace-leaf.obsidian-vertical-tabs-tab-content
|
||
.tree-item-self.is-active
|
||
.tree-item-icon,
|
||
.workspace-leaf.obsidian-vertical-tabs-tab-content
|
||
.tree-item-self.is-active
|
||
.tree-item-inner {
|
||
margin: 8px 2px;
|
||
margin-inline-start: 6px;
|
||
margin-inline-end: -4px;
|
||
color: var(--color-accent-1);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* FLOAT INACTIVE */
|
||
.float-inactive
|
||
.cm-line:not(.cm-active):not(.HyperMD-codeblock):not(
|
||
.HyperMD-codeblock-bg
|
||
):not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-end-bg) {
|
||
animation: floatUpDown calc(var(--animation-duration) * 10) ease-in-out infinite;
|
||
}
|
||
|
||
.float-inactive
|
||
.cm-line:not(.cm-active):not(.HyperMD-codeblock):not(
|
||
.HyperMD-codeblock-bg
|
||
):not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-end-bg):nth-child(
|
||
8n + 1
|
||
) {
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.float-inactive
|
||
.cm-line:not(.cm-active):not(.HyperMD-codeblock):not(
|
||
.HyperMD-codeblock-bg
|
||
):not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-end-bg):nth-child(
|
||
8n + 2
|
||
) {
|
||
animation-delay: 0.15s;
|
||
}
|
||
|
||
.float-inactive
|
||
.cm-line:not(.cm-active):not(.HyperMD-codeblock):not(
|
||
.HyperMD-codeblock-bg
|
||
):not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-end-bg):nth-child(
|
||
8n + 3
|
||
) {
|
||
animation-delay: 0.3s;
|
||
}
|
||
|
||
.float-inactive
|
||
.cm-line:not(.cm-active):not(.HyperMD-codeblock):not(
|
||
.HyperMD-codeblock-bg
|
||
):not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-end-bg):nth-child(
|
||
8n + 4
|
||
) {
|
||
animation-delay: 0.45s;
|
||
}
|
||
|
||
.float-inactive
|
||
.cm-line:not(.cm-active):not(.HyperMD-codeblock):not(
|
||
.HyperMD-codeblock-bg
|
||
):not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-end-bg):nth-child(
|
||
8n + 5
|
||
) {
|
||
animation-delay: 0.6s;
|
||
}
|
||
|
||
.float-inactive
|
||
.cm-line:not(.cm-active):not(.HyperMD-codeblock):not(
|
||
.HyperMD-codeblock-bg
|
||
):not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-end-bg):nth-child(
|
||
8n + 6
|
||
) {
|
||
animation-delay: 0.75s;
|
||
}
|
||
|
||
.float-inactive
|
||
.cm-line:not(.cm-active):not(.HyperMD-codeblock):not(
|
||
.HyperMD-codeblock-bg
|
||
):not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-end-bg):nth-child(
|
||
8n + 7
|
||
) {
|
||
animation-delay: 0.9s;
|
||
}
|
||
|
||
.float-inactive
|
||
.cm-line:not(.cm-active):not(.HyperMD-codeblock):not(
|
||
.HyperMD-codeblock-bg
|
||
):not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-end-bg):nth-child(
|
||
8n + 8
|
||
) {
|
||
animation-delay: 1.05s;
|
||
}
|
||
|
||
@keyframes floatUpDown {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-8px);
|
||
}
|
||
}
|
||
|
||
/* dim inactive */
|
||
.dim-inactive .cm-line:not(.cm-active) {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* === BLOCKQUOTES === */
|
||
|
||
/* Reading mode blockquote */
|
||
.markdown-preview-view blockquote {
|
||
border-left: 4px solid var(--color-accent);
|
||
padding: 0.6em 1em;
|
||
margin: 0.8em 0;
|
||
background-color: var(--background-secondary);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* Live Preview blockquote */
|
||
.markdown-source-view.is-live-preview .cm-line.HyperMD-quote {
|
||
/* border-left: 4px solid var(--color-accent); */
|
||
background-color: var(--background-secondary);
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before,
|
||
.markdown-source-view.mod-cm6 .cm-blockquote-border::before {
|
||
content: "\200b";
|
||
display: block;
|
||
width: 1px;
|
||
border-inline-start: var(--blockquote-border-thickness) solid
|
||
var(--blockquote-border-color);
|
||
color: transparent;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.HyperMD-quote.HyperMD-quote-1.cm-line {
|
||
border-radius: 200px !important;
|
||
}
|
||
|
||
/* ===== HIDE FOLDER COLLAPSE ARROW ===== */
|
||
|
||
body.hide-folder-arrow .nav-folder-title .collapse-icon {
|
||
/* display: none !important; */
|
||
--nav-collapse-icon-color: transparent;
|
||
--nav-collapse-icon-color-collapsed: transparent;
|
||
}
|
||
|
||
/* body.hide-folder-arrow .tree-item-icon .collapse-icon .is-collapsed {
|
||
display: none !important;
|
||
}
|
||
|
||
body.hide-folder-arrow .nav-folder-title {
|
||
padding-inline-start: 0px !important;
|
||
padding-left: 0px !important;
|
||
margin-left: 0px !important;
|
||
} */
|
||
|
||
/* body.hide-folder-arrow .nav-folder-title {
|
||
padding-left: 10px !important;
|
||
} */
|
||
|
||
/* ===== FILE EXPLORER BORDER RADIUS ===== */
|
||
|
||
:root {
|
||
--nav-folder-radius: 8px;
|
||
--nav-file-radius: 6px;
|
||
}
|
||
|
||
.nav-folder-title {
|
||
border-radius: var(--nav-folder-radius) !important;
|
||
}
|
||
|
||
/* file title radius — target tree-item-self containing a nav-file-title */
|
||
.tree-item-self:has(.nav-file-title) {
|
||
border-radius: var(--nav-file-radius) !important;
|
||
}
|
||
|
||
.nav-file-title {
|
||
border-radius: var(--nav-file-radius) !important;
|
||
}
|
||
|
||
/* .nav-folder {
|
||
border: 2px solid red;
|
||
} */
|
||
|
||
.tree-item.nav-folder {
|
||
margin-bottom: 6px !important;
|
||
}
|
||
|