obsidian-theme/dubefab_obsidian-TerraFlow
1
0
Fork 0
mirror of https://github.com/dubefab/obsidian-TerraFlow.git synced 2026-07-22 04:00:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
dubefab_obsidian-TerraFlow/theme.css
Fab 91743eeb22 fix style-settings hierarchy
2026-06-11 07:55:00 -04:00

8949 lines
301 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* @settings
name: TerraFlow
id: seasonal-themes
settings:
-
id: seasonal-heading
title: 🎨 Color Scheme
type: heading
level: 2
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
-
label: 🍃 Calm Focus
value: calm-focus-theme
-
label: 🏜️ Melange
value: melange-theme
-
id: use-custom-accent
title: Custom Accent Colour
description: Enable to override the seasonal accent with the colour below
type: class-toggle
default: false
-
id: custom-accent
title: Accent Colour (when override is on)
description: The accent colour used when Custom Accent Override is enabled
type: variable-color
default: "#5E7D6E"
opacity: false
format: hex
-
id: enable-monochrome
title: Monochrome Mode
description: Desaturate the interface to grayscale
type: class-toggle
default: false
-
id: low-contrast
title: Low Contrast Mode
description: Unify the whole window on the season's deeper panel tone for one calm, rich surface — works with every season
type: class-toggle
default: false
-
id: heading-color-intensity
title: Heading Colour Intensity
description: Muted blends headings into the text colour (dark, barely noticeable); Vivid lifts them to full palette saturation (funky!)
type: class-select
allowEmpty: false
default: heading-color-default
options:
-
label: Default
value: heading-color-default
-
label: Muted (subtle)
value: heading-color-muted
-
label: Vivid (funky)
value: heading-color-vivid
-
id: tinted-body-text
title: Season-Tinted Body Text
description: Blend the season's accent colour into body text so the palette shows through — verified readable in every season
type: class-toggle
default: false
-
id: body-text-tint
title: Body Text Tint Strength
description: How much accent to blend in (used when Season-Tinted Body Text is on)
type: variable-number-slider
default: 20
min: 10
max: 40
step: 5
format: "%"
-
id: p3-accents
title: P3 Vivid Accents
description: On wide-gamut (Display P3) Apple screens, boost the season accent's chroma so it glows — no effect on sRGB displays or the Custom Accent override
type: class-toggle
default: false
-
id: custom-heading-colors-heading
title: Custom Heading Colours
description: Override the season's H1–H6 colours with your own
type: heading
level: 3
collapsed: true
-
id: custom-heading-colors
title: Enable Custom Heading Colours
description: Use the colours below instead of the season palette — composes with Heading Colour Intensity
type: class-toggle
default: false
-
id: custom-h1
title: H1 Colour
type: variable-color
format: hex
opacity: false
default: "#c77b8b"
alt-format:
-
id: custom-h1-rgb
format: rgb-values
-
id: custom-h2
title: H2 Colour
type: variable-color
format: hex
opacity: false
default: "#bc5c00"
alt-format:
-
id: custom-h2-rgb
format: rgb-values
-
id: custom-h3
title: H3 Colour
type: variable-color
format: hex
opacity: false
default: "#a08428"
alt-format:
-
id: custom-h3-rgb
format: rgb-values
-
id: custom-h4
title: H4 Colour
type: variable-color
format: hex
opacity: false
default: "#6e9b72"
alt-format:
-
id: custom-h4-rgb
format: rgb-values
-
id: custom-h5
title: H5 Colour
type: variable-color
format: hex
opacity: false
default: "#7892bd"
alt-format:
-
id: custom-h5-rgb
format: rgb-values
-
id: custom-h6
title: H6 Colour
type: variable-color
format: hex
opacity: false
default: "#ad6bc0"
alt-format:
-
id: custom-h6-rgb
format: rgb-values
-
id: interface-heading
title: 🖥️ Interface
type: heading
level: 2
collapsed: true
-
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: depth-shadows
title: Depth & Shadows
description: Add realistic multi-layer shadows for visual depth and hierarchy
type: class-toggle
default: true
-
id: depth-warm
title: Tinted Ambient Shadows
description: Tint shadows with the accent colour for a warm, Apple-style ambient elevation (requires Depth & Shadows)
type: class-toggle
default: false
-
id: terraflow-quiet
title: Quiet Mode (Rams Reduction)
description: Soften hover lifts, mute accent backgrounds, remove link glow — a calmer, less expressive interface
type: class-toggle
default: false
-
id: system-fonts
title: System Font (San Francisco)
description: Use the native system font stack (SF Pro on Apple platforms) for text and interface
type: class-toggle
default: false
-
id: animations-heading
title: ✨ Animations
type: heading
level: 2
collapsed: true
-
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: content-styles-heading
title: ✍️ Editor & Content
type: heading
level: 2
collapsed: true
-
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: Glass (Frosted)
value: heading-style-glass
-
label: Badge (Pill)
value: heading-style-badge
-
id: heading-alignment
title: Heading Alignment
description: Choose the alignment for headings
type: class-select
allowEmpty: false
default: heading-align-left
options:
-
label: Left
value: heading-align-left
-
label: Center
value: heading-align-center
-
id: heading-font
title: Heading Font
description: Enter the name of a font installed on your system to use for headings (leave as 'inherit' to use the default theme font)
type: variable-text
default: inherit
-
id: heading-tight-tracking
title: Tight Heading Tracking
description: Apply negative letter-spacing to H1/H2 for Apple-style optical display tightening
type: class-toggle
default: false
-
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
-
id: highlight-style-selector
title: Highlight Style
description: Choose a visual style for text highlights
type: class-select
allowEmpty: false
default: highlight-style-default
options:
-
label: Default
value: highlight-style-default
-
label: Glass
value: highlight-style-glass
-
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
-
label: Bold Dramatic
value: blockquote-style-bold
-
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: Bold Border
value: callout-style-bold
-
id: inline-code-accent
title: Accent Inline Code
description: Highlight inline code with gradient backgrounds and accent colors
type: class-toggle
default: false
-
id: tabular-numerics
title: Tabular Numerics
description: Use tabular (fixed-width) numerals in metadata, tables, and status bar for precise alignment
type: class-toggle
default: false
-
id: caret-accent
title: Accent Caret & Selection
description: Colour the cursor caret and text-selection with the accent colour (visionOS-style)
type: class-toggle
default: false
-
id: heading-case-heading
title: Heading Case
description: Per-level text case — Title Case capitalizes the first letter of every word
type: heading
level: 3
collapsed: true
-
id: h1-case
title: H1 Case
type: class-select
allowEmpty: false
default: h1-case-normal
options:
-
label: Normal
value: h1-case-normal
-
label: Title Case
value: h1-case-title
-
label: UPPERCASE
value: h1-case-upper
-
id: h2-case
title: H2 Case
type: class-select
allowEmpty: false
default: h2-case-normal
options:
-
label: Normal
value: h2-case-normal
-
label: Title Case
value: h2-case-title
-
label: UPPERCASE
value: h2-case-upper
-
id: h3-case
title: H3 Case
type: class-select
allowEmpty: false
default: h3-case-normal
options:
-
label: Normal
value: h3-case-normal
-
label: Title Case
value: h3-case-title
-
label: UPPERCASE
value: h3-case-upper
-
id: h4-case
title: H4 Case
type: class-select
allowEmpty: false
default: h4-case-normal
options:
-
label: Normal
value: h4-case-normal
-
label: Title Case
value: h4-case-title
-
label: UPPERCASE
value: h4-case-upper
-
id: h5-case
title: H5 Case
type: class-select
allowEmpty: false
default: h5-case-normal
options:
-
label: Normal
value: h5-case-normal
-
label: Title Case
value: h5-case-title
-
label: UPPERCASE
value: h5-case-upper
-
id: h6-case
title: H6 Case
type: class-select
allowEmpty: false
default: h6-case-normal
options:
-
label: Normal
value: h6-case-normal
-
label: Title Case
value: h6-case-title
-
label: UPPERCASE
value: h6-case-upper
-
id: alt-checkboxes-heading
title: Alternate Checkboxes
description: Decorative task states — [/], [-], [>], [?], [!], [*] and more
type: heading
level: 3
collapsed: true
-
id: alt-checkboxes
title: Enable Alternate Checkboxes
description: Style extended task states with seasonal colors and glyphs in editor and reading mode
type: class-toggle
default: false
-
id: tables-heading
title: Tables
type: heading
level: 3
collapsed: true
-
id: table-style
title: Table Density
description: Cell padding and text sizing for tables
type: class-select
allowEmpty: false
default: table-style-default
options:
-
label: Default
value: table-style-default
-
label: Compact
value: table-style-compact
-
label: Relaxed
value: table-style-relaxed
-
id: table-plain-rows
title: Disable Row Striping
description: Turn off the alternating row background (striping is on by default)
type: class-toggle
default: false
-
id: table-no-hover
title: Disable Row Hover Highlight
description: Turn off the accent-tinted row highlight on hover
type: class-toggle
default: false
-
id: focus-mode-heading
title: 🔬 Deep Focus Mode
description: Science-backed single-switch mode — sepia/warm-dark palette, neutral headings, flattened chrome, 68ch measure. Overrides any active season palette.
type: heading
level: 2
collapsed: true
-
id: focus-mode
title: Enable Deep Focus Mode
description: Activates warm sepia (light) or warm dark (dark) palette, collapses heading colour hierarchy, kills decorative backgrounds and animations, and hides the ribbon and status bar. Overrides whatever season is active.
type: class-toggle
default: false
-
id: focus-mode-dim-paragraphs
title: Typewriter Dimming
description: Fade non-active lines to ~50% opacity in live-preview (iA Writer style). Reading mode dims all paragraphs until hovered.
type: class-toggle
default: false
-
id: focus-mode-hide-sidebars
title: Hide Sidebar Panels
description: Collapse the left and right sidebar content panels so only the editor canvas is visible.
type: class-toggle
default: false
-
id: focus-mode-keep-chrome
title: Keep Ribbon & Status Bar
description: Escape hatch — show ribbon and status bar even in Focus Mode. Palette and heading neutralisation remain active.
type: class-toggle
default: false
-
id: ui-elements-heading
title: 🖼️ UI Elements
type: heading
level: 2
collapsed: true
-
id: enable-fancy-bullets
title: Fancy Multilevel Bullet Styles
description: Toggle unique custom bullet shapes
type: class-toggle
default: false
-
id: tag-chips
title: Braun Tag Chips
description: Restyle inline tags as minimal uppercase chips — no background, hairline border, tight tracking
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: layout-heading
title: 📐 Layout & Spacing
type: heading
level: 2
collapsed: true
-
id: line-width
title: Line Width
description: Maximum width for editor and reading view content
type: variable-text
default: 64ch
-
id: editor-line-height
title: Editor Line Height
description: Line height for editor text (e.g. 1.4, 1.6, 1.8)
type: variable-text
default: "1.6"
-
id: focus-grid
title: Focus Dot Grid
description: Faint Bauhaus-style 24px dot grid behind the editor — tactile, barely perceptible
type: class-toggle
default: false
-
id: block-width-heading
title: Block Width (cssclasses)
description: "Add cssclasses to a note's properties: wide-page, full-page, wide-table, wide-image"
type: heading
level: 3
collapsed: true
-
id: wide-block-width
title: Wide Block Width
description: Maximum width for tables/images in notes using the wide-table or wide-image cssclass
type: variable-text
default: 110ch
-
id: banners-cards-heading
title: "Banners & Cards (cssclasses)"
description: "banner: mark an image ![[img|banner]] as a cover. cards: render Dataview tables as a card grid"
type: heading
level: 3
collapsed: true
-
id: banner-height
title: Banner Height
description: Height of the cover image in notes using the banner cssclass
type: variable-text
default: 240px
-
id: cards-min-width
title: Card Minimum Width
description: Minimum card width in notes using the cards cssclass
type: variable-text
default: 180px
-
id: performance-heading
title: ⚡ Performance & Accessibility
type: heading
level: 2
collapsed: true
-
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-glass-menus
title: Disable Glass Menus
description: Turn off glass effects for menus, popovers, and suggestions.
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;
--s5: 20px;
--s6: 24px;
--s7: 28px;
--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, .10);
--shadow-4: 0 4px 12px rgba(0, 0, 0, .12);
--shadow-overlay: 0 10px 40px rgba(0, 0, 0, 0.16);
--shadow-overlay-dark: 0 12px 48px rgba(0, 0, 0, 0.45);
--accent-glow: 0 0 12px rgba(var(--primary-color-rgb), .35);
--fast: 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--normal: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--slow: 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--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-relaxed: 2.0;
--link-opacity-normal: .1;
--link-opacity-hover: .18;
--link-opacity-unresolved: .05;
--link-opacity-unresolved-hover: .12;
--theme-folder-opacity: .12;
--heading-text-multiplier: .85;
--heading-bg-opacity: .2;
--heading-pad-y: 0.2em;
--heading-pad-x: 0.5em;
--heading-font: inherit;
/* Typography refinement tokens */
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0em;
/* Heading scale multipliers for calc() operations */
--heading-scale-1: 1.25;
--heading-scale-2: 1.1;
--heading-scale-3: 1.0;
--heading-scale-4: 0.8;
--heading-scale-5: 0.75;
--heading-scale-6: 0.6;
/* Heading horizontal padding scales */
--heading-scale-x-1: 1.6;
--heading-scale-x-2: 1.5;
--heading-scale-x-3: 1.5;
--heading-scale-x-4: 1.2;
--heading-scale-x-5: 1.2;
--heading-scale-x-6: 1.1;
--outline-item-spacing: .5em;
--layer-status-bar: 1000;
--checklist-done-color: var(--emphasis-color);
--checklist-done-decoration: line-through;
/* Apple sheet curve + standard durations (iOS-style overlays) */
--ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
--dur-instant: 0.12s;
--dur-quick: 0.22s;
--dur-modal: 0.34s;
--dur-sheet: 0.42s;
--transition-ui: 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-bounce: 0.3s var(--ease-bounce-md);
--transition-callout-link: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.18s, color 0.18s;
--transition-depth: box-shadow 0.2s var(--ease-bounce-sm), transform 0.2s var(--ease-bounce-sm);
/* ===== WHIMSY ANIMATION TOKENS ===== */
/* Easing Curves - Bounce Intensities */
--ease-bounce-sm: cubic-bezier(0.175, 0.885, 0.32, 1.2);
--ease-bounce-md: cubic-bezier(0.175, 0.885, 0.32, 1.5);
--ease-bounce-lg: cubic-bezier(0.175, 0.885, 0.32, 1.8);
--ease-bounce-xl: cubic-bezier(0.175, 0.885, 0.32, 2.2);
--ease-overshoot: cubic-bezier(0.68, -0.3, 0.32, 1.3);
/* Animation Durations */
--whimsy-micro: 0.15s; /* Checkboxes, tiny elements */
--whimsy-fast: 0.25s; /* Popups, tooltips */
--whimsy-normal: 0.35s; /* Most UI elements */
--whimsy-slow: 0.5s; /* Large containers */
/* Hover Scales */
--whimsy-scale-emphasis: 1.1; /* Icons, small interactive */
--whimsy-scale-pop: 1.15; /* Special attention items */
/* Opacity Tokens */
--opacity-subtle: 0.1;
--opacity-divider: 0.15;
--opacity-overlay: 0.2;
--opacity-border: 0.45;
--opacity-hover: 0.08;
--opacity-active: 0.12;
--opacity-light-overlay: 0.3;
/* Border Tokens */
--border-thin: 1px;
--border-thick: 2px;
--border-heavy: 3px;
/* Radius Tokens */
--radius-pill: 100px;
/* Height Tokens */
--height-button: 34px;
--height-button-sm: 32px;
--height-input: 38px;
/* Glass Surface Tokens */
--glass-bg: rgba(var(--background-secondary-rgb), 0.6);
--glass-border: rgba(255, 255, 255, 0.2);
}
/* Width & line-height pipeline — must live on body, not :root:
Style Settings injects --line-width / --editor-line-height on body,
and Obsidian's own --file-line-width default is body-scoped. */
body {
--line-normal: var(--editor-line-height, 1.6);
--file-line-width: var(--line-width, 64ch);
--editor-max-width: var(--line-width, 64ch);
--reading-max-width: var(--line-width, 64ch);
}
/* ========================================= */
/* SEASONAL THEMES */
/* ========================================= */
/* --- Shared: All Seasonal Themes --- */
.academia-theme,
.theme-light.iceberg-theme, .theme-dark.iceberg-theme,
.theme-light.twilight-theme, .theme-dark.twilight-theme,
.theme-light.autumn-theme, .theme-dark.autumn-theme,
.theme-light.winter-theme, .theme-dark.winter-theme,
.theme-light.spring-theme, .theme-dark.spring-theme,
.theme-light.summer-theme, .theme-dark.summer-theme,
.theme-light.paper-theme, .theme-dark.paper-theme,
.theme-light.melange-theme, .theme-dark.melange-theme {
--setting-items-background: var(--background-secondary);
}
/* --- Academia Theme --- */
.academia-theme {
--accent-h: 30;
--accent-s: 45%;
--accent-l: 50%;
--background-primary: #5C4243;
--background-primary-rgb: 92, 66, 67;
--background-secondary: #513A3B;
--background-secondary-rgb: 81, 58, 59;
--background-secondary-alt: #443131;
--text-normal: #C7B3A8;
--text-normal-rgb: 199, 179, 168;
--text-muted: #baa39d;
--emphasis-color: #a8522d;
--emphasis-color-light: #C6AD75;
--primary-color: #C6AD75;
--primary-color-rgb: 198, 173, 117;
--primary-color-dark: #947E5A;
--interactive-accent: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: #d78a68;
--link-color-hover: #a8522d;
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--divider-color: rgba(0, 0, 0, var(--opacity-border));
--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: var(--text-normal);
--code-comment: #A88B84;
--code-function: #C6AD75;
--code-important: #D7BDBC;
--code-keyword: #C6AD75;
--code-property: #C6AD75;
--code-punctuation: #A88B84;
--code-string: #dd6f1d;
--code-tag: #a58f6b;
--code-value: #a58f6b;
--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;
--heading-text-multiplier: 1.15;
--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: #ff2d2d;
--callout-danger-rgb: 153, 0, 0;
--callout-cite: #BBADFF;
--callout-cite-rgb: 187, 173, 255;
--callout-video: #57E6FF;
--callout-video-rgb: 87, 230, 255;
--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);
}
/* --- Iceberg Theme --- */
.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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--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;
--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: #1bc9e1;
--callout-video-rgb: 87, 217, 235;
--callout-quote: #b0c5f6;
--callout-quote-rgb: 226, 234, 252;
--highlight-bg: #8a9fc2;
--highlight-bg-rgb: 168, 184, 214;
--highlight-bg-dark: #8a9fc2;
--highlight-bg-dark-color: #1a2535;
--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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--code-comment: #656987;
--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;
--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: #495285;
--callout-quote-rgb: 29, 32, 51;
--highlight-bg: #1f2635;
--highlight-bg-dark: #2a354a;
--highlight-bg-dark-color: #2a354a;
--highlight-bg-light-color: #8a9fc2;
--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 --- */
.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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--emphasis-color-light);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--code-comment: #8883a2;
--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: #d8b55d;
--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;
--highlight-bg: #d4c9e8;
--highlight-bg-rgb: 212, 201, 232;
--highlight-bg-dark: #bfafe0;
--highlight-bg-dark-color: #2a2438;
--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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--emphasis-color-light);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--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;
--highlight-bg: #241f30;
--highlight-bg-dark: #352b48;
--highlight-bg-dark-color: #352b48;
--highlight-bg-light-color: #D6BCFA;
--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 --- */
.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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: #d36039;
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--code-comment: #707592;
--code-function: #d36039;
--code-important: #ae4e36;
--code-keyword: #5387b0;
--code-property: #798d5d;
--code-punctuation: rgba(61, 46, 26, .7);
--code-string: #85829e;
--code-tag: #c36686;
--code-value: #6f8880;
--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;
--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;
--highlight-bg: #d6b07b;
--highlight-bg-rgb: 232, 200, 154;
--highlight-bg-dark: #c9a772;
--highlight-bg-dark-color: #2d1f0e;
--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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--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;
--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;
--highlight-bg: #3a2f20;
--highlight-bg-dark: #5a4430;
--highlight-bg-dark-color: #5a4430;
--highlight-bg-light-color: #f2c088;
--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 --- */
.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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--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: #2d5a7a;
--heading-primary-rgb: 45, 90, 122;
--heading-secondary: #8b3a52;
--heading-secondary-rgb: 139, 58, 82;
--heading-tertiary: #3d5e4d;
--heading-tertiary-rgb: 61, 94, 77;
--heading-quaternary: #5a4d75;
--heading-quaternary-rgb: 90, 77, 117;
--heading-quinary: #4d6b80;
--heading-quinary-rgb: 77, 107, 128;
--heading-senary: #6b4d5a;
--heading-senary-rgb: 107, 77, 90;
--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;
--highlight-bg: #7eb0d6;
--highlight-bg-rgb: 158, 197, 230;
--highlight-bg-dark: #7aaddb;
--highlight-bg-dark-color: #0f2535;
--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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--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: #7eb3d9;
--heading-primary-rgb: 126, 179, 217;
--heading-secondary: #d98099;
--heading-secondary-rgb: 217, 128, 153;
--heading-tertiary: #7db399;
--heading-tertiary-rgb: 125, 179, 153;
--heading-quaternary: #a89dd9;
--heading-quaternary-rgb: 168, 157, 217;
--heading-quinary: #99b8cc;
--heading-quinary-rgb: 153, 184, 204;
--heading-senary: #c299ad;
--heading-senary-rgb: 194, 153, 173;
--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;
--highlight-bg: #1f2d3a;
--highlight-bg-dark: #2a3f52;
--highlight-bg-dark-color: #2a3f52;
--highlight-bg-light-color: #9ec5e6;
--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 --- */
.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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: #6b963f;
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--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: #da6040;
--code-tag: #2e5a8b;
--code-value: #ad7e0a;
--heading-primary: #72a043;
--heading-secondary: #a05a8b;
--heading-tertiary: #ff7765;
--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;
--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: #77d531;
--callout-quote-rgb: 184, 233, 148;
--highlight-bg: #a8d67a;
--highlight-bg-rgb: 200, 230, 168;
--highlight-bg-dark: #a6d47a;
--highlight-bg-dark-color: #1a2f0e;
--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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--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;
--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: #5a5a5a;
--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;
--highlight-bg: #252f20;
--highlight-bg-dark: #354530;
--highlight-bg-dark-color: #354530;
--highlight-bg-light-color: #b8d982;
--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 --- */
.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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: #c07d00;
--code-property: #8b4513;
--code-punctuation: rgba(61, 26, 46, .7);
--code-string: #0c7a93;
--code-tag: #0a6b5d;
--code-value: indigo;
--heading-primary: #ff6b9d;
--heading-secondary: #00b2a2;
--heading-tertiary: #fc7b00;
--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;
--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: #27cee5;
--callout-video-rgb: 87, 217, 235;
--callout-quote: #f2bf00;
--callout-quote-rgb: 255, 248, 220;
--highlight-bg: #ff99bb;
--highlight-bg-rgb: 255, 201, 224;
--highlight-bg-dark: #f5a8c9;
--highlight-bg-dark-color: #4a1530;
--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;
--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: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--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: var(--text-normal);
--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;
--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;
--highlight-bg: #3a2030;
--highlight-bg-dark: #5a3345;
--highlight-bg-dark-color: #5a3345;
--highlight-bg-light-color: #f5a8c9;
--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 --- */
.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;
--background-secondary-rgb: 229, 227, 224;
--background-secondary-alt: #DBD9D6;
--text-normal: #656360;
--text-normal-rgb: 101, 99, 96;
--text-muted: #7d7b78;
--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, var(--opacity-hover));
--text-selection: rgba(209, 69, 50, 0.15);
--scrollbar-thumb: rgba(0, 0, 0, var(--opacity-divider));
--scrollbar-track: rgba(0, 0, 0, 0.03);
--code-background: #E8E7E3;
--code-normal: #1C1C1E;
--code-comment: #7d7d83;
--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;
--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;
--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;
--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);
}
/* --- Calm Focus Theme --- */
/* Low-chroma, Braun/Muji-quiet palette. Single sage-clay accent, warm-neutral surfaces. */
.calm-focus-theme {
--accent-h: 150;
--accent-s: 14%;
--accent-l: 44%;
}
.theme-light.calm-focus-theme {
--background-primary: #F5F2EE;
--background-primary-rgb: 245, 242, 238;
--background-secondary: #EDE9E3;
--background-secondary-rgb: 237, 233, 227;
--background-secondary-alt: #E3DED6;
--text-normal: #2E2C29;
--text-normal-rgb: 46, 44, 41;
--text-muted: #7A7671;
--text-faint: #B5B0A9;
--bold-color: #3D5C4F;
--italic-color: #4A6A5B;
--emphasis-color: #4A6A5B;
--emphasis-color-light: #5A7E6D;
--primary-color: #5E7D6E;
--primary-color-rgb: 94, 125, 110;
--primary-color-dark: #3D5C4F;
--interactive-accent: #5E7D6E;
--interactive-accent-hover: #3D5C4F;
--link-color: #5E7D6E;
--link-color-hover: #3D5C4F;
--link-unresolved-color: #8AA397;
--blockquote-border-color: #7A9D8C;
--checkbox-color: #5E7D6E;
--text-accent: #5E7D6E;
--divider-color: rgba(0, 0, 0, var(--opacity-hover));
--text-selection: rgba(94, 125, 110, 0.15);
--scrollbar-thumb: rgba(0, 0, 0, var(--opacity-divider));
--scrollbar-track: rgba(0, 0, 0, 0.03);
--code-background: #E8E4DE;
--code-normal: #2E2C29;
--code-comment: #7f7a73;
--code-function: #4A6A5B;
--code-important: #5E7D6E;
--code-keyword: #2E2C29;
--code-property: #4A6A5B;
--code-punctuation: #A09C96;
--code-string: #5E7D6E;
--code-tag: #628575;
--code-value: #2E2C29;
--heading-primary: #3D5C4F;
--heading-secondary: #4A6A5B;
--heading-tertiary: #5E7D6E;
--heading-quaternary: #4A4843;
--heading-quinary: #5A5753;
--heading-senary: #6B6762;
--heading-primary-rgb: 61, 92, 79;
--heading-secondary-rgb: 74, 106, 91;
--heading-tertiary-rgb: 94, 125, 110;
--heading-quaternary-rgb: 74, 72, 67;
--heading-quinary-rgb: 90, 87, 83;
--heading-senary-rgb: 107, 103, 98;
--callout-note: #5E7D6E;
--callout-note-rgb: 94, 125, 110;
--callout-info: #5E7D6E;
--callout-info-rgb: 94, 125, 110;
--callout-warning: #8C7B52;
--callout-warning-rgb: 140, 123, 82;
--callout-faq: #5E7D6E;
--callout-faq-rgb: 94, 125, 110;
--callout-question: #5E7D6E;
--callout-question-rgb: 94, 125, 110;
--callout-success: #4A7A5C;
--callout-success-rgb: 74, 122, 92;
--callout-danger: #8C5252;
--callout-danger-rgb: 140, 82, 82;
--callout-example: #5E7D6E;
--callout-example-rgb: 94, 125, 110;
--callout-cite: #7A7671;
--callout-cite-rgb: 122, 118, 113;
--callout-video: #5E7D6E;
--callout-video-rgb: 94, 125, 110;
--callout-quote: #7A9D8C;
--callout-quote-rgb: 122, 157, 140;
--highlight-bg: rgba(94, 125, 110, 0.18);
--highlight-bg-rgb: 94, 125, 110;
--highlight-bg-dark: rgba(94, 125, 110, 0.28);
--tab-bg-inactive: transparent;
--tab-bg-inactive-hover: rgba(0, 0, 0, 0.04);
}
.theme-dark.calm-focus-theme {
--background-primary: #1E1E1C;
--background-primary-rgb: 30, 30, 28;
--background-secondary: #282825;
--background-secondary-rgb: 40, 40, 37;
--background-secondary-alt: #323230;
--text-normal: #D5D0C9;
--text-normal-rgb: 213, 208, 201;
--text-muted: #8A8680;
--text-faint: #524F4A;
--bold-color: #E2DDD6;
--italic-color: #88AE99;
--emphasis-color: #88AE99;
--emphasis-color-light: #9DC0AE;
--primary-color: #7FA98F;
--primary-color-rgb: 127, 169, 143;
--primary-color-dark: #5E8A75;
--interactive-accent: #7FA98F;
--interactive-accent-hover: #9DC0AE;
--link-color: #7FA98F;
--link-color-hover: #9DC0AE;
--link-unresolved-color: #5E7D6E;
--blockquote-border-color: #7FA98F;
--checkbox-color: #7FA98F;
--text-accent: #7FA98F;
--divider-color: rgba(255, 255, 255, 0.07);
--text-selection: rgba(127, 169, 143, 0.18);
--scrollbar-thumb: rgba(255, 255, 255, 0.12);
--scrollbar-track: rgba(255, 255, 255, 0.02);
--code-background: #242422;
--code-normal: #C8C3BC;
--code-comment: #726e69;
--code-function: #88AE99;
--code-important: #7FA98F;
--code-keyword: #D5D0C9;
--code-property: #9DC0AE;
--code-punctuation: #6B6762;
--code-string: #7FA98F;
--code-tag: #88AE99;
--code-value: #C8C3BC;
--heading-primary: #9DC0AE;
--heading-secondary: #88AE99;
--heading-tertiary: #7FA98F;
--heading-quaternary: #B5B0A9;
--heading-quinary: #9E9990;
--heading-senary: #8A8680;
--heading-primary-rgb: 157, 192, 174;
--heading-secondary-rgb: 136, 174, 153;
--heading-tertiary-rgb: 127, 169, 143;
--heading-quaternary-rgb: 181, 176, 169;
--heading-quinary-rgb: 158, 153, 144;
--heading-senary-rgb: 138, 134, 128;
--callout-note: #7FA98F;
--callout-note-rgb: 127, 169, 143;
--callout-info: #7FA98F;
--callout-info-rgb: 127, 169, 143;
--callout-warning: #C4A96A;
--callout-warning-rgb: 196, 169, 106;
--callout-faq: #7FA98F;
--callout-faq-rgb: 127, 169, 143;
--callout-question: #7FA98F;
--callout-question-rgb: 127, 169, 143;
--callout-success: #72A882;
--callout-success-rgb: 114, 168, 130;
--callout-danger: #C47272;
--callout-danger-rgb: 196, 114, 114;
--callout-example: #7FA98F;
--callout-example-rgb: 127, 169, 143;
--callout-cite: #8A8680;
--callout-cite-rgb: 138, 134, 128;
--callout-video: #7FA98F;
--callout-video-rgb: 127, 169, 143;
--callout-quote: #88AE99;
--callout-quote-rgb: 136, 174, 153;
--highlight-bg: rgba(127, 169, 143, 0.18);
--highlight-bg-rgb: 127, 169, 143;
--highlight-bg-dark: rgba(127, 169, 143, 0.28);
--highlight-bg-dark-color: rgba(127, 169, 143, 0.45);
--highlight-bg-light-color: var(--text-normal);
--tab-bg-inactive: transparent;
--tab-bg-inactive-hover: rgba(255, 255, 255, 0.04);
}
/* --- Melange Theme --- */
/* Palette adapted from Baseline by aaaaalexis (github.com/aaaaalexis/obsidian-baseline),
itself derived from melange-nvim. */
.melange-theme {
--accent-h: 29;
--accent-s: 100%;
--accent-l: 37%;
}
.theme-light.melange-theme {
--background-primary: #f0ecea;
--background-primary-rgb: 240, 236, 234;
--background-secondary: #e9e1db;
--background-secondary-rgb: 233, 225, 219;
--background-secondary-alt: #e0d4ca;
--text-normal: #54433a;
--text-normal-rgb: 84, 67, 58;
--text-muted: #7d6658;
--text-faint: #a98a78;
--emphasis-color: #bc5c00;
--emphasis-color-light: #d97708;
--primary-color: #bc5c00;
--primary-color-rgb: 188, 92, 0;
--primary-color-dark: #944800;
--interactive-accent: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--divider-color: #d6c0b388;
--text-selection: #eedbc4;
--scrollbar-thumb: rgba(176, 155, 143, .45);
--scrollbar-track: rgba(240, 236, 234, .2);
--code-background: #e9e1db;
--code-normal: var(--text-normal);
--code-comment: #8f7663;
--code-function: #607fb1;
--code-important: #bc5c00;
--code-keyword: #a65ebb;
--code-property: #658686;
--code-punctuation: #7d6658;
--code-string: #608a64;
--code-tag: #bc6074;
--code-value: #967c26;
/* Baseline colorful-headings order: red, orange, yellow, green, blue,
purple — text softened 75/25 toward --text-normal like Baseline does */
--heading-primary: color-mix(in srgb, #c77b8b 75%, var(--text-normal));
--heading-secondary: color-mix(in srgb, #bc5c00 75%, var(--text-normal));
--heading-tertiary: color-mix(in srgb, #a08428 75%, var(--text-normal));
--heading-quaternary: color-mix(in srgb, #6e9b72 75%, var(--text-normal));
--heading-quinary: color-mix(in srgb, #7892bd 75%, var(--text-normal));
--heading-senary: color-mix(in srgb, #ad6bc0 75%, var(--text-normal));
--heading-primary-rgb: 199, 123, 139;
--heading-secondary-rgb: 188, 92, 0;
--heading-tertiary-rgb: 160, 132, 40;
--heading-quaternary-rgb: 110, 155, 114;
--heading-quinary-rgb: 120, 146, 189;
--heading-senary-rgb: 173, 107, 192;
--callout-note: #7892bd;
--callout-note-rgb: 120, 146, 189;
--callout-info: #739797;
--callout-info-rgb: 115, 151, 151;
--callout-warning: #a08428;
--callout-warning-rgb: 160, 132, 40;
--callout-success: #6e9b72;
--callout-success-rgb: 110, 155, 114;
--callout-danger: #c77b8b;
--callout-danger-rgb: 199, 123, 139;
--callout-example: #bc5c00;
--callout-example-rgb: 188, 92, 0;
--callout-cite: #ad6bc0;
--callout-cite-rgb: 173, 107, 192;
--callout-video: #d65cbc;
--callout-video-rgb: 214, 92, 188;
--callout-quote: #a98a78;
--callout-quote-rgb: 169, 138, 120;
--highlight-bg: #ecd9a8;
--highlight-bg-rgb: 236, 217, 168;
--highlight-bg-dark: #e2c98a;
--highlight-bg-dark-color: #3a2e26;
--surface-accent: #f0ecea;
--surface-accent-rgb: 240, 236, 234;
--surface-dark: #292522;
--surface-dark-rgb: 41, 37, 34;
--tab-bg-inactive: rgba(240, 236, 234, .08);
--tab-bg-inactive-hover: rgba(240, 236, 234, .12);
}
.theme-dark.melange-theme {
--accent-h: 28;
--accent-s: 71%;
--accent-l: 63%;
--background-primary: #292522;
--background-primary-rgb: 41, 37, 34;
--background-secondary: #34302c;
--background-secondary-rgb: 52, 48, 44;
--background-secondary-alt: #403a36;
--text-normal: #ece1d7;
--text-normal-rgb: 236, 225, 215;
--text-muted: #c1a78e;
--text-faint: #867462;
--emphasis-color: #e49b5d;
--emphasis-color-light: #efb178;
--primary-color: #e49b5d;
--primary-color-rgb: 228, 155, 93;
--primary-color-dark: #c97e41;
--interactive-accent: var(--primary-color);
--interactive-accent-hover: var(--primary-color-dark);
--link-color: var(--primary-color);
--link-color-hover: var(--primary-color-dark);
--link-unresolved-color: var(--primary-color);
--blockquote-border-color: var(--primary-color);
--checkbox-color: var(--primary-color);
--text-accent: var(--primary-color-dark);
--divider-color: #63585188;
--text-selection: #45382c;
--scrollbar-thumb: rgba(228, 155, 93, .35);
--scrollbar-track: rgba(41, 37, 34, .2);
--code-background: #34302c;
--code-normal: var(--text-normal);
--code-comment: #8f7c69;
--code-function: #7f91b2;
--code-important: #e49b5d;
--code-keyword: #b380b0;
--code-property: #7b9695;
--code-punctuation: #c1a78e;
--code-string: #78997a;
--code-tag: #bd8183;
--code-value: #d2be73;
/* Baseline colorful-headings order: red, orange, yellow, green, blue,
purple — text softened 75/25 toward --text-normal like Baseline does */
--heading-primary: color-mix(in srgb, #bd8183 75%, var(--text-normal));
--heading-secondary: color-mix(in srgb, #e49b5d 75%, var(--text-normal));
--heading-tertiary: color-mix(in srgb, #d2be73 75%, var(--text-normal));
--heading-quaternary: color-mix(in srgb, #78997a 75%, var(--text-normal));
--heading-quinary: color-mix(in srgb, #7f91b2 75%, var(--text-normal));
--heading-senary: color-mix(in srgb, #b380b0 75%, var(--text-normal));
--heading-primary-rgb: 189, 129, 131;
--heading-secondary-rgb: 228, 155, 93;
--heading-tertiary-rgb: 210, 190, 115;
--heading-quaternary-rgb: 120, 153, 122;
--heading-quinary-rgb: 127, 145, 178;
--heading-senary-rgb: 179, 128, 176;
--callout-note: #7f91b2;
--callout-note-rgb: 127, 145, 178;
--callout-info: #7b9695;
--callout-info-rgb: 123, 150, 149;
--callout-warning: #d2be73;
--callout-warning-rgb: 210, 190, 115;
--callout-success: #78997a;
--callout-success-rgb: 120, 153, 122;
--callout-danger: #bd8183;
--callout-danger-rgb: 189, 129, 131;
--callout-example: #e49b5d;
--callout-example-rgb: 228, 155, 93;
--callout-cite: #b380b0;
--callout-cite-rgb: 179, 128, 176;
--callout-video: #c070ae;
--callout-video-rgb: 192, 112, 174;
--callout-quote: #867462;
--callout-quote-rgb: 134, 116, 98;
--highlight-bg: #574a33;
--highlight-bg-rgb: 210, 190, 115;
--highlight-bg-dark: #574a33;
--highlight-bg-dark-color: #6b5a3d;
--highlight-bg-light-color: #d2be73;
--surface-accent: #403a36;
--surface-accent-rgb: 64, 58, 54;
--surface-dark: #292522;
--surface-dark-rgb: 41, 37, 34;
--tab-bg-inactive: rgba(41, 37, 34, .15);
--tab-bg-inactive-hover: rgba(41, 37, 34, .25);
}
/* 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);
--folder-heading-rgb: var(--heading-primary-rgb);
}
/* 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 :is(.markdown-rendered, .markdown-preview-view) table th {
background-color: #0f0f0f !important;
color: #e8e8e8 !important;
border-block-end: var(--border-thick) solid rgba(232, 232, 232, .2) !important;
}
.theme-dark.enable-monochrome :is(.markdown-rendered, .markdown-preview-view) table thead tr {
background-color: #0f0f0f !important;
}
.theme-dark.enable-monochrome .markdown-rendered table tbody tr {
border-block-end: var(--border-thin) solid rgba(232, 232, 232, .1);
}
.theme-dark.enable-monochrome :is(
.setting-item-name,
.setting-item-description,
.setting-item-info,
.setting-item-control,
.vertical-tab-content,
.horizontal-tab-content,
.modal-content,
.prompt-instructions,
label,
.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-block-start: var(--border-thin) solid rgba(232, 232, 232, .1);
}
.theme-dark.enable-monochrome :is(
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select
) {
background-color: #0f0f0f !important;
border: var(--border-thin) solid rgba(232, 232, 232, .2) !important;
color: #e8e8e8 !important;
}
.theme-dark.enable-monochrome :is(
input[type="text"],
input[type="search"],
textarea,
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 :is(button, .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:hover,
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active :is(.vertical-tab-nav-item-title),
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active:hover :is(.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 :is(svg, .vertical-tab-nav-item-icon),
.theme-dark.enable-monochrome .vertical-tab-nav-item.is-active:hover :is(svg, .vertical-tab-nav-item-icon) {
color: #000000 !important;
stroke: #000000 !important;
background-color: inherit !important;
border-radius: var(--r1);
padding: 2px;
}
.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 :is(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 :is(svg) {
color: #e8e8e8 !important;
stroke: #e8e8e8 !important;
}
.theme-light.enable-monochrome :is(.markdown-rendered, .markdown-preview-view) table th {
background-color: #e0e0e0 !important;
color: #000000 !important;
border-block-end: var(--border-thick) solid rgba(0, 0, 0, .2) !important;
}
.theme-light.enable-monochrome :is(.markdown-rendered, .markdown-preview-view) table thead tr {
background-color: #e0e0e0 !important;
}
.theme-light.enable-monochrome :is(
.setting-item-name,
.setting-item-description,
.setting-item-info,
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:hover,
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active :is(.vertical-tab-nav-item-title),
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active:hover :is(.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 :is(svg, .vertical-tab-nav-item-icon),
.theme-light.enable-monochrome .vertical-tab-nav-item.is-active:hover :is(svg, .vertical-tab-nav-item-icon) {
color: #ffffff !important;
stroke: #ffffff !important;
}
.theme-dark.enable-monochrome :is(mark, .cm-highlight, mark:hover, .cm-highlight:hover) {
background-color: #d4af37 !important;
color: #000000 !important;
}
.theme-light.enable-monochrome :is(mark, .cm-highlight, mark:hover, .cm-highlight:hover) {
background-color: #ffeb3b !important;
color: #000000 !important;
}
/* ========================================= */
/* DEEP FOCUS MODE */
/* Science: sepia palette (Wang 2018), */
/* low chroma (Munsell), 68ch measure */
/* (Bringhurst), hierarchy by weight only */
/* ========================================= */
/* --- Shared neutralizations (same in light and dark) --- */
body.focus-mode {
/* All callout types collapse to a single muted tone */
--callout-note: var(--text-muted);
--callout-note-rgb: var(--text-normal-rgb);
--callout-info: var(--text-muted);
--callout-info-rgb: var(--text-normal-rgb);
--callout-warning: var(--text-muted);
--callout-warning-rgb: var(--text-normal-rgb);
--callout-success: var(--text-muted);
--callout-success-rgb: var(--text-normal-rgb);
--callout-danger: var(--text-muted);
--callout-danger-rgb: var(--text-normal-rgb);
--callout-example: var(--text-muted);
--callout-example-rgb: var(--text-normal-rgb);
--callout-cite: var(--text-muted);
--callout-cite-rgb: var(--text-normal-rgb);
--callout-video: var(--text-muted);
--callout-video-rgb: var(--text-normal-rgb);
--callout-quote: var(--text-muted);
--callout-quote-rgb: var(--text-normal-rgb);
/* Syntax highlighting collapses to neutral hierarchy */
--code-normal: var(--text-normal);
--code-comment: var(--text-faint);
--code-function: var(--text-normal);
--code-important: var(--text-normal);
--code-keyword: var(--text-normal);
--code-property: var(--text-normal);
--code-punctuation: var(--text-muted);
--code-string: var(--text-muted);
--code-tag: var(--text-normal);
--code-value: var(--text-normal);
/* Force-bind seasonal accent chains to the focus-mode accent */
--primary-color: var(--interactive-accent);
--primary-color-dark: var(--interactive-accent-hover);
--emphasis-color: var(--interactive-accent);
--emphasis-color-light: var(--interactive-accent-hover);
--checkbox-color: var(--interactive-accent);
--blockquote-border-color: var(--text-muted);
--link-unresolved-color: var(--text-muted);
--folder-color: var(--text-muted);
}
/* --- Sepia palette: light --- */
body.focus-mode.theme-light {
--background-primary: #F6EFE0;
--background-primary-rgb: 246, 239, 224;
--background-secondary: #EDE5D2;
--background-secondary-rgb: 237, 229, 210;
--background-secondary-alt: #E5DCC4;
--setting-items-background: var(--background-secondary);
--text-normal: #3A3329;
--text-normal-rgb: 58, 51, 41;
--text-muted: #7A7060;
--text-faint: #A39A88;
--interactive-accent: #6B7F5C;
--interactive-accent-rgb: 107, 127, 92;
--interactive-accent-hover: #5A6E4D;
--text-accent: #6B7F5C;
--text-accent-hover: #5A6E4D;
--text-selection: rgba(107, 127, 92, 0.18);
--link-color: #5A6E4D;
--link-color-hover: #4A5E3D;
/* Native Obsidian accent HSL — sage */
--accent-h: 94;
--accent-s: 16%;
--accent-l: 43%;
--primary-color-rgb: 107, 127, 92;
/* Code surface */
--code-background: var(--background-secondary);
/* Scrollbars + selection surfaces */
--scrollbar-thumb: rgba(58, 51, 41, 0.18);
--scrollbar-track: rgba(58, 51, 41, 0.05);
/* Highlights */
--highlight-bg: #E8DDB8;
--highlight-bg-rgb: 232, 221, 184;
--highlight-bg-dark: #D6C99C;
--highlight-bg-dark-color: #2D1F0E;
/* Tabs + surfaces */
--tab-bg-inactive: transparent;
--tab-bg-inactive-hover: rgba(58, 51, 41, 0.05);
--surface-accent: var(--background-secondary);
--surface-accent-rgb: 237, 229, 210;
--surface-dark: #36342E;
--surface-dark-rgb: 54, 52, 46;
/* Collapse all heading levels to one neutral tone */
--heading-primary: #2D2820;
--heading-primary-rgb: 45, 40, 32;
--heading-secondary: #2D2820;
--heading-secondary-rgb: 45, 40, 32;
--heading-tertiary: #2D2820;
--heading-tertiary-rgb: 45, 40, 32;
--heading-quaternary: #2D2820;
--heading-quaternary-rgb: 45, 40, 32;
--heading-quinary: #2D2820;
--heading-quinary-rgb: 45, 40, 32;
--heading-senary: #2D2820;
--heading-senary-rgb: 45, 40, 32;
--heading-bg-opacity: 0;
/* Layout */
--file-line-width: 68ch;
--editor-max-width: 68ch;
--reading-max-width: 68ch;
/* Structural chrome */
--divider-color: rgba(58, 51, 41, 0.1);
--background-modifier-border: rgba(58, 51, 41, 0.1);
}
/* --- Warm dark palette --- */
body.focus-mode.theme-dark {
--background-primary: #1F1B16;
--background-primary-rgb: 31, 27, 22;
--background-secondary: #2A2520;
--background-secondary-rgb: 42, 37, 32;
--background-secondary-alt: #332D26;
--setting-items-background: var(--background-secondary);
--text-normal: #D8CBB3;
--text-normal-rgb: 216, 203, 179;
--text-muted: #8A7E68;
--text-faint: #5C5246;
--interactive-accent: #A39873;
--interactive-accent-rgb: 163, 152, 115;
--interactive-accent-hover: #BFB089;
--text-accent: #A39873;
--text-accent-hover: #BFB089;
--text-selection: rgba(163, 152, 115, 0.20);
--link-color: #BFB089;
--link-color-hover: #D4C9A0;
/* Native Obsidian accent HSL — warm sand */
--accent-h: 46;
--accent-s: 21%;
--accent-l: 55%;
--primary-color-rgb: 163, 152, 115;
/* Code surface */
--code-background: var(--background-secondary);
/* Scrollbars + selection surfaces */
--scrollbar-thumb: rgba(216, 203, 179, 0.18);
--scrollbar-track: rgba(216, 203, 179, 0.05);
/* Highlights */
--highlight-bg: #4A4030;
--highlight-bg-rgb: 74, 64, 48;
--highlight-bg-dark: #5C5040;
--highlight-bg-dark-color: #E8DCC4;
/* Tabs + surfaces */
--tab-bg-inactive: transparent;
--tab-bg-inactive-hover: rgba(216, 203, 179, 0.05);
--surface-accent: var(--background-secondary);
--surface-accent-rgb: 42, 37, 32;
--surface-dark: #1A1612;
--surface-dark-rgb: 26, 22, 18;
/* Collapse all heading levels to one warm tone */
--heading-primary: #E8DCC4;
--heading-primary-rgb: 232, 220, 196;
--heading-secondary: #E8DCC4;
--heading-secondary-rgb: 232, 220, 196;
--heading-tertiary: #E8DCC4;
--heading-tertiary-rgb: 232, 220, 196;
--heading-quaternary: #E8DCC4;
--heading-quaternary-rgb: 232, 220, 196;
--heading-quinary: #E8DCC4;
--heading-quinary-rgb: 232, 220, 196;
--heading-senary: #E8DCC4;
--heading-senary-rgb: 232, 220, 196;
--heading-bg-opacity: 0;
/* Layout */
--file-line-width: 68ch;
--editor-max-width: 68ch;
--reading-max-width: 68ch;
/* Structural chrome */
--divider-color: rgba(216, 203, 179, 0.1);
--background-modifier-border: rgba(216, 203, 179, 0.1);
}
/* --- Kill heading backgrounds and colour hierarchy --- */
body.focus-mode :is(
.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 .cm-header-1,
.markdown-source-view.mod-cm6 .cm-line .cm-header-2,
.markdown-source-view.mod-cm6 .cm-line .cm-header-3,
.markdown-source-view.mod-cm6 .cm-line .cm-header-4,
.markdown-source-view.mod-cm6 .cm-line .cm-header-5,
.markdown-source-view.mod-cm6 .cm-line .cm-header-6
) {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
padding-inline: 0 !important;
border-radius: 0 !important;
color: var(--heading-primary) !important;
}
/* --- Mute callout decorations — structure survives, colour noise goes --- */
body.focus-mode :is(.callout, .cm-callout) {
background-color: var(--background-secondary) !important;
border-inline-start-color: var(--text-muted) !important;
}
body.focus-mode .callout .callout-title {
color: var(--text-normal) !important;
text-shadow: none !important;
}
body.focus-mode .callout .callout-icon {
color: var(--text-muted) !important;
}
/* --- Mute tag chips --- */
body.focus-mode.tag-chips {
--tag-color: var(--text-faint);
--tag-color-hover: var(--text-muted);
--tag-border-color: rgba(58, 51, 41, 0.15);
--tag-border-color-hover: rgba(58, 51, 41, 0.25);
}
body.focus-mode.theme-dark.tag-chips {
--tag-border-color: rgba(216, 203, 179, 0.12);
--tag-border-color-hover: rgba(216, 203, 179, 0.22);
}
/* --- Plain underline links — override glow and wavy styles --- */
body.focus-mode :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-shadow: none !important;
box-shadow: none !important;
background: none !important;
background-color: transparent !important;
text-decoration: underline !important;
text-decoration-style: solid !important;
text-decoration-color: var(--link-color) !important;
animation: none !important;
}
/* --- Kill all transitions & animations --- */
body.focus-mode * {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
}
/* --- Hide status bar + ribbon (escape hatch: focus-mode-keep-chrome restores them) --- */
body.focus-mode:not(.focus-mode-keep-chrome) .status-bar {
display: none !important;
}
body.focus-mode:not(.focus-mode-keep-chrome) .workspace-ribbon.side-dock-ribbon {
display: none !important;
}
/* --- Mute tab bar — active tab gets a subtle accent underline only --- */
body.focus-mode .workspace-tab-header.is-active {
background-color: transparent !important;
border-block-end: 2px solid var(--interactive-accent) !important;
box-shadow: none !important;
}
body.focus-mode .workspace-tab-header:not(.is-active) {
background-color: transparent !important;
opacity: 0.55;
}
/* --- Mute frontmatter / properties pane --- */
body.focus-mode .metadata-container {
opacity: 0.6;
}
body.focus-mode .metadata-container:hover {
opacity: 1;
transition: opacity 0.15s ease !important;
}
body.focus-mode .metadata-container .metadata-property-key {
color: var(--text-muted) !important;
}
/* ---- Sub-toggle: Typewriter Dimming ---- */
body.focus-mode.focus-mode-dim-paragraphs .markdown-source-view.mod-cm6 .cm-line:not(.cm-active):not(.HyperMD-header-1):not(.HyperMD-header-2):not(.HyperMD-header-3):not(.HyperMD-header-4):not(.HyperMD-header-5):not(.HyperMD-header-6) {
opacity: 0.5;
}
body.focus-mode.focus-mode-dim-paragraphs .markdown-source-view.mod-cm6 .cm-line.cm-active {
opacity: 1;
}
body.focus-mode.focus-mode-dim-paragraphs .markdown-preview-view p {
opacity: 0.55;
}
body.focus-mode.focus-mode-dim-paragraphs .markdown-preview-view p:hover {
opacity: 1;
transition: opacity 0.15s ease !important;
}
/* ---- Sub-toggle: Hide Sidebar Panels ---- */
body.focus-mode.focus-mode-hide-sidebars .workspace-split.mod-left-split,
body.focus-mode.focus-mode-hide-sidebars .workspace-split.mod-right-split {
display: none !important;
}
/* Global Transitions */
body {
transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.markdown-source-view.mod-cm6 .cm-content,
.markdown-source-view.mod-cm6 .cm-line {
line-height: var(--line-normal);
}
/* 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;
/* Container query context: tabs adapt to THIS pane's width, not the window's */
container-type: inline-size;
container-name: tabbar;
}
/* When the pane is narrow, drop tab titles so pills don't get squished into ellipsis soup */
@container tabbar (max-width: 280px) {
.workspace-tab-header-inner-title {
display: none;
}
.workspace-tab-header {
padding-inline: var(--s2) !important;
min-width: 0 !important;
}
}
body:not(.is-mobile).layout-card .workspace-tab-header-container-inner {
display: flex;
align-items: center;
height: 100%;
margin: 0;
padding: 0 10px;
gap: 6px;
}
body:not(.is-mobile).layout-card .workspace-tab-header {
background-color: rgba(var(--background-secondary-rgb), .3);
border-radius: var(--r3);
height: var(--height-input);
display: flex;
transition: background-color var(--transition-ui), transform var(--transition-ui), box-shadow var(--transition-ui), border-radius var(--transition-ui);
}
/* Contrast boost (when depth shadows disabled) */
body:not(.is-mobile):not(.depth-shadows).layout-card .workspace-tab-header {
background-color: rgba(var(--background-secondary-rgb), .2) !important;
}
body:not(.is-mobile):not(.depth-shadows).layout-card .workspace-tab-header.is-active {
background-color: var(--background-primary) !important;
border: none !important;
box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.15);
}
body:not(.is-mobile):not(.depth-shadows).layout-card .workspace-tab-header:not(.is-active):hover {
background-color: rgba(var(--background-secondary-rgb), 0.4);
}
/* Elevated active tab (when depth shadows enabled) */
body:not(.is-mobile).depth-shadows.layout-card .workspace-tab-header {
background-color: rgba(var(--background-secondary-rgb), .3);
}
body:not(.is-mobile).depth-shadows.layout-card .workspace-tab-header.is-active {
background-color: var(--background-primary) !important;
border: none !important;
transform: translateY(-2px) !important;
box-shadow: var(--depth-2);
}
body:not(.is-mobile).depth-shadows.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-inline-start: 5px;
padding-inline-end: 5px;
}
/* Fix Windows/Linux Buttons to be Transparent */
.mod-windows .titlebar-button,
.mod-linux .titlebar-button {
background-color: transparent !important;
transition: background-color var(--transition-ui);
}
.mod-windows .titlebar-button:hover,
.mod-linux .titlebar-button:hover {
background-color: rgba(var(--background-modifier-hover-rgb), 0.5) !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 {
inset-block-start: unset;
background-color: transparent !important;
}
/* UI Element Styling */
.workspace-leaf-content,
.nav-files-container {
contain: layout style;
}
.nav-files-container {
padding-inline: var(--s3) var(--s4) !important;
}
.vertical-tab-container {
background-color: var(--background-primary);
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-main);
overflow: hidden;
}
.theme-light .vertical-tab-container {
background-color: var(--background-primary);
}
.vertical-tab-nav-item {
padding-block: 12px;
padding-inline: 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 :is(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-inline-start-color: var(--primary-color);
}
.theme-dark .vertical-tab-nav-item.is-active,
.theme-dark .vertical-tab-nav-item.is-active :is(svg) {
background: var(--primary-color) !important;
color: white !important;
border-inline-start-color: var(--primary-color-dark) !important;
box-shadow: var(--shadow-3);
}
.vertical-tab-content {
padding-block: var(--s4);
padding-inline: var(--s4);
min-block-size: 400px;
background-color: var(--glass-bg);
border: var(--border-thin) solid var(--glass-border);
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-main);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.theme-dark .vertical-tab-content {
border-color: transparent;
background-color: rgba(var(--background-secondary-rgb), 0.85);
}
.theme-light .vertical-tab-content {
background-color: var(--background-primary);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.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-block-end: var(--s1);
}
.setting-item-description {
color: var(--text-normal);
opacity: .7;
font-size: .9em;
line-height: 1.4;
}
.vertical-tab-nav-item:focus {
outline: var(--border-thick) solid var(--primary-color);
outline-offset: calc(var(--border-thick) * -1);
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-inline-start: 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);
background: rgba(var(--primary-color-rgb), .05);
padding-block: 8px;
padding-inline: 12px;
transition: opacity var(--transition-ui);
}
.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(0.25, 0.46, 0.45, 0.94), background-color 0.18s, color 0.18s;
border: 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-inline-start: none !important;
font-weight: var(--weight-medium);
}
/* ========================================= */
/* HEADINGS */
/* ========================================= */
/* Custom Heading Font */
.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-reading-view h1,
.markdown-reading-view h2,
.markdown-reading-view h3,
.markdown-reading-view h4,
.markdown-reading-view h5,
.markdown-reading-view h6,
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
font-family: var(--heading-font);
}
/* Base heading styles (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-reading-view h1,
.markdown-reading-view h2,
.markdown-reading-view h3,
.markdown-reading-view h4,
.markdown-reading-view h5,
.markdown-reading-view h6,
.markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
display: inline-flex;
padding-block: var(--heading-pad-y);
padding-inline: var(--heading-pad-x);
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 var(--transition-ui), box-shadow var(--transition-ui);
margin: 0;
}
body:not(.is-mobile) :is(.markdown-preview-view, .markdown-reading-view) :is(h1, h2, h3, h4, h5, h6),
body:not(.is-mobile) .markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"] {
transform: translateZ(0);
}
.markdown-preview-view h1,
.markdown-source-view.mod-cm6 .cm-line .cm-header-1 {
--scale: var(--heading-scale-1);
--scale-x: var(--heading-scale-x-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 {
--scale: var(--heading-scale-2);
--scale-x: var(--heading-scale-x-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 {
--scale: var(--heading-scale-3);
--scale-x: var(--heading-scale-x-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 {
--scale: var(--heading-scale-4);
--scale-x: var(--heading-scale-x-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 {
--scale: var(--heading-scale-5);
--scale-x: var(--heading-scale-x-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 {
--scale: var(--heading-scale-6);
--scale-x: var(--heading-scale-x-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;
}
/* Suppress <br> artifacts from trailing double-spaces in headings */
.markdown-preview-view :is(h1, h2, h3, h4, h5, h6) > br {
display: none;
}
/* Suppress trailing-space/hard-break decoration spans in live preview */
.markdown-source-view.mod-cm6 .cm-line [class*="cm-header-"]:is(.cm-trailing-space-a, .cm-trailing-space-b, .cm-hmd-escape-backslash, .cm-hmd-escape-char) {
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background-image: none !important;
}
/* 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;
inset-inline-start: -1px !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
inset-block-start: 50% !important;
transform: translateY(-50%) !important;
opacity: 0 !important;
transition: opacity var(--transition-ui);
z-index: 10;
}
.markdown-rendered :is(h1, h2, h3, h4, h5, h6):hover .heading-collapse-indicator {
opacity: 1 !important;
}
/* Make fold indicator stretch full heading line height so child's 50% centers correctly */
.markdown-source-view.mod-cm6 .cm-line:is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) .cm-fold-indicator {
position: absolute !important;
inset-block-start: 0 !important;
inset-block-end: 0 !important;
}
/* Reveal arrow on hover */
:is(.cm-line:hover, .cm-gutterElement:hover) .cm-fold-indicator .collapse-indicator {
opacity: 1 !important;
}
/* Heading Case (per level: Title Case or UPPERCASE) */
body.h1-case-title :is(h1, .cm-header-1),
body.h2-case-title :is(h2, .cm-header-2),
body.h3-case-title :is(h3, .cm-header-3),
body.h4-case-title :is(h4, .cm-header-4),
body.h5-case-title :is(h5, .cm-header-5),
body.h6-case-title :is(h6, .cm-header-6) {
text-transform: capitalize !important;
}
body.h1-case-upper :is(h1, .cm-header-1),
body.h2-case-upper :is(h2, .cm-header-2),
body.h3-case-upper :is(h3, .cm-header-3),
body.h4-case-upper :is(h4, .cm-header-4),
body.h5-case-upper :is(h5, .cm-header-5),
body.h6-case-upper :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;
padding-block: .2em;
padding-inline: 0;
border-block-end: var(--border-heavy) 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-block-end-color: var(--heading-primary);
border-block-end-width: 4px;
}
.heading-style-underline .markdown-preview-view h2,
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-2 {
border-block-end-color: var(--heading-secondary);
border-block-end-width: 3px;
}
.heading-style-underline .markdown-preview-view h3,
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-3 {
border-block-end-color: var(--heading-tertiary);
border-block-end-width: 2.5px;
}
.heading-style-underline .markdown-preview-view h4,
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-4 {
border-block-end-color: var(--heading-quaternary);
border-block-end-width: 2px;
}
.heading-style-underline .markdown-preview-view h5,
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-5 {
border-block-end-color: var(--heading-quinary);
border-block-end-width: 2px;
}
.heading-style-underline .markdown-preview-view h6,
.heading-style-underline .markdown-source-view.mod-cm6 .cm-line .cm-header-6 {
border-block-end-color: var(--heading-senary);
border-block-end-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-block-end-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;
padding-block: .2em;
padding-inline-start: .8em;
padding-inline-end: .5em;
border-inline-start: 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-inline-start-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-inline-start-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-inline-start-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-inline-start-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-inline-start-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-inline-start-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;
padding-block: .2em;
padding-inline: 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;
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);
}
/* Glass Style - Frosted, soft tint per heading level */
.heading-style-glass :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(--r3);
border: var(--border-thin) solid var(--glass-border);
background-color: rgba(var(--background-secondary-rgb), 0.3);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
position: relative;
overflow: visible !important;
transition: transform var(--transition-ui), box-shadow var(--transition-ui);
width: fit-content;
max-inline-size: 100%;
display: inline-block;
line-height: 1.4;
will-change: transform;
contain: layout style;
}
/* Apply backdrop-filter only if supported and performance mode not enabled */
@supports (backdrop-filter: blur(1px)) {
body:not(.disable-glass-menus) .heading-style-glass :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(8px) saturate(160%) brightness(1.03);
-webkit-backdrop-filter: blur(8px) saturate(160%) brightness(1.03);
}
}
/* Glass padding scale - consolidated using heading scale variables */
.heading-style-glass :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) {
padding: calc(var(--heading-pad-y) * var(--scale)) calc(var(--heading-pad-x) * var(--scale-x));
}
.heading-style-glass :is(h6, .cm-header-6) {
font-weight: 700;
}
.heading-style-glass :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(-2px);
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
filter: brightness(1.05);
}
/* Light Mode */
.theme-light.heading-style-glass :is(h1, .cm-header-1) {
background-color: rgba(var(--heading-primary-rgb), 0.28) !important;
color: hsl(from var(--heading-primary) h s 28%) !important;
}
.theme-light.heading-style-glass :is(h2, .cm-header-2) {
background-color: rgba(var(--heading-secondary-rgb), 0.28) !important;
color: hsl(from var(--heading-secondary) h s 28%) !important;
}
.theme-light.heading-style-glass :is(h3, .cm-header-3) {
background-color: rgba(var(--heading-tertiary-rgb), 0.28) !important;
color: hsl(from var(--heading-tertiary) h s 28%) !important;
}
.theme-light.heading-style-glass :is(h4, .cm-header-4) {
background-color: rgba(var(--heading-quaternary-rgb), 0.28) !important;
color: hsl(from var(--heading-quaternary) h s 28%) !important;
}
.theme-light.heading-style-glass :is(h5, .cm-header-5) {
background-color: rgba(var(--heading-quinary-rgb), 0.28) !important;
color: hsl(from var(--heading-quinary) h s 28%) !important;
}
.theme-light.heading-style-glass :is(h6, .cm-header-6) {
background-color: rgba(var(--heading-senary-rgb), 0.28) !important;
color: hsl(from var(--heading-senary) h s 28%) !important;
}
/* Dark Mode */
.theme-dark.heading-style-glass :is(h1, .cm-header-1) {
background-color: rgba(var(--heading-primary-rgb), 0.3) !important;
color: hsl(from var(--heading-primary) h s 90%) !important;
border-color: rgba(var(--heading-primary-rgb), 0.35);
}
.theme-dark.heading-style-glass :is(h2, .cm-header-2) {
background-color: rgba(var(--heading-secondary-rgb), 0.3) !important;
color: hsl(from var(--heading-secondary) h s 90%) !important;
border-color: rgba(var(--heading-secondary-rgb), 0.35);
}
.theme-dark.heading-style-glass :is(h3, .cm-header-3) {
background-color: rgba(var(--heading-tertiary-rgb), 0.3) !important;
color: hsl(from var(--heading-tertiary) h s 90%) !important;
border-color: rgba(var(--heading-tertiary-rgb), 0.35);
}
.theme-dark.heading-style-glass :is(h4, .cm-header-4) {
background-color: rgba(var(--heading-quaternary-rgb), 0.3) !important;
color: hsl(from var(--heading-quaternary) h s 90%) !important;
border-color: rgba(var(--heading-quaternary-rgb), 0.35);
}
.theme-dark.heading-style-glass :is(h5, .cm-header-5) {
background-color: rgba(var(--heading-quinary-rgb), 0.3) !important;
color: hsl(from var(--heading-quinary) h s 90%) !important;
border-color: rgba(var(--heading-quinary-rgb), 0.35);
}
.theme-dark.heading-style-glass :is(h6, .cm-header-6) {
background-color: rgba(var(--heading-senary-rgb), 0.3) !important;
color: hsl(from var(--heading-senary) h s 90%) !important;
border-color: rgba(var(--heading-senary-rgb), 0.35);
}
/* Heading Alignment Options */
/* Center-aligned headings - keep background width to content, center the element */
body.heading-align-center :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) {
display: inline-flex !important;
margin-inline: auto;
width: auto;
}
/* Ensure the parent line container allows centering in edit mode */
body.heading-align-center .markdown-source-view.mod-cm6 .cm-line[class*="HyperMD-header"] {
display: flex;
justify-content: center;
}
/* Ensure reading view headings are centered */
body.heading-align-center .markdown-preview-view {
& h1, & h2, & h3, & h4, & h5, & h6 {
display: inline-flex !important;
margin-inline: auto;
}
}
/* Inline Title */
.inline-title {
color: var(--primary-color);
font-weight: var(--weight-semibold);
}
.inline-title:hover {
filter: brightness(1.05);
transition: filter var(--transition-ui);
}
/* 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-block: 0;
padding-inline: 0;
border-block-end: 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-block-end: none !important;
transition: color var(--transition-ui), background-color var(--transition-ui), border-color var(--transition-ui), box-shadow var(--transition-ui), transform var(--transition-ui), text-shadow var(--transition-ui);
}
/* 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-block: 0;
padding-inline: 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-block: 0;
padding-inline: 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-block: 0;
padding-inline: 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-block: 0;
padding-inline: 1px;
border-bottom: 1.5px solid var(--callout-color, 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);
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-block: 5px;
padding-inline: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
margin-block: 0;
margin-inline: 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(--callout-color-rgb, var(--primary-color-rgb)), .2);
text-shadow: 0 0 12px rgba(var(--callout-color-rgb, var(--primary-color-rgb)), 0.6);
box-shadow: 0 4px 15px rgba(var(--callout-color-rgb, var(--primary-color-rgb)), 0.2);
transform: translateY(-1px) scale(1.03);
}
/* 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-block-end: 1px dashed var(--callout-color, var(--primary-color)) !important;
}
.markdown-source-view.mod-cm6 .cm-underline {
text-decoration: none !important;
border-block-end: 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-block-end: 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-block-end: none !important;
}
/* Unified Accent Glow for Link Hovers */
.markdown-rendered a:hover,
.markdown-rendered .internal-link:hover,
.markdown-rendered .external-link:hover,
.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-shadow: var(--accent-glow);
}
/* Multi-select Pill Styling */
.multi-select-pill {
display: inline-flex !important;
align-items: center !important;
border-radius: var(--radius-m);
background-color: rgba(var(--primary-color-rgb), .15) !important;
padding: 2px 4px 2px 10px !important;
gap: 4px !important;
box-shadow: var(--shadow-1);
}
.theme-dark .multi-select-pill {
background-color: rgba(var(--primary-color-rgb), .18) !important;
}
:is(.multi-select-pill-content span, .multi-select-pill-content) {
border-radius: 0;
background-color: transparent !important;
color: var(--text-normal);
padding: 0 !important;
font-size: .85em;
font-weight: var(--weight-medium);
letter-spacing: -.01em;
box-shadow: none;
transition: color var(--transition-ui);
}
.multi-select-pill-remove {
opacity: 0.6 !important;
transition: opacity var(--transition-ui);
}
.multi-select-pill-remove:hover {
opacity: 1 !important;
}
.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-block-end: var(--s1);
position: relative;
transition: transform var(--transition-ui), background-color var(--transition-ui);
overflow-x: hidden;
}
:is(.nav-folder-title, .nav-file-title) {
block-size: 30px !important;
min-block-size: 30px !important;
max-block-size: 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;
inline-size: 0 !important;
margin: 0 !important;
padding: 0 !important;
min-inline-size: 0 !important;
}
/* Fix: Normal collapse icon animation */
.collapse-icon svg,
.nav-folder-collapse-indicator svg {
transition: transform 0.28s var(--ease-apple);
}
.nav-folder-title {
padding-inline-start: 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-inline: var(--s1);
vertical-align: text-bottom;
block-size: 16px;
inline-size: 16px;
background-color: currentColor;
opacity: .7;
flex-shrink: 0;
position: relative;
z-index: 2;
transition: opacity var(--transition-ui);
}
.nav-folder .nav-folder-title-content {
transition: transform var(--transition-ui);
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 var(--transition-ui);
overflow-x: hidden;
}
.nav-folder>.nav-folder-children {
display: block;
}
.nav-folder.is-collapsed>.nav-folder-children {
display: none;
}
.nav-files-container>div>.nav-folder:hover {
transform: translateY(-2px);
}
:is(.theme-light, .theme-dark) .nav-files-container>div>.nav-folder:nth-child(6n+1) {
--folder-color: rgba(var(--heading-primary-rgb), var(--theme-folder-opacity));
--folder-text-color: var(--heading-primary);
--folder-heading-rgb: var(--heading-primary-rgb);
}
:is(.theme-light, .theme-dark) .nav-files-container>div>.nav-folder:nth-child(6n+2) {
--folder-color: rgba(var(--heading-secondary-rgb), var(--theme-folder-opacity));
--folder-text-color: var(--heading-secondary);
--folder-heading-rgb: var(--heading-secondary-rgb);
}
:is(.theme-light, .theme-dark) .nav-files-container>div>.nav-folder:nth-child(6n+3) {
--folder-color: rgba(var(--heading-tertiary-rgb), var(--theme-folder-opacity));
--folder-text-color: var(--heading-tertiary);
--folder-heading-rgb: var(--heading-tertiary-rgb);
}
:is(.theme-light, .theme-dark) .nav-files-container>div>.nav-folder:nth-child(6n+4) {
--folder-color: rgba(var(--heading-quaternary-rgb), var(--theme-folder-opacity));
--folder-text-color: var(--heading-quaternary);
--folder-heading-rgb: var(--heading-quaternary-rgb);
}
:is(.theme-light, .theme-dark) .nav-files-container>div>.nav-folder:nth-child(6n+5) {
--folder-color: rgba(var(--heading-quinary-rgb), var(--theme-folder-opacity));
--folder-text-color: var(--heading-quinary);
--folder-heading-rgb: var(--heading-quinary-rgb);
}
:is(.theme-light, .theme-dark) .nav-files-container>div>.nav-folder:nth-child(6n+6) {
--folder-color: rgba(var(--heading-senary-rgb), var(--theme-folder-opacity));
--folder-text-color: var(--heading-senary);
--folder-heading-rgb: var(--heading-senary-rgb);
}
.nav-files-container>div>.nav-folder .nav-folder-title:is(.is-active, .is-selected) .nav-folder-title-content {
color: var(--folder-text-color) !important;
font-weight: var(--weight-medium);
}
.nav-file-title:is(:not(.is-active)):hover {
background-color: rgba(255, 255, 255, var(--link-opacity-normal)) !important;
filter: brightness(1.15);
}
.theme-dark .nav-file-title:is(:not(.is-active)):hover {
background-color: rgba(255, 255, 255, var(--link-opacity-unresolved)) !important;
}
.nav-folder .nav-folder-children .nav-folder {
--folder-color: inherit;
--folder-text-color: inherit;
--folder-heading-rgb: 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;
inline-size: auto;
padding-block: var(--s1);
padding-inline: var(--s3);
border-radius: var(--r1);
-electron-corner-smoothing: var(--squircle-main);
border: none;
font-weight: var(--weight-semibold);
}
.nav-file-title.is-active::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 50%;
transform: translateY(-50%);
block-size: 70%;
inline-size: 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 {
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 .nav-file-title.is-active .nav-file-title-content {
background-color: rgba(var(--folder-heading-rgb), .25);
color: var(--folder-text-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;
inset-inline-start: 0;
inset-block-start: 50%;
transform: translateY(-50%);
block-size: 60%;
inline-size: 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-inline-start: var(--border-heavy) solid var(--callout-color);
}
.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: var(--fast);
}
.callout .callout-title {
display: flex;
align-items: center;
gap: .75em;
font-weight: var(--weight-semibold);
font-size: 1.1em;
padding-block: 0;
padding-inline: 0;
background: transparent;
border-block-end: none;
color: hsl(from var(--callout-color) h s calc(l * .7));
text-shadow: 0 1px 2px rgba(var(--callout-color-rgb), .1);
}
/* Dark mode must LIGHTEN titles, not darken them — the .7 multiplier above
is a light-mode readability guard and inverts on dark backgrounds */
.theme-dark .callout .callout-title {
color: hsl(from var(--callout-color) h s calc(min(l * 1.2, 85%)));
}
.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-block: 0;
padding-inline: 0;
font-size: .95em;
line-height: var(--line-normal);
}
.markdown-source-view.mod-cm6 .cm-embed-block.cm-callout {
padding-block: 0;
padding-inline: 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-inline-start-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-inline-start-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-inline-start-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-inline-start-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-inline-start-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-inline-start-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-inline-start-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-inline-start-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;
transition: var(--transition-callout-link);
}
: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;
}
:is(.callout, .cm-callout) .callout-title :is(a, .internal-link, .external-link, .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;
transition: var(--transition-callout-link);
}
:is(.callout, .cm-callout) .callout-title :is(a, .internal-link, .external-link, .cm-url):hover {
background: rgba(var(--callout-color-rgb), .15) !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;
transition: var(--transition-callout-link);
}
:is(.callout, .cm-callout) .callout-content :is(a, .internal-link, .external-link, .cm-url):hover {
background: rgba(var(--callout-color-rgb), .15) !important;
}
[data-callout] :is(a, .internal-link, .external-link, .cm-url) {
border-block-end-color: var(--callout-color) !important;
}
body.link-style-underline [data-callout] :is(a, .internal-link, .external-link, .cm-url) {
border-block-end-color: var(--callout-color) !important;
}
[data-callout] .is-unresolved {
opacity: .75;
background: rgba(var(--callout-color-rgb), .08) !important;
color: inherit;
border-bottom: 1px dashed var(--callout-color) !important;
text-decoration: none !important;
}
:is(.callout, .cm-callout) :is(.internal-link.is-unresolved, .is-unresolved) {
border-bottom: 1px dashed var(--callout-color) !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 var(--callout-color) !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: 2px solid var(--callout-color);
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: 2px solid var(--callout-color);
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, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6) {
color: var(--callout-color) !important;
background-color: transparent !important;
box-shadow: none;
background-image: none !important;
padding-block: .1em;
padding-inline: .3em;
border-radius: var(--r2);
-electron-corner-smoothing: var(--squircle-main);
font-weight: var(--weight-semibold);
letter-spacing: -.01em;
margin-block: .5em;
margin-inline: 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, .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)) !important;
}
.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: var(--border-thick) solid rgba(var(--callout-color-rgb), 0.25) !important;
border-inline-start: 5px solid var(--callout-color) !important;
border-radius: 4px 12px 12px 4px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, var(--opacity-light-overlay)),
inset 0 -1px 0 rgba(0, 0, 0, var(--opacity-subtle)),
0 2px 8px rgba(0, 0, 0, var(--opacity-divider)),
0 1px 3px rgba(0, 0, 0, var(--opacity-subtle)) !important;
position: relative;
overflow: hidden;
}
.callout-style-vintage .callout::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline: 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, var(--opacity-overlay)),
0 2px 8px rgba(0, 0, 0, 0.3),
0 1px 3px rgba(0, 0, 0, var(--opacity-overlay)) !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, var(--opacity-active)),
0 4px 12px rgba(0, 0, 0, var(--opacity-overlay)),
0 2px 6px rgba(0, 0, 0, var(--opacity-divider)) !important;
border-inline-start-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 :is(.callout, .cm-callout) {
backdrop-filter: blur(12px) saturate(180%) brightness(1.06) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) brightness(1.06) !important;
border-inline-start: none !important;
border-radius: var(--r4) !important;
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
position: relative;
}
.callout-style-glass .markdown-source-view.mod-cm6 .cm-callout {
border: none !important;
outline: none !important;
}
.callout-style-glass .callout::after {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline: 0;
inset-block-end: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.12) 0%,
transparent 55%);
border-radius: var(--r4) !important;
pointer-events: none;
}
.theme-dark .callout-style-glass :is(.callout, .cm-callout) {
background:
radial-gradient(ellipse at top left, rgba(var(--callout-color-rgb), 0.3) 0%, transparent 62%),
radial-gradient(ellipse at bottom right, rgba(var(--callout-color-rgb), 0.22) 0%, transparent 62%),
linear-gradient(135deg, rgba(var(--callout-color-rgb), 0.26) 0%, rgba(var(--background-primary-rgb), 0.38) 100%) !important;
backdrop-filter: blur(16px) saturate(160%) brightness(0.98) !important;
-webkit-backdrop-filter: blur(16px) saturate(160%) brightness(0.98) !important;
border-color: rgba(var(--callout-color-rgb), 0.35) !important;
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.callout-style-glass .callout:hover {
transform: translateY(-3px) !important;
box-shadow:
0 12px 40px rgba(0, 0, 0, var(--opacity-divider)),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, var(--opacity-hover)) !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: var(--border-heavy) solid var(--callout-color) !important;
border-inline-start: 6px solid var(--callout-color) !important;
border-radius: var(--r4);
box-shadow:
0 0 0 2px rgba(var(--callout-color-rgb), 0.15),
0 6px 20px rgba(0, 0, 0, var(--opacity-divider)),
inset 0 0 20px rgba(var(--callout-color-rgb), 0.05) !important;
position: relative;
}
.callout-style-bold .callout::before {
content: '';
position: absolute;
inset-block-start: -3px;
inset-inline-start: -3px;
inset-inline-end: -3px;
inset-block-end: -3px;
border: var(--border-thin) 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, var(--opacity-overlay)),
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;
}
/* 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);
-electron-corner-smoothing: var(--squircle-main);
display: inline;
transition: background-color var(--transition-ui), transform var(--transition-ui);
}
}
/* 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);
}
}
}
/* Highlight Style - Glass */
.highlight-style-glass :is(
.markdown-rendered mark,
span.cm-highlight,
.markdown-preview-view mark,
.cm-s-obsidian span.cm-highlight
) {
background-color: rgba(var(--highlight-bg-rgb, var(--primary-color-rgb)), 0.42);
color: var(--highlight-bg-dark-color);
border: 1px solid var(--glass-border);
border-bottom: 2px solid rgba(var(--highlight-bg-rgb, var(--primary-color-rgb)), 0.45);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.theme-dark.highlight-style-glass :is(
.markdown-rendered mark,
span.cm-highlight,
.markdown-preview-view mark,
.cm-s-obsidian span.cm-highlight
) {
background-color: rgba(var(--highlight-bg-rgb, var(--primary-color-rgb)), 0.45);
color: var(--highlight-bg-light-color);
border-color: rgba(255, 255, 255, 0.12);
border-block-end-color: rgba(var(--highlight-bg-rgb, var(--primary-color-rgb)), 0.55);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.highlight-style-glass :is(
.markdown-rendered mark,
span.cm-highlight,
.markdown-preview-view mark,
.cm-s-obsidian span.cm-highlight
):hover {
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
filter: brightness(1.08);
}
/* Strikethrough Styling */
:is(.markdown-rendered del, .cm-strikethrough) {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 2px;
background-position: left 60%;
animation: strike-draw var(--slow) forwards;
}
.theme-dark :is(.markdown-rendered del, .cm-strikethrough) {
color: var(--emphasis-color-light);
}
@keyframes strike-draw {
from { background-size: 0% 2px; }
to { background-size: 100% 2px; }
}
/* 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-block: 5px;
padding-inline-end: 1em;
margin-block: 15px;
margin-inline: 0;
background-color: rgba(var(--background-secondary-rgb), .7);
border-inline-start: 4px solid var(--blockquote-border-color);
border-block-end: var(--border-thin) solid rgba(var(--primary-color-rgb), .1);
position: relative;
font-size: .9em;
transition: box-shadow var(--transition-ui), transform var(--transition-ui);
}
.markdown-source-view.mod-cm6 .cm-line.HyperMD-quote::before {
inline-size: 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);
}
: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-block-end: var(--border-thin) 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 var(--transition-ui);
}
: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 var(--transition-ui);
}
.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-block: 2px;
padding-inline: 6px;
border-radius: var(--r1);
-electron-corner-smoothing: var(--squircle-btn);
font-size: 0.9em;
font-family: var(--font-monospace);
border: var(--border-thin) solid rgba(var(--primary-color-rgb), .1);
box-shadow: var(--shadow-1);
transition: background-color var(--transition-ui), transform var(--transition-ui);
}
: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);
}
.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);
}
/* 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-block: var(--s3);
margin-inline: 0;
border: var(--border-thick) 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 var(--transition-ui), transform var(--transition-ui);
}
: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: var(--border-thick) solid rgba(var(--primary-color-rgb), .15);
box-shadow: var(--shadow-2), inset 0 2px 6px rgba(0, 0, 0, .1);
margin-block: var(--s3);
margin-inline: 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-inline-start: var(--s3);
padding-inline-end: 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-start-start-radius: var(--r2);
border-start-end-radius: var(--r2);
padding-block-start: var(--s2);
margin-block-start: var(--s2);
}
/* Last line of code block */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-end {
border-end-start-radius: var(--r2);
border-end-end-radius: var(--r2);
padding-block-end: var(--s2);
margin-block-end: var(--s2);
}
:is(.markdown-rendered pre code, .markdown-preview-view pre code) {
background-color: transparent;
padding-block: 0;
padding-inline: 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-inline-end: var(--border-thin) 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 */
:is(.markdown-rendered pre, .markdown-preview-view pre) .copy-code-button {
position: absolute;
inset-block-start: var(--s2);
inset-inline-end: var(--s2);
background-color: rgba(var(--primary-color-rgb), .1);
border: var(--border-thin) solid rgba(var(--primary-color-rgb), .15);
border-radius: var(--r1);
-electron-corner-smoothing: var(--squircle-btn);
padding-block: 4px;
padding-inline: 8px;
font-size: 0.75em;
color: var(--code-comment);
opacity: 0;
transition: opacity var(--transition-ui), background-color var(--transition-ui), transform var(--transition-ui);
cursor: pointer;
}
:is(.markdown-rendered pre, .markdown-preview-view pre):hover .copy-code-button {
opacity: 1;
}
:is(.markdown-rendered pre, .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 */
:is(.markdown-rendered img, .markdown-source-view.mod-cm6 .cm-content img) {
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-main);
max-inline-size: 100%;
}
/* 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;
position: relative;
transition: box-shadow var(--transition-ui), transform var(--transition-ui);
}
:is(.markdown-rendered, .markdown-preview-view) table th:first-child {
border-top-left-radius: var(--r3);
}
:is(.markdown-rendered, .markdown-preview-view) table th:last-child {
border-top-right-radius: var(--r3);
}
:is(.markdown-rendered, .markdown-preview-view) table tr:last-child td:first-child {
border-bottom-left-radius: var(--r3);
}
:is(.markdown-rendered, .markdown-preview-view) table tr:last-child td:last-child {
border-bottom-right-radius: var(--r3);
}
:is(.markdown-rendered, .markdown-preview-view) table :is(td, th) {
border-width: 0 1px 1px 0;
}
:is(.markdown-rendered, .markdown-preview-view) table th {
background-color: var(--emphasis-color);
padding-block: var(--s2);
padding-inline: var(--s3);
font-weight: var(--weight-semibold);
border-block-end: var(--border-thin) solid var(--divider-color);
}
.markdown-rendered table th strong {
color: inherit;
}
.theme-light :is(.markdown-rendered, .markdown-preview-view) table tr:nth-child(n) th {
background-color: var(--emphasis-color);
filter: brightness(.9);
color: var(--background-primary);
}
.theme-dark :is(.markdown-rendered, .markdown-preview-view) table tr:nth-child(n) th {
background-color: var(--emphasis-color);
filter: brightness(.9);
color: var(--text-normal);
}
:is(.markdown-rendered, .markdown-preview-view) table td {
padding-block: var(--s2);
padding-inline: var(--s3);
border-block-start: var(--border-thin) solid var(--divider-color);
}
.theme-light :is(.markdown-rendered, .markdown-preview-view) table tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, .03);
}
.theme-light :is(.markdown-rendered, .markdown-preview-view) table tbody tr:nth-child(odd) {
background-color: transparent;
}
.theme-dark :is(.markdown-rendered, .markdown-preview-view) table tbody tr:nth-child(even) {
background-color: rgba(255, 255, 255, .03);
}
.theme-dark :is(.markdown-rendered, .markdown-preview-view) table tbody tr:nth-child(odd) {
background-color: transparent;
}
:is(.markdown-rendered, .markdown-preview-view) table tbody tr:hover {
background-color: rgba(var(--primary-color-rgb), .05);
}
.theme-dark :is(.markdown-rendered, .markdown-preview-view) table tbody tr:hover {
background-color: rgba(var(--primary-color-rgb), .08);
}
:is(.markdown-rendered, .markdown-preview-view) table:hover {
box-shadow: var(--shadow-2);
}
/* Checkbox styling */
:is(input[type="checkbox"], .task-list-item-checkbox) {
inline-size: 18px;
block-size: 18px;
border: var(--border-thick) solid var(--emphasis-color);
border-radius: var(--r1);
background: transparent;
transition: transform var(--transition-ui), border-color var(--transition-ui), box-shadow var(--transition-ui), background-color var(--transition-ui);
}
:is(input[type="checkbox"], .task-list-item-checkbox):hover {
transform: scale(1.05);
border-color: var(--emphasis-color);
}
.task-list-item-checkbox:hover {
box-shadow: 0 0 8px rgba(var(--primary-color-rgb), .45);
}
:is(input[type="checkbox"], .task-list-item-checkbox):focus {
box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .35);
border-color: var(--emphasis-color);
outline: none;
}
:is(input[type="checkbox"], .task-list-item-checkbox):active {
transform: scale(0.95);
border-color: var(--emphasis-color);
}
:is(input[type="checkbox"], .task-list-item-checkbox):checked {
background: var(--emphasis-color);
border-color: var(--emphasis-color);
animation: checkboxPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.task-list-item-checkbox:checked {
background: var(--emphasis-color) !important;
border-color: var(--emphasis-color) !important;
}
:is(input[type="checkbox"], .task-list-item-checkbox):checked::after {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%) scale(0);
color: white;
font-size: 14px;
font-weight: bold;
animation: checkmarkAppear 0.22s 0.08s cubic-bezier(0.34, 1.56, 0.64, 1) 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: var(--border-thin);
}
/* 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-block-start: 5px solid transparent;
border-block-end: 5px solid transparent;
border-inline-start: 8px solid;
border-inline-end: 0px solid;
}
}
/* Animations */
@keyframes checkboxPop {
0% { transform: scale(1); }
35% { transform: scale(0.82); }
100% { transform: scale(1); }
}
@keyframes checkmarkAppear {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
70% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes menuPop {
0% {
opacity: 0;
transform: scale(0.97);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* 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 {
animation: menuPop var(--dur-quick) var(--ease-apple) forwards;
}
/* Tooltips: Apple-style instant fade — no scale, just opacity */
body:not(.disable-ui-animations) .tooltip {
animation: tooltipFade var(--dur-instant) ease-out forwards;
}
@keyframes tooltipFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================================
iOS-FLAVOR ANIMATIONS (Cupertino-inspired, opt-out via "Disable UI Animations")
============================================================ */
/* iOS bottom-sheet slide-up: phone menus emerge from the screen edge */
@keyframes iosSheetUp {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
body.is-phone:not(.disable-ui-animations) .menu {
animation: iosSheetUp var(--dur-sheet) var(--ease-apple) forwards;
transform-origin: bottom center;
}
/* iOS-style modal "zoom-in" with a touch of overshoot */
@keyframes iosModalZoom {
0% {
opacity: 0;
transform: scale(0.94);
}
60% {
transform: scale(1.005);
}
100% {
opacity: 1;
transform: scale(1);
}
}
body:not(.disable-ui-animations):not(.animation-style-whimsy) .modal {
animation: iosModalZoom var(--dur-modal) var(--ease-apple) forwards;
}
/* iOS-style backdrop blur fade-in for modal background */
@keyframes iosBackdropFade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
body:not(.disable-ui-animations):not(.disable-modal-frost) .modal-bg {
animation: iosBackdropFade 0.28s var(--ease-apple) forwards;
}
/* iOS-style press feedback: quick scale-down on tap/click — feels tactile */
body:not(.disable-ui-animations) :is(
.menu-item,
.suggestion-item,
.clickable-icon,
.nav-file-title,
.nav-folder-title
):active {
transform: scale(0.97);
transition: transform 80ms var(--ease-apple);
}
/* ================================================= ==================================================
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-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);
}
}
/* --- Application Rules --- */
/* Modals */
body.animation-style-whimsy:not(.disable-ui-animations) .modal-container {
transform-origin: center;
animation: whimsy-modal-open var(--whimsy-fast) var(--ease-bounce-lg) !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 var(--whimsy-normal) forwards;
}
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-container:not(.is-collapsed) {
animation: whimsy-settle-bounce var(--whimsy-slow) forwards;
}
body.animation-style-whimsy:not(.disable-ui-animations) .metadata-container.is-collapsed {
animation: whimsy-collapse-bounce var(--whimsy-normal) var(--ease-bounce-xl) forwards;
}
/* Notices */
body.animation-style-whimsy:not(.disable-ui-animations) .notice-container {
animation: whimsy-notice-in var(--whimsy-normal) var(--ease-bounce-xl) !important;
transform-origin: top center;
}
/* Callouts */
body.animation-style-whimsy:not(.disable-ui-animations) .callout:not(.is-collapsed) {
animation: whimsy-settle-bounce var(--whimsy-normal) var(--ease-bounce-xl) !important;
transform-origin: top center;
}
body.animation-style-whimsy:not(.disable-ui-animations) .callout.is-collapsed {
animation: whimsy-collapse-bounce var(--whimsy-normal) var(--ease-bounce-xl) 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 var(--whimsy-normal) var(--ease-bounce-sm) 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;
}
}
/* --- 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);
}
}
/* 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);
}
}
/* 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 var(--whimsy-fast) var(--ease-bounce-lg) !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 var(--whimsy-micro) var(--ease-bounce-md) !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(var(--whimsy-scale-pop));
}
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 var(--transition-ui);
}
body.animation-style-whimsy .workspace-tab-header-inner-close-button:hover {
transform: scale(var(--whimsy-scale-pop)) rotate(90deg);
background-color: var(--primary-color) !important;
color: var(--background-primary) !important;
}
/* Sidebar Toggle Buttons - Smart rotation based on side */
body.animation-style-whimsy .sidebar-toggle-button.mod-left,
body.animation-style-whimsy .sidebar-toggle-button.mod-right {
transition: transform 0.5s var(--ease-bounce-md);
}
/* Left sidebar rotates counter-clockwise (opening to the left) */
body.animation-style-whimsy .sidebar-toggle-button.mod-left:hover {
transform: rotate(-180deg) scale(1.1);
}
/* Right sidebar rotates clockwise (opening to the right) */
body.animation-style-whimsy .sidebar-toggle-button.mod-right:hover {
transform: rotate(180deg) scale(1.1);
}
/* Ribbon collapse buttons have subtle rotation */
body.animation-style-whimsy .side-dock-ribbon-action:hover,
body.animation-style-whimsy .workspace-ribbon-collapse-btn:hover {
transform: scale(var(--whimsy-scale-pop)) rotate(5deg);
}
body.animation-style-whimsy .collapse-icon {
transition: transform var(--transition-bounce);
}
body.animation-style-whimsy .collapse-icon:hover {
transform: scale(1.3);
}
body.animation-style-whimsy .status-bar-item {
transition: transform var(--transition-bounce);
}
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);
display: inline-block;
}
body.animation-style-whimsy .tag:hover,
body.animation-style-whimsy .multi-select-pill:hover {
transform: scale(var(--whimsy-scale-emphasis)) rotate(-2deg);
}
body.animation-style-whimsy .canvas-control-item {
transition: transform var(--transition-bounce);
}
body.animation-style-whimsy .canvas-control-item:hover {
transform: scale(1.2);
}
/* 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 var(--transition-ui), transform 0.4s var(--ease-bounce-md);
}
/* Toggles */
body.animation-style-whimsy .checkbox-container {
transition: background-color var(--transition-ui);
}
body.animation-style-whimsy .checkbox-container:after {
transition: transform 0.4s var(--ease-overshoot);
}
/* Sliders */
body.animation-style-whimsy input[type=range]::-webkit-slider-thumb {
transition: transform 0.2s var(--ease-bounce-md);
}
body.animation-style-whimsy input[type=range]::-webkit-slider-thumb:active {
transform: scale(1.3);
}
/* Warning Notices - Heartbeat */
body.animation-style-whimsy:not(.disable-ui-animations) .notice.mod-warning {
animation: whimsy-heartbeat 1.5s ease-in-out 3;
}
/* Settings Toggles - Jelly on Click */
body.animation-style-whimsy:not(.disable-ui-animations) .checkbox-container:active {
animation: whimsy-jelly var(--whimsy-normal) ease-in-out;
}
/* Modal Close Button - Spin on Hover */
body.animation-style-whimsy:not(.disable-ui-animations) .modal-close-button:hover {
transform: rotate(90deg) scale(1.2);
}
/* Modal Background Frost */
body:not(.disable-modal-frost) .modal-bg {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
background-color: rgba(0, 0, 0, 0.4);
will-change: opacity;
}
.theme-light body:not(.disable-modal-frost) .modal-bg {
background-color: rgba(0, 0, 0, 0.1);
}
/* 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 var(--transition-ui);
}
.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-block-end: var(--s4);
border: none;
position: relative;
transition: box-shadow var(--transition-ui), transform var(--transition-ui);
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-block-end: 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 var(--transition-ui);
position: absolute;
inset-inline-start: -35px;
inset-block-start: 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;
overflow: visible;
-electron-corner-smoothing: var(--squircle-main);
margin-inline-end: 0;
margin-block-end: 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,
:is(.workspace-tab-header, .workspace-tab-header-inner)::before,
:is(.workspace-tab-header, .workspace-tab-header-inner)::after {
transition: transform var(--transition-ui), background-color var(--transition-ui), box-shadow var(--transition-ui);
border: none !important;
border-inline-end: none !important;
border-inline-start: 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 */
:is(body:not(.is-mobile).layout-card, 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-block-end: 1.5px solid var(--divider-color);
background-color: rgba(var(--background-primary-rgb), .85);
transition: box-shadow var(--transition-ui), transform var(--transition-ui), background-color var(--transition-ui);
position: relative;
z-index: 5;
margin-block-end: -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-block-end-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-block-end-color: rgba(var(--primary-color-rgb), .3);
}
.view-content {
position: relative;
z-index: 1;
margin-block-start: 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 var(--transition-ui), transform var(--transition-ui);
}
.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: var(--glass-bg);
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-soft);
border: var(--border-thin) solid var(--glass-border);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
transition: box-shadow var(--transition-ui), transform var(--transition-ui), background-color var(--transition-ui);
contain: layout;
}
.workspace-split.mod-left-split:hover,
.workspace-split.mod-right-split:hover {
background-color: var(--glass-bg);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
transform: none;
z-index: 10;
}
.workspace-tabs .workspace-leaf {
padding: var(--s1);
}
.workspace-split .workspace-tab-header {
margin-inline-end: 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(.is-mobile):not(.disable-status-bar) .status-bar {
position: fixed;
inset-inline-start: 50%;
inset-block-end: 5px;
z-index: var(--layer-status-bar, 1000);
transform: translateX(-50%);
width: fit-content;
max-width: 90%;
height: auto;
min-height: 28px;
padding-block: var(--s1);
padding-inline: var(--s3);
border-radius: var(--r4);
-electron-corner-smoothing: var(--squircle-btn);
background-color: var(--background-secondary);
border: var(--border-thin) 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;
transform-origin: bottom center;
/* allow-keywords lets height morph 6px -> auto smoothly (Chromium 129+);
without it the height snaps while the width animates */
interpolate-size: allow-keywords;
transition:
opacity var(--dur-modal) var(--ease-apple),
transform var(--dur-modal) cubic-bezier(.34, 1.2, .64, 1),
max-width var(--dur-modal) var(--ease-apple),
height var(--dur-modal) var(--ease-apple),
min-height var(--dur-modal) var(--ease-apple),
padding var(--dur-modal) var(--ease-apple),
background-color var(--dur-modal) var(--ease-apple),
border-color var(--transition-ui),
box-shadow var(--dur-modal) var(--ease-apple);
}
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;
}
/* Desktop only: subtle scale shrink for that iOS Dynamic Island "tucking away" feel */
body:not(.is-mobile):not(.disable-status-bar) .status-bar:not(:hover) {
transform: translateX(-50%) scale(0.9);
}
body:not(.disable-status-bar) .status-bar>.status-bar-item {
opacity: 0;
pointer-events: none;
transform: translateY(5px);
filter: blur(3px);
transition:
opacity var(--dur-quick) var(--ease-apple),
transform var(--dur-quick) var(--ease-apple),
filter var(--dur-quick) var(--ease-apple);
white-space: normal;
color: inherit;
display: flex;
align-items: center;
margin: 2px 4px;
}
/* Items rise and de-blur once the pill is mostly open, with a gentle
stagger; no delay on the base rule so collapse fades instantly */
body:not(.disable-status-bar) .status-bar:hover>.status-bar-item {
opacity: 1;
transform: none;
filter: none;
pointer-events: auto;
transition-delay: .1s;
}
body:not(.disable-status-bar) .status-bar:hover>.status-bar-item:nth-child(2) { transition-delay: .14s; }
body:not(.disable-status-bar) .status-bar:hover>.status-bar-item:nth-child(3) { transition-delay: .18s; }
body:not(.disable-status-bar) .status-bar:hover>.status-bar-item:nth-child(4) { transition-delay: .22s; }
body:not(.disable-status-bar) .status-bar:hover>.status-bar-item:nth-child(n+5) { transition-delay: .26s; }
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-block-end: 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 var(--transition-ui);
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-inline-start: 0;
padding-inline-end: 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-inline-start: var(--s3);
padding-inline-start: var(--s2);
border-inline-start: var(--border-thin) solid rgba(var(--primary-color-rgb), .06);
transition: border-color var(--transition-ui);
}
.workspace-leaf-content[data-type="outline"] .tree-item-children:hover {
border-inline-start-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: 6px;
height: 6px;
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);
transition: background-color 0.18s ease-out;
}
::-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) :is(
.markdown-preview-view,
.markdown-source-view .cm-scroller,
.nav-files-container,
.workspace-leaf-content,
.modal-container,
.vertical-tab-content-container,
.suggestion-container,
.prompt-results,
.tag-container,
.workspace-leaf-content[data-type="outline"] .view-content,
.backlink-pane
) {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Popover Styling */
.popover {
background-color: var(--glass-bg);
border: var(--border-thin) solid var(--glass-border);
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-main);
box-shadow: var(--shadow-overlay);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
overflow: hidden;
}
.theme-light .popover {
background-color: rgba(var(--background-primary-rgb), 0.92);
border-color: rgba(0, 0, 0, 0.08);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
}
.theme-dark .popover {
background-color: var(--glass-bg);
border-color: var(--glass-border);
box-shadow: var(--shadow-overlay-dark);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
.popover .popover-content {
padding: var(--s2);
}
/* Command Palette / Prompt Styling */
.prompt {
background-color: var(--glass-bg);
border: var(--border-thin) solid var(--glass-border);
border-radius: var(--r4);
-electron-corner-smoothing: var(--squircle-main);
box-shadow: var(--shadow-overlay);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
overflow: hidden;
}
.theme-light .prompt {
background-color: rgba(var(--background-primary-rgb), 0.94);
border-color: rgba(0, 0, 0, 0.08);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
}
.theme-dark .prompt {
background-color: var(--glass-bg);
border-color: var(--glass-border);
box-shadow: var(--shadow-overlay-dark);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
}
.prompt-input-container {
background-color: var(--background-secondary);
border-block-end: var(--border-thin) solid rgba(var(--primary-color-rgb), .1);
padding: var(--s3);
}
.prompt-input {
background-color: var(--background-primary);
border: var(--border-thin) solid rgba(var(--primary-color-rgb), .12);
border-radius: var(--r2);
-electron-corner-smoothing: var(--squircle-btn);
padding-block: var(--s2);
padding-inline: var(--s3);
color: var(--text-normal);
font-size: 1em;
transition: border-color var(--transition-ui), box-shadow var(--transition-ui);
}
.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(--glass-bg);
border: var(--border-thin) solid var(--glass-border);
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-main);
box-shadow: var(--shadow-overlay);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
overflow: hidden;
}
.theme-light .suggestion-container {
background-color: rgba(var(--background-primary-rgb), 0.94);
border-color: rgba(0, 0, 0, 0.08);
backdrop-filter: blur(6px) saturate(130%);
-webkit-backdrop-filter: blur(6px) saturate(130%);
}
.theme-dark .suggestion-container {
background-color: var(--glass-bg);
border-color: var(--glass-border);
box-shadow: var(--shadow-overlay-dark);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
.suggestion-item {
padding: var(--s2);
border-radius: var(--r1);
-electron-corner-smoothing: var(--squircle-btn);
margin: 2px var(--s1);
cursor: pointer;
transition: background-color var(--fast), transform var(--fast);
}
.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: var(--border-thin) solid rgba(var(--primary-color-rgb), .15);
border-radius: var(--r1);
-electron-corner-smoothing: var(--squircle-btn);
padding-block: 2px;
padding-inline: 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(--glass-bg);
border: var(--border-thin) solid var(--glass-border);
border-radius: var(--r2);
-electron-corner-smoothing: var(--squircle-main);
box-shadow: var(--shadow-overlay);
overflow: hidden;
padding: 4px;
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
}
.theme-light .menu {
background-color: rgba(var(--background-primary-rgb), 0.94);
border-color: rgba(0, 0, 0, 0.08);
backdrop-filter: blur(6px) saturate(130%);
-webkit-backdrop-filter: blur(6px) saturate(130%);
}
.theme-dark .menu {
background-color: var(--glass-bg);
border-color: var(--glass-border);
box-shadow: var(--shadow-overlay-dark);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
/* Disable glass effects for menus/popovers/suggestions */
body.disable-glass-menus :is(.popover, .prompt, .suggestion-container, .menu, .dropdown-menu, .modal) {
background-color: var(--background-primary) !important;
border-color: rgba(var(--primary-color-rgb), .12) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.theme-dark.disable-glass-menus :is(.popover, .prompt, .suggestion-container, .menu, .dropdown-menu, .modal) {
background-color: var(--background-secondary) !important;
border-color: rgba(var(--primary-color-rgb), .2) !important;
}
.menu-item {
padding: var(--s2);
border-radius: var(--r1);
-electron-corner-smoothing: var(--squircle-btn);
cursor: pointer;
transition: background-color var(--fast);
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-block: var(--s1);
margin-inline: 0;
}
/* Modal Styling */
.modal-container {
background-color: rgba(0, 0, 0, .5);
}
.theme-light .modal-container {
background-color: rgba(0, 0, 0, .1);
}
.modal {
background:
linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.08) 0%, var(--glass-bg) 100%);
border: var(--border-thin) solid var(--glass-border);
border-radius: var(--r4);
-electron-corner-smoothing: var(--squircle-main);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px) saturate(160%) brightness(1.03);
-webkit-backdrop-filter: blur(12px) saturate(160%) brightness(1.03);
overflow: hidden;
}
.theme-light .modal.mod-settings {
background: var(--background-primary);
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.theme-light .modal {
background:
linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.06) 0%, rgba(var(--background-primary-rgb), 0.92) 100%);
border-color: rgba(0, 0, 0, 0.08);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
backdrop-filter: blur(8px) saturate(140%) brightness(1.06);
-webkit-backdrop-filter: blur(8px) saturate(140%) brightness(1.06);
}
.theme-dark .modal {
background:
linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.12) 0%, var(--glass-bg) 100%);
border-color: var(--glass-border);
box-shadow:
0 16px 44px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
backdrop-filter: blur(14px) saturate(150%) brightness(0.98);
-webkit-backdrop-filter: blur(14px) saturate(150%) brightness(0.98);
}
.modal-title {
font-weight: var(--weight-semibold);
font-size: 1.1em;
color: var(--text-normal);
padding-block: var(--s3);
padding-inline: var(--s4);
border-block-end: var(--border-thin) solid rgba(var(--primary-color-rgb), .1);
}
.modal-content {
padding-block: var(--s4);
padding-inline: var(--s4);
}
.modal-close-button {
color: var(--text-muted);
transition: color var(--transition-ui), transform var(--transition-ui);
}
.modal-close-button:hover {
color: var(--primary-color);
transform: scale(1.1);
box-shadow: var(--accent-glow);
}
/* 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);
-electron-corner-smoothing: var(--squircle-btn);
}
.search-input-container input {
line-height: 1.2;
padding-block: 0.35em;
padding-inline-start: 25px;
}
/* Dropdown options */
.dropdown-menu {
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-main);
overflow: hidden;
}
/* Ribbon Styling */
.workspace-ribbon {
background-color: var(--glass-bg);
border-inline-end: var(--border-thin) solid var(--glass-border);
}
.theme-dark .workspace-ribbon {
background-color: var(--glass-bg);
border-inline-end-color: var(--glass-border);
}
.workspace-ribbon-collapse-btn {
color: var(--text-muted);
transition: color var(--transition-ui), transform var(--transition-ui);
}
.workspace-ribbon-collapse-btn:hover {
color: var(--primary-color);
transform: scale(1.1);
box-shadow: var(--accent-glow);
}
/* 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-block: 2px;
margin-inline: 0;
transition: color var(--transition-ui), background-color var(--transition-ui), transform var(--transition-ui);
}
.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);
box-shadow: var(--accent-glow);
}
.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 var(--transition-ui), background-color var(--transition-ui), transform var(--transition-ui);
}
.view-actions .clickable-icon:hover {
color: var(--primary-color);
background-color: rgba(var(--primary-color-rgb), .1);
transform: scale(1.1);
box-shadow: var(--accent-glow);
}
.view-actions .clickable-icon:active {
transform: scale(0.95);
}
/* Universal press feedback — Apple presses every interactive element */
button:active,
.clickable-icon:active,
.mod-cta:active {
transform: scale(0.94);
}
/* Titlebar Buttons */
.titlebar-button {
color: var(--text-muted);
transition: color var(--transition-ui), background-color var(--transition-ui);
}
.titlebar-button:hover {
color: var(--text-normal);
background-color: rgba(var(--primary-color-rgb), .1);
box-shadow: var(--accent-glow);
}
.titlebar-button.mod-close:hover {
background-color: #e74c3c;
color: white;
}
/* Unified Accent Glow for Buttons and Interactive Controls */
button:hover,
.mod-cta:hover,
.clickable-icon:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.checkbox-container:hover,
.vertical-tab-nav-item:hover,
.setting-item:hover,
.suggestion-item:hover,
.menu-item:hover,
.dropdown:hover,
.combobox-button:hover,
.multi-select-container:hover {
box-shadow: var(--accent-glow);
}
body.disable-shadows {
--shadow-1: none !important;
--shadow-2: none !important;
--shadow-3: none !important;
--shadow-4: none !important;
--shadow-overlay: none !important;
--shadow-overlay-dark: none !important;
}
/* ============================== */
/* LAYOUT: CARD INTERFACE */
/* ============================== */
/* Variables */
body.layout-card {
--card-bg: var(--background-primary);
--card-radius: 20px;
}
/* Workspace leaf wrapper (desktop only) */
body:not(.is-mobile).layout-card .workspace-leaf {
background-color: transparent !important;
margin: 5px;
}
/* Leaf content - THE CARD (desktop only) */
body:not(.is-mobile).layout-card .workspace-leaf-content {
background-color: var(--card-bg) !important;
border-radius: var(--card-radius);
transform: none !important;
}
/* Tab headers - transparent background (desktop only) */
body:not(.is-mobile).layout-card .workspace-tab-header-container {
background-color: transparent !important;
}
/* Remove all borders from EVERYTHING (desktop only) */
body:not(.is-mobile).layout-card .workspace-leaf,
body:not(.is-mobile).layout-card .workspace-tab-header-container,
body:not(.is-mobile).layout-card .workspace-split,
body:not(.is-mobile).layout-card .workspace-leaf-resize-handle,
body:not(.is-mobile).layout-card .sidebar-left,
body:not(.is-mobile).layout-card .sidebar-right,
body:not(.is-mobile).layout-card .side-dock-plugin-panel,
body:not(.is-mobile).layout-card .side-dock-plugin-panel-inner {
border-inline-end: none !important;
border-inline-start: none !important;
border-block-start: none !important;
border-block-end: none !important;
}
/* === MIDDLE PANEL FIX === (desktop only) */
body:not(.is-mobile).layout-card .workspace-split,
body:not(.is-mobile).layout-card .workspace-split.mod-vertical,
body:not(.is-mobile).layout-card .workspace-split.mod-horizontal {
background-color: var(--background-secondary) !important;
border-radius: 0;
border: none !important;
box-shadow: none;
transform: none !important;
z-index: auto !important;
}
body:not(.is-mobile).layout-card .workspace-split:hover,
body:not(.is-mobile).layout-card .workspace-split:focus,
body:not(.is-mobile).layout-card .workspace-split:focus-within,
body:not(.is-mobile).layout-card .workspace-split.mod-vertical:hover,
body:not(.is-mobile).layout-card .workspace-split.mod-vertical:focus,
body:not(.is-mobile).layout-card .workspace-split.mod-vertical:focus-within,
body:not(.is-mobile).layout-card .workspace-split.mod-horizontal:hover,
body:not(.is-mobile).layout-card .workspace-split.mod-horizontal:focus,
body:not(.is-mobile).layout-card .workspace-split.mod-horizontal:focus-within {
background-color: var(--background-secondary) !important;
border-radius: 0;
border: none !important;
box-shadow: none;
transform: none !important;
z-index: auto !important;
}
/* View header fixes (desktop only) */
body:not(.is-mobile).layout-card .view-header {
border: none !important;
border-block-end: none !important;
box-shadow: none;
transition: none;
transform: none !important;
}
/* Add bottom padding for card effect (desktop only) */
body:not(.is-mobile).layout-card .workspace-leaf-content {
margin-block-end: 20px;
}
/* Tab header hover scale effect - sidebars only (desktop only) */
body:not(.is-mobile).layout-card .workspace-split.mod-left-split .workspace-tab-header-inner:hover,
body:not(.is-mobile).layout-card .workspace-split.mod-right-split .workspace-tab-header-inner:hover {
transform: scale(1.05) !important;
transition: transform var(--transition-ui);
}
body:not(.is-mobile).layout-card .workspace-split.mod-left-split .workspace-tab-header-inner,
body:not(.is-mobile).layout-card .workspace-split.mod-right-split .workspace-tab-header-inner {
transition: transform var(--transition-ui);
}
/* 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: 8px 5px 1px 5px !important;
border: none !important;
height: 50px !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-container .workspace-tab-header-container-inner {
background-color: rgba(var(--primary-color-rgb), 0.08) !important;
border-radius: var(--radius-pill);
padding: 1px 4px 1px !important;
margin: 0 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);
height: var(--height-button) !important;
margin: 0 !important;
padding: 0 12px !important;
background-color: transparent !important;
transition: background-color var(--transition-ui), transform var(--transition-ui), box-shadow var(--transition-ui), border-radius var(--transition-ui);
border: none !important;
box-shadow: none;
}
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);
border: none !important;
box-shadow: none;
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-inline-start: 4px !important;
margin-inline-start: 80px !important;
margin-inline-end: 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-inline-start: 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: var(--radius-pill);
margin: 4px 12px 10px !important;
padding: 2px 12px !important;
border: none !important;
transition: background-color var(--transition-ui), transform var(--transition-ui), box-shadow var(--transition-ui), color var(--transition-ui);
cursor: pointer;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: var(--height-button) !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);
}
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-block: 0;
padding-inline: 0;
border-radius: var(--radius-pill);
background-color: rgba(var(--primary-color-rgb), 0.4);
transition: width 0.32s var(--ease-apple), height 0.32s var(--ease-apple), background-color var(--slow), box-shadow var(--slow), opacity var(--slow);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
gap: 0;
z-index: 10;
border: none !important;
box-shadow: none;
opacity: 0.6;
}
body:not(.is-mobile).enable-floating-nav .nav-buttons-container:hover {
width: fit-content;
height: var(--height-input);
background-color: var(--background-secondary-alt);
box-shadow: var(--shadow-2);
overflow: visible;
opacity: 1;
gap: 4px;
margin-block-start: 7px !important;
margin-block-end: 5px !important;
}
body:not(.is-mobile).enable-floating-nav .nav-buttons-container>.clickable-icon {
opacity: 0;
transition: opacity var(--transition-ui), transform var(--transition-ui);
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: var(--radius-pill);
padding: 2px 4px !important;
margin: 6px 12px !important;
gap: 2px !important;
height: var(--height-button-sm) !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);
height: 26px !important;
width: 26px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: transparent !important;
transition: background-color var(--transition-ui), box-shadow var(--transition-ui), color var(--transition-ui), transform var(--transition-ui);
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);
box-shadow:
0 4px 10px rgba(0, 0, 0, var(--opacity-hover)),
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: var(--radius-pill);
transition: background-color var(--transition-ui), color var(--transition-ui);
cursor: pointer;
margin-block-end: 4px !important;
border: none !important;
box-shadow: none;
}
.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: var(--radius-pill);
font-size: 0.85em;
color: var(--text-muted);
transition: background-color var(--transition-ui), color var(--transition-ui);
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);
padding: 10px !important;
margin-block-start: 8px !important;
box-shadow: none;
}
/* 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-block-end: var(--s4);
padding: var(--s3) !important;
border: none;
box-shadow: none;
}
body.layout-card .search-result-file-match {
background-color: transparent !important;
border: none !important;
box-shadow: none;
padding: 6px 10px !important;
border-radius: var(--r1);
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-block: 0;
padding-inline: 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);
margin-block-end: 6px !important;
padding: 6px 12px 6px 16px !important;
transition: background-color var(--transition-ui), color var(--transition-ui), box-shadow var(--transition-ui), transform var(--transition-ui);
color: var(--text-normal) !important;
display: flex !important;
align-items: center !important;
box-shadow: none;
}
.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: var(--radius-pill);
font-size: 0.75em !important;
font-weight: var(--weight-bold) !important;
border: none !important;
}
/* Nested Tags Spacing */
.tag-container .tree-item-children {
padding-inline-start: 16px !important;
margin-block-start: 4px !important;
border-inline-start: none !important;
}
/* Show Header on Hover */
body.show-header-on-hover .view-header {
background-color: transparent !important;
border-block-end: none !important;
transition: background-color var(--transition-ui);
}
/* 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 var(--transition-ui), transform var(--transition-ui);
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);
}
body.show-header-on-hover .view-header:hover {
background-color: transparent !important;
border-block-end: none !important;
}
/* Fix for Card Layout if enabled */
body.show-header-on-hover.layout-card .view-header:hover {
background-color: transparent !important;
border-block-end: 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;
border: var(--border-thin) solid rgba(255, 255, 255, 0.2) !important;
border-inline-start: var(--border-heavy) solid var(--blockquote-border-color) !important;
border-block-end: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, var(--opacity-subtle));
}
.theme-dark .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.38), rgba(var(--background-secondary-rgb), 0.22)) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !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, var(--opacity-divider));
border: var(--border-thin) solid rgba(255, 255, 255, var(--opacity-light-overlay)) !important;
border-inline-start: var(--border-heavy) solid var(--blockquote-border-color) !important;
}
/* ============================== */
/* Bold Dramatic Blockquote */
/* ============================== */
/* Bold Dramatic - Light Mode */
.blockquote-style-bold :is(.markdown-preview-view blockquote, .markdown-rendered blockquote, div:not(.CodeMirror-activeline)>.HyperMD-quote, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote) {
background:
radial-gradient(ellipse at top left, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(var(--primary-color-rgb), 0.15) 0%, transparent 50%),
linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.14) 0%, rgba(var(--background-secondary-rgb), 0.85) 100%) !important;
border: var(--border-heavy) solid var(--blockquote-border-color) !important;
border-inline-start: 6px solid var(--blockquote-border-color) !important;
border-radius: var(--r4);
-electron-corner-smoothing: var(--squircle-main) !important;
box-shadow:
0 0 0 2px rgba(var(--primary-color-rgb), 0.12),
0 6px 20px rgba(0, 0, 0, var(--opacity-divider)),
inset 0 0 20px rgba(var(--primary-color-rgb), 0.05) !important;
position: relative !important;
overflow: hidden !important;
}
/* Bold Dramatic - Double outline ring */
.blockquote-style-bold :is(.markdown-preview-view blockquote, .markdown-rendered blockquote)::before {
content: '' !important;
position: absolute !important;
inset-block-start: -3px !important;
inset-inline-start: -3px !important;
inset-inline-end: -3px !important;
inset-block-end: -3px !important;
border: var(--border-thin) solid rgba(var(--primary-color-rgb), 0.18) !important;
border-radius: var(--r4);
pointer-events: none !important;
z-index: -1 !important;
}
/* Bold Dramatic - Source view bar */
.blockquote-style-bold .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote::before {
inline-size: 6px !important;
border-radius: var(--r4) 0 0 var(--r4);
}
/* Bold Dramatic - Dark Mode */
.theme-dark .blockquote-style-bold :is(.markdown-preview-view blockquote, .markdown-rendered blockquote, div:not(.CodeMirror-activeline)>.HyperMD-quote, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote) {
background:
radial-gradient(ellipse at top left, rgba(var(--primary-color-rgb), 0.28) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 50%),
linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.2) 0%, rgba(var(--background-secondary-rgb), 0.65) 100%) !important;
box-shadow:
0 0 0 2px rgba(var(--primary-color-rgb), 0.22),
0 6px 20px rgba(0, 0, 0, 0.35),
inset 0 0 20px rgba(var(--primary-color-rgb), 0.08) !important;
}
/* Bold Dramatic - Hover */
.blockquote-style-bold :is(.markdown-preview-view blockquote, .markdown-rendered blockquote, div:not(.CodeMirror-activeline)>.HyperMD-quote, .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote):hover {
border-width: 4px !important;
border-inline-start-width: 8px !important;
box-shadow:
0 0 0 3px rgba(var(--primary-color-rgb), 0.2),
0 8px 24px rgba(0, 0, 0, var(--opacity-overlay)),
inset 0 0 25px rgba(var(--primary-color-rgb), 0.08) !important;
transform: translateY(-2px) scale(1.01) !important;
}
/* ============================== */
/* ACCESSIBILITY FEATURES */
/* ============================== */
/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================== */
/* MOBILE & iPAD FIXES */
/* ============================== */
/* MOBILE SCROLLING: let Obsidian handle it natively.
Do NOT add overflow, overscroll-behavior, height, or -webkit-overflow-scrolling
overrides here — they fight iOS WebKit and cause oscillating scroll. */
/* Strip all theme `contain` / `will-change` hints on mobile — they break iOS scroll containment */
body.is-mobile :is(
.workspace-leaf-content,
.view-content,
.markdown-preview-view,
.markdown-reading-view,
.markdown-source-view,
.inline-title,
.nav-files-container,
.metadata-container,
.workspace-split,
.workspace-split.mod-left-split,
.workspace-split.mod-right-split,
.heading-style-glass :is(h1, h2, h3, h4, h5, h6)
) {
contain: none !important;
will-change: auto !important;
}
/* Status bar: let Obsidian's default layout handle it on mobile */
body.is-mobile .status-bar {
position: relative;
inset: unset;
transform: none;
}
/* iOS safe-area awareness — keep bottom-anchored popovers clear of the home indicator */
body.is-mobile .menu,
body.is-mobile .suggestion-container,
body.is-mobile .prompt {
padding-block-end: max(var(--size-2-3, 8px), var(--safe-area-inset-bottom, 0px));
}
/* Phone bottom-sheet styling — round only the top corners so menus feel like native iOS sheets */
.is-phone .menu {
border-radius: var(--r4) var(--r4) 0 0;
overflow: hidden;
}
/* Fix heading backgrounds wrapping poorly on narrow screens */
body.is-mobile .heading-style-badge .cm-line:is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3) .cm-formatting-header + span {
display: inline !important;
white-space: normal !important;
word-break: break-word !important;
}
/* Remove hover effects on touch devices - they cause stuck states */
@media (hover: none) and (pointer: coarse) {
/* Catch-all: kill any hover-driven transform on touch (iOS fires phantom hovers during scroll) */
*:hover {
transform: none !important;
}
/* Remove all translateY hover effects */
.metadata-container:hover,
.view-header:hover,
.workspace-tab-header:hover,
.nav-file:hover,
.nav-folder:hover,
.tree-item-self:hover {
transform: none !important;
}
/* Remove hover backgrounds on cards */
body.layout-card .workspace-leaf:hover {
box-shadow: none;
}
/* Simplify link hovers on touch */
.markdown-rendered a:hover,
.markdown-rendered .internal-link:hover {
transform: none !important;
}
}
/* Remove -electron-corner-smoothing on mobile (ignored on WebKit anyway) */
body.is-mobile {
* {
-electron-corner-smoothing: unset !important;
}
}
/* Fix heading pill backgrounds on mobile - prevent multi-line wrapping issues */
body.is-mobile.heading-style-badge {
.cm-line.HyperMD-header .cm-formatting-header + span,
.markdown-rendered :is(h1, h2, h3, h4, h5, h6) {
display: inline !important;
padding-inline: 0.5em !important;
padding-block: 0.25em !important;
box-decoration-break: clone !important;
-webkit-box-decoration-break: clone !important;
}
}
/* Fix properties/metadata card overflow on iPad */
body.is-mobile .metadata-container,
body.is-mobile.layout-card .metadata-container {
background: var(--background-secondary) !important;
background-color: var(--background-secondary) !important;
border: 1px solid var(--background-modifier-border) !important;
border-radius: var(--radius-m);
overflow: visible !important;
box-shadow: var(--shadow-s);
padding: 16px !important;
}
/* Fix tab scrolling on mobile */
body.is-mobile .workspace-tab-header-container {
overflow-x: auto !important;
}
/* Ensure readable font sizes on small screens */
@media (max-width: 768px) {
body {
font-size: 16px !important;
}
.markdown-preview-view,
.markdown-source-view {
font-size: 1em !important;
}
/* Adjust heading sizes on mobile */
.markdown-rendered h1,
.cm-header-1 {
font-size: 1.8em !important;
}
.markdown-rendered h2,
.cm-header-2 {
font-size: 1.5em !important;
}
.markdown-rendered h3,
.cm-header-3 {
font-size: 1.3em !important;
}
}
/* Fix card layout specifically on iPad (wider screens but still touch) */
@media (min-width: 768px) and (max-width: 1024px) and (hover: none) {
body.layout-card .workspace-leaf {
margin: 8px !important;
}
}
/* === CRITICAL MOBILE OVERRIDE: Force metadata background === */
body.is-mobile .metadata-container {
transform: none !important;
background: hsl(var(--accent-h), 12%, 15%) !important;
background-color: hsl(var(--accent-h), 12%, 15%) !important;
}
.theme-light.is-mobile .metadata-container {
background: hsl(var(--accent-h), 15%, 92%) !important;
background-color: hsl(var(--accent-h), 15%, 92%) !important;
}
body.is-mobile .metadata-content,
body.is-mobile .metadata-properties-heading {
background: transparent !important;
background-color: transparent !important;
}
/* ============================== */
/* DEPTH-AWARE SHADOWS */
/* ============================== */
/* Base depth system - 3 layers for realistic depth */
body.depth-shadows {
--depth-1: 0 1px 2px rgba(0, 0, 0, 0.05),
0 2px 4px rgba(0, 0, 0, 0.03);
--depth-2: 0 2px 4px rgba(0, 0, 0, 0.06),
0 4px 8px rgba(0, 0, 0, 0.04),
0 8px 16px rgba(0, 0, 0, 0.02);
--depth-3: 0 4px 8px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(0, 0, 0, 0.06),
0 16px 32px rgba(0, 0, 0, 0.04);
--depth-4: 0 8px 16px rgba(0, 0, 0, 0.1),
0 16px 32px rgba(0, 0, 0, 0.08),
0 32px 64px rgba(0, 0, 0, 0.06);
}
body.depth-shadows.theme-dark {
--depth-1: 0 1px 2px rgba(0, 0, 0, 0.2),
0 2px 4px rgba(0, 0, 0, 0.15);
--depth-2: 0 2px 4px rgba(0, 0, 0, 0.25),
0 4px 8px rgba(0, 0, 0, 0.2),
0 8px 16px rgba(0, 0, 0, 0.15);
--depth-3: 0 4px 8px rgba(0, 0, 0, 0.3),
0 8px 16px rgba(0, 0, 0, 0.25),
0 16px 32px rgba(0, 0, 0, 0.2);
--depth-4: 0 8px 16px rgba(0, 0, 0, 0.35),
0 16px 32px rgba(0, 0, 0, 0.3),
0 32px 64px rgba(0, 0, 0, 0.25);
}
/* Callouts, Metadata, Canvas cards - depth 2 base */
body.depth-shadows :is(.callout, .metadata-container, .canvas-card) {
box-shadow: var(--depth-2);
transition: box-shadow 0.3s var(--ease-bounce-sm), transform 0.3s var(--ease-bounce-sm);
}
body.depth-shadows .callout:hover {
box-shadow: var(--depth-3);
transform: translateY(-2px) !important;
}
body.depth-shadows .metadata-container:hover {
box-shadow: var(--depth-3);
transform: translateY(-1px) !important;
}
/* Canvas cards - depth 4 on hover */
body.depth-shadows .canvas-card:hover {
box-shadow: var(--depth-4);
transform: translateY(-3px) scale(1.01) !important;
}
/* Card layout leaves - depth 2 */
body.depth-shadows:not(.is-mobile).layout-card .workspace-leaf-content {
box-shadow: var(--depth-2);
transition: box-shadow 0.3s var(--ease-bounce-sm);
overflow: hidden !important;
}
body.depth-shadows:not(.is-mobile).layout-card .workspace-leaf:hover .workspace-leaf-content {
box-shadow: var(--depth-3);
}
/* Modals - depth 4 for prominence */
body.depth-shadows .modal-container .modal {
box-shadow: var(--depth-4);
}
/* Popovers - depth 3 */
body.depth-shadows .popover {
box-shadow: var(--depth-3);
}
/* Suggestions dropdown - depth 3 */
body.depth-shadows .suggestion-container {
box-shadow: var(--depth-3);
}
/* Menu - depth 3 */
body.depth-shadows .menu {
box-shadow: var(--depth-3);
}
/* Code blocks - subtle depth 1 */
body.depth-shadows :is(.markdown-rendered pre, .markdown-preview-view pre, .markdown-source-view.mod-cm6 .HyperMD-codeblock) {
box-shadow: var(--depth-1);
transition: box-shadow var(--slow);
}
body.depth-shadows :is(.markdown-rendered pre:hover, .markdown-preview-view pre:hover) {
box-shadow: var(--depth-2);
}
/* Buttons - depth 1 with depth 2 on hover */
body.depth-shadows .button,
body.depth-shadows button:not(.clickable-icon) {
box-shadow: var(--depth-1);
transition: var(--transition-depth);
}
body.depth-shadows .button:hover,
body.depth-shadows button:not(.clickable-icon):hover {
box-shadow: var(--depth-2);
transform: translateY(-1px) !important;
}
/* Tags in properties - subtle depth */
body.depth-shadows .multi-select-pill {
box-shadow: var(--depth-1);
transition: box-shadow var(--transition-ui), transform var(--transition-ui);
}
body.depth-shadows .multi-select-pill:hover {
box-shadow: var(--depth-2);
transform: translateY(-1px) !important;
}
/* File tabs - depth 1 with depth 2 on active/hover */
body.depth-shadows .workspace-tab-header {
box-shadow: var(--depth-1);
transition: var(--transition-depth);
}
body.depth-shadows .workspace-tab-header:hover {
box-shadow: var(--depth-2);
}
body.depth-shadows .workspace-tab-header.is-active {
box-shadow: var(--depth-2);
}
/* Sidebar tabs - NO individual shadows, only on the pill container */
/* Icons - subtle depth on hover (ONLY when standalone, not in pills) */
body.depth-shadows .clickable-icon:not(.workspace-tab-header-container *):not(.nav-buttons-container *) {
transition: box-shadow var(--transition-ui), transform var(--transition-ui);
}
body.depth-shadows .clickable-icon:not(.workspace-tab-header-container *):not(.nav-buttons-container *):hover {
box-shadow: var(--depth-1);
transform: translateY(-1px) !important;
}
/* Sidebar nav items - depth on hover */
body.depth-shadows .nav-file-title:hover,
body.depth-shadows .nav-folder-title:hover {
box-shadow: var(--depth-1);
}
/* Tab header pill container in sidebars */
body.depth-shadows:not(.is-mobile).layout-card .workspace-split:is(.mod-left-split, .mod-right-split) .workspace-tab-header-container-inner {
box-shadow: var(--depth-1);
transition: var(--transition-depth);
}
body.depth-shadows:not(.is-mobile).layout-card .workspace-split:is(.mod-left-split, .mod-right-split) .workspace-tab-header-container-inner:hover {
box-shadow: var(--depth-2);
transform: translateY(-1px) !important;
}
/* Nav buttons pill container */
body.depth-shadows .nav-buttons-container {
box-shadow: var(--depth-1);
transition: var(--transition-depth);
}
body.depth-shadows .nav-buttons-container:hover {
box-shadow: var(--depth-2);
transform: translateY(-1px) !important;
}
/* Vault selector - depth 1 */
body.depth-shadows .workspace-sidedock-vault-profile {
box-shadow: var(--depth-1);
}
body.depth-shadows .workspace-sidedock-vault-profile:hover {
box-shadow: var(--depth-2);
}
/* ============================== */
/* TINTED AMBIENT SHADOWS */
/* ============================== */
/* Redefine depth-2/3/4 with a hint of accent colour when depth-warm is active.
Requires depth-shadows to be enabled. Light-mode: warm amber tint. Dark: pure accent. */
body.depth-shadows.depth-warm {
--depth-2: 0 2px 4px rgba(var(--primary-color-rgb), 0.06),
0 4px 8px rgba(var(--primary-color-rgb), 0.04),
0 8px 16px rgba(0, 0, 0, 0.02);
--depth-3: 0 4px 8px rgba(var(--primary-color-rgb), 0.08),
0 8px 16px rgba(var(--primary-color-rgb), 0.06),
0 16px 32px rgba(0, 0, 0, 0.03);
--depth-4: 0 8px 16px rgba(var(--primary-color-rgb), 0.1),
0 16px 32px rgba(var(--primary-color-rgb), 0.07),
0 32px 64px rgba(0, 0, 0, 0.04);
}
body.depth-shadows.depth-warm.theme-dark {
--depth-2: 0 2px 4px rgba(var(--primary-color-rgb), 0.15),
0 4px 8px rgba(var(--primary-color-rgb), 0.1),
0 8px 16px rgba(0, 0, 0, 0.12);
--depth-3: 0 4px 8px rgba(var(--primary-color-rgb), 0.2),
0 8px 16px rgba(var(--primary-color-rgb), 0.14),
0 16px 32px rgba(0, 0, 0, 0.16);
--depth-4: 0 8px 16px rgba(var(--primary-color-rgb), 0.24),
0 16px 32px rgba(var(--primary-color-rgb), 0.18),
0 32px 64px rgba(0, 0, 0, 0.2);
}
/* ============================== */
/* INLINE CODE HIGHLIGHTS */
/* ============================== */
/* Enhanced inline code with accent-colored backgrounds and subtle pulse */
body.inline-code-accent :not(pre) > code {
background: linear-gradient(
135deg,
rgba(var(--primary-color-rgb), 0.1),
rgba(var(--primary-color-rgb), 0.15)
) !important;
border-left: 3px solid var(--primary-color) !important;
padding: 2px 6px 2px 8px !important;
border-radius: var(--radius-s);
font-weight: var(--weight-medium) !important;
animation: code-pulse 3s ease 3 !important;
transition: background var(--transition-ui), transform var(--transition-ui), box-shadow var(--transition-ui);
box-shadow: 0 1px 3px rgba(var(--primary-color-rgb), 0.1);
}
body.inline-code-accent.theme-dark :not(pre) > code {
background: linear-gradient(
135deg,
rgba(var(--primary-color-rgb), 0.15),
rgba(var(--primary-color-rgb), 0.2)
) !important;
box-shadow: 0 1px 3px rgba(var(--primary-color-rgb), 0.15);
}
body.inline-code-accent :not(pre) > code:hover {
background: linear-gradient(
135deg,
rgba(var(--primary-color-rgb), 0.2),
rgba(var(--primary-color-rgb), 0.25)
) !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 6px rgba(var(--primary-color-rgb), 0.2);
animation: none !important;
}
@keyframes code-pulse {
0%, 100% {
opacity: 1;
border-left-color: var(--primary-color);
}
50% {
opacity: 0.95;
border-left-color: rgba(var(--primary-color-rgb), 0.7);
}
}
/* ============================== */
/* RIBBON ENHANCEMENTS */
/* ============================== */
/* Left sidebar ribbon */
.workspace-ribbon.side-dock-ribbon.mod-left {
background-color: var(--background-secondary-alt);
border-right: 1px solid var(--background-modifier-border);
padding: 8px 4px;
}
/* When ribbon is disabled (via Obsidian settings), hide it completely */
body.layout-card:not(.show-ribbon) .workspace-ribbon.side-dock-ribbon.mod-left {
display: none !important;
}
/* Ribbon actions container */
.side-dock-ribbon-action {
margin: 4px 0;
transition: opacity var(--transition-ui), transform var(--transition-ui);
}
/* Ribbon action buttons */
.side-dock-ribbon-action .clickable-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-m);
transition: background-color var(--transition-ui), color var(--transition-ui), transform var(--transition-ui);
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-color);
}
.side-dock-ribbon-action .clickable-icon:hover {
background-color: rgba(var(--primary-color-rgb), 0.1);
color: var(--primary-color);
transform: scale(1.05);
}
/* Active ribbon button */
.side-dock-ribbon-action.is-active .clickable-icon {
background-color: rgba(var(--primary-color-rgb), 0.15);
color: var(--primary-color);
}
/* Ribbon collapse button */
.workspace-ribbon-collapse-btn {
margin-top: 8px;
padding: 4px;
opacity: 0.5;
transition: opacity var(--transition-ui), transform var(--transition-ui);
}
.workspace-ribbon-collapse-btn:hover {
opacity: 1;
transform: translateY(-2px);
}
/* With depth shadows enabled */
body.depth-shadows .side-dock-ribbon-action .clickable-icon:hover {
box-shadow: var(--depth-1);
}
body.depth-shadows .side-dock-ribbon-action.is-active .clickable-icon {
box-shadow: var(--depth-2);
}
/* Card layout specific - Pill container (applies whether sidebar is open or collapsed) */
body.layout-card .workspace-ribbon.side-dock-ribbon.mod-left {
background-color: rgba(var(--primary-color-rgb), 0.08) !important;
border-radius: var(--radius-pill);
border: none !important;
box-shadow: none;
padding: 8px 6px !important;
margin: 12px 4px !important;
margin-top: 80px !important;
width: fit-content !important;
min-height: 0 !important;
height: auto !important;
max-height: max-content !important;
gap: 4px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex-shrink: 0 !important;
overflow: visible !important;
}
/* Fix height consistency when sidebar is collapsed */
body.layout-card .workspace-ribbon.side-dock-ribbon.mod-left.is-collapsed {
height: auto !important;
min-height: 0 !important;
}
/* macOS specific - more space for traffic lights */
body.mod-macos.is-hidden-frameless.layout-card .workspace-ribbon.side-dock-ribbon.mod-left:not(.is-collapsed) {
margin-top: 90px !important;
}
/* When left sidebar is closed, ensure ribbon still looks the same */
body.layout-card:not(.is-left-sidedock-open) .workspace-ribbon.side-dock-ribbon.mod-left:not(.is-collapsed) {
background-color: rgba(var(--primary-color-rgb), 0.08) !important;
border-radius: var(--radius-pill);
border: none !important;
box-shadow: none;
}
/* Hide/fix :before pseudo-element in card layout */
body.layout-card .workspace-ribbon.mod-left:before {
display: none !important;
}
body.layout-card .side-dock-ribbon-action {
margin: 0 !important;
}
body.layout-card .side-dock-ribbon-action .clickable-icon {
background-color: transparent !important;
border-radius: var(--r3);
}
body.layout-card .side-dock-ribbon-action .clickable-icon:hover {
background-color: rgba(var(--background-secondary-rgb), 0.5) !important;
}
body.layout-card .side-dock-ribbon-action.is-active .clickable-icon {
background-color: var(--background-primary) !important;
border-radius: var(--r3);
}
/* Collapse button in card layout */
body.layout-card .workspace-ribbon-collapse-btn {
margin-top: 4px !important;
}
/* Depth shadows for ribbon pill - DISABLED for seamless look */
body.depth-shadows.layout-card .workspace-ribbon.side-dock-ribbon.mod-left:not(.is-collapsed) {
box-shadow: none;
}
/* Ribbon autohide functionality when ribbon is disabled in Obsidian settings */
/* When .show-ribbon is absent, hide the ribbon completely */
body:not(.is-mobile).layout-card:not(.show-ribbon) .workspace-ribbon.side-dock-ribbon.mod-left {
display: none !important;
}
/* Fix ribbon container background to match theme in card layout */
/* The issue was .workspace.is-left-sidedock-open having #F8F8FE background */
body.layout-card .workspace.is-left-sidedock-open,
body.layout-card .workspace {
background: var(--background-secondary) !important;
}
/* ========================================= */
/* STYLE SETTINGS PANEL UI */
/* ========================================= */
/* Section container backgrounds for visual grouping */
/* h2 level */
.style-settings-heading[data-level="2"] + .style-settings-container {
background-color: rgba(var(--background-secondary-rgb), 0.55);
border-radius: var(--r1);
margin-bottom: 4px;
padding: 2px 0;
}
/* h3 level: deeper, nested inside h2 container */
.style-settings-container > .style-settings-heading[data-level="3"] + .style-settings-container {
background-color: rgba(var(--background-secondary-rgb), 0.75);
border-radius: var(--r1);
margin: 2px 6px;
padding: 2px 0;
}
/* ============================== */
/* LOW CONTRAST MODE */
/* ============================== */
/* Unifies the window on the season's deeper panel tone (Baseline-style
"tonal"). Must pair .low-contrast with .theme-* to outrank season
selectors; stays on body so var() reads each season's literals.
--background-secondary-alt is left alone so table headers and active
states keep definition. */
body.low-contrast.theme-light, body.low-contrast.theme-dark {
--background-primary: var(--background-secondary);
--background-primary-rgb: var(--background-secondary-rgb);
--code-background: var(--background-secondary-alt);
--divider-color: color-mix(in srgb, var(--text-normal) 9%, transparent);
/* Obsidian's default --hr-color is a neutral gray that collides with
some seasons' deeper panel tone (autumn/paper/melange) — make it
season-aware so --- rules stay visible */
--hr-color: color-mix(in srgb, var(--text-normal) 22%, transparent);
}
/* Card layout: the card stays on the unified tone — do NOT elevate
--card-bg, it only shows through the view-header strip and reads as a
pale title bar. Only the active tab pill lifts above the surface. */
body.low-contrast.theme-light:not(.is-mobile).layout-card .workspace-tab-header.is-active {
background-color: color-mix(in srgb, var(--background-primary) 45%, white) !important;
}
body.low-contrast.theme-dark:not(.is-mobile).layout-card .workspace-tab-header.is-active {
background-color: color-mix(in srgb, var(--background-primary) 92%, white) !important;
}
/* Inactive tabs: quiet text, no chip until hover */
body.low-contrast:not(.is-mobile).layout-card .workspace-tab-header:not(.is-active) {
background-color: transparent !important;
}
body.low-contrast:not(.is-mobile).layout-card .workspace-tab-header:not(.is-active):hover {
background-color: color-mix(in srgb, var(--text-normal) 6%, transparent) !important;
}
/* Ribbon melts into the unified surface */
body.low-contrast .workspace-ribbon {
background-color: transparent;
border-inline-end-color: transparent;
}
/* ============================== */
/* HEADING COLOUR INTENSITY */
/* ============================== */
/* Re-mixes every season's heading text colours from their -rgb triplets,
so one rule covers all seasons. Pill/underline backgrounds keep the pure
-rgb colours either way. Pairing with .theme-* outranks the season
selectors; no self-reference (reads -rgb, writes the colour var). */
/* Custom per-level heading colours (Style Settings pickers). Must come
BEFORE the Muted/Vivid rules: equal specificity, so they win the
--heading-N cascade later while re-mixing from the custom -rgb set here. */
body.custom-heading-colors.theme-light, body.custom-heading-colors.theme-dark {
--heading-primary: var(--custom-h1, #c77b8b);
--heading-secondary: var(--custom-h2, #bc5c00);
--heading-tertiary: var(--custom-h3, #a08428);
--heading-quaternary: var(--custom-h4, #6e9b72);
--heading-quinary: var(--custom-h5, #7892bd);
--heading-senary: var(--custom-h6, #ad6bc0);
--heading-primary-rgb: var(--custom-h1-rgb, 199, 123, 139);
--heading-secondary-rgb: var(--custom-h2-rgb, 188, 92, 0);
--heading-tertiary-rgb: var(--custom-h3-rgb, 160, 132, 40);
--heading-quaternary-rgb: var(--custom-h4-rgb, 110, 155, 114);
--heading-quinary-rgb: var(--custom-h5-rgb, 120, 146, 189);
--heading-senary-rgb: var(--custom-h6-rgb, 173, 107, 192);
}
/* Muted: deep tones a breath away from the text colour */
body.heading-color-muted.theme-light, body.heading-color-muted.theme-dark {
--heading-primary: color-mix(in srgb, rgb(var(--heading-primary-rgb)) 45%, var(--text-normal));
--heading-secondary: color-mix(in srgb, rgb(var(--heading-secondary-rgb)) 45%, var(--text-normal));
--heading-tertiary: color-mix(in srgb, rgb(var(--heading-tertiary-rgb)) 45%, var(--text-normal));
--heading-quaternary: color-mix(in srgb, rgb(var(--heading-quaternary-rgb)) 45%, var(--text-normal));
--heading-quinary: color-mix(in srgb, rgb(var(--heading-quinary-rgb)) 45%, var(--text-normal));
--heading-senary: color-mix(in srgb, rgb(var(--heading-senary-rgb)) 45%, var(--text-normal));
}
/* Vivid: full palette saturation — funky */
body.heading-color-vivid.theme-light, body.heading-color-vivid.theme-dark {
--heading-primary: rgb(var(--heading-primary-rgb));
--heading-secondary: rgb(var(--heading-secondary-rgb));
--heading-tertiary: rgb(var(--heading-tertiary-rgb));
--heading-quaternary: rgb(var(--heading-quaternary-rgb));
--heading-quinary: rgb(var(--heading-quinary-rgb));
--heading-senary: rgb(var(--heading-senary-rgb));
}
/* ============================== */
/* SEASON-TINTED BODY TEXT */
/* ============================== */
/* Blends the season accent into body text. Reads the -rgb twin (no
self-reference); the slider sets --body-text-tint on body. Every season
holds >= 4.4:1 contrast even at the 40% maximum. */
body.tinted-body-text.theme-light, body.tinted-body-text.theme-dark {
--text-normal: color-mix(in srgb, var(--primary-color) var(--body-text-tint, 20%), rgb(var(--text-normal-rgb)));
}
/* ============================== */
/* SYSTEM FONT (SAN FRANCISCO) */
/* ============================== */
/* On body, not :root — Obsidian layers the user's own font choices
above --font-*-theme, so user-set fonts still win. */
body.system-fonts {
--font-text-theme: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--font-interface-theme: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--font-monospace-theme: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
/* ============================== */
/* QUIET MODE (RAMS REDUCTION) */
/* ============================== */
/* Halve hover lifts for callouts, cards, pills, buttons */
body.terraflow-quiet.depth-shadows .callout:hover,
body.terraflow-quiet.depth-shadows .metadata-container:hover,
body.terraflow-quiet.depth-shadows .canvas-card:hover {
transform: translateY(-1px) !important;
}
body.terraflow-quiet.depth-shadows .button:hover,
body.terraflow-quiet.depth-shadows button:not(.clickable-icon):hover,
body.terraflow-quiet.depth-shadows .multi-select-pill:hover,
body.terraflow-quiet.depth-shadows .nav-buttons-container:hover {
transform: translateY(-1px) !important;
}
/* Soften callout left-border */
body.terraflow-quiet .callout {
border-left-width: 2px !important;
}
/* Desaturate accent backgrounds on highlights and pills */
body.terraflow-quiet .markdown-rendered mark,
body.terraflow-quiet .markdown-preview-view mark,
body.terraflow-quiet .multi-select-pill {
filter: saturate(0.85);
}
/* Replace link hover glow with underline thickening instead */
body.terraflow-quiet :is(
.markdown-rendered a,
.markdown-preview-view a,
.cm-hmd-internal-link,
.cm-url
):hover {
box-shadow: none !important;
text-shadow: none !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 2px !important;
}
/* ============================== */
/* TIGHT HEADING TRACKING */
/* ============================== */
body.heading-tight-tracking :is(
.markdown-rendered h1, .markdown-preview-view h1,
.cm-header-1, .inline-title
) {
letter-spacing: var(--tracking-tight);
}
body.heading-tight-tracking :is(
.markdown-rendered h2, .markdown-preview-view h2,
.cm-header-2
) {
letter-spacing: var(--tracking-tight);
}
body.heading-tight-tracking :is(
.markdown-rendered h3, .markdown-preview-view h3,
.cm-header-3
) {
letter-spacing: var(--tracking-snug);
}
/* ============================== */
/* TABULAR NUMERICS */
/* ============================== */
body.tabular-numerics .metadata-container,
body.tabular-numerics .metadata-property-value {
font-variant-numeric: tabular-nums;
}
body.tabular-numerics .markdown-rendered table,
body.tabular-numerics .markdown-preview-view table {
font-variant-numeric: tabular-nums;
}
body.tabular-numerics .status-bar {
font-variant-numeric: tabular-nums;
}
body.tabular-numerics .nav-file-title,
body.tabular-numerics .nav-folder-title {
font-variant-numeric: tabular-nums;
}
/* ============================== */
/* ACCENT CARET & SELECTION */
/* ============================== */
/* Accent caret */
body.caret-accent .cm-editor .cm-cursor,
body.caret-accent .cm-editor .cm-cursor-primary {
border-left-color: var(--interactive-accent) !important;
border-left-width: 2px !important;
filter: drop-shadow(0 0 3px rgba(var(--primary-color-rgb), 0.6));
}
/* Accent selection — live preview */
body.caret-accent .cm-editor .cm-selectionBackground,
body.caret-accent .cm-editor.cm-focused .cm-selectionBackground {
background: rgba(var(--primary-color-rgb), 0.18) !important;
}
/* Accent selection — reading view */
body.caret-accent .markdown-preview-view ::selection,
body.caret-accent .markdown-rendered ::selection {
background: rgba(var(--primary-color-rgb), 0.2) !important;
}
/* ============================== */
/* FOCUS DOT GRID */
/* ============================== */
/* Faint Bauhaus 24px dot grid behind the editor. Only in live-preview/source, not reading view. */
body.focus-grid .cm-editor {
background-image: radial-gradient(
circle,
rgba(var(--text-normal-rgb, 0, 0, 0), 0.06) 1px,
transparent 1px
);
background-size: 24px 24px;
}
body.focus-grid.theme-dark .cm-editor {
background-image: radial-gradient(
circle,
rgba(255, 255, 255, 0.07) 1px,
transparent 1px
);
background-size: 24px 24px;
}
/* Suppress in reduced-motion / print */
@media print {
body.focus-grid .cm-editor {
background-image: none;
}
}
/* ============================== */
/* CUSTOM ACCENT OVERRIDE */
/* ============================== */
/* When Use Custom Accent is toggled on, remap accent variables to --custom-accent
(injected by Style Settings from the variable-color entry above). */
body.use-custom-accent {
--interactive-accent: var(--custom-accent) !important;
--interactive-accent-hover: var(--custom-accent) !important;
--text-accent: var(--custom-accent) !important;
--link-color: var(--custom-accent) !important;
--link-color-hover: var(--custom-accent) !important;
--checkbox-color: var(--custom-accent) !important;
--blockquote-border-color: var(--custom-accent) !important;
}
/* ============================== */
/* BRAUN TAG CHIPS */
/* ============================== */
/* Override Obsidian's tag CSS variables for a minimal, typographic chip style.
No filled background; hairline border; tight uppercase small-cap tracking. */
body.tag-chips {
--tag-background: transparent;
--tag-background-hover: rgba(var(--primary-color-rgb), 0.07);
--tag-border-color: rgba(var(--primary-color-rgb), 0.3);
--tag-border-color-hover: rgba(var(--primary-color-rgb), 0.55);
--tag-border-width: 1px;
--tag-color: var(--text-muted);
--tag-color-hover: var(--text-accent);
--tag-padding-x: 6px;
--tag-padding-y: 1px;
--tag-radius: 3px;
--tag-size: 0.73em;
--tag-weight: var(--weight-medium);
}
body.tag-chips a.tag {
letter-spacing: 0.05em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
/* Live-preview hashtag spans — style the text portion to match */
body.tag-chips .cm-line .cm-hashtag-end {
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.76em;
font-weight: var(--weight-medium);
color: var(--text-muted);
opacity: 0.85;
}
body.tag-chips .cm-line .cm-hashtag-begin {
opacity: 0.5;
font-size: 0.76em;
}
/* ============================== */
/* ALTERNATE CHECKBOXES */
/* ============================== */
/* Task-state styling inspired by Baseline (github.com/aaaaalexis/obsidian-baseline).
Colors ride the season palette via --callout-* vars so every season recolors them.
Note: Monochrome mode does not desaturate these states. */
/* Replace Obsidian's mask checkmark with a text glyph for alternate states */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line:not([data-task=" "]):not([data-task="x"]):not([data-task="X"]),
.markdown-rendered li.task-list-item:not([data-task=" "]):not([data-task="x"]):not([data-task="X"])
) .task-list-item-checkbox:checked::after {
-webkit-mask-image: none;
mask-image: none;
background-color: transparent;
content: var(--task-glyph, "•");
color: var(--background-primary);
font-size: 12px;
line-height: 1;
}
/* [/] in progress — half fill, no glyph */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"],
.markdown-rendered li.task-list-item[data-task="/"]
) .task-list-item-checkbox:checked {
background: linear-gradient(135deg, var(--checkbox-color) 50%, transparent 50%) !important;
border-color: var(--checkbox-color) !important;
}
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"],
.markdown-rendered li.task-list-item[data-task="/"]
) .task-list-item-checkbox:checked::after {
content: none;
}
/* [-] cancelled */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"],
.markdown-rendered li.task-list-item[data-task="-"]
) .task-list-item-checkbox:checked {
--task-glyph: "–";
background: var(--text-faint) !important;
border-color: var(--text-faint) !important;
}
body.alt-checkboxes :is(
.markdown-rendered li.task-list-item[data-task="-"],
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"]
) {
color: var(--text-faint);
text-decoration: line-through;
text-decoration-color: var(--text-faint);
}
/* [>] forwarded */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"],
.markdown-rendered li.task-list-item[data-task=">"]
) .task-list-item-checkbox:checked {
--task-glyph: "❯";
background: var(--callout-info) !important;
border-color: var(--callout-info) !important;
}
/* [<] scheduled */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="<"],
.markdown-rendered li.task-list-item[data-task="<"]
) .task-list-item-checkbox:checked {
--task-glyph: "❮";
background: var(--callout-video) !important;
border-color: var(--callout-video) !important;
}
/* [?] question */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"],
.markdown-rendered li.task-list-item[data-task="?"]
) .task-list-item-checkbox:checked {
--task-glyph: "?";
background: var(--callout-warning) !important;
border-color: var(--callout-warning) !important;
}
/* [!] important */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"],
.markdown-rendered li.task-list-item[data-task="!"]
) .task-list-item-checkbox:checked {
--task-glyph: "!";
background: var(--callout-danger) !important;
border-color: var(--callout-danger) !important;
}
/* [*] star */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="*"],
.markdown-rendered li.task-list-item[data-task="*"]
) .task-list-item-checkbox:checked {
--task-glyph: "★";
background: var(--callout-warning) !important;
border-color: var(--callout-warning) !important;
}
/* ["] quote */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task='"'],
.markdown-rendered li.task-list-item[data-task='"']
) .task-list-item-checkbox:checked {
--task-glyph: "❝";
background: var(--callout-quote) !important;
border-color: var(--callout-quote) !important;
}
/* [b] bookmark */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="b"],
.markdown-rendered li.task-list-item[data-task="b"]
) .task-list-item-checkbox:checked {
--task-glyph: "b";
background: var(--callout-cite) !important;
border-color: var(--callout-cite) !important;
}
/* [i] information */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="i"],
.markdown-rendered li.task-list-item[data-task="i"]
) .task-list-item-checkbox:checked {
--task-glyph: "i";
background: var(--callout-info) !important;
border-color: var(--callout-info) !important;
}
/* [I] idea */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="I"],
.markdown-rendered li.task-list-item[data-task="I"]
) .task-list-item-checkbox:checked {
--task-glyph: "I";
background: var(--callout-warning) !important;
border-color: var(--callout-warning) !important;
}
/* [p] pro */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="p"],
.markdown-rendered li.task-list-item[data-task="p"]
) .task-list-item-checkbox:checked {
--task-glyph: "▲";
background: var(--callout-success) !important;
border-color: var(--callout-success) !important;
}
/* [c] con */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="c"],
.markdown-rendered li.task-list-item[data-task="c"]
) .task-list-item-checkbox:checked {
--task-glyph: "▼";
background: var(--callout-danger) !important;
border-color: var(--callout-danger) !important;
}
/* [u] up */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="u"],
.markdown-rendered li.task-list-item[data-task="u"]
) .task-list-item-checkbox:checked {
--task-glyph: "↑";
background: var(--callout-success) !important;
border-color: var(--callout-success) !important;
}
/* [d] down */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="d"],
.markdown-rendered li.task-list-item[data-task="d"]
) .task-list-item-checkbox:checked {
--task-glyph: "↓";
background: var(--callout-danger) !important;
border-color: var(--callout-danger) !important;
}
/* [S] savings */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="S"],
.markdown-rendered li.task-list-item[data-task="S"]
) .task-list-item-checkbox:checked {
--task-glyph: "$";
background: var(--callout-success) !important;
border-color: var(--callout-success) !important;
}
/* [k] key */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="k"],
.markdown-rendered li.task-list-item[data-task="k"]
) .task-list-item-checkbox:checked {
--task-glyph: "k";
background: var(--callout-warning) !important;
border-color: var(--callout-warning) !important;
}
/* [f] fire */
body.alt-checkboxes :is(
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="f"],
.markdown-rendered li.task-list-item[data-task="f"]
) .task-list-item-checkbox:checked {
--task-glyph: "f";
background: var(--callout-danger) !important;
border-color: var(--callout-danger) !important;
}
/* ============================== */
/* ENHANCED TABLES */
/* ============================== */
/* Inspired by Baseline (github.com/aaaaalexis/obsidian-baseline) */
/* Live-preview table widget parity with reading-mode striping/hover */
.theme-light .markdown-source-view.mod-cm6 .cm-table-widget table tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, .03);
}
.theme-dark .markdown-source-view.mod-cm6 .cm-table-widget table tbody tr:nth-child(even) {
background-color: rgba(255, 255, 255, .03);
}
.markdown-source-view.mod-cm6 .cm-table-widget table tbody tr:hover {
background-color: rgba(var(--primary-color-rgb), .05);
}
.theme-dark .markdown-source-view.mod-cm6 .cm-table-widget table tbody tr:hover {
background-color: rgba(var(--primary-color-rgb), .08);
}
/* Disable row striping */
body.table-plain-rows :is(.markdown-rendered, .markdown-preview-view) table tbody tr:nth-child(even),
body.table-plain-rows .markdown-source-view.mod-cm6 .cm-table-widget table tbody tr:nth-child(even) {
background-color: transparent;
}
/* Disable row hover highlight */
body.table-no-hover :is(.markdown-rendered, .markdown-preview-view) table tbody tr:hover,
body.table-no-hover.theme-dark :is(.markdown-rendered, .markdown-preview-view) table tbody tr:hover,
body.table-no-hover .markdown-source-view.mod-cm6 .cm-table-widget table tbody tr:hover,
body.table-no-hover.theme-dark .markdown-source-view.mod-cm6 .cm-table-widget table tbody tr:hover {
background-color: transparent;
}
/* Table density */
body.table-style-compact :is(.markdown-rendered, .markdown-preview-view, .markdown-source-view.mod-cm6 .cm-table-widget) table :is(td, th) {
padding-block: var(--s1);
padding-inline: var(--s2);
font-size: 0.92em;
}
body.table-style-relaxed :is(.markdown-rendered, .markdown-preview-view, .markdown-source-view.mod-cm6 .cm-table-widget) table :is(td, th) {
padding-block: var(--s3);
padding-inline: var(--s4);
}
/* ============================== */
/* BLOCK WIDTH (CSSCLASSES) */
/* ============================== */
/* Per-note cssclasses: wide-page, full-page, wide-table, wide-image.
Inspired by Baseline (github.com/aaaaalexis/obsidian-baseline).
--wide-block-width is set by Style Settings on body; consumed with a
110ch fallback only — never defined in this file. */
/* Whole-document widening — rides the existing --file-line-width pipeline */
.markdown-preview-view.wide-page, .markdown-source-view.wide-page {
--file-line-width: min(100ch, 92%);
--editor-max-width: min(100ch, 92%);
--reading-max-width: min(100ch, 92%);
}
.markdown-preview-view.full-page, .markdown-source-view.full-page {
--file-line-width: 96%;
--editor-max-width: 96%;
--reading-max-width: 96%;
}
/* Element-level widening, reading mode: widen the sizer, re-cap every block
at the normal measure, exempt table/image blocks up to --wide-block-width */
.markdown-preview-view:is(.wide-table, .wide-image) .markdown-preview-sizer {
max-width: 100%;
}
.markdown-preview-view:is(.wide-table, .wide-image) .markdown-preview-sizer > div:not(.markdown-preview-pusher) {
max-width: var(--file-line-width);
margin-inline: auto;
}
.markdown-preview-view.wide-table .markdown-preview-sizer > div:has(> table),
.markdown-preview-view.wide-image .markdown-preview-sizer > div:has(img) {
max-width: min(100%, var(--wide-block-width, 110ch));
}
/* Element-level widening, live preview: widen cm-sizer, cap lines, exempt widgets */
.markdown-source-view.mod-cm6:is(.wide-table, .wide-image) .cm-sizer {
max-width: 100%;
}
.markdown-source-view.mod-cm6:is(.wide-table, .wide-image) :is(.cm-line, .inline-title, .metadata-container, .embedded-backlinks) {
max-width: var(--file-line-width);
margin-inline: auto;
}
.markdown-source-view.mod-cm6.wide-table .cm-content > .cm-embed-block.cm-table-widget,
.markdown-source-view.mod-cm6.wide-image .cm-content > .cm-embed-block:has(img) {
max-width: min(100%, var(--wide-block-width, 110ch));
margin-inline: auto;
}
/* Mobile: neutralize widening — small screens are already full-bleed */
body.is-mobile :is(.wide-page, .full-page, .wide-table, .wide-image) {
--wide-block-width: 100%;
}
/* ============================== */
/* P3 VIVID ACCENTS */
/* ============================== */
/* Chroma-boosts the season accent on wide-gamut displays via oklch relative
color from the -rgb twin (no self-reference). Consumers chained to
--primary-color (links, checkboxes, carets) follow automatically; the
Custom Accent override still wins via its !important consumers. */
@media (color-gamut: p3) {
body.p3-accents.theme-light, body.p3-accents.theme-dark {
--primary-color: oklch(from rgb(var(--primary-color-rgb)) l calc(c * 1.18) h);
--emphasis-color: oklch(from rgb(var(--primary-color-rgb)) l calc(c * 1.18) h);
}
}
/* ============================== */
/* BANNERS (CSSCLASS: banner) */
/* ============================== */
/* In-flow cover image, Craft-style: add `banner` to a note's cssclasses and
tag the image ![[image.jpg|banner]] or ![banner](path). Inspired by
Baseline (aaaaalexis); simplified to flow with content instead of
absolute-positioning over the view. `banner-fade` adds a bottom fade. */
:is(.markdown-preview-view.banner, .markdown-source-view.mod-cm6.banner) img[alt="banner"] {
display: block;
width: 100%;
height: var(--banner-height, 240px);
object-fit: cover;
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-main);
}
:is(.markdown-preview-view.banner.banner-fade, .markdown-source-view.mod-cm6.banner.banner-fade) img[alt="banner"] {
border-radius: var(--r3) var(--r3) 0 0;
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
/* Suppress the image toolbar/resize chrome on banner images in live preview */
.markdown-source-view.mod-cm6.banner .image-embed[alt="banner"] .image-resize-handle,
.markdown-source-view.mod-cm6.banner .image-embed[alt="banner"] .image-resize-corner {
display: none !important;
}
/* ============================== */
/* DATAVIEW CARDS (CSSCLASS) */
/* ============================== */
/* Add `cards` to a note's cssclasses to render Dataview tables as a card
grid. Adapted from the Cards snippet by @kepano (MIT) with TerraFlow
tokens. First column reads as the card title. */
:is(.markdown-preview-view.cards, .markdown-source-view.mod-cm6.cards) table.dataview.table-view-table thead {
display: none;
}
:is(.markdown-preview-view.cards, .markdown-source-view.mod-cm6.cards) table.dataview.table-view-table tbody {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--cards-min-width, 180px), 1fr));
gap: var(--s3);
background-color: transparent;
}
:is(.markdown-preview-view.cards, .markdown-source-view.mod-cm6.cards) table.dataview.table-view-table tbody > tr {
display: flex;
flex-direction: column;
background-color: var(--background-secondary);
border: var(--border-thin) solid var(--divider-color);
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-main);
box-shadow: var(--shadow-1);
padding: var(--s2);
overflow: hidden;
transform: none;
}
:is(.markdown-preview-view.cards, .markdown-source-view.mod-cm6.cards) table.dataview.table-view-table tbody > tr:hover {
box-shadow: var(--shadow-2);
}
:is(.markdown-preview-view.cards, .markdown-source-view.mod-cm6.cards) table.dataview.table-view-table tbody > tr > td {
border: none;
background-color: transparent;
padding: var(--s1) var(--s2);
white-space: normal;
text-wrap: wrap;
}
:is(.markdown-preview-view.cards, .markdown-source-view.mod-cm6.cards) table.dataview.table-view-table tbody > tr > td:first-child {
font-weight: var(--weight-semibold);
}
:is(.markdown-preview-view.cards, .markdown-source-view.mod-cm6.cards) table.dataview.table-view-table tbody > tr > td:not(:first-child) {
font-size: var(--font-smaller, 0.92em);
color: var(--text-muted);
}
:is(.markdown-preview-view.cards, .markdown-source-view.mod-cm6.cards) table.dataview.table-view-table tbody > tr > td img {
width: 100%;
object-fit: cover;
border-radius: var(--r2);
-electron-corner-smoothing: var(--squircle-main);
}
/* ============================== */
/* BASES POLISH */
/* ============================== */
/* Season-aware hover + card styling for the native Bases plugin */
.bases-tbody .bases-tr:hover {
background-color: rgba(var(--primary-color-rgb), .05);
}
.theme-dark .bases-tbody .bases-tr:hover {
background-color: rgba(var(--primary-color-rgb), .08);
}
.bases-cards-item {
border-radius: var(--r3);
-electron-corner-smoothing: var(--squircle-main);
background-color: var(--background-secondary);
box-shadow: var(--shadow-1);
transition: box-shadow var(--transition-ui);
}
.bases-cards-item:hover {
box-shadow: var(--shadow-2);
}
.bases-cards-label {
color: var(--text-muted);
}
Reference in a new issue View git blame Copy permalink