mirror of
https://github.com/dubefab/obsidian-TerraFlow.git
synced 2026-07-22 04:00:25 +00:00
7208 lines
No EOL
240 KiB
CSS
7208 lines
No EOL
240 KiB
CSS
/* @settings
|
|
|
|
name: TerraFlow
|
|
id: seasonal-themes
|
|
settings:
|
|
-
|
|
id: seasonal-heading
|
|
title: 🍂 Seasonal Color Schemes
|
|
type: heading
|
|
level: 3
|
|
collapsed: false
|
|
-
|
|
id: season-selector
|
|
title: Active Season
|
|
description: Choose your seasonal color palette
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: autumn-theme
|
|
options:
|
|
-
|
|
label: 🌱 Spring
|
|
value: spring-theme
|
|
-
|
|
label: ☀️ Summer
|
|
value: summer-theme
|
|
-
|
|
label: 🍂 Autumn
|
|
value: autumn-theme
|
|
-
|
|
label: ❄️ Winter
|
|
value: winter-theme
|
|
-
|
|
label: 🧊 Iceberg
|
|
value: iceberg-theme
|
|
-
|
|
label: 📚 Academia (Dark ONLY)
|
|
value: academia-theme
|
|
-
|
|
label: 🌙 Twilight
|
|
value: twilight-theme
|
|
-
|
|
label: 📄 Paper
|
|
value: paper-theme
|
|
|
|
-
|
|
id: visual-appearance-heading
|
|
title: 🎨 Visual & Appearance
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: enable-monochrome
|
|
title: Monochrome Mode
|
|
description: Desaturate the interface to grayscale
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: layout-style
|
|
title: Interface Layout
|
|
description: Choose the overall layout structure of the application
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: layout-default
|
|
options:
|
|
-
|
|
label: Default
|
|
value: layout-default
|
|
-
|
|
label: Card
|
|
value: layout-card
|
|
-
|
|
id: animation-style
|
|
title: Animation Style
|
|
description: Choose the animation personality for the interface
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: animation-style-default
|
|
options:
|
|
-
|
|
label: Default (Subtle Pop)
|
|
value: animation-style-default
|
|
-
|
|
label: Whimsy (Bouncy)
|
|
value: animation-style-whimsy
|
|
-
|
|
id: heading-style-selector
|
|
title: Heading Style
|
|
description: Choose a visual style for your headings
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: heading-style-default
|
|
options:
|
|
-
|
|
label: Default (Background)
|
|
value: heading-style-default
|
|
-
|
|
label: Underline
|
|
value: heading-style-underline
|
|
-
|
|
label: Border Accent
|
|
value: heading-style-border
|
|
-
|
|
label: Minimal
|
|
value: heading-style-minimal
|
|
-
|
|
label: Gradient
|
|
value: heading-style-gradient
|
|
-
|
|
label: Badge (Pill)
|
|
value: heading-style-badge
|
|
-
|
|
label: Outline
|
|
value: heading-style-outline
|
|
-
|
|
label: 3D Embossed
|
|
value: heading-style-3d
|
|
-
|
|
label: Vibrant Glow
|
|
value: heading-style-vibrant
|
|
-
|
|
id: link-style-selector
|
|
title: Link Style
|
|
description: Choose a visual style for links in your notes
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: link-style-default
|
|
options:
|
|
-
|
|
label: Default (Subtle Pill)
|
|
value: link-style-default
|
|
-
|
|
label: Plain (No Background)
|
|
value: link-style-plain
|
|
-
|
|
label: Underline Accent
|
|
value: link-style-underline
|
|
-
|
|
label: Neon Glow
|
|
value: link-style-glow
|
|
-
|
|
label: Retro Wavy
|
|
value: link-style-wavy
|
|
-
|
|
id: blockquote-style-selector
|
|
title: Blockquote Style
|
|
description: Choose a visual style for blockquotes in your notes
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: blockquote-style-default
|
|
options:
|
|
-
|
|
label: Default
|
|
value: blockquote-style-default
|
|
-
|
|
label: Modern Glass
|
|
value: blockquote-style-glass
|
|
-
|
|
id: callout-style-selector
|
|
title: Callout Style
|
|
description: Choose a visual style for your callouts
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: callout-style-default
|
|
options:
|
|
-
|
|
label: Default (Gradient)
|
|
value: callout-style-default
|
|
-
|
|
label: Vintage Paper
|
|
value: callout-style-vintage
|
|
-
|
|
label: Modern Glass
|
|
value: callout-style-glass
|
|
-
|
|
label: Vibrant Glow
|
|
value: callout-style-vibrant
|
|
-
|
|
label: Bold Border
|
|
value: callout-style-bold
|
|
-
|
|
id: text-appearance-heading
|
|
title: ✍️ Heading UPPERCASE
|
|
description: Customize the typography case for individual heading levels
|
|
type: heading
|
|
level: 3
|
|
collapsed: true
|
|
-
|
|
id: h1-uppercase
|
|
title: H1 Uppercase
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h2-uppercase
|
|
title: H2 Uppercase
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h3-uppercase
|
|
title: H3 Uppercase
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h4-uppercase
|
|
title: H4 Uppercase
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h5-uppercase
|
|
title: H5 Uppercase
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h6-uppercase
|
|
title: H6 Uppercase
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: ui-elements-heading
|
|
title: 🖼️ UI Elements
|
|
type: heading
|
|
level: 3
|
|
collapsed: false
|
|
-
|
|
id: enable-fancy-bullets
|
|
title: Fancy Multilevel Bullet Styles
|
|
description: Toggle unique custom bullet shapes
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: enable-floating-nav
|
|
title: Floating Nav Buttons
|
|
description: Transform sidebar navigation buttons into a floating pill that expands on hover.
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: show-header-on-hover
|
|
title: Show View Header on Hover
|
|
description: Only show the entire view header (title and buttons) when hovering over the top area.
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: performance-heading
|
|
title: ⚡ Performance & Accessibility
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: disable-ui-animations
|
|
title: Disable UI Animations
|
|
description: Turn off subtle pop-up animations for menus and modals (Enabled by default)
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: disable-modal-frost
|
|
title: Disable Modal Frost
|
|
description: Turn off frosted glass effect for modal backgrounds (Enabled by default)
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: disable-shadows
|
|
title: Disable Box Shadows
|
|
description: Remove all box-shadows and elevation styling for maximum speed and flat look.
|
|
type: class-toggle
|
|
default: false
|
|
|
|
-
|
|
id: disable-scrollbars
|
|
title: Disable Scrollbar Styling
|
|
description: Disable the custom scrollbars
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: disable-status-bar
|
|
title: Disable Status Bar Styling
|
|
description: Disable the status bar style
|
|
type: class-toggle
|
|
default: false
|
|
|
|
*/
|
|
|
|
/* Global Variables */
|
|
:root {
|
|
--s1: 4px;
|
|
--s2: 8px;
|
|
--s3: 12px;
|
|
--s4: 16px;
|
|
--s6: 24px;
|
|
--s8: 32px;
|
|
--r1: 6px;
|
|
--r2: 10px;
|
|
--r3: 12px;
|
|
--r4: 16px;
|
|
--squircle-btn: 40%;
|
|
--squircle-main: 60%;
|
|
--squircle-soft: 80%;
|
|
--shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
|
|
--shadow-2: 0 1px 3px rgba(0, 0, 0, .08);
|
|
--shadow-3: 0 6px 18px rgba(0, 0, 0, 0.15);
|
|
--shadow-4: 0 4px 12px rgba(0, 0, 0, .12);
|
|
--fast: 0.15s ease;
|
|
--normal: 0.25s ease;
|
|
--slow: 0.3s ease;
|
|
--bounce: 0.25s cubic-bezier(.34, 1.15, .64, 1);
|
|
--weight-normal: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
--line-tight: 1.5;
|
|
--line-normal: 1.6;
|
|
--line-relaxed: 2.0;
|
|
--editor-max-width: 64ch;
|
|
--reading-max-width: 64ch;
|
|
--folder-opacity: .15;
|
|
--folder-opacity-dark: .12;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--callout-opacity: .12;
|
|
--heading-opacity: .2;
|
|
--heading-opacity-dark: .18;
|
|
--folder-text-lightness-light: 25%;
|
|
--folder-text-lightness-dark: 70%;
|
|
--theme-folder-opacity: .12;
|
|
--theme-text-multiplier: .85;
|
|
--active-bg-opacity: .2;
|
|
--heading-text-multiplier: .85;
|
|
--folder-text-multiplier: .85;
|
|
--heading-bg-opacity: .2;
|
|
--outline-item-spacing: .5em;
|
|
--layer-status-bar: 1000;
|
|
--checklist-done-color: var(--emphasis-color);
|
|
--checklist-done-decoration: line-through;
|
|
--transition-ui: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-bounce: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.5);
|
|
|
|
/* Shared mapping defaults - individual themes can override these */
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
}
|
|
|
|
/* Academia Theme Variables */
|
|
|
|
.academia-theme {
|
|
--accent-h: 30;
|
|
--accent-s: 45%;
|
|
--accent-l: 50%;
|
|
|
|
--background-primary: #5C4243;
|
|
--background-primary-rgb: 92, 66, 67;
|
|
--background-secondary: #513A3B;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 81, 58, 59;
|
|
--background-secondary-alt: #443131;
|
|
--text-normal: #C7B3A8;
|
|
--text-normal-rgb: 199, 179, 168;
|
|
--text-muted: #A88B84;
|
|
--emphasis-color: #a8522d;
|
|
--emphasis-color-light: #C6AD75;
|
|
--primary-color: #C6AD75;
|
|
--primary-color-rgb: 198, 173, 117;
|
|
--primary-color-dark: #947E5A;
|
|
--interactive-accent: #C6AD75;
|
|
--interactive-accent-hover: #947E5A;
|
|
--link-color: #a8522d;
|
|
--link-color-hover: #a8522d;
|
|
--link-unresolved-color: #C6AD75;
|
|
--blockquote-border-color: #C6AD75;
|
|
--checkbox-color: #C6AD75;
|
|
--text-accent: #947E5A;
|
|
--divider-color: rgba(0, 0, 0, 0.45);
|
|
--background-modifier-border: rgba(0, 0, 0, 0.4);
|
|
--background-modifier-border-focus: rgba(0, 0, 0, 0.6);
|
|
--text-selection: #451B1B;
|
|
--scrollbar-thumb: rgba(198, 173, 117, .35);
|
|
--scrollbar-track: rgba(92, 66, 67, .2);
|
|
--code-background: #513A3B;
|
|
--code-normal: #C7B3A8;
|
|
--code-comment: #A88B84;
|
|
--code-function: #C6AD75;
|
|
--code-important: #D7BDBC;
|
|
--code-keyword: #C6AD75;
|
|
--code-property: #C6AD75;
|
|
--code-punctuation: #A88B84;
|
|
--code-string: #C16119;
|
|
--code-tag: #947E5A;
|
|
--code-value: #947E5A;
|
|
--heading-primary: #d1968d;
|
|
--heading-secondary: #d4a86a;
|
|
--heading-tertiary: #a8c9a1;
|
|
--heading-quaternary: #FFAA66;
|
|
--heading-quinary: #8AB584;
|
|
--heading-senary: #84C8FF;
|
|
--heading-primary-rgb: 209, 150, 141;
|
|
--heading-secondary-rgb: 212, 168, 106;
|
|
--heading-tertiary-rgb: 168, 201, 161;
|
|
--heading-quaternary-rgb: 255, 170, 102;
|
|
--heading-quinary-rgb: 138, 181, 132;
|
|
--heading-senary-rgb: 132, 200, 255;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--heading-text-multiplier: 1.15;
|
|
--theme-text-multiplier: 1.0;
|
|
--highlight-bg: #6a4e45;
|
|
--highlight-bg-dark: #7d5c52;
|
|
--highlight-bg-dark-color: #7d5c52;
|
|
--highlight-bg-light-color: #FFD484;
|
|
--callout-note: #FFD484;
|
|
--callout-note-rgb: 255, 212, 132;
|
|
--callout-info: #78DCE8;
|
|
--callout-info-rgb: 120, 220, 232;
|
|
--callout-warning: #FFAA66;
|
|
--callout-warning-rgb: 255, 170, 102;
|
|
--callout-example: #A9DC76;
|
|
--callout-example-rgb: 169, 220, 118;
|
|
--callout-quote: #AB9DF2;
|
|
--callout-quote-rgb: 171, 157, 242;
|
|
--callout-success: #88D6A0;
|
|
--callout-success-rgb: 136, 214, 160;
|
|
--callout-danger: #990000;
|
|
--callout-danger-rgb: 153, 0, 0;
|
|
--callout-cite: #BBADFF;
|
|
--callout-cite-rgb: 187, 173, 255;
|
|
--callout-video: #57E6FF;
|
|
--callout-video-rgb: 87, 230, 255;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--surface-accent: #6A5150;
|
|
--surface-accent-rgb: 106, 81, 80;
|
|
--surface-dark: #3C2A2B;
|
|
--surface-dark-rgb: 60, 42, 43;
|
|
--tab-bg-inactive: rgba(92, 66, 67, .15);
|
|
--tab-bg-inactive-hover: rgba(92, 66, 67, .25);
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-hover: .18;
|
|
}
|
|
|
|
|
|
/* Iceberg Theme Variables */
|
|
.iceberg-theme {
|
|
--accent-h: 213;
|
|
--accent-s: 32%;
|
|
--accent-l: 65%;
|
|
}
|
|
|
|
.theme-light.iceberg-theme {
|
|
--background-primary: #e2e3e7;
|
|
--background-primary-rgb: 226, 227, 231;
|
|
--background-secondary: #d4d7e1;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 212, 215, 225;
|
|
--background-secondary-alt: #c0c4d1;
|
|
--text-normal: #26293b;
|
|
--text-normal-rgb: 38, 41, 59;
|
|
--text-muted: rgba(38, 41, 59, .7);
|
|
--emphasis-color: #223e8c;
|
|
--emphasis-color-light: #2d539e;
|
|
--primary-color: #223e8c;
|
|
--primary-color-rgb: 34, 62, 140;
|
|
--primary-color-dark: #1a2f6b;
|
|
--interactive-accent: #223e8c;
|
|
--interactive-accent-hover: #1a2f6b;
|
|
--link-color: #223e8c;
|
|
--link-color-hover: #1a2f6b;
|
|
--link-unresolved-color: #223e8c;
|
|
--blockquote-border-color: #223e8c;
|
|
--checkbox-color: #223e8c;
|
|
--text-accent: #1a2f6b;
|
|
--divider-color: #c0c4d188;
|
|
--text-selection: #bec2ce;
|
|
--scrollbar-thumb: rgba(34, 62, 140, .35);
|
|
--scrollbar-track: rgba(226, 227, 231, .2);
|
|
--code-background: #d4d7e1;
|
|
--code-normal: #26293b;
|
|
--code-comment: #707592;
|
|
--code-function: #223e8c;
|
|
--code-important: #6341a5;
|
|
--code-keyword: #223e8c;
|
|
--code-property: #547e2f;
|
|
--code-punctuation: rgba(38, 41, 59, .7);
|
|
--code-string: #326f95;
|
|
--code-tag: #6341a5;
|
|
--code-value: #6341a5;
|
|
--heading-primary: #223e8c;
|
|
--heading-secondary: #5fa83f;
|
|
--heading-tertiary: #7b52cc;
|
|
--heading-quaternary: #339aa8;
|
|
--heading-quinary: #b8450f;
|
|
--heading-senary: #8b3a6b;
|
|
--heading-primary-rgb: 34, 62, 140;
|
|
--heading-secondary-rgb: 95, 168, 63;
|
|
--heading-tertiary-rgb: 123, 82, 204;
|
|
--heading-quaternary-rgb: 51, 154, 168;
|
|
--heading-quinary-rgb: 184, 69, 15;
|
|
--heading-senary-rgb: 139, 58, 107;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #223e8c;
|
|
--callout-note-rgb: 34, 62, 140;
|
|
--callout-info: #547e2f;
|
|
--callout-info-rgb: 84, 126, 47;
|
|
--callout-warning: #c67d3d;
|
|
--callout-warning-rgb: 198, 125, 61;
|
|
--callout-success: #326f95;
|
|
--callout-success-rgb: 50, 111, 149;
|
|
--callout-danger: #a55a5a;
|
|
--callout-danger-rgb: 165, 90, 90;
|
|
--callout-example: #326f95;
|
|
--callout-example-rgb: 50, 111, 149;
|
|
--callout-cite: #573d84;
|
|
--callout-cite-rgb: 87, 61, 132;
|
|
--callout-video: #57d9eb;
|
|
--callout-video-rgb: 87, 217, 235;
|
|
--callout-quote: #e2eafc;
|
|
--callout-quote-rgb: 226, 234, 252;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #8a9fc2;
|
|
--highlight-bg-rgb: 168, 184, 214;
|
|
--highlight-bg-dark: #8a9fc2;
|
|
--highlight-bg-dark-color: #1a2535;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #c0c4d1;
|
|
--surface-accent-rgb: 192, 196, 209;
|
|
--surface-dark: #26293b;
|
|
--surface-dark-rgb: 38, 41, 59;
|
|
--tab-bg-inactive: rgba(226, 227, 231, .08);
|
|
--tab-bg-inactive-hover: rgba(226, 227, 231, .12);
|
|
}
|
|
|
|
.theme-dark.iceberg-theme {
|
|
--background-primary: #111319;
|
|
--background-primary-rgb: 17, 19, 25;
|
|
--background-secondary: #171826;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 23, 24, 38;
|
|
--background-secondary-alt: #1b1e31;
|
|
--text-normal: #babcc7;
|
|
--text-normal-rgb: 186, 188, 199;
|
|
--text-muted: rgba(186, 188, 199, .7);
|
|
--emphasis-color: #728eb9;
|
|
--emphasis-color-light: #84a0c6;
|
|
--primary-color: #728eb9;
|
|
--primary-color-rgb: 114, 142, 185;
|
|
--primary-color-dark: #5a73a3;
|
|
--interactive-accent: #728eb9;
|
|
--interactive-accent-hover: #5a73a3;
|
|
--link-color: #728eb9;
|
|
--link-color-hover: #5a73a3;
|
|
--link-unresolved-color: #728eb9;
|
|
--blockquote-border-color: #728eb9;
|
|
--checkbox-color: #728eb9;
|
|
--text-accent: #5a73a3;
|
|
--divider-color: #1b1e3188;
|
|
--text-selection: #1d2033;
|
|
--scrollbar-thumb: rgba(114, 142, 185, .35);
|
|
--scrollbar-track: rgba(17, 19, 25, .2);
|
|
--code-background: #171826;
|
|
--code-normal: #babcc7;
|
|
--code-comment: #585c76;
|
|
--code-function: #728eb9;
|
|
--code-important: #8e7ebb;
|
|
--code-keyword: #728eb9;
|
|
--code-property: #a5b26f;
|
|
--code-punctuation: rgba(186, 188, 199, .7);
|
|
--code-string: #78aab5;
|
|
--code-tag: #8e7ebb;
|
|
--code-value: #8e7ebb;
|
|
--heading-primary: #9dd4f7;
|
|
--heading-secondary: #a5b26f;
|
|
--heading-tertiary: #a89fd4;
|
|
--heading-quaternary: #77e6c8;
|
|
--heading-quinary: #e2a478;
|
|
--heading-senary: #d4a1c4;
|
|
--heading-primary-rgb: 157, 212, 247;
|
|
--heading-secondary-rgb: 165, 178, 111;
|
|
--heading-tertiary-rgb: 168, 159, 212;
|
|
--heading-quaternary-rgb: 119, 230, 200;
|
|
--heading-quinary-rgb: 226, 164, 120;
|
|
--heading-senary-rgb: 212, 161, 196;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #728eb9;
|
|
--callout-note-rgb: 114, 142, 185;
|
|
--callout-info: #a5b26f;
|
|
--callout-info-rgb: 165, 178, 111;
|
|
--callout-warning: #e2a478;
|
|
--callout-warning-rgb: 226, 164, 120;
|
|
--callout-success: #78aab5;
|
|
--callout-success-rgb: 120, 170, 181;
|
|
--callout-danger: #cc6666;
|
|
--callout-danger-rgb: 204, 102, 102;
|
|
--callout-example: #78aab5;
|
|
--callout-example-rgb: 120, 170, 181;
|
|
--callout-cite: #a29bfe;
|
|
--callout-cite-rgb: 162, 155, 254;
|
|
--callout-video: #78dce8;
|
|
--callout-video-rgb: 120, 220, 232;
|
|
--callout-quote: #1d2033;
|
|
--callout-quote-rgb: 29, 32, 51;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #1f2635;
|
|
--highlight-bg-dark: #2a354a;
|
|
--highlight-bg-dark-color: #2a354a;
|
|
--highlight-bg-light-color: #8a9fc2;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #1b1e31;
|
|
--surface-accent-rgb: 27, 30, 49;
|
|
--surface-dark: #111319;
|
|
--surface-dark-rgb: 17, 19, 25;
|
|
--tab-bg-inactive: rgba(17, 19, 25, .15);
|
|
--tab-bg-inactive-hover: rgba(17, 19, 25, .25);
|
|
}
|
|
|
|
/* Twilight Theme Variables */
|
|
.twilight-theme {
|
|
--accent-h: 260;
|
|
--accent-s: 40%;
|
|
--accent-l: 65%;
|
|
}
|
|
|
|
.theme-light.twilight-theme {
|
|
--background-primary: #FBFBFE;
|
|
--background-primary-rgb: 251, 251, 254;
|
|
--background-secondary: #F3F1F8;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 243, 241, 248;
|
|
--background-secondary-alt: #E8E5F1;
|
|
--text-normal: #34313D;
|
|
--text-normal-rgb: 52, 49, 61;
|
|
--text-muted: #6B6877;
|
|
--emphasis-color: #7E69AB;
|
|
--emphasis-color-light: #B19CD9;
|
|
--primary-color: #7E69AB;
|
|
--primary-color-rgb: 126, 105, 171;
|
|
--primary-color-dark: #5A4A81;
|
|
--interactive-accent: #7E69AB;
|
|
--interactive-accent-hover: #5A4A81;
|
|
--link-color: #7E69AB;
|
|
--link-color-hover: #5A4A81;
|
|
--link-unresolved-color: #B19CD9;
|
|
--blockquote-border-color: #7E69AB;
|
|
--checkbox-color: #7E69AB;
|
|
--text-accent: #5A4A81;
|
|
--divider-color: #E2DFED;
|
|
--text-selection: #ECE9F5;
|
|
--scrollbar-thumb: rgba(126, 105, 171, .3);
|
|
--scrollbar-track: rgba(251, 251, 254, .2);
|
|
--code-background: #F3F1F8;
|
|
--code-normal: #34313D;
|
|
--code-comment: #928EAA;
|
|
--code-function: #7E69AB;
|
|
--code-important: #5A4A81;
|
|
--code-keyword: #8E7BB6;
|
|
--code-property: #5B8A46;
|
|
--code-punctuation: #6B6877;
|
|
--code-string: #4A7C9B;
|
|
--code-tag: #5A4A81;
|
|
--code-value: #5A4A81;
|
|
--heading-primary: #5a3f7d;
|
|
--heading-secondary: #a896f0;
|
|
--heading-tertiary: #5885AF;
|
|
--heading-quaternary: #d66f88;
|
|
--heading-quinary: #8854d0;
|
|
--heading-senary: #3c40c6;
|
|
--heading-primary-rgb: 90, 63, 125;
|
|
--heading-secondary-rgb: 168, 150, 240;
|
|
--heading-tertiary-rgb: 88, 133, 175;
|
|
--heading-quaternary-rgb: 214, 111, 136;
|
|
--heading-quinary-rgb: 136, 84, 208;
|
|
--heading-senary-rgb: 60, 64, 198;
|
|
--callout-note: #E9D5A3;
|
|
--callout-note-rgb: 233, 213, 163;
|
|
--callout-info: #5885AF;
|
|
--callout-info-rgb: 88, 133, 175;
|
|
--callout-warning: #C67D3D;
|
|
--callout-warning-rgb: 198, 125, 61;
|
|
--callout-example: #726DA8;
|
|
--callout-example-rgb: 114, 109, 168;
|
|
--callout-quote: #928EAA;
|
|
--callout-quote-rgb: 146, 142, 170;
|
|
--callout-success: #6B9080;
|
|
--callout-success-rgb: 107, 144, 128;
|
|
--callout-danger: #B56576;
|
|
--callout-danger-rgb: 181, 101, 118;
|
|
--callout-cite: #5E548E;
|
|
--callout-cite-rgb: 94, 84, 142;
|
|
--callout-video: #4A6FA5;
|
|
--callout-video-rgb: 74, 111, 165;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #d4c9e8;
|
|
--highlight-bg-rgb: 212, 201, 232;
|
|
--highlight-bg-dark: #bfafe0;
|
|
--highlight-bg-dark-color: #2a2438;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #E2DFED;
|
|
--surface-accent-rgb: 226, 223, 237;
|
|
--surface-dark: #34313D;
|
|
--surface-dark-rgb: 52, 49, 61;
|
|
--tab-bg-inactive: rgba(126, 105, 171, .05);
|
|
--tab-bg-inactive-hover: rgba(126, 105, 171, .1);
|
|
}
|
|
|
|
.theme-dark.twilight-theme {
|
|
--background-primary: #16141F;
|
|
--background-primary-rgb: 22, 20, 31;
|
|
--background-secondary: #1C1A26;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 28, 26, 38;
|
|
--background-secondary-alt: #23212F;
|
|
--text-normal: #E3E1E8;
|
|
--text-normal-rgb: 227, 225, 232;
|
|
--text-muted: #9E9AA9;
|
|
--emphasis-color: #BBADFF;
|
|
--emphasis-color-light: #D6BCFA;
|
|
--primary-color: #BBADFF;
|
|
--primary-color-rgb: 187, 173, 255;
|
|
--primary-color-dark: #7B62DA;
|
|
--interactive-accent: #BBADFF;
|
|
--interactive-accent-hover: #7B62DA;
|
|
--link-color: #BBADFF;
|
|
--link-color-hover: #7B62DA;
|
|
--link-unresolved-color: #D6BCFA;
|
|
--blockquote-border-color: #BBADFF;
|
|
--checkbox-color: #BBADFF;
|
|
--text-accent: #7B62DA;
|
|
--divider-color: #23212F88;
|
|
--text-selection: #2D2A3D;
|
|
--scrollbar-thumb: rgba(187, 173, 255, .35);
|
|
--scrollbar-track: rgba(22, 20, 31, .2);
|
|
--code-background: #1C1A26;
|
|
--code-normal: #E3E1E8;
|
|
--code-comment: #6B6877;
|
|
--code-function: #BBADFF;
|
|
--code-important: #7B62DA;
|
|
--code-keyword: #B4A7E5;
|
|
--code-property: #A5B26F;
|
|
--code-punctuation: rgba(227, 225, 232, .7);
|
|
--code-string: #78AAB5;
|
|
--code-tag: #D6BCFA;
|
|
--code-value: #D6BCFA;
|
|
--heading-primary: #BBADFF;
|
|
--heading-secondary: #D6BCFA;
|
|
--heading-tertiary: #81E6D9;
|
|
--heading-quaternary: #F687B3;
|
|
--heading-quinary: #7F9CF5;
|
|
--heading-senary: #ff9eae;
|
|
--heading-primary-rgb: 187, 173, 255;
|
|
--heading-secondary-rgb: 214, 188, 250;
|
|
--heading-tertiary-rgb: 129, 230, 217;
|
|
--heading-quaternary-rgb: 246, 135, 179;
|
|
--heading-quinary-rgb: 127, 156, 245;
|
|
--heading-senary-rgb: 255, 158, 174;
|
|
--callout-note: #F6AD55;
|
|
--callout-note-rgb: 246, 173, 85;
|
|
--callout-info: #81E6D9;
|
|
--callout-info-rgb: 129, 230, 217;
|
|
--callout-warning: #E2A478;
|
|
--callout-warning-rgb: 226, 164, 120;
|
|
--callout-example: #CBD5E0;
|
|
--callout-example-rgb: 203, 213, 224;
|
|
--callout-quote: #9E9AA9;
|
|
--callout-quote-rgb: 158, 154, 169;
|
|
--callout-success: #A5B26F;
|
|
--callout-success-rgb: 165, 178, 111;
|
|
--callout-danger: #F687B3;
|
|
--callout-danger-rgb: 246, 135, 179;
|
|
--callout-cite: #BBADFF;
|
|
--callout-cite-rgb: 187, 173, 255;
|
|
--callout-video: #57D9EB;
|
|
--callout-video-rgb: 87, 217, 235;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #241f30;
|
|
--highlight-bg-dark: #352b48;
|
|
--highlight-bg-dark-color: #352b48;
|
|
--highlight-bg-light-color: #D6BCFA;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #23212F;
|
|
--surface-accent-rgb: 35, 33, 47;
|
|
--surface-dark: #16141F;
|
|
--surface-dark-rgb: 22, 20, 31;
|
|
--tab-bg-inactive: rgba(22, 20, 31, .15);
|
|
--tab-bg-inactive-hover: rgba(22, 20, 31, .25);
|
|
}
|
|
|
|
/* Autumn Theme Variables */
|
|
.autumn-theme {
|
|
--accent-h: 15;
|
|
--accent-s: 65%;
|
|
--accent-l: 60%;
|
|
}
|
|
|
|
.theme-light.autumn-theme {
|
|
--background-primary: #eeece2;
|
|
--background-primary-rgb: 238, 236, 226;
|
|
--background-secondary: #e6e4da;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 230, 228, 218;
|
|
--background-secondary-alt: #dfdbd1;
|
|
--text-normal: #3d2e1a;
|
|
--text-normal-rgb: 61, 46, 26;
|
|
--text-muted: rgba(61, 46, 26, .7);
|
|
--emphasis-color: #ae4e36;
|
|
--emphasis-color-light: #d97756;
|
|
--primary-color: #d97756;
|
|
--primary-color-rgb: 217, 119, 86;
|
|
--primary-color-dark: #ae4e36;
|
|
--interactive-accent: #d97756;
|
|
--interactive-accent-hover: #ae4e36;
|
|
--link-color: #d97756;
|
|
--link-color-hover: #ae4e36;
|
|
--link-unresolved-color: #d97756;
|
|
--blockquote-border-color: #d97756;
|
|
--checkbox-color: #d97756;
|
|
--text-accent: #ae4e36;
|
|
--divider-color: #d2cfc588;
|
|
--text-selection: #f0e0d0;
|
|
--scrollbar-thumb: rgba(217, 119, 86, .35);
|
|
--scrollbar-track: rgba(245, 239, 224, .2);
|
|
--code-background: #f5efe0;
|
|
--code-normal: #3d2e1a;
|
|
--code-comment: #707592;
|
|
--code-function: #d97756;
|
|
--code-important: #ae4e36;
|
|
--code-keyword: #6a97bb;
|
|
--code-property: #798d5d;
|
|
--code-punctuation: rgba(61, 46, 26, .7);
|
|
--code-string: #8f8ca6;
|
|
--code-tag: #c36686;
|
|
--code-value: #779088;
|
|
--heading-primary: #d97756;
|
|
--heading-secondary: #b8692c;
|
|
--heading-tertiary: #9a863c;
|
|
--heading-quaternary: #798d5d;
|
|
--heading-quinary: #c36686;
|
|
--heading-senary: #779088;
|
|
--heading-primary-rgb: 217, 119, 86;
|
|
--heading-secondary-rgb: 184, 105, 44;
|
|
--heading-tertiary-rgb: 154, 134, 60;
|
|
--heading-quaternary-rgb: 121, 141, 93;
|
|
--heading-quinary-rgb: 195, 102, 134;
|
|
--heading-senary-rgb: 119, 144, 136;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #d97756;
|
|
--callout-note-rgb: 217, 119, 86;
|
|
--callout-info: #d4af37;
|
|
--callout-info-rgb: 212, 175, 55;
|
|
--callout-warning: #e67e22;
|
|
--callout-warning-rgb: 230, 126, 34;
|
|
--callout-success: #798d5d;
|
|
--callout-success-rgb: 121, 141, 93;
|
|
--callout-danger: #c0392b;
|
|
--callout-danger-rgb: 192, 57, 43;
|
|
--callout-example: #779088;
|
|
--callout-example-rgb: 119, 144, 136;
|
|
--callout-cite: #573d84;
|
|
--callout-cite-rgb: 87, 61, 132;
|
|
--callout-video: #a67c52;
|
|
--callout-video-rgb: 166, 124, 82;
|
|
--callout-quote: #b0a483;
|
|
--callout-quote-rgb: 176, 164, 131;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #d6b07b;
|
|
--highlight-bg-rgb: 232, 200, 154;
|
|
--highlight-bg-dark: #c9a772;
|
|
--highlight-bg-dark-color: #2d1f0e;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #e8e6dc;
|
|
--surface-accent-rgb: 232, 230, 220;
|
|
--surface-dark: #36342e;
|
|
--surface-dark-rgb: 54, 52, 46;
|
|
--tab-bg-inactive: rgba(245, 239, 224, .15);
|
|
--tab-bg-inactive-hover: rgba(245, 239, 224, .25);
|
|
}
|
|
|
|
.theme-dark.autumn-theme {
|
|
--background-primary: #282520;
|
|
--background-primary-rgb: 40, 37, 32;
|
|
--background-secondary: #32302a;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 50, 48, 42;
|
|
--background-secondary-alt: #3a3832;
|
|
--text-normal: #e8dcc6;
|
|
--text-normal-rgb: 232, 220, 198;
|
|
--text-muted: rgba(232, 220, 198, .7);
|
|
--emphasis-color: #e27a5a;
|
|
--emphasis-color-light: #f2a882;
|
|
--primary-color: #f0916f;
|
|
--primary-color-rgb: 240, 145, 111;
|
|
--primary-color-dark: #e27a5a;
|
|
--interactive-accent: #f0916f;
|
|
--interactive-accent-hover: #e27a5a;
|
|
--link-color: #f0916f;
|
|
--link-color-hover: #e27a5a;
|
|
--link-unresolved-color: #f0916f;
|
|
--blockquote-border-color: #f0916f;
|
|
--checkbox-color: #f0916f;
|
|
--text-accent: #e27a5a;
|
|
--divider-color: #4a473e88;
|
|
--text-selection: #4a3d2e;
|
|
--scrollbar-thumb: rgba(240, 145, 111, .35);
|
|
--scrollbar-track: rgba(40, 37, 32, .2);
|
|
--code-background: #3a3832;
|
|
--code-normal: #e8dcc6;
|
|
--code-comment: #9c9584;
|
|
--code-function: #f2a882;
|
|
--code-important: #e27a5a;
|
|
--code-keyword: #8bb5d9;
|
|
--code-property: #a8c47a;
|
|
--code-punctuation: rgba(232, 220, 198, .7);
|
|
--code-string: #b5a8d4;
|
|
--code-tag: #e08ba8;
|
|
--code-value: #95b3aa;
|
|
--heading-primary: #f2a882;
|
|
--heading-secondary: #8ba891;
|
|
--heading-tertiary: #b5a8d4;
|
|
--heading-quaternary: #a8c47a;
|
|
--heading-quinary: #c97a94;
|
|
--heading-senary: #95b3aa;
|
|
--heading-primary-rgb: 242, 168, 130;
|
|
--heading-secondary-rgb: 139, 168, 145;
|
|
--heading-tertiary-rgb: 181, 168, 212;
|
|
--heading-quaternary-rgb: 168, 196, 122;
|
|
--heading-quinary-rgb: 201, 122, 148;
|
|
--heading-senary-rgb: 149, 179, 170;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #f2a882;
|
|
--callout-note-rgb: 242, 168, 130;
|
|
--callout-info: #e9d5a3;
|
|
--callout-info-rgb: 233, 213, 163;
|
|
--callout-warning: #f39c12;
|
|
--callout-warning-rgb: 243, 156, 18;
|
|
--callout-success: #a8c47a;
|
|
--callout-success-rgb: 168, 196, 122;
|
|
--callout-danger: #e74c3c;
|
|
--callout-danger-rgb: 231, 76, 60;
|
|
--callout-example: #95b3aa;
|
|
--callout-example-rgb: 149, 179, 170;
|
|
--callout-cite: #a29bfe;
|
|
--callout-cite-rgb: 162, 155, 254;
|
|
--callout-video: #f2b399;
|
|
--callout-video-rgb: 242, 179, 153;
|
|
--callout-quote: #e8dcc6;
|
|
--callout-quote-rgb: 232, 220, 198;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #4a3d2e;
|
|
--highlight-bg: #3a2f20;
|
|
--highlight-bg-dark: #5a4430;
|
|
--highlight-bg-dark-color: #5a4430;
|
|
--highlight-bg-light-color: #f2c088;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #4a473e;
|
|
--surface-accent-rgb: 74, 71, 62;
|
|
--surface-dark: #282520;
|
|
--surface-dark-rgb: 40, 37, 32;
|
|
--tab-bg-inactive: rgba(40, 37, 32, .15);
|
|
--tab-bg-inactive-hover: rgba(40, 37, 32, .25);
|
|
}
|
|
|
|
/* Winter Theme - Light Mode Overrides */
|
|
.winter-theme {
|
|
--accent-h: 210;
|
|
--accent-s: 50%;
|
|
--accent-l: 55%;
|
|
}
|
|
|
|
.theme-light.winter-theme {
|
|
--background-primary: #f0f8ff;
|
|
--background-primary-rgb: 240, 248, 255;
|
|
--background-secondary: #e6f2ff;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 230, 242, 255;
|
|
--background-secondary-alt: #dae8f5;
|
|
--text-normal: #1a2d3d;
|
|
--text-normal-rgb: 26, 45, 61;
|
|
--text-muted: rgba(26, 45, 61, .7);
|
|
--emphasis-color: #2c4a5e;
|
|
--emphasis-color-light: #4a7c9b;
|
|
--primary-color: #4a7c9b;
|
|
--primary-color-rgb: 74, 124, 155;
|
|
--primary-color-dark: #2c4a5e;
|
|
--interactive-accent: #4a7c9b;
|
|
--interactive-accent-hover: #2c4a5e;
|
|
--link-color: #4a7c9b;
|
|
--link-color-hover: #2c4a5e;
|
|
--link-unresolved-color: #4a7c9b;
|
|
--blockquote-border-color: #4a7c9b;
|
|
--checkbox-color: #4a7c9b;
|
|
--text-accent: #2c4a5e;
|
|
--divider-color: #c8d9ed88;
|
|
--text-selection: #d1e8ff;
|
|
--scrollbar-thumb: rgba(125, 179, 221, .35);
|
|
--scrollbar-track: rgba(217, 235, 247, .2);
|
|
--code-background: #e1f0ff;
|
|
--code-normal: #1a2d3d;
|
|
--code-comment: rgba(26, 45, 61, .6);
|
|
--code-function: #4a7c9b;
|
|
--code-important: #2c4a5e;
|
|
--code-keyword: #4682b4;
|
|
--code-property: #2d5a2d;
|
|
--code-punctuation: rgba(26, 45, 61, .7);
|
|
--code-string: #8b4a8b;
|
|
--code-tag: #483d8b;
|
|
--code-value: #008b8b;
|
|
--heading-primary: #a1cbe8;
|
|
--heading-secondary: #aed6f2;
|
|
--heading-tertiary: #2b57ce;
|
|
--heading-quaternary: #2d5a2d;
|
|
--heading-quinary: #483d8b;
|
|
--heading-senary: #008b8b;
|
|
--heading-primary-rgb: 161, 203, 232;
|
|
--heading-secondary-rgb: 174, 214, 242;
|
|
--heading-tertiary-rgb: 43, 87, 206;
|
|
--heading-quaternary-rgb: 45, 90, 45;
|
|
--heading-quinary-rgb: 72, 61, 139;
|
|
--heading-senary-rgb: 0, 139, 139;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #2e5984;
|
|
--callout-note-rgb: 46, 89, 132;
|
|
--callout-info: #4682b4;
|
|
--callout-info-rgb: 70, 130, 180;
|
|
--callout-warning: #e07a5f;
|
|
--callout-warning-rgb: 224, 122, 95;
|
|
--callout-success: #2d5a2d;
|
|
--callout-success-rgb: 45, 90, 45;
|
|
--callout-danger: #e67e22;
|
|
--callout-danger-rgb: 230, 126, 34;
|
|
--callout-example: #008b8b;
|
|
--callout-example-rgb: 0, 139, 139;
|
|
--callout-cite: #573d84;
|
|
--callout-cite-rgb: 87, 61, 132;
|
|
--callout-video: #483d8b;
|
|
--callout-video-rgb: 72, 61, 139;
|
|
--callout-quote: #a1c8f0;
|
|
--callout-quote-rgb: 161, 200, 240;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #7eb0d6;
|
|
--highlight-bg-rgb: 158, 197, 230;
|
|
--highlight-bg-dark: #7aaddb;
|
|
--highlight-bg-dark-color: #0f2535;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #e1f0ff;
|
|
--surface-accent-rgb: 225, 240, 255;
|
|
--surface-dark: #1e2a37;
|
|
--surface-dark-rgb: 30, 42, 55;
|
|
--tab-bg-inactive: rgba(217, 235, 247, .08);
|
|
--tab-bg-inactive-hover: rgba(217, 235, 247, .12);
|
|
}
|
|
|
|
.theme-dark.winter-theme {
|
|
--background-primary: #151b21;
|
|
--background-primary-rgb: 21, 27, 33;
|
|
--background-secondary: #1d242b;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 29, 36, 43;
|
|
--background-secondary-alt: #212831;
|
|
--text-normal: #d4e1ed;
|
|
--text-normal-rgb: 212, 225, 237;
|
|
--text-muted: rgba(212, 225, 237, .7);
|
|
--emphasis-color: #7db3dd;
|
|
--emphasis-color-light: #7db3dd;
|
|
--primary-color: #7db3dd;
|
|
--primary-color-rgb: 125, 179, 221;
|
|
--primary-color-dark: #5a91bd;
|
|
--interactive-accent: #7db3dd;
|
|
--interactive-accent-hover: #5a91bd;
|
|
--link-color: #7db3dd;
|
|
--link-color-hover: #5a91bd;
|
|
--link-unresolved-color: #7db3dd;
|
|
--blockquote-border-color: #7db3dd;
|
|
--checkbox-color: #7db3dd;
|
|
--text-accent: #5a91bd;
|
|
--divider-color: #3a4a5c88;
|
|
--text-selection: #1f3347;
|
|
--scrollbar-thumb: rgba(125, 179, 221, .35);
|
|
--scrollbar-track: rgba(21, 27, 33, .2);
|
|
--code-background: #212831;
|
|
--code-normal: #d4e1ed;
|
|
--code-comment: rgba(212, 225, 237, .6);
|
|
--code-function: #7db3dd;
|
|
--code-important: #5a91bd;
|
|
--code-keyword: #a1c8f0;
|
|
--code-property: #7db37d;
|
|
--code-punctuation: rgba(212, 225, 237, .7);
|
|
--code-string: #c595c5;
|
|
--code-tag: #8a7dd8;
|
|
--code-value: #4dd4d4;
|
|
--heading-primary: #d4e8f7;
|
|
--heading-secondary: #a1c8f0;
|
|
--heading-tertiary: #a8d8e8;
|
|
--heading-quaternary: #7db37d;
|
|
--heading-quinary: #8a7dd8;
|
|
--heading-senary: #4dd4d4;
|
|
--heading-primary-rgb: 212, 232, 247;
|
|
--heading-secondary-rgb: 161, 200, 240;
|
|
--heading-tertiary-rgb: 168, 216, 232;
|
|
--heading-quaternary-rgb: 125, 179, 125;
|
|
--heading-quinary-rgb: 138, 125, 216;
|
|
--heading-senary-rgb: 77, 212, 212;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #7db3dd;
|
|
--callout-note-rgb: 125, 179, 221;
|
|
--callout-info: #a1c8f0;
|
|
--callout-info-rgb: 161, 200, 240;
|
|
--callout-warning: #f1c40f;
|
|
--callout-warning-rgb: 241, 196, 15;
|
|
--callout-success: #7db37d;
|
|
--callout-success-rgb: 125, 179, 125;
|
|
--callout-danger: #e67e22;
|
|
--callout-danger-rgb: 230, 126, 34;
|
|
--callout-example: #4dd4d4;
|
|
--callout-example-rgb: 77, 212, 212;
|
|
--callout-cite: #a29bfe;
|
|
--callout-cite-rgb: 162, 155, 254;
|
|
--callout-video: #81e6d9;
|
|
--callout-video-rgb: 129, 230, 217;
|
|
--callout-quote: #d9ebf7;
|
|
--callout-quote-rgb: 217, 235, 247;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #1f2d3a;
|
|
--highlight-bg-dark: #2a3f52;
|
|
--highlight-bg-dark-color: #2a3f52;
|
|
--highlight-bg-light-color: #9ec5e6;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #3a4a5c;
|
|
--surface-accent-rgb: 58, 74, 92;
|
|
--surface-dark: #151b21;
|
|
--surface-dark-rgb: 21, 27, 33;
|
|
--tab-bg-inactive: rgba(21, 27, 33, .15);
|
|
--tab-bg-inactive-hover: rgba(21, 27, 33, .25);
|
|
}
|
|
|
|
|
|
|
|
/* Spring Theme Variables */
|
|
.spring-theme {
|
|
--accent-h: 90;
|
|
--accent-s: 45%;
|
|
--accent-l: 40%;
|
|
}
|
|
|
|
.theme-light.spring-theme {
|
|
--background-primary: #f5faf0;
|
|
--background-primary-rgb: 245, 250, 240;
|
|
--background-secondary: #eef5e6;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 238, 245, 230;
|
|
--background-secondary-alt: #e6f0da;
|
|
--text-normal: #1f2e1a;
|
|
--text-normal-rgb: 31, 46, 26;
|
|
--text-muted: rgba(31, 46, 26, .7);
|
|
--emphasis-color: #4a6b2e;
|
|
--emphasis-color-light: #72a043;
|
|
--primary-color: #72a043;
|
|
--primary-color-rgb: 114, 160, 67;
|
|
--primary-color-dark: #4a6b2e;
|
|
--interactive-accent: #72a043;
|
|
--interactive-accent-hover: #4a6b2e;
|
|
--link-color: #72a043;
|
|
--link-color-hover: #4a6b2e;
|
|
--link-unresolved-color: #72a043;
|
|
--blockquote-border-color: #72a043;
|
|
--checkbox-color: #72a043;
|
|
--text-accent: #4a6b2e;
|
|
--divider-color: #d4e6c788;
|
|
--text-selection: #e6f2d1;
|
|
--scrollbar-thumb: rgba(168, 212, 111, .4);
|
|
--scrollbar-track: rgba(240, 249, 240, .2);
|
|
--code-background: #f0f7e6;
|
|
--code-normal: #1f2e1a;
|
|
--code-comment: rgba(31, 46, 26, .6);
|
|
--code-function: #5a7a33;
|
|
--code-important: #3d5422;
|
|
--code-keyword: #a05a8b;
|
|
--code-property: #6b8e23;
|
|
--code-punctuation: rgba(31, 46, 26, .7);
|
|
--code-string: #e07a5f;
|
|
--code-tag: #2e5a8b;
|
|
--code-value: #b8860b;
|
|
--heading-primary: #72a043;
|
|
--heading-secondary: #a05a8b;
|
|
--heading-tertiary: #ff8b7c;
|
|
--heading-quaternary: #6b8e23;
|
|
--heading-quinary: #2e5a8b;
|
|
--heading-senary: #b8860b;
|
|
--heading-primary-rgb: 114, 160, 67;
|
|
--heading-secondary-rgb: 160, 90, 139;
|
|
--heading-tertiary-rgb: 255, 139, 124;
|
|
--heading-quaternary-rgb: 107, 142, 35;
|
|
--heading-quinary-rgb: 46, 90, 139;
|
|
--heading-senary-rgb: 184, 134, 11;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #6bb02d;
|
|
--callout-note-rgb: 107, 176, 45;
|
|
--callout-info: #3a8cd6;
|
|
--callout-info-rgb: 58, 140, 214;
|
|
--callout-warning: #f1c40f;
|
|
--callout-warning-rgb: 241, 196, 15;
|
|
--callout-success: #2ecc71;
|
|
--callout-success-rgb: 46, 204, 113;
|
|
--callout-danger: #545454;
|
|
--callout-danger-rgb: 84, 84, 84;
|
|
--callout-example: #e18c6d;
|
|
--callout-example-rgb: 225, 140, 109;
|
|
--callout-cite: #573d84;
|
|
--callout-cite-rgb: 87, 61, 132;
|
|
--callout-video: #7ba3d4;
|
|
--callout-video-rgb: 123, 163, 212;
|
|
--callout-quote: #b8e994;
|
|
--callout-quote-rgb: 184, 233, 148;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #a8d67a;
|
|
--highlight-bg-rgb: 200, 230, 168;
|
|
--highlight-bg-dark: #a6d47a;
|
|
--highlight-bg-dark-color: #1a2f0e;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #f5faf0;
|
|
--surface-accent-rgb: 245, 250, 240;
|
|
--surface-dark: #2a3d1a;
|
|
--surface-dark-rgb: 42, 61, 26;
|
|
--tab-bg-inactive: rgba(240, 249, 240, .08);
|
|
--tab-bg-inactive-hover: rgba(240, 249, 240, .12);
|
|
}
|
|
|
|
.theme-dark.spring-theme {
|
|
--background-primary: #1a1f16;
|
|
--background-primary-rgb: 26, 31, 22;
|
|
--background-secondary: #252b21;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 37, 43, 33;
|
|
--background-secondary-alt: #2a3125;
|
|
--text-normal: #d4e8c4;
|
|
--text-normal-rgb: 212, 232, 196;
|
|
--text-muted: rgba(212, 232, 196, .7);
|
|
--emphasis-color: #9bc95f;
|
|
--emphasis-color-light: #a8d46f;
|
|
--primary-color: #9bc95f;
|
|
--primary-color-rgb: 155, 201, 95;
|
|
--primary-color-dark: #7ba049;
|
|
--interactive-accent: #9bc95f;
|
|
--interactive-accent-hover: #7ba049;
|
|
--link-color: #9bc95f;
|
|
--link-color-hover: #7ba049;
|
|
--link-unresolved-color: #9bc95f;
|
|
--blockquote-border-color: #9bc95f;
|
|
--checkbox-color: #9bc95f;
|
|
--text-accent: #7ba049;
|
|
--divider-color: #3d4f2e88;
|
|
--text-selection: #2a4220;
|
|
--scrollbar-thumb: rgba(155, 201, 95, .4);
|
|
--scrollbar-track: rgba(26, 31, 22, .2);
|
|
--code-background: #2a3125;
|
|
--code-normal: #d4e8c4;
|
|
--code-comment: rgba(212, 232, 196, .6);
|
|
--code-function: #a8d46f;
|
|
--code-important: #7ba049;
|
|
--code-keyword: #d4a1c4;
|
|
--code-property: #b8d982;
|
|
--code-punctuation: rgba(212, 232, 196, .7);
|
|
--code-string: #f2b399;
|
|
--code-tag: #7ba3d4;
|
|
--code-value: #e6c547;
|
|
--heading-primary: #a8d46f;
|
|
--heading-secondary: #c5b8e6;
|
|
--heading-tertiary: #ffb380;
|
|
--heading-quaternary: #b8d982;
|
|
--heading-quinary: #7ba3d4;
|
|
--heading-senary: #f5db7a;
|
|
--heading-primary-rgb: 168, 212, 111;
|
|
--heading-secondary-rgb: 197, 184, 230;
|
|
--heading-tertiary-rgb: 255, 179, 128;
|
|
--heading-quaternary-rgb: 184, 217, 130;
|
|
--heading-quinary-rgb: 123, 163, 212;
|
|
--heading-senary-rgb: 245, 219, 122;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #a8d46f;
|
|
--callout-note-rgb: 168, 212, 111;
|
|
--callout-info: #7ba3d4;
|
|
--callout-info-rgb: 123, 163, 212;
|
|
--callout-warning: #f1c40f;
|
|
--callout-warning-rgb: 241, 196, 15;
|
|
--callout-success: #2ecc71;
|
|
--callout-success-rgb: 46, 204, 113;
|
|
--callout-danger: #545454;
|
|
--callout-danger-rgb: 84, 84, 84;
|
|
--callout-example: #f2b399;
|
|
--callout-example-rgb: 242, 179, 153;
|
|
--callout-cite: #a29bfe;
|
|
--callout-cite-rgb: 162, 155, 254;
|
|
--callout-video: #8bbdd9;
|
|
--callout-video-rgb: 139, 189, 217;
|
|
--callout-quote: #dff9fb;
|
|
--callout-quote-rgb: 223, 249, 251;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #252f20;
|
|
--highlight-bg-dark: #354530;
|
|
--highlight-bg-dark-color: #354530;
|
|
--highlight-bg-light-color: #b8d982;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #3d4f2e;
|
|
--surface-accent-rgb: 61, 79, 46;
|
|
--surface-dark: #1a1f16;
|
|
--surface-dark-rgb: 26, 31, 22;
|
|
--tab-bg-inactive: rgba(26, 31, 22, .15);
|
|
--tab-bg-inactive-hover: rgba(26, 31, 22, .25);
|
|
}
|
|
|
|
/* Summer Theme Variables */
|
|
.summer-theme {
|
|
--accent-h: 330;
|
|
--accent-s: 70%;
|
|
--accent-l: 55%;
|
|
}
|
|
|
|
.theme-light.summer-theme {
|
|
--background-primary: #f7f7f7;
|
|
--background-primary-rgb: 247, 247, 247;
|
|
--background-secondary: #f5f5f5;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 245, 245, 245;
|
|
--background-secondary-alt: #f0f0f0;
|
|
--text-normal: #191919;
|
|
--text-normal-rgb: 25, 25, 25;
|
|
--text-muted: rgba(61, 26, 46, .7);
|
|
--emphasis-color: #a02659;
|
|
--emphasis-color-light: #d63384;
|
|
--primary-color: #d63384;
|
|
--primary-color-rgb: 214, 51, 132;
|
|
--primary-color-dark: #a02659;
|
|
--interactive-accent: #d63384;
|
|
--interactive-accent-hover: #a02659;
|
|
--link-color: #d63384;
|
|
--link-color-hover: #a02659;
|
|
--link-unresolved-color: #d63384;
|
|
--blockquote-border-color: #d63384;
|
|
--checkbox-color: #d63384;
|
|
--text-accent: #a02659;
|
|
--divider-color: #f0e6e088;
|
|
--text-selection: #f0f0f0;
|
|
--scrollbar-thumb: rgba(242, 139, 184, .35);
|
|
--scrollbar-track: rgba(255, 240, 245, .2);
|
|
--code-background: #f8f8f8;
|
|
--code-normal: #3d1a2e;
|
|
--code-comment: rgba(61, 26, 46, .6);
|
|
--code-function: #d63384;
|
|
--code-important: #a02659;
|
|
--code-keyword: #cc8500;
|
|
--code-property: #8b4513;
|
|
--code-punctuation: rgba(61, 26, 46, .7);
|
|
--code-string: #0c7a93;
|
|
--code-tag: #0a6b5d;
|
|
--code-value: indigo;
|
|
--heading-primary: #ff6b9d;
|
|
--heading-secondary: #00c9b7;
|
|
--heading-tertiary: #ff9f43;
|
|
--heading-quaternary: #f368e0;
|
|
--heading-quinary: #0a6b5d;
|
|
--heading-senary: #4b0082;
|
|
--heading-primary-rgb: 255, 107, 157;
|
|
--heading-secondary-rgb: 0, 201, 183;
|
|
--heading-tertiary-rgb: 255, 159, 67;
|
|
--heading-quaternary-rgb: 243, 104, 224;
|
|
--heading-quinary-rgb: 10, 107, 93;
|
|
--heading-senary-rgb: 75, 0, 130;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #d63384;
|
|
--callout-note-rgb: 214, 51, 132;
|
|
--callout-info: #cc8500;
|
|
--callout-info-rgb: 204, 133, 0;
|
|
--callout-warning: #0c7a93;
|
|
--callout-warning-rgb: 12, 122, 147;
|
|
--callout-success: #0a6b5d;
|
|
--callout-success-rgb: 10, 107, 93;
|
|
--callout-danger: #e74c3c;
|
|
--callout-danger-rgb: 231, 76, 60;
|
|
--callout-example: #f3784e;
|
|
--callout-example-rgb: 243, 120, 78;
|
|
--callout-cite: #573d84;
|
|
--callout-cite-rgb: 87, 61, 132;
|
|
--callout-video: #57d9eb;
|
|
--callout-video-rgb: 87, 217, 235;
|
|
--callout-quote: #fff8dc;
|
|
--callout-quote-rgb: 255, 248, 220;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #ff99bb;
|
|
--highlight-bg-rgb: 255, 201, 224;
|
|
--highlight-bg-dark: #f5a8c9;
|
|
--highlight-bg-dark-color: #4a1530;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #fff8f0;
|
|
--surface-accent-rgb: 255, 248, 240;
|
|
--surface-dark: #5d2f1a;
|
|
--surface-dark-rgb: 93, 47, 26;
|
|
--tab-bg-inactive: rgba(240, 249, 240, .08);
|
|
--tab-bg-inactive-hover: rgba(240, 249, 240, .12);
|
|
}
|
|
|
|
.theme-dark.summer-theme {
|
|
--background-primary: #1f1a1a;
|
|
--background-primary-rgb: 31, 26, 26;
|
|
--background-secondary: #2a2424;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 42, 36, 36;
|
|
--background-secondary-alt: #2f2828;
|
|
--text-normal: #f0d4e8;
|
|
--text-normal-rgb: 240, 212, 232;
|
|
--text-muted: rgba(240, 212, 232, .7);
|
|
--emphasis-color: #f28bb8;
|
|
--emphasis-color-light: #f28bb8;
|
|
--primary-color: #f28bb8;
|
|
--primary-color-rgb: 242, 139, 184;
|
|
--primary-color-dark: #e55a73;
|
|
--interactive-accent: #f28bb8;
|
|
--interactive-accent-hover: #e55a73;
|
|
--link-color: #f28bb8;
|
|
--link-color-hover: #e55a73;
|
|
--link-unresolved-color: #f28bb8;
|
|
--blockquote-border-color: #f28bb8;
|
|
--checkbox-color: #f28bb8;
|
|
--text-accent: #e55a73;
|
|
--divider-color: #5c3d2f88;
|
|
--text-selection: #4a2833;
|
|
--scrollbar-thumb: rgba(242, 139, 184, .35);
|
|
--scrollbar-track: rgba(31, 26, 26, .2);
|
|
--code-background: #2f2828;
|
|
--code-normal: #f0d4e8;
|
|
--code-comment: rgba(240, 212, 232, .6);
|
|
--code-function: #f28bb8;
|
|
--code-important: #e55a73;
|
|
--code-keyword: #e6c266;
|
|
--code-property: #d4a373;
|
|
--code-punctuation: rgba(240, 212, 232, .7);
|
|
--code-string: #66c4e6;
|
|
--code-tag: #66c4aa;
|
|
--code-value: #b08fd9;
|
|
--heading-primary: #ff94d1;
|
|
--heading-secondary: #00d9ff;
|
|
--heading-tertiary: #ffd700;
|
|
--heading-quaternary: #f2a882;
|
|
--heading-quinary: #66c4aa;
|
|
--heading-senary: #b08fd9;
|
|
--heading-primary-rgb: 255, 148, 209;
|
|
--heading-secondary-rgb: 0, 217, 255;
|
|
--heading-tertiary-rgb: 255, 215, 0;
|
|
--heading-quaternary-rgb: 242, 168, 130;
|
|
--heading-quinary-rgb: 102, 196, 170;
|
|
--heading-senary-rgb: 176, 143, 217;
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
--callout-note: #f28bb8;
|
|
--callout-note-rgb: 242, 139, 184;
|
|
--callout-info: #e6c266;
|
|
--callout-info-rgb: 230, 194, 102;
|
|
--callout-warning: #66c4e6;
|
|
--callout-warning-rgb: 102, 196, 230;
|
|
--callout-success: #66c4aa;
|
|
--callout-success-rgb: 102, 196, 170;
|
|
--callout-danger: #f1c40f;
|
|
--callout-danger-rgb: 241, 196, 15;
|
|
--callout-example: #f2a882;
|
|
--callout-example-rgb: 242, 168, 130;
|
|
--callout-cite: #a29bfe;
|
|
--callout-cite-rgb: 162, 155, 254;
|
|
--callout-video: #57e6ff;
|
|
--callout-video-rgb: 87, 230, 255;
|
|
--callout-quote: #fbd3e9;
|
|
--callout-quote-rgb: 251, 211, 233;
|
|
--callout-color: var(--heading-primary);
|
|
--callout-color-rgb: var(--heading-primary-rgb);
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
--highlight-bg: #3a2030;
|
|
--highlight-bg-dark: #5a3345;
|
|
--highlight-bg-dark-color: #5a3345;
|
|
--highlight-bg-light-color: #f5a8c9;
|
|
--link-opacity-hover: .18;
|
|
--link-opacity-normal: .1;
|
|
--link-opacity-unresolved: .05;
|
|
--link-opacity-unresolved-hover: .12;
|
|
--surface-accent: #5c3d2f;
|
|
--surface-accent-rgb: 92, 61, 47;
|
|
--surface-dark: #1f1a1a;
|
|
--surface-dark-rgb: 31, 26, 26;
|
|
--tab-bg-inactive: rgba(31, 26, 26, .15);
|
|
--tab-bg-inactive-hover: rgba(31, 26, 26, .25);
|
|
}
|
|
|
|
/* Paper Theme Variables */
|
|
.paper-theme {
|
|
--accent-h: 210;
|
|
--accent-s: 15%;
|
|
--accent-l: 55%;
|
|
}
|
|
|
|
.theme-light.paper-theme {
|
|
--background-primary: #F3F1EC;
|
|
--background-primary-rgb: 243, 241, 236;
|
|
--background-secondary: #E5E3E0;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 229, 227, 224;
|
|
--background-secondary-alt: #DBD9D6;
|
|
|
|
--text-normal: #656360;
|
|
--text-normal-rgb: 101, 99, 96;
|
|
--text-muted: #969491;
|
|
--text-faint: #C7C5C2;
|
|
|
|
--bold-color: #D14532;
|
|
--italic-color: #D14532;
|
|
|
|
--emphasis-color: #D14532;
|
|
--emphasis-color-light: #E65A48;
|
|
|
|
--primary-color: #555555;
|
|
--primary-color-rgb: 85, 85, 85;
|
|
--primary-color-dark: #333333;
|
|
--interactive-accent: #555555;
|
|
--interactive-accent-hover: #333333;
|
|
|
|
--link-color: #D14532;
|
|
--link-color-hover: #B83E2D;
|
|
--link-unresolved-color: #E65A48;
|
|
|
|
--blockquote-border-color: #D14532;
|
|
--checkbox-color: #D14532;
|
|
--text-accent: #D14532;
|
|
--divider-color: rgba(0, 0, 0, 0.08);
|
|
--text-selection: rgba(209, 69, 50, 0.15);
|
|
|
|
--scrollbar-thumb: rgba(0, 0, 0, 0.15);
|
|
--scrollbar-track: rgba(0, 0, 0, 0.03);
|
|
|
|
--code-background: #E8E7E3;
|
|
--code-normal: #1C1C1E;
|
|
--code-comment: #8E8E93;
|
|
--code-function: #555555;
|
|
--code-important: #C96652;
|
|
--code-keyword: #1C1C1E;
|
|
--code-property: #555555;
|
|
--code-punctuation: #8E8E93;
|
|
--code-string: #C96652;
|
|
--code-tag: #555555;
|
|
--code-value: #1C1C1E;
|
|
|
|
--heading-primary: #D14532;
|
|
--heading-secondary: #D14532;
|
|
--heading-tertiary: #D14532;
|
|
--heading-quaternary: #D14532;
|
|
--heading-quinary: #D14532;
|
|
--heading-senary: #D14532;
|
|
|
|
--heading-primary-rgb: 209, 69, 50;
|
|
--heading-secondary-rgb: 209, 69, 50;
|
|
--heading-tertiary-rgb: 209, 69, 50;
|
|
--heading-quaternary-rgb: 209, 69, 50;
|
|
--heading-quinary-rgb: 209, 69, 50;
|
|
--heading-senary-rgb: 209, 69, 50;
|
|
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
|
|
--callout-note: #D14532;
|
|
--callout-note-rgb: 209, 69, 50;
|
|
--callout-info: #D14532;
|
|
--callout-info-rgb: 209, 69, 50;
|
|
--callout-warning: #D14532;
|
|
--callout-warning-rgb: 209, 69, 50;
|
|
--callout-faq: #D14532;
|
|
--callout-faq-rgb: 209, 69, 50;
|
|
--callout-question: #D14532;
|
|
--callout-question-rgb: 209, 69, 50;
|
|
--callout-success: #D14532;
|
|
--callout-success-rgb: 209, 69, 50;
|
|
--callout-danger: #D14532;
|
|
--callout-danger-rgb: 209, 69, 50;
|
|
--callout-example: #D14532;
|
|
--callout-example-rgb: 209, 69, 50;
|
|
--callout-cite: #D14532;
|
|
--callout-cite-rgb: 209, 69, 50;
|
|
--callout-video: #D14532;
|
|
--callout-video-rgb: 209, 69, 50;
|
|
--callout-quote: #D14532;
|
|
--callout-quote-rgb: 209, 69, 50;
|
|
|
|
--highlight-bg: rgba(209, 69, 50, 0.2);
|
|
--highlight-bg-rgb: 209, 69, 50;
|
|
--highlight-bg-dark: rgba(209, 69, 50, 0.3);
|
|
|
|
--tab-bg-inactive: transparent;
|
|
--tab-bg-inactive-hover: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.theme-dark.paper-theme {
|
|
--background-primary: #191919;
|
|
--background-primary-rgb: 25, 25, 25;
|
|
--background-secondary: #2C2C2E;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 44, 44, 46;
|
|
--background-secondary-alt: #3A3A3C;
|
|
|
|
--text-normal: #E5E5EA;
|
|
--text-normal-rgb: 229, 229, 234;
|
|
--text-muted: #98989D;
|
|
--text-faint: #636366;
|
|
|
|
--bold-color: #FFFFFF;
|
|
--italic-color: #FFD60A;
|
|
|
|
--emphasis-color: #FFD60A;
|
|
--emphasis-color-light: #FFD60A;
|
|
|
|
--primary-color: #8E8E93;
|
|
--primary-color-rgb: 142, 142, 147;
|
|
--primary-color-dark: #636366;
|
|
--interactive-accent: #FFD60A;
|
|
--interactive-accent-hover: #FFC107;
|
|
|
|
--link-color: #FFD60A;
|
|
--link-color-hover: #FFC107;
|
|
--link-unresolved-color: #FFD60A;
|
|
|
|
--blockquote-border-color: #FFD60A;
|
|
--checkbox-color: #FFD60A;
|
|
--text-accent: #FFD60A;
|
|
--divider-color: rgba(255, 255, 255, 0.1);
|
|
--text-selection: rgba(255, 214, 10, 0.2);
|
|
|
|
--scrollbar-thumb: rgba(255, 255, 255, 0.15);
|
|
--scrollbar-track: rgba(255, 255, 255, 0.02);
|
|
|
|
--code-background: #252527;
|
|
--code-normal: #d1d1d6;
|
|
--code-comment: #8e8e93;
|
|
--code-function: #FFD60A;
|
|
--code-important: #FFD60A;
|
|
--code-keyword: #E5E5EA;
|
|
--code-property: #b0b0b5;
|
|
--code-punctuation: #8e8e93;
|
|
--code-string: #FFD60A;
|
|
--code-tag: #8E8E93;
|
|
--code-value: #d1d1d6;
|
|
|
|
--heading-primary: #FFD60A;
|
|
--heading-secondary: #FFD60A;
|
|
--heading-tertiary: #FFD60A;
|
|
--heading-quaternary: #FFD60A;
|
|
--heading-quinary: #FFD60A;
|
|
--heading-senary: #FFD60A;
|
|
|
|
--heading-primary-rgb: 255, 214, 10;
|
|
--heading-secondary-rgb: 255, 214, 10;
|
|
--heading-tertiary-rgb: 255, 214, 10;
|
|
--heading-quaternary-rgb: 255, 214, 10;
|
|
--heading-quinary-rgb: 255, 214, 10;
|
|
--heading-senary-rgb: 255, 214, 10;
|
|
|
|
--folder-1-color: var(--heading-primary);
|
|
--folder-1-color-rgb: var(--heading-primary-rgb);
|
|
--folder-2-color: var(--heading-secondary);
|
|
--folder-2-color-rgb: var(--heading-secondary-rgb);
|
|
--folder-3-color: var(--heading-tertiary);
|
|
--folder-3-color-rgb: var(--heading-tertiary-rgb);
|
|
--folder-4-color: var(--heading-quaternary);
|
|
--folder-4-color-rgb: var(--heading-quaternary-rgb);
|
|
--folder-5-color: var(--heading-quinary);
|
|
--folder-5-color-rgb: var(--heading-quinary-rgb);
|
|
--folder-6-color: var(--heading-senary);
|
|
--folder-6-color-rgb: var(--heading-senary-rgb);
|
|
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
--folder-accent-opacity: .6;
|
|
--folder-active-opacity: .8;
|
|
|
|
--callout-note: #FFD60A;
|
|
--callout-note-rgb: 255, 214, 10;
|
|
--callout-info: #FFD60A;
|
|
--callout-info-rgb: 255, 214, 10;
|
|
--callout-warning: #FFD60A;
|
|
--callout-warning-rgb: 255, 214, 10;
|
|
--callout-faq: #FFD60A;
|
|
--callout-faq-rgb: 255, 214, 10;
|
|
--callout-question: #FFD60A;
|
|
--callout-question-rgb: 255, 214, 10;
|
|
--callout-success: #FFD60A;
|
|
--callout-success-rgb: 255, 214, 10;
|
|
--callout-danger: #FFD60A;
|
|
--callout-danger-rgb: 255, 214, 10;
|
|
--callout-example: #FFD60A;
|
|
--callout-example-rgb: 255, 214, 10;
|
|
--callout-cite: #FFD60A;
|
|
--callout-cite-rgb: 255, 214, 10;
|
|
--callout-video: #FFD60A;
|
|
--callout-video-rgb: 255, 214, 10;
|
|
--callout-quote: #FFD60A;
|
|
--callout-quote-rgb: 255, 214, 10;
|
|
|
|
--highlight-bg: rgba(255, 214, 10, 0.2);
|
|
--highlight-bg-rgb: 255, 214, 10;
|
|
--highlight-bg-dark: rgba(255, 214, 10, 0.3);
|
|
--highlight-bg-dark-color: rgba(255, 214, 10, 0.5);
|
|
--highlight-bg-light-color: var(--text-normal);
|
|
|
|
--tab-bg-inactive: transparent;
|
|
--tab-bg-inactive-hover: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Paper Theme Specific Table Overrides for Readability */
|
|
.theme-dark.paper-theme .markdown-rendered table th,
|
|
.theme-dark.paper-theme .markdown-preview-view table th {
|
|
color: #191919 !important;
|
|
}
|
|
|
|
|
|
/* Monochrome Mode Toggle - Grayscale Text, Single Accent */
|
|
body.enable-monochrome.theme-light,
|
|
body.enable-monochrome.theme-dark {
|
|
--accent-h: 0;
|
|
|
|
/* Force Text Elements to Grayscale */
|
|
--bold-color: var(--text-normal);
|
|
--italic-color: var(--text-normal);
|
|
--link-color: var(--text-normal);
|
|
--link-color-hover: var(--text-normal);
|
|
--text-accent: var(--text-normal);
|
|
|
|
/* Headings inherit text color */
|
|
--heading-primary: var(--text-normal);
|
|
--heading-secondary: var(--text-normal);
|
|
--heading-tertiary: var(--text-normal);
|
|
--heading-quaternary: var(--text-normal);
|
|
--heading-quinary: var(--text-normal);
|
|
--heading-senary: var(--text-normal);
|
|
|
|
/* Force Callouts to Single Theme Accent */
|
|
--callout-note: var(--emphasis-color);
|
|
--callout-info: var(--emphasis-color);
|
|
--callout-warning: var(--emphasis-color);
|
|
--callout-faq: var(--emphasis-color);
|
|
--callout-question: var(--emphasis-color);
|
|
--callout-success: var(--emphasis-color);
|
|
--callout-danger: var(--emphasis-color);
|
|
--callout-example: var(--emphasis-color);
|
|
--callout-cite: var(--emphasis-color);
|
|
--callout-video: var(--emphasis-color);
|
|
--callout-quote: var(--emphasis-color);
|
|
|
|
/* Folders inherit accent */
|
|
--folder-color: var(--emphasis-color);
|
|
--folder-text-color: var(--text-normal);
|
|
}
|
|
|
|
/* FORCE Monochrome Text Overrides - high specificity to beat other themes */
|
|
body.enable-monochrome :is(h1, h2, h3, h4, h5, h6, strong, em, b, i, .cm-header, .cm-strong, .cm-em, .cm-bold, .cm-italic) {
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
body.enable-monochrome :is(a, .cm-link, .external-link, .internal-link) {
|
|
color: var(--text-normal) !important;
|
|
text-decoration-color: var(--text-normal) !important;
|
|
}
|
|
|
|
body.enable-monochrome .callout-title {
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
body.theme-light.enable-monochrome {
|
|
--background-primary: rgb(250, 250, 250);
|
|
--background-primary-rgb: 250, 250, 250;
|
|
--background-secondary: rgb(242, 242, 242);
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 242, 242, 242;
|
|
--background-secondary-alt: rgb(235, 235, 235);
|
|
|
|
--text-normal: #111111;
|
|
--text-normal-rgb: 17, 17, 17;
|
|
--text-muted: #666666;
|
|
--text-faint: #999999;
|
|
|
|
|
|
|
|
--heading-primary-rgb: 0, 0, 0;
|
|
--heading-secondary-rgb: 17, 17, 17;
|
|
--heading-tertiary-rgb: 34, 34, 34;
|
|
--heading-quaternary-rgb: 51, 51, 51;
|
|
--heading-quinary-rgb: 68, 68, 68;
|
|
--heading-senary-rgb: 85, 85, 85;
|
|
|
|
--code-background: #f5f5f5;
|
|
--code-normal: #111111;
|
|
--code-comment: #888888;
|
|
|
|
/* Structural Grays */
|
|
--divider-color: rgba(0, 0, 0, .1);
|
|
--text-selection: rgba(0, 0, 0, .1);
|
|
--scrollbar-thumb: rgba(0, 0, 0, .2);
|
|
--scrollbar-track: rgba(0, 0, 0, .05);
|
|
|
|
--tab-bg-inactive: rgba(0, 0, 0, .03);
|
|
--tab-bg-inactive-hover: rgba(0, 0, 0, .08);
|
|
}
|
|
|
|
body.theme-dark.enable-monochrome {
|
|
--background-primary: #111111;
|
|
--background-primary-rgb: 17, 17, 17;
|
|
--background-secondary: #0a0a0a;
|
|
--setting-items-background: var(--background-secondary);
|
|
--background-secondary-rgb: 10, 10, 10;
|
|
--background-secondary-alt: #000000;
|
|
|
|
--text-normal: #eeeeee;
|
|
--text-normal-rgb: 238, 238, 238;
|
|
--text-muted: #888888;
|
|
--text-faint: #555555;
|
|
|
|
|
|
|
|
--heading-primary-rgb: 255, 255, 255;
|
|
--heading-secondary-rgb: 238, 238, 238;
|
|
--heading-tertiary-rgb: 221, 221, 221;
|
|
--heading-quaternary-rgb: 204, 204, 204;
|
|
--heading-quinary-rgb: 187, 187, 187;
|
|
--heading-senary-rgb: 170, 170, 170;
|
|
|
|
--code-background: #0a0a0a;
|
|
--code-normal: #eeeeee;
|
|
--code-comment: #888888;
|
|
|
|
/* Structural Grays */
|
|
--divider-color: rgba(255, 255, 255, .1);
|
|
--text-selection: rgba(255, 255, 255, .1);
|
|
--scrollbar-thumb: rgba(255, 255, 255, .2);
|
|
--scrollbar-track: rgba(255, 255, 255, .05);
|
|
|
|
--modal-background: #111111;
|
|
--modal-border-color: rgba(255, 255, 255, .1);
|
|
--background-modifier-border: rgba(255, 255, 255, .1);
|
|
--background-modifier-border-hover: rgba(255, 255, 255, .2);
|
|
--input-background: #0a0a0a;
|
|
--input-border-color: rgba(255, 255, 255, .1);
|
|
|
|
--tab-bg-inactive: rgba(255, 255, 255, .02);
|
|
--tab-bg-inactive-hover: rgba(255, 255, 255, .05);
|
|
}
|
|
|
|
|
|
.theme-dark.enable-monochrome .markdown-rendered table th,
|
|
.theme-dark.enable-monochrome .markdown-preview-view table th {
|
|
background-color: #0f0f0f !important;
|
|
color: #e8e8e8 !important;
|
|
border-bottom: 2px solid rgba(232, 232, 232, .2) !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .markdown-rendered table thead tr,
|
|
.theme-dark.enable-monochrome .markdown-preview-view table thead tr {
|
|
background-color: #0f0f0f !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .markdown-rendered table tbody tr {
|
|
border-bottom: 1px solid rgba(232, 232, 232, .1);
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .setting-item-name,
|
|
.theme-dark.enable-monochrome .setting-item-description,
|
|
.theme-dark.enable-monochrome .setting-item-info,
|
|
.theme-dark.enable-monochrome .setting-item-control,
|
|
.theme-dark.enable-monochrome .vertical-tab-content,
|
|
.theme-dark.enable-monochrome .horizontal-tab-content,
|
|
.theme-dark.enable-monochrome .modal-content,
|
|
.theme-dark.enable-monochrome .prompt-instructions,
|
|
.theme-dark.enable-monochrome label,
|
|
.theme-dark.enable-monochrome .checkbox-container {
|
|
color: #e8e8e8 !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .setting-item-description {
|
|
color: rgba(232, 232, 232, .7) !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .setting-item-heading {
|
|
color: #e8e8e8 !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .setting-item {
|
|
border-top: 1px solid rgba(232, 232, 232, .1);
|
|
}
|
|
|
|
.theme-dark.enable-monochrome input[type="text"],
|
|
.theme-dark.enable-monochrome input[type="search"],
|
|
.theme-dark.enable-monochrome input[type="email"],
|
|
.theme-dark.enable-monochrome input[type="password"],
|
|
.theme-dark.enable-monochrome input[type="number"],
|
|
.theme-dark.enable-monochrome textarea,
|
|
.theme-dark.enable-monochrome select {
|
|
background-color: #0f0f0f !important;
|
|
border: 1px solid rgba(232, 232, 232, .2) !important;
|
|
color: #e8e8e8 !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome input[type="text"]:focus,
|
|
.theme-dark.enable-monochrome input[type="search"]:focus,
|
|
.theme-dark.enable-monochrome textarea:focus,
|
|
.theme-dark.enable-monochrome select:focus {
|
|
border-color: rgba(232, 232, 232, .4) !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome select option {
|
|
background-color: #0f0f0f !important;
|
|
color: #e8e8e8 !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome button,
|
|
.theme-dark.enable-monochrome .clickable-icon {
|
|
color: #e8e8e8 !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .mod-cta,
|
|
.theme-dark.enable-monochrome button.mod-cta {
|
|
background-color: #252525 !important;
|
|
color: #e8e8e8 !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active,
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active .vertical-tab-nav-item-title,
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active:hover,
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active:hover .vertical-tab-nav-item-title {
|
|
background-color: #e8e8e8 !important;
|
|
color: #000000 !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active svg,
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active:hover svg,
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active .vertical-tab-nav-item-icon,
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active:hover .vertical-tab-nav-item-icon {
|
|
color: #000000 !important;
|
|
stroke: #000000 !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item {
|
|
color: rgba(232, 232, 232, .7) !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item:not(.is-active):hover {
|
|
background-color: rgba(232, 232, 232, .12) !important;
|
|
color: #e8e8e8 !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item svg {
|
|
color: rgba(232, 232, 232, .7) !important;
|
|
stroke: rgba(232, 232, 232, .7) !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome .vertical-tab-nav-item:not(.is-active):hover svg {
|
|
color: #e8e8e8 !important;
|
|
stroke: #e8e8e8 !important;
|
|
}
|
|
|
|
.theme-light.enable-monochrome .markdown-rendered table th,
|
|
.theme-light.enable-monochrome .markdown-preview-view table th {
|
|
background-color: #e0e0e0 !important;
|
|
color: #000000 !important;
|
|
border-bottom: 2px solid rgba(0, 0, 0, .2) !important;
|
|
}
|
|
|
|
.theme-light.enable-monochrome .markdown-rendered table thead tr,
|
|
.theme-light.enable-monochrome .markdown-preview-view table thead tr {
|
|
background-color: #e0e0e0 !important;
|
|
}
|
|
|
|
.theme-light.enable-monochrome .setting-item-name,
|
|
.theme-light.enable-monochrome .setting-item-description,
|
|
.theme-light.enable-monochrome .setting-item-info,
|
|
.theme-light.enable-monochrome label {
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.theme-light.enable-monochrome .setting-item-description {
|
|
color: rgba(0, 0, 0, .65) !important;
|
|
}
|
|
|
|
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active,
|
|
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active .vertical-tab-nav-item-title,
|
|
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active:hover,
|
|
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active:hover .vertical-tab-nav-item-title {
|
|
background-color: #000000 !important;
|
|
color: #ffffff !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active svg,
|
|
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active:hover svg,
|
|
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active .vertical-tab-nav-item-icon,
|
|
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active:hover .vertical-tab-nav-item-icon {
|
|
color: #ffffff !important;
|
|
stroke: #ffffff !important;
|
|
}
|
|
|
|
.theme-dark.enable-monochrome mark,
|
|
.theme-dark.enable-monochrome .cm-highlight,
|
|
.theme-dark.enable-monochrome mark:hover,
|
|
.theme-dark.enable-monochrome .cm-highlight:hover {
|
|
background-color: #d4af37 !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.theme-light.enable-monochrome mark,
|
|
.theme-light.enable-monochrome .cm-highlight,
|
|
.theme-light.enable-monochrome mark:hover,
|
|
.theme-light.enable-monochrome .cm-highlight:hover {
|
|
background-color: #ffeb3b !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
/* Global Transitions */
|
|
.theme-light,
|
|
.theme-dark,
|
|
body,
|
|
html {
|
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-content,
|
|
.markdown-source-view.mod-cm6 .cm-line {
|
|
line-height: var(--line-normal);
|
|
--file-line-width: 64ch;
|
|
padding-left: 2px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
/* Card Layout: Floating Pill Tabs */
|
|
|
|
body:not(.is-mobile).layout-card .workspace-tab-header-container {
|
|
background-color: var(--background-secondary-alt);
|
|
height: 50px;
|
|
padding: 8px 5px 1px 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-tab-header-container-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-tab-header {
|
|
background-color: rgba(var(--background-secondary-rgb), .3);
|
|
border-radius: var(--r3) !important;
|
|
height: 38px;
|
|
display: flex;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-tab-header.is-active {
|
|
background-color: var(--background-primary) !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-tab-header.is-active:hover {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-tab-header:not(.is-active):hover {
|
|
transform: scale(1.02);
|
|
background-color: rgba(var(--background-secondary-rgb), 0.5);
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-tab-header-inner-title {
|
|
color: var(--text-muted);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-tab-header.is-active .workspace-tab-header-inner-title {
|
|
opacity: 1;
|
|
color: var(--text-normal);
|
|
font-weight: 600;
|
|
}
|
|
|
|
body.layout-card .workspace-split.mod-left-split,
|
|
body.layout-card .workspace-split.mod-right-split {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
/* Unified fix for sidebar header clipping on macOS */
|
|
body.mod-macos.is-hidden-frameless.layout-card .workspace-tab-header-container-inner {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
/* Fix Windows Buttons to be Transparent */
|
|
.mod-windows .titlebar-button {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.is-focused .sidebar-toggle-button,
|
|
body.is-focused .workspace-tabs.mod-top {
|
|
--tab-container-background: var(--background-secondary);
|
|
}
|
|
|
|
/* Unset sidebar toggle top offset and background */
|
|
.mod-macos.is-hidden-frameless:not(.is-popout-window) .sidebar-toggle-button.mod-right {
|
|
top: unset;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* UI Element Styling */
|
|
|
|
/* Element Transitions and Containment */
|
|
.nav-folder,
|
|
.workspace-tab-header,
|
|
.callout,
|
|
.markdown-preview-view h1,
|
|
.markdown-preview-view h2,
|
|
.markdown-preview-view h3,
|
|
.markdown-preview-view h4,
|
|
.markdown-preview-view h5,
|
|
.markdown-preview-view h6,
|
|
.cm-header-1,
|
|
.cm-header-2,
|
|
.cm-header-3,
|
|
.cm-header-4,
|
|
.cm-header-5,
|
|
.cm-header-6 {
|
|
will-change: transform;
|
|
contain: layout style;
|
|
}
|
|
|
|
.workspace-leaf-content,
|
|
.nav-files-container {
|
|
contain: layout style paint;
|
|
}
|
|
|
|
.vertical-tab-container {
|
|
background-color: var(--background-primary);
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vertical-tab-nav-item {
|
|
padding: 12px 10px;
|
|
color: var(--text-normal);
|
|
font-weight: var(--weight-normal);
|
|
}
|
|
|
|
.vertical-tab-nav-item:hover {
|
|
background: rgba(var(--primary-color-rgb), .12);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.vertical-tab-nav-item.is-active,
|
|
.vertical-tab-nav-item.is-active svg {
|
|
background: var(--primary-color) !important;
|
|
color: white !important;
|
|
font-weight: var(--weight-semibold);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.theme-dark .vertical-tab-nav-item {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.theme-dark .vertical-tab-nav-item:hover {
|
|
background: rgba(var(--primary-color-rgb), .15);
|
|
color: var(--text-normal);
|
|
border-left-color: var(--primary-color);
|
|
}
|
|
|
|
.theme-dark .vertical-tab-nav-item.is-active,
|
|
.theme-dark .vertical-tab-nav-item.is-active svg {
|
|
background: var(--primary-color) !important;
|
|
color: white !important;
|
|
border-left-color: var(--primary-color-dark) !important;
|
|
box-shadow: var(--shadow-3);
|
|
}
|
|
|
|
.vertical-tab-content {
|
|
padding: var(--s4);
|
|
min-height: 400px;
|
|
}
|
|
|
|
|
|
.setting-item:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .05);
|
|
border-radius: var(--r2);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
border: none !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.setting-item-name {
|
|
color: var(--text-normal);
|
|
font-weight: var(--weight-medium);
|
|
margin-bottom: var(--s1);
|
|
}
|
|
|
|
.setting-item-description {
|
|
color: var(--text-normal);
|
|
opacity: .7;
|
|
font-size: .9em;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.vertical-tab-nav-item:focus {
|
|
outline: 2px solid var(--primary-color);
|
|
outline-offset: -2px;
|
|
border-radius: var(--r2);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
}
|
|
|
|
.vertical-tab-nav-item:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
@media (prefers-contrast: high) {
|
|
.vertical-tab-nav-item.is-active {
|
|
background: var(--primary-color) !important;
|
|
color: white !important;
|
|
border-left: 5px solid var(--primary-color-dark) !important;
|
|
box-shadow: inset 0 0 0 2px #fff;
|
|
}
|
|
}
|
|
|
|
.vertical-tab-header {
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
box-shadow: var(--shadow-2);
|
|
background: rgba(var(--primary-color-rgb), .05);
|
|
padding: 8px 12px;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.theme-dark .vertical-tab-header {
|
|
background: rgba(var(--primary-color-rgb), .08);
|
|
}
|
|
|
|
.vertical-tab-content .setting-item {
|
|
background: transparent;
|
|
border-radius: var(--r2);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
transition: opacity 0.15s cubic-bezier(.4, 0, .2, 1), background-color 0.18s, color 0.18s;
|
|
border-top: none !important;
|
|
border: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.vertical-tab-content .setting-item:hover {
|
|
background: rgba(var(--primary-color-rgb), .05);
|
|
}
|
|
|
|
.vertical-tab-content .setting-item.mod-selected {
|
|
background: rgba(var(--primary-color-rgb), .15);
|
|
border-left: none !important;
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
|
|
/* Headings (Preview and Source Mode) */
|
|
.markdown-preview-view h1,
|
|
.markdown-preview-view h2,
|
|
.markdown-preview-view h3,
|
|
.markdown-preview-view h4,
|
|
.markdown-preview-view h5,
|
|
.markdown-preview-view h6,
|
|
.markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
display: inline-flex;
|
|
padding: .2em .5em;
|
|
line-height: var(--line-tight);
|
|
border-radius: var(--r2);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
position: relative;
|
|
font-weight: var(--weight-semibold);
|
|
letter-spacing: -.01em;
|
|
box-shadow: var(--shadow-1);
|
|
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .1), rgba(0, 0, 0, .05));
|
|
background-blend-mode: overlay;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
margin: 0;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.theme-dark .markdown-preview-view h1,
|
|
.theme-dark .markdown-preview-view h2,
|
|
.theme-dark .markdown-preview-view h3,
|
|
.theme-dark .markdown-preview-view h4,
|
|
.theme-dark .markdown-preview-view h5,
|
|
.theme-dark .markdown-preview-view h6,
|
|
.theme-dark .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
|
|
.markdown-preview-view h1,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-header-1 {
|
|
background-color: rgba(var(--heading-primary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-primary) h s calc(l * var(--heading-text-multiplier)));
|
|
font-size: 1.8em;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.markdown-preview-view h2,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-header-2 {
|
|
background-color: rgba(var(--heading-secondary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-secondary) h s calc(l * var(--heading-text-multiplier)));
|
|
font-size: 1.4em;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.markdown-preview-view h3,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-header-3 {
|
|
background-color: rgba(var(--heading-tertiary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-tertiary) h s calc(l * var(--heading-text-multiplier)));
|
|
font-size: 1.35em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.markdown-preview-view h4,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-header-4 {
|
|
background-color: rgba(var(--heading-quaternary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-quaternary) h s calc(l * var(--heading-text-multiplier)));
|
|
font-size: 1.15em;
|
|
}
|
|
|
|
.markdown-preview-view h5,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-header-5 {
|
|
background-color: rgba(var(--heading-quinary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-quinary) h s calc(l * var(--heading-text-multiplier)));
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.markdown-preview-view h6,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-header-6 {
|
|
background-color: rgba(var(--heading-senary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-senary) h s calc(l * var(--heading-text-multiplier)));
|
|
font-size: 1.05em;
|
|
}
|
|
|
|
|
|
/* Heading Fold Indicator */
|
|
.markdown-rendered :is(h1, h2, h3, h4, h5, h6),
|
|
.markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"],
|
|
.markdown-source-view.mod-cm6 .cm-line {
|
|
position: relative !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Reading mode */
|
|
.markdown-rendered .heading-collapse-indicator {
|
|
position: absolute !important;
|
|
left: -1px !important;
|
|
height: 100% !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
opacity: 0 !important;
|
|
transition: opacity 0.2s ease !important;
|
|
z-index: 10;
|
|
}
|
|
|
|
.markdown-rendered :is(h1, h2, h3, h4, h5, h6):hover .heading-collapse-indicator {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Live Preview - base styles */
|
|
.markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator {
|
|
position: absolute !important;
|
|
inset-inline-end: auto !important;
|
|
left: -0.4em !important;
|
|
width: 1em !important;
|
|
height: 1em !important;
|
|
padding-inline-end: 0 !important;
|
|
opacity: 0 !important;
|
|
transition: opacity 0.2s ease !important;
|
|
z-index: 10;
|
|
top: 0.5em !important;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* Reveal arrow on hover */
|
|
:is(.cm-line:hover, .cm-gutterElement:hover) .cm-fold-indicator .collapse-indicator {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
|
|
/* Per-heading vertical positioning */
|
|
.markdown-source-view.mod-cm6 .cm-header-1 .cm-fold-indicator .collapse-indicator {
|
|
top: 0.7em !important;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-header-2 .cm-fold-indicator .collapse-indicator {
|
|
top: 0.5em !important;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-header-3 .cm-fold-indicator .collapse-indicator {
|
|
top: 0.45em !important;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-header-4 .cm-fold-indicator .collapse-indicator {
|
|
top: 0.4em !important;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-header-5 .cm-fold-indicator .collapse-indicator {
|
|
top: 0.35em !important;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-header-6 .cm-fold-indicator .collapse-indicator {
|
|
top: 0.33em !important;
|
|
}
|
|
|
|
/* Reveal arrow on hover */
|
|
:is(.cm-line:hover, .cm-gutterElement:hover) .cm-fold-indicator .collapse-indicator {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
|
|
/* Text Appearance Toggles */
|
|
body.h1-uppercase :is(h1, .cm-header-1) {
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.02em !important;
|
|
}
|
|
|
|
body.h2-uppercase :is(h2, .cm-header-2) {
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.02em !important;
|
|
}
|
|
|
|
body.h3-uppercase :is(h3, .cm-header-3) {
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.02em !important;
|
|
}
|
|
|
|
body.h4-uppercase :is(h4, .cm-header-4) {
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.02em !important;
|
|
}
|
|
|
|
body.h5-uppercase :is(h5, .cm-header-5) {
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.02em !important;
|
|
}
|
|
|
|
body.h6-uppercase :is(h6, .cm-header-6) {
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.02em !important;
|
|
}
|
|
|
|
/* Heading Hover Effects */
|
|
:is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-line) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6):hover {
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.05);
|
|
box-shadow: var(--shadow-1);
|
|
}
|
|
|
|
/* Heading Style Variants */
|
|
|
|
/* Underline Style */
|
|
.heading-style-underline .markdown-preview-view h1,
|
|
.heading-style-underline .markdown-preview-view h2,
|
|
.heading-style-underline .markdown-preview-view h3,
|
|
.heading-style-underline .markdown-preview-view h4,
|
|
.heading-style-underline .markdown-preview-view h5,
|
|
.heading-style-underline .markdown-preview-view h6,
|
|
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
background: transparent !important;
|
|
background-image: none !important;
|
|
box-shadow: none !important;
|
|
padding: .2em 0;
|
|
border-bottom: 3px solid;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.heading-style-underline .markdown-preview-view h1,
|
|
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-1 {
|
|
border-bottom-color: var(--heading-primary);
|
|
border-bottom-width: 4px;
|
|
}
|
|
|
|
.heading-style-underline .markdown-preview-view h2,
|
|
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-2 {
|
|
border-bottom-color: var(--heading-secondary);
|
|
border-bottom-width: 3px;
|
|
}
|
|
|
|
.heading-style-underline .markdown-preview-view h3,
|
|
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-3 {
|
|
border-bottom-color: var(--heading-tertiary);
|
|
border-bottom-width: 2.5px;
|
|
}
|
|
|
|
.heading-style-underline .markdown-preview-view h4,
|
|
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-4 {
|
|
border-bottom-color: var(--heading-quaternary);
|
|
border-bottom-width: 2px;
|
|
}
|
|
|
|
.heading-style-underline .markdown-preview-view h5,
|
|
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-5 {
|
|
border-bottom-color: var(--heading-quinary);
|
|
border-bottom-width: 2px;
|
|
}
|
|
|
|
.heading-style-underline .markdown-preview-view h6,
|
|
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-6 {
|
|
border-bottom-color: var(--heading-senary);
|
|
border-bottom-width: 1.5px;
|
|
}
|
|
|
|
.heading-style-underline :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-line) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6):hover {
|
|
transform: none;
|
|
filter: brightness(1.1);
|
|
border-bottom-width: calc(var(--border-width, 2px) + 1px);
|
|
}
|
|
|
|
/* Border Accent Style */
|
|
.heading-style-border .markdown-preview-view h1,
|
|
.heading-style-border .markdown-preview-view h2,
|
|
.heading-style-border .markdown-preview-view h3,
|
|
.heading-style-border .markdown-preview-view h4,
|
|
.heading-style-border .markdown-preview-view h5,
|
|
.heading-style-border .markdown-preview-view h6,
|
|
.heading-style-border .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
background: transparent !important;
|
|
background-image: none !important;
|
|
box-shadow: none !important;
|
|
padding: .2em .5em .2em .8em;
|
|
border-left: 4px solid;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.heading-style-border .markdown-preview-view h1,
|
|
.heading-style-border .markdown-source-view.mod-cm6 .cm-line .cm-header-1 {
|
|
border-left-color: var(--heading-primary);
|
|
border-left-width: 5px;
|
|
}
|
|
|
|
.heading-style-border .markdown-preview-view h2,
|
|
.heading-style-border .markdown-source-view.mod-cm6 .cm-line .cm-header-2 {
|
|
border-left-color: var(--heading-secondary);
|
|
border-left-width: 4px;
|
|
}
|
|
|
|
.heading-style-border .markdown-preview-view h3,
|
|
.heading-style-border .markdown-source-view.mod-cm6 .cm-line .cm-header-3 {
|
|
border-left-color: var(--heading-tertiary);
|
|
border-left-width: 4px;
|
|
}
|
|
|
|
.heading-style-border .markdown-preview-view h4,
|
|
.heading-style-border .markdown-source-view.mod-cm6 .cm-line .cm-header-4 {
|
|
border-left-color: var(--heading-quaternary);
|
|
border-left-width: 3px;
|
|
}
|
|
|
|
.heading-style-border .markdown-preview-view h5,
|
|
.heading-style-border .markdown-source-view.mod-cm6 .cm-line .cm-header-5 {
|
|
border-left-color: var(--heading-quinary);
|
|
border-left-width: 3px;
|
|
}
|
|
|
|
.heading-style-border .markdown-preview-view h6,
|
|
.heading-style-border .markdown-source-view.mod-cm6 .cm-line .cm-header-6 {
|
|
border-left-color: var(--heading-senary);
|
|
border-left-width: 3px;
|
|
}
|
|
|
|
.heading-style-border :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-line) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6):hover {
|
|
transform: translateX(2px);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
/* Minimal Style */
|
|
.heading-style-minimal .markdown-preview-view h1,
|
|
.heading-style-minimal .markdown-preview-view h2,
|
|
.heading-style-minimal .markdown-preview-view h3,
|
|
.heading-style-minimal .markdown-preview-view h4,
|
|
.heading-style-minimal .markdown-preview-view h5,
|
|
.heading-style-minimal .markdown-preview-view h6,
|
|
.heading-style-minimal .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
background: transparent !important;
|
|
background-image: none !important;
|
|
box-shadow: none !important;
|
|
padding: .2em 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.heading-style-minimal :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-line) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6):hover {
|
|
transform: none;
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
/* Gradient Style */
|
|
.heading-style-gradient .markdown-preview-view h1,
|
|
.heading-style-gradient .markdown-preview-view h2,
|
|
.heading-style-gradient .markdown-preview-view h3,
|
|
.heading-style-gradient .markdown-preview-view h4,
|
|
.heading-style-gradient .markdown-preview-view h5,
|
|
.heading-style-gradient .markdown-preview-view h6,
|
|
.heading-style-gradient .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
background-image: linear-gradient(135deg, currentColor 0%, currentColor 100%) !important;
|
|
background-blend-mode: normal;
|
|
}
|
|
|
|
.heading-style-gradient .markdown-preview-view h1,
|
|
.heading-style-gradient .markdown-source-view.mod-cm6 .cm-line .cm-header-1 {
|
|
background: linear-gradient(135deg, rgba(var(--heading-primary-rgb), 0.4), rgba(var(--heading-primary-rgb), 0.2)) !important;
|
|
}
|
|
|
|
.heading-style-gradient .markdown-preview-view h2,
|
|
.heading-style-gradient .markdown-source-view.mod-cm6 .cm-line .cm-header-2 {
|
|
background: linear-gradient(135deg, rgba(var(--heading-secondary-rgb), 0.4), rgba(var(--heading-secondary-rgb), 0.2)) !important;
|
|
}
|
|
|
|
.heading-style-gradient .markdown-preview-view h3,
|
|
.heading-style-gradient .markdown-source-view.mod-cm6 .cm-line .cm-header-3 {
|
|
background: linear-gradient(135deg, rgba(var(--heading-tertiary-rgb), 0.4), rgba(var(--heading-tertiary-rgb), 0.2)) !important;
|
|
}
|
|
|
|
.heading-style-gradient .markdown-preview-view h4,
|
|
.heading-style-gradient .markdown-source-view.mod-cm6 .cm-line .cm-header-4 {
|
|
background: linear-gradient(135deg, rgba(var(--heading-quaternary-rgb), 0.4), rgba(var(--heading-quaternary-rgb), 0.2)) !important;
|
|
}
|
|
|
|
.heading-style-gradient .markdown-preview-view h5,
|
|
.heading-style-gradient .markdown-source-view.mod-cm6 .cm-line .cm-header-5 {
|
|
background: linear-gradient(135deg, rgba(var(--heading-quinary-rgb), 0.4), rgba(var(--heading-quinary-rgb), 0.2)) !important;
|
|
}
|
|
|
|
.heading-style-gradient .markdown-preview-view h6,
|
|
.heading-style-gradient .markdown-source-view.mod-cm6 .cm-line .cm-header-6 {
|
|
background: linear-gradient(135deg, rgba(var(--heading-senary-rgb), 0.4), rgba(var(--heading-senary-rgb), 0.2)) !important;
|
|
}
|
|
|
|
/* Badge (Pill) Style */
|
|
.heading-style-badge .markdown-preview-view h1,
|
|
.heading-style-badge .markdown-preview-view h2,
|
|
.heading-style-badge .markdown-preview-view h3,
|
|
.heading-style-badge .markdown-preview-view h4,
|
|
.heading-style-badge .markdown-preview-view h5,
|
|
.heading-style-badge .markdown-preview-view h6,
|
|
.heading-style-badge .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
border-radius: 999px !important;
|
|
padding: .3em .8em;
|
|
background-image: none !important;
|
|
-electron-corner-smoothing: 0% !important;
|
|
}
|
|
|
|
.heading-style-badge :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-line) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6):hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* Outline Style */
|
|
.heading-style-outline .markdown-preview-view h1,
|
|
.heading-style-outline .markdown-preview-view h2,
|
|
.heading-style-outline .markdown-preview-view h3,
|
|
.heading-style-outline .markdown-preview-view h4,
|
|
.heading-style-outline .markdown-preview-view h5,
|
|
.heading-style-outline .markdown-preview-view h6,
|
|
.heading-style-outline .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
background: transparent !important;
|
|
background-image: none !important;
|
|
border: 2px solid;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.heading-style-outline .markdown-preview-view h1,
|
|
.heading-style-outline .markdown-source-view.mod-cm6 .cm-line .cm-header-1 {
|
|
border-color: var(--heading-primary);
|
|
color: var(--heading-primary);
|
|
}
|
|
|
|
.heading-style-outline .markdown-preview-view h2,
|
|
.heading-style-outline .markdown-source-view.mod-cm6 .cm-line .cm-header-2 {
|
|
border-color: var(--heading-secondary);
|
|
color: var(--heading-secondary);
|
|
}
|
|
|
|
.heading-style-outline .markdown-preview-view h3,
|
|
.heading-style-outline .markdown-source-view.mod-cm6 .cm-line .cm-header-3 {
|
|
border-color: var(--heading-tertiary);
|
|
color: var(--heading-tertiary);
|
|
}
|
|
|
|
.heading-style-outline .markdown-preview-view h4,
|
|
.heading-style-outline .markdown-source-view.mod-cm6 .cm-line .cm-header-4 {
|
|
border-color: var(--heading-quaternary);
|
|
color: var(--heading-quaternary);
|
|
}
|
|
|
|
.heading-style-outline .markdown-preview-view h5,
|
|
.heading-style-outline .markdown-source-view.mod-cm6 .cm-line .cm-header-5 {
|
|
border-color: var(--heading-quinary);
|
|
color: var(--heading-quinary);
|
|
}
|
|
|
|
.heading-style-outline .markdown-preview-view h6,
|
|
.heading-style-outline .markdown-source-view.mod-cm6 .cm-line .cm-header-6 {
|
|
border-color: var(--heading-senary);
|
|
color: var(--heading-senary);
|
|
}
|
|
|
|
.heading-style-outline :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-line) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6):hover {
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.1);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* 3D Embossed Style */
|
|
.heading-style-3d .markdown-preview-view h1,
|
|
.heading-style-3d .markdown-preview-view h2,
|
|
.heading-style-3d .markdown-preview-view h3,
|
|
.heading-style-3d .markdown-preview-view h4,
|
|
.heading-style-3d .markdown-preview-view h5,
|
|
.heading-style-3d .markdown-preview-view h6,
|
|
.heading-style-3d .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
background-image: linear-gradient(to bottom, rgba(255, 255, 255, .25), rgba(255, 255, 255, .05)) !important;
|
|
background-blend-mode: overlay;
|
|
border: 2px solid;
|
|
border-top-color: rgba(255, 255, 255, 0.4);
|
|
border-left-color: rgba(255, 255, 255, 0.3);
|
|
border-right-color: rgba(0, 0, 0, 0.15);
|
|
border-bottom-color: rgba(0, 0, 0, 0.2);
|
|
box-shadow:
|
|
0 4px 8px rgba(0, 0, 0, 0.15),
|
|
0 2px 4px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
padding: .3em .7em;
|
|
}
|
|
|
|
.heading-style-3d .markdown-preview-view h1,
|
|
.heading-style-3d .markdown-source-view.mod-cm6 .cm-line .cm-header-1 {
|
|
background-color: rgba(var(--heading-primary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-primary) h s calc(l * var(--heading-text-multiplier)));
|
|
border-top-color: rgba(255, 255, 255, 0.5);
|
|
border-left-color: rgba(255, 255, 255, 0.4);
|
|
box-shadow:
|
|
0 6px 12px rgba(0, 0, 0, 0.2),
|
|
0 3px 6px rgba(0, 0, 0, 0.15),
|
|
inset 0 2px 0 rgba(255, 255, 255, 0.4),
|
|
inset 0 -2px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.heading-style-3d .markdown-preview-view h2,
|
|
.heading-style-3d .markdown-source-view.mod-cm6 .cm-line .cm-header-2 {
|
|
background-color: rgba(var(--heading-secondary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-secondary) h s calc(l * var(--heading-text-multiplier)));
|
|
border-top-color: rgba(255, 255, 255, 0.45);
|
|
border-left-color: rgba(255, 255, 255, 0.35);
|
|
box-shadow:
|
|
0 5px 10px rgba(0, 0, 0, 0.18),
|
|
0 2px 5px rgba(0, 0, 0, 0.12),
|
|
inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
|
|
inset 0 -1.5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.heading-style-3d .markdown-preview-view h3,
|
|
.heading-style-3d .markdown-source-view.mod-cm6 .cm-line .cm-header-3 {
|
|
background-color: rgba(var(--heading-tertiary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-tertiary) h s calc(l * var(--heading-text-multiplier)));
|
|
border-top-color: rgba(255, 255, 255, 0.4);
|
|
border-left-color: rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 4px 8px rgba(0, 0, 0, 0.15),
|
|
0 2px 4px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.heading-style-3d .markdown-preview-view h4,
|
|
.heading-style-3d .markdown-source-view.mod-cm6 .cm-line .cm-header-4 {
|
|
background-color: rgba(var(--heading-quaternary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-quaternary) h s calc(l * var(--heading-text-multiplier)));
|
|
border-width: 1.5px;
|
|
border-top-color: rgba(255, 255, 255, 0.35);
|
|
border-left-color: rgba(255, 255, 255, 0.25);
|
|
box-shadow:
|
|
0 3px 6px rgba(0, 0, 0, 0.12),
|
|
0 1px 3px rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.heading-style-3d .markdown-preview-view h5,
|
|
.heading-style-3d .markdown-source-view.mod-cm6 .cm-line .cm-header-5 {
|
|
background-color: rgba(var(--heading-quinary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-quinary) h s calc(l * var(--heading-text-multiplier)));
|
|
border-width: 1.5px;
|
|
border-top-color: rgba(255, 255, 255, 0.35);
|
|
border-left-color: rgba(255, 255, 255, 0.25);
|
|
box-shadow:
|
|
0 3px 6px rgba(0, 0, 0, 0.12),
|
|
0 1px 3px rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.heading-style-3d .markdown-preview-view h6,
|
|
.heading-style-3d .markdown-source-view.mod-cm6 .cm-line .cm-header-6 {
|
|
background-color: rgba(var(--heading-senary-rgb), var(--heading-bg-opacity));
|
|
color: hsl(from var(--heading-senary) h s calc(l * var(--heading-text-multiplier)));
|
|
border-width: 1px;
|
|
border-top-color: rgba(255, 255, 255, 0.3);
|
|
border-left-color: rgba(255, 255, 255, 0.2);
|
|
box-shadow:
|
|
0 2px 4px rgba(0, 0, 0, 0.1),
|
|
0 1px 2px rgba(0, 0, 0, 0.06),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.heading-style-3d :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-line) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6):hover {
|
|
transform: translateY(-3px) scale(1.01);
|
|
filter: brightness(1.08);
|
|
box-shadow:
|
|
0 8px 16px rgba(0, 0, 0, 0.2),
|
|
0 4px 8px rgba(0, 0, 0, 0.15),
|
|
inset 0 2px 0 rgba(255, 255, 255, 0.4),
|
|
inset 0 -2px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.theme-dark .heading-style-3d .markdown-preview-view h1,
|
|
.theme-dark .heading-style-3d .markdown-preview-view h2,
|
|
.theme-dark .heading-style-3d .markdown-preview-view h3,
|
|
.theme-dark .heading-style-3d .markdown-preview-view h4,
|
|
.theme-dark .heading-style-3d .markdown-preview-view h5,
|
|
.theme-dark .heading-style-3d .markdown-preview-view h6,
|
|
.theme-dark .heading-style-3d .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
|
|
border-top-color: rgba(255, 255, 255, 0.25);
|
|
border-left-color: rgba(255, 255, 255, 0.2);
|
|
border-right-color: rgba(0, 0, 0, 0.3);
|
|
border-bottom-color: rgba(0, 0, 0, 0.35);
|
|
box-shadow:
|
|
0 4px 10px rgba(0, 0, 0, 0.3),
|
|
0 2px 5px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.theme-dark .heading-style-3d :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-line) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6):hover {
|
|
box-shadow:
|
|
0 8px 20px rgba(0, 0, 0, 0.4),
|
|
0 4px 10px rgba(0, 0, 0, 0.3),
|
|
inset 0 2px 0 rgba(255, 255, 255, 0.2),
|
|
inset 0 -2px 0 rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Vibrant Glow Style - Luminous tinted text on bold colorful backgrounds */
|
|
.heading-style-vibrant :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-content) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6) {
|
|
border-radius: var(--r2);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.4);
|
|
position: relative;
|
|
overflow: visible !important;
|
|
transition: transform 0.2s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.2s ease, filter 0.2s ease;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
display: inline-block;
|
|
line-height: 1.4;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
|
|
}
|
|
|
|
/* Compact Hierarchy for Vibrant Style - Matching default sizes with badge padding */
|
|
.heading-style-vibrant :is(h1, .cm-header-1) {
|
|
padding: 0.25em 0.8em;
|
|
border-radius: var(--r3);
|
|
}
|
|
|
|
.heading-style-vibrant :is(h2, .cm-header-2) {
|
|
padding: 0.22em 0.75em;
|
|
border-radius: var(--r3);
|
|
}
|
|
|
|
.heading-style-vibrant :is(h3, .cm-header-3) {
|
|
padding: 0.22em 0.75em;
|
|
}
|
|
|
|
.heading-style-vibrant :is(h4, .cm-header-4) {
|
|
padding: 0.16em 0.6em;
|
|
}
|
|
|
|
.heading-style-vibrant :is(h5, .cm-header-5) {
|
|
padding: 0.15em 0.6em;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.heading-style-vibrant :is(h6, .cm-header-6) {
|
|
padding: 0.12em 0.55em;
|
|
border-radius: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.heading-style-vibrant :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-content) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6):hover {
|
|
transform: translateY(-3px) scale(1.01);
|
|
box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
/* Light Mode - Juicy & Dynamic */
|
|
.theme-light.heading-style-vibrant :is(h1, .cm-header-1) {
|
|
background: linear-gradient(135deg, var(--heading-primary) 0%, rgba(var(--heading-primary-rgb), 0.8) 100%) !important;
|
|
color: hsl(from var(--heading-primary) h s 96%) !important;
|
|
}
|
|
|
|
.theme-light.heading-style-vibrant :is(h2, .cm-header-2) {
|
|
background: linear-gradient(135deg, var(--heading-secondary) 0%, rgba(var(--heading-secondary-rgb), 0.8) 100%) !important;
|
|
color: hsl(from var(--heading-secondary) h s 96%) !important;
|
|
}
|
|
|
|
.theme-light.heading-style-vibrant :is(h3, .cm-header-3) {
|
|
background: linear-gradient(135deg, var(--heading-tertiary) 0%, rgba(var(--heading-tertiary-rgb), 0.8) 100%) !important;
|
|
color: hsl(from var(--heading-tertiary) h s 96%) !important;
|
|
}
|
|
|
|
.theme-light.heading-style-vibrant :is(h4, .cm-header-4) {
|
|
background: linear-gradient(135deg, var(--heading-quaternary) 0%, rgba(var(--heading-quaternary-rgb), 0.8) 100%) !important;
|
|
color: hsl(from var(--heading-quaternary) h s 96%) !important;
|
|
}
|
|
|
|
.theme-light.heading-style-vibrant :is(h5, .cm-header-5) {
|
|
background: linear-gradient(135deg, var(--heading-quinary) 0%, rgba(var(--heading-quinary-rgb), 0.8) 100%) !important;
|
|
color: hsl(from var(--heading-quinary) h s 96%) !important;
|
|
}
|
|
|
|
.theme-light.heading-style-vibrant :is(h6, .cm-header-6) {
|
|
background: linear-gradient(135deg, var(--heading-senary) 0%, rgba(var(--heading-senary-rgb), 0.8) 100%) !important;
|
|
color: hsl(from var(--heading-senary) h s 96%) !important;
|
|
}
|
|
|
|
/* Dark Mode - Saturated Neon Jewels (Rich, not washed out, not blinding) */
|
|
.theme-dark.heading-style-vibrant :is(.markdown-preview-view, .markdown-source-view.mod-cm6 .cm-content) :is(h1, h2, h3, h4, h5, h6, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6) {
|
|
backdrop-filter: blur(4px);
|
|
box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.theme-dark.heading-style-vibrant :is(h1, .cm-header-1) {
|
|
background: linear-gradient(135deg, hsl(from var(--heading-primary) h 85% 32%) 0%, hsl(from var(--heading-primary) h 75% 18%) 100%) !important;
|
|
color: hsl(from var(--heading-primary) h s 94%) !important;
|
|
border-color: rgba(var(--heading-primary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-dark.heading-style-vibrant :is(h2, .cm-header-2) {
|
|
background: linear-gradient(135deg, hsl(from var(--heading-secondary) h 85% 32%) 0%, hsl(from var(--heading-secondary) h 75% 18%) 100%) !important;
|
|
color: hsl(from var(--heading-secondary) h s 94%) !important;
|
|
border-color: rgba(var(--heading-secondary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-dark.heading-style-vibrant :is(h3, .cm-header-3) {
|
|
background: linear-gradient(135deg, hsl(from var(--heading-tertiary) h 85% 32%) 0%, hsl(from var(--heading-tertiary) h 75% 18%) 100%) !important;
|
|
color: hsl(from var(--heading-tertiary) h s 94%) !important;
|
|
border-color: rgba(var(--heading-tertiary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-dark.heading-style-vibrant :is(h4, .cm-header-4) {
|
|
background: linear-gradient(135deg, hsl(from var(--heading-quaternary) h 85% 32%) 0%, hsl(from var(--heading-quaternary) h 75% 18%) 100%) !important;
|
|
color: hsl(from var(--heading-quaternary) h s 94%) !important;
|
|
border-color: rgba(var(--heading-quaternary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-dark.heading-style-vibrant :is(h5, .cm-header-5) {
|
|
background: linear-gradient(135deg, hsl(from var(--heading-quinary) h 85% 32%) 0%, hsl(from var(--heading-quinary) h 75% 18%) 100%) !important;
|
|
color: hsl(from var(--heading-quinary) h s 94%) !important;
|
|
border-color: rgba(var(--heading-quinary-rgb), 0.5);
|
|
}
|
|
|
|
.theme-dark.heading-style-vibrant :is(h6, .cm-header-6) {
|
|
background: linear-gradient(135deg, hsl(from var(--heading-senary) h 85% 32%) 0%, hsl(from var(--heading-senary) h 75% 18%) 100%) !important;
|
|
color: hsl(from var(--heading-senary) h s 94%) !important;
|
|
border-color: rgba(var(--heading-senary-rgb), 0.5);
|
|
}
|
|
|
|
/* Inline Title */
|
|
.inline-title {
|
|
color: var(--primary-color);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
.inline-title:hover {
|
|
filter: brightness(1.05);
|
|
transition: filter 0.2s ease;
|
|
}
|
|
|
|
/* Text Emphasis */
|
|
strong,
|
|
.cm-strong {
|
|
color: var(--emphasis-color);
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
|
|
em,
|
|
.cm-em {
|
|
color: var(--emphasis-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
.theme-dark strong,
|
|
.theme-dark .cm-strong {
|
|
color: var(--emphasis-color-light);
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
|
|
.theme-dark em,
|
|
.theme-dark .cm-em {
|
|
color: var(--emphasis-color-light);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Link Styling */
|
|
.markdown-rendered a,
|
|
.markdown-rendered .internal-link,
|
|
.markdown-rendered .external-link,
|
|
.markdown-source-view.mod-cm6 .cm-link,
|
|
.markdown-source-view.mod-cm6 .cm-url,
|
|
.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
|
|
.markdown-source-view.mod-cm6 .cm-hmd-external-link,
|
|
.markdown-source-view.mod-cm6 .cm-formatting-link,
|
|
.markdown-source-view.mod-cm6 .cm-formatting-link-string,
|
|
.markdown-source-view.mod-cm6 .cm-link .cm-underline,
|
|
.markdown-source-view.mod-cm6 .cm-url .cm-underline,
|
|
.markdown-source-view.mod-cm6 .cm-hmd-internal-link .cm-underline,
|
|
.markdown-source-view.mod-cm6 .cm-hmd-external-link .cm-underline {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
border-bottom: none;
|
|
box-shadow: none;
|
|
text-decoration: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* === Link Styles Feature === */
|
|
|
|
/* Common Link Reset */
|
|
:is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)) {
|
|
text-decoration: none !important;
|
|
border-bottom: none !important;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* 1. Default Style (Subtle Pill) */
|
|
body.link-style-default :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)) {
|
|
color: var(--link-color);
|
|
background: rgba(var(--primary-color-rgb), .08);
|
|
border-radius: var(--r1);
|
|
padding: 0 4px;
|
|
}
|
|
|
|
body.link-style-default :is(p, li)>:is(a, .internal-link, .external-link, .cm-link:not(.cm-formatting), .cm-url:not(.cm-formatting), .cm-hmd-internal-link:not(.cm-formatting), .cm-hmd-external-link:not(.cm-formatting)) {
|
|
background: rgba(var(--primary-color-rgb), .05);
|
|
padding: 0 3px;
|
|
}
|
|
|
|
body.link-style-default :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)):hover {
|
|
background: rgba(var(--primary-color-rgb), .12);
|
|
color: var(--link-color-hover);
|
|
}
|
|
|
|
/* 2. Plain Style (Obsidian Default-ish) */
|
|
body.link-style-plain :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)) {
|
|
color: var(--link-color);
|
|
background: transparent !important;
|
|
padding: 0;
|
|
}
|
|
|
|
body.link-style-plain :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)):hover {
|
|
color: var(--link-color-hover);
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
/* 3. Underline Accent Style */
|
|
body.link-style-underline :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)) {
|
|
color: var(--link-color);
|
|
background: transparent !important;
|
|
padding: 0 1px;
|
|
border-bottom: 1.5px solid rgba(var(--primary-color-rgb), 0.2) !important;
|
|
}
|
|
|
|
body.link-style-underline :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)):hover {
|
|
color: var(--link-color-hover);
|
|
border-bottom: 2px solid var(--link-color-hover) !important;
|
|
background: rgba(var(--primary-color-rgb), 0.04) !important;
|
|
}
|
|
|
|
/* 4. Neon Glow Style */
|
|
body.link-style-glow :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)) {
|
|
color: var(--link-color);
|
|
background: rgba(var(--primary-color-rgb), .08);
|
|
border-radius: 8px;
|
|
padding: 5px 6px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
margin: 0 1px;
|
|
}
|
|
|
|
body.link-style-glow :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)):hover {
|
|
color: var(--link-color-hover);
|
|
background: rgba(var(--primary-color-rgb), .2);
|
|
text-shadow: 0 0 12px rgba(var(--primary-color-rgb), 0.6);
|
|
box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.2);
|
|
transform: translateY(-1px) scale(1.03);
|
|
}
|
|
|
|
/* 5. Retro Wavy Style */
|
|
body.link-style-wavy :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)) {
|
|
color: var(--link-color);
|
|
background: transparent !important;
|
|
padding: 0 1px;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
body.link-style-wavy :is(.markdown-rendered a, .markdown-rendered .internal-link, .markdown-rendered .external-link, .markdown-source-view.mod-cm6 .cm-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-url:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-internal-link:not(.cm-formatting), .markdown-source-view.mod-cm6 .cm-hmd-external-link:not(.cm-formatting)):hover {
|
|
color: var(--link-color-hover);
|
|
text-decoration: wavy underline !important;
|
|
text-decoration-color: var(--primary-color) !important;
|
|
text-underline-offset: 4px;
|
|
}
|
|
|
|
/* Unresolved Links Logic (Stays consistent across styles but adapts background) */
|
|
:is(.markdown-rendered .internal-link.is-unresolved, .markdown-source-view.mod-cm6 .cm-hmd-internal-link.is-unresolved, .markdown-source-view.mod-cm6 .cm-hmd-internal-link.cm-hmd-unresolved) {
|
|
opacity: 0.8;
|
|
border-bottom: 1px dashed var(--primary-color) !important;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-underline {
|
|
text-decoration: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-link,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-url,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-hmd-internal-link,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-hmd-external-link {
|
|
text-decoration: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-link:hover,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-url:hover,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-hmd-internal-link:hover,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-hmd-external-link:hover {
|
|
text-decoration: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/* Multi-select Pill Styling */
|
|
:is(.multi-select-pill-content span, .multi-select-pill-content) {
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
background-color: rgba(var(--primary-color-rgb), .15);
|
|
color: var(--text-normal);
|
|
padding: 2px 8px;
|
|
font-size: .85em;
|
|
font-weight: var(--weight-medium);
|
|
letter-spacing: -.01em;
|
|
box-shadow: var(--shadow-1);
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.theme-dark :is(.multi-select-pill-content span, .multi-select-pill-content) {
|
|
background-color: rgba(var(--primary-color-rgb), .18);
|
|
box-shadow: var(--shadow-1);
|
|
}
|
|
|
|
:is(.multi-select-pill-content:hover span, .multi-select-pill-content:hover) {
|
|
background-color: rgba(var(--primary-color-rgb), .25);
|
|
color: var(--primary-color-dark);
|
|
}
|
|
|
|
.theme-dark :is(.multi-select-pill-content:hover span, .multi-select-pill-content:hover) {
|
|
background-color: rgba(var(--primary-color-rgb), .35);
|
|
}
|
|
|
|
/* Navigation Files and Folders */
|
|
.nav-files-container>div>.nav-folder {
|
|
background-color: var(--folder-color);
|
|
--nav-item-color: var(--folder-text-color);
|
|
--nav-item-color-hover: var(--folder-text-color);
|
|
--nav-collapse-icon-color: var(--folder-text-color);
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
margin-bottom: var(--s1);
|
|
position: relative;
|
|
transition: transform 0.2s ease, background-color 0.2s ease;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
:is(.nav-folder-title, .nav-file-title) {
|
|
height: 30px !important;
|
|
min-height: 30px !important;
|
|
max-height: 30px !important;
|
|
box-sizing: border-box !important;
|
|
align-items: center !important;
|
|
padding-block: 0;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
:is(.nav-folder-collapse-indicator, .tree-item-self .collapse-icon, .nav-folder .nav-folder-collapse-indicator) {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
width: 0 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
/* Fix: Normal collapse icon animation */
|
|
.collapse-icon svg,
|
|
.nav-folder-collapse-indicator svg {
|
|
transition: transform 0.3s ease-out !important;
|
|
}
|
|
|
|
.nav-folder-title {
|
|
padding-left: 4px !important;
|
|
}
|
|
|
|
.nav-folder-title:hover {
|
|
background-color: rgba(255, 255, 255, var(--link-opacity-hover)) !important;
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.theme-dark .nav-folder-title:hover {
|
|
background-color: rgba(255, 255, 255, var(--link-opacity-unresolved-hover)) !important;
|
|
}
|
|
|
|
.nav-folder .nav-folder-title-content::before {
|
|
display: inline-block;
|
|
content: "";
|
|
margin-right: var(--s1);
|
|
margin-left: var(--s1);
|
|
vertical-align: text-bottom;
|
|
height: 16px;
|
|
width: 16px;
|
|
background-color: currentColor;
|
|
opacity: .7;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
z-index: 2;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.nav-folder .nav-folder-title-content {
|
|
transition: transform 0.2s ease;
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.nav-folder .nav-folder-title:hover .nav-folder-title-content {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.nav-folder .nav-folder-title:hover .nav-folder-title-content::before {
|
|
opacity: .9;
|
|
}
|
|
|
|
.nav-folder.is-collapsed>.nav-folder-title .nav-folder-title-content::before,
|
|
.tree-item.is-collapsed .nav-folder-title-content::before,
|
|
.tree-item-self.is-collapsed .nav-folder-title-content::before {
|
|
-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M469.3,426.7H42.7V85.3h178.1l54,42.7h194.6V426.7zM85.3,384h341.3V170.7H260.5l-54-42.7H85.3V384z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
|
|
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M469.3,426.7H42.7V85.3h178.1l54,42.7h194.6V426.7zM85.3,384h341.3V170.7H260.5l-54-42.7H85.3V384z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
}
|
|
|
|
.nav-folder:not(.is-collapsed)>.nav-folder-title .nav-folder-title-content::before,
|
|
.tree-item:not(.is-collapsed) .nav-folder-title-content::before,
|
|
.tree-item-self:not(.is-collapsed) .nav-folder-title-content::before {
|
|
-webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M384,128 L384,42.6666667 L232.0416,42.6667 L178.0832,1.42108547e-14 L7.10542736e-15,1.42108547e-14 L7.10542736e-15,341.333333 L60.9376,341.333333 L352.437547,341.333333 L361.604267,341.333333 L426.354347,128 L384,128 Z M42.6666667,253.44 L42.6666667,42.6666667 L163.24992,42.6666667 L217.20832,85.3333333 L341.333333,85.3333333 L341.333333,128 L82.0209067,128 L42.6666667,253.44 Z M329.979093,298.666667 L73.1874133,298.666667 L113.354027,170.666667 L368.812373,170.666667 L329.979093,298.666667 Z'%3e%3c/path%3e%3c/svg%3e") no-repeat;
|
|
mask: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M384,128 L384,42.6666667 L232.0416,42.6667 L178.0832,1.42108547e-14 L7.10542736e-15,1.42108547e-14 L7.10542736e-15,341.333333 L60.9376,341.333333 L352.437547,341.333333 L361.604267,341.333333 L426.354347,128 L384,128 Z M42.6666667,253.44 L42.6666667,42.6666667 L163.24992,42.6666667 L217.20832,85.3333333 L341.333333,85.3333333 L341.333333,128 L82.0209067,128 L42.6666667,253.44 Z M329.979093,298.666667 L73.1874133,298.666667 L113.354027,170.666667 L368.812373,170.666667 L329.979093,298.666667 Z'%3e%3c/path%3e%3c/svg%3e") no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
}
|
|
|
|
.nav-folder-children {
|
|
transition: opacity 0.2s ease;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.nav-folder.is-collapsed>.nav-folder-children {
|
|
display: none;
|
|
}
|
|
|
|
.nav-folder:not(.is-collapsed)>.nav-folder-children {
|
|
display: block;
|
|
}
|
|
|
|
.nav-files-container>div>.nav-folder:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
:is(.theme-light .nav-files-container>div>.nav-folder:nth-child(6n+1),
|
|
.theme-dark .nav-files-container>div>.nav-folder:nth-child(6n+1)) {
|
|
--folder-color: rgba(var(--folder-1-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-1-color);
|
|
}
|
|
|
|
:is(.theme-light .nav-files-container>div>.nav-folder:nth-child(6n+2),
|
|
.theme-dark .nav-files-container>div>.nav-folder:nth-child(6n+2)) {
|
|
--folder-color: rgba(var(--folder-2-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-2-color);
|
|
}
|
|
|
|
:is(.theme-light .nav-files-container>div>.nav-folder:nth-child(6n+3),
|
|
.theme-dark .nav-files-container>div>.nav-folder:nth-child(6n+3)) {
|
|
--folder-color: rgba(var(--folder-3-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-3-color);
|
|
}
|
|
|
|
:is(.theme-light .nav-files-container>div>.nav-folder:nth-child(6n+4),
|
|
.theme-dark .nav-files-container>div>.nav-folder:nth-child(6n+4)) {
|
|
--folder-color: rgba(var(--folder-4-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-4-color);
|
|
}
|
|
|
|
:is(.theme-light .nav-files-container>div>.nav-folder:nth-child(6n+5),
|
|
.theme-dark .nav-files-container>div>.nav-folder:nth-child(6n+5)) {
|
|
--folder-color: rgba(var(--folder-5-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-5-color);
|
|
}
|
|
|
|
:is(.theme-light .nav-files-container>div>.nav-folder:nth-child(6n+6),
|
|
.theme-dark .nav-files-container>div>.nav-folder:nth-child(6n+6)) {
|
|
--folder-color: rgba(var(--folder-6-color-rgb), var(--theme-folder-opacity));
|
|
--folder-text-color: var(--folder-6-color);
|
|
}
|
|
|
|
.nav-files-container>div>.nav-folder :is(.nav-folder-title.is-active, .nav-folder-title.is-selected) .nav-folder-title-content {
|
|
color: var(--folder-text-color) !important;
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
|
|
.nav-file-title:not(.is-active):hover {
|
|
background-color: rgba(255, 255, 255, var(--link-opacity-normal)) !important;
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.theme-dark .nav-file-title:not(.is-active):hover {
|
|
background-color: rgba(255, 255, 255, var(--link-opacity-unresolved)) !important;
|
|
}
|
|
|
|
.nav-files-container {
|
|
padding-right: var(--s4) !important;
|
|
padding-left: var(--s3) !important;
|
|
}
|
|
|
|
.nav-folder .nav-folder-children .nav-folder,
|
|
.nav-folder .nav-folder-children .nav-folder .nav-folder-children .nav-folder,
|
|
.nav-folder .nav-folder-children .nav-folder .nav-folder-children .nav-folder .nav-folder-children .nav-folder {
|
|
--folder-color: inherit;
|
|
--folder-text-color: inherit;
|
|
background-color: inherit;
|
|
}
|
|
|
|
.nav-file-title.is-active {
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.nav-file-title.is-active .nav-file-title-content {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: auto;
|
|
padding: var(--s1) var(--s3);
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
border: none;
|
|
font-weight: var(--weight-semibold);
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
|
|
.nav-file-title.is-active::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 70%;
|
|
width: 3px;
|
|
border-radius: 0 var(--r1) var(--r1) 0;
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
opacity: .8;
|
|
z-index: 2;
|
|
}
|
|
|
|
.nav-file-title.is-active:hover .nav-file-title-content {
|
|
opacity: 1;
|
|
box-shadow: var(--shadow-3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.nav-file-title.is-active:hover {
|
|
background-color: transparent !important;
|
|
filter: none !important;
|
|
}
|
|
|
|
.nav-file-title.is-active:hover .nav-file-title-content {
|
|
opacity: 1;
|
|
box-shadow: var(--shadow-3);
|
|
transform: translateY(-2px);
|
|
background-color: inherit;
|
|
}
|
|
|
|
.nav-files-container>div>.nav-folder:nth-child(6n+1) .nav-file-title.is-active .nav-file-title-content {
|
|
background-color: rgba(var(--folder-1-color-rgb), .25);
|
|
color: var(--folder-1-color);
|
|
}
|
|
|
|
.nav-files-container>div>.nav-folder:nth-child(6n+2) .nav-file-title.is-active .nav-file-title-content {
|
|
background-color: rgba(var(--folder-2-color-rgb), .25);
|
|
color: var(--folder-2-color);
|
|
}
|
|
|
|
.nav-files-container>div>.nav-folder:nth-child(6n+3) .nav-file-title.is-active .nav-file-title-content {
|
|
background-color: rgba(var(--folder-3-color-rgb), .25);
|
|
color: var(--folder-3-color);
|
|
}
|
|
|
|
.nav-files-container>div>.nav-folder:nth-child(6n+4) .nav-file-title.is-active .nav-file-title-content {
|
|
background-color: rgba(var(--folder-4-color-rgb), .25);
|
|
color: var(--folder-4-color);
|
|
}
|
|
|
|
.nav-files-container>div>.nav-folder:nth-child(6n+5) .nav-file-title.is-active .nav-file-title-content {
|
|
background-color: rgba(var(--folder-5-color-rgb), .25);
|
|
color: var(--folder-5-color);
|
|
}
|
|
|
|
.nav-files-container>div>.nav-folder:nth-child(6n+6) .nav-file-title.is-active .nav-file-title-content {
|
|
background-color: rgba(var(--folder-6-color-rgb), .25);
|
|
color: var(--folder-6-color);
|
|
}
|
|
|
|
.nav-file-title.is-selected {
|
|
position: relative;
|
|
background-color: rgba(var(--primary-color-rgb), .15) !important;
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
}
|
|
|
|
.nav-file-title.is-selected .nav-file-title-content {
|
|
color: var(--text-normal);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
|
|
.nav-file-title.is-selected::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 60%;
|
|
width: 3px;
|
|
border-radius: 0 var(--r1) var(--r1) 0;
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
background-color: var(--primary-color);
|
|
opacity: .7;
|
|
}
|
|
|
|
/* Callout Styling */
|
|
.callout {
|
|
background:
|
|
radial-gradient(ellipse at bottom right,
|
|
rgba(var(--callout-color-rgb), .15) 0%,
|
|
transparent 70%),
|
|
linear-gradient(135deg,
|
|
rgba(var(--callout-color-rgb), .01) 0%,
|
|
rgba(var(--callout-color-rgb), .03) 100%);
|
|
border-radius: var(--r4) var(--r1) var(--r4) var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
border: none;
|
|
border-left: 3px solid var(--callout-color);
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
|
|
.theme-dark .callout {
|
|
background:
|
|
radial-gradient(ellipse at bottom right,
|
|
rgba(var(--callout-color-rgb), .25) 0%,
|
|
transparent 70%),
|
|
linear-gradient(135deg,
|
|
rgba(var(--callout-color-rgb), .05) 0%,
|
|
rgba(var(--callout-color-rgb), .1) 100%);
|
|
box-shadow: var(--shadow-3);
|
|
}
|
|
|
|
.callout:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.callout:active {
|
|
transform: translateY(0);
|
|
transition-duration: 0.15s;
|
|
}
|
|
|
|
.callout .callout-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .75em;
|
|
font-weight: var(--weight-semibold);
|
|
font-size: 1.1em;
|
|
padding: 0;
|
|
background: transparent;
|
|
border-bottom: none;
|
|
color: hsl(from var(--callout-color) h s calc(l * .7));
|
|
text-shadow: 0 1px 2px rgba(var(--callout-color-rgb), .1);
|
|
}
|
|
|
|
.callout .callout-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: .5em;
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
flex-shrink: 0;
|
|
color: var(--callout-color);
|
|
}
|
|
|
|
.callout .callout-content {
|
|
padding: 0;
|
|
font-size: .95em;
|
|
line-height: var(--line-normal);
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Callout Types */
|
|
/* Callout Types - Logical Grouping */
|
|
:is(.callout[data-callout="note"], .callout[data-callout="default"], .markdown-source-view.mod-cm6 .cm-callout.cm-callout-note, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-default) {
|
|
--callout-color: var(--callout-note);
|
|
--callout-color-rgb: var(--callout-note-rgb);
|
|
background-color: rgba(var(--callout-note-rgb), .12);
|
|
border-left-color: var(--callout-note);
|
|
}
|
|
|
|
:is(.callout[data-callout="info"], .markdown-source-view.mod-cm6 .cm-callout.cm-callout-info) {
|
|
--callout-color: var(--callout-info);
|
|
--callout-color-rgb: var(--callout-info-rgb);
|
|
background-color: rgba(var(--callout-info-rgb), .12);
|
|
border-left-color: var(--callout-info);
|
|
}
|
|
|
|
:is(.callout[data-callout="warning"], .callout[data-callout="caution"], .callout[data-callout="attention"], .callout[data-callout="question"], .callout[data-callout="help"], .callout[data-callout="faq"], .markdown-source-view.mod-cm6 .cm-callout.cm-callout-warning, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-caution, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-attention, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-question, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-help, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-faq) {
|
|
--callout-color: var(--callout-warning);
|
|
--callout-color-rgb: var(--callout-warning-rgb);
|
|
background-color: rgba(var(--callout-warning-rgb), .12);
|
|
border-left-color: var(--callout-warning);
|
|
}
|
|
|
|
:is(.callout[data-callout="success"], .callout[data-callout="check"], .callout[data-callout="done"], .callout[data-callout="todo"], .callout[data-callout="tip"], .callout[data-callout="hint"], .callout[data-callout="summary"], .callout[data-callout="abstract"], .callout[data-callout="tldr"], .markdown-source-view.mod-cm6 .cm-callout.cm-callout-success, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-check, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-done, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-todo, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-tip, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-hint, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-summary, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-abstract, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-tldr) {
|
|
--callout-color: var(--callout-success);
|
|
--callout-color-rgb: var(--callout-success-rgb);
|
|
background-color: rgba(var(--callout-success-rgb), .12);
|
|
border-left-color: var(--callout-success);
|
|
}
|
|
|
|
:is(.callout[data-callout="danger"], .callout[data-callout="error"], .callout[data-callout="failure"], .callout[data-callout="bug"], .callout[data-callout="important"], .markdown-source-view.mod-cm6 .cm-callout.cm-callout-danger, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-error, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-failure, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-bug, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-important) {
|
|
--callout-color: var(--callout-danger);
|
|
--callout-color-rgb: var(--callout-danger-rgb);
|
|
background-color: rgba(var(--callout-danger-rgb), .12);
|
|
border-left-color: var(--callout-danger);
|
|
}
|
|
|
|
:is(.callout[data-callout="example"], .callout[data-callout="quote"], .markdown-source-view.mod-cm6 .cm-callout.cm-callout-example, .markdown-source-view.mod-cm6 .cm-callout.cm-callout-quote) {
|
|
--callout-color: var(--callout-example);
|
|
--callout-color-rgb: var(--callout-example-rgb);
|
|
background-color: rgba(var(--callout-example-rgb), .12);
|
|
border-left-color: var(--callout-example);
|
|
}
|
|
|
|
:is(.callout[data-callout="cite"], .markdown-source-view.mod-cm6 .cm-callout.cm-callout-cite) {
|
|
--callout-color: var(--callout-cite);
|
|
--callout-color-rgb: var(--callout-cite-rgb);
|
|
background-color: rgba(var(--callout-cite-rgb), .12);
|
|
border-left-color: var(--callout-cite);
|
|
--callout-icon: lucide-book;
|
|
}
|
|
|
|
:is(.callout[data-callout="video"], .markdown-source-view.mod-cm6 .cm-callout.cm-callout-video) {
|
|
--callout-color: var(--callout-video);
|
|
--callout-color-rgb: var(--callout-video-rgb);
|
|
background-color: rgba(var(--callout-video-rgb), .12);
|
|
border-left-color: var(--callout-video);
|
|
--callout-icon: lucide-video;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content {
|
|
color: hsl(from var(--callout-color) h s calc(l * 0.6));
|
|
}
|
|
|
|
.theme-dark :is(.callout, .cm-callout) .callout-content {
|
|
color: hsl(from var(--callout-color) h s calc(l * 1.3));
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content :is(strong, em) {
|
|
color: var(--callout-color);
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-title :is(a, strong, em, .internal-link, .external-link) {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.theme-dark :is(.callout, .cm-callout) :is(.callout-title, .callout-icon svg) {
|
|
color: hsl(from var(--callout-color) h s calc(l * 1.2));
|
|
}
|
|
|
|
:is(.callout, .cm-callout) a,
|
|
:is(.callout, .cm-callout) .internal-link,
|
|
:is(.callout, .cm-callout) .external-link {
|
|
color: var(--callout-color) !important;
|
|
background: rgba(var(--callout-color-rgb), .08) !important;
|
|
text-decoration: none;
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
padding-inline: 3px;
|
|
border-bottom: 1px solid transparent;
|
|
transition: transform 0.18s cubic-bezier(.4, 0, .2, 1), opacity 0.15s cubic-bezier(.4, 0, .2, 1), background-color 0.18s, color 0.18s;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) a:hover,
|
|
:is(.callout, .cm-callout) .internal-link:hover,
|
|
:is(.callout, .cm-callout) .external-link:hover {
|
|
background: rgba(var(--callout-color-rgb), .15) !important;
|
|
border-bottom: 1px solid var(--callout-color) !important;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-title :is(a, .internal-link, .external-link) {
|
|
color: inherit !important;
|
|
background: rgba(var(--callout-color-rgb), .08) !important;
|
|
text-decoration: none;
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
padding-inline: 3px;
|
|
border-bottom: 1px solid transparent;
|
|
transition: transform 0.18s cubic-bezier(.4, 0, .2, 1), opacity 0.15s cubic-bezier(.4, 0, .2, 1), background-color 0.18s, color 0.18s;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-title a:not(.internal-link):not(.external-link),
|
|
:is(.callout, .cm-callout) .callout-title .cm-url {
|
|
color: inherit !important;
|
|
background: rgba(var(--callout-color-rgb), .08) !important;
|
|
text-decoration: none;
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
padding-inline: 3px;
|
|
border-bottom: 1px solid transparent;
|
|
transition: transform 0.18s cubic-bezier(.4, 0, .2, 1), opacity 0.15s cubic-bezier(.4, 0, .2, 1), background-color 0.18s, color 0.18s;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-title :is(a, .internal-link, .external-link):hover,
|
|
:is(.callout, .cm-callout) .callout-title a:not(.internal-link):not(.external-link):hover,
|
|
:is(.callout, .cm-callout) .callout-title .cm-url:hover {
|
|
background: rgba(var(--callout-color-rgb), .15) !important;
|
|
border-bottom: 1px solid currentColor !important;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content :is(a, .internal-link, .external-link, .cm-url) {
|
|
color: var(--callout-color) !important;
|
|
background: rgba(var(--callout-color-rgb), .08) !important;
|
|
text-decoration: none;
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
padding-inline: 3px;
|
|
border-bottom: 1px solid transparent;
|
|
transition: transform 0.18s cubic-bezier(.4, 0, .2, 1), opacity 0.15s cubic-bezier(.4, 0, .2, 1), background-color 0.18s, color 0.18s;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content :is(a, .internal-link, .external-link, .cm-url):hover {
|
|
background: rgba(var(--callout-color-rgb), .15) !important;
|
|
border-bottom: 1px solid var(--callout-color) !important;
|
|
}
|
|
|
|
[data-callout] .is-unresolved {
|
|
opacity: .75;
|
|
background: rgba(var(--callout-color-rgb), .08) !important;
|
|
color: inherit;
|
|
border-bottom: 1px dashed currentColor !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) :is(.callout-content, .callout-title) .is-unresolved:hover,
|
|
:is(.callout, .cm-callout) :is(.callout-content, .callout-title) .internal-link.is-unresolved:hover {
|
|
background: rgba(var(--callout-color-rgb), .15) !important;
|
|
opacity: .9;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content :is(.internal-link.is-unresolved, .is-unresolved):hover {
|
|
color: var(--callout-color) !important;
|
|
border-bottom: 1px dashed var(--callout-color) !important;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-title :is(.internal-link.is-unresolved, .is-unresolved):hover {
|
|
color: inherit !important;
|
|
border-bottom: 1px dashed currentColor !important;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content :is(s, del, .cm-strikethrough) {
|
|
color: var(--callout-color);
|
|
text-decoration-color: var(--callout-color);
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-title :is(s, del, .cm-strikethrough) {
|
|
color: inherit;
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
.theme-dark :is(.callout, .cm-callout) .callout-content :is(s, del, .cm-strikethrough) {
|
|
color: hsl(from var(--callout-color) h s calc(l * 1.1));
|
|
text-decoration-color: hsl(from var(--callout-color) h s calc(l * 1.1));
|
|
}
|
|
|
|
:is(.callout .callout-content, .cm-callout .callout-content, .markdown-source-view.mod-cm6 .cm-callout .cm-content) :is(mark, span.cm-highlight, .cm-highlight) {
|
|
padding: 3px 4px;
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
display: inline;
|
|
background-color: rgba(var(--callout-color-rgb), .2);
|
|
color: var(--callout-color);
|
|
border-bottom: 1px solid rgba(var(--callout-color-rgb), .3);
|
|
box-shadow: 0 1px 2px rgba(var(--callout-color-rgb), .15);
|
|
}
|
|
|
|
.theme-dark :is(.callout .callout-content, .cm-callout .callout-content, .markdown-source-view.mod-cm6 .cm-callout .cm-content) :is(mark, span.cm-highlight, .cm-highlight) {
|
|
background-color: rgba(var(--callout-color-rgb), .25);
|
|
color: hsl(from var(--callout-color) h s calc(l * 1.1));
|
|
border-bottom: 1px solid rgba(var(--callout-color-rgb), .4);
|
|
box-shadow: 0 1px 2px rgba(var(--callout-color-rgb), .2);
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
:is(.callout .callout-content, .cm-callout .callout-content, .markdown-source-view.mod-cm6 .cm-callout .cm-content) :is(mark, span.cm-highlight, .cm-highlight):hover {
|
|
background-color: rgba(var(--callout-color-rgb), .3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.theme-dark :is(.callout .callout-content, .cm-callout .callout-content, .markdown-source-view.mod-cm6 .cm-callout .cm-content) :is(mark, span.cm-highlight, .cm-highlight):hover {
|
|
background-color: rgba(var(--callout-color-rgb), .35);
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content :is(h1, h2, h3, h4, h5, h6) {
|
|
color: var(--callout-color);
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
background-image: none;
|
|
padding: .1em .3em;
|
|
border-radius: var(--r2);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
font-weight: var(--weight-semibold);
|
|
letter-spacing: -.01em;
|
|
margin: .5em 0;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content :is(h1, h2, h3, h4, h5, h6):hover {
|
|
transform: translateY(-2px);
|
|
filter: brightness(1.05);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content h1 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content h2 {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content h3 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content h4 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content h5 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
:is(.callout, .cm-callout) .callout-content h6 {
|
|
font-size: .9em;
|
|
}
|
|
|
|
.theme-dark :is(.callout, .cm-callout) .callout-content :is(h1, h2, h3, h4, h5, h6) {
|
|
color: hsl(from var(--callout-color) h s calc(l * 1.4));
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-callout .cm-content .cm-line :is(.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6) {
|
|
color: var(--callout-color);
|
|
}
|
|
|
|
.theme-dark .markdown-source-view.mod-cm6 .cm-callout .cm-content .cm-line :is(.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6) {
|
|
color: hsl(from var(--callout-color) h s calc(l * 1.4));
|
|
}
|
|
|
|
/* Callout Style Variants */
|
|
|
|
/* Vintage Paper Style - Aged, textured, nostalgic */
|
|
.callout-style-vintage .callout {
|
|
background:
|
|
repeating-linear-gradient(0deg,
|
|
rgba(var(--callout-color-rgb), 0.03) 0px,
|
|
rgba(var(--callout-color-rgb), 0.05) 1px,
|
|
transparent 1px,
|
|
transparent 2px),
|
|
radial-gradient(ellipse at top left, rgba(var(--callout-color-rgb), 0.12) 0%, transparent 50%),
|
|
radial-gradient(ellipse at bottom right, rgba(var(--callout-color-rgb), 0.08) 0%, transparent 50%),
|
|
linear-gradient(135deg,
|
|
rgba(var(--callout-color-rgb), 0.15) 0%,
|
|
rgba(var(--background-secondary-rgb), 0.95) 50%,
|
|
rgba(var(--background-secondary-rgb), 0.9) 100%) !important;
|
|
border: 2px solid rgba(var(--callout-color-rgb), 0.25) !important;
|
|
border-left: 5px solid var(--callout-color) !important;
|
|
border-radius: 4px 12px 12px 4px !important;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
|
|
0 2px 8px rgba(0, 0, 0, 0.15),
|
|
0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.callout-style-vintage .callout::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(to right,
|
|
transparent,
|
|
rgba(var(--callout-color-rgb), 0.2),
|
|
transparent);
|
|
}
|
|
|
|
.theme-dark .callout-style-vintage .callout {
|
|
background:
|
|
repeating-linear-gradient(0deg,
|
|
rgba(var(--callout-color-rgb), 0.05) 0px,
|
|
rgba(var(--callout-color-rgb), 0.08) 1px,
|
|
transparent 1px,
|
|
transparent 2px),
|
|
radial-gradient(ellipse at top left, rgba(var(--callout-color-rgb), 0.18) 0%, transparent 50%),
|
|
radial-gradient(ellipse at bottom right, rgba(var(--callout-color-rgb), 0.12) 0%, transparent 50%),
|
|
linear-gradient(135deg,
|
|
rgba(var(--callout-color-rgb), 0.2) 0%,
|
|
rgba(var(--background-secondary-rgb), 0.85) 50%,
|
|
rgba(var(--background-secondary-rgb), 0.8) 100%) !important;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.2),
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
0 1px 3px rgba(0, 0, 0, 0.2) !important;
|
|
}
|
|
|
|
.callout-style-vintage .callout:hover {
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.35),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
|
|
0 4px 12px rgba(0, 0, 0, 0.2),
|
|
0 2px 6px rgba(0, 0, 0, 0.15) !important;
|
|
border-left-width: 6px !important;
|
|
}
|
|
|
|
.callout-style-vintage .callout .callout-icon {
|
|
filter: sepia(0.2) contrast(1.1) !important;
|
|
}
|
|
|
|
/* Modern Glass Style - Deep blur, floating effect */
|
|
.callout-style-glass .callout {
|
|
background:
|
|
radial-gradient(ellipse at top left, rgba(var(--callout-color-rgb), 0.2) 0%, transparent 60%),
|
|
radial-gradient(ellipse at bottom right, rgba(var(--callout-color-rgb), 0.15) 0%, transparent 60%),
|
|
linear-gradient(135deg, rgba(var(--callout-color-rgb), 0.12) 0%, rgba(var(--background-primary-rgb), 0.5) 100%) !important;
|
|
backdrop-filter: blur(16px) saturate(200%) brightness(1.05) !important;
|
|
-webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.05) !important;
|
|
border: 1.5px solid rgba(var(--callout-color-rgb), 0.25) !important;
|
|
border-left: 4px solid var(--callout-color) !important;
|
|
border-radius: var(--r4) !important;
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.12),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
|
|
position: relative;
|
|
}
|
|
|
|
.callout-style-glass .callout::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 255, 255, 0.1) 0%,
|
|
transparent 50%);
|
|
border-radius: var(--r4);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.theme-dark .callout-style-glass .callout {
|
|
background:
|
|
radial-gradient(ellipse at top left, rgba(var(--callout-color-rgb), 0.25) 0%, transparent 60%),
|
|
radial-gradient(ellipse at bottom right, rgba(var(--callout-color-rgb), 0.2) 0%, transparent 60%),
|
|
linear-gradient(135deg, rgba(var(--callout-color-rgb), 0.18) 0%, rgba(var(--background-primary-rgb), 0.3) 100%) !important;
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(0.95) !important;
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(0.95) !important;
|
|
border-color: rgba(var(--callout-color-rgb), 0.35) !important;
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
|
|
}
|
|
|
|
.callout-style-glass .callout:hover {
|
|
backdrop-filter: blur(20px) saturate(220%) brightness(1.08) !important;
|
|
-webkit-backdrop-filter: blur(20px) saturate(220%) brightness(1.08) !important;
|
|
transform: translateY(-3px) !important;
|
|
box-shadow:
|
|
0 12px 40px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
|
|
}
|
|
|
|
/* Bold Border Style - Strong, confident, impactful */
|
|
.callout-style-bold .callout {
|
|
background:
|
|
radial-gradient(ellipse at top left, rgba(var(--callout-color-rgb), 0.25) 0%, transparent 50%),
|
|
radial-gradient(ellipse at bottom right, rgba(var(--callout-color-rgb), 0.2) 0%, transparent 50%),
|
|
linear-gradient(135deg, rgba(var(--callout-color-rgb), 0.18) 0%, rgba(var(--background-secondary-rgb), 0.9) 100%) !important;
|
|
border: 3px solid var(--callout-color) !important;
|
|
border-left: 6px solid var(--callout-color) !important;
|
|
border-radius: var(--r4) !important;
|
|
box-shadow:
|
|
0 0 0 2px rgba(var(--callout-color-rgb), 0.15),
|
|
0 6px 20px rgba(0, 0, 0, 0.15),
|
|
inset 0 0 20px rgba(var(--callout-color-rgb), 0.05) !important;
|
|
position: relative;
|
|
}
|
|
|
|
.callout-style-bold .callout::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -3px;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
border: 1px solid rgba(var(--callout-color-rgb), 0.2);
|
|
border-radius: var(--r4);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.theme-dark .callout-style-bold .callout {
|
|
background:
|
|
radial-gradient(ellipse at top left, rgba(var(--callout-color-rgb), 0.3) 0%, transparent 50%),
|
|
radial-gradient(ellipse at bottom right, rgba(var(--callout-color-rgb), 0.25) 0%, transparent 50%),
|
|
linear-gradient(135deg, rgba(var(--callout-color-rgb), 0.22) 0%, rgba(var(--background-secondary-rgb), 0.7) 100%) !important;
|
|
box-shadow:
|
|
0 0 0 2px rgba(var(--callout-color-rgb), 0.25),
|
|
0 6px 20px rgba(0, 0, 0, 0.3),
|
|
inset 0 0 20px rgba(var(--callout-color-rgb), 0.08) !important;
|
|
}
|
|
|
|
.callout-style-bold .callout:hover {
|
|
border-width: 4px !important;
|
|
border-left-width: 8px !important;
|
|
box-shadow:
|
|
0 0 0 3px rgba(var(--callout-color-rgb), 0.2),
|
|
0 8px 24px rgba(0, 0, 0, 0.2),
|
|
inset 0 0 25px rgba(var(--callout-color-rgb), 0.08) !important;
|
|
transform: translateY(-2px) scale(1.01) !important;
|
|
}
|
|
|
|
.callout-style-bold .callout .callout-title {
|
|
font-weight: var(--weight-bold) !important;
|
|
letter-spacing: 0.02em !important;
|
|
}
|
|
|
|
/* Vibrant Glow Style - Deep jewel tones, luminous text */
|
|
.callout-style-vibrant .callout {
|
|
background: linear-gradient(135deg,
|
|
hsl(from var(--callout-color) h 65% 45%) 0%,
|
|
hsl(from var(--callout-color) h 55% 32%) 100%) !important;
|
|
border: 1px solid rgba(var(--callout-color-rgb), 0.4) !important;
|
|
border-left: 5px solid hsl(from var(--callout-color) h 90% 60%) !important;
|
|
border-radius: var(--r3) !important;
|
|
box-shadow:
|
|
0 8px 24px -8px rgba(0, 0, 0, 0.4),
|
|
0 4px 12px -4px rgba(var(--callout-color-rgb), 0.5),
|
|
inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.callout-style-vibrant .callout .callout-title {
|
|
color: hsl(from var(--callout-color) h 85% 95%) !important;
|
|
font-weight: 700 !important;
|
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
|
|
.callout-style-vibrant .callout :is(.callout-icon, .callout-icon svg) {
|
|
color: hsl(from var(--callout-color) h 95% 85%) !important;
|
|
filter: drop-shadow(0 0 4px rgba(var(--callout-color-rgb), 0.6)) !important;
|
|
}
|
|
|
|
.callout-style-vibrant .callout .callout-content {
|
|
color: hsl(from var(--callout-color) h 40% 90%) !important;
|
|
opacity: 0.95 !important;
|
|
}
|
|
|
|
.callout-style-vibrant .callout :is(a, .internal-link, .external-link) {
|
|
color: hsl(from var(--callout-color) h 90% 85%) !important;
|
|
background: rgba(255, 255, 255, 0.1) !important;
|
|
text-decoration: underline !important;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.callout-style-vibrant .callout :is(a, .internal-link, .external-link):hover {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.callout-style-vibrant .callout :is(strong, em) {
|
|
color: white !important;
|
|
filter: drop-shadow(0 0 2px rgba(var(--callout-color-rgb), 0.4));
|
|
}
|
|
|
|
.theme-dark .callout-style-vibrant .callout {
|
|
background: linear-gradient(135deg,
|
|
hsl(from var(--callout-color) h 75% 38%) 0%,
|
|
hsl(from var(--callout-color) h 65% 22%) 100%) !important;
|
|
box-shadow:
|
|
0 12px 32px -12px rgba(0, 0, 0, 0.7),
|
|
0 8px 16px -6px rgba(var(--callout-color-rgb), 0.4),
|
|
inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
|
|
}
|
|
|
|
.callout-style-vibrant .callout:hover {
|
|
transform: translateY(-2px) !important;
|
|
box-shadow:
|
|
0 15px 40px -12px rgba(0, 0, 0, 0.5),
|
|
0 10px 20px -5px rgba(var(--callout-color-rgb), 0.6) !important;
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
|
|
/* Highlight Styling - Shared Properties */
|
|
.theme-light,
|
|
.theme-dark {
|
|
|
|
.markdown-rendered mark,
|
|
span.cm-highlight,
|
|
.markdown-preview-view mark,
|
|
.cm-s-obsidian span.cm-highlight {
|
|
padding: 6px 4px;
|
|
border-radius: var(--r1);
|
|
-webkit-corner-smoothing: var(--squircle-main);
|
|
display: inline;
|
|
transition: background-color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
}
|
|
|
|
/* Light Theme */
|
|
.theme-light {
|
|
|
|
.markdown-rendered mark,
|
|
span.cm-highlight,
|
|
.markdown-preview-view mark,
|
|
.cm-s-obsidian span.cm-highlight {
|
|
background-color: var(--highlight-bg);
|
|
color: var(--highlight-bg-dark-color);
|
|
box-shadow: var(--shadow-1);
|
|
border-bottom: 2px solid var(--highlight-bg-dark);
|
|
|
|
&:hover {
|
|
box-shadow: var(--shadow-2);
|
|
filter: brightness(1.05);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Dark Theme */
|
|
.theme-dark {
|
|
|
|
.markdown-rendered mark,
|
|
span.cm-highlight,
|
|
.markdown-preview-view mark,
|
|
.cm-s-obsidian span.cm-highlight {
|
|
background-color: var(--highlight-bg-dark);
|
|
color: var(--highlight-bg-light-color);
|
|
box-shadow: var(--shadow-2);
|
|
border-bottom: 2px solid rgba(var(--primary-color-rgb), .35);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
|
|
|
|
&:hover {
|
|
background-color: var(--highlight-bg-dark-color);
|
|
box-shadow: var(--shadow-3);
|
|
filter: brightness(1.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Strikethrough Styling */
|
|
:is(.markdown-rendered del, .cm-strikethrough) {
|
|
text-decoration-color: var(--primary-color);
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
.theme-dark :is(.markdown-rendered del, .cm-strikethrough) {
|
|
color: var(--emphasis-color-light);
|
|
text-decoration-color: var(--emphasis-color-light);
|
|
}
|
|
|
|
/* Blockquote Styling */
|
|
:is(.markdown-preview-view blockquote, .markdown-rendered blockquote, div:not(.CodeMirror-activeline)>.HyperMD-quote, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote) {
|
|
border-radius: var(--r3);
|
|
electron-corner-smoothing: var(--squircle-main);
|
|
border: none;
|
|
overflow: hidden;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
padding-right: 1em;
|
|
margin: 15px 0;
|
|
background-color: rgba(var(--background-secondary-rgb), .7);
|
|
border-left: 4px solid var(--blockquote-border-color);
|
|
border-bottom: 1px solid rgba(var(--primary-color-rgb), .1);
|
|
position: relative;
|
|
font-size: .9em;
|
|
box-shadow: var(--shadow-2);
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-line.HyperMD-quote::before {
|
|
width: 4px;
|
|
border-radius: var(--r3) 0 0 var(--r3);
|
|
}
|
|
|
|
.theme-dark :is(.markdown-preview-view blockquote, .markdown-rendered blockquote, div:not(.CodeMirror-activeline)>.HyperMD-quote, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote) {
|
|
background-color: rgba(var(--background-secondary-rgb), .8);
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
|
|
:is(.markdown-preview-view blockquote, .markdown-rendered blockquote, div:not(.CodeMirror-activeline)>.HyperMD-quote, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote):hover {
|
|
box-shadow: var(--shadow-3);
|
|
transform: translateY(-2px);
|
|
border-radius: var(--r3);
|
|
electron-corner-smoothing: var(--squircle-main);
|
|
border-bottom: 1px solid rgba(var(--primary-color-rgb), .2);
|
|
}
|
|
|
|
:is(.markdown-preview-view blockquote strong, .markdown-rendered blockquote strong, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote .cm-strong) {
|
|
color: var(--emphasis-color);
|
|
font-weight: var(--weight-bold);
|
|
text-shadow: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
:is(.markdown-preview-view blockquote em, .markdown-rendered blockquote em, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote .cm-em) {
|
|
color: var(--emphasis-color);
|
|
font-style: italic;
|
|
text-shadow: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.theme-dark :is(.markdown-preview-view blockquote strong, .markdown-rendered blockquote strong, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote .cm-strong) {
|
|
color: var(--emphasis-color-light);
|
|
font-weight: var(--weight-bold);
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
.theme-dark :is(.markdown-preview-view blockquote em, .markdown-rendered blockquote em, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote .cm-em) {
|
|
color: var(--emphasis-color-light);
|
|
font-style: italic;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
|
|
/* Inline Code Styling */
|
|
:is(.markdown-rendered code, .markdown-preview-view code, .cm-s-obsidian .cm-inline-code):not(pre code) {
|
|
background-color: var(--code-background);
|
|
color: var(--code-normal);
|
|
padding: 2px 6px;
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
font-size: 0.9em;
|
|
font-family: var(--font-monospace);
|
|
border: 1px solid rgba(var(--primary-color-rgb), .1);
|
|
box-shadow: var(--shadow-1);
|
|
transition: background-color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
:is(.markdown-rendered code, .markdown-preview-view code, .cm-s-obsidian .cm-inline-code):not(pre code):hover {
|
|
background-color: rgba(var(--primary-color-rgb), .1);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
|
|
.theme-dark :is(.markdown-rendered code, .markdown-preview-view code, .cm-s-obsidian .cm-inline-code):not(pre code) {
|
|
border-color: rgba(var(--primary-color-rgb), .15);
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
|
|
/* Code Block Styling */
|
|
:is(.markdown-rendered pre, .markdown-preview-view pre) {
|
|
background-color: var(--background-secondary-alt);
|
|
background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
padding: var(--s3);
|
|
margin: var(--s3) 0;
|
|
border: 2px solid rgba(var(--primary-color-rgb), .15);
|
|
box-shadow: var(--shadow-2), inset 0 2px 6px rgba(0, 0, 0, .1);
|
|
overflow-x: auto;
|
|
position: relative;
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
:is(.markdown-rendered pre, .markdown-preview-view pre):hover {
|
|
box-shadow: var(--shadow-3);
|
|
transform: translateY(-2px);
|
|
border-color: rgba(var(--primary-color-rgb), .15);
|
|
}
|
|
|
|
.theme-dark :is(.markdown-rendered pre, .markdown-preview-view pre) {
|
|
background-color: var(--background-secondary-alt);
|
|
background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35));
|
|
border-color: rgba(var(--primary-color-rgb), .3);
|
|
box-shadow: var(--shadow-3), inset 0 2px 8px rgba(0, 0, 0, .25);
|
|
}
|
|
|
|
/* Source Mode Code Block Container */
|
|
.markdown-source-view.mod-cm6 .cm-embed-block.cm-embed-codeblock {
|
|
background-color: var(--background-secondary-alt);
|
|
background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
border: 2px solid rgba(var(--primary-color-rgb), .15);
|
|
box-shadow: var(--shadow-2), inset 0 2px 6px rgba(0, 0, 0, .1);
|
|
margin: var(--s3) 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.theme-dark .markdown-source-view.mod-cm6 .cm-embed-block.cm-embed-codeblock {
|
|
background-color: var(--background-secondary-alt);
|
|
background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35));
|
|
border-color: rgba(var(--primary-color-rgb), .3);
|
|
box-shadow: var(--shadow-3), inset 0 2px 8px rgba(0, 0, 0, .25);
|
|
}
|
|
|
|
/* Source Mode Code Block Lines - Apply darker background for contrast */
|
|
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
|
|
background-color: var(--background-secondary-alt);
|
|
filter: brightness(0.92);
|
|
margin: 0;
|
|
padding-left: var(--s3);
|
|
padding-right: var(--s2);
|
|
}
|
|
|
|
.theme-dark .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
|
|
background-color: var(--background-secondary-alt);
|
|
filter: brightness(0.75);
|
|
}
|
|
|
|
/* First line of code block */
|
|
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-begin {
|
|
border-top-left-radius: var(--r2);
|
|
border-top-right-radius: var(--r2);
|
|
padding-top: var(--s2);
|
|
margin-top: var(--s2);
|
|
}
|
|
|
|
/* Last line of code block */
|
|
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-end {
|
|
border-bottom-left-radius: var(--r2);
|
|
border-bottom-right-radius: var(--r2);
|
|
padding-bottom: var(--s2);
|
|
margin-bottom: var(--s2);
|
|
}
|
|
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code) {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
font-size: 0.9em;
|
|
line-height: var(--line-normal);
|
|
color: var(--code-normal);
|
|
}
|
|
|
|
/* Code Block Line Numbers */
|
|
.markdown-source-view.mod-cm6 .cm-gutters {
|
|
background-color: var(--code-background);
|
|
border-right: 1px solid rgba(var(--primary-color-rgb), .1);
|
|
color: var(--code-comment);
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-activeLineGutter {
|
|
background-color: rgba(var(--primary-color-rgb), .08);
|
|
}
|
|
|
|
/* Syntax Highlighting - Uses seasonal --code-* variables */
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.comment,
|
|
.cm-s-obsidian .cm-comment {
|
|
color: var(--code-comment);
|
|
font-style: italic;
|
|
}
|
|
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.keyword,
|
|
.cm-s-obsidian .cm-keyword {
|
|
color: var(--code-keyword);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.string,
|
|
.cm-s-obsidian .cm-string {
|
|
color: var(--code-string);
|
|
}
|
|
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.function,
|
|
.cm-s-obsidian .cm-def {
|
|
color: var(--code-function);
|
|
}
|
|
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.number,
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.boolean,
|
|
.cm-s-obsidian .cm-number,
|
|
.cm-s-obsidian .cm-atom {
|
|
color: var(--code-value);
|
|
}
|
|
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.property,
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.attr-name,
|
|
.cm-s-obsidian .cm-property {
|
|
color: var(--code-property);
|
|
}
|
|
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.tag,
|
|
.cm-s-obsidian .cm-tag {
|
|
color: var(--code-tag);
|
|
}
|
|
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.punctuation,
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.operator,
|
|
.cm-s-obsidian .cm-punctuation,
|
|
.cm-s-obsidian .cm-operator {
|
|
color: var(--code-punctuation);
|
|
}
|
|
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.important,
|
|
:is(.markdown-rendered pre code, .markdown-preview-view pre code, .markdown-source-view.mod-cm6 .HyperMD-codeblock) .token.builtin,
|
|
.cm-s-obsidian .cm-builtin {
|
|
color: var(--code-important);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
/* Code Block Copy Button */
|
|
.markdown-rendered pre .copy-code-button,
|
|
.markdown-preview-view pre .copy-code-button {
|
|
position: absolute;
|
|
top: var(--s2);
|
|
right: var(--s2);
|
|
background-color: rgba(var(--primary-color-rgb), .1);
|
|
border: 1px solid rgba(var(--primary-color-rgb), .15);
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
padding: 4px 8px;
|
|
font-size: 0.75em;
|
|
color: var(--code-comment);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
:is(.markdown-rendered pre, .markdown-preview-view pre):hover .copy-code-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.markdown-rendered pre .copy-code-button:hover,
|
|
.markdown-preview-view pre .copy-code-button:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .2);
|
|
color: var(--primary-color);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Image Styling */
|
|
.markdown-rendered img,
|
|
.markdown-source-view.mod-cm6 .cm-content img {
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
max-width: 100%;
|
|
box-shadow: var(--shadow-2);
|
|
transform: scale(.99);
|
|
transition: transform 0.2s ease, filter 0.2s ease;
|
|
}
|
|
|
|
.markdown-rendered img:hover,
|
|
.markdown-source-view.mod-cm6 .cm-content img:hover {
|
|
transform: scale(1);
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
/* Table Styling */
|
|
.markdown-rendered table,
|
|
.markdown-preview-view table {
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
overflow: hidden;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
box-shadow: var(--shadow-2);
|
|
position: relative;
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.theme-dark .markdown-rendered table,
|
|
.theme-dark .markdown-preview-view table {
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
|
|
.markdown-rendered table th:first-child,
|
|
.markdown-preview-view table th:first-child {
|
|
border-top-left-radius: var(--r3);
|
|
}
|
|
|
|
.markdown-rendered table th:last-child,
|
|
.markdown-preview-view table th:last-child {
|
|
border-top-right-radius: var(--r3);
|
|
}
|
|
|
|
.markdown-rendered table tr:last-child td:first-child,
|
|
.markdown-preview-view table tr:last-child td:first-child {
|
|
border-bottom-left-radius: var(--r3);
|
|
}
|
|
|
|
.markdown-rendered table tr:last-child td:last-child,
|
|
.markdown-preview-view table tr:last-child td:last-child {
|
|
border-bottom-right-radius: var(--r3);
|
|
}
|
|
|
|
.markdown-rendered table td,
|
|
.markdown-rendered table th,
|
|
.markdown-preview-view table td,
|
|
.markdown-preview-view table th {
|
|
border-width: 0 1px 1px 0;
|
|
}
|
|
|
|
.markdown-rendered table th,
|
|
.markdown-preview-view table th {
|
|
background-color: var(--emphasis-color);
|
|
padding: var(--s2) var(--s3);
|
|
font-weight: var(--weight-semibold);
|
|
border-bottom: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.markdown-rendered table th strong {
|
|
color: inherit;
|
|
}
|
|
|
|
.theme-light .markdown-rendered table tr:nth-child(even) th,
|
|
.theme-light .markdown-preview-view table tr:nth-child(even) th,
|
|
.theme-light .markdown-rendered table tr:nth-child(odd) th,
|
|
.theme-light .markdown-preview-view table tr:nth-child(odd) th {
|
|
background-color: var(--emphasis-color);
|
|
filter: brightness(.9);
|
|
color: var(--background-primary);
|
|
}
|
|
|
|
.theme-dark .markdown-rendered table tr:nth-child(even) th,
|
|
.theme-dark .markdown-preview-view table tr:nth-child(even) th,
|
|
.theme-dark .markdown-rendered table tr:nth-child(odd) th,
|
|
.theme-dark .markdown-preview-view table tr:nth-child(odd) th {
|
|
background-color: var(--emphasis-color);
|
|
filter: brightness(.9);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.markdown-rendered table td,
|
|
.markdown-preview-view table td {
|
|
padding: var(--s2) var(--s3);
|
|
border-top: 1px solid var(--table-border);
|
|
}
|
|
|
|
.theme-light .markdown-rendered table tbody tr:nth-child(even),
|
|
.theme-light .markdown-preview-view table tbody tr:nth-child(even) {
|
|
background-color: rgba(0, 0, 0, .03);
|
|
}
|
|
|
|
.theme-light .markdown-rendered table tbody tr:nth-child(odd),
|
|
.theme-light .markdown-preview-view table tbody tr:nth-child(odd) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.theme-dark .markdown-rendered table tbody tr:nth-child(even),
|
|
.theme-dark .markdown-preview-view table tbody tr:nth-child(even) {
|
|
background-color: rgba(255, 255, 255, .03);
|
|
}
|
|
|
|
.theme-dark .markdown-rendered table tbody tr:nth-child(odd),
|
|
.theme-dark .markdown-preview-view table tbody tr:nth-child(odd) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.markdown-rendered table tbody tr:hover,
|
|
.markdown-preview-view table tbody tr:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .05);
|
|
}
|
|
|
|
.theme-dark .markdown-rendered table tbody tr:hover,
|
|
.theme-dark .markdown-preview-view table tbody tr:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .08);
|
|
}
|
|
|
|
.markdown-rendered table:hover,
|
|
.markdown-preview-view table:hover {
|
|
box-shadow: var(--shadow-3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Checkbox styling */
|
|
input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--emphasis-color);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
transition: all var(--transition-ui);
|
|
}
|
|
|
|
/* Hover state */
|
|
input[type="checkbox"]:hover {
|
|
transform: scale(1.05);
|
|
border-color: var(--emphasis-color);
|
|
}
|
|
|
|
/* Focus state */
|
|
input[type="checkbox"]:focus {
|
|
box-shadow: 0 0 0 3px var(--emphasis-color);
|
|
border-color: var(--emphasis-color);
|
|
outline: none;
|
|
}
|
|
|
|
/* Active/pressed state */
|
|
input[type="checkbox"]:active {
|
|
transform: scale(0.95);
|
|
border-color: var(--emphasis-color);
|
|
}
|
|
|
|
/* Checked state */
|
|
input[type="checkbox"]:checked {
|
|
background: var(--emphasis-color);
|
|
border-color: var(--emphasis-color);
|
|
animation: checkboxPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
/* Checkmark */
|
|
input[type="checkbox"]:checked::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
animation: checkmarkAppear 0.2s 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
|
|
}
|
|
|
|
/* Task list item checkboxes */
|
|
.task-list-item-checkbox {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--emphasis-color);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
transition: all var(--transition-ui);
|
|
}
|
|
|
|
.task-list-item-checkbox:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 8px var(--emphasis-color);
|
|
border-color: var(--emphasis-color);
|
|
}
|
|
|
|
.task-list-item-checkbox:focus {
|
|
box-shadow: 0 0 0 3px var(--emphasis-color);
|
|
border-color: var(--emphasis-color);
|
|
outline: none;
|
|
}
|
|
|
|
.task-list-item-checkbox:active {
|
|
transform: scale(0.95);
|
|
border-color: var(--emphasis-color);
|
|
}
|
|
|
|
.task-list-item-checkbox:checked {
|
|
background: var(--emphasis-color) !important;
|
|
border-color: var(--emphasis-color) !important;
|
|
animation: checkboxPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
.task-list-item-checkbox:checked::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
animation: checkmarkAppear 0.2s 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
|
|
}
|
|
|
|
/* Unique bullet points per list level (un-ordered lists) */
|
|
body.enable-fancy-bullets {
|
|
|
|
/* LEVEL 1 */
|
|
.markdown-reading-view ul>li>.list-bullet:after,
|
|
.markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet:after {
|
|
height: 7px;
|
|
width: 7px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* LEVEL 2 */
|
|
.markdown-reading-view ul>li>ul>li>.list-bullet:after,
|
|
.markdown-source-view.mod-cm6 .HyperMD-list-line-2 .list-bullet:after {
|
|
height: 7px;
|
|
width: 7px;
|
|
background-color: transparent;
|
|
border-style: solid;
|
|
border-radius: 50%;
|
|
border-width: 1px;
|
|
}
|
|
|
|
/* LEVEL 3 */
|
|
.markdown-reading-view ul>li>ul>li>ul>li>.list-bullet:after,
|
|
.markdown-source-view.mod-cm6 .HyperMD-list-line-3 .list-bullet:after {
|
|
height: 5px;
|
|
width: 5px;
|
|
border-radius: 0%;
|
|
background-color: rgb(89, 89, 89);
|
|
}
|
|
|
|
/* LEVEL 4 */
|
|
.markdown-reading-view ul>li>ul>li>ul>li>ul>li>.list-bullet:after,
|
|
.markdown-source-view.mod-cm6 .HyperMD-list-line-4 .list-bullet:after {
|
|
height: 0;
|
|
width: 0;
|
|
background-color: transparent;
|
|
border-radius: 0%;
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
border-left: 8px solid;
|
|
border-right: 0px solid;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes checkboxPop {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes checkmarkAppear {
|
|
0% {
|
|
transform: translate(-50%, -50%) scale(0) rotate(-45deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(1) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@keyframes menuPop {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.96) translateY(5px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Apply animation to menus, modals, and popovers */
|
|
body:not(.disable-ui-animations) .menu,
|
|
body:not(.disable-ui-animations) .modal,
|
|
body:not(.disable-ui-animations) .popover,
|
|
body:not(.disable-ui-animations) .prompt,
|
|
body:not(.disable-ui-animations) .suggestion-container,
|
|
body:not(.disable-ui-animations) .tooltip {
|
|
animation: menuPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
/* ================================================= ==================================================
|
|
WHIMSY ANIMATIONS (From Blobob)
|
|
================================================ ================================================== */
|
|
|
|
/* --- Keyframes --- */
|
|
|
|
@keyframes whimsy-modal-open {
|
|
0% {
|
|
transform: translateY(18px) scale(0.99);
|
|
}
|
|
|
|
65% {
|
|
transform: translateY(-1px) scale(1.01);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes whimsy-settle-bounce {
|
|
0% {
|
|
transform: scaleY(1.05);
|
|
}
|
|
|
|
60% {
|
|
transform: scaleY(0.98);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes whimsy-settle-container {
|
|
0% {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
40% {
|
|
transform: scaleY(1.025);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes whimsy-collapse-bounce {
|
|
0% {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
40% {
|
|
transform: scaleY(1.06);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleY(0.92);
|
|
}
|
|
}
|
|
|
|
@keyframes whimsy-notice-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-8px) scale(0.96);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes whimsy-callout-open-settle {
|
|
0% {
|
|
transform: scaleY(0.9);
|
|
}
|
|
|
|
60% {
|
|
transform: scaleY(1.03);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes whimsy-callout-close-bounce {
|
|
0% {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
40% {
|
|
transform: scaleY(1.05);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleY(0.95);
|
|
}
|
|
}
|
|
|
|
@keyframes whimsy-float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0px) rotate(0deg);
|
|
}
|
|
|
|
25% {
|
|
transform: translateY(-4px) rotate(-0.5deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(8px) rotate(0.5deg);
|
|
}
|
|
|
|
75% {
|
|
transform: translateY(-2px) rotate(-0.3deg);
|
|
}
|
|
}
|
|
|
|
/* --- Application Rules --- */
|
|
|
|
/* Modals */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .modal-container {
|
|
transform-origin: center;
|
|
animation: whimsy-modal-open 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.7) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .modal {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* Metadata/Properties */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-container:not(.is-collapsed) .metadata-content {
|
|
animation: whimsy-settle-bounce 0.4s forwards;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-container:not(.is-collapsed) {
|
|
animation: whimsy-settle-container 0.5s forwards;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-container.is-collapsed {
|
|
animation: whimsy-collapse-bounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 2) forwards;
|
|
}
|
|
|
|
/* Notices */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .notice-container {
|
|
animation: whimsy-notice-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 2) !important;
|
|
transform-origin: top center;
|
|
}
|
|
|
|
/* Callouts */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .callout:not(.is-collapsed) {
|
|
animation: whimsy-callout-open-settle 0.4s cubic-bezier(0.175, 0.885, 0.32, 2) !important;
|
|
transform-origin: top center;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .callout.is-collapsed {
|
|
animation: whimsy-callout-close-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 2) forwards !important;
|
|
transform-origin: top center;
|
|
}
|
|
|
|
/* Callout Icons - Bouncy Entrance */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .callout .callout-icon {
|
|
animation: whimsy-callout-icon-bounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.3) forwards;
|
|
transform-origin: center center;
|
|
}
|
|
|
|
@keyframes whimsy-callout-icon-bounce {
|
|
0% {
|
|
transform: scale(0.4) rotate(-15deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.15) rotate(5deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Loading Screen */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .progress-bar-message {
|
|
animation: whimsy-float 2s ease-in-out infinite;
|
|
display: inline-block;
|
|
/* Ensure transform works */
|
|
}
|
|
|
|
/* --- Expanded Whimsy Elements --- */
|
|
|
|
@keyframes whimsy-checkbox-pop {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
40% {
|
|
transform: scale(1.35);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Jelly/Rubber effect for interactive elements */
|
|
@keyframes whimsy-jelly {
|
|
0% {
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
25% {
|
|
transform: scale(0.95, 1.05);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.05, 0.95);
|
|
}
|
|
|
|
75% {
|
|
transform: scale(0.98, 1.02);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
/* Wiggle for attention/error states */
|
|
@keyframes whimsy-wiggle {
|
|
|
|
0%,
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
20% {
|
|
transform: rotate(-3deg);
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(3deg);
|
|
}
|
|
|
|
60% {
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(2deg);
|
|
}
|
|
}
|
|
|
|
/* Slide-in from side with bounce */
|
|
@keyframes whimsy-slide-in-right {
|
|
0% {
|
|
transform: translateX(30px) scale(0.95);
|
|
opacity: 0;
|
|
}
|
|
|
|
70% {
|
|
transform: translateX(-5px) scale(1.02);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Gentle pulse for focus states */
|
|
@keyframes whimsy-pulse-soft {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.4);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 0 0 8px rgba(var(--primary-color-rgb), 0);
|
|
}
|
|
}
|
|
|
|
/* Heartbeat for important notifications */
|
|
@keyframes whimsy-heartbeat {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
14% {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
28% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
42% {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
56% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Reveal animation for content entrance */
|
|
@keyframes whimsy-reveal-up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(15px);
|
|
filter: blur(3px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
|
|
/* Popups (Menu, Popover, Etc) */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .menu,
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .popover,
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .prompt,
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .suggestion-container,
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .tooltip {
|
|
animation: whimsy-modal-open 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.7) !important;
|
|
}
|
|
|
|
/* Checkboxes */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) input[type="checkbox"]:checked,
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .task-list-item-checkbox:checked {
|
|
animation: whimsy-checkbox-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
|
|
}
|
|
|
|
/* Buttons and Icons Hover */
|
|
body.animation-style-whimsy button,
|
|
body.animation-style-whimsy .clickable-icon {
|
|
transition: transform var(--transition-bounce);
|
|
}
|
|
|
|
body.animation-style-whimsy button:hover,
|
|
body.animation-style-whimsy .clickable-icon:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
body.animation-style-whimsy button:active,
|
|
body.animation-style-whimsy .clickable-icon:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* --- Bouncy & Rotaty Buttons --- */
|
|
body.animation-style-whimsy .workspace-tab-header-inner-close-button {
|
|
transition: transform var(--transition-bounce), opacity 0.2s ease, width 0.2s ease !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .workspace-tab-header-inner-close-button:hover {
|
|
transform: scale(1.15) rotate(90deg);
|
|
background-color: var(--primary-color) !important;
|
|
color: var(--background-primary) !important;
|
|
}
|
|
|
|
/* Sidebar Toggle Buttons (Left Rotates 180) */
|
|
body.animation-style-whimsy .sidebar-toggle-button.mod-left {
|
|
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .sidebar-toggle-button.mod-left:hover {
|
|
transform: rotate(180deg) scale(1.15);
|
|
}
|
|
|
|
body.animation-style-whimsy .side-dock-ribbon-action:hover,
|
|
body.animation-style-whimsy .workspace-ribbon-collapse-btn:hover {
|
|
transform: scale(1.15) rotate(5deg);
|
|
}
|
|
|
|
body.animation-style-whimsy .collapse-icon {
|
|
transition: transform var(--transition-bounce) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .collapse-icon:hover {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
body.animation-style-whimsy .status-bar-item {
|
|
transition: transform var(--transition-bounce) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .status-bar-item:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
body.animation-style-whimsy .tag,
|
|
body.animation-style-whimsy .multi-select-pill {
|
|
transition: transform var(--transition-bounce) !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
body.animation-style-whimsy .tag:hover,
|
|
body.animation-style-whimsy .multi-select-pill:hover {
|
|
transform: scale(1.1) rotate(-2deg);
|
|
}
|
|
|
|
body.animation-style-whimsy .canvas-control-item {
|
|
transition: transform var(--transition-bounce) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .canvas-control-item:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
body.animation-style-whimsy .search-input-container input {
|
|
transition: transform var(--transition-bounce), box-shadow 0.2s ease !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .search-input-container input:focus {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* --- Whimsy Transitions (Bouncify Everything) --- */
|
|
|
|
/* Tabs */
|
|
body.animation-style-whimsy .workspace-tab-header,
|
|
body.animation-style-whimsy .workspace-tab-header-inner {
|
|
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease !important;
|
|
}
|
|
|
|
/* View Headers */
|
|
body.animation-style-whimsy .view-header {
|
|
transition: box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease !important;
|
|
}
|
|
|
|
/* Sidebar & Ribbon Icons */
|
|
body.animation-style-whimsy .side-dock-ribbon-action,
|
|
body.animation-style-whimsy .workspace-ribbon-collapse-btn,
|
|
body.animation-style-whimsy .view-header-icon,
|
|
body.animation-style-whimsy .modal-close-button {
|
|
transition: color 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
|
|
}
|
|
|
|
/* Metadata Container */
|
|
body.animation-style-whimsy .metadata-container {
|
|
transition: box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) !important;
|
|
}
|
|
|
|
/* File Explorer Items & Outline */
|
|
body.animation-style-whimsy .nav-file-title,
|
|
body.animation-style-whimsy .nav-folder-title,
|
|
body.animation-style-whimsy .tree-item-self {
|
|
transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .nav-file-title:hover,
|
|
body.animation-style-whimsy .nav-folder-title:hover,
|
|
body.animation-style-whimsy .tree-item-self:hover {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
/* Toggles */
|
|
body.animation-style-whimsy .checkbox-container {
|
|
transition: background-color 0.2s ease !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .checkbox-container:after {
|
|
transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) !important;
|
|
}
|
|
|
|
/* Sliders */
|
|
body.animation-style-whimsy input[type=range]::-webkit-slider-thumb {
|
|
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy input[type=range]::-webkit-slider-thumb:active {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
/* Links */
|
|
body.animation-style-whimsy a.internal-link,
|
|
body.animation-style-whimsy a.external-link {
|
|
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
|
|
display: inline-block;
|
|
/* Required for transform */
|
|
}
|
|
|
|
body.animation-style-whimsy a.internal-link:hover,
|
|
body.animation-style-whimsy a.external-link:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Settings Left Panel (Vertical Nav) */
|
|
body.animation-style-whimsy .vertical-tab-nav-item {
|
|
transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .vertical-tab-nav-item:hover {
|
|
transform: translateX(6px) scale(1.02);
|
|
}
|
|
|
|
/* Callouts (Obvious Hover) */
|
|
body.animation-style-whimsy .callout {
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4), box-shadow 0.3s ease !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .callout:hover {
|
|
transform: scale(1.02) translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Blockquotes (Obvious Hover) */
|
|
body.animation-style-whimsy .markdown-rendered blockquote {
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4), border-left-width 0.2s ease !important;
|
|
}
|
|
|
|
body.animation-style-whimsy .markdown-rendered blockquote:hover {
|
|
transform: translateX(5px) scale(1.01);
|
|
border-left-width: 6px;
|
|
}
|
|
|
|
/* Images (Obvious Hover) */
|
|
body.animation-style-whimsy img {
|
|
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.4) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy img:hover {
|
|
transform: scale(1.03) rotate(1deg);
|
|
}
|
|
|
|
/* Tables (Obvious Hover) */
|
|
body.animation-style-whimsy table {
|
|
transition: transform 0.3s ease !important;
|
|
}
|
|
|
|
body.animation-style-whimsy table:hover {
|
|
transform: scale(1.01);
|
|
}
|
|
|
|
/* Headers (Obvious Hover) */
|
|
body.animation-style-whimsy h1,
|
|
body.animation-style-whimsy h2,
|
|
body.animation-style-whimsy h3,
|
|
body.animation-style-whimsy h4,
|
|
body.animation-style-whimsy h5,
|
|
body.animation-style-whimsy h6 {
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4), letter-spacing 0.3s ease !important;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
body.animation-style-whimsy h1:hover,
|
|
body.animation-style-whimsy h2:hover,
|
|
body.animation-style-whimsy h3:hover,
|
|
body.animation-style-whimsy h4:hover,
|
|
body.animation-style-whimsy h5:hover,
|
|
body.animation-style-whimsy h6:hover {
|
|
transform: translateX(10px);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* --- Extended Whimsy Elements (New Animations) --- */
|
|
|
|
/* Metadata Properties - Staggered Entrance */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-property {
|
|
animation: whimsy-reveal-up var(--transition-bounce) backwards;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-property:nth-child(1) {
|
|
animation-delay: 0.05s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-property:nth-child(2) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-property:nth-child(3) {
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-property:nth-child(4) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-property:nth-child(5) {
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-property:nth-child(6) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-property:nth-child(7) {
|
|
animation-delay: 0.35s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-property:nth-child(8) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
/* Code Blocks - Hover Lift */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered pre {
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4), box-shadow 0.3s ease !important;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered pre:hover {
|
|
transform: scale(1.01);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
/* Tab New Button - Jiggle on hover */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .workspace-tab-header-new-tab {
|
|
transition: transform var(--transition-bounce) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .workspace-tab-header-new-tab:hover {
|
|
animation: whimsy-jelly 0.5s ease-in-out;
|
|
}
|
|
|
|
/* Ribbon Items - Staggered Entrance */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .side-dock-ribbon-action {
|
|
animation: whimsy-reveal-up 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5) backwards;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .side-dock-ribbon-action:nth-child(1) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .side-dock-ribbon-action:nth-child(2) {
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .side-dock-ribbon-action:nth-child(3) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .side-dock-ribbon-action:nth-child(4) {
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .side-dock-ribbon-action:nth-child(5) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .side-dock-ribbon-action:nth-child(6) {
|
|
animation-delay: 0.35s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .side-dock-ribbon-action:nth-child(7) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .side-dock-ribbon-action:nth-child(8) {
|
|
animation-delay: 0.45s;
|
|
}
|
|
|
|
/* Error/Warning States - Wiggle */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .has-error input,
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .is-error,
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .setting-item.is-invalid input {
|
|
animation: whimsy-wiggle 0.4s ease-in-out;
|
|
}
|
|
|
|
/* Input Focus - Pulse Glow */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) input:focus,
|
|
body.animation-style-whimsy:not(.disable-ui-animations) textarea:focus {
|
|
animation: whimsy-pulse-soft 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Dropdown/Select Expansion */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .dropdown {
|
|
animation: whimsy-slide-in-right var(--transition-bounce);
|
|
}
|
|
|
|
/* Warning Notices - Heartbeat */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .notice.mod-warning {
|
|
animation: whimsy-heartbeat 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Rendered Headings - Staggered Reveal */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered h1 {
|
|
animation: whimsy-reveal-up 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.3) backwards;
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered h2 {
|
|
animation: whimsy-reveal-up 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.3) backwards;
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered h3 {
|
|
animation: whimsy-reveal-up 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.3) backwards;
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
/* Callouts - Slide Entrance */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered .callout {
|
|
animation: whimsy-slide-in-right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5) backwards;
|
|
}
|
|
|
|
/* Table Rows - Hover Slide */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) table tr {
|
|
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.4), background-color 0.2s ease !important;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) table tr:hover {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
/* List Items - Staggered Bounce */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ul>li,
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ol>li {
|
|
animation: whimsy-reveal-up 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.3) backwards;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ul>li:nth-child(1),
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ol>li:nth-child(1) {
|
|
animation-delay: 0.05s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ul>li:nth-child(2),
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ol>li:nth-child(2) {
|
|
animation-delay: 0.08s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ul>li:nth-child(3),
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ol>li:nth-child(3) {
|
|
animation-delay: 0.11s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ul>li:nth-child(4),
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ol>li:nth-child(4) {
|
|
animation-delay: 0.14s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ul>li:nth-child(5),
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-rendered ol>li:nth-child(5) {
|
|
animation-delay: 0.17s;
|
|
}
|
|
|
|
/* Settings Toggles - Jelly on Click */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .checkbox-container:active {
|
|
animation: whimsy-jelly 0.4s ease-in-out;
|
|
}
|
|
|
|
/* Scrollbar Thumb - Squish on Hover */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) ::-webkit-scrollbar-thumb {
|
|
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5), background-color 0.2s ease !important;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) ::-webkit-scrollbar-thumb:hover {
|
|
transform: scaleX(1.2);
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) ::-webkit-scrollbar-thumb:active {
|
|
transform: scaleX(0.9);
|
|
}
|
|
|
|
/* Breadcrumbs - Float on Hover */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .view-header-breadcrumb {
|
|
transition: transform var(--transition-bounce) !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .view-header-breadcrumb:hover {
|
|
transform: translateY(-2px) scale(1.05);
|
|
}
|
|
|
|
/* Graph View Nodes - Pulse on Hover */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .graph-view.color-fill-node:hover {
|
|
animation: whimsy-pulse-soft 1s ease-in-out;
|
|
}
|
|
|
|
/* Outline Items - Slide In */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .outline-item {
|
|
animation: whimsy-reveal-up 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4) backwards;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .outline-item:nth-child(1) {
|
|
animation-delay: 0.05s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .outline-item:nth-child(2) {
|
|
animation-delay: 0.08s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .outline-item:nth-child(3) {
|
|
animation-delay: 0.11s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .outline-item:nth-child(4) {
|
|
animation-delay: 0.14s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .outline-item:nth-child(5) {
|
|
animation-delay: 0.17s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .outline-item:nth-child(6) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
/* Search Results - Staggered Slide */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .search-result {
|
|
animation: whimsy-slide-in-right 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.4) backwards;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .search-result:nth-child(1) {
|
|
animation-delay: 0.05s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .search-result:nth-child(2) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .search-result:nth-child(3) {
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .search-result:nth-child(4) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .search-result:nth-child(5) {
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
/* Backlink Items - Entrance */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .backlink-pane .search-result-file-title {
|
|
animation: whimsy-reveal-up 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.4) backwards;
|
|
}
|
|
|
|
/* Tab Header - Jelly on Active Switch */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .workspace-tab-header.is-active {
|
|
animation: whimsy-jelly 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.5);
|
|
}
|
|
|
|
/* Modal Close Button - Spin on Hover */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .modal-close-button:hover {
|
|
transform: rotate(90deg) scale(1.2);
|
|
}
|
|
|
|
/* Color Picker Swatches - Pop on Hover */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .color-swatch {
|
|
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .color-swatch:hover {
|
|
transform: scale(1.15) rotate(-5deg);
|
|
}
|
|
|
|
/* File Badge (Unread count, etc) - Bounce */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .nav-file-tag {
|
|
animation: whimsy-reveal-up var(--transition-bounce) backwards;
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
/* Embed Containers - Entrance */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .markdown-embed {
|
|
animation: whimsy-slide-in-right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.4) backwards;
|
|
}
|
|
|
|
/* PDF Embed - Subtle Entrance */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .pdf-embed {
|
|
animation: whimsy-reveal-up 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.3) backwards;
|
|
}
|
|
|
|
/* Suggestion Items - Staggered */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .suggestion-item {
|
|
animation: whimsy-reveal-up 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.4) backwards;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .suggestion-item:nth-child(1) {
|
|
animation-delay: 0.02s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .suggestion-item:nth-child(2) {
|
|
animation-delay: 0.04s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .suggestion-item:nth-child(3) {
|
|
animation-delay: 0.06s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .suggestion-item:nth-child(4) {
|
|
animation-delay: 0.08s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .suggestion-item:nth-child(5) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .suggestion-item:nth-child(6) {
|
|
animation-delay: 0.12s;
|
|
}
|
|
|
|
/* Mermaid Diagrams - Entrance */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .mermaid {
|
|
animation: whimsy-reveal-up 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.3) backwards;
|
|
}
|
|
|
|
/* Calendar Dates - Hover Pop */
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .day {
|
|
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
|
|
}
|
|
|
|
body.animation-style-whimsy:not(.disable-ui-animations) .day:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
/* Modal Background Frost */
|
|
body:not(.disable-modal-frost) .modal-bg {
|
|
backdrop-filter: blur(3px);
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Dark mode support */
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
input[type="checkbox"],
|
|
.task-list-item-checkbox {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
/* Custom colored strikethrough for completed tasks */
|
|
:is(.markdown-rendered li.task-list-item[data-task="x"],
|
|
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"]) {
|
|
text-decoration: line-through;
|
|
text-decoration-color: var(--emphasis-color);
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
/* Flashing Effect */
|
|
:is(.is-flashing, .is-flashing .internal-link, .is-flashing .external-link) {
|
|
background-color: rgba(var(--primary-color-rgb), .15) !important;
|
|
color: inherit !important;
|
|
border-radius: 3px;
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
box-shadow: 0 0 0 1px rgba(var(--primary-color-rgb), .2);
|
|
outline: none !important;
|
|
padding: 0 1px !important;
|
|
margin: 0 -1px !important;
|
|
display: inline !important;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.is-flashing:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .25) !important;
|
|
}
|
|
|
|
/* Metadata Container Styling */
|
|
.metadata-container {
|
|
background-color: rgba(var(--background-secondary-rgb), .7);
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
padding: var(--s4);
|
|
margin-bottom: var(--s4);
|
|
border: none;
|
|
box-shadow: var(--shadow-2);
|
|
position: relative;
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
|
contain: layout style;
|
|
will-change: transform;
|
|
}
|
|
|
|
.metadata-container:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-3);
|
|
}
|
|
|
|
.metadata-container .metadata-properties-heading {
|
|
font-weight: var(--weight-bold);
|
|
color: var(--heading-primary);
|
|
margin-bottom: var(--s3);
|
|
font-size: 1.1em;
|
|
letter-spacing: .02em;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
}
|
|
|
|
.theme-dark .metadata-container {
|
|
background-color: rgba(var(--primary-color-rgb), .05);
|
|
border-color: rgba(var(--primary-color-rgb), .15);
|
|
}
|
|
|
|
.theme-dark .metadata-container .metadata-property-key {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.metadata-container .metadata-property-key:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .05);
|
|
}
|
|
|
|
.metadata-container .collapse-icon {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
position: absolute;
|
|
left: -35px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* Workspace Tab Header Styling */
|
|
.workspace-tab-header-container-inner {
|
|
overflow-y: clip;
|
|
}
|
|
|
|
.workspace-tab-header {
|
|
border-radius: var(--r3) var(--r3) 0 0 !important;
|
|
overflow: visible;
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
background-color: rgba(var(--background-secondary-rgb), 0.9);
|
|
color: var(--text-muted);
|
|
border: none;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.workspace-tab-header,
|
|
.workspace-tab-header-inner,
|
|
.workspace-tab-header-container,
|
|
.workspace-tab-header::before,
|
|
.workspace-tab-header::after,
|
|
.workspace-tab-header-inner::before,
|
|
.workspace-tab-header-inner::after {
|
|
transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
|
|
border: none !important;
|
|
border-right: none !important;
|
|
border-left: none !important;
|
|
}
|
|
|
|
.workspace-tab-header::after,
|
|
.workspace-tab-header::before,
|
|
.workspace-tab-header-inner::after,
|
|
.workspace-tab-header-inner::before {
|
|
display: none !important;
|
|
content: none !important;
|
|
}
|
|
|
|
.workspace-tab-header:hover {
|
|
color: var(--text-normal);
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
.workspace-tab-header.is-active {
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
font-weight: var(--weight-semibold);
|
|
z-index: 2;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.workspace-tab-header.is-active:hover {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
.workspace-tab-header-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.theme-dark .workspace-tab-header {
|
|
background-color: rgba(var(--background-secondary-alt-rgb, var(--background-secondary-rgb)), 0.95);
|
|
}
|
|
|
|
.theme-dark .workspace-tab-header.is-active {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
.workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Explicit styling for inactive tabs */
|
|
body:not(.is-mobile).layout-card .workspace-tab-header:not(.is-active) {
|
|
background-color: rgba(var(--primary-color-rgb), 0.08) !important;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .theme-dark .workspace-tab-header:not(.is-active) {
|
|
background-color: rgba(var(--primary-color-rgb), 0.08) !important;
|
|
}
|
|
|
|
/* View Header Styling */
|
|
.view-header {
|
|
border-bottom: 1.5px solid var(--divider-color);
|
|
background-color: rgba(var(--background-primary-rgb), .85);
|
|
box-shadow: var(--shadow-2);
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
|
|
position: relative;
|
|
z-index: 5;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.view-header:hover {
|
|
box-shadow: var(--shadow-3);
|
|
background-color: rgba(var(--background-primary-rgb), .92);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.theme-dark .view-header {
|
|
background-color: rgba(var(--background-primary-rgb), .6);
|
|
border-bottom-color: rgba(255, 255, 255, .07);
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.theme-dark .view-header:hover {
|
|
background-color: rgba(var(--background-primary-rgb), .75);
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
|
|
border-bottom-color: rgba(var(--primary-color-rgb), .3);
|
|
}
|
|
|
|
.view-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.theme-dark .view-header-title,
|
|
.theme-dark .view-header-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.theme-dark .view-header-title {
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
|
|
.theme-dark .view-header-icon {
|
|
transition: color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
|
|
.theme-dark .view-header-icon:hover {
|
|
color: var(--primary-color);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Workspace Split Styling */
|
|
.workspace-split.mod-left-split,
|
|
.workspace-split.mod-right-split {
|
|
background-color: rgba(var(--background-primary-rgb), .8);
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-soft);
|
|
border: none;
|
|
box-shadow: none;
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
.workspace-split.mod-left-split:hover,
|
|
.workspace-split.mod-right-split:hover {
|
|
background-color: rgba(var(--background-primary-rgb), .92);
|
|
box-shadow: none;
|
|
transform: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.workspace-tabs .workspace-leaf {
|
|
padding: var(--s1);
|
|
}
|
|
|
|
.workspace-split .workspace-tab-header {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.workspace-split.mod-left-split .workspace-tabs,
|
|
.workspace-split.mod-right-split .workspace-tabs {
|
|
flex-grow: 1;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.workspace-split.mod-left-split .workspace-leaf,
|
|
.workspace-split.mod-left-split .workspace-tab-container,
|
|
.workspace-split.mod-left-split .view-content,
|
|
.workspace-split.mod-right-split .workspace-leaf,
|
|
.workspace-split.mod-right-split .workspace-tab-container,
|
|
.workspace-split.mod-right-split .view-content {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Status Bar Styling - Only apply when toggle is OFF */
|
|
body:not(.disable-status-bar) .status-bar {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 5px;
|
|
z-index: var(--layer-status-bar, 1000);
|
|
transform: translateX(-50%);
|
|
width: fit-content;
|
|
max-width: 90%;
|
|
height: auto;
|
|
min-height: 28px;
|
|
padding: var(--s1) var(--s3);
|
|
border-radius: var(--r4);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
background-color: var(--background-secondary);
|
|
border: 1px solid var(--divider-color);
|
|
box-shadow: var(--shadow-1);
|
|
color: var(--text-muted);
|
|
text-wrap: balance;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
cursor: default;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
body:not(.disable-status-bar) .status-bar:not(:hover) {
|
|
opacity: .5;
|
|
height: 6px;
|
|
min-height: 0;
|
|
padding: 0 10px;
|
|
max-width: 60px;
|
|
background-color: rgba(var(--primary-color-rgb), .2);
|
|
border: none;
|
|
box-shadow: none;
|
|
color: transparent;
|
|
}
|
|
|
|
body:not(.disable-status-bar) .status-bar>.status-bar-item {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
white-space: normal;
|
|
color: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 2px 4px;
|
|
}
|
|
|
|
body:not(.disable-status-bar) .status-bar:hover>.status-bar-item {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
body:not(.disable-status-bar) .status-bar:hover .status-bar-item .clickable-icon:hover,
|
|
body:not(.disable-status-bar) .status-bar:hover .status-bar-item button:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .1);
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Outline View Styling */
|
|
.workspace-leaf-content[data-type="outline"] {
|
|
--outline-dot-size: 8px;
|
|
--outline-item-spacing: var(--s1);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .view-content {
|
|
padding: var(--s2);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item {
|
|
position: relative;
|
|
margin-bottom: var(--outline-item-spacing);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-icon {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
min-width: 0 !important;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-self {
|
|
position: relative;
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-soft);
|
|
min-height: 24px;
|
|
height: auto !important;
|
|
padding: var(--s1) var(--s2);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
transition: background-color 0.2s ease;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-self:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .06);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-inner {
|
|
margin-left: 0;
|
|
padding-right: var(--s3);
|
|
white-space: normal;
|
|
line-height: 1.4;
|
|
overflow-wrap: break-word;
|
|
flex: 1;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children {
|
|
margin-left: var(--s3);
|
|
padding-left: var(--s2);
|
|
border-left: 1px solid rgba(var(--primary-color-rgb), .06);
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children:hover {
|
|
border-left-color: rgba(var(--primary-color-rgb), .12);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .view-content>div>.tree-item>.tree-item-self {
|
|
color: var(--heading-primary);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .view-content>div>.tree-item>.tree-item-self:is(:hover, .is-active) {
|
|
background-color: rgba(var(--heading-primary-rgb), .12);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children>.tree-item>.tree-item-self {
|
|
color: var(--heading-secondary);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children>.tree-item>.tree-item-self:is(:hover, .is-active) {
|
|
background-color: rgba(var(--heading-secondary-rgb), .12);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children .tree-item-children>.tree-item>.tree-item-self {
|
|
color: var(--heading-tertiary);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children .tree-item-children>.tree-item>.tree-item-self:is(:hover, .is-active) {
|
|
background-color: rgba(var(--heading-tertiary-rgb), .12);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children .tree-item-children .tree-item-children>.tree-item>.tree-item-self {
|
|
color: var(--heading-quaternary);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children .tree-item-children .tree-item-children>.tree-item>.tree-item-self:is(:hover, .is-active) {
|
|
background-color: rgba(var(--heading-quaternary-rgb), .12);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children .tree-item-children .tree-item-children .tree-item-children>.tree-item>.tree-item-self {
|
|
color: var(--heading-quinary);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children .tree-item-children .tree-item-children .tree-item-children>.tree-item>.tree-item-self:is(:hover, .is-active) {
|
|
background-color: rgba(var(--heading-quinary-rgb), .12);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children .tree-item-children .tree-item-children .tree-item-children .tree-item-children>.tree-item>.tree-item-self {
|
|
color: var(--heading-senary);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="outline"] .tree-item-children .tree-item-children .tree-item-children .tree-item-children .tree-item-children>.tree-item>.tree-item-self:is(:hover, .is-active) {
|
|
background-color: rgba(var(--heading-senary-rgb), .12);
|
|
}
|
|
|
|
/* Scrollbar Styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: transparent;
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb);
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--interactive-accent);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: var(--scrollbar-track);
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
}
|
|
|
|
body:not(.disable-scrollbars) * {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
}
|
|
|
|
/* Popover Styling */
|
|
.popover {
|
|
background-color: var(--background-primary);
|
|
border: 1px solid rgba(var(--primary-color-rgb), .15);
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
box-shadow: var(--shadow-4), 0 8px 32px rgba(0, 0, 0, .15);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.theme-dark .popover {
|
|
background-color: var(--background-secondary);
|
|
border-color: rgba(var(--primary-color-rgb), .25);
|
|
box-shadow: var(--shadow-4), 0 8px 32px rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.popover .popover-content {
|
|
padding: var(--s2);
|
|
}
|
|
|
|
/* Command Palette / Prompt Styling */
|
|
.prompt {
|
|
background-color: var(--background-primary);
|
|
border: 1px solid rgba(var(--primary-color-rgb), .12);
|
|
border-radius: var(--r4);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
box-shadow: var(--shadow-4), 0 12px 48px rgba(0, 0, 0, .2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.theme-dark .prompt {
|
|
background-color: var(--background-secondary);
|
|
border-color: rgba(var(--primary-color-rgb), .2);
|
|
box-shadow: var(--shadow-4), 0 12px 48px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.prompt-input-container {
|
|
background-color: var(--background-secondary);
|
|
border-bottom: 1px solid rgba(var(--primary-color-rgb), .1);
|
|
padding: var(--s3);
|
|
}
|
|
|
|
.prompt-input {
|
|
background-color: var(--background-primary);
|
|
border: 1px solid rgba(var(--primary-color-rgb), .12);
|
|
border-radius: var(--r2);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
padding: var(--s2) var(--s3);
|
|
color: var(--text-normal);
|
|
font-size: 1em;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.prompt-input:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .15);
|
|
outline: none;
|
|
}
|
|
|
|
.prompt-results {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
padding: var(--s2);
|
|
}
|
|
|
|
/* Suggestion Container Styling */
|
|
.suggestion-container {
|
|
background-color: var(--background-primary);
|
|
border: 1px solid rgba(var(--primary-color-rgb), .12);
|
|
border-radius: var(--r3);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
box-shadow: var(--shadow-3), 0 6px 24px rgba(0, 0, 0, .12);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.theme-dark .suggestion-container {
|
|
background-color: var(--background-secondary);
|
|
border-color: rgba(var(--primary-color-rgb), .2);
|
|
box-shadow: var(--shadow-3), 0 6px 24px rgba(0, 0, 0, .35);
|
|
}
|
|
|
|
.suggestion-item {
|
|
padding: var(--s2);
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
margin: 2px var(--s1);
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.suggestion-item:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .08);
|
|
}
|
|
|
|
.suggestion-item.is-selected {
|
|
background-color: rgba(var(--primary-color-rgb), .15);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.theme-dark .suggestion-item.is-selected {
|
|
background-color: rgba(var(--primary-color-rgb), .2);
|
|
}
|
|
|
|
.suggestion-item .suggestion-highlight {
|
|
color: var(--primary-color);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
.suggestion-item .suggestion-hotkey {
|
|
background-color: rgba(var(--primary-color-rgb), .1);
|
|
border: 1px solid rgba(var(--primary-color-rgb), .15);
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
padding: 2px 6px;
|
|
font-size: 0.75em;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.theme-dark .suggestion-item .suggestion-hotkey {
|
|
background-color: rgba(var(--primary-color-rgb), .15);
|
|
border-color: rgba(var(--primary-color-rgb), .25);
|
|
}
|
|
|
|
/* Menu Styling */
|
|
.menu {
|
|
background-color: var(--background-primary);
|
|
border: 1px solid rgba(var(--primary-color-rgb), .12);
|
|
border-radius: var(--r2);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
box-shadow: var(--shadow-3), 0 4px 16px rgba(0, 0, 0, .1);
|
|
padding: 4px;
|
|
}
|
|
|
|
.theme-dark .menu {
|
|
background-color: var(--background-secondary);
|
|
border-color: rgba(var(--primary-color-rgb), .2);
|
|
box-shadow: var(--shadow-3), 0 4px 16px rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.menu-item {
|
|
padding: var(--s2);
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s2);
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .1);
|
|
}
|
|
|
|
.menu-item.is-selected,
|
|
.menu-item:active {
|
|
background-color: rgba(var(--primary-color-rgb), .15);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.menu-separator {
|
|
height: 1px;
|
|
background-color: rgba(var(--primary-color-rgb), .1);
|
|
margin: var(--s1) 0;
|
|
}
|
|
|
|
/* Modal Styling */
|
|
.modal-container {
|
|
background-color: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.modal {
|
|
background-color: var(--background-primary);
|
|
border: 1px solid rgba(var(--primary-color-rgb), .1);
|
|
border-radius: var(--r4);
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
box-shadow: var(--shadow-4), 0 16px 64px rgba(0, 0, 0, .25);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.theme-dark .modal {
|
|
background-color: var(--background-secondary);
|
|
border-color: rgba(var(--primary-color-rgb), .2);
|
|
box-shadow: var(--shadow-4), 0 16px 64px rgba(0, 0, 0, .6);
|
|
}
|
|
|
|
.modal-title {
|
|
font-weight: var(--weight-semibold);
|
|
font-size: 1.1em;
|
|
color: var(--text-normal);
|
|
padding: var(--s3) var(--s4);
|
|
border-bottom: 1px solid rgba(var(--primary-color-rgb), .1);
|
|
}
|
|
|
|
.modal-content {
|
|
padding: var(--s4);
|
|
}
|
|
|
|
.modal-close-button {
|
|
color: var(--text-muted);
|
|
transition: color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.modal-close-button:hover {
|
|
color: var(--primary-color);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* All interactive elements and inputs with rounded corners */
|
|
button,
|
|
.clickable-icon,
|
|
.mod-cta,
|
|
.setting-item-control button,
|
|
input[type="button"],
|
|
input[type="submit"],
|
|
.checkbox-container,
|
|
.vertical-tab-nav-item,
|
|
.setting-item,
|
|
.suggestion-item,
|
|
.menu-item,
|
|
select,
|
|
.dropdown,
|
|
.combobox-button,
|
|
textarea,
|
|
.multi-select-container,
|
|
input.metadata-input-text,
|
|
input[type='date'],
|
|
input[type='datetime-local'],
|
|
input[type='text'],
|
|
input[type='search'],
|
|
input[type='email'],
|
|
input[type='password'],
|
|
input[type='number'] {
|
|
border-radius: var(--r4) !important;
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
}
|
|
|
|
/* Dropdown options/menu */
|
|
.dropdown-menu,
|
|
.menu {
|
|
border-radius: var(--r3) !important;
|
|
-electron-corner-smoothing: var(--squircle-main);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Ribbon Styling */
|
|
.workspace-ribbon {
|
|
background-color: var(--background-secondary);
|
|
border-right: 1px solid rgba(var(--primary-color-rgb), .08);
|
|
}
|
|
|
|
.theme-dark .workspace-ribbon {
|
|
background-color: var(--background-secondary-alt);
|
|
border-right-color: rgba(var(--primary-color-rgb), .12);
|
|
}
|
|
|
|
.workspace-ribbon-collapse-btn {
|
|
color: var(--text-muted);
|
|
transition: color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.workspace-ribbon-collapse-btn:hover {
|
|
color: var(--primary-color);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Sidebar Icons */
|
|
.side-dock-ribbon-action,
|
|
.side-dock-actions .clickable-icon,
|
|
.workspace-ribbon .clickable-icon {
|
|
color: var(--text-muted);
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
padding: var(--s1);
|
|
margin: 2px 0;
|
|
transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.side-dock-ribbon-action:hover,
|
|
.side-dock-actions .clickable-icon:hover,
|
|
.workspace-ribbon .clickable-icon:hover {
|
|
color: var(--primary-color);
|
|
background-color: rgba(var(--primary-color-rgb), .1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.side-dock-ribbon-action:active,
|
|
.side-dock-actions .clickable-icon:active,
|
|
.workspace-ribbon .clickable-icon:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.side-dock-ribbon-action.is-active,
|
|
.workspace-ribbon .clickable-icon.is-active {
|
|
color: var(--primary-color);
|
|
background-color: rgba(var(--primary-color-rgb), .15);
|
|
}
|
|
|
|
.theme-dark .side-dock-ribbon-action:hover,
|
|
.theme-dark .side-dock-actions .clickable-icon:hover,
|
|
.theme-dark .workspace-ribbon .clickable-icon:hover {
|
|
background-color: rgba(var(--primary-color-rgb), .15);
|
|
}
|
|
|
|
.theme-dark .side-dock-ribbon-action.is-active,
|
|
.theme-dark .workspace-ribbon .clickable-icon.is-active {
|
|
background-color: rgba(var(--primary-color-rgb), .2);
|
|
}
|
|
|
|
/* View Action Icons (in header) */
|
|
.view-actions .clickable-icon {
|
|
color: var(--text-muted);
|
|
border-radius: var(--r1);
|
|
-electron-corner-smoothing: var(--squircle-btn);
|
|
padding: 4px;
|
|
transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.view-actions .clickable-icon:hover {
|
|
color: var(--primary-color);
|
|
background-color: rgba(var(--primary-color-rgb), .1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.view-actions .clickable-icon:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Titlebar Buttons */
|
|
.titlebar-button {
|
|
color: var(--text-muted);
|
|
transition: color 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
.titlebar-button:hover {
|
|
color: var(--text-normal);
|
|
background-color: rgba(var(--primary-color-rgb), .1);
|
|
}
|
|
|
|
.titlebar-button.mod-close:hover {
|
|
background-color: #e74c3c;
|
|
color: white;
|
|
}
|
|
|
|
body.disable-shadows {
|
|
--shadow-1: none !important;
|
|
--shadow-2: none !important;
|
|
--shadow-3: none !important;
|
|
--shadow-4: none !important;
|
|
}
|
|
|
|
/* ============================== */
|
|
/* LAYOUT: CARD INTERFACE */
|
|
/* ============================== */
|
|
|
|
/* Variables */
|
|
body.layout-card {
|
|
--card-bg: var(--background-primary);
|
|
--card-radius: 20px;
|
|
}
|
|
|
|
/* Workspace leaf wrapper */
|
|
body.layout-card .workspace-leaf {
|
|
background-color: transparent !important;
|
|
margin: 5px;
|
|
}
|
|
|
|
/* Leaf content - THE CARD */
|
|
body.layout-card .workspace-leaf-content {
|
|
background-color: var(--card-bg) !important;
|
|
border-radius: var(--card-radius);
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Tab headers - transparent background */
|
|
body.layout-card .workspace-tab-header-container {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Remove all borders from EVERYTHING */
|
|
body.layout-card .workspace-leaf,
|
|
body.layout-card .workspace-tab-header-container,
|
|
body.layout-card .workspace-split,
|
|
body.layout-card .workspace-leaf-resize-handle,
|
|
body.layout-card .sidebar-left,
|
|
body.layout-card .sidebar-right,
|
|
body.layout-card .side-dock-plugin-panel,
|
|
body.layout-card .side-dock-plugin-panel-inner {
|
|
border-right: none !important;
|
|
border-left: none !important;
|
|
border-top: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/* === MIDDLE PANEL FIX === */
|
|
body.layout-card .workspace-split,
|
|
body.layout-card .workspace-split.mod-vertical,
|
|
body.layout-card .workspace-split.mod-horizontal {
|
|
background-color: var(--background-secondary) !important;
|
|
border-radius: 0 !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
transform: none !important;
|
|
z-index: auto !important;
|
|
|
|
}
|
|
|
|
body.layout-card .workspace-split:hover,
|
|
body.layout-card .workspace-split:focus,
|
|
body.layout-card .workspace-split:focus-within,
|
|
body.layout-card .workspace-split.mod-vertical:hover,
|
|
body.layout-card .workspace-split.mod-vertical:focus,
|
|
body.layout-card .workspace-split.mod-vertical:focus-within,
|
|
body.layout-card .workspace-split.mod-horizontal:hover,
|
|
body.layout-card .workspace-split.mod-horizontal:focus,
|
|
body.layout-card .workspace-split.mod-horizontal:focus-within {
|
|
background-color: var(--background-secondary) !important;
|
|
border-radius: 0 !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
transform: none !important;
|
|
z-index: auto !important;
|
|
}
|
|
|
|
/* View header fixes */
|
|
body.layout-card .view-header {
|
|
border: none !important;
|
|
border-bottom: none !important;
|
|
box-shadow: none !important;
|
|
transition: none !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Add bottom padding for card effect */
|
|
body.layout-card .workspace-leaf-content {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Tab header hover scale effect - sidebars only */
|
|
body.layout-card .workspace-split.mod-left-split .workspace-tab-header-inner:hover,
|
|
body.layout-card .workspace-split.mod-right-split .workspace-tab-header-inner:hover {
|
|
transform: scale(1.05) !important;
|
|
transition: transform 0.2s ease !important;
|
|
}
|
|
|
|
body.layout-card .workspace-split.mod-left-split .workspace-tab-header-inner,
|
|
body.layout-card .workspace-split.mod-right-split .workspace-tab-header-inner {
|
|
transition: transform 0.2s ease !important;
|
|
}
|
|
|
|
/* Fix: Normal collapse icon animation in card layout */
|
|
body.layout-card .collapse-icon svg,
|
|
body.layout-card .nav-folder-collapse-indicator svg {
|
|
transition: transform 0.3s ease-out !important;
|
|
}
|
|
|
|
/* Sidebar Pill Styles for Card Layout (Refined) */
|
|
body:not(.is-mobile).layout-card .workspace-split:is(.mod-left-split, .mod-right-split) .workspace-tab-header-container {
|
|
background-color: transparent !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-split:is(.mod-left-split, .mod-right-split) .workspace-tab-header-container .workspace-tab-header-container-inner {
|
|
background-color: rgba(var(--primary-color-rgb), 0.08) !important;
|
|
border-radius: 100px !important;
|
|
padding: 1px 4px 1px !important;
|
|
margin: 12px auto !important;
|
|
gap: 3px !important;
|
|
height: 42px !important;
|
|
width: fit-content !important;
|
|
max-width: calc(100% - 40px);
|
|
justify-content: center !important;
|
|
border: none !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-split:is(.mod-left-split, .mod-right-split) .workspace-tab-header {
|
|
border-radius: var(--r2) !important;
|
|
height: 34px !important;
|
|
margin: 0 !important;
|
|
padding: 0 12px !important;
|
|
background-color: transparent !important;
|
|
transition: all 0.2s ease !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-split:is(.mod-left-split, .mod-right-split) .workspace-tab-header.is-active {
|
|
background-color: var(--background-primary) !important;
|
|
border-radius: var(--r4) !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
color: var(--text-normal) !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
body:not(.is-mobile).layout-card .workspace-split:is(.mod-left-split, .mod-right-split) .workspace-tab-header-inner {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Traffic Light Offset for macOS Card Layout - Background should not overlap */
|
|
body:not(.is-mobile).mod-macos.is-hidden-frameless.layout-card .workspace-split.mod-left-split .workspace-tab-header-container-inner {
|
|
padding-left: 4px !important;
|
|
margin-left: 80px !important;
|
|
margin-right: auto !important;
|
|
width: fit-content !important;
|
|
}
|
|
|
|
/* Shift Right Sidebar Tabs to the right */
|
|
body:not(.is-mobile).layout-card .workspace-split.mod-right-split .workspace-tab-header-container .workspace-tab-header-container-inner {
|
|
margin-left: 12px !important;
|
|
}
|
|
|
|
/* Vault Profile Selection Styling (Pill Aesthetic) */
|
|
body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
|
|
background-color: rgba(var(--primary-color-rgb), 0.05) !important;
|
|
border-radius: 100px !important;
|
|
margin: 4px 12px 10px !important;
|
|
padding: 2px 12px !important;
|
|
border: none !important;
|
|
transition: all 0.2s ease !important;
|
|
cursor: pointer;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
height: 34px !important;
|
|
width: auto !important;
|
|
max-width: calc(100% - 24px) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile:hover {
|
|
background-color: rgba(var(--primary-color-rgb), 0.1) !important;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
|
|
}
|
|
|
|
body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-name {
|
|
font-weight: var(--weight-semibold) !important;
|
|
color: var(--text-normal) !important;
|
|
font-size: 0.82em !important;
|
|
text-align: left !important;
|
|
flex-grow: 1 !important;
|
|
}
|
|
|
|
/* Card Layout Specific Adjustments */
|
|
body.layout-card:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
|
|
background-color: var(--background-primary) !important;
|
|
}
|
|
|
|
/* Floating Nav Buttons Logic (Top Minimal Bar - Refined) */
|
|
body:not(.is-mobile).enable-floating-nav .nav-header {
|
|
overflow: visible !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
body:not(.is-mobile).enable-floating-nav .nav-buttons-container {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 6px;
|
|
margin: 4px auto 4px !important;
|
|
padding: 0;
|
|
border-radius: 100px;
|
|
background-color: rgba(var(--primary-color-rgb), 0.4);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0;
|
|
z-index: 10;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
body:not(.is-mobile).enable-floating-nav .nav-buttons-container:hover {
|
|
width: fit-content;
|
|
height: 38px;
|
|
background-color: var(--background-secondary-alt);
|
|
box-shadow: var(--shadow-2) !important;
|
|
overflow: visible;
|
|
opacity: 1;
|
|
gap: 4px;
|
|
margin-top: 7px !important;
|
|
margin-bottom: 5px !important;
|
|
}
|
|
|
|
body:not(.is-mobile).enable-floating-nav .nav-buttons-container>.clickable-icon {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
pointer-events: none;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
body:not(.is-mobile).enable-floating-nav .nav-buttons-container:hover>.clickable-icon {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: scale(1);
|
|
}
|
|
|
|
body:not(.is-mobile).enable-floating-nav .nav-buttons-container>.clickable-icon:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* View Header Pill Styles (Card Layout) - Nav & Actions */
|
|
body:not(.is-mobile).layout-card .view-header :is(.view-actions, .view-header-nav-buttons) {
|
|
background-color: rgba(var(--primary-color-rgb), 0.08) !important;
|
|
border-radius: 100px !important;
|
|
padding: 2px 4px !important;
|
|
margin: 6px 12px !important;
|
|
gap: 2px !important;
|
|
height: 32px !important;
|
|
width: fit-content !important;
|
|
border: none !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
body.layout-card .view-header :is(.view-actions, .view-header-nav-buttons) .clickable-icon {
|
|
border-radius: var(--r2) !important;
|
|
height: 26px !important;
|
|
width: 26px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
background-color: transparent !important;
|
|
transition: all 0.2s ease !important;
|
|
padding: 0 !important;
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
body.layout-card .view-header :is(.view-actions, .view-header-nav-buttons) .clickable-icon:hover {
|
|
background-color: var(--background-primary) !important;
|
|
border-radius: var(--r3) !important;
|
|
box-shadow:
|
|
0 4px 10px rgba(0, 0, 0, 0.08),
|
|
0 1px 3px rgba(0, 0, 0, 0.04) !important;
|
|
color: var(--text-normal) !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* --- Global Search Refinements --- */
|
|
.search-result-container {
|
|
padding: var(--s2) !important;
|
|
}
|
|
|
|
.search-result-file-title {
|
|
font-weight: var(--weight-bold);
|
|
color: var(--text-normal);
|
|
padding: 6px 12px !important;
|
|
border-radius: 100px;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
margin-bottom: 4px !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.search-result-file-title:hover {
|
|
background-color: rgba(var(--primary-color-rgb), 0.1);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.search-result-file-match {
|
|
padding: 6px 12px !important;
|
|
margin: 2px 0 !important;
|
|
border-radius: 100px !important;
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
}
|
|
|
|
/* Container for all matches within a file - Enhanced Radius */
|
|
.search-result-file-matches,
|
|
.backlink-pane .search-result-file-matches,
|
|
.outgoing-link-pane .search-result-file-matches {
|
|
background-color: var(--background-primary) !important;
|
|
border: none !important;
|
|
border-radius: var(--r4) !important;
|
|
padding: 10px !important;
|
|
margin-top: 8px !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Card Layout Specific - High Contrast Tray */
|
|
body.layout-card .search-result {
|
|
background-color: rgba(var(--primary-color-rgb), 0.04) !important;
|
|
border-radius: var(--card-radius);
|
|
margin-bottom: var(--s4);
|
|
padding: var(--s3) !important;
|
|
border: none;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
body.layout-card .search-result-file-match {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
padding: 6px 10px !important;
|
|
border-radius: var(--r1) !important;
|
|
margin: 2px 0 !important;
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
body.layout-card .search-result-file-match:hover {
|
|
background-color: rgba(var(--primary-color-rgb), 0.05) !important;
|
|
}
|
|
|
|
body.layout-card .search-result-file-match em {
|
|
background-color: var(--text-highlight-bg);
|
|
color: var(--text-normal);
|
|
font-weight: var(--weight-bold);
|
|
padding: 0 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* --- Tag Pane Refinements (Pills in Tray) --- */
|
|
.tag-container {
|
|
padding: var(--s2) !important;
|
|
}
|
|
|
|
/* The "Tray" background in Card Layout */
|
|
body.layout-card .tag-container {
|
|
background-color: rgba(var(--primary-color-rgb), 0.04) !important;
|
|
border-radius: var(--card-radius);
|
|
padding: var(--s3) !important;
|
|
border: none;
|
|
}
|
|
|
|
/* Individual Tag Pills */
|
|
.tag-container .tree-item-self.tag-pane-tag {
|
|
background-color: var(--background-primary) !important;
|
|
border: none;
|
|
border-radius: var(--r4) !important;
|
|
margin-bottom: 6px !important;
|
|
padding: 6px 12px 6px 16px !important;
|
|
transition: all 0.2s ease !important;
|
|
color: var(--text-normal) !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.tag-container .tree-item-self.tag-pane-tag:hover {
|
|
background-color: rgba(var(--primary-color-rgb), 0.05) !important;
|
|
border-color: transparent !important;
|
|
transform: translateY(-1px) !important;
|
|
}
|
|
|
|
/* The flair / count pill */
|
|
.tag-container .tag-pane-tag-count {
|
|
background-color: rgba(var(--primary-color-rgb), 0.1) !important;
|
|
color: var(--text-muted) !important;
|
|
padding: 2px 10px !important;
|
|
border-radius: 100px !important;
|
|
font-size: 0.75em !important;
|
|
font-weight: var(--weight-bold) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Nested Tags Spacing */
|
|
.tag-container .tree-item-children {
|
|
padding-left: 16px !important;
|
|
margin-top: 4px !important;
|
|
border-left: none !important;
|
|
}
|
|
|
|
/* Show Header on Hover */
|
|
body.show-header-on-hover .view-header {
|
|
background-color: transparent !important;
|
|
border-bottom: none !important;
|
|
transition: background-color 0.2s ease !important;
|
|
}
|
|
|
|
/* Target all containers and immediate children to ensure nav arrows hide too */
|
|
body:not(.is-mobile).show-header-on-hover .view-header>div,
|
|
body:not(.is-mobile).show-header-on-hover .view-header>button,
|
|
body:not(.is-mobile).show-header-on-hover .view-header>.clickable-icon {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease, transform 0.2s ease !important;
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
body.show-header-on-hover .view-header:hover>div,
|
|
body.show-header-on-hover .view-header:hover>button,
|
|
body.show-header-on-hover .view-header:hover>.clickable-icon {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Only show border on hover if really needed, but removing background change */
|
|
body.show-header-on-hover .view-header:hover {
|
|
background-color: transparent !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/* Fix for Card Layout if enabled */
|
|
body.show-header-on-hover.layout-card .view-header:hover {
|
|
background-color: transparent !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/* Modern Glass Style - Frosted glass effect */
|
|
.blockquote-style-glass :is(.markdown-preview-view blockquote, .markdown-rendered blockquote, div:not(.CodeMirror-activeline)>.HyperMD-quote, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote) {
|
|
background: linear-gradient(135deg, rgba(var(--background-secondary-rgb), 0.6), rgba(var(--background-secondary-rgb), 0.4)) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
-webkit-backdrop-filter: blur(10px) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
border-left: 3px solid var(--blockquote-border-color) !important;
|
|
border-bottom: none !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.blockquote-style-glass :is(.markdown-preview-view blockquote, .markdown-rendered blockquote, div:not(.CodeMirror-activeline)>.HyperMD-quote, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote):hover {
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
|
border-left: 3px solid var(--blockquote-border-color) !important;
|
|
} |