/* @settings name: TerraFlow id: seasonal-themes settings: - id: seasonal-heading title: Color Scheme type: heading level: 2 collapsed: true - 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 - label: ๐ŸŒ† Tokyo Night value: tokyo-theme - id: use-custom-accent title: Custom Accent Color description: Enable to override the seasonal accent with the color below type: class-toggle default: false - id: custom-accent title: Accent Color (when override is on) description: The accent color 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 Color Intensity description: Muted blends headings into the text color (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 color 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 Colors description: Override the season's H1โ€“H6 colors with your own type: heading level: 3 collapsed: true - id: custom-heading-colors title: Custom Heading Colors description: Use the colors below instead of the season palette โ€” composes with Heading Color Intensity type: class-toggle default: false - id: custom-h1 title: H1 Color type: variable-color format: hex opacity: false default: "#c77b8b" alt-format: - id: custom-h1-rgb format: rgb-values - id: custom-h2 title: H2 Color type: variable-color format: hex opacity: false default: "#bc5c00" alt-format: - id: custom-h2-rgb format: rgb-values - id: custom-h3 title: H3 Color type: variable-color format: hex opacity: false default: "#a08428" alt-format: - id: custom-h3-rgb format: rgb-values - id: custom-h4 title: H4 Color type: variable-color format: hex opacity: false default: "#6e9b72" alt-format: - id: custom-h4-rgb format: rgb-values - id: custom-h5 title: H5 Color type: variable-color format: hex opacity: false default: "#7892bd" alt-format: - id: custom-h5-rgb format: rgb-values - id: custom-h6 title: H6 Color 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 color 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: neutral-chrome title: Neutral Chrome description: Reserve the accent color for selection and active states โ€” icon and button hovers wash gray instead of tinting, and the accent glow is removed type: class-toggle default: false - id: file-explorer-style title: File Explorer Style description: Folder presentation in the file browser type: class-select allowEmpty: false default: explorer-style-rainbow options: - label: Rainbow Cards (Default) value: explorer-style-rainbow - label: Minimal value: explorer-style-minimal - label: Finder value: explorer-style-finder - label: Glass value: explorer-style-glass - 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 view header (title and buttons) when hovering the top area type: class-toggle default: false - id: ribbon-autohide title: Auto-Hide Ribbon description: Hide the ribbon completely โ€” glide your cursor to the left screen edge (or tab into it) and it slides back in, pushing the workspace over type: class-toggle default: false - id: ambient-gradient title: Ambient Accent Gradient description: Wash the top of the workspace with a soft accent-color gradient that fades into the background type: class-toggle default: false - id: scroll-edge-fade title: Scroll Edge Dissolve description: Note content melts softly into the chrome at the top and bottom of the scroll area instead of clipping hard type: class-toggle default: false - id: pill-tabs title: Soft Pill Tabs description: Restyle workspace tabs as quiet translucent pills instead of squared tab shapes type: class-toggle default: false - id: liquid-glass-heading title: Liquid Glass type: heading level: 2 collapsed: true - id: tf-glass-tint title: Glass Tint description: How solid the glass material is across menus, popovers, panels and modals โ€” lower is clearer, higher is more tinted type: variable-number-slider default: 65 min: 35 max: 90 step: 5 format: "%" - id: tf-liquid-tags title: Liquid Tags description: Tags become gel chips with a specular rim, seasonal tint, and a squashy press type: class-toggle default: false - id: tf-liquid-properties title: Liquid Properties Panel description: The frontmatter/properties block becomes a floating frosted card with a specular edge type: class-toggle default: false - id: tf-liquid-tables title: Liquid Tables description: Whole tables become liquid glass with a distinct seasonal-accent header row that sticks while rows scroll beneath it (reading mode) type: class-toggle default: false - id: tf-liquid-statusbar title: Liquid Status Bar description: The expanded status pill gets true glass material โ€” refraction blur and a specular rim type: class-toggle default: false - id: tf-liquid-prompt title: Liquid Command Palette description: Deeper refraction on the palette and a liquid gradient on the selected row 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: smooth-caret title: Smooth Caret (iA Writer) description: The text cursor glides between positions instead of jumping โ€” satisfying, but turn off if it feels laggy while typing type: class-toggle default: false - id: scroll-progress title: Reading Progress Bar description: A hairline accent bar under the note header that fills as you scroll through the note type: class-toggle default: false - id: scroll-reveal title: Rise Into View description: Callouts, tables, images and code blocks gently fade and rise as they scroll into view (reading mode) type: class-toggle default: false - id: content-styles-heading title: Editor & Content type: heading level: 2 collapsed: true - id: font-normal title: Body Text Weight description: Font weight for body text (Obsidian default is 400) type: variable-number-slider default: 400 min: 300 max: 600 step: 50 - id: optical-text-trim title: Optical Text Centering description: Trim the font's invisible leading in short labels (tag chips, tab titles, callout titles) so text centers on its letterforms, not its line box type: class-toggle default: true - id: tf-luminous title: Luminous Details description: Horizontal rules become glowing seasonal gradient hairlines and images get a gentle hover lift with an accent-tinted shadow type: class-toggle default: false - id: tf-embed-cards title: Elegant Embed Cards description: Note embeds and transclusions become soft accent-edged cards with a hover lift and a link icon that appears on hover type: class-toggle default: false - id: tf-aurora-title title: Aurora Note Title description: The inline note title shimmers with a slow-drifting gradient of the season's heading colors 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 - label: Liquid Glass value: blockquote-style-liquid - 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 - label: Liquid Glass value: callout-style-liquid - 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: 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-fancy-bullets title: Fancy Multilevel Bullet Styles description: Unique custom bullet shapes per list nesting level type: class-toggle default: false - id: caret-accent title: Accent Caret & Selection description: Color the cursor caret and text-selection with the accent color (visionOS-style) type: class-toggle default: false - id: caret-no-blink title: Static Caret (No Blink) description: Keeps the cursor steady instead of blinking โ€” easier on the eyes during long writing sessions type: class-toggle default: false - id: heading-case-heading title: Headings description: Style, alignment, typography, and per-level text case type: heading level: 3 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: Liquid Glass value: heading-style-liquid - 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: h1-case title: H1 Case description: Title Case capitalizes the first letter of every word 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: 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: 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: Line Height description: Line height for editor and reading view 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) type: heading level: 3 collapsed: true - id: block-width-info title: Usage type: info-text markdown: true description: "Add `cssclasses` to a note's properties: `wide-page`, `full-page`, `wide-table`, `wide-image`" - 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)" type: heading level: 3 collapsed: true - id: banners-cards-info title: Usage type: info-text markdown: true description: "`banner`: mark an image `![[img|banner]]` as a cover ยท `cards`: render Dataview tables as a card grid" - 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: focus-mode-heading title: Deep Focus Mode type: heading level: 2 collapsed: true - id: focus-mode title: Deep Focus Mode description: Warm sepia (light) or warm dark (dark) palette, neutral heading hierarchy, no decorative backgrounds or animations, ribbon and status bar hidden, 68ch measure 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: performance-heading title: Performance & Accessibility type: heading level: 2 collapsed: true - id: disable-ui-animations title: Disable UI Animations description: Turn off pop-up and press animations across the interface type: class-toggle default: false - id: disable-modal-frost title: Disable Modal Frost description: Turn off frosted glass effect for modal backgrounds 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 a 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 { /* Enable height: 0 โ†’ auto transitions everywhere (Chrome 129+). No effect unless an element also has a height transition โ€” safe to set globally. */ interpolate-size: allow-keywords; --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.32, 0.72, 0, 1); --normal: 0.25s cubic-bezier(0.32, 0.72, 0, 1); --slow: 0.32s cubic-bezier(0.32, 0.72, 0, 1); --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.32, 0.72, 0, 1); --transition-bounce: 0.3s var(--ease-spring-md); --transition-callout-link: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.15s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.18s, color 0.18s; --transition-depth: box-shadow 0.2s var(--ease-spring-sm), transform 0.2s var(--ease-spring-sm); /* ===== WHIMSY ANIMATION TOKENS ===== */ /* True spring curves via linear() โ€” damped harmonic oscillators sampled at ~2% resolution (48 points). Sparse hand-placed points read as piecewise-linear chop at large travel; dense sampling is what makes the motion fluid. Generated: x(t) = 1 - e^(-ฮถฯ‰t)(cos(ฯ‰dt) + (ฮถฯ‰/ฯ‰d)sin(ฯ‰dt)) */ /* Anticipation dip โ†’ overshoot โ†’ settle (dip to -0.05, peak 1.10) */ --ease-overshoot: linear(0, -0.0225 2.1%, -0.0402 4.2%, -0.0493 6.25%, -0.0478 8.3%, -0.036 10.4%, -0.0165 12.5%, 0.0032 14.6%, 0.0593 16.7%, 0.1655 18.75%, 0.2996 20.8%, 0.4438 22.9%, 0.5849 25%, 0.7139 27.1%, 0.8251 29.2%, 0.916 31.25%, 0.9861 33.3%, 1.037 35.4%, 1.069 37.5%, 1.088 39.6%, 1.095 41.7%, 1.093 43.75%, 1.085 45.8%, 1.073 47.9%, 1.06 50%, 1.046 52.1%, 1.033 54.2%, 1.022 56.25%, 1.012 58.3%, 1.004 60.4%, 0.9987 62.5%, 0.9948 64.6%, 0.9924 66.7%, 0.9912 68.75%, 0.991 70.8%, 0.9915 72.9%, 0.9925 75%, 0.9937 77.1%, 0.995 79.2%, 0.9962 81.25%, 0.9974 83.3%, 0.9984 85.4%, 0.9992 87.5%, 0.9999 89.6%, 1 91.7%, 1.001 93.75%, 1.001 95.8%, 1.001 97.9%, 1); /* Quick, one gentle overshoot (peak 1.054, ฮถ=0.68 ฯ‰=13) */ --ease-spring-sm: linear(0, 0.0324 2.1%, 0.1138 4.2%, 0.2241 6.25%, 0.3478 8.3%, 0.4732 10.4%, 0.592 12.5%, 0.6991 14.6%, 0.7916 16.7%, 0.8683 18.75%, 0.9294 20.8%, 0.9759 22.9%, 1.01 25%, 1.032 27.1%, 1.046 29.2%, 1.053 31.25%, 1.054 33.3%, 1.052 35.4%, 1.047 37.5%, 1.041 39.6%, 1.034 41.7%, 1.027 43.75%, 1.021 45.8%, 1.015 47.9%, 1.011 50%, 1.006 52.1%, 1.003 54.2%, 1.001 56.25%, 0.9992 58.3%, 0.9981 60.4%, 0.9974 62.5%, 0.9971 64.6%, 0.9971 66.7%, 0.9975 70.8%, 0.9982 75%, 0.9989 79.2%, 0.9995 83.3%, 0.9998 87.5%, 1); /* Lively, faint second wave (peak 1.126, ฮถ=0.55 ฯ‰=14) */ --ease-spring-md: linear(0, 0.0381 2.1%, 0.1352 4.2%, 0.2681 6.25%, 0.4175 8.3%, 0.5679 10.4%, 0.7083 12.5%, 0.8313 14.6%, 0.9326 16.7%, 1.011 18.75%, 1.067 20.8%, 1.103 22.9%, 1.122 25%, 1.126 27.1%, 1.121 29.2%, 1.108 31.25%, 1.091 33.3%, 1.072 35.4%, 1.053 37.5%, 1.035 39.6%, 1.02 41.7%, 1.007 43.75%, 0.9977 45.8%, 0.9909 47.9%, 0.9867 50%, 0.9845 52.1%, 0.9841 54.2%, 0.9849 56.25%, 0.9866 58.3%, 0.9888 60.4%, 0.9912 62.5%, 0.9936 64.6%, 0.9958 66.7%, 0.9977 68.75%, 0.9992 70.8%, 1.001 75%, 1.002 79.2%, 1.002 83.3%, 1.001 87.5%, 1.001 91.7%, 1 95.8%, 1); /* Big double bounce (peak 1.232, dip 0.946, ฮถ=0.42 ฯ‰=16) */ --ease-spring-xl: linear(0, 0.0503 2.1%, 0.1794 4.2%, 0.3558 6.25%, 0.551 8.3%, 0.7417 10.4%, 0.9105 12.5%, 1.047 14.6%, 1.145 16.7%, 1.206 18.75%, 1.232 20.8%, 1.229 22.9%, 1.205 25%, 1.167 27.1%, 1.123 29.2%, 1.077 31.25%, 1.035 33.3%, 1 35.4%, 0.9739 37.5%, 0.9564 39.6%, 0.9473 41.7%, 0.9456 43.75%, 0.9495 45.8%, 0.9572 47.9%, 0.9672 50%, 0.9779 52.1%, 0.9881 54.2%, 0.997 56.25%, 1.004 58.3%, 1.009 60.4%, 1.012 62.5%, 1.013 64.6%, 1.012 66.7%, 1.011 68.75%, 1.009 70.8%, 1.006 72.9%, 1.004 75%, 1.001 77.1%, 0.9996 79.2%, 0.9983 81.25%, 0.9975 83.3%, 0.9971 85.4%, 0.9971 87.5%, 0.9973 89.6%, 0.9978 91.7%, 0.9983 93.75%, 0.9989 95.8%, 0.9995 97.9%, 1); /* Soft landing: one late overshoot, long drift to rest (peak 1.038, ฮถ=0.72 ฯ‰=9) */ --ease-spring-soft: linear(0, 0.016 2.1%, 0.0585 4.2%, 0.1199 6.25%, 0.1938 8.3%, 0.2749 10.4%, 0.3591 12.5%, 0.4431 14.6%, 0.5243 16.7%, 0.601 18.75%, 0.6717 20.8%, 0.7358 22.9%, 0.7928 25%, 0.8427 27.1%, 0.8857 29.2%, 0.922 31.25%, 0.9521 33.3%, 0.9765 35.4%, 0.9959 37.5%, 1.011 39.6%, 1.022 41.7%, 1.03 43.75%, 1.035 45.8%, 1.037 47.9%, 1.038 50%, 1.038 52.1%, 1.036 54.2%, 1.034 56.25%, 1.031 58.3%, 1.028 60.4%, 1.025 62.5%, 1.022 64.6%, 1.019 66.7%, 1.016 68.75%, 1.013 70.8%, 1.01 72.9%, 1.008 75%, 1.006 77.1%, 1.005 79.2%, 1.003 81.25%, 1.002 83.3%, 1.001 85.4%, 1 87.5%, 0.9997 89.6%, 0.9992 91.7%, 0.9989 93.75%, 0.9987 95.8%, 0.9986 97.9%, 1); /* Rebound tokens (sidebar slide-in, folder settle) โ€” one clear overshoot here; body.animation-style-whimsy overrides to full bounce */ --rebound-ease: var(--ease-spring-sm); --rebound-dur: 0.45s; --rebound-dur-lg: 0.65s; --rebound-slide: 22px; --rebound-scale-y: 0.95; /* 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 lives on body below โ€” its alpha rides the Glass Tint slider, which Style Settings injects on body) */ --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); /* Route reading mode through the same value so both modes read identically: --line-height-normal drives .markdown-preview-view line-height. */ --line-height-normal: var(--line-normal); --file-line-width: var(--line-width, 64ch); --editor-max-width: var(--line-width, 64ch); --reading-max-width: var(--line-width, 64ch); --glass-bg: rgba(var(--background-secondary-rgb), var(--tf-glass-tint, 65%)); } /* Body Text Weight โ€” Obsidian hardcodes font-weight: 400 on body and only routes --font-normal to links/callout titles/bold-calc, so plain note text needs an explicit hook for the Style Settings slider. */ .markdown-source-view, .markdown-preview-view { font-weight: var(--font-normal); } /* ========================================= */ /* 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, .theme-light.tokyo-theme, .theme-dark.tokyo-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); } /* --- Tokyo Night Theme --- */ /* Faithful to the Bear "Tokyo Night" / "Tokyo Night Light" themes: dark = Storm base, blue accent (Bear bold/header blue), all-blue headings; light = neutral gray, teal accent (Bear bold/header teal), orange links, all-teal headings */ .tokyo-theme { --accent-h: 221; --accent-s: 89%; --accent-l: 72%; } .theme-light.tokyo-theme { --accent-h: 194; --accent-s: 94%; --accent-l: 24%; --background-primary: #eaeaed; --background-primary-rgb: 234, 234, 237; --background-secondary: #e3e3e9; --background-secondary-rgb: 227, 227, 233; --background-secondary-alt: #d4d4da; --text-normal: #343b58; --text-normal-rgb: 52, 59, 88; --text-muted: #6c6f85; --text-faint: #7c7f93; --emphasis-color: #2c3252; --emphasis-color-light: #343b58; --primary-color: #045d77; --primary-color-rgb: 4, 93, 119; --primary-color-dark: #034d62; --interactive-accent: var(--primary-color); --interactive-accent-hover: var(--primary-color-dark); --link-color: #a35021; --link-color-hover: #83401a; --link-unresolved-color: var(--link-color); --blockquote-border-color: var(--primary-color); --checkbox-color: #96979f; --text-accent: var(--primary-color-dark); --divider-color: #d7d7dd88; --text-selection: #d2dfe8; --scrollbar-thumb: rgba(124, 141, 160, .45); --scrollbar-track: rgba(234, 234, 237, .2); --code-background: #e3e3e9; --code-normal: var(--text-normal); --code-comment: #9699a3; --code-function: #166775; --code-important: #b4640e; --code-keyword: #a56eef; --code-property: #166775; --code-punctuation: #6c6f85; --code-string: #587539; --code-tag: #b4640e; --code-value: #8f5e15; /* Per-level ramp from the Bear Tokyo Night Light palette: teal title, purple/blue from the sidebar accents (darkened for contrast on the gray bg), then green, sea-teal, and lavender slate */ --heading-primary: #045d77; --heading-secondary: #7e4dd2; --heading-tertiary: #3a6fc4; --heading-quaternary: #587539; --heading-quinary: #2e8a90; --heading-senary: #565f89; --heading-primary-rgb: 4, 93, 119; --heading-secondary-rgb: 126, 77, 210; --heading-tertiary-rgb: 58, 111, 196; --heading-quaternary-rgb: 88, 117, 57; --heading-quinary-rgb: 46, 138, 144; --heading-senary-rgb: 86, 95, 137; --callout-note: #4d8de8; --callout-note-rgb: 77, 141, 232; --callout-info: #166775; --callout-info-rgb: 22, 103, 117; --callout-warning: #b4640e; --callout-warning-rgb: 180, 100, 14; --callout-success: #587539; --callout-success-rgb: 88, 117, 57; --callout-danger: #84464f; --callout-danger-rgb: 132, 70, 79; --callout-example: #a35021; --callout-example-rgb: 163, 80, 33; --callout-cite: #a56eef; --callout-cite-rgb: 165, 110, 239; --callout-video: #3eb4bb; --callout-video-rgb: 62, 180, 187; --callout-quote: #7c7f93; --callout-quote-rgb: 124, 127, 147; --highlight-bg: #b8d4d2; --highlight-bg-rgb: 184, 212, 210; --highlight-bg-dark: #a3c6c3; --highlight-bg-dark-color: #131f1e; --surface-accent: #d4d4da; --surface-accent-rgb: 212, 212, 218; --surface-dark: #343b58; --surface-dark-rgb: 52, 59, 88; --tab-bg-inactive: rgba(234, 234, 237, .08); --tab-bg-inactive-hover: rgba(234, 234, 237, .12); } .theme-dark.tokyo-theme { --background-primary: #24283b; --background-primary-rgb: 36, 40, 59; --background-secondary: #16161f; --background-secondary-rgb: 22, 22, 31; --background-secondary-alt: #292e47; --text-normal: #9aa5ce; --text-normal-rgb: 154, 165, 206; --text-muted: #646e9d; --text-faint: #414868; --emphasis-color: #c0caf5; --emphasis-color-light: #d5dbf8; --primary-color: #7aa2f7; --primary-color-rgb: 122, 162, 247; --primary-color-dark: #6586cc; --interactive-accent: var(--primary-color); --interactive-accent-hover: var(--primary-color-dark); --link-color: #bb9af7; --link-color-hover: #9d7cd8; --link-unresolved-color: var(--link-color); --blockquote-border-color: #414868; --checkbox-color: #e0af68; --text-accent: var(--primary-color-dark); --divider-color: #1a1c2888; --text-selection: #4b538a; --scrollbar-thumb: rgba(96, 105, 163, .35); --scrollbar-track: rgba(36, 40, 59, .2); --code-background: #292e47; --code-normal: #c0caf5; --code-comment: #565f89; --code-function: #7aa2f7; --code-important: #ff9e64; --code-keyword: #bb9af7; --code-property: #2ac3de; --code-punctuation: #646e9d; --code-string: #9ece6a; --code-tag: #f7768e; --code-value: #ff9e64; /* Per-level ramp from the Bear Tokyo Night palette โ€” all cool: blue, purple, cyan, teal, sky, soft lavender */ --heading-primary: #7aa2f7; --heading-secondary: #bb9af7; --heading-tertiary: #2ac3de; --heading-quaternary: #73daca; --heading-quinary: #7dcfff; --heading-senary: #c0caf5; --heading-primary-rgb: 122, 162, 247; --heading-secondary-rgb: 187, 154, 247; --heading-tertiary-rgb: 42, 195, 222; --heading-quaternary-rgb: 115, 218, 202; --heading-quinary-rgb: 125, 207, 255; --heading-senary-rgb: 192, 202, 245; --callout-note: #7aa2f7; --callout-note-rgb: 122, 162, 247; --callout-info: #7dcfff; --callout-info-rgb: 125, 207, 255; --callout-warning: #e0af68; --callout-warning-rgb: 224, 175, 104; --callout-success: #9ece6a; --callout-success-rgb: 158, 206, 106; --callout-danger: #f7768e; --callout-danger-rgb: 247, 118, 142; --callout-example: #ff9e64; --callout-example-rgb: 255, 158, 100; --callout-cite: #bb9af7; --callout-cite-rgb: 187, 154, 247; --callout-video: #2ac3de; --callout-video-rgb: 42, 195, 222; --callout-quote: #565f89; --callout-quote-rgb: 86, 95, 137; /* Bear default highlighter: slate blue block with bright text */ --highlight-bg: #43476b; --highlight-bg-rgb: 67, 71, 107; --highlight-bg-dark: #545a8c; --highlight-bg-dark-color: #545a8c; --highlight-bg-light-color: #c0caf5; --surface-accent: #292e47; --surface-accent-rgb: 41, 46, 71; --surface-dark: #16161f; --surface-dark-rgb: 22, 22, 31; --tab-bg-inactive: rgba(36, 40, 59, .15); --tab-bg-inactive-hover: rgba(36, 40, 59, .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; 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; 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 var(--ease-apple) !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 var(--ease-apple) !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.32, 0.72, 0, 1), color 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .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); corner-shape: squircle; 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); corner-shape: superellipse(1.5); 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); corner-shape: squircle; 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); corner-shape: superellipse(1.5); 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); corner-shape: superellipse(1.5); } .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); corner-shape: superellipse(1.5); 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); corner-shape: superellipse(1.5); transition: opacity 0.15s cubic-bezier(0.32, 0.72, 0, 1), 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); } /* ========================================= */ /* TEXT WRAP (ORPHAN CONTROL) */ /* ========================================= */ /* Prevent orphaned words on body copy in reading view */ :is(.markdown-preview-view, .markdown-reading-view) :is(p, li, blockquote, figcaption) { text-wrap: pretty; } /* Same in live preview โ€” targets paragraph and list lines, skips code blocks */ .markdown-source-view.mod-cm6 .cm-line:not(.HyperMD-codeblock):not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end) { text-wrap: pretty; } /* ========================================= */ /* 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); corner-shape: squircle; 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); --h-rgb: var(--heading-primary-rgb); --h-color: var(--heading-primary); 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); --h-rgb: var(--heading-secondary-rgb); --h-color: var(--heading-secondary); 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); --h-rgb: var(--heading-tertiary-rgb); --h-color: var(--heading-tertiary); 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); --h-rgb: var(--heading-quaternary-rgb); --h-color: var(--heading-quaternary); 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); --h-rgb: var(--heading-quinary-rgb); --h-color: var(--heading-quinary); 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); --h-rgb: var(--heading-senary-rgb); --h-color: var(--heading-senary); 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
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; } /* 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; } /* Heading fold chevron: keep NATIVE inline flow โ€” absolute stretch centers on padding-top, lands too high; do not re-add */ /* 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; 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; 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-inline-start-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); } .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); } .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-inline-start-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-inline-start-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-inline-start-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; 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; } /* GPU hints desktop-only โ€” these break iOS scroll containment */ body:not(.is-mobile) .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) { will-change: transform; contain: layout style; } /* Backdrop-filter desktop-only โ€” per-heading blur repaints on every scroll frame on iOS */ @supports (backdrop-filter: blur(1px)) { body:not(.is-mobile):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); } /* Liquid Glass Style โ€” same material as Liquid Glass callouts/blockquotes: per-level tint (--h-rgb/--h-color set in the base heading rules) under specular inset rims, refraction blur, and a hover sheen sweep */ .heading-style-liquid :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: none; position: relative; background: radial-gradient(ellipse at top left, rgba(var(--h-rgb), .26) 0%, transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .18) 0%, rgba(var(--h-rgb), .12) 45%, rgba(var(--background-primary-rgb), .3) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .12); color: hsl(from var(--h-color) h s 28%); transition: box-shadow var(--transition-ui), filter var(--transition-ui); width: fit-content; max-inline-size: 100%; display: inline-block; line-height: 1.4; padding: calc(var(--heading-pad-y) * var(--scale)) calc(var(--heading-pad-x) * var(--scale-x)); } .theme-dark.heading-style-liquid :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) { background: radial-gradient(ellipse at top left, rgba(var(--h-rgb), .34) 0%, transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .07) 0%, rgba(var(--h-rgb), .18) 45%, rgba(var(--background-primary-rgb), .4) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .3); color: hsl(from var(--h-color) h s 90%); } /* GPU-expensive refraction blur desktop-only (same gating as Glass headings) */ @supports (backdrop-filter: blur(1px)) { body:not(.is-mobile):not(.disable-glass-menus) .heading-style-liquid :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(18px) saturate(190%); -webkit-backdrop-filter: blur(18px) saturate(190%); } } /* Specular sheen: background-position sweep inside the pseudo-element, so no overflow clipping is needed (headings must keep overflow visible for the collapse chevron); snaps back invisibly on leave like the callout sheen */ .heading-style-liquid :is(.markdown-preview-view, .markdown-reading-view) :is(h1, h2, h3, h4, h5, h6)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .14) 46%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .14) 54%, transparent 68%); background-size: 250% 100%; background-position: 175% 0; background-repeat: no-repeat; pointer-events: none; } body:not(.is-mobile):not(.terraflow-quiet) .heading-style-liquid :is(.markdown-preview-view, .markdown-reading-view) :is(h1, h2, h3, h4, h5, h6):hover::after { background-position: -75% 0; transition: background-position 0.9s var(--ease-apple); } .heading-style-liquid :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 { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 28px rgba(0, 0, 0, .18); filter: brightness(1.04); } /* 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: var(--radius-m); 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, .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); corner-shape: squircle; 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; } /* Springy chevrons (svg.svg-icon ties native specificity; later load wins) */ :is(.collapse-icon, .nav-folder-collapse-indicator, .callout-fold) svg.svg-icon { transition: transform 0.3s var(--ease-spring-sm); } .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; } /* ============================== */ /* FILE EXPLORER STYLES */ /* ============================== */ /* Minimal/Finder override the Rainbow base; body:is(.theme-*) outranks nth-child rainbow rules */ /* Both alternate styles: no tinted cards, no rainbow, no hover lift */ body:is(.theme-light, .theme-dark):is(.explorer-style-minimal, .explorer-style-finder) .nav-files-container>div>.nav-folder { --folder-color: transparent; --folder-text-color: var(--text-normal); --folder-heading-rgb: var(--primary-color-rgb); background-color: transparent; margin-block-end: 0; } body:is(.explorer-style-minimal, .explorer-style-finder) .nav-files-container>div>.nav-folder:hover { transform: none; } /* โ€ฆand calm neutral hovers instead of the white-overlay + brightness */ body:is(.explorer-style-minimal, .explorer-style-finder) .nav-folder-title:hover, body:is(.explorer-style-minimal, .explorer-style-finder) .nav-file-title:is(:not(.is-active)):hover { background-color: color-mix(in srgb, var(--text-normal) 7%, transparent) !important; filter: none; } body:is(.explorer-style-minimal, .explorer-style-finder) .nav-folder .nav-folder-title:hover .nav-folder-title-content { transform: none; } /* Minimal: quiet monochrome tree, no folder glyphs */ body.explorer-style-minimal .nav-folder .nav-folder-title-content::before { display: none; } body.explorer-style-minimal .nav-folder-title { color: var(--text-muted); font-weight: var(--weight-medium); } /* Finder: neutral labels, accent folder glyphs */ body.explorer-style-finder .nav-folder .nav-folder-title-content::before { background-color: var(--primary-color); opacity: .85; } body.explorer-style-finder .nav-folder-title { font-weight: var(--weight-normal); } /* Glass: frosted folder cards in each folder's hue (no backdrop-filter โ€” one compositing pass per card) */ body:is(.theme-light, .theme-dark).explorer-style-glass .nav-files-container>div>.nav-folder { /* files inherit via --nav-item-color */ --folder-text-color: color-mix(in srgb, rgb(var(--folder-heading-rgb)) 55%, var(--text-normal)); /* hue-tinted hairline (white reads chalky) */ background-color: rgba(var(--folder-heading-rgb), .09); background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%); border: var(--border-thin) solid rgba(var(--folder-heading-rgb), .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 14px rgba(0, 0, 0, .05); border-radius: var(--r3); -electron-corner-smoothing: var(--squircle-soft); corner-shape: superellipse(3); padding: 4px; margin-block-end: var(--s2); } body.theme-dark.explorer-style-glass .nav-files-container>div>.nav-folder { background-color: rgba(var(--folder-heading-rgb), .12); border-color: rgba(var(--folder-heading-rgb), .28); background-image: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 6px 18px rgba(0, 0, 0, .18); } /* Hover deepens the whole card */ body.explorer-style-glass .nav-files-container>div>.nav-folder:hover { background-color: rgba(var(--folder-heading-rgb), .15); } /* No surfaces on folder titles (depth-shadows hover painted the box); text = folder hue toward text-normal */ body.explorer-style-glass .nav-files-container .nav-folder-title, body.explorer-style-glass .nav-files-container .nav-folder-title:hover { background-color: transparent !important; filter: none !important; box-shadow: none !important; color: color-mix(in srgb, rgb(var(--folder-heading-rgb)) 55%, var(--text-normal)); } /* Active file: liquid-glass pill โ€” tinted fill under a specular highlight */ body.explorer-style-glass .nav-files-container>div>.nav-folder .nav-file-title.is-active .nav-file-title-content { background-color: rgba(var(--folder-heading-rgb), .22); background-image: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 8px rgba(0, 0, 0, .1); color: var(--text-normal); } .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); corner-shape: squircle; 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); corner-shape: squircle; 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); corner-shape: squircle; } .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); corner-shape: squircle; 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); corner-shape: squircle; 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); corner-shape: squircle; flex-shrink: 0; color: var(--callout-color); } .callout .callout-content { padding-block: 0; padding-inline: 0; font-size: .95em; line-height: var(--line-normal); } /* Fade-in callout content on expand using @starting-style (Chrome 117+). Only fires when the element first appears or exits display:none โ€” no-op otherwise. */ body:not(.disable-ui-animations):not(.animation-style-whimsy) .callout:not(.is-collapsed) .callout-content { transition: opacity 0.2s var(--ease-apple); @starting-style { opacity: 0; } } .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); corner-shape: squircle; 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); corner-shape: squircle; 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); corner-shape: squircle; 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); corner-shape: squircle; 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); corner-shape: squircle; 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 - structural properties apply on all devices */ .callout-style-glass :is(.callout, .cm-callout) { border-inline-start: none !important; border-radius: var(--r4) !important; position: relative; } /* GPU-expensive blur + multi-layer shadow desktop-only */ body:not(.is-mobile) .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; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; } .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; } /* Dark glass callout: gradient background applies on all devices */ .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; border-color: rgba(var(--callout-color-rgb), 0.35) !important; } /* Desktop-only: heavy blur + multi-layer shadow */ body:not(.is-mobile).theme-dark .callout-style-glass :is(.callout, .cm-callout) { backdrop-filter: blur(16px) saturate(160%) brightness(0.98) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(0.98) !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); corner-shape: squircle; 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); corner-shape: squircle; 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); corner-shape: squircle; 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); corner-shape: superellipse(1.5); 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); } /* Keyboard Keys โ€” macOS-style keycap for in notes: neutral surface (not accent-tinted like inline code) with a bottom ledge for physicality */ :is(.markdown-rendered, .markdown-preview-view) kbd { background-color: var(--background-secondary); color: var(--text-normal); padding-block: 1px; padding-inline: 5px; border-radius: var(--r1); -electron-corner-smoothing: var(--squircle-btn); corner-shape: superellipse(1.5); font-size: 0.85em; font-family: var(--font-monospace); border: var(--border-thin) solid var(--background-modifier-border); box-shadow: inset 0 -1.5px 0 var(--background-modifier-border); } /* 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); corner-shape: squircle; 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); corner-shape: squircle; 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); corner-shape: superellipse(1.5); 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); } /* Horizontal rules: centered short hairline (Apple-doc section break) instead of a full-width bar. tf-luminous later re-skins color/height; width and centering carry through to it. */ :is(.markdown-rendered, .markdown-preview-view, .markdown-source-view.mod-cm6) hr { border: none; height: 1px; width: 50%; margin-inline: auto; background-color: var(--hr-color); } /* Image captions: smaller, muted, centered โ€” Apple-article style */ :is(.markdown-rendered, .markdown-preview-view) figcaption { font-size: 0.85em; color: var(--text-muted); text-align: center; margin-top: 6px; } /* Image Styling */ :is(.markdown-rendered img, .markdown-source-view.mod-cm6 .cm-content img) { border-radius: var(--r3); -electron-corner-smoothing: var(--squircle-main); corner-shape: squircle; max-inline-size: 100%; } /* Hairline outline so light image edges don't dissolve into matching backgrounds. Pure black/white (never a tinted neutral โ€” tint reads as dirt on the edge); outline paints above the pixels, negative offset keeps it on the image edge. */ .theme-light :is(.markdown-rendered img, .markdown-source-view.mod-cm6 .cm-content img) { outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; } .theme-dark :is(.markdown-rendered img, .markdown-source-view.mod-cm6 .cm-content img) { outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; } /* Table Styling */ .markdown-rendered table, .markdown-preview-view table { border-radius: var(--r3); -electron-corner-smoothing: var(--squircle-main); corner-shape: squircle; 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); } /* Headers already sit at semibold on an inverted background, so bold needs both the color guard and a weight jump past --weight-bold to read at all */ :is(.markdown-rendered, .markdown-preview-view, .markdown-source-view.mod-cm6 .cm-table-widget) table th strong { color: inherit; font-weight: 800; } .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; } } /* Matter-style unfurl: the menu grows from the cursor corner, resolves from a soft blur, and swings 2% past rest before settling */ @keyframes menuPop { 0% { opacity: 0; transform: scale(0.88); filter: blur(6px); } 70% { opacity: 1; transform: scale(1.02); filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } /* Apply animation to menus (modals use macosSheetDrop below) */ body:not(.disable-ui-animations) .menu { transform-origin: top left; animation: menuPop 0.28s var(--ease-apple) forwards; } /* Palette, suggestions, and page-preview popovers: rise with a soft overshoot and resolve from a blur, settling sharp by the overshoot point (whimsy replaces this with its bigger spring) */ @keyframes tf-pop-settle { 0% { opacity: 0; transform: scale(0.93) translateY(10px); filter: blur(6px); } 70% { opacity: 1; transform: scale(1.015) translateY(-3px); filter: blur(0); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } body:not(.disable-ui-animations) .popover, body:not(.disable-ui-animations) .suggestion-container { animation: tf-pop-settle var(--dur-modal) var(--ease-apple) forwards; } /* Command palette / quick switcher: Spotlight-style โ€” drops from above, resolves from a blur, dips 2px past rest, and the results ripple in. Ripple is fast + capped so retyping doesn't shimmer. */ @keyframes tf-palette-drop { 0% { opacity: 0; transform: translateY(-24px) scale(0.97); filter: blur(8px); } 65% { opacity: 1; transform: translateY(5px) scale(1.005); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } body:not(.disable-ui-animations) .prompt { animation: tf-palette-drop var(--dur-modal) var(--ease-apple) forwards; } body:not(.disable-ui-animations) .prompt .suggestion-item { animation: menuItemSlide 0.12s var(--ease-apple) both; animation-delay: min(calc(sibling-index() * 6ms), 60ms); } /* Anchored popups grow from their attachment corner like the cursor menus; the centered palette keeps its default center origin */ body:not(.disable-ui-animations) .popover, body:not(.disable-ui-animations) .suggestion-container { transform-origin: top left; } /* Menu items cascade in with a stagger using sibling-index() (Chrome 136+). opacity+translateY runs on the compositor โ€” zero layout/paint cost. */ @keyframes menuItemSlide { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } body:not(.disable-ui-animations) .menu .menu-item, body:not(.disable-ui-animations) .suggestion-container .suggestion-item { animation: menuItemSlide var(--dur-quick) var(--ease-apple) both; animation-delay: min(calc(sibling-index() * 12ms), 120ms); } /* Matter-style theme crossfade: light/dark and seasonal switches blend on one clock instead of snapping. Large containers only โ€” elements with their own transitions or hover backgrounds (view-header, workspace splits, metadata-container) are deliberately excluded so pointer feedback stays instant. */ body:not(.disable-ui-animations), body:not(.disable-ui-animations) :is( .workspace, .workspace-tabs, .workspace-leaf-content, .markdown-source-view, .markdown-preview-view, .nav-files-container, .workspace-ribbon, .workspace-tab-header-container, .status-bar ) { transition: background-color 0.35s var(--ease-apple), color 0.35s var(--ease-apple), border-color 0.35s var(--ease-apple); } /* Tooltips: Apple-style instant fade โ€” no scale, just opacity */ body:not(.disable-ui-animations) .tooltip { animation: tooltipFade var(--dur-instant) var(--ease-apple) forwards; } /* Tooltip surface: superellipse corners + inner hairline ring so the dark pill reads as a material, not a flat rect (native is a bare 4px box). Inset ring is white in both themes โ€” tooltips stay dark in light mode too. */ .tooltip { border-radius: var(--r1); -electron-corner-smoothing: var(--squircle-btn); corner-shape: superellipse(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 8px var(--background-modifier-box-shadow); } @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; } /* macOS-sheet modal entrance: drops from above, dips 2px past its resting point, then eases back โ€” Settings and all dialogs */ @keyframes macosSheetDrop { 0% { opacity: 0; transform: translateY(-36px) scale(0.96); } 60% { opacity: 1; transform: translateY(5px) scale(1.008); } 100% { opacity: 1; transform: translateY(0) scale(1); } } body:not(.disable-ui-animations):not(.animation-style-whimsy) .modal { animation: macosSheetDrop var(--dur-sheet) var(--ease-apple) forwards; } /* Settings: after the sheet lands, nav items ripple in (per header group, capped so 40 plugin tabs don't take a second) and the content pane drops in a beat later */ body:not(.disable-ui-animations) .modal.mod-settings .vertical-tab-nav-item { animation: menuItemSlide 0.25s var(--ease-apple) both; animation-delay: min(calc(sibling-index() * 14ms), 220ms); } body:not(.disable-ui-animations) .modal.mod-settings .vertical-tab-content { animation: tf-drop-in 0.4s var(--ease-spring-soft) both; animation-delay: 80ms; } /* 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; } /* Rubber-band callout fold: transition only (never fires on mount); title-only โ€” hover-lift owns .callout */ body:not(.disable-ui-animations):not(.animation-style-whimsy) :is(.callout, .cm-callout) .callout-title { transform-origin: top center; transition: transform 0.35s var(--ease-spring-sm); } body:not(.disable-ui-animations):not(.animation-style-whimsy) :is(.callout, .cm-callout).is-collapsed .callout-title { transform: scaleY(0.94); } /* Sidebar rubberband: Obsidian JS-animates the split's width, so the spring goes on the contents instead โ€” they slide in with overshoot when the sidedock expands. Collapse has no visible counterpart (width hits 0 first). */ @keyframes tf-sidedock-in-left { from { transform: translateX(calc(-1 * var(--rebound-slide))); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } } @keyframes tf-sidedock-in-right { from { transform: translateX(var(--rebound-slide)); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } } body:not(.is-mobile):not(.disable-ui-animations) .workspace-split.mod-left-split:not(.is-sidedock-collapsed) .workspace-tabs { animation: tf-sidedock-in-left var(--rebound-dur-lg) var(--rebound-ease); } body:not(.is-mobile):not(.disable-ui-animations) .workspace-split.mod-right-split:not(.is-sidedock-collapsed) .workspace-tabs { animation: tf-sidedock-in-right var(--rebound-dur-lg) var(--rebound-ease); } /* Properties panel: drops in from above with a spring landing (whimsy has its own settle-bounce for this) */ @keyframes tf-drop-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } body:not(.disable-ui-animations):not(.animation-style-whimsy) .metadata-container:not(.is-collapsed) .metadata-content { animation: tf-drop-in var(--rebound-dur) var(--ease-spring-sm); } /* Folder expand settle: children scale down from the fold point and spring to rest (spring easing supplies the overshoot). mod-root excluded so the whole file list doesn't bounce on vault load. */ @keyframes tf-settle-y { from { transform: scaleY(var(--rebound-scale-y)); opacity: 0.7; } to { transform: scaleY(1); opacity: 1; } } body:not(.disable-ui-animations) .nav-folder:not(.mod-root):not(.is-collapsed) > .nav-folder-children { transform-origin: top center; animation: tf-settle-y var(--rebound-dur) var(--rebound-ease); } /* List rows: flat press dip (liquid squash reads wrong on full-width rows) */ body:not(.disable-ui-animations) :is( .menu-item, .suggestion-item, .nav-file-title, .nav-folder-title ):active { transform: scale(0.97); transition: transform 80ms var(--ease-apple); } /* Liquid Glass press: fast squash in, jelly rebound out; carries hover transitions (outranks per-area rules) */ body:not(.disable-ui-animations) :is(button, .mod-cta, .clickable-icon) { transition: transform 0.4s var(--ease-spring-md), color var(--transition-ui), background-color var(--transition-ui), border-color var(--transition-ui), box-shadow var(--transition-ui), opacity var(--transition-ui); } body:not(.disable-ui-animations) :is(button, .mod-cta):active { transform: scale(1.03, 0.94); transition: transform 0.1s var(--ease-apple); } body:not(.disable-ui-animations) .clickable-icon:active { transform: scale(1.06, 0.9); transition: transform 0.1s var(--ease-apple); } /* Keep native scale(-1,1) mirror of the right toggle icon while pressed */ body:not(.disable-ui-animations) .sidebar-toggle-button.mod-right .clickable-icon:active { transform: scale(-1.06, 0.9); } /* Subtle hover pop: icons swell slightly on the spring curve so the bounce personality reads everywhere, not just on press. Areas with their own tuned hover transforms (ribbon, side dock, view actions, floating nav) are excluded so this never downgrades their scale(1.1). Whimsy replaces this with its bigger scale-pop. */ body:not(.disable-ui-animations):not(.animation-style-whimsy) .clickable-icon:hover:not(:active):not(.workspace-ribbon *):not(.side-dock-actions *):not(.view-actions *):not(.nav-buttons-container *):not(.sidebar-toggle-button.mod-right *) { transform: scale(1.07); } /* Mirrored right toggle keeps its native flip while swelling */ body:not(.disable-ui-animations):not(.animation-style-whimsy) .sidebar-toggle-button.mod-right .clickable-icon:hover:not(:active) { transform: scale(-1.07, 1.07); } /* ================================================= ================================================== WHIMSY ANIMATIONS (From Blobob) ================================================ ================================================== */ /* --- Keyframes --- */ /* Big sheet spring: rushes up from below and oscillates to rest on the spring-xl curve. Transform only โ€” opacity/blur ride the separate tf-deblur-in on a smooth ease so they resolve once instead of flickering with the oscillation. */ @keyframes whimsy-modal-open { from { transform: translateY(36px) scale(0.9); } to { transform: translateY(0) scale(1); } } /* Smaller cousin for anchored popups: grows from the attachment corner with the same spring physics */ @keyframes whimsy-pop-in { from { transform: scale(0.8) translateY(10px); } to { transform: scale(1) translateY(0); } } /* Fade + focus companion track for the springs above */ @keyframes tf-deblur-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } } /* Stagger row entrance: rows bounce up into place behind their container */ @keyframes whimsy-item-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes whimsy-settle-bounce { 0% { transform: scaleY(1.08); } 60% { transform: scaleY(0.965); } 100% { transform: scaleY(1); } } @keyframes whimsy-collapse-bounce { 0% { transform: scaleY(1); } 40% { transform: scaleY(1.1); } 100% { transform: scaleY(0.92); } } @keyframes whimsy-notice-in { 0% { opacity: 0; transform: translateY(-18px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* --- Application Rules --- */ /* Rebound tokens: full-strength springs in whimsy */ body.animation-style-whimsy { --rebound-ease: var(--ease-spring-xl); --rebound-dur: 0.55s; --rebound-dur-lg: 0.7s; --rebound-slide: 28px; --rebound-scale-y: 0.86; --transition-bounce: 0.4s var(--ease-spring-xl); --whimsy-scale-emphasis: 1.12; --whimsy-scale-pop: 1.18; } /* Modals: the dialog itself takes the sheet spring (not .modal-container, whose transform would drag the dim backdrop along); the backdrop keeps its iosBackdropFade */ body.animation-style-whimsy:not(.disable-ui-animations) .modal { transform-origin: center; animation: whimsy-modal-open var(--whimsy-slow) var(--ease-spring-xl), tf-deblur-in 0.28s var(--ease-apple) both !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-spring-xl) forwards; } /* Notices */ body.animation-style-whimsy:not(.disable-ui-animations) .notice-container { animation: whimsy-notice-in var(--whimsy-normal) var(--ease-spring-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-spring-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-spring-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-spring-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) rotate(0); } 40% { transform: scale(1.5) rotate(8deg); } 70% { transform: scale(0.92) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } /* 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: anchored surfaces spring from their corner; the palette gets the full sheet spring like a modal */ 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) .suggestion-container { animation: whimsy-pop-in var(--whimsy-normal) var(--ease-spring-xl), tf-deblur-in 0.22s var(--ease-apple) both !important; } body.animation-style-whimsy:not(.disable-ui-animations) .prompt { animation: whimsy-modal-open var(--whimsy-slow) var(--ease-spring-xl), tf-deblur-in 0.28s var(--ease-apple) both !important; } /* Tooltips: same spring, smaller and quicker so they never lag the pointer */ body.animation-style-whimsy:not(.disable-ui-animations) .tooltip { animation: whimsy-pop-in var(--whimsy-fast) var(--ease-spring-md), tf-deblur-in 0.15s var(--ease-apple) both !important; } /* Rows inside menus/suggestions bounce in one after another */ body.animation-style-whimsy:not(.disable-ui-animations) :is(.menu .menu-item, .suggestion-container .suggestion-item) { animation: whimsy-item-in var(--whimsy-normal) var(--ease-spring-md) backwards; animation-delay: min(calc(sibling-index() * 14ms), 140ms); } /* Palette rows re-render on every keystroke โ€” same bounce, much quicker, so retyping never feels laggy */ body.animation-style-whimsy:not(.disable-ui-animations) .prompt .suggestion-item { animation: whimsy-item-in 0.2s var(--ease-spring-md) backwards; animation-delay: min(calc(sibling-index() * 8ms), 80ms); } /* 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-fast) var(--ease-spring-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 toggles: gentle tilt on inner icon only (container transforms travel during collapse) */ body.animation-style-whimsy .sidebar-toggle-button.mod-left .clickable-icon, body.animation-style-whimsy .sidebar-toggle-button.mod-right .clickable-icon { transition: transform 0.3s var(--ease-spring-sm); } body.animation-style-whimsy .sidebar-toggle-button.mod-left:hover .clickable-icon { transform: rotate(-12deg) scale(1.08); } /* Mirrored right icon: keep flip, mirror rotation so tilt reads +12ยฐ */ body.animation-style-whimsy .sidebar-toggle-button.mod-right:hover .clickable-icon { transform: scale(-1, 1) rotate(-12deg) scale(1.08); } body.animation-style-whimsy .sidebar-toggle-button.mod-right .clickable-icon:active { transform: scale(-0.9, 0.9); } /* 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-spring-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-spring-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; } /* --- Whimsy Throughout the Workspace --- */ /* New tabs bounce into the tab strip. Fill is backwards-only so the finished animation never overrides Obsidian's inline drag transforms. */ @keyframes whimsy-tab-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } body.animation-style-whimsy:not(.disable-ui-animations) .workspace-tab-header { animation: whimsy-tab-in var(--whimsy-normal) var(--ease-spring-md) backwards; } /* File explorer rows nudge right on the spring; :not(:active) keeps the flat press dip (scale 0.97) in charge while clicking */ body.animation-style-whimsy :is(.nav-file-title, .nav-folder-title) { transition: transform 0.3s var(--ease-spring-md), background-color var(--transition-ui), color var(--transition-ui); } body.animation-style-whimsy :is(.nav-file-title, .nav-folder-title):hover:not(:active) { transform: translateX(4px); } /* Search results spring in with a stagger as matches arrive */ body.animation-style-whimsy:not(.disable-ui-animations) .search-result-container .search-result { animation: whimsy-item-in var(--whimsy-normal) var(--ease-spring-md) backwards; animation-delay: min(calc(sibling-index() * 18ms), 180ms); } /* Note title takes a small bow when a file opens (editor + reading mode). When Aurora Title is on, its later drift animation wins โ€” by design. */ body.animation-style-whimsy:not(.disable-ui-animations) .inline-title { animation: whimsy-item-in var(--whimsy-normal) var(--ease-spring-md) backwards; } /* 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); corner-shape: superellipse(1.5); 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); corner-shape: squircle; 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); corner-shape: squircle; 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); corner-shape: superellipse(3); 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; /* no transform: would re-time Obsidian's native collapse */ transition: box-shadow 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; } /* Sidedock ghost fix: hide header during slide (class lands at slide start), fade in after landing */ .workspace-split:is(.mod-left-split, .mod-right-split) .workspace-tab-header-container { transition: opacity 0.18s var(--ease-apple) 0.1s, transform 0.35s var(--ease-spring-sm) 0.1s; } .workspace-split:is(.mod-left-split, .mod-right-split).is-sidedock-collapsed .workspace-tab-header-container { opacity: 0; transition: none; } /* Landing settle: icons drift in from window edge as the panel lands */ .workspace-split.mod-right-split.is-sidedock-collapsed .workspace-tab-header-container { transform: translateX(8px); } .workspace-split.mod-left-split.is-sidedock-collapsed .workspace-tab-header-container { transform: translateX(-8px); } /* Hide the animated toggle CLONE Obsidian leaves in mod-root on re-parent (updateFrameless โ†’ cloneNode) */ body.mod-macos .workspace.is-right-sidedock-open .workspace-split.mod-root .sidebar-toggle-button.mod-right, body.mod-macos .workspace.is-left-sidedock-open .workspace-split.mod-root .sidebar-toggle-button.mod-left { visibility: hidden; } .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); corner-shape: superellipse(1.5); background-color: var(--background-secondary); border: var(--border-thin) solid var(--divider-color); box-shadow: var(--shadow-1); color: var(--text-muted); /* Single row always: wrapping while max-width/height animate makes items reflow every frame and height:auto re-resolve โ€” the reveal jumbles */ white-space: nowrap; overflow: hidden; display: flex; align-items: center; justify-content: center; 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); 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); corner-shape: superellipse(1.5); 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); corner-shape: superellipse(3); 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); corner-shape: squircle; } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--r3); -electron-corner-smoothing: var(--squircle-main); corner-shape: squircle; transition: background-color 0.25s var(--ease-apple); } /* macOS overlay behavior: thumb hides while the pane is idle */ :not(:hover)::-webkit-scrollbar-thumb { background-color: transparent; } ::-webkit-scrollbar-thumb:hover { background-color: var(--interactive-accent); } /* macOS scrollbars have no track */ ::-webkit-scrollbar-track { background-color: transparent; border-radius: var(--r3); -electron-corner-smoothing: var(--squircle-main); corner-shape: squircle; } /* macOS overlay scrollbars: visible only while the pane is hovered */ 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: transparent transparent; transition: scrollbar-color 0.25s var(--ease-apple); } 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 ):hover { scrollbar-color: var(--scrollbar-thumb) transparent; } /* 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); corner-shape: squircle; 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); corner-shape: squircle; box-shadow: var(--shadow-overlay); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); } .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); /* Clip input background to prompt's top rounded corners (replaces overflow:hidden on parent) */ border-start-start-radius: var(--r4); border-start-end-radius: var(--r4); } .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); corner-shape: superellipse(1.5); 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); corner-shape: squircle; 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); corner-shape: superellipse(1.5); margin: 2px var(--s1); cursor: pointer; transition: background-color var(--fast), transform var(--fast); } /* Concentric with the 16px prompt shell: items are inset 4px, so 16 โˆ’ 4 = 12. Plain 12px suggestion popups keep the 6px default. */ .prompt .suggestion-item { border-radius: var(--r3); } .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); corner-shape: superellipse(1.5); 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); corner-shape: squircle; 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); corner-shape: superellipse(1.5); /* macOS menus keep the arrow cursor; pointer reads as web/Android */ 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); corner-shape: squircle; 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); corner-shape: superellipse(1.5); } .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); corner-shape: squircle; 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); corner-shape: superellipse(1.5); 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); corner-shape: superellipse(1.5); 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); } /* Keyboard focus: soft accent ring on controls that natively show nothing. :focus-visible only โ€” mouse clicks never trigger it. Text inputs excluded; they already get Obsidian's native focus box-shadow. */ body :is(button, .clickable-icon, .checkbox-container, .dropdown, select, a):focus-visible { outline: 2px solid rgba(var(--primary-color-rgb), 0.5); outline-offset: 1px; } /* 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; /* Obsidian's own .nav-buttons-container sets flex-wrap: wrap โ€” while the width animates, the last icon wraps to a second row below the pill */ flex-wrap: nowrap; 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); /* keep overflow hidden: anything outside the pill mid-animation must clip; side padding gives the edge icons room for their scale(1.1) hover */ padding-inline: 4px; 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; } /* ============================== */ /* AUTO-HIDE RIBBON */ /* ============================== */ /* Push-reveal, slide-in flavor: the ribbon stays in the flex flow but hides by pulling itself off-screen with a negative margin-left equal to its own width โ€” flow footprint 0, so it's completely gone and the workspace reclaims the space. Hover slides it back in, pushing the sidebar/notes right. Only margin-left animates: one layout property at constant geometry (no squish, no clipping), on a crisp ease-out โ€” the old width/flex-basis spring re-laid-out every pane per frame and read as stutter. The fixed ::after strip below stays pinned to the screen edge and carries :hover while the ribbon is off-screen. NO transforms on the ribbon โ€” a transform would become the containing block for the fixed strip and un-pin it from the edge. */ body:not(.is-mobile).ribbon-autohide .workspace-ribbon.mod-left { /* -2px fudge tucks the border-right hairline off-screen too */ margin-left: calc(-1 * var(--ribbon-width) - 2px); /* 140ms grace on retract so grazing out doesn't flicker; background-color keeps the theme-switch crossfade alive */ transition: margin-left 0.3s var(--ease-apple) 140ms, background-color 0.35s var(--ease-apple); } /* With the ribbon out of flow, macOS traffic-light clearance comes up short: native --frame-left-space is calc(80px - var(--ribbon-width)), which assumes the ribbon still occupies its width at the left edge. Reserve the full 80px so the top-left tab header (and the sidebar collapse icon when the left sidebar is collapsed) clears the lights. */ body:not(.is-mobile).ribbon-autohide.mod-macos { --frame-left-space: 80px; } /* Invisible 10px hot strip pinned to the screen edge โ€” position: fixed on the pseudo keeps it hit-testable while the ribbon is off-screen, independent of the ribbon's own geometry */ body:not(.is-mobile).ribbon-autohide .workspace-ribbon.mod-left::after { content: ""; position: fixed; top: 0; bottom: 0; left: 0; width: 10px; } /* :focus-within keeps the ribbon reachable by keyboard */ body:not(.is-mobile).ribbon-autohide .workspace-ribbon.mod-left:is(:hover, :focus-within) { margin-left: 0; transition-delay: 0s; } /* Icons hang back, then glide in on the spring a beat after the panel โ€” containers animate (not the icons) so icon hover transforms stay intact */ body:not(.is-mobile).ribbon-autohide .workspace-ribbon.mod-left :is(.side-dock-actions, .side-dock-settings) { opacity: 0; transform: translateX(-10px); transition: opacity 0.18s var(--ease-apple), transform 0.35s var(--ease-spring-md); } body:not(.is-mobile).ribbon-autohide .workspace-ribbon.mod-left:is(:hover, :focus-within) :is(.side-dock-actions, .side-dock-settings) { opacity: 1; transform: translateX(0); transition-delay: 60ms; } /* Settings cluster lands last for a two-beat cascade */ body:not(.is-mobile).ribbon-autohide .workspace-ribbon.mod-left:is(:hover, :focus-within) .side-dock-settings { transition-delay: 120ms; } /* 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 CSS variable defaults โ€” override once here, let the cascade do the rest */ body.is-mobile { --safe-area-inset-side: 16px; /* fallback; Obsidian sets the real value on device */ --input-border-width-focus: 0; /* prevents focus-ring flash on tap */ } /* 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 `contain` / `will-change` hints on mobile โ€” they break iOS scroll containment. Glass heading hints are now gated to desktop at source; this covers workspace containers where TerraFlow sets contain for card layout performance. */ 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 ) { 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; } /* Readable font sizes on phone โ€” use .is-mobile:not(.is-tablet) so iPad (which is both .is-mobile AND .is-tablet) doesn't get phone-size fonts. The old @media (max-width: 768px) block would fire on iPad portrait (768px wide), which was wrong. */ body.is-mobile:not(.is-tablet) { font-size: 16px; } body.is-mobile:not(.is-tablet) .markdown-preview-view, body.is-mobile:not(.is-tablet) .markdown-source-view { font-size: 1em; } body.is-mobile:not(.is-tablet) .markdown-rendered h1, body.is-mobile:not(.is-tablet) .cm-header-1 { font-size: 1.8em; } body.is-mobile:not(.is-tablet) .markdown-rendered h2, body.is-mobile:not(.is-tablet) .cm-header-2 { font-size: 1.5em; } body.is-mobile:not(.is-tablet) .markdown-rendered h3, body.is-mobile:not(.is-tablet) .cm-header-3 { font-size: 1.3em; } /* iPad-specific card margins โ€” use Obsidian's .is-tablet class rather than a viewport-width media query (more reliable, not fooled by split-screen sizes) */ body.is-tablet.layout-card .workspace-leaf { margin: 8px !important; } /* Strip elevated card effect from .mod-raised on mobile โ€” prevents any backdrop-filter on workspace widgets from janking scroll */ body.is-mobile .mod-raised { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* Honour prefers-reduced-motion on mobile: kill transitions on all overlay elements */ body.reduce-motion.is-mobile .mobile-tab-switcher, body.reduce-motion.is-mobile .menu, body.reduce-motion.is-mobile .suggestion-container, body.reduce-motion.is-mobile .prompt, body.reduce-motion.is-mobile .modal, body.reduce-motion.is-mobile .modal-bg { transition: none !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; } /* ============================== */ /* 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-spring-sm), transform 0.3s var(--ease-spring-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-spring-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; /* must clear the pill's semicircular end caps */ padding: 14px 6px !important; /* left margin 12px balances the composite gap on the right (4px ribbon margin + 5px leaf margin + split gap โ‰ˆ 13px) so the pill sits centered between window edge and note card instead of hugging the edge */ margin: 12px 4px 12px 12px !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; } /* Auto-Hide Ribbon โจฏ Card layout: same slide-in mechanics, pill look โ€” width is pinned to 48px (36px icons + 12px padding, border-box) so the hidden offset is exact: -54px margin-left tucks pill + 4px right margin fully off-screen (flow footprint 0); hover restores the pill's normal 12px inset and pushes the workspace right. overflow: hidden keeps the icon slide-in clipped inside the capsule (the fixed edge strip is NOT clipped โ€” its containing block is the viewport). Both collapsed states listed so this outranks the pill's own !important margins. */ body:not(.is-mobile).ribbon-autohide.layout-card .workspace-ribbon.side-dock-ribbon.mod-left:not(.is-collapsed), body:not(.is-mobile).ribbon-autohide.layout-card .workspace-ribbon.side-dock-ribbon.mod-left.is-collapsed { margin: 80px 4px 12px !important; margin-left: -54px !important; width: 48px !important; padding: 14px 6px !important; height: auto !important; min-height: 0 !important; max-height: max-content !important; overflow: hidden !important; border-radius: var(--radius-pill); } body:not(.is-mobile).ribbon-autohide.layout-card .workspace-ribbon.side-dock-ribbon.mod-left:not(.is-collapsed):is(:hover, :focus-within), body:not(.is-mobile).ribbon-autohide.layout-card .workspace-ribbon.side-dock-ribbon.mod-left.is-collapsed:is(:hover, :focus-within) { margin-left: 12px !important; } /* macOS frameless keeps the extra traffic-light clearance */ body.mod-macos.is-hidden-frameless:not(.is-mobile).ribbon-autohide.layout-card .workspace-ribbon.side-dock-ribbon.mod-left:not(.is-collapsed), body.mod-macos.is-hidden-frameless:not(.is-mobile).ribbon-autohide.layout-card .workspace-ribbon.side-dock-ribbon.mod-left.is-collapsed { margin-top: 90px !important; } /* While the ribbon is tucked away, the left sidebar card gets the same 5px edge gap the cards have on the right (the .workspace-leaf margin) instead of sitting flush against the screen edge. The gap collapses in sync with the ribbon slide-in (ribbon and split are siblings), so revealed geometry is identical to the non-autohide pill layout. */ body:not(.is-mobile).ribbon-autohide.layout-card .workspace-split.mod-left-split { margin-left: 5px; transition: box-shadow var(--transition-ui), background-color var(--transition-ui), margin-left 0.3s var(--ease-apple) 140ms; } body:not(.is-mobile).ribbon-autohide.layout-card .workspace-ribbon.mod-left:is(:hover, :focus-within) ~ .workspace-split.mod-left-split { margin-left: 0; transition-delay: 0s, 0s, 0s; } /* 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 */ /* ========================================= */ /* iOS inset-grouped settings cards */ /* h2 level */ .style-settings-heading[data-level="2"] + .style-settings-container { background-color: rgba(var(--background-secondary-rgb), 0.55); border-radius: var(--r2); margin-bottom: 4px; padding: 4px 8px; } /* 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(--r2); margin: 2px 6px; padding: 4px 8px; } .style-settings-container .setting-item { border-radius: var(--r1); } /* Bring the plugin's native section chevron in-flow (!important beats its (0,4,0) gutter rule) */ .style-settings-heading[data-level] .setting-item-name .style-settings-collapse-indicator { margin-left: 0 !important; margin-right: 8px; color: var(--text-muted); display: inline-flex; align-items: center; vertical-align: -1px; } .style-settings-heading[data-level] .setting-item-name .style-settings-collapse-indicator > svg { height: 12px !important; width: 12px !important; transition: transform 0.3s var(--ease-spring-sm); } .style-settings-heading:hover .style-settings-collapse-indicator { color: var(--primary-color); } .style-settings-heading:hover { background-color: color-mix(in srgb, var(--text-normal) 4%, transparent); border-radius: var(--r1); } /* Neutral heading text; export/import icons quiet until row hover */ .style-settings-heading .setting-item-name { color: var(--text-normal) !important; } .style-settings-heading :is(.style-settings-export, .style-settings-import) { opacity: 0.25; transition: opacity var(--transition-ui); } .style-settings-heading:hover :is(.style-settings-export, .style-settings-import) { opacity: 1; } /* ============================== */ /* 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; } /* Blockquotes vanish on the unified surface: hairline outline + text-mixed fill */ body.low-contrast.blockquote-style-default :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: color-mix(in srgb, var(--text-normal) 5%, transparent); border-block: var(--border-thin) solid color-mix(in srgb, var(--text-normal) 14%, transparent); border-inline-end: var(--border-thin) solid color-mix(in srgb, var(--text-normal) 14%, transparent); } /* Properties card: same treatment as blockquotes */ body.low-contrast:not(.is-mobile) .metadata-container { background-color: color-mix(in srgb, var(--text-normal) 5%, transparent); border: var(--border-thin) solid color-mix(in srgb, var(--text-normal) 14%, 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))); } /* ============================== */ /* NEUTRAL CHROME (APPLE) */ /* ============================== */ /* Accent only for active/selected; hovers wash gray */ body.neutral-chrome { /* all chrome glows route through this var */ --accent-glow: none; } body.neutral-chrome :is( .side-dock-ribbon-action, .side-dock-actions .clickable-icon, .workspace-ribbon .clickable-icon, .view-actions .clickable-icon, .workspace-ribbon-collapse-btn, .modal-close-button ):hover { color: var(--text-normal); background-color: color-mix(in srgb, var(--text-normal) 7%, transparent); } body.neutral-chrome .side-dock-ribbon-action .clickable-icon:hover { color: var(--text-normal); background-color: color-mix(in srgb, var(--text-normal) 7%, transparent); } /* ============================== */ /* 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 โ€” 3px always, covers both CM6 cursor div and native caret */ body.caret-accent { --caret-color: var(--interactive-accent); } 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; } /* No-blink caret (caret-animation ships in Chrome 139 / Electron 29+) */ body.caret-no-blink .cm-editor .cm-content { caret-animation: manual; } /* Smooth caret: transition CM's inline left/top; 80ms keeps typing snappy */ body.smooth-caret .cm-editor .cm-cursor, body.smooth-caret .cm-editor .cm-cursor-primary { transition: left 80ms var(--ease-apple), top 80ms var(--ease-apple); } /* ============================== */ /* 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); corner-shape: squircle; } :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); corner-shape: squircle; 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); corner-shape: squircle; } /* ============================== */ /* 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); corner-shape: squircle; 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); } /* ============================================================ Ambient & Pill Options (opt-in via Style Settings) 1. Ambient Accent Gradient โ€” body.ambient-gradient 2. Soft Pill Tabs โ€” body.pill-tabs ============================================================ */ /* --- 1. Ambient Accent Gradient ---------------------------- Accent wash fading from the top of the viewport. Rendered as a fixed, non-interactive overlay; z-index 20 sits above workspace chrome but below popovers (30), modals (50), menus (65). */ /* Fixed full-viewport overlay creates a compositing overlap on every scroll frame โ€” desktop-only so mobile scroll is unaffected */ body:not(.is-mobile).ambient-gradient .app-container::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 20; background: linear-gradient(to bottom, rgba(var(--primary-color-rgb), 0.11) 0%, rgba(var(--primary-color-rgb), 0.05) 22%, transparent 48%); } body:not(.is-mobile).theme-light.ambient-gradient .app-container::after { background: linear-gradient(to bottom, rgba(var(--primary-color-rgb), 0.07) 0%, rgba(var(--primary-color-rgb), 0.03) 22%, transparent 48%); } /* --- 2. Soft Pill Tabs --------------------------------------- Workspace tabs as quiet vibrancy pills: inactive tabs transparent, active tab a translucent accent pill, no scale transforms. The layout-card variants match the (0,5,1) specificity of the layout-card tab rules near line 6320 so the pill look wins. */ body.pill-tabs .workspace-tab-header-container-inner { gap: 3px; align-items: center; } body.pill-tabs .workspace-tab-header, body:not(.is-mobile).pill-tabs.layout-card .workspace-tab-header { border-radius: var(--radius-pill) !important; -electron-corner-smoothing: 0; background-color: transparent !important; box-shadow: none !important; } body.pill-tabs .workspace-tab-header:not(.is-active), body:not(.is-mobile).pill-tabs.layout-card .workspace-tab-header:not(.is-active), body:not(.is-mobile).pill-tabs.layout-card.theme-dark .workspace-tab-header:not(.is-active) { background-color: transparent !important; } body.pill-tabs .workspace-tab-header:hover, body.pill-tabs .workspace-tab-header.is-active:hover { transform: none; } body.pill-tabs .workspace-tab-header:not(.is-active):hover, body:not(.is-mobile).pill-tabs.layout-card .workspace-tab-header:not(.is-active):hover, body:not(.is-mobile).pill-tabs.layout-card.theme-dark .workspace-tab-header:not(.is-active):hover { background-color: rgba(var(--primary-color-rgb), 0.07) !important; } body:not(.is-mobile).pill-tabs .workspace-tab-header.is-active, body:not(.is-mobile).pill-tabs.layout-card .workspace-tab-header.is-active, body:not(.is-mobile).pill-tabs.layout-card.theme-dark .workspace-tab-header.is-active { transform: none; background-color: rgba(var(--primary-color-rgb), 0.14) !important; backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); box-shadow: inset 0 0 0 1px rgba(var(--primary-color-rgb), 0.18) !important; } /* ============================== */ /* LUMINOUS DETAILS (opt-in) */ /* ============================== */ /* Horizontal rules: seasonal gradient hairline with a soft center glow */ body.tf-luminous :is(.markdown-rendered, .markdown-preview-view, .markdown-source-view.mod-cm6) hr { border: none; height: 2px; border-radius: var(--radius-pill); background: linear-gradient(90deg, transparent 0%, rgba(var(--primary-color-rgb), 0.4) 18%, rgba(var(--primary-color-rgb), 0.85) 50%, rgba(var(--primary-color-rgb), 0.4) 82%, transparent 100%); box-shadow: 0 0 14px rgba(var(--primary-color-rgb), 0.35); } /* Quiet mode: keep the gradient, drop the glow */ body.tf-luminous.terraflow-quiet :is(.markdown-rendered, .markdown-preview-view, .markdown-source-view.mod-cm6) hr { box-shadow: none; } /* Images: gentle lift with an accent-tinted shadow bloom (desktop pointer only; touch devices are covered by the global hover kill-switch) */ body.tf-luminous:not(.is-mobile):not(.terraflow-quiet) :is(.markdown-rendered img, .markdown-source-view.mod-cm6 .cm-content img) { transition: transform var(--transition-ui), box-shadow var(--transition-ui); } body.tf-luminous:not(.is-mobile):not(.terraflow-quiet) :is(.markdown-rendered img, .markdown-source-view.mod-cm6 .cm-content img):hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 0 18px rgba(var(--primary-color-rgb), 0.15); } /* ============================== */ /* ELEGANT EMBED CARDS (opt-in) */ /* ============================== */ /* Transclusions as soft accent-edged cards, matching the callout design language */ body.tf-embed-cards .markdown-embed { background: radial-gradient(ellipse at top right, rgba(var(--primary-color-rgb), .08) 0%, transparent 65%), rgba(var(--background-secondary-rgb), .35); border: var(--border-thin) solid rgba(var(--primary-color-rgb), .12); border-inline-start: var(--border-heavy) solid rgba(var(--primary-color-rgb), .55); border-radius: var(--r1) var(--r3) var(--r3) var(--r1); -electron-corner-smoothing: var(--squircle-main); corner-shape: squircle; padding: var(--s2) var(--s3); transition: box-shadow var(--transition-ui), transform var(--transition-ui), border-color var(--transition-ui); } body.tf-embed-cards:not(.is-mobile):not(.terraflow-quiet) .markdown-embed:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: rgba(var(--primary-color-rgb), .25); border-inline-start-color: var(--primary-color); } body.tf-embed-cards .markdown-embed-title { color: var(--text-muted); font-size: 0.85em; font-weight: var(--weight-semibold); letter-spacing: 0.02em; } /* Open-link icon: revealed on hover (desktop only โ€” stays visible on touch) */ body.tf-embed-cards:not(.is-mobile) .markdown-embed .markdown-embed-link { opacity: 0; transition: opacity var(--transition-ui); } body.tf-embed-cards:not(.is-mobile) .markdown-embed:hover .markdown-embed-link { opacity: 1; } /* ============================== */ /* AURORA NOTE TITLE (opt-in) */ /* ============================== */ /* Inline title wears a gradient of the season's heading colors */ body.tf-aurora-title .inline-title { background-image: linear-gradient(100deg, var(--primary-color) 0%, var(--heading-secondary) 35%, var(--heading-tertiary, var(--primary-color)) 65%, var(--primary-color) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Slow drift โ€” quiet mode keeps the gradient but stops the motion; focus mode and prefers-reduced-motion already zero animation durations */ body.tf-aurora-title:not(.terraflow-quiet) .inline-title { animation: tf-aurora-drift 14s ease-in-out infinite; } @keyframes tf-aurora-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================== */ /* LIQUID GLASS CALLOUT STYLE */ /* ============================== */ /* Structural properties on all devices; !important mirrors the other callout styles */ .callout-style-liquid :is(.callout, .cm-callout) { border: none !important; border-inline-start: none !important; border-radius: var(--r4) !important; position: relative; overflow: hidden; background: radial-gradient(ellipse at top left, rgba(var(--callout-color-rgb), .22) 0%, transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .18) 0%, rgba(var(--callout-color-rgb), .1) 45%, rgba(var(--background-primary-rgb), .3) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .12) !important; } .theme-dark .callout-style-liquid :is(.callout, .cm-callout) { background: radial-gradient(ellipse at top left, rgba(var(--callout-color-rgb), .3) 0%, transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .07) 0%, rgba(var(--callout-color-rgb), .16) 45%, rgba(var(--background-primary-rgb), .4) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .3) !important; } /* GPU-expensive refraction blur desktop-only (same gating as Modern Glass) */ body:not(.is-mobile) .callout-style-liquid :is(.callout, .cm-callout) { backdrop-filter: blur(18px) saturate(190%) !important; -webkit-backdrop-filter: blur(18px) saturate(190%) !important; } .callout-style-liquid .markdown-source-view.mod-cm6 .cm-callout { border: none !important; outline: none !important; } /* Specular sheen: sweeps across on hover, snaps back invisibly on leave */ .callout-style-liquid .callout::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .14) 46%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .14) 54%, transparent 68%); transform: translateX(-130%); pointer-events: none; } body:not(.is-mobile):not(.terraflow-quiet) .callout-style-liquid .callout:hover::after { transform: translateX(130%); transition: transform 0.9s var(--ease-apple); } /* ============================== */ /* LIQUID GLASS BLOCKQUOTE */ /* ============================== */ /* Shared material: seasonal tint + specular insets (mirrors Liquid Glass callouts) */ .blockquote-style-liquid :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), .14) 0%, transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(var(--background-secondary-rgb), .35) 100%) !important; border: none !important; border-inline-start: var(--border-heavy) solid rgba(var(--primary-color-rgb), .65) !important; } .theme-dark .blockquote-style-liquid :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), .2) 0%, transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .06) 0%, rgba(var(--background-secondary-rgb), .3) 100%) !important; } /* Block-level extras: radius, shadow, refraction, sheen (reading mode block only) */ .blockquote-style-liquid :is(.markdown-preview-view blockquote, .markdown-rendered blockquote) { position: relative; overflow: hidden; border-radius: var(--r2) var(--r3) var(--r3) var(--r2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .1); } body:not(.is-mobile) .blockquote-style-liquid :is(.markdown-preview-view blockquote, .markdown-rendered blockquote) { backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); } .blockquote-style-liquid :is(.markdown-preview-view blockquote, .markdown-rendered blockquote)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .12) 54%, transparent 68%); transform: translateX(-130%); pointer-events: none; } body:not(.is-mobile):not(.terraflow-quiet) .blockquote-style-liquid :is(.markdown-preview-view blockquote, .markdown-rendered blockquote):hover::after { transform: translateX(130%); transition: transform 0.9s var(--ease-apple); } /* ============================== */ /* LIQUID TAGS */ /* ============================== */ body.tf-liquid-tags :is(.markdown-rendered, .markdown-preview-view) a.tag { background: linear-gradient(160deg, rgba(255, 255, 255, .22) 0%, rgba(var(--primary-color-rgb), .16) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .08); border: none; border-radius: var(--radius-pill); padding: 0.15em 0.7em; color: var(--primary-color); transition: transform var(--transition-ui), box-shadow var(--transition-ui); } body.tf-liquid-tags:not(.is-mobile):not(.terraflow-quiet) :is(.markdown-rendered, .markdown-preview-view) a.tag:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 4px 12px rgba(var(--primary-color-rgb), .25); } /* Gel press, same language as buttons */ body.tf-liquid-tags :is(.markdown-rendered, .markdown-preview-view) a.tag:active { transform: scale(1.03, 0.94); transition: transform 0.1s var(--ease-apple); } /* Live-preview hashtag halves share one continuous chip */ body.tf-liquid-tags .cm-line :is(.cm-hashtag-begin, .cm-hashtag-end) { background: linear-gradient(160deg, rgba(255, 255, 255, .22) 0%, rgba(var(--primary-color-rgb), .16) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); color: var(--primary-color); } body.tf-liquid-tags .cm-line .cm-hashtag-begin { border-start-start-radius: var(--radius-pill); border-end-start-radius: var(--radius-pill); padding-inline-start: 0.5em; } body.tf-liquid-tags .cm-line .cm-hashtag-end { border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); padding-inline-end: 0.6em; } /* ============================== */ /* LIQUID PROPERTIES PANEL */ /* ============================== */ body.tf-liquid-properties .metadata-container { background: radial-gradient(ellipse at top left, rgba(var(--primary-color-rgb), .1) 0%, transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(var(--background-secondary-rgb), .4) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .1); } body.theme-dark.tf-liquid-properties .metadata-container { background: radial-gradient(ellipse at top left, rgba(var(--primary-color-rgb), .14) 0%, transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .05) 0%, rgba(var(--background-secondary-rgb), .35) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 22px rgba(0, 0, 0, .28); } body.tf-liquid-properties:not(.is-mobile) .metadata-container { backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); } /* Hover keeps the existing lift; deepen the drop shadow only */ body.tf-liquid-properties:not(.is-mobile):not(.terraflow-quiet) .metadata-container:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 30px rgba(0, 0, 0, .16); } /* ============================== */ /* LIQUID TABLES */ /* ============================== */ /* Whole table becomes liquid material; overflow releases so headers can stick (background and shadow follow the table's own border-radius; corner rounding also lives on the cells, so nothing clips wrong) */ body.tf-liquid-tables :is(.markdown-rendered, .markdown-preview-view) table { overflow: visible; background: radial-gradient(ellipse at top left, rgba(var(--primary-color-rgb), .08) 0%, transparent 55%), linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(var(--background-secondary-rgb), .35) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .1); } body.theme-dark.tf-liquid-tables :is(.markdown-rendered, .markdown-preview-view) table { background: radial-gradient(ellipse at top left, rgba(var(--primary-color-rgb), .12) 0%, transparent 55%), linear-gradient(160deg, rgba(255, 255, 255, .05) 0%, rgba(var(--background-secondary-rgb), .3) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 0, 0, .26); } body.tf-liquid-tables:not(.is-mobile) :is(.markdown-rendered, .markdown-preview-view) table { backdrop-filter: blur(10px) saturate(170%); -webkit-backdrop-filter: blur(10px) saturate(170%); } /* Header row: distinct seasonal-accent glass, sticky over the scrolling rows */ body.tf-liquid-tables:is(.theme-light, .theme-dark) :is(.markdown-rendered, .markdown-preview-view) table tr:nth-child(n) th { position: sticky; inset-block-start: 0; z-index: 2; filter: none; background-color: rgba(var(--background-secondary-rgb), .8); background-image: linear-gradient(160deg, rgba(var(--primary-color-rgb), .28) 0%, rgba(var(--primary-color-rgb), .14) 100%); color: var(--text-normal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(var(--primary-color-rgb), .4); } body.tf-liquid-tables:is(.theme-light, .theme-dark):not(.is-mobile) :is(.markdown-rendered, .markdown-preview-view) table tr:nth-child(n) th { backdrop-filter: blur(10px) saturate(170%); -webkit-backdrop-filter: blur(10px) saturate(170%); } /* Editor tables: same material, no sticky (CM6 scroll model doesn't suit it) */ body.tf-liquid-tables .markdown-source-view.mod-cm6 .cm-table-widget table { background: radial-gradient(ellipse at top left, rgba(var(--primary-color-rgb), .08) 0%, transparent 55%), linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(var(--background-secondary-rgb), .35) 100%); border-radius: var(--r3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .1); } body.tf-liquid-tables:is(.theme-light, .theme-dark) .markdown-source-view.mod-cm6 .cm-table-widget table th { filter: none; background-color: rgba(var(--background-secondary-rgb), .8); background-image: linear-gradient(160deg, rgba(var(--primary-color-rgb), .28) 0%, rgba(var(--primary-color-rgb), .14) 100%); color: var(--text-normal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(var(--primary-color-rgb), .4); } /* ============================== */ /* LIQUID STATUS BAR */ /* ============================== */ /* Upgrade the expanded Dynamic Island pill to true glass material */ body.tf-liquid-statusbar:not(.is-mobile):not(.disable-status-bar) .status-bar:hover { background-color: rgba(var(--background-secondary-rgb), .55); border-color: transparent; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 24px rgba(0, 0, 0, .18); } /* ============================== */ /* LIQUID COMMAND PALETTE */ /* ============================== */ body.tf-liquid-prompt .prompt { backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .12), var(--shadow-overlay); } body.theme-dark.tf-liquid-prompt .prompt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .08), var(--shadow-overlay-dark); } body.tf-liquid-prompt .suggestion-item.is-selected { background: linear-gradient(160deg, rgba(var(--primary-color-rgb), .24) 0%, rgba(var(--primary-color-rgb), .12) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } /* ============================== */ /* SCROLL EDGE DISSOLVE */ /* ============================== */ /* Note content melts into the chrome at the top and bottom of the scroller instead of hard-clipping (Apple Notes style). The mask must sit on the scroll container itself โ€” on an inner element it would scroll away with the content. Direct-child chains keep it off nested editors (table cells, canvas cards). Trade-off: the custom scrollbar fades with the content at both ends. */ body.scroll-edge-fade .workspace-leaf-content[data-type="markdown"] .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller, body.scroll-edge-fade .workspace-leaf-content[data-type="markdown"] .markdown-reading-view > .markdown-preview-view { -webkit-mask-image: linear-gradient(to bottom, transparent, black 28px, black calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, transparent, black 28px, black calc(100% - 28px), transparent); } /* ============================== */ /* SCROLL-DRIVEN ANIMATIONS */ /* ============================== */ /* Reading Progress Bar + Rise Into View, driven by animation-timeline. @supports-gated: without timeline support the pseudo-elements and animations don't exist at all. Deep Focus / Disable UI Animations are excluded with :not() guards because the global animation-duration kill-switches can't stop scroll-driven animations โ€” duration is ignored once an animation has a timeline. */ @supports (animation-timeline: scroll()) { /* --- Reading Progress Bar --- */ /* The bar lives on the view header โ€” outside the scroller โ€” so the Scroll Edge Dissolve mask can't clip it. Live preview and reading mode get distinct timeline names: the hidden mode's scroller has an inactive timeline, which leaves its bar at the un-animated base state of scaleX(0). Notes too short to scroll also produce an inactive timeline, so no bar appears. */ body.scroll-progress:not(.focus-mode):not(.disable-ui-animations) .workspace-leaf-content[data-type="markdown"] { timeline-scope: --tf-scroll-lp, --tf-scroll-rv; } body.scroll-progress:not(.focus-mode):not(.disable-ui-animations) .workspace-leaf-content[data-type="markdown"] .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller { scroll-timeline: --tf-scroll-lp block; } body.scroll-progress:not(.focus-mode):not(.disable-ui-animations) .workspace-leaf-content[data-type="markdown"] .markdown-reading-view > .markdown-preview-view { scroll-timeline: --tf-scroll-rv block; } body.scroll-progress:not(.focus-mode):not(.disable-ui-animations) .workspace-leaf-content[data-type="markdown"] .view-header::before, body.scroll-progress:not(.focus-mode):not(.disable-ui-animations) .workspace-leaf-content[data-type="markdown"] .view-header::after { content: ''; position: absolute; left: 0; bottom: -1.5px; /* overlays the header's 1.5px border-block-end as it fills */ width: 100%; height: 2px; pointer-events: none; z-index: 6; background-color: rgba(var(--primary-color-rgb), 0.65); transform: scaleX(0); transform-origin: left center; animation: tf-scroll-progress linear both; } body.scroll-progress:not(.focus-mode):not(.disable-ui-animations) .workspace-leaf-content[data-type="markdown"] .view-header::before { animation-timeline: --tf-scroll-lp; } body.scroll-progress:not(.focus-mode):not(.disable-ui-animations) .workspace-leaf-content[data-type="markdown"] .view-header::after { animation-timeline: --tf-scroll-rv; } /* --- Rise Into View (reading mode) --- */ /* Animates the section wrapper div, not the block itself, so hover lifts and sticky liquid-table headers on the inner element aren't frozen by the animation's fill. Ends on transform: none so no containing block lingers after entry. Blocks already in view when a note opens are past their entry range and render settled โ€” no load flicker. */ @media (prefers-reduced-motion: no-preference) { body.scroll-reveal:not(.focus-mode):not(.disable-ui-animations) .markdown-reading-view .markdown-preview-sizer > div:has(> :is(.callout, table, pre, blockquote), .image-embed) { animation: tf-rise-in linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; } } } @keyframes tf-scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes tf-rise-in { from { opacity: 0.5; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ============================== */ /* OPTICAL TEXT CENTERING */ /* ============================== */ /* text-box: trim-both cuts the font's invisible leading above cap height and below the baseline, so short labels center on their letterforms instead of their line box (Chromium 133+; inert where unsupported). Applies to block containers only โ€” Obsidian's flex-based buttons and status-bar items are unaffected by design. */ body.optical-text-trim .callout-title-inner { text-box: trim-both cap alphabetic; } /* Tab titles ellipsize via overflow:hidden, which clips ink outside the trimmed box โ€” an alphabetic under-edge cuts descenders (p, g, y). Trim only down to the font's descent edge here. */ body.optical-text-trim .workspace-tab-header-inner-title { text-box: trim-both cap text; } /* Tag chips need a block container for the trim to bite; inline-block also prevents a chip breaking across lines */ body.optical-text-trim :is(.markdown-rendered, .markdown-preview-view) a.tag { display: inline-block; text-box: trim-both cap alphabetic; } /* ============================== */ /* DARK ELEVATION LAYERS */ /* ============================== */ /* Dark surfaces separate poorly through shadow alone โ€” dark-on-dark shadows carry almost no contrast. Overlay a translucent white lift that rises with stacking order (menus โ†’ popovers โ†’ palette), creating separation without adding color. Rides the Depth & Shadows toggle. */ body.depth-shadows.theme-dark :is(.menu, .tooltip) { background-image: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)); } body.depth-shadows.theme-dark :is(.popover, .suggestion-container) { background-image: linear-gradient(rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.045)); } body.depth-shadows.theme-dark .prompt { background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)); }