/* @settings name: Velocity - Theme Configurator id: obsidian-velocity settings: - id: theme-mode title: Select vehicle driving profile (WIP) type: class-select default: theme-strada options: - label: Touring value: theme-turismo - label: Sport value: theme-strada - label: Race value: theme-corsa - id: theme-paint title: Select vehicle paint job (WIP) type: variable-select default: WIP options: - label: N/A value: WIP - id: color-highlight-rgb title: Select highlight color type: variable-select default: var(--color-yellow-rgb) options: - label: Pink value: var(--color-pink-rgb) - label: Red value: var(--color-red-rgb) - label: Orange value: var(--color-orange-rgb) - label: Yellow value: var(--color-yellow-rgb) - label: Green value: var(--color-green-rgb) - label: Cyan value: var(--color-cyan-rgb) - label: Blue value: var(--color-blue-rgb) - label: Purple value: var(--color-purple-rgb) - id: line-height-normal title: Set line height and spacing type: variable-select default: '1.6' allowEmpty: false options: - label: Compact value: '1.5' - label: Relaxed value: '1.6' - id: file-line-width title: Set readable line width description: Set the readable line width in relative units (rem). type: variable-number-slider default: 43 min: 40 max: 46 step: 0.25 format: 'rem' - id: switch-edit-icons title: Invert editing toggle icons description: By default, the editing mode toggle shows the mode it will switch to when pressed. Enable this setting to make it show the current mode instead. type: class-toggle - title: Additional settings type: heading level: 1 collapsed: false - id: static-heading title: Disable theme features type: heading level: 2 collapsed: false - description: Velocity comes with various features **enabled by default**. If you do not need them, they can be disabled here. type: info-text markdown: true - id: disable-hover-header title: Disable Compact Panels in the sidebar type: class-toggle - id: disable-custom-icons title: Disable Custom Icons type: class-toggle - id: disable-naked-embeds title: Disable Naked Embed styling type: class-toggle - id: disable-autohide title: Disable Sidebar Auto-Hide™ feature type: class-toggle - id: disable-status-fade title: Disable Status Bar fade until hover type: class-toggle - id: disable-title-h1 title: Disable title style for H1 Headings type: class-toggle - id: disable-list-styling title: Restore bullet-style List Markers type: class-toggle - id: disable-callout-styling title: Restore default Callout styling type: class-toggle - id: static-heading title: Enable optional features type: heading level: 2 collapsed: false - id: active-line-highlight title: Enable active line highlighting description: Highlights the active line with slight backdrop for easier text navigation. type: class-toggle - id: enable-dim-img title: Enable image dimming in Dark mode description: Reduces the brightness of images in Dark mode except when hovered. type: class-toggle - id: prop-headings title: Enable proportional heading margins description: Decreases the margin sizes of smaller headings. type: class-toggle - id: hide-bases-header title: Enable minimal Bases display for Reading mode description: Hides the filter toolbar options for embedded Bases in Reading mode. type: class-toggle - id: enable-performance-tweaks title: Enable experimental performance tweaks description: Activates special CSS hacks which typically improve editor performance. Leave off if stability or performance is negatively affected. type: class-toggle - id: code-special title: Enable unique color for inline code type: variable-select default: var(--code-normal) allowEmpty: false options: - label: Text value: var(--code-normal) - label: Red value: var(--color-red) - */ /* Velocity 1.3.0-beta -------- by Floodlight - 0: Base - 1: Foundations - 2: Markdown - 3: Interface - 4: Modals - 5: Mobile - 6: Plugins - 7: CSSclasses - 8: Fonts */ /* =========================== =========================== 0 - Base =========================== =========================== */ /*--> Theme CSS Variables <--*/ body { /* Animation timing */ --anim-fast-swing: var(--anim-duration-fast) var(--anim-motion-swing); --anim-fast-smooth: var(--anim-duration-fast) var(--anim-motion-smooth); --anim-super-swing: var(--anim-duration-superfast) var(--anim-motion-swing); --anim-super-smooth: var(--anim-duration-superfast) var(--anim-motion-smooth); /* Bases */ --bases-embed-border-radius: 0; --bases-header-border-width: 0; --bases-header-padding-start: 0; --bases-header-padding-end: 4px; --bases-table-cell-background-active: transparent; --bases-table-cell-shadow-active: var(--shadow-input-active); --bases-table-container-border-radius: 0; --bases-table-header-color: var(--text-muted); --bases-table-header-color-hover: var(--color-base-80); --bases-table-header-weight: var(--font-normal); --bases-table-header-background-hover: transparent; --bases-table-row-background-hover: transparent; --bases-table-row-border-width: 0; --bases-table-text-size: var(--table-text-size); --bases-table-row-height: 32px; --bases-cards-label-size: 0.75rem; --bases-cards-label-color: color-mix(in oklab, var(--color-base-50), var(--color-base-60)); --bases-cards-text-size: var(--font-small); /* Blockquotes */ --blockquote-border-thickness: 0; /* Bold */ --bold-color: var(--color-base-100); --bold-modifier: 250; /* Buttons */ --button-radius: var(--radius-s); /* Canvas */ /* Caret (text entry cursor) */ /* Checkboxes */ --checkbox-radius: 50%; --checkbox-marker-color: #fff; --checkbox-color: transparent; --checkbox-color-hover: transparent; --checklist-done-decoration: none; --checklist-done-color: var(--color-base-55); /* Code */ --code-radius: 5px; --code-border-width: 1px; --code-normal: var(--text-normal); --code-special: var(--code-normal); /* Collapse icons */ /* Cursor */ /* Dialogs - e.g. small modals, confirmations */ /* Dividers between panes */ --divider-color-hover: var(--color-accent-4); --divider-width: 0; /* Dragging */ /* Dropdowns */ --dropdown-background: var(--interactive-normal); --dropdown-background-hover: var(--interactive-normal); /* Blocks */ /* File layout */ --file-line-width: 43rem; --file-margin-y: 28px; --file-margins: var(--file-margin-y) 5%; --file-header-font-weight: var(--font-normal); /* Relative font sizes */ --font-small: 0.90625em; /* UI font sizes */ /* Font weights */ --font-thin: 250; --font-extralight: 275; --font-light: 350; --font-normal: 450; --font-medium: 550; --font-semibold: 650; --font-bold: 750; --font-extrabold: 850; --font-black: 900; --font-semi-medium: calc(var(--font-normal) + 50); --font-cta-button: var(--font-normal); /* Footnotes */ /* Graphs */ --graph-controls-width: 220px; --graph-node-focused: transparent; /* Headings */ --h1-color: var(--color-base-100); --h2-color: var(--color-base-100); --h3-color: var(--color-base-100); --h4-color: var(--color-base-90); --h5-color: var(--color-base-80); --h6-color: var(--color-base-70); --h1-weight-alt: 575; --h1-size-alt: 1.75em; --h1-size: 2.125em; --h2-size: 1.5625em; --h3-size: 1.4125em; --h4-size: 1.2125em; --h5-size: 1.0875em; --h6-size: 1em; --h1-weight: 325; --h2-weight: 575; --h3-weight: 575; --h4-weight: 650; --h5-weight: 675; --h6-weight: 700; --header-height: 52px; /* Icons */ --icon-stroke-thick: 2.25px; --icon-xs-stroke-width: 2.125px; --icon-m-stroke-width: 1.875px; /* Indent size */ --indent-unit: .375em; /* Indentation guide */ /* Inline title */ /* Inputs */ --input-height: 28px; --input-radius: var(--radius-s); --input-border-width: 0; /* Italic */ --italic-color: var(--color-base-80); /* Z-index */ /* Line heights */ --line-height-normal: 1.6; /* Links */ --link-decoration: none; --link-decoration-hover: none; --link-unresolved-opacity: 1; /* Lists */ --list-spacing: 0.15em; --list-marker-color: var(--color-base-50); /* File navigator */ --nav-indentation-guide-color: var(--trans-faint-10); --nav-indentation-guide-width: 2px; --nav-item-parent-padding: 8px 8px 8px 24px; --nav-item-weight: var(--font-normal); --nav-item-weight-active: var(--font-normal); --nav-item-color: var(--color-base-80); --nav-item-color-hover: var(--nav-text-color); --nav-item-color-active: var(--nav-text-color); --nav-item-color-selected: var(--nav-text-color); --nav-file-weight: var(--font-semibold); --collapse-icon-color: var(--trans-faint-60); /* Metadata */ --metadata-background: var(--code-background); --metadata-border-radius: var(--radius-m); --metadata-input-text-color: var(--color-base-80); --metadata-label-font-size: var(--font-smallest); --metadata-label-text-color: var(--icon-color); --metadata-property-box-shadow-hover: 0 0 0 1.625px var(--divider-color); --metadata-property-box-shadow-focus: var(--shadow-input-active); /* Menus */ --menu-shadow: var(--shadow-themes); --menu-radius: var(--radius-ml); --menu-background: color-mix(in oklab, var(--background-primary) 40%, var(--background-secondary) 60%); --menu-border-color: var(--trans-faint-40); /* Modals - e.g. settings, community themes, community plugins */ --modal-radius: var(--radius-xxl); /* Multi-select pills */ --pill-background: var(--background-primary); --pill-background-hover: var(--background-primary); --pill-radius: 5px; /* PDF view */ --pdf-shadow: none !important; --pdf-spread-shadow: none; --pdf-thumbnail-shadow: var(--shadow-code), var(--shadow-s); /* Prompts - e.g. quick switcher, command palette */ --prompt-border-color: var(--trans-faint-40); --prompt-input-height: 48px; /* Radiuses */ --radius-xs: 4px; --radius-s: 6px; --radius-sm: 8px; --radius-m: 10px; --radius-ml: 12px; --radius-l: 16px; --radius-xl: 18px; --radius-xxl: 20px; /* Ribbon */ --ribbon-background: transparent; --ribbon-background-collapsed: transparent; --ribbon-padding: 6px 4px 12px 8px; /* Scrollbars */ --scrollbar-thumb-bg: var(--trans-faint-30); --scrollbar-active-thumb-bg: var(--trans-faint-50); /* Search */ --search-clear-button-color: var(--color-base-50); --search-icon-color: var(--color-base-50); --search-icon-size: 17px; /* Sliders */ --slider-track-height: 20px; --slider-thumb-height: 20px; --slider-thumb-width: 20px; --slider-thumb-border-width: 0; --slider-thumb-y: -7px; /* Status bar */ --status-bar-border-width: 0; --status-bar-radius: var(--radius-l) 0 0 var(--radius-l); /* Swatch for color inputs */ /* Tabs */ --tab-container-background: transparent; --tab-font-weight: var(--font-normal); --tab-outline-width: 0; --tab-text-color: var(--text-muted); --tab-text-color-active: var(--nav-text-color); --tab-text-color-focused-active-current: var(--nav-text-color); --tab-text-color-focused-active: var(--nav-text-color); --tab-text-color-focused: var(--text-muted); --tab-radius: var(--radius-s); /* Mobile tab switcher */ /* Stacked tabs */ /* Tables */ --table-background: none; --table-row-alt-background: var(--table-row-bg); --table-row-background-hover: none; --table-row-alt-background-hover: var(--table-row-bg); --table-column-alt-background: none; --table-border-color: var(--hr-color); --table-header-size: 0.8175em; --table-header-color: var(--text-normal); --table-line-height: var(--line-height-normal); --table-text-size: var(--font-small); --table-text-weight: var(--font-normal); /* Tags */ --tag-shadow: inset 0px -1.4px 0px 0px var(--trans-strong-30); --tag-size: var(--font-smallest); --tag-background: transparent; --tag-background-hover: transparent; --tag-border-color: hsla(var(--interactive-accent-hsl), 0.1); --tag-border-color-hover: var(--tag-border-color); --tag-border-width: 1px; --tag-padding-x: 0.6875em; --tag-padding-y: 0.3125em; /* Window frame */ --titlebar-background: transparent; --titlebar-background-focused: transparent; --titlebar-text-color: var(--trans-faint-60); --titlebar-text-color-focused: var(--color-base-80); /* Toggles */ /* Vault profile */ /* Backgrounds */ --background-modifier-form-field: transparent; --background-modifier-form-field-hover: transparent; --color-highlight: rgb(var(--color-highlight-rgb)); --color-highlight-rgb: var(--color-yellow-rgb); /* Inputs */ /* Text */ --interactive-normal: var(--color-base-00); --interactive-hover: var(--background-secondary); } .theme-light { --accent-h: 212; --accent-s: 100%; --accent-l: 48%; --color-red-rgb: 250, 30, 14; --color-red: rgb(240, 42, 28); --color-orange-rgb: 255, 143, 0; --color-orange: rgb(255, 143, 0); --color-yellow-rgb: 233, 188, 0; --color-yellow: rgb(233, 188, 0); --color-green-rgb: 9, 180, 29; --color-green: rgb(9, 180, 29); --color-cyan-rgb: 4, 176, 167; --color-cyan: rgb(4, 176, 167); --color-blue-rgb: 0, 132, 255; --color-blue: rgb(0, 132, 255); --color-purple-rgb: 180, 68, 241; --color-purple: rgb(178, 74, 236); --color-pink-rgb: 225, 70, 147; --color-pink: rgb(225, 70, 147); --base-hue: 281; --base-sat-xtr: 0.01050; --base-sat-str: 0.00250; --base-sat-med: 0.00150; --base-sat-low: 0.00050; --color-base-00: oklch(100.0% var(--base-sat-low) var(--base-hue)); --color-base-05: oklch(98.80% var(--base-sat-med) var(--base-hue)); --color-base-10: oklch(96.20% var(--base-sat-str) var(--base-hue)); --color-base-20: oklch(92.00% var(--base-sat-str) var(--base-hue)); --color-base-25: oklch(88.25% var(--base-sat-str) var(--base-hue)); --color-base-30: oklch(85.75% var(--base-sat-str) var(--base-hue)); --color-base-35: oklch(78.75% var(--base-sat-str) var(--base-hue)); --color-base-40: oklch(75.25% var(--base-sat-str) var(--base-hue)); --color-base-50: oklch(71.50% var(--base-sat-xtr) var(--base-hue)); --color-base-55: oklch(65.00% var(--base-sat-xtr) var(--base-hue)); --color-base-60: oklch(55.00% var(--base-sat-xtr) var(--base-hue)); --color-base-70: oklch(45.00% var(--base-sat-xtr) var(--base-hue)); --color-base-80: oklch(42.00% var(--base-sat-str) var(--base-hue)); --color-base-90: oklch(28.25% var(--base-sat-low) var(--base-hue)); --color-base-100: oklch(22.50% var(--base-sat-low) var(--base-hue)); --trans-strong-00: oklch(from var(--color-base-00) l c h / 0.950); --trans-strong-10: oklch(from var(--color-base-00) l c h / 0.800); --trans-strong-20: oklch(from var(--color-base-00) l c h / 0.750); --trans-strong-30: oklch(from var(--color-base-00) l c h / 0.400); --trans-strong-40: oklch(from var(--color-base-50) l c h / 0.100); --trans-faint-00: oklch(62.50% 0 0 / 0.0300); --trans-faint-05: oklch(25.00% 0 0 / 0.0275); --trans-faint-10: oklch(0.000% 0 0 / 0.0500); --trans-faint-20: oklch(0.000% 0 0 / 0.0600); --trans-faint-25: oklch(0.000% 0 0 / 0.0700); --trans-faint-30: oklch(0.000% 0 0 / 0.0920); --trans-faint-40: oklch(0.000% 0 0 / 0.1140); --trans-faint-50: oklch(0.000% 0 0 / 0.1450); --trans-faint-60: oklch(0.000% 0 0 / 0.3200); --text-normal: var(--color-base-90); --text-muted: var(--color-base-70); --text-faint: var(--color-base-50); --text-selection: hsla(var(--color-accent-hsl), 0.15); --text-success-bg: oklch(from var(--color-green) 0.53125 0.4 h); --text-success-faint: color-mix(in oklab, var(--color-green), transparent 0.375); --text-highlight-bg: oklch(from var(--color-highlight) 0.875 c h / 0.2); --text-highlight-bg-rgb: var(--color-highlight-rgb); --text-highlight-ul-color: oklch(from var(--color-highlight) 0.875 c h); --text-highlight-bg-search: var(--text-highlight-bg); --text-highlight-bg-search-active: color-mix(in oklab, var(--color-highlight), transparent 37.5%); --link-unresolved-color: oklch(from var(--color-accent) 72% 36% h); --modal-border-color: var(--color-base-40); --background-gradient: radial-gradient( at 50% calc(50% + 22px), var(--color-base-05) 37.5%, var(--color-base-50) 225% ); --background-gradient-menu: radial-gradient( at 64% 50%, var(--color-base-10) 30%, var(--color-base-30) 150% ); --background-gradient-community: radial-gradient( at 50% 50%, var(--color-base-10) 30%, var(--color-base-25) 160% ); --background-button-hover: var(--background-primary); --background-modifier-border: var(--trans-faint-20); --background-modifier-border-focus: transparent; --background-modifier-cover: color-mix(in oklch, var(--color-base-90) 50%, transparent 100%); --background-modifier-hover: var(--trans-faint-10); --hotkey-gradient: linear-gradient(to top, var(--color-accent) -30%, var(--color-accent-4) 180%); --success-gradient: linear-gradient(to top, var(--text-success-bg) -25%, #FFF 250%); --toggle-gradient: linear-gradient(to bottom, var(--color-accent) -30%, var(--color-accent-4) 180%); --warning-gradient: linear-gradient(to top, var(--color-red) -30%, #FFF 210%); --color-accent-1: color-mix(in oklch, var(--color-accent) 100%, transparent 10%); --color-accent-2: color-mix(in oklch, var(--color-accent) 80%, transparent 40%); --color-accent-3: color-mix(in oklch, var(--color-accent), transparent 5%); --color-accent-4: color-mix(in oklch, var(--color-accent) 50%, transparent 75%); --color-accent-5: color-mix(in oklch, var(--text-selection) 100%, transparent 75%); --color-accent-6: color-mix(in oklch, var(--text-selection) 40%, transparent 100%); --bases-cards-background: oklch(from var(--trans-faint-05) l 0.075 var(--base-hue)); --blockquote-color: var(--color-base-80); --blockquote-border-color: var(--color-base-25); --blockquote-background-color: var(--trans-faint-00); --checkbox-border-color: var(--color-base-35); --checkbox-border-color-hover: var(--color-base-50); --code-background: var(--trans-faint-00); --code-background-alt: var(--trans-strong-10); --code-border-color: var(--trans-faint-20); --fab-bg: var(--background-primary); --fab-color: var(--text-muted); --hr-color: var(--trans-faint-30); --icon-color: var(--color-base-60); --icon-color-hover: var(--text-normal); --link-color-sidebar: var(--color-accent-1); --list-bullet-color: var(--text-muted); --list-dash-color: var(--color-base-50); --background-primary: var(--color-base-05); --background-secondary: var(--color-base-10); /* --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); --background-modifier-cover: rgba(220, 220, 220, 0.4); */ --nav-header-bg: var(--trans-strong-40); --nav-text-color: var(--color-base-100); --nav-folder-color: var(--color-base-80); --search-result-background: var(--trans-strong-30); --setting-item-bg: var(--background-primary); --setting-item-border-color: var(--hr-color); --slider-track-background: var(--trans-faint-20); --toggle-track-bg: var(--trans-faint-50); --status-bar-background: var(--trans-strong-00); --status-bar-filter: opacity(0.25) blur(0.375px); --strikethrough-color: var(--color-base-50); --table-row-bg: var(--trans-faint-05); --tab-background-active: var(--trans-strong-20); --tab-sidebar-bg: var(--color-base-00); --tab-sidebar-bg-top: var(--trans-strong-10); --tab-sidebar-bg-top-left: var(--trans-strong-20); --tab-sidebar-container-bg: radial-gradient(at 50% 125%, var(--trans-faint-05), var(--trans-faint-05)); --tag-background-image: linear-gradient(to top, var(--text-selection) -30%, var(--color-accent-6) 60%); --vault-profile-color: var(--text-normal); --workspace-border-color: var(--trans-faint-25); --input-shadow: 0 0.125px 0 0.5px var(--trans-faint-30), inset 0 -0.125px 1px 0px var(--trans-faint-30), 0 0.75px 2px 0.5px var(--trans-faint-20); --input-shadow-hover: var(--input-shadow); --shadow-xs: 0 0 0 1px var(--trans-faint-20), 0 3px 6px -2px var(--trans-faint-10); --shadow-tab: var(--input-shadow), inset 0 2px 0px 0px var(--trans-faint-05), inset 0 -2px 2px 0px var(--trans-faint-20), 0px 2px 9px 0px var(--trans-faint-20); --shadow-checkbox: inset 0 1px 2px 0.75px var(--trans-faint-20); --shadow-checkbox-active: 0 0 0 0.375px var(--trans-faint-60); --shadow-code: 0 0.125px 0px 0.375px var(--trans-faint-50); --shadow-input: 0 0 0 0.5px var(--trans-faint-40); --shadow-input-active: 0 0 0 2.25px var(--color-accent-4); --shadow-search-active: 0 0 0 1px var(--color-accent-4), 0 0 0 3.5px var(--text-selection); --shadow-status-bar: inset -6px 0 8px -6px var(--trans-faint-40), -0.25px 1px 1.5px 0.5px var(--trans-faint-40); --shadow-themes: 0px 8px 16px 0px var(--trans-faint-20); --shadow-track: 0 1px 0px 0.75px var(--trans-strong-30), inset 0 0.5px 1px 0px var(--trans-faint-30), inset 0 4px 20px -4px var(--trans-faint-30); --shadow-toggle: inset 0 1px 2px 1px var(--trans-faint-30), inset 0 6px 12px 0px var(--trans-faint-05); --shadow-toggle-active: inset 0 1.5px 3px 0px var(--trans-faint-50); & .mod-root, .mod-sidedock { --bases-cards-shadow: var(--shadow-code); --bases-cards-shadow-hover: 0 0.125px 0px 0.375px var(--trans-faint-60); --shadow-workspace: 0 2.5px 4px 0px var(--trans-faint-10), 0px 15px 30px var(--trans-faint-25); --shadow-workspace-multi: 0px 2.5px 10px var(--trans-faint-10); --shadow-fab: 0px 0.25px 0px 0.75px var(--trans-faint-30), inset 0px -0.25px 2px 0px var(--trans-faint-05), 0px 2px 8px -2px var(--trans-faint-40); --shadow-fab-active: 0px 0.25px 0px 0.5px var(--text-selection), inset 0px -0.25px 4px -1px var(--text-selection), 0px 1.5px 8px -1.5px var(--text-selection); } & .mod-settings, .graph-controls { --shadow-track: 0 1px 0px 0.75px var(--color-base-00), inset 0 0.5px 1px 0px var(--trans-faint-30), inset 0 4px 20px -4px var(--trans-faint-30); } & .modal, .menu { --shadow-setting-item: 0px 4px 12px 0 var(--trans-strong-40); } & .mod-sidedock, .view-header, .document-search-container { --shadow-sidebar: 0 0.25px 0 0.75px var(--trans-faint-20), 0 1.5px 6px -3px var(--trans-faint-20); --tab-container-shadow: inset 0 0 2.5px -0.25px var(--trans-faint-30); } } .theme-dark { --accent-h: 200; --accent-s: 100%; --accent-l: 49%; --color-red-rgb: 251, 72, 79; --color-red: rgb(251, 72, 79); --color-orange-rgb: 233, 151, 63; --color-orange: rgb(228, 144, 55); --color-yellow-rgb: 224, 218, 113; --color-yellow: rgb(224, 218, 113); --color-green-rgb: 91, 208, 109; --color-green: rgb(91, 208, 109); --color-cyan-rgb: 89, 208, 196; --color-cyan: rgb(89, 208, 196); --color-blue-rgb: 40, 165, 238; --color-blue: rgb(40, 165, 238); --color-purple-rgb: 194, 126, 233; --color-purple: rgb(194, 126, 233); --color-pink-rgb: 245, 141, 179; --color-pink: rgb(245, 141, 179); --callout-quote: 150, 150, 160; --base-hue: 275; --base-hue-text: 275; --base-sat-xtr: 0.01250; --base-sat-str: 0.00625; --base-sat-med: 0.00500; --base-sat-low: 0.00375; --color-base-00: oklch(24.00% var(--base-sat-low) var(--base-hue)); --color-base-05: oklch(25.75% var(--base-sat-med) var(--base-hue)); --color-base-10: oklch(27.50% var(--base-sat-str) var(--base-hue)); --color-base-20: oklch(28.75% var(--base-sat-str) var(--base-hue)); --color-base-25: oklch(31.25% var(--base-sat-str) var(--base-hue)); --color-base-30: oklch(34.50% var(--base-sat-str) var(--base-hue)); --color-base-35: oklch(36.25% var(--base-sat-str) var(--base-hue)); --color-base-40: oklch(43.75% var(--base-sat-xtr) var(--base-hue)); --color-base-50: oklch(52.50% var(--base-sat-xtr) var(--base-hue-text)); --color-base-55: oklch(58.75% var(--base-sat-xtr) var(--base-hue-text)); --color-base-60: oklch(64.25% var(--base-sat-xtr) var(--base-hue-text)); --color-base-70: oklch(71.25% var(--base-sat-str) var(--base-hue-text)); --color-base-80: oklch(77.75% var(--base-sat-str) var(--base-hue-text)); --color-base-90: oklch(87.50% var(--base-sat-low) var(--base-hue-text)); --color-base-100: oklch(93.75% var(--base-sat-low) var(--base-hue-text)); --trans-dark-00: oklch(from black l c h / 0.375); --trans-dark-10: oklch(from black l c h / 0.250); --trans-strong-00: oklch(from var(--color-base-00) l c h / 0.750); --trans-strong-05: oklch(from var(--color-base-00) l c h / 0.625); --trans-strong-10: oklch(from var(--color-base-05) l c h / 0.375); --trans-strong-20: oklch(from var(--color-base-20) l c h / 0.500); --trans-strong-30: oklch(from var(--color-base-30) l c h / 0.500); --trans-strong-40: oklch(from var(--color-base-30) l c h / 0.500); --trans-faint-00: oklch(100% 0.075 283 / 0.0150); --trans-faint-05: oklch(100% 0.060 283 / 0.0250); --trans-faint-10: oklch(100% 0.050 283 / 0.0500); --trans-faint-20: oklch(100% 0.050 283 / 0.0625); --trans-faint-25: oklch(100% 0.050 283 / 0.0750); --trans-faint-30: oklch(100% 0.040 283 / 0.1000); --trans-faint-40: oklch(100% 0.040 283 / 0.1250); --trans-faint-50: oklch(100% 0.020 283 / 0.2000); --trans-faint-60: oklch(100% 0.020 283 / 0.3500); --text-normal: var(--color-base-90); --text-selection: hsla(var(--color-accent-hsl), 0.15); --text-success-bg: oklch(from var(--color-green) 0.53125 0.4 h); --text-success-faint: color-mix(in oklab, var(--color-green), transparent 37.5%); --text-highlight-bg: oklch(from var(--color-highlight) 0.75 0.25 h / 0.25); --text-highlight-bg-rgb: var(--color-highlight-rgb); --text-highlight-ul-color: oklch(from var(--color-highlight) 0.75 0.2 h); --text-highlight-bg-search: var(--text-highlight-bg); --text-highlight-bg-search-active: oklch(from var(--color-highlight) 0.875 0.375 h / 0.55); --modal-border-color: var(--color-base-30); --background-gradient: radial-gradient( at 50% calc(50% + 22px), var(--color-base-20) 32%, var(--background-primary) 128% ); --background-gradient-menu: radial-gradient( at 64% 50%, var(--color-base-20) 32%, var(--background-primary) 175% ); --background-gradient-community: radial-gradient( at 50% 50%, var(--color-base-20) 32%, var(--background-primary) 175% ); --background-button-hover: var(--color-base-35); --background-modifier-border: var(--trans-faint-20); --background-modifier-border-focus: transparent; --background-modifier-cover: color-mix(in oklch, #000000 75%, transparent 100%); --background-modifier-hover: var(--trans-faint-10); --hotkey-gradient: linear-gradient(to top, var(--color-accent) -10%, var(--color-accent-4) 210%); --success-gradient: linear-gradient(to top, var(--text-success-bg) -20%, #FFF 220%); --toggle-gradient: linear-gradient(to bottom, var(--color-accent) -30%, var(--color-accent-4) 180%); --warning-gradient: linear-gradient(to top, var(--color-red) -30%, var(--trans-strong-20) 180%); --color-accent-1: color-mix(in oklab, var(--color-accent) 52%, #fff 38%); --color-accent-2: color-mix(in oklab, var(--color-accent-1), transparent 7%); --color-accent-3: color-mix(in oklab, var(--color-accent), #fff 20%); --color-accent-4: color-mix(in oklab, var(--color-accent) 50%, transparent 75%); --color-accent-5: color-mix(in oklab, var(--text-selection) 100%, transparent 75%); --color-accent-6: color-mix(in oklab, var(--text-selection) 40%, transparent 100%); --bases-cards-background: var(--trans-faint-05); --blockquote-color: var(--color-base-80); --blockquote-border-color: var(--color-base-30); --blockquote-background-color: var(--trans-faint-05); --checkbox-border-color: var(--color-base-35); --checkbox-border-color-hover: var(--color-base-40); --code-background: var(--trans-faint-05); --code-background-alt: var(--trans-faint-10); --code-border-color: var(--trans-faint-20); --fab-bg: var(--color-base-10); --fab-color: var(--color-base-80); --hr-color: var(--trans-faint-30); --icon-color: var(--color-base-60); --icon-color-hover: var(--text-normal); --interactive-normal: var(--color-base-30); --link-color-sidebar: var(--color-accent-2); --list-bullet-color: var(--color-base-80); --list-dash-color: var(--trans-faint-60); --nav-heading-color: var(--color-base-80); --nav-header-bg: var(--divider-color); --nav-text-color: var(--text-normal); --nav-folder-color: var(--color-base-80); --scrollbar-thumb-bg: var(--color-base-25); --scrollbar-active-thumb-bg: var(--color-base-35); --search-result-background: var(--trans-strong-05); --setting-item-bg: var(--color-base-05); --setting-item-border-color: var(--trans-faint-20); --slider-track-background: var(--trans-faint-40); --toggle-track-bg: var(--trans-faint-50); --status-bar-background: var(--trans-strong-00); --status-bar-filter: opacity(0.375) blur(0.25px); --strikethrough-color: var(--text-faint); --table-row-bg: var(--trans-faint-00); --tab-sidebar-bg: var(--trans-faint-30); --tab-sidebar-bg-top: var(--trans-faint-30); --tab-sidebar-bg-top-left: var(--trans-faint-40); --tab-sidebar-container-bg: radial-gradient(at 50% 125%, var(--trans-faint-00), var(--trans-strong-10) 80%); --tag-background-image: linear-gradient(to top, var(--text-selection) -50%, var(--color-accent-6) 100%); --vault-profile-color: var(--color-base-80); --workspace-border-color: var(--trans-faint-25); --input-shadow: inset 0 1px 1px 0.5px var(--trans-faint-25), inset 0 0.0625px 0 0.25px var(--trans-strong-40), 0px 1.25px 2.5px 0px var(--trans-dark-10); --input-shadow-hover: var(--input-shadow); --shadow-xs: 0 -0.25px 0px 1px var(--trans-faint-25), 0 0.75px 7px -2px var(--trans-dark-00); --shadow-tab: inset 0 1.5px 2.5px 0px var(--trans-faint-40), inset 0 -1.25px 2.75px 0px var(--trans-strong-05), 0 0.625px 3.5px 0px var(--trans-dark-10); --shadow-checkbox: 0 0 0 0.375px var(--trans-faint-60); --shadow-checkbox-active: none; --shadow-code: 0 -0.25px 0 0.375px var(--trans-faint-40), 0 0.375px 2px 0px var(--trans-dark-00); --shadow-input: 0px 0px 0px 0.5px var(--trans-faint-30); --shadow-input-active: 0 0 0 2.25px var(--color-accent-4); --shadow-search-active: 0 0 0 1px var(--color-accent-4), 0 0 0 3.5px var(--text-selection); --shadow-status-bar: inset -6px 0 8px -6px var(--trans-faint-10), -0.25px 1px 1.5px 0.5px var(--trans-strong-40); --shadow-themes: 0px 8px 16px 0px var(--trans-strong-10); --shadow-track: 0 0.75px 0px 0.25px var(--trans-faint-40), inset 0 0.75px 1px 0px var(--trans-dark-00), inset 0 4px 20px -3px var(--trans-dark-10); --shadow-toggle: inset 0 1px 2px 1px var(--trans-dark-10), inset 0 6px 12px 0px var(--trans-strong-10); --shadow-toggle-active: inset 0 1.5px 3px 0px var(--trans-dark-00); & .mod-root, .mod-sidedock { --bases-cards-shadow: var(--shadow-code); --bases-cards-shadow-hover: 0 0 0 0.375px var(--trans-faint-60); --shadow-workspace: 0px 12px 24px var(--color-base-00), 0px 2px 4px 0 var(--trans-strong-00); --shadow-workspace-multi: none; --shadow-fab: inset 0 1.25px 2px 0px var(--trans-faint-10), inset 0 -1px 2.5px 0px var(--trans-strong-00), 0 3px 12px -3px var(--trans-dark-10); --shadow-fab-active: inset 0 1.25px 2px 0px var(--color-accent-5), inset 0 1.25px 2px 0px var(--trans-faint-05), inset 0 -1px 2.5px 0px var(--trans-strong-00), 0 5px 15px -1.5px var(--color-accent-5), 0 5px 15px -3px var(--trans-dark-00); } & .modal, .menu { --shadow-setting-item: 0 4px 12px 0 var(--trans-strong-10); } & .mod-sidedock, .view-header { --shadow-sidebar: 0 -1px 0 0.25px var(--trans-faint-00), 0 1px 0 -0.125px var(--color-base-05); --tab-container-shadow: inset 0 -0.625px 1px 0 var(--trans-faint-20), inset 0 0.375px 1.375px 0px var(--trans-dark-00); } } /*--> Theme Default Typeface <--*/ body { --font-interface-theme: "Inter Variable", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --font-text-theme: "Inter Variable", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; /* alt font for corsa override */ --font-label: var(--font-interface-theme); /* corner smoothing */ /* * { -electron-corner-smoothing: 60% !important; } */ } /* =========================== =========================== 1 - Foundations =========================== =========================== */ /*--> OS Settings <--*/ /* Windows & Linux */ .mod-windows, .mod-linux { /* frame spacing and autohide override */ --frame-right-space-override: 132px; --frame-left-space-override: 0; --callout-blend-mode: normal; } /* macOS */ .mod-macos, body:not(.mod-windows, .mod-linux) { /* -50 Windows weight */ --font-thin: 225; --font-extralight: 250; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --h1-weight-alt: 500; --h1-weight: 250; --h2-weight: 500; --h3-weight: 500; --h4-weight: 575; --h5-weight: 600; --h6-weight: 650; /* frame spacing and autohide override */ --frame-right-space-override: 36px; --frame-left-space-override: 80px; } .mod-macos.is-hidden-frameless .workspace .workspace-tabs.mod-top.mod-top-right-space .workspace-tab-header-container { padding-right: 36px; } .mod-macos .lucide-more-vertical { transform: none; } /* Linux */ .mod-linux { /* -25 Windows weight */ --font-thin: 225; --font-extralight: 250; --font-light: 325; --font-normal: 425; --font-medium: 525; --font-semibold: 625; --font-bold: 725; --font-extrabold: 825; --h1-weight-alt: 550; --h1-weight: 300; --h2-weight: 550; --h3-weight: 550; --h4-weight: 625; --h5-weight: 650; --h6-weight: 675; --font-cta-button: 575; } /* Linux font weight tweak (WIP test if needed on macOS) */ .mod-linux button[class*="mod-"]:not([class="mod-cancel"]), :is(.mod-root, .popover) .metadata-add-button { font-weight: var(--font-cta-button); } /* Windows */ .mod-windows .mod-sidedock .workspace-tab-header { transform: translateY(-0.5px); } /*--> Animations <--*/ @keyframes popover { 0% { filter: opacity(0%); scale: 0.95; } 75% { filter: opacity(75%); scale: 1; } 100% { filter: opacity(100%); } } body:not(.is-mobile) { --fab-easing-curve: cubic-bezier(0.4375, 0.05, 0.5375, 1); } /*--> Buttons <--*/ /* Electron Corner-smoothing */ body:not(.is-mobile) :is( button, select, .clickable-icon, .dropdown, .metadata-add-button) { -electron-corner-smoothing: 60%; } button, button:active, .metadata-add-button { transition: filter var(--anim-super-swing); } button:not(.clickable-icon):hover, .metadata-add-button:hover { background-color: var(--background-button-hover); filter: brightness(0.97); } button:not(.clickable-icon):active, button:not(.clickable-icon):hover:active, .metadata-add-button:active, .metadata-add-button:hover:active { filter: brightness(0.97) opacity(60%); } button[class*="mod-"]:active, button[class*="mod-"]:hover:active, :is(.mod-root, .popover) .metadata-add-button:active, :is(.mod-root, .popover) .metadata-add-button:hover:active { filter: brightness(1.05) opacity(70%); } button.mod-cta, :is(.mod-root, .popover) .metadata-add-button { background: var(--hotkey-gradient); } button.mod-cta:hover, :is(.mod-root, .popover) .metadata-add-button:hover { background: var(--hotkey-gradient); filter: brightness(1.05); } button.mod-warning { color: var(--text-color); background-image: var(--warning-gradient); filter: brightness(1.05); } /*--> Dropdown <--*/ :is(select,.dropdown):hover { background-color: var(--background-button-hover); filter: brightness(0.97); } .modal button:not(.clickable-icon):focus, :is(select,.dropdown):focus-within { box-shadow: var(--input-shadow); } /*--> Graph & Controls <--*/ .graph-controls { inset: 6px 8px auto auto; } .graph-controls.is-close { border: none; inset: 8px 2px auto auto; } .graph-controls > .mod-reset { margin-inline-end: 8px; } .graph-control-section { padding-block: 8px; .setting-item.mod-slider > .setting-item-control { padding-block: 2px 6px; } .tree-item-children:last-child { padding-block-end: unset; } .tree-item-self { margin-block-end: unset; } } .graph-color-button-container { margin-block-end: 2px; } /*--> Inputs <--*/ input, textarea, .vertical-tab-header input { box-shadow: var(--shadow-input); } :is(input, textarea, .vertical-tab-header input):focus { box-shadow: var(--shadow-input-active); } .mod-sidedock, .vertical-tab-header, .setting-item textarea { --background-modifier-form-field: var(--search-result-background);--background-modifier-form-field-hover: var(--search-result-background); } /* Search input */ body input[type='search'] { --shadow-input-active: var(--shadow-search-active); } /* Sidebar input */ .mod-sidedock :is(input, textarea) { box-shadow: var(--shadow-sidebar); &:focus { box-shadow: var(--shadow-input-active); } } .mod-sidedock textarea { text-indent: 2px; } /* Placeholder text */ input::placeholder { font-weight: 500; } .prompt input::placeholder { font-weight: var(--font-normal); } input[type="color"], input[type="color"]:focus { box-shadow: initial; } /*--> Range Slider <--*/ input[type='range'], body:not(.is-mobile) input[type='range']:focus { background-color: var(--slider-track-background); box-shadow: var(--shadow-track); margin-inline-end: 0; } input[type='range']::-webkit-slider-thumb { box-shadow: inset 0 -2px 4px -2px var(--color-base-25), var(--shadow-tab), var(--shadow-s); scale: 0.875; } input[type='range']::-webkit-slider-thumb:hover, input[type='range']::-webkit-slider-thumb:active, body:not(.is-mobile) input[type='range']:focus::-webkit-slider-thumb { border-color: transparent; box-shadow: inset 0 -2px 4px -2px var(--color-base-25), var(--shadow-tab), var(--shadow-s), var(--shadow-l); } body:not(.is-mobile) input[type='range']:focus::-webkit-slider-thumb:not(:hover) { box-shadow: inset 0 -2px 4px -2px var(--color-base-25), var(--shadow-tab), var(--shadow-s); } /*--> Toggle <--*/ .checkbox-container, .checkbox-container:hover { background-color: var(--toggle-track-bg); box-shadow: var(--shadow-toggle); } .checkbox-container:focus-within { outline: none; } .checkbox-container.is-enabled { background-color: transparent; background-image: var(--toggle-gradient); box-shadow: var(--shadow-toggle-active); } .checkbox-container:after { --shadow: var(--color-base-25); --intensity: 4px; box-shadow: inset 0 -2px var(--intensity) -2px var(--shadow), var(--shadow-tab); } .checkbox-container.is-enabled:after { --shadow: var(--color-accent-4); --intensity: 4px; } /*--> Tooltips / Notice / Drag ghost <--*/ .tooltip .tooltip-arrow { display: none; } .notice, .tooltip { color: var(--color-base-80); background-color: var(--background-secondary); border: none; box-shadow: 0 0 0 1px var(--trans-faint-10), var(--shadow-themes); } .notice { font-weight: var(--font-semi-medium); } .drag-ghost { border-radius: var(--radius-sm); } /*--> Scrollbar / scrollbar padding <--*/ .mod-sidedock .workspace-leaf-content ::-webkit-scrollbar { display: none; } .cm-scroller::-webkit-scrollbar-track, .markdown-preview-view::-webkit-scrollbar-track, .bases-view::-webkit-scrollbar-track { margin-block: 0 2px; } .mod-settings .vertical-tab-content::-webkit-scrollbar-track, .mod-dim .modal:not(.mod-settings, .prompt)::-webkit-scrollbar-track { margin-block: 12px; } .modal.mod-community-modal .community-modal-search-results-wrapper::-webkit-scrollbar-track { margin-block: 40px 12px; } .prompt.theme-picker-modal > .prompt-results::-webkit-scrollbar-track { margin-block: 0 8px; } .suggestion-container > ::-webkit-scrollbar-track, .popover ::-webkit-scrollbar-track { margin-block: 4px; } /* Special performance tweaks */ body:not(.is-mobile).enable-performance-tweaks { .markdown-preview-view { will-change: scroll-position; } .markdown-preview-view > .markdown-preview-pusher { will-change: margin-bottom; } } /*--> Typography variation settings <--*/ .markdown-source-view, .markdown-preview-view, .bases-table-cell, .bases-cards-property { font-feature-settings: 'cv11'; } thead, .bases-header, .bases-thead, .bases-cards-property.mod-title, .tag, .metadata-content, #calendar-container { font-feature-settings: 'cv11' off, 'calt'; } /* =========================== =========================== 2 - Markdown =========================== =========================== */ /*--> Heading and Paragraph spacing/margins <--*/ .markdown-rendered :is(.el-div, .el-blockquote) + div > :is(h1,h2,h3,h4,h5,h6) { margin-block-start: var(--heading-spacing); } .markdown-rendered .el-div + .el-p > p, .markdown-rendered :is(.el-ul, .el-ol) + .el-div > .callout { margin-block-start: 1.5rem; } .markdown-rendered div[class*="el-h"] + .el-table > table { margin-block-start: 0.5rem; } /*--> Headings H1-H6 <--*/ .cm-s-obsidian .cm-line.HyperMD-header, .markdown-rendered :is(h1,h2,h3,h4,h5,h6) { font-feature-settings: 'cv11' off, 'calt'; letter-spacing: unset; } .cm-s-obsidian .cm-line.HyperMD-header-1, .markdown-rendered h1, .inline-title { border-bottom: 2px solid var(--hr-color); padding-bottom: 6px; letter-spacing: -0.015em; text-indent: -0.0375em; } .cm-s-obsidian .cm-line.HyperMD-header-2, .markdown-rendered h2 { letter-spacing: -0.015em; text-indent: -0.01875em; } .cm-s-obsidian .cm-line.HyperMD-header-3, .markdown-rendered h3 { letter-spacing: -0.015em; text-indent: -0.0125em; } /*--> Proportional heading spacing <--*/ body.prop-headings { & .markdown-preview-view :is(.el-h2,.el-h3,.el-h4,.el-h5,.el-h6) + * > :is(p,ul) { margin-block-start: 0; } & .markdown-rendered h2 { margin-block-end: 0.875rem; } & .markdown-rendered h3 { margin-block-end: 0.75rem; --heading-spacing: 2.375rem; } & .markdown-rendered h4 { margin-block-end: 0.6875rem; --heading-spacing: 2.25rem; } & .markdown-rendered h5 { margin-bottom: 0.625rem; --heading-spacing: 2.125rem; } & .markdown-rendered h6 { margin-block-end: 0.5625rem; --heading-spacing: 2rem; } } .cm-line.HyperMD-header:first-child, .metadata-container + * > .cm-content > div[contenteditable="false"]:first-child + .cm-line.HyperMD-header { padding-top: 0; } .disable-title-h1 .cm-line.HyperMD-header-1, .disable-title-h1 .markdown-rendered h1 { font-size: var(--h1-size-alt); font-weight: var(--h1-weight-alt); border-bottom: none; padding-bottom: 0; } /*--> Blockquotes <--*/ .el-blockquote blockquote, .callout-content blockquote { border-radius: var(--radius-sm); box-shadow: var(--shadow-code); padding-block: 12px; padding-inline: 1em; position: relative; & * { --bold-color: var(--blockquote-color); --italic-color: var(--blockquote-color); --link-color: var(--color-accent-1); } } /*--> Callouts <--*/ .callout .callout-content { --blockquote-background-color: var(--code-background-alt); --code-background: var(--code-background-alt); } body:not(.disable-callout-styling) { --callout-border-opacity: 0.15; --callout-radius: var(--radius-sm); --callout-padding: 16px 16px 8px 16px; --callout-title-padding: 0 0 0 2px; /* Callout colors */ --callout-bug: var(--color-pink-rgb); --callout-warning: var(--color-yellow-rgb); /* Styling */ .markdown-source-view .cm-content > .cm-callout[contenteditable=false] { border-radius: var(--callout-radius); contain: none !important; transition: box-shadow var(--anim-fast-swing); &:hover { box-shadow: 0 0 0 2px var(--trans-faint-50); } } .callout { color: color-mix(in oklab, var(--blockquote-color), var(--text-normal)); background-color: transparent; background-image: radial-gradient(at 20% 20%, rgb(var(--callout-color), 0.05), rgb(var(--callout-color), 0.125)); box-shadow: 0 0 0 2px rgb(var(--callout-color), var(--callout-border-opacity)); margin-inline: 1px; outline: 1px solid var(--background-primary); --bold-color: var(--text-normal); } .callout.is-collapsible { padding-bottom: 16px; } .callout .callout { margin-inline: 0.125em; outline-color: var(--trans-strong-20); } .callout-title { align-items: center; } .callout-title-inner { --bold-color: var(--callout-title-color); --italic-color: var(--callout-title-color); } .callout .callout-title:last-child { padding-bottom: 0.5em; } .callout .callout-title-inner { padding-inline-start: 0.125em; &:not(h1,h2,h3,h4,h5,h6) { padding-block-start: 0.03125em; } } .callout .callout-content { padding-inline: 0.125em; margin-block: -0.25rem -0.5rem; } .callout.is-collapsible .callout-content { margin-bottom: -1rem; } .callout-fold { margin-left: auto; --icon-stroke: var(--icon-stroke-thick); } /* Things inside Callouts */ .callout table { --table-border-color: var(--hr-color); } .callout-title-inner :is(h1,h2,h3,h4,h5,h6) { margin-block: 0px !important; padding-block: 0 !important; padding-inline-start: 0.25em; border: none !important; color: var(--callout-title-color); } :is(.callout[data-callout="quote"], .callout[data-callout="cite"]) .callout-content { color: var(--blockquote-color); } } body.disable-callout-styling { --callout-title-padding: 0; } /* Math Callouts */ body:not(.disable-callout-styling) .callout[data-callout*="math"] { color: var(--color-base-100); background-image: unset; box-shadow: 0 0 0 1.5px rgb(var(--callout-color), 0.375); outline: unset; font-family: MJXZERO, MJXTEX; --callout-color: var(--color-blue-rgb); & .callout-title-inner { font-size: 1.25em; font-weight: var(--font-medium); padding-inline-start: unset; transform: translateY(0.5rem); } & .callout-icon { display: none; } } /* other colors */ body:not(.disable-callout-styling) .callout[data-callout="math-red"] { --callout-color: var(--color-red-rgb); } body:not(.disable-callout-styling) .callout[data-callout="math-orange"] { --callout-color: var(--color-orange-rgb); } body:not(.disable-callout-styling) .callout[data-callout="math-yellow"] { --callout-color: var(--color-yellow-rgb); } body:not(.disable-callout-styling) .callout[data-callout="math-green"] { --callout-color: var(--color-green-rgb); } body:not(.disable-callout-styling) .callout[data-callout="math-cyan"] { --callout-color: var(--color-cyan-rgb); } body:not(.disable-callout-styling) .callout[data-callout="math-purple"] { --callout-color: var(--color-purple-rgb); } body:not(.disable-callout-styling) .callout[data-callout="math-pink"] { --callout-color: var(--color-pink-rgb); } body:not(.disable-callout-styling) .callout:is([data-callout="math-gray"], [data-callout="math-grey"]) { box-shadow: 0 0 0 1.5px rgb(var(--callout-color), 0.5); --callout-color: 100, 100, 100; } /*--> Code <--*/ .markdown-rendered :is(code, pre) { border: unset; box-shadow: var(--shadow-code); } .markdown-rendered code { color: var(--code-special); padding-inline: 0.375em; } .markdown-rendered pre { --code-radius: var(--radius-sm); } pre[class*="language-"] code, .markdown-rendered pre code { box-shadow: unset; --code-special: var(--code-normal); } /*--> Embeds <--*/ body:not(.disable-naked-embeds) { --embed-border-start: none; --embed-padding: 0 1.25em 0 0; .markdown-embed-title { display: none; } } .markdown-embed-link { color: var(--text-faint); } .markdown-embed:has(.el-h5:is(:only-of-type,:last-child)) { background-color: var(--background-primary-alt); border-radius: var(--radius-sm); border: none; padding: 8px; } .markdown-embed .el-h5:is(:only-of-type,:last-child) { text-align: center; h5 { color: var(--color-base-50); font-size: 0.875em; font-weight: var(--font-medium); } } .file-embed.mod-generic { border-radius: var(--radius-sm); font-weight: var(--font-medium); --text-muted: var(--color-base-50); --text-normal: var(--icon-color); } .file-embed-title { padding-top: 0.125rem; } /*--> Formatting <--*/ /* formatting markers */ .cm-formatting { color: var(--text-faint); } .cm-formatting-strong { font-weight: var(--font-normal); } /* Strikethrough / list crossed out */ .cm-strikethrough, del, del > * { color: var(--strikethrough-color); } /*--> Highlights <--*/ .cm-s-obsidian span.cm-highlight, :is(.markdown-source-view, .markdown-preview-view) mark { box-decoration-break: clone; box-shadow: inset 0 -1.5px 0 var(--text-highlight-ul-color); padding-block: 0.0625em 0; --bold-color: var(--text-normal); --italic-color: var(--text-normal); } :is(.markdown-source-view, .markdown-preview-view) mark { padding-inline: 0.1875em; } /*--> Images <--*/ .image-embed img, .markdown-rendered img { border-radius: var(--radius-sm); } body.enable-dim-img.theme-dark :is(.image-embed img, .markdown-rendered img) { filter: opacity(0.75); transition: filter var(--anim-fast-smooth); } body.enable-dim-img.theme-dark :is(.image-embed img, .markdown-rendered img):hover { filter: unset; } /*--> Lists + paragraphs <--*/ @container style(--line-height-normal: 1.5) { .workspace { --list-spacing: 0.075em; } } .markdown-rendered :is(ol, ul) > li { margin-inline-start: 1.75em; --list-marker-color: var(--list-dash-color); } .list-bullet, .markdown-rendered ul > li { --list-marker-color: var(--list-bullet-color); } /* Lists: special styling */ body:not(.disable-list-styling) { .list-bullet::after, .modal-content li::marker { content: "— "; color: var(--list-dash-color); background-color: transparent !important; box-shadow: none !important; height: fit-content; width: fit-content; font-family: var(--font-text-theme); } & .is-collapsed ~ .cm-formatting-list .list-bullet::after, .is-collapsed .list-bullet::after { color: var(--color-accent-2); } } /* Checkbox */ input[type=checkbox] { box-shadow: var(--shadow-checkbox); } .HyperMD-task-line[data-task="x"], .HyperMD-task-line[data-task="f"], .task-list-item.is-checked:not([data-task="/"]) { --bold-color: var(--checklist-done-color); --italic-color: var(--checklist-done-color); --code-special: var(--checklist-done-color); --text-normal: var(--trans-faint-60); } input[type=checkbox]:checked { background-image: var(--success-gradient); box-shadow: none !important; border: none; } input[type=checkbox]:checked::after { top: -0.03125em; inset-inline-start: -0.03125em; } input[type=checkbox]:is(:focus,:hover) { box-shadow: var(--shadow-checkbox); } .task-list-item ul::before { --indentation-guide-reading-indent: -1.03125em; } /* Alternative Checkboxes */ input[type=checkbox][data-task="/"]:checked, .task-list-item.is-checked[data-task="/"] input[type=checkbox]:checked { background-image: linear-gradient(270deg, transparent 48.75%, var(--color-yellow) 48.75%); border: 1px solid var(--color-yellow); box-shadow: none; --checkbox-marker-color: transparent; } /* Alternative Checkboxes (unique shapes) */ input[type=checkbox][data-task="<"]:checked, .task-list-item.is-checked[data-task="<"] input[type=checkbox]:checked { border-radius: unset; background: unset; background-color: var(--color-blue); -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNoZWV0LWljb24gbHVjaWRlLXNoZWV0Ij48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSI5IiB5Mj0iOSIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSIxNSIgeTI9IjE1Ii8+PGxpbmUgeDE9IjkiIHgyPSI5IiB5MT0iOSIgeTI9IjIxIi8+PGxpbmUgeDE9IjE1IiB4Mj0iMTUiIHkxPSI5IiB5Mj0iMjEiLz48L3N2Zz4="); --checkbox-marker-color: transparent; } /* Paragraph: active line highlighting feature */ .active-line-highlight { .cm-active::after { content: ''; z-index: -1; width: calc(100% + 0.5em); top: 0; bottom: 0; right: -0.25em; position: absolute; pointer-events: none; background-color: var(--trans-faint-10); border-radius: 0.25rem; } .cm-active.HyperMD-header:not(.HyperMD-header-1)::after { top: var(--p-spacing); } .cm-active.HyperMD-header.HyperMD-header-1::after { top: -8px; } .cm-active.HyperMD-list-line::after { width: 100%; right: 0; } .cm-active :is(.HyperMD-hr, .HyperMD-codeblock, .HyperMD-quote) ::after { width: 100%; right: 0; border-radius: 0; } .table-editor .cm-active::after { display: none; } } /*--> Links <--*/ /* FROM: Primary */ /* By Cecilia May */ /* GPL-3.0 License */ .external-link { background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(136, 136, 136)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E"); background-size: calc(var(--font-text-size) + .2em), 1em; background-position-x: right; background-position-y: center; padding-inline-end: 0.9375em; } /* MathJax */ mjx-math { color: var(--color-base-100); } /*--> Metadata <--*/ /* Properties title */ .metadata-properties-title { color: var(--metadata-input-text-color); font-size: max(var(--font-ui-small), var(--font-smaller)); } .metadata-container.is-collapsed .metadata-properties-title { color: var(--metadata-label-text-color); } .metadata-properties-heading { display: flex; margin-bottom: 0; } .metadata-properties-heading .collapse-indicator { display: flex; flex-direction: row-reverse; inset: 0; opacity: 1; --collapse-icon-color: var(--text-faint); --collapse-icon-color-collapsed: var(--text-faint); } .metadata-properties-heading .collapse-indicator .svg-icon { transform: scale3d(1.125 1.125 0); } /* Properties content */ .metadata-container .metadata-property .metadata-property-key-input { box-shadow: none; } .mod-root .metadata-property-warning-icon { background-color: rgba(var(--color-orange-rgb), 0.15); padding: 0.3125em; } .metadata-container .metadata-add-button { background-color: var(--nav-item-background-active); box-shadow: none; height: 2em; margin-block: 4px; margin-inline-start: 4px; padding-inline: 6px 10px; } .mod-root .view-content, .popover { & .metadata-container { box-shadow: var(--shadow-input); margin-block-end: 1.25rem; padding: 0.5em 0.625em; transform: none; line-height: 1.5; --background-modifier-border-focus: var(--color-accent-4); } & .metadata-content { margin-top: 6px; } & .metadata-property-icon svg { --icon-size: var(--icon-xs); --icon-stroke: var(--icon-s-stroke-width); } & .metadata-container .metadata-add-button { box-shadow: var(--input-shadow); color: var(--text-on-accent); margin-block: 0.5em 0.3125em; margin-inline-start: 0.25em; padding-inline: 0.75em; } & .metadata-add-button .text-button-icon { display: none; } } .metadata-property .metadata-input.mod-date { letter-spacing: -0.25px; } /* Multi-select pill (not tags) */ .metadata-property .metadata-property-value .multi-select-container { gap: 4px; padding-inline-start: 6px; } .multi-select-input { padding-inline-start: 2px; } .metadata-property:not([data-property-key="tags"]) { --link-color: var(--color-accent-1); } .bases-td .multi-select-pill, .metadata-property:not([data-property-key="tags"]) .multi-select-pill { box-shadow: var(--shadow-input); padding-inline: var(--pill-padding-x); --pill-color: var(--text-muted); --pill-padding-x: 0.625em 0.3125em; --pill-padding-y: 0.125em; } .metadata-property:not([data-property-key="tags"]) .multi-select-pill-content { margin-inline-end: 0.0875em; } .bases-td .multi-select-pill-remove-button:hover, .metadata-property:not([data-property-key="tags"]) .multi-select-pill-remove-button:hover { background: var(--warning-gradient); } .metadata-property .multi-select-pill-remove-button { color: var(--color-base-35); } /* Multi-select pill (tags) */ .multi-select-pill-remove-button:hover, .multi-select-pill.internal-link .multi-select-pill-remove-button:hover { border-radius: 50%; background: var(--hotkey-gradient); color: var(--text-on-accent); } .metadata-property[data-property-key="tags"] .multi-select-pill { background: var(--tag-background-image); font-size: var(--font-smaller); font-weight: var(--font-medium); line-height: 1.0625; } .metadata-property[data-property-key="tags"] .multi-select-pill-remove-button:not(:hover) { color: var(--color-accent-4); } /*--> Metadata (sidebars) <--*/ .workspace > .workspace-split:not(.mod-root) .metadata-container { --metadata-input-text-color: var(--text-muted); --metadata-divider-width: 0; --metadata-property-radius: 0; --background-modifier-border-focus: var(--color-accent-4); } .mod-sidedock .metadata-container { background-color: unset; box-shadow: none; } .mod-sidedock .metadata-property { flex-direction: column; border-top: 1px solid var(--divider-color); } .mod-sidedock .metadata-property:first-child { border-top: none; } .mod-sidedock .metadata-property-key { align-items: baseline; width: auto; } .mod-sidedock .metadata-property-value { padding-inline: 16px 0; } .mod-sidedock .metadata-property-key input { background-color: transparent; color: var(--text-normal); font-weight: var(--font-medium); padding: 0 6px; } .mod-sidedock .metadata-property-value > * { padding: 4px 8px 8px; } /*--> Tables <--*/ .markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper, :is(.markdown-rendered, .markdown-source-view.is-live-preview) table { width: 100%; } body .markdown-rendered table thead tr > th { border: none; border-bottom: 2px solid var(--table-header-border-color); font-size: var(--table-header-size); font-weight: var(--font-medium); line-height: var(--table-line-height); padding: 4px 12px 6px; } body .markdown-rendered table tr td { border: none; border-left: 1px solid var(--table-border-color); font-weight: var(--font-normal); padding-inline: 12px; } body .markdown-rendered table tr td:first-child, body .markdown-rendered table tr th:first-child { border-left: none; } /*--> Tags <--*/ .cm-hashtag-begin { color: var(--color-accent); } .cm-hashtag, a.tag { background: var(--tag-background-image); box-shadow: var(--tag-shadow); letter-spacing: 0.005em; line-height: 2.25; } a.tag:active { filter: opacity(50%); transition: var(--anim-fast-swing); } /* =========================== =========================== 3 - Interface =========================== =========================== */ /*--> Icons <--*/ button.clickable-icon { transition: filter var(--anim-fast-swing); } .clickable-icon[aria-disabled='true'] { opacity: unset; filter: opacity(0.4); } :is(.workspace-sidedock-vault-profile, .view-header, .workspace-ribbon, .graph-controls) .clickable-icon { padding: 8px; } /* sidebar toggle alignment */ .sidebar-toggle-button { padding-block: 8px; margin-top: 1px; } .sidebar-toggle-button.mod-left { padding-inline: 2px; } .sidebar-toggle-button .clickable-icon { width: 34px; --icon-color: var(--text-muted); } .menu-item-icon svg { padding: 0; } /* Wider workspace icons */ body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions > .clickable-icon, body:not(.is-mobile) .view-header-left > .view-header-nav-buttons > .clickable-icon, body:not(.is-mobile) .view-actions > .view-action:last-child, body:not(.is-mobile) .graph-controls-button { padding-inline: 10px; } /*--> Custom Icons <--*/ body:not(.disable-custom-icons) :where( svg.lucide-book-open, svg.lucide-edit-3, svg.lucide-arrow-left, svg.lucide-arrow-right, svg.lucide-archive, svg.lucide-download-cloud, svg.lucide-files, svg.lucide-folder-closed, svg.lucide-folder-open, svg.lucide-git-fork, svg.lucide-globe-2, svg.lucide-layout-dashboard, svg.lucide-pin, svg.lucide-settings, svg.lucide-sort-asc, svg.lucide-trash-2, svg.lucide-trello, svg.excalidraw-icon, svg.BratIcon, svg.uppercase-lowercase-a) { -webkit-mask-position: 50% 50%; -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; background-color: currentColor; & > * { display: none; } } body.disable-custom-icons svg.svg-icon { -webkit-mask-image: unset; -webkit-mask-position: unset; -webkit-mask-size: unset; padding: initial; } /* Lucide Icons */ svg.lucide-book-open, body:not(.disable-custom-icons).switch-edit-icons .view-actions svg.lucide-edit-3 { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdsYXNzZXMtaWNvbiBsdWNpZGUtZ2xhc3NlcyI+PGNpcmNsZSBjeD0iNiIgY3k9IjE1IiByPSI0Ii8+PGNpcmNsZSBjeD0iMTgiIGN5PSIxNSIgcj0iNCIvPjxwYXRoIGQ9Ik0xNCAxNWEyIDIgMCAwIDAtMi0yIDIgMiAwIDAgMC0yIDIiLz48cGF0aCBkPSJNMi41IDEzIDUgN2MuNy0xLjMgMS40LTIgMy0yIi8+PHBhdGggZD0iTTIxLjUgMTMgMTkgN2MtLjctMS4zLTEuNS0yLTMtMiIvPjwvc3ZnPg=="); } svg.lucide-edit-3, body:not(.disable-custom-icons).switch-edit-icons .view-actions svg.lucide-book-open { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBlbi1saW5lLWljb24gbHVjaWRlLXBlbi1saW5lIj48cGF0aCBkPSJNMTMgMjFoOCIvPjxwYXRoIGQ9Ik0yMS4xNzQgNi44MTJhMSAxIDAgMCAwLTMuOTg2LTMuOTg3TDMuODQyIDE2LjE3NGEyIDIgMCAwIDAtLjUuODNsLTEuMzIxIDQuMzUyYS41LjUgMCAwIDAgLjYyMy42MjJsNC4zNTMtMS4zMmEyIDIgMCAwIDAgLjgzLS40OTd6Ii8+PC9zdmc+"); } body:not(.disable-custom-icons, .switch-edit-icons) svg.lucide-edit-3, body:not(.disable-custom-icons).switch-edit-icons .view-actions svg.lucide-book-open { -webkit-mask-position: 25% 25%; -webkit-mask-size: 87.5%; } /* Extra sizing tweak */ body:not(.disable-custom-icons) .status-bar-item svg.lucide-edit-3 { -webkit-mask-size: 87.5%; } /* used Ionicons */ svg.lucide-arrow-left { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI0OCIgZD0iTTMyOCAxMTJMMTg0IDI1NmwxNDQgMTQ0Ii8+PC9zdmc+"); } svg.lucide-arrow-right { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI0OCIgZD0iTTE4NCAxMTJsMTQ0IDE0NC0xNDQgMTQ0Ii8+PC9zdmc+"); } /* used Lucide icons */ svg.lucide-archive { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxpYnJhcnktYmlnLWljb24gbHVjaWRlLWxpYnJhcnktYmlnIj48cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSIxOCIgeD0iMyIgeT0iMyIgcng9IjEiLz48cGF0aCBkPSJNNyAzdjE4Ii8+PHBhdGggZD0iTTIwLjQgMTguOWMuMi41LS4xIDEuMS0uNiAxLjNsLTEuOS43Yy0uNS4yLTEuMS0uMS0xLjMtLjZMMTEuMSA1LjFjLS4yLS41LjEtMS4xLjYtMS4zbDEuOS0uN2MuNS0uMiAxLjEuMSAxLjMuNloiLz48L3N2Zz4="); } svg.lucide-download-cloud { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWRvd25sb2FkLWljb24gbHVjaWRlLWRvd25sb2FkIj48cGF0aCBkPSJNMTIgMTVWMyIvPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ii8+PHBhdGggZD0ibTcgMTAgNSA1IDUtNSIvPjwvc3ZnPg=="); } svg.lucide-files { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZpbGUtcGx1czItaWNvbiBsdWNpZGUtZmlsZS1wbHVzLTIiPjxwYXRoIGQ9Ik00IDIyaDE0YTIgMiAwIDAgMCAyLTJWN2wtNS01SDZhMiAyIDAgMCAwLTIgMnY0Ii8+PHBhdGggZD0iTTE0IDJ2NGEyIDIgMCAwIDAgMiAyaDQiLz48cGF0aCBkPSJNMyAxNWg2Ii8+PHBhdGggZD0iTTYgMTJ2NiIvPjwvc3ZnPg=="); } svg.lucide-folder-closed { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZvbGRlci1pY29uIGx1Y2lkZS1mb2xkZXIiPjxwYXRoIGQ9Ik0yMCAyMGEyIDIgMCAwIDAgMi0yVjhhMiAyIDAgMCAwLTItMmgtNy45YTIgMiAwIDAgMS0xLjY5LS45TDkuNiAzLjlBMiAyIDAgMCAwIDcuOTMgM0g0YTIgMiAwIDAgMC0yIDJ2MTNhMiAyIDAgMCAwIDIgMloiLz48L3N2Zz4="); } svg.lucide-folder-open { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZvbGRlci1zZWFyY2gtaWNvbiBsdWNpZGUtZm9sZGVyLXNlYXJjaCI+PHBhdGggZD0iTTEwLjcgMjBINGEyIDIgMCAwIDEtMi0yVjVhMiAyIDAgMCAxIDItMmgzLjlhMiAyIDAgMCAxIDEuNjkuOWwuODEgMS4yYTIgMiAwIDAgMCAxLjY3LjlIMjBhMiAyIDAgMCAxIDIgMnY0LjEiLz48cGF0aCBkPSJtMjEgMjEtMS45LTEuOSIvPjxjaXJjbGUgY3g9IjE3IiBjeT0iMTciIHI9IjMiLz48L3N2Zz4="); } svg.lucide-git-fork { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXdheXBvaW50cy1pY29uIGx1Y2lkZS13YXlwb2ludHMiPjxjaXJjbGUgY3g9IjEyIiBjeT0iNC41IiByPSIyLjUiLz48cGF0aCBkPSJtMTAuMiA2LjMtMy45IDMuOSIvPjxjaXJjbGUgY3g9IjQuNSIgY3k9IjEyIiByPSIyLjUiLz48cGF0aCBkPSJNNyAxMmgxMCIvPjxjaXJjbGUgY3g9IjE5LjUiIGN5PSIxMiIgcj0iMi41Ii8+PHBhdGggZD0ibTEzLjggMTcuNyAzLjktMy45Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxOS41IiByPSIyLjUiLz48L3N2Zz4="); } svg.lucide-globe-2 { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdsb2JlLWljb24gbHVjaWRlLWdsb2JlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiAyYTE0LjUgMTQuNSAwIDAgMCAwIDIwIDE0LjUgMTQuNSAwIDAgMCAwLTIwIi8+PHBhdGggZD0iTTIgMTJoMjAiLz48L3N2Zz4="); } svg.lucide-layout-dashboard { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxheW91dC1wYW5lbC1sZWZ0LWljb24gbHVjaWRlLWxheW91dC1wYW5lbC1sZWZ0Ij48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIxOCIgeD0iMyIgeT0iMyIgcng9IjEiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIxNCIgeT0iMyIgcng9IjEiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIxNCIgeT0iMTQiIHJ4PSIxIi8+PC9zdmc+"); } svg.lucide-settings { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvbHQtaWNvbiBsdWNpZGUtYm9sdCI+PHBhdGggZD0iTTIxIDE2VjhhMiAyIDAgMCAwLTEtMS43M2wtNy00YTIgMiAwIDAgMC0yIDBsLTcgNEEyIDIgMCAwIDAgMyA4djhhMiAyIDAgMCAwIDEgMS43M2w3IDRhMiAyIDAgMCAwIDIgMGw3LTRBMiAyIDAgMCAwIDIxIDE2eiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQiLz48L3N2Zz4="); -webkit-mask-size: 103.125%; } svg.lucide-sort-asc { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXVwLWF6LWljb24gbHVjaWRlLWFycm93LXVwLWEteiI+PHBhdGggZD0ibTMgOCA0LTQgNCA0Ii8+PHBhdGggZD0iTTcgNHYxNiIvPjxwYXRoIGQ9Ik0yMCA4aC01Ii8+PHBhdGggZD0iTTE1IDEwVjYuNWEyLjUgMi41IDAgMCAxIDUgMFYxMCIvPjxwYXRoIGQ9Ik0xNSAxNGg1bC01IDZoNSIvPjwvc3ZnPg=="); } svg.lucide-trash-2 { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRyYXNoLWljb24gbHVjaWRlLXRyYXNoIj48cGF0aCBkPSJNMTkgNnYxNGEyIDIgMCAwIDEtMiAySDdhMiAyIDAgMCAxLTItMlY2Ii8+PHBhdGggZD0iTTMgNmgxOCIvPjxwYXRoIGQ9Ik04IDZWNGEyIDIgMCAwIDEgMi0yaDRhMiAyIDAgMCAxIDIgMnYyIi8+PC9zdmc+"); } svg.lucide-trello { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNxdWFyZS1rYW5iYW4taWNvbiBsdWNpZGUtc3F1YXJlLWthbmJhbiI+PHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiByeD0iMiIvPjxwYXRoIGQ9Ik04IDd2NyIvPjxwYXRoIGQ9Ik0xMiA3djQiLz48cGF0aCBkPSJNMTYgN3Y5Ii8+PC9zdmc+"); } /* not Lucide */ svg.BratIcon { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNtaWxlLWljb24gbHVjaWRlLXNtaWxlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik04IDE0czEuNSAyIDQgMiA0LTIgNC0yIi8+PGxpbmUgeDE9IjkiIHgyPSI5LjAxIiB5MT0iOSIgeTI9IjkiLz48bGluZSB4MT0iMTUiIHgyPSIxNS4wMSIgeTE9IjkiIHkyPSI5Ii8+PC9zdmc+"); } svg.excalidraw-icon { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBlbmNpbC1ydWxlci1pY29uIGx1Y2lkZS1wZW5jaWwtcnVsZXIiPjxwYXRoIGQ9Ik0xMyA3IDguNyAyLjdhMi40MSAyLjQxIDAgMCAwLTMuNCAwTDIuNyA1LjNhMi40MSAyLjQxIDAgMCAwIDAgMy40TDcgMTMiLz48cGF0aCBkPSJtOCA2IDItMiIvPjxwYXRoIGQ9Im0xOCAxNiAyLTIiLz48cGF0aCBkPSJtMTcgMTEgNC4zIDQuM2MuOTQuOTQuOTQgMi40NiAwIDMuNGwtMi42IDIuNmMtLjk0Ljk0LTIuNDYuOTQtMy40IDBMMTEgMTciLz48cGF0aCBkPSJNMjEuMTc0IDYuODEyYTEgMSAwIDAgMC0zLjk4Ni0zLjk4N0wzLjg0MiAxNi4xNzRhMiAyIDAgMCAwLS41LjgzbC0xLjMyMSA0LjM1MmEuNS41IDAgMCAwIC42MjMuNjIybDQuMzUzLTEuMzJhMiAyIDAgMCAwIC44My0uNDk3eiIvPjxwYXRoIGQ9Im0xNSA1IDQgNCIvPjwvc3ZnPg=="); } svg.uppercase-lowercase-a { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNhc2Utc2Vuc2l0aXZlLWljb24gbHVjaWRlLWNhc2Utc2Vuc2l0aXZlIj48cGF0aCBkPSJtMyAxNSA0LTggNCA4Ii8+PHBhdGggZD0iTTQgMTNoNiIvPjxjaXJjbGUgY3g9IjE4IiBjeT0iMTIiIHI9IjMiLz48cGF0aCBkPSJNMjEgOXY2Ii8+PC9zdmc+"); -webkit-mask-position: 50% 0%; padding-inline: 10px; } /*--> Custom Icons (special scope) <--*/ .lucide-pin, .mod-pinned:hover .lucide-pin { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBpbi1zYWZldHktb3Blbi1pY29uIGx1Y2lkZS1waW4tc2FmZXR5LW9wZW4iPjxwYXRoIGQ9Ik0yMC44IDMuMmMtMS42LTEuNi00LjEtMS42LTUuNyAwTDEyLjMgNlMxNSA5IDE4IDZjLTMgMyAwIDUuNyAwIDUuN2wyLjgtMi44YzEuNi0xLjYgMS42LTQuMiAwLTUuNyIvPjxwYXRoIGQ9Im03LjEgMjEuMSAxMC4zLTEwLjIiLz48Y2lyY2xlIGN4PSI1IiBjeT0iMTkiIHI9IjMiLz48cGF0aCBkPSJNOSAycy00LjEgOS41LTYuNzU1IDE1LjgiLz48L3N2Zz4="); } .mod-pinned .lucide-pin { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBpbi1zYWZldHktaWNvbiBsdWNpZGUtcGluLXNhZmV0eSI+PHBhdGggZD0iTTIwLjggMy4yYy0xLjYtMS42LTQuMS0xLjYtNS43IDBMMTIuMyA2UzE1IDkgMTggNmMtMyAzIDAgNS43IDAgNS43bDIuOC0yLjhjMS42LTEuNiAxLjYtNC4yIDAtNS43Ii8+PHBhdGggZD0ibTcuMSAyMS4xIDEwLjMtMTAuMiIvPjxjaXJjbGUgY3g9IjUiIGN5PSIxOSIgcj0iMyIvPjxwYXRoIGQ9Ik0yLjkgMTYuOSAxMy4xIDYuNiIvPjwvc3ZnPg=="); } .mod-sidedock .lucide-pin { -webkit-mask-size: 106.25%; } /*--> Custom Icons (callouts) <--*/ body:not(.disable-custom-icons, .disable-callout-styling) :where( .callout-icon .lucide-bug, .callout-icon .lucide-alert-triangle, .callout-icon .lucide-check, .callout-icon .lucide-check-circle-2, .callout-icon .lucide-clipboard-list, .callout-icon .lucide-flame, .callout-icon .lucide-help-circle, .callout-icon .lucide-info, .callout-icon .lucide-list, .callout-icon .lucide-pencil, .callout-icon .lucide-quote, .callout-icon .lucide-x, .callout-icon .lucide-zap) { -webkit-mask-position: 50% 50%; -webkit-mask-size: 112.5%; background-color: currentColor; & > * { display: none; } } body:is(.disable-custom-icons, .disable-callout-styling) .callout-icon svg { -webkit-mask-image: unset; -webkit-mask-position: unset; -webkit-mask-size: unset; padding: initial; } /* used Ionicons */ .callout-icon .lucide-alert-triangle { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQ0MC4wOCAzNDEuMzFjLTEuNjYtMi0zLjI5LTQtNC44OS01LjkzLTIyLTI2LjYxLTM1LjMxLTQyLjY3LTM1LjMxLTExOCAwLTM5LTkuMzMtNzEtMjcuNzItOTUtMTMuNTYtMTcuNzMtMzEuODktMzEuMTgtNTYuMDUtNDEuMTJhMyAzIDAgMDEtLjgyLS42N0MzMDYuNiA1MS40OSAyODIuODIgMzIgMjU2IDMycy01MC41OSAxOS40OS01OS4yOCA0OC41NmEzLjEzIDMuMTMgMCAwMS0uODEuNjVjLTU2LjM4IDIzLjIxLTgzLjc4IDY3Ljc0LTgzLjc4IDEzNi4xNCAwIDc1LjM2LTEzLjI5IDkxLjQyLTM1LjMxIDExOC0xLjYgMS45My0zLjIzIDMuODktNC44OSA1LjkzYTM1LjE2IDM1LjE2IDAgMDAtNC42NSAzNy42MmM2LjE3IDEzIDE5LjMyIDIxLjA3IDM0LjMzIDIxLjA3SDQxMC41YzE0Ljk0IDAgMjgtOC4wNiAzNC4xOS0yMWEzNS4xNyAzNS4xNyAwIDAwLTQuNjEtMzcuNjZ6TTI1NiA0ODBhODAuMDYgODAuMDYgMCAwMDcwLjQ0LTQyLjEzIDQgNCAwIDAwLTMuNTQtNS44N0gxODkuMTJhNCA0IDAgMDAtMy41NSA1Ljg3QTgwLjA2IDgwLjA2IDAgMDAyNTYgNDgweiIvPjwvc3ZnPg=="); } .callout-icon .lucide-bug { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQ2My41NSAyNzIuMTNINDAwdi00OC4ycTAtNC4zMi0uMjctOC40N2MyOS41Ny0yNy44OCAzMi4yNS02NC42MyAzMi4yNy0xMDMgMC04LjYxLTYuNjQtMTYtMTUuMjUtMTYuNDFBMTYgMTYgMCAwMDQwMCAxMTJjMCAyOC0xLjg2IDQ4LjE1LTkuOSA2My44NC0xOS4yMi00MS4xNS02NS43OC02My45MS0xMzQuMS02My45MS0zOS44IDAtNzQuMTkgOS4xMy05OS40MyAyNi4zOS0xNC45IDEwLjE5LTI2LjIgMjIuOTEtMzMuNyAzNy43MkMxMTQgMTYwLjY1IDExMiAxNDEgMTEyIDExMi40NmMwLTguNjEtNi42LTE2LTE1LjItMTYuNDRBMTYgMTYgMCAwMDgwIDExMmMwIDM3LjYzIDIuNjEgNzMuNzMgMzIuNDQgMTAxLjYzcS0uNDMgNS4wNi0uNDQgMTAuM3Y0OC4ySDQ4LjQ1Yy04LjYxIDAtMTYgNi42Mi0xNi40MyAxNS4yM2ExNiAxNiAwIDAwMTYgMTYuNzdoNjRWMzIwYTE0My4zMiAxNDMuMzIgMCAwMDEwLjM5IDUzLjY5Qzk2Ljc0IDM5Ni42NCA4MC4xOCA0MjIgODAgNDYzLjM0YzAgOC43NCA2LjYyIDE2LjMgMTUuMzYgMTYuNjVBMTYgMTYgMCAwMDExMiA0NjRjMC0yNy42NiA5LjEtNDQuNzEgMjYuMTctNjEuMzJBMTQ0LjM3IDE0NC4zNyAwIDAwMjIwIDQ1OS40MmExNiAxNiAwIDAwMjAtMTUuNDlWMTkyLjQ1YzAtOC42MSA2LjYyLTE2IDE1LjIzLTE2LjQzQTE2IDE2IDAgMDEyNzIgMTkydjI1MS45M2ExNiAxNiAwIDAwMjAgMTUuNDkgMTQ0LjQgMTQ0LjQgMCAwMDgxLjgyLTU2Ljc0YzE3IDE2LjU0IDI2LjA5IDMzLjUyIDI2LjE3IDYwLjk1YTE2LjI3IDE2LjI3IDAgMDAxNS4xIDE2LjM3QTE2IDE2IDAgMDA0MzIgNDY0YzAtNDEuNjgtMTYuNi02Ny4yMy00Mi4zOS05MC4zMUExNDMuMzIgMTQzLjMyIDAgMDA0MDAgMzIwdi0xNS44N2g2NGExNiAxNiAwIDAwMTYtMTYuNzdjLS40Mi04LjYxLTcuODQtMTUuMjMtMTYuNDUtMTUuMjN6Ii8+PHBhdGggZD0iTTMyMS4zOSAxMDRsLjMyLjA5YzEzLjU3IDMuOCAyNS4wNy0xMC41NSAxOC4yLTIyLjg1QTk1Ljg2IDk1Ljg2IDAgMDAyNTYuMjEgMzJoLS40MmE5NS44NyA5NS44NyAwIDAwLTg0LjE5IDUwLjEzYy02Ljg0IDEyLjU4IDUuMTQgMjcgMTguODQgMjIuODYgMTkuNzEtNiA0MS43OS05LjA2IDY1LjU2LTkuMDYgMjQuMDkgMCA0Ni4wOSAyLjcyIDY1LjM5IDguMDd6Ii8+PC9zdmc+"); -webkit-mask-size: 106.25%; } .callout-icon .lucide-check { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTI1NiA0OEMxNDEuMzEgNDggNDggMTQxLjMxIDQ4IDI1NnM5My4zMSAyMDggMjA4IDIwOCAyMDgtOTMuMzEgMjA4LTIwOFMzNzAuNjkgNDggMjU2IDQ4em0xMDguMjUgMTM4LjI5bC0xMzQuNCAxNjBhMTYgMTYgMCAwMS0xMiA1LjcxaC0uMjdhMTYgMTYgMCAwMS0xMS44OS01LjNsLTU3LjYtNjRhMTYgMTYgMCAxMTIzLjc4LTIxLjRsNDUuMjkgNTAuMzIgMTIyLjU5LTE0NS45MWExNiAxNiAwIDAxMjQuNSAyMC41OHoiLz48L3N2Zz4="); } .callout-icon .lucide-check-circle-2 { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTM0NS4xNCA0ODBIMjc0YTE4IDE4IDAgMDEtMTgtMTh2LTI3LjcxYTMxLjMyIDMxLjMyIDAgMDAtOS43MS0yMi43N2MtNy43OC03LjU5LTE5LjA4LTExLjgtMzAuODktMTEuNTEtMjEuMzYuNS0zOS40IDE5LjMtMzkuNCA0MS4wNlY0NjJhMTggMTggMCAwMS0xOCAxOEg4Ny42MkE1NS42MiA1NS42MiAwIDAxMzIgNDI0LjM4VjM1NGExOCAxOCAwIDAxMTgtMThoMjcuNzFjOS4xNiAwIDE4LjA3LTMuOTIgMjUuMDktMTFhNDIuMDYgNDIuMDYgMCAwMDEyLjItMjkuOTJDMTE0LjcgMjczLjg5IDk3LjI2IDI1NiA3Ni45MSAyNTZINTBhMTggMTggMCAwMS0xOC0xOHYtNzAuMzhBNTUuNjIgNTUuNjIgMCAwMTg3LjYyIDExMmg1NS4yNGE4IDggMCAwMDgtOHYtNi40OEE2NS41MyA2NS41MyAwIDAxMjE3LjU0IDMyYzM1LjQ5LjYyIDY0LjM2IDMwLjM4IDY0LjM2IDY2LjMzVjEwNGE4IDggMCAwMDggOGg1NS4yNEE1NC44NiA1NC44NiAwIDAxNDAwIDE2Ni44NnY1NS4yNGE4IDggMCAwMDggOGg1LjY2YzM2LjU4IDAgNjYuMzQgMjkgNjYuMzQgNjQuNjQgMCAzNi42MS0yOS4zOSA2Ni40LTY1LjUyIDY2LjRINDA4YTggOCAwIDAwLTggOHY1NkE1NC44NiA1NC44NiAwIDAxMzQ1LjE0IDQ4MHoiLz48L3N2Zz4="); } .callout-icon .lucide-flame { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTI4OCA0NjRoLTY0YTE2IDE2IDAgMDAwIDMyaDY0YTE2IDE2IDAgMDAwLTMyek0zMDQgNDE2aC05NmExNiAxNiAwIDAwMCAzMmg5NmExNiAxNiAwIDAwMC0zMnpNMzY5LjQyIDYyLjY5QzMzOS4zNSAzMi41OCAyOTkuMDcgMTYgMjU2IDE2QTE1OS42MiAxNTkuNjIgMCAwMDk2IDE3NmMwIDQ2LjYyIDE3Ljg3IDkwLjIzIDQ5IDExOS42NGw0LjM2IDQuMDlDMTY3LjM3IDMxNi41NyAxOTIgMzM5LjY0IDE5MiAzNjB2MjRhMTYgMTYgMCAwMDE2IDE2aDI0YTggOCAwIDAwOC04VjI3NC44MmE4IDggMCAwMC01LjEzLTcuNDdBMTMwLjczIDEzMC43MyAwIDAxMjA4LjcxIDI1M2ExNiAxNiAwIDExMTguNTgtMjZjNy40IDUuMjQgMjEuNjUgMTMgMjguNzEgMTNzMjEuMzEtNy43OCAyOC43My0xM2ExNiAxNiAwIDAxMTguNTYgMjYgMTMwLjczIDEzMC43MyAwIDAxLTI2LjE2IDE0LjMyIDggOCAwIDAwLTUuMTMgNy40N1YzOTJhOCA4IDAgMDA4IDhoMjRhMTYgMTYgMCAwMDE2LTE2di0yNGMwLTE5Ljg4IDI0LjM2LTQyLjkzIDQyLjE1LTU5Ljc3bDQuOTEtNC42NkMzOTkuMDggMjY1IDQxNiAyMjMuNjEgNDE2IDE3NmExNTkuMTYgMTU5LjE2IDAgMDAtNDYuNTgtMTEzLjMxeiIvPjwvc3ZnPg=="); -webkit-mask-size: 106.25%; } .callout-icon .lucide-help-circle { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTI1NiA2NEMxNTAgNjQgNjQgMTUwIDY0IDI1NnM4NiAxOTIgMTkyIDE5MiAxOTItODYgMTkyLTE5MlMzNjIgNjQgMjU2IDY0em0tNiAzMDRhMjAgMjAgMCAxMTIwLTIwIDIwIDIwIDAgMDEtMjAgMjB6bTMzLjQ0LTEwMkMyNjcuMjMgMjc2Ljg4IDI2NSAyODYuODUgMjY1IDI5NmExNCAxNCAwIDAxLTI4IDBjMC0yMS45MSAxMC4wOC0zOS4zMyAzMC44Mi01My4yNkMyODcuMSAyMjkuOCAyOTggMjIxLjYgMjk4IDIwMy41N2MwLTEyLjI2LTctMjEuNTctMjEuNDktMjguNDYtMy40MS0xLjYyLTExLTMuMi0yMC4zNC0zLjA5LTExLjcyLjE1LTIwLjgyIDIuOTUtMjcuODMgOC41OUMyMTUuMTIgMTkxLjI1IDIxNCAyMDIuODMgMjE0IDIwM2ExNCAxNCAwIDExLTI4LTEuMzVjLjExLTIuNDMgMS44LTI0LjMyIDI0Ljc3LTQyLjggMTEuOTEtOS41OCAyNy4wNi0xNC41NiA0NS0xNC43OCAxMi43LS4xNSAyNC42MyAyIDMyLjcyIDUuODJDMzEyLjcgMTYxLjM0IDMyNiAxODAuNDMgMzI2IDIwMy41N2MwIDMzLjgzLTIyLjYxIDQ5LjAyLTQyLjU2IDYyLjQzeiIvPjwvc3ZnPg=="); -webkit-mask-size: 118.75%; } .callout-icon .lucide-clipboard-list { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTI1NiA0OEMxNDEuMzEgNDggNDggMTQxLjMxIDQ4IDI1NnM5My4zMSAyMDggMjA4IDIwOCAyMDgtOTMuMzEgMjA4LTIwOFMzNzAuNjkgNDggMjU2IDQ4em0tODggMzAyYTI0IDI0IDAgMTEyNC0yNCAyNCAyNCAwIDAxLTI0IDI0em0wLTcxYTI0IDI0IDAgMTEyNC0yNCAyNCAyNCAwIDAxLTI0IDI0em0wLTczYTI0IDI0IDAgMTEyNC0yNCAyNCAyNCAwIDAxLTI0IDI0em0xODQgMTM1SDIyNGExNiAxNiAwIDAxMC0zMmgxMjhhMTYgMTYgMCAwMTAgMzJ6bTAtNzFIMjI0YTE2IDE2IDAgMDEwLTMyaDEyOGExNiAxNiAwIDAxMCAzMnptMC03MkgyMjRhMTYgMTYgMCAwMTAtMzJoMTI4YTE2IDE2IDAgMDEwIDMyeiIvPjwvc3ZnPg=="); -webkit-mask-size: 118.75%; } .callout-icon .lucide-info { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTI1NiA1NkMxNDUuNzIgNTYgNTYgMTQ1LjcyIDU2IDI1NnM4OS43MiAyMDAgMjAwIDIwMCAyMDAtODkuNzIgMjAwLTIwMFMzNjYuMjggNTYgMjU2IDU2em0wIDgyYTI2IDI2IDAgMTEtMjYgMjYgMjYgMjYgMCAwMTI2LTI2em00OCAyMjZoLTg4YTE2IDE2IDAgMDEwLTMyaDI4di04OGgtMTZhMTYgMTYgMCAwMTAtMzJoMzJhMTYgMTYgMCAwMTE2IDE2djEwNGgyOGExNiAxNiAwIDAxMCAzMnoiLz48L3N2Zz4="); -webkit-mask-size: 118.75%; } .callout-icon .lucide-list { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQyOCAyMjRIMjg4YTQ4IDQ4IDAgMDEtNDgtNDhWMzZhNCA0IDAgMDAtNC00aC05MmE2NCA2NCAwIDAwLTY0IDY0djMyMGE2NCA2NCAwIDAwNjQgNjRoMjI0YTY0IDY0IDAgMDA2NC02NFYyMjhhNCA0IDAgMDAtNC00em0tOTIgMTYwSDE3NmExNiAxNiAwIDAxMC0zMmgxNjBhMTYgMTYgMCAwMTAgMzJ6bTAtODBIMTc2YTE2IDE2IDAgMDEwLTMyaDE2MGExNiAxNiAwIDAxMCAzMnoiLz48cGF0aCBkPSJNNDE5LjIyIDE4OC41OUwyNzUuNDEgNDQuNzhhMiAyIDAgMDAtMy40MSAxLjQxVjE3NmExNiAxNiAwIDAwMTYgMTZoMTI5LjgxYTIgMiAwIDAwMS40MS0zLjQxeiIvPjwvc3ZnPg=="); -webkit-mask-size: 106.25%; } .callout-icon .lucide-pencil { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQ1OS45NCA1My4yNWExNi4wNiAxNi4wNiAwIDAwLTIzLjIyLS41Nkw0MjQuMzUgNjVhOCA4IDAgMDAwIDExLjMxbDExLjM0IDExLjMyYTggOCAwIDAwMTEuMzQgMGwxMi4wNi0xMmM2LjEtNi4wOSA2LjY3LTE2LjAxLjg1LTIyLjM4ek0zOTkuMzQgOTBMMjE4LjgyIDI3MC4yYTkgOSAwIDAwLTIuMzEgMy45M0wyMDguMTYgMjk5YTMuOTEgMy45MSAwIDAwNC44NiA0Ljg2bDI0Ljg1LTguMzVhOSA5IDAgMDAzLjkzLTIuMzFMNDIyIDExMi42NmE5IDkgMCAwMDAtMTIuNjZsLTkuOTUtMTBhOSA5IDAgMDAtMTIuNzEgMHoiLz48cGF0aCBkPSJNMzg2LjM0IDE5My42NkwyNjQuNDUgMzE1Ljc5QTQxLjA4IDQxLjA4IDAgMDEyNDcuNTggMzI2bC0yNS45IDguNjdhMzUuOTIgMzUuOTIgMCAwMS00NC4zMy00NC4zM2w4LjY3LTI1LjlhNDEuMDggNDEuMDggMCAwMTEwLjE5LTE2Ljg3bDEyMi4xMy0xMjEuOTFhOCA4IDAgMDAtNS42NS0xMy42NkgxMDRhNTYgNTYgMCAwMC01NiA1NnYyNDBhNTYgNTYgMCAwMDU2IDU2aDI0MGE1NiA1NiAwIDAwNTYtNTZWMTk5LjMxYTggOCAwIDAwLTEzLjY2LTUuNjV6Ii8+PC9zdmc+"); -webkit-mask-size: 118.75%; } .callout-icon .lucide-quote { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQ3Ni41OSAyMjcuMDVsLS4xNi0uMDdMNDkuMzUgNDkuODRBMjMuNTYgMjMuNTYgMCAwMDI3LjE0IDUyIDI0LjY1IDI0LjY1IDAgMDAxNiA3Mi41OXYxMTMuMjlhMjQgMjQgMCAwMDE5LjUyIDIzLjU3bDIzMi45MyA0My4wN2E0IDQgMCAwMTAgNy44NkwzNS41MyAzMDMuNDVBMjQgMjQgMCAwMDE2IDMyN3YxMTMuMzFBMjMuNTcgMjMuNTcgMCAwMDI2LjU5IDQ2MGEyMy45NCAyMy45NCAwIDAwMTMuMjIgNCAyNC41NSAyNC41NSAwIDAwOS41Mi0xLjkzTDQ3Ni40IDI4NS45NGwuMTktLjA5YTMyIDMyIDAgMDAwLTU4Ljh6Ii8+PC9zdmc+"); -webkit-mask-size: 100%; } .callout-icon .lucide-x { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTI1NiA0OEMxNDEuMzEgNDggNDggMTQxLjMxIDQ4IDI1NnM5My4zMSAyMDggMjA4IDIwOCAyMDgtOTMuMzEgMjA4LTIwOFMzNzAuNjkgNDggMjU2IDQ4em03NS4zMSAyNjAuNjlhMTYgMTYgMCAxMS0yMi42MiAyMi42MkwyNTYgMjc4LjYzbC01Mi42OSA1Mi42OGExNiAxNiAwIDAxLTIyLjYyLTIyLjYyTDIzMy4zNyAyNTZsLTUyLjY4LTUyLjY5YTE2IDE2IDAgMDEyMi42Mi0yMi42MkwyNTYgMjMzLjM3bDUyLjY5LTUyLjY4YTE2IDE2IDAgMDEyMi42MiAyMi42MkwyNzguNjMgMjU2eiIvPjwvc3ZnPg=="); } .callout-icon .lucide-zap { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQ0OS4wNyAzOTkuMDhMMjc4LjY0IDgyLjU4Yy0xMi4wOC0yMi40NC00NC4yNi0yMi40NC01Ni4zNSAwTDUxLjg3IDM5OS4wOEEzMiAzMiAwIDAwODAgNDQ2LjI1aDM0MC44OWEzMiAzMiAwIDAwMjguMTgtNDcuMTd6bS0xOTguNi0xLjgzYTIwIDIwIDAgMTEyMC0yMCAyMCAyMCAwIDAxLTIwIDIwem0yMS43Mi0yMDEuMTVsLTUuNzQgMTIyYTE2IDE2IDAgMDEtMzIgMGwtNS43NC0xMjEuOTVhMjEuNzMgMjEuNzMgMCAwMTIxLjUtMjIuNjloLjIxYTIxLjc0IDIxLjc0IDAgMDEyMS43MyAyMi43eiIvPjwvc3ZnPg=="); } /*--> Workspace Layout <--*/ body:not(.is-mobile) .mod-root > .mod-horizontal > .workspace-tabs > :is(.workspace-tab-container, .workspace-tabs:not(.mod-stacked) .workspace-leaf), body:not(.is-mobile) .mod-root .workspace-tabs > :is(.workspace-tab-container, .workspace-tabs:not(.mod-stacked) .workspace-leaf) { border-radius: var(--radius-ml); } body:not(.is-mobile) .mod-root .workspace-tab-container { box-shadow: var(--shadow-workspace); outline: 1px solid var(--workspace-border-color); } body:not(.is-mobile) .mod-root .workspace-tabs:not(:only-of-type) .workspace-tab-container { box-shadow: var(--shadow-workspace-multi); --file-margins: var(--file-margin-y) 32px; } body:not(.is-mobile) .workspace, .workspace-tab-container, .mod-root { transition: all var(--anim-duration-fast) ease-in-out, padding 0ms, box-shadow 0ms; } /* margin adjustment when there is no view header */ body:not(.is-mobile):not(.show-view-header) { --file-margin-y: 56px; } /* FROM: Cupertino */ /* By Alexis C */ /* MIT License */ /* Gap between multiple root tabs */ body:not( .is-mobile, .is-popout-window) :is( .workspace.is-left-sidedock-open .mod-root .mod-vertical, .workspace.is-left-sidedock-open .mod-root.mod-vertical, .workspace.is-right-sidedock-open .mod-root .mod-vertical, .workspace.is-right-sidedock-open .mod-root.mod-vertical) { gap: 8px; } body:not(.is-mobile) .workspace { background-image: var(--background-gradient); font-weight: var(--font-weight); } body:not(.is-mobile) .mod-root { padding-bottom: 8px; } .workspace-split.mod-root, .workspace-tabs .workspace-leaf, .mod-sidedock .view-header { background-color: transparent; } body:not(.is-mobile) .mod-root .workspace-tabs { overflow: visible; } :is(.mod-linux, .mod-windows) .titlebar-button.mod-close:hover { background-color: oklch(from var(--color-red) l c h / 0.333); color: var(--color-red); } /* Sidedock / workspace-split */ body:not(.is-mobile) .mod-sidedock .workspace-tab-container { margin-inline: 4px; } /* empty sidedock */ .workspace-sidedock-empty-state { padding-block: var(--header-height); } /* FROM: Cupertino */ /* By Alexis C */ /* MIT License */ /* Main tab margins */ body:not(.is-mobile) .workspace:not(.is-right-sidedock-open) .mod-root > .workspace-tabs:last-of-type > .workspace-tab-container, body:not(.is-mobile) .workspace:not(.is-right-sidedock-open) .mod-root .mod-horizontal:last-of-type > .workspace-tabs > .workspace-tab-container, body:not(.is-mobile) .workspace:not(.is-right-sidedock-open) .mod-root .mod-horizontal > .workspace-split .workspace-tabs:last-of-type > .workspace-tab-container { margin-inline-end: 8px; } body:not(.is-mobile) .workspace:not(.is-left-sidedock-open) .mod-root > .workspace-tabs:first-of-type > .workspace-tab-container, body:not(.is-mobile) .workspace:not(.is-left-sidedock-open) .mod-root .mod-horizontal:first-of-type > .workspace-tabs .workspace-tab-container, body:not(.is-mobile) .workspace:not(.is-left-sidedock-open) .mod-root .mod-horizontal > .workspace-split .workspace-tabs:first-of-type > .workspace-tab-container { margin-inline-start: 8px; } /* Margin OFF when sidebars closed */ body:not(.is-mobile) .workspace:not(.is-left-sidedock-open,.is-right-sidedock-open) .mod-root > .workspace-tabs:last-of-type > .workspace-tab-container, body:not(.is-mobile) .workspace:not(.is-left-sidedock-open,.is-right-sidedock-open) .mod-root > .workspace-split.mod-horizontal .workspace-tabs > .workspace-tab-container { margin-inline: unset; } body:not(.is-mobile) .workspace:not(.is-left-sidedock-open,.is-right-sidedock-open) { background-image: unset; } body:not(.is-mobile) .workspace:not(.is-left-sidedock-open,.is-right-sidedock-open) .workspace-split.mod-vertical.mod-root { padding-bottom: unset; & .workspace-tabs { --divider-width: 1px; } & .workspace-tabs > .workspace-tab-container { box-shadow: unset; outline-color: transparent; } & .workspace-tabs.mod-stacked > .workspace-tab-container { border-radius: unset; box-shadow: 0 -0.5px 0 0px var(--trans-faint-40); } .mod-horizontal:not(.last-child) { border-right: 1px solid var(--divider-color); } .empty-state { padding-block-end: 8px; } } body:not(.is-mobile) .workspace:not(.is-left-sidedock-open,.is-right-sidedock-open) .side-dock-ribbon { opacity: 0.625; transition: var(--anim-duration-fast) ease-in-out; } body:not(.is-mobile) .workspace:not(.is-left-sidedock-open,.is-right-sidedock-open) .side-dock-ribbon:hover { opacity: 1; } /*--> Nav Header <--*/ body:not(.is-mobile) { .nav-header { display: flex; flex-direction: column; align-items: center; padding: 4px 4px 0; margin-block: 6px -12px; transition: var(--anim-fast-swing); } .nav-buttons-container { display: flex; width: fit-content; max-width: 100%; padding: 2px; border-radius: var(--radius-xxl); background-color: var(--nav-header-bg); flex-wrap: nowrap; transform: scale(25%, 20%) translateY(-60px); transition: var(--anim-fast-smooth); & > * { filter: opacity(0); } } .nav-action-button { border-radius: var(--radius-s); height: 26px; width: 44px; } .nav-header > .search-input-container { margin-block: -8px 16px; width: calc(100% - 28px); } .mod-sidedock .nav-header + * { padding-top: 0; } } body:not(.is-mobile) :not(.view-content,.workspace-leaf-content) > .nav-header { flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-inline: 8px; } body:not(.is-mobile) :not(.view-content,.workspace-leaf-content) > .nav-header:has( > :only-of-type) { justify-content: center; margin-inline: 0; & > .nav-buttons-container { flex-wrap: wrap; } } body:not(.is-mobile) .nav-buttons-container:hover, body:not(.is-mobile).disable-hover-header .nav-buttons-container, body:not(.is-mobile) :not(.view-content,.workspace-leaf-content) > .nav-header > .nav-buttons-container { transform: scale(100%); transform: translateY(0); border-radius: var(--radius-sm); flex-wrap: nowrap; margin-bottom: 16px; --background-modifier-active-hover: var(--color-accent-5); & > * { filter: unset; } } /*--> Navigation / File Tree <--*/ .workspace-leaf-content .tree-item-self { padding-block: 8px; } /* Folders */ .nav-files-container .tree-item-self.mod-collapsible { transition: background-color var(--anim-fast-swing); } .nav-files-container .tree-item:not(.is-collapsed) .tree-item-self.mod-collapsible:not(.is-being-dragged) { color: var(--link-color); background-color: var(--nav-item-background-selected); } .nav-files-container .tree-item-children .tree-item.is-collapsed .tree-item-self.mod-collapsible:not(.is-being-dragged) { color: var(--nav-folder-color); --nav-item-background-selected: transparent; --nav-item-background-hover: var(--trans-faint-05); &:hover { color: var(--nav-item-color-hover); background-color: var(--nav-item-background-hover); } } .nav-files-container .tree-item-children { border-left-color: transparent; border-image: linear-gradient(to bottom, var(--background-modifier-active-hover), var(--trans-faint-05)) 1; } /* Files */ .tree-item.nav-file { font-weight: var(--nav-item-weight); } .tree-item.nav-file .tree-item-self.nav-file-title.is-active { box-shadow: none; } .mod-sidedock .nav-file-tag { border-radius: var(--radius-xs); color: var(--text-normal); font-weight: var(--font-medium); } /*--> Workspace Sidebar leaves <--*/ .mod-sidedock .workspace-leaf-content > .view-content { padding-block-start: 8px; } /* make room for status bar */ .mod-right-split .workspace-tabs:last-of-type .workspace-leaf-content { padding-block-end: 44px; } .mod-sidedock > :not(.mod-top) .workspace-tab-header-container { border-block: 1px solid transparent; transition: border var(--anim-fast-smooth); &:hover { border-top-color: var(--trans-faint-20); } } .workspace-leaf-content .tree-item-self.mod-collapsible { --nav-item-color: var(--nav-folder-color); --nav-item-background-selected: var(--color-accent-5); --nav-item-background-hover: var(--trans-faint-05); --nav-item-weight: var(--font-semibold); --nav-item-weight-hover: var(--font-semibold); --nav-item-weight-active: var(--font-semibold); } /* Backlinks */ .workspace-leaf-content[data-type="backlink"] > .view-content, .workspace-leaf-content[data-type="outgoing-link"] > .view-content { padding-block-start: unset; } .backlink-pane .search-result-file-title .tree-item-inner, .outgoing-link-pane .tree-item-inner-text { color: var(--link-color-sidebar); font-weight: var(--font-semi-medium); } .mod-sidedock .search-result-file-matches { box-shadow: var(--shadow-sidebar); margin-block-start: 0; } .search-result-file-title { padding-block-end: 4px; } :is(.backlink-pane, .outgoing-link-pane) .search-result-file-title { padding-inline: 24px 7px; --nav-item-background-hover: var(--color-accent-5); } .search-result-file-matched-text { background-color: var(--text-highlight-bg-search); padding: 0 2px 1px; } .search-result-file-match:hover .search-result-file-matched-text, .tree-item-self.is-clickable:hover .search-result-file-matched-text { background-color: var(--trans-faint-40); } /* Outgoing links */ .outgoing-link-pane .outgoing-link-item { --nav-item-background-hover: var(--color-accent-5); } .outgoing-link-pane .tree-item-inner-text { line-height: var(--line-height-normal); } .outgoing-link-pane .outgoing-link-item:hover .tree-item-inner-text { color: var(--color-accent); } .outgoing-link-item .tree-item-icon { padding-block-start: 2px; } .outgoing-link-item .tree-item-icon:has( + .tree-item-inner > .tree-item-inner-subtext) { padding-block-start: 4px; } /* special code for uncreated outgoing links */ .outgoing-link-item:not([draggable="true"]) { --nav-item-background-hover: color-mix(in oklab, var(--link-unresolved-color) 20%, transparent 100%); } .outgoing-link-item:not([draggable="true"]) .tree-item-inner-text, .outgoing-link-item:not([draggable="true"]):hover .tree-item-inner-text { color: var(--link-unresolved-color); } .outgoing-link-item:not([draggable="true"]) .tree-item-icon { filter: opacity(60%); } /* Search View */ .mod-sidedock .search-row { gap: 6px; } .mod-sidedock .search-info-container { color: var(--icon-color); padding: 8px 20px 4px; } .mod-sidedock .search-params { margin-inline: 12px; } .mod-sidedock .search-params .setting-item { padding-inline: 8px 2px; } .mod-sidedock .search-results-info { color: var(--text-faint); border-bottom: 1px solid var(--background-modifier-border); margin-inline: 12px; padding: 6px 2px 8px; } /*--> Sidebar Leaves with special content <--*/ body:not(.is-mobile) .mod-sidedock .workspace-leaf-content:is( [data-type="bases"], [data-type="canvas"], [data-type="kanban"], [data-type="pdf"], [data-type="webviewer"]) { background-color: var(--background-primary); border-radius: var(--radius-ml); box-shadow: var(--shadow-sidebar); width: calc(100% - 8px); height: calc(100% - 10px); margin: 1px 4px 9px; padding-block-end: 0; > .view-content { padding-block-start: 0; } } body:not(.is-mobile) .mod-sidedock .workspace-tabs:last-child .workspace-leaf-content:is( [data-type="bases"], [data-type="canvas"], [data-type="kanban"], [data-type="pdf"], [data-type="webviewer"]) { height: calc(100% - 2px); margin-block-end: 1px; } body:not(.is-mobile) .mod-sidedock.mod-right-split .workspace-tabs:last-child .workspace-leaf-content:is( [data-type="bases"], [data-type="canvas"], [data-type="kanban"], [data-type="pdf"], [data-type="webviewer"]) { height: calc(100% - 44px); margin-block-end: 44px; } /*--> Workspace Tabs <--*/ .workspace-tab-header-new-tab .clickable-icon { height: 32px; width: 32px; margin-bottom: 2px; --icon-color: var(--text-muted); } .workspace-tab-header-tab-list { padding-block: 1px 0; } .workspace-tab-header-tab-list .clickable-icon { padding-block: 8px; } /* Remove tab gutter curves */ .workspace-split.mod-root .workspace-tab-header::before, .workspace-split.mod-root .workspace-tab-header::after, .workspace-split.mod-root .workspace-tab-header-inner::after { display: none; } /* Tab Containers */ .workspace-tab-header-container { /* important: fixes top tab performance */ overflow: hidden; } .workspace .mod-root .workspace-tab-header-container-inner { padding-inline: 8px; } .workspace.is-left-sidedock-open .mod-root .workspace-tab-header-container-inner { padding-inline-start: 0; } .mod-root .workspace-tab-header-container-inner { height: var(--header-height); padding-block: 0; align-items: center; column-gap: 4px; } .mod-sidedock .workspace-tab-header-container-inner { height: 40px; background-image: var(--tab-sidebar-container-bg); border-radius: 20px; box-shadow: var(--tab-container-shadow); padding: 2px; margin: 6px 0 0 0; contain: content; } /* Root Tabs */ .mod-root .workspace-tabs:not(.mod-stacked) { .workspace-tab-header { border-radius: var(--tab-radius); height: 35px; padding: 1px 0 0 0; } .workspace-tab-header.is-active { background-color: transparent; } .workspace-tab-header-inner { padding-inline: 6px 5px; } .workspace-tab-header:hover .workspace-tab-header-inner { color: var(--tab-text-color-active); } .workspace-tab-header.is-active .workspace-tab-header-inner { background-color: var(--background-modifier-hover); } .workspace-tab-header-inner-title { transition: color var(--anim-super-smooth); } .workspace-tab-header:is([data-type="empty"],[data-type="markdown"]) .workspace-tab-header-inner-title { text-indent: 4px; } } .workspace-tab-header-inner-close-button, .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button { border-radius: var(--radius-xs); color: var(--icon-color); padding: 4px; --icon-stroke: var(--icon-s-stroke-width); } /* Sidebar Tabs */ .mod-sidedock .workspace-tab-header { border-radius: var(--radius-xxl); min-height: 36px; min-width: 36px; } .mod-sidedock .workspace-tab-header:hover { --background-modifier-hover: transparent; --icon-color-hover: var(--nav-item-color); } .mod-sidedock .workspace-tab-header-inner { border-radius: 50%; width: 99%; transition: inherit; & > * { transition: inherit; } } .mod-sidedock .workspace-tab-header.is-active, .mod-sidedock .workspace-tab-header.is-active:hover { --icon-color-focused: var(--color-base-100); background-color: var(--tab-sidebar-bg); box-shadow: var(--shadow-tab); } .mod-sidedock .mod-top .workspace-tab-header.is-active { background-color: var(--tab-sidebar-bg-top); } .mod-left-split .mod-top .workspace-tab-header.is-active { background-color: var(--tab-sidebar-bg-top-left); } /* Tab Icons */ .workspace-tab-header:not(.is-active) .workspace-tab-header-inner .workspace-tab-header-inner-icon { --icon-opacity: 0.8; } .mod-sidedock .workspace-tab-header-status-container { color: var(--icon-color); filter: opacity(var(--icon-opacity)); --icon-opacity: 0.75; } .mod-sidedock .workspace-tab-header.is-active .workspace-tab-header-status-container { --icon-color: var(--link-color); --icon-opacity: 1; } .mod-sidedock .workspace-tab-header.is-active .workspace-tab-header-status-container:hover { --icon-color: var(--link-color-hover); } /* FROM Willemstad */ /* By tingmelvin */ .mod-root .workspace-tab-header-container-inner .workspace-tab-header:has(.mod-pinned) { max-width: 80px; order: -1; & .workspace-tab-header-inner { max-width: 80px; } } /*--> View Header <--*/ .view-header { padding-inline: 8px; z-index: var(--layer-popover); } .view-header > .view-header-left .clickable-icon { --icon-color: var(--text-muted); } .view-header-title-container > *, .view-header > :is( .view-header-left, .view-header-reload-button, .view-actions) { padding-block-start: 2px; & .clickable-icon { padding: 9px 10px; } } /* View header Title */ .view-header-title-container { margin-inline-end: 4px; } .workspace-leaf-content > .view-header > .view-header-title-container > .view-header-title { color: var(--color-base-80); font-weight: var(--font-semi-medium); } .view-header-title-parent { color: var(--color-base-55); } /* View header FAB */ .workspace-leaf-content[data-type="markdown"] { & .view-actions { contain: content; column-gap: 4px; padding-inline-end: 4px; padding-block-end: 24px; margin-block-end: -24px; transform: translateX(-8px) translateY(14px); } & .view-actions .clickable-icon.view-action:last-child { border-radius: var(--radius-xs); height: 32px; width: 20px; padding: 1px 0 0 0; filter: opacity(0%); transition: var(--anim-duration-fast) ease-out; --icon-size: var(--icon-xl); } & .view-actions:hover .clickable-icon.view-action:last-child { filter: opacity(37.5%); &:hover { filter: unset; } } & .view-actions .clickable-icon.view-action:not(:last-child, .mod-bookmark) { --icon-size: var(--icon-m); --icon-color: var(--fab-color); --icon-color-hover: var(--fab-color); --icon-color-focused: var(--fab-color); height: 40px; width: 40px; border-radius: 50%; padding-block: 1px 0; padding-inline: 0 1px; order: 2; opacity: 1; filter: opacity(100%); background-color: var(--fab-bg); box-shadow: var(--shadow-fab); cursor: var(--cursor-link); transition-property: transform, filter; transition-duration: var(--anim-duration-superfast); transition-timing-function: var(--fab-easing-curve); & .svg-icon { filter: opacity(75%); transition: inherit; } &:active { transform: scale(0.875); filter: opacity(75%); } &:hover .svg-icon { filter: opacity(100%); } } &[data-mode="source"] .view-actions .clickable-icon.view-action:not(:last-child, .mod-bookmark) { box-shadow: var(--shadow-fab-active); --icon-color: var(--color-accent-3); --icon-color-hover: var(--color-accent-3); --icon-color-focused: var(--color-accent-3); & .svg-icon { filter: opacity(100%); transition: inherit; } &:hover .svg-icon { filter: opacity(75%); } } & .view-actions .clickable-icon.view-action.mod-bookmark { order: 1; } } body:not(.is-mobile) .mod-sidedock .workspace-leaf-content .view-header { background-color: transparent; } /*--> Document Search <--*/ .document-search-container { contain: paint; background-color: var(--background-primary); border-radius: var(--radius-xxl); box-shadow: var(--shadow-fab); padding: 6px; position: absolute; right: 0; top: 1px; gap: 4px; margin: 4px 8px; --background-primary: var(--fab-bg); --search-icon-color: var(--color-base-55); } .mod-right-split .document-search-container { right: unset; left: 0; } .mod-right-split .document-search-container * { flex-direction: row-reverse; } .mod-root .document-search-container { right: 60px; top: 15px; --background-primary: var(--fab-bg); } .document-search-container :is(.document-search, .document-replace) { background-color: transparent; padding-inline: unset; gap: 4px; } :is(.document-search-input, .document-replace) input { box-shadow: var(--shadow-sidebar); border-radius: var(--radius-l); --background-modifier-form-field: var(--search-result-background); --background-modifier-form-field-hover: var(--search-result-background); } :is(.document-search-input, .document-replace) input:focus { box-shadow: 0 0 0 2.25px var(--text-highlight-bg-search-active); } .document-replace input { text-indent: 5.5px; } .document-search-container .clickable-icon { border-radius: var(--radius-m); } .mod-replace-mode .document-search-close-button { margin-inline-end: 4px; } .document-replace input::placeholder { text-indent: 5.5px; } .document-replace-buttons { margin-inline-end: 72px; } /* Search highlights */ .markdown-rendered .search-highlight > div, .markdown-rendered .search-highlight > div.is-active, .cm-s-obsidian span.obsidian-search-match-highlight { background-color: var(--text-highlight-bg-search-active); box-shadow: none; filter: opacity(100%); } .markdown-rendered .search-highlight > div { background-color: var(--text-highlight-bg-search-active); } /*--> Ribbon <--*/ .workspace-ribbon > .side-dock-actions { gap: 4px; } .workspace-ribbon > .sidebar-toggle-button { padding-inline-start: 8px; } .clickable-icon.side-dock-ribbon-action { --icon-color: var(--text-muted); --icon-color-hover: var(--color-base-100); } .clickable-icon.side-dock-ribbon-action:active { transform: scale(0.875); } /*--> Status Bar <--*/ .status-bar { box-shadow: var(--shadow-status-bar); font-weight: var(--font-normal); max-height: 26px; margin-bottom: 9px; padding-inline: 12px; transition: all var(--anim-super-smooth); } body:not(.disable-status-fade) { & .status-bar:not(:hover) { background-color: transparent; box-shadow: none; filter: var(--status-bar-filter); } } /*--> Vault Profile <--*/ body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile { border: none; background-color: transparent; --icon-color: var(--text-muted); --icon-color-hover: var(--text-muted); --icon-color-active: var(--text-muted); --icon-color-focused: var(--text-muted); } body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher { padding-block: 8px; } /* ADAPTED FROM: Micro Mike */ /* By ThisTheThe */ /* MIT License */ /*--> Sidebar Auto-Hide <--*/ @media only screen and (max-width: 800px) { body:not(.is-mobile, .is-popout-window, .disable-autohide) :is( .mod-right-split, .mod-left-split, .workspace-ribbon, .sidebar-toggle-button.mod-left) { display: none; } body:not(.is-mobile, .is-popout-window, .disable-autohide) .workspace { background-image: none !important; --frame-right-space: 0px; --frame-left-space: 0px; } body:not(.is-mobile, .is-popout-window, .disable-autohide) .workspace-split.mod-vertical { gap: 0 !important; padding: 0; } body:not(.is-mobile, .is-popout-window, .disable-autohide) .workspace .mod-root { --shadow-workspace: none; --shadow-workspace-multi: none; } body:not(.is-mobile, .is-popout-window, .disable-autohide) .workspace .mod-root .workspace-tab-container { border-radius: 0 !important; margin: 0 !important; } body:not(.is-mobile, .is-popout-window, .disable-autohide) .workspace-tabs.mod-stacked .workspace-tab-container { box-shadow: var(--input-shadow); } .mod-macos.is-hidden-frameless .workspace .workspace-tabs.mod-top.mod-top-right-space .workspace-tab-header-container { padding-right: 8px; } body:not(.is-mobile, .is-popout-window, .disable-autohide) .workspace .mod-root .workspace-tabs.mod-top .workspace-tab-header-container:has(.sidebar-toggle-button.mod-right) { margin-right: var(--frame-right-space-override); & .sidebar-toggle-button { pointer-events: none; } & .sidebar-toggle-button .clickable-icon { background-color: oklch(from var(--text-error) l c h / 0.1); border-radius: var(--radius-sm); color: var(--text-error); transition: all var(--anim-fast-swing); } } body:not(.is-mobile, .is-popout-window, .disable-autohide) .workspace .mod-root .workspace-tabs:first-of-type.mod-top .workspace-tab-header-container { margin-inline: var(--frame-left-space-override) var(--frame-right-space); } body:not(.is-mobile, .is-popout-window, .disable-autohide) .workspace .workspace-tab-header-container-inner { padding-inline: 0px 6px !important; } body:not(.is-mobile, .is-popout-window, .disable-autohide) .status-bar::after { position: absolute; padding: 4px 8px; left: -128px; bottom: 1px; border-radius: var(--radius-l); font-weight: var(--font-normal); content: 'auto-hide is active'; color: var(--text-error); overflow: visible; } body:not(.is-mobile, .is-popout-window, .disable-autohide) .status-bar::after, body:not(.is-mobile, .is-popout-window, .disable-autohide, .disable-status-fade) .status-bar:hover::after { background-color: oklch(from var(--text-error) l c h / 0.1); } body:not(.is-mobile, .is-popout-window, .disable-autohide, .disable-status-fade) .status-bar::after { background-color: transparent; } } /*--> Stacked Tabs <--*/ .workspace-tabs.mod-stacked .workspace-tab-container { background-color: var(--background-primary); } .workspace-tabs.mod-stacked .workspace-tab-header { --nav-text-color: var(--text-normal); --tab-text-color: var(--icon-color); --tab-text-color-focused: var(--icon-color); } .workspace-tabs.mod-stacked .workspace-tab-container::-webkit-scrollbar-track { margin-inline: 2px; } body:not(.is-mobile) .mod-root .workspace-tabs.mod-stacked { .workspace-leaf, .workspace-tab-header-inner { border-bottom: 1px solid var(--divider-color); } .workspace-tab-header .workspace-tab-header-inner { padding: 9px 8px 8px; } .workspace-tab-header .workspace-tab-header-inner-icon { display: none; } :is(.workspace-tab-header-inner-close-button, .workspace-tab-header-status-icon) { padding: 6px; } .workspace-tab-header-inner-close-button { order: -1; } .workspace-tab-header .workspace-tab-header-inner-title { font-weight: var(--font-medium); letter-spacing: 0.125px; padding-inline: 6px 0; padding-right: 1px; } .workspace-leaf-content .view-header { padding-inline: 0 12px; } } body:not(.is-mobile) .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container-inner { padding: 0 0 0 4px; } /*--> PDF viewer <--*/ .pdfViewer .page { border: 0; } .pdf-toolbar { padding: 12px 16px 4px; } .pdf-toolbar-left { .clickable-icon { padding: 6px 12px; --icon-stroke: var(--icon-m-stroke-width); --icon-color: var(--text-muted); } > :is(.pdf-toolbar-spacer, .pdf-toolbar-divider) + .clickable-icon { contain: content; background-color: var(--fab-bg); box-shadow: var(--shadow-fab); padding: 8px 12px; > * { transition: var(--anim-fast-swing); } &:active > * { transform: scale(0.8125); } } .pdf-toolbar-divider { visibility: hidden; margin-inline: -4.5px; } .pdf-toolbar-spacer + .clickable-icon { border-radius: 40px 0 0 40px; padding-inline-end: 10px; transform-origin: right; clip-path: inset(-8px 0 -8px -8px); } .pdf-toolbar-divider + .clickable-icon { border-radius: 0 40px 40px 0; padding-inline-start: 10px; margin-inline-end: 4px; transform-origin: left; clip-path: inset(-8px -8px -8px 0); } .pdf-page-input { margin-inline-end: 2px; width: 7.5ch; --input-height: 26px; --input-radius: var(--radius-s); } } .pdf-sidebar-container .thumbnail { border-radius: var(--radius-ml); } .pdf-sidebar-container .thumbnail > img, .pdf-sidebar-container .thumbnail::before { border-radius: var(--radius-s); } /* Sidebar PDF viewer */ .mod-sidedock .pdf-toolbar { padding: 8px 10px; } /*--> Empty State <--*/ /* REMOVED FOR NOW */ /* =========================== =========================== 4 - Modals =========================== =========================== */ .modal-bg { background-color: var(--background-modifier-cover) !important; } .modal, .menu { --background-modifier-form-field: var(--background-primary); --background-modifier-form-field-hover: var(--background-primary); } .modal { background-color: var(--background-secondary); font-weight: var(--font-normal); } .mod-confirmation .modal { --background-modifier-form-field: var(--background-primary); --background-modifier-form-field-hover: var(--background-primary); background-color: var(--trans-strong-10); &.mod-lg { background-color: var(--background-secondary); } &:not(.mod-file-rename, .mod-bookmark) .modal-header { margin-bottom: 0.5em; } & .modal-header, .modal-header + * > * { padding-inline-start: 4px; } &::before { content: ''; position: absolute; backdrop-filter: blur(24px); width: 100%; height: 100%; /* negative margin to counter padding */ margin: -16px; z-index: -1; } } .mod-narrow :is(.modal-header, .modal-header + * > *) { padding-inline-start: 4px; } body:not(.is-mobile) :is(.mod-settings::before, .modal-sidebar::before, .modal .modal-close-button, .prompt .search-input-clear-button) { display: none; } .setting-font-list { margin: 1em 0 0.75em 0; } /*--> Confirmation Modal (Bookmarks/Iconic/etc.) <--*/ .mod-confirmation.mod-dim { & .setting-item-info { flex: 4 !important; } & .setting-item-control { flex: 6 !important; } & .setting-item:first-child .setting-item-control input:hover { box-shadow: var(--shadow-input); cursor: not-allowed; } --dialog-width: 420px; } /*--> Rename File <--*/ .mod-file-rename { --dialog-width: 360px; } .mod-file-rename .rename-textarea { font-weight: var(--font-normal); font-size: var(--font-ui-medium); text-align: center; margin-bottom: -4px; padding-block: 6px 4px; padding-inline: 8px; } /*--> Right-click Menu <--*/ .menu { font-weight: var(--font-semi-medium); } .menu-item { border-radius: 7px; padding: 6px 4px; } .menu-separator { border-color: var(--color-base-20); margin-block: 4px; margin-inline-start: 28px; } /* Menu icons */ .menu-item-icon { color: var(--color-base-40); transform: translate3d(1px, 0, 0); } .menu-item.is-disabled.selected { cursor: not-allowed; } .menu-item:not(.is-disabled).selected .svg-icon { color: var(--text-normal); transition: color var(--anim-super-swing); } .menu-item.is-warning:not(.is-disabled).selected .svg-icon { filter: unset; } .menu-item.is-warning:not(.is-disabled) .svg-icon { color: var(--text-error); filter: opacity(0.625); } /* Menu label (graph mode) */ .menu-item.is-label { color: var(--text-normal); font-size: var(--font-ui-medium); font-weight: var(--font-semibold); text-indent: -16px; text-align: center; } /* Menu label (graph mode) */ .menu-item.is-label { color: var(--text-normal); font-size: var(--font-ui-medium); font-weight: var(--font-semibold); text-indent: -16px; text-align: center; } /*--> Settings Modal <--*/ .mod-settings { background-image: var(--background-gradient-menu); border-radius: 24px; } .modal-container.mod-dim .vertical-tabs-container { --scrollbar-thumb-bg: var(--trans-strong-40); --scrollbar-active-thumb-bg: var(--trans-faint-30); } .modal-container.mod-dim .vertical-tab-header { background-color: transparent; border-inline-end-color: transparent; max-width: 260px; padding-inline: 10px 8px; } .modal-container.mod-dim .vertical-tab-content { background-color: transparent; padding-inline: 2.5vw; transform: translate3d(0px, 0px, 0px); --scrollbar-thumb-bg: var(--trans-faint-20); --scrollbar-active-thumb-bg: var(--trans-faint-40); } .mod-settings .vertical-tab-content > :is(h1,h2,h3,h4,h5,h6,p,span) { padding-inline-start: 4px; margin-block: 2ch 1ch; } /* Settings Sidebar */ body:not(.is-phone) .vertical-tab-nav-item { color: var(--color-base-80); font-size: var(--font-ui-small); font-weight: var(--font-medium); padding-block: 8px; padding-inline-start: 20px; --background-modifier-hover: var(--trans-faint-05); } body:not(.is-phone) .vertical-tab-nav-item.is-active { background-color: var(--trans-faint-20); color: var(--color-base-100); } body:not(.is-phone) .vertical-tab-header-group-title { padding-inline-start: 20px; } /* Setting item 'sections' */ .modal:not(.mod-community-modal) .setting-item { border-top-color: var(--trans-strong-40); } .modal:not(.mod-community-modal) .setting-item-heading { text-indent: 1px; } .mod-settings, .mod-narrow, .mod-confirmation { --background-modifier-form-field: transparent; --background-modifier-form-field-hover: transparent; & .setting-item:not(.style-settings-heading) { background-color: var(--setting-item-bg); border-inline: 1px solid var(--setting-item-border-color); box-shadow: var(--shadow-setting-item); clip-path: inset(0px -24px 0px -24px); padding: 12px 20px 12px 22px; flex-wrap: wrap; row-gap: 10px; & .setting-item-info { contain: content; flex: 7; } &:not(.style-settings-info-text) .setting-item-control { flex: 3; --icon-color: var(--text-muted); } } & .setting-item:last-of-type, .setting-item:has( + .setting-item.setting-item-heading), .setting-item:not(.setting-item-heading):has( + :not(.setting-item)) { box-shadow: var(--shadow-setting-item), 0px 0.25px 0px 0.125px var(--trans-faint-25); border-bottom: 1px solid var(--setting-item-border-color); border-radius: 0 0 var(--radius-ml) var(--radius-ml); clip-path: inset(0px -24px -24px -24px); padding-bottom: 14px; } & .setting-item.setting-item-heading + .setting-item:last-of-type, .setting-item:not(.setting-item-heading):only-of-type, .setting-item:first-child:has( + .setting-item.setting-item-heading), :not(.setting-item) + .setting-item:last-child, :not(.setting-item) + .setting-item:not(.setting-item-heading):has( + *:not(.setting-item)), .setting-item:not(.setting-item-heading):first-child:not(:has( + .setting-item)), .setting-item.setting-item-heading + .setting-item:not(.setting-item-heading):has( + .setting-item.setting-item-heading), div[class*="settings-section"] > .setting-item { border: 1px solid var(--setting-item-border-color); border-radius: var(--radius-ml) !important; clip-path: none !important; padding-block: 14px; } & .setting-item:not(.setting-item-heading):first-of-type, .setting-item.setting-item-heading + .setting-item, :not(.setting-item) + .setting-item:has( + .setting-item) { border-top: 1px solid var(--setting-item-border-color); border-radius: var(--radius-ml) var(--radius-ml) 0 0; clip-path: inset(-24px -24px 0px -24px); padding-top: 16px; } & .setting-item.setting-item-heading { background-color: transparent !important; border: none !important; box-shadow: none !important; font-weight: var(--font-semibold); } & .setting-item-description { font-size: 11.5px; --bold-color: var(--color-base-80); } & .setting-item-name { overflow: visible; } } .mobile-option-setting-item { border: 1px solid var(--trans-faint-20); border-radius: var(--radius-m); padding: 12px 16px; } .installed-plugins-container { padding-top: 0; border-top: none; } /* Hotkeys Settings page */ .hotkey-list-container { overflow: visible; } .setting-filter-container { font-family: var(--font-monospace); margin-top: var(--size-4-2); margin-inline-start: 16px; } .flair.mod-pop, .hotkey-filter, .setting-hotkey.mod-active { background-color: var(--trans-strong-00); background-image: var(--hotkey-gradient); color: var(--text-on-accent); gap: var(--size-2-2); font-weight: var(--font-cta-button); } .hotkey-filter-remove-button { color: var(--trans-strong-20); } .setting-hotkey { box-shadow: var(--shadow-code); border-radius: var(--code-radius); padding: 2.5px 4px 1.5px 8px; } .setting-hotkey.mod-empty { color: var(--text-faint); } .setting-delete-hotkey:hover, .setting-hotkey.has-conflict { background-image: var(--warning-gradient); } .has-conflict .setting-delete-hotkey:hover { background-image: none; background-color: var(--trans-strong-10); color: var(--text-error); } /*--> Community Modal <--*/ .mod-community-modal, .modal-sidebar { background-image: var(--background-gradient-community); border-radius: 24px; padding-top: 8px; } .community-modal-empty-state.is-loading::before { top: 12px; } .modal-sidebar:has( + .community-modal-details) { background: none; & .community-modal-controls { display: inline; padding: 6px; } & .community-modal-controls .setting-item:first-child { position: initial; padding-inline: 0; margin-bottom: 4px; } & .community-modal-controls .setting-item.mod-toggle { padding-block: 4px; padding-inline: 2px 8px; } & .community-modal-search-results { padding: 16px; } } .community-modal-controls { background-color: var(--trans-strong-10); backdrop-filter: blur(24px); border-radius: var(--radius-ml); box-shadow: inset 0 0 0 0.75px var(--hr-color), var(--shadow-setting-item); padding: 6px 12px; margin: 6px 14px -40px 14px; min-height: 56px; overflow: visible; display: flex; justify-content: flex-end; flex-direction: row-reverse; column-gap: 0; z-index: 1; } .mod-community-modal .setting-item input { --background-modifier-form-field: transparent; --background-modifier-form-field-hover: transparent; } .mod-community-modal .community-modal-controls .setting-item:first-child { position: absolute; right: 8px; top: 9.5px; padding: 3px; margin: 0; } .mod-community-modal .community-modal-controls button.clickable-icon { padding: 6px; } .community-modal-controls .setting-item.mod-toggle { padding: 12px 16px 12px 0; flex: 0.175; } .community-modal-search-summary { display: none; } .community-modal-search-results-wrapper { border-top: none; padding-top: 32px; } .community-modal-search-results { gap: 8px; padding: 16px 24px; } .community-item { border-radius: var(--radius-ml); border: none; box-shadow: var(--shadow-themes); padding: 8px; } .mod-community-theme .community-item { display: grid; grid-template-columns: 4fr 3fr; background-color: var(--trans-strong-30); } body:not(.is-phone) .community-item.is-selected, body:not(.is-phone) .community-item.is-selected:hover { box-shadow: var(--input-shadow); background-color: var(--background-secondary); background-image: var(--hotkey-gradient); } .community-item-name { display: flex; justify-content: space-between; align-items: center; font-weight: 600; line-height: var(--line-height-normal); grid-column: 1/3; grid-row: 2; padding-inline-start: 2px; } .mod-community-theme .community-item-author { grid-column: 1/2; padding-inline-start: 2px; order: 2; } .mod-community-theme .community-item-downloads { grid-row: 3; grid-column: 2; text-align: end; padding-inline: 0 3px; } .community-item-screenshot { display: grid; margin-block: 0 4px; grid-column: 1/3; grid-row: 1; } .community-item .flair { padding-block-end: 1px; --tag-background: var(--color-accent-5); } /* FROM: Willemstad */ /* By tingmelvin */ /* GPL-3.0 License */ .modal.mod-community-modal .community-item .suggestion-highlight { color: var(--color-highlight); display: contents; } /*--> Prompt Modal <--*/ .prompt { border-radius: var(--radius-xl); background-color: transparent; font-weight: var(--font-normal); margin-block: 15vh; top: 0; } .prompt::before { content: ''; display: block; position: absolute; background-color: var(--trans-strong-20); backdrop-filter: blur(24px); width: 100%; height: 100%; z-index: 0; } .prompt-results, .prompt-input-container, .prompt-instructions { background-color: transparent; border: none; z-index: 1; } /* Prompt Input */ .prompt-input-container { --search-clear-button-size: 16px; padding: 8px 8px 4px 8px; } input.prompt-input, input.prompt-input:active, input.prompt-input:focus, input.prompt-input:hover { padding: 16px; background-color: var(--trans-strong-30); box-shadow: var(--input-shadow); font-size: 18px; border-radius: var(--radius-m); border: none; backdrop-filter: brightness(1.0625); } /* Results */ .prompt-results { padding-top: 4px; } .prompt .suggestion-item { border-radius: var(--radius-sm); color: var(--color-base-100); padding-block: 10px; padding-inline: 14px 10px; } .prompt .suggestion-item .suggestion-hotkey { background-color: var(--trans-strong-20); border-radius: var(--code-radius); box-shadow: var(--shadow-code); color: var(--color-base-80); margin-inline-end: 1px; } .suggestion-item.mod-complex .suggestion-aux { gap: 2px; } .suggestion-prefix { color: var(--icon-color); } /* Instructions */ .prompt-instructions { border-top: 1px solid var(--trans-faint-05); color: var(--text-faint); } /*--> Workspaces Modal <--*/ .list-container.mod-manage-workspaces { padding-inline-start: 8px; } /*--> Popovers <--*/ .popover { animation: var(--anim-duration-fast) popover var(--anim-motion-swing); border-radius: var(--radius-ml); --background-primary: var(--background-secondary); --bases-table-header-background: var(--background-secondary); } /*--> Suggestion Item <--*/ .suggestion-container, .query-toolbar-menu { animation: var(--anim-duration-superfast) popover var(--anim-motion-swing); } .modal-container.mod-dim + .suggestion-container { background-color: var(--trans-strong-10); backdrop-filter: blur(24px); border: 1px solid var(--prompt-border-color); border-radius: var(--radius-ml); } .mod-search-suggestion .suggestion { padding-inline: 16px; } .suggestion-item { color: var(--text-normal); font-weight: var(--font-normal); padding-block: 6px; } .search-suggest-item.mod-group { color: var(--text-normal); font-weight: var(--font-medium); padding-top: 4px; } .search-suggest-item.mod-group:not(:first-child) { margin-top: 12px; padding-top: 12px; padding-inline-end: unset; padding-bottom: unset; padding-inline-start: 8px; margin-inline-end: 4px; } /* =========================== =========================== 5 - Mobile =========================== =========================== */ .is-mobile .mobile-navbar { background-color: transparent; } /* =========================== =========================== 6 - Plugins =========================== =========================== */ /* ============ CORE =========== */ /*--> Obsidian Bases <--*/ .bases-table-container { --bases-table-header-background: var(--background-primary); --interactive-accent: var(--color-base-40); --tag-padding-x: 0.625rem; --tag-size: 0.8rem; --tag-weight: var(--font-medium); } /* fix for missing border radius visual bug */ .mod-root .workspace-leaf-content[data-type="bases"] { border-radius: var(--radius-ml); } /* Bases in sidebar */ .mod-sidedock .workspace-leaf-content[data-type="bases"] .bases-header { margin: 4px 2px; } .mod-sidedock .workspace-leaf-content[data-type="bases"] .query-toolbar .text-icon-button { border-radius: var(--radius-s); } .bases-thead { border-block-end: var(--bases-table-row-border-width) solid var(--bases-table-border-color); box-shadow: none; --bases-table-column-border-width: 0; --bases-table-row-border-width: 2px; } .bases-table-header-label { padding-inline-start: 6px; text-transform: capitalize; } .bases-td { padding-inline: 6px; --divider-color-hover: var(--color-base-30); } .bases-view .bases-thead .bases-td .bases-table-header-name { font-size: var(--font-ui-small); } .metadata-input.mod-date, .bases-td .metadata-input, .bases-cards-line .metadata-input.mod-datetime { box-shadow: none; font-weight: var(--font-normal); letter-spacing: -0.5px; } /* Pills/Tags in Bases */ .bases-td .value-list-container { display: flex; flex-wrap: wrap; gap: 1px 2px; } .bases-td .multi-select-container { gap: 4px; padding: 4px 2px; } .bases-table-container.mod-multiline .bases-td:focus-within { height: var(--bases-table-row-height); } .bases-table-container.mod-multiline .bases-table-cell { align-items: center; } .bases-tbody { background-image: repeating-linear-gradient(180deg, var(--table-row-alt-background), var(--table-row-alt-background) var(--bases-table-row-height), transparent var(--bases-table-row-height), transparent calc(var(--bases-table-row-height) * 2)); } .bases-td:focus-within { background-color: transparent; } /* Obsidian Bases (interface) */ .bases-table-header { --icon-color: var(--color-base-50); } .bases-table-header:hover { --bases-table-header-color: var(--bases-table-header-color-hover); --icon-color: var(--bases-table-header-color-hover); } .bases-table-header-icon { color: var(--icon-color); } /* embedded Bases */ .markdown-source-view .bases-embed .bases-header { --bases-header-padding-end: 36px; } .markdown-source-view .internal-embed.bases-embed .edit-block-button { top: 6px; padding: 5px; } .bases-view[data-view-type="table"] { --bases-embed-border-width: 0; } .bases-embed .bases-cards-item { font-size: var(--bases-cards-text-size); } body.hide-bases-header .markdown-preview-view { .bases-view { margin-top: 1.5rem; } .bases-embed .bases-header { display: none; } } /* popover Bases */ .popover .bases-header { padding-inline: 7px; } .popover .query-toolbar-item > * { border-radius: var(--radius-sm); } /* query toolbar pills */ .query-toolbar-item > * { background-color: var(--background-secondary); border-radius: var(--radius-xl); height: var(--input-height); padding: 1px 12px 0; --input-font-weight: var(--font-medium); --icon-size: var(--icon-s); } .query-toolbar-item.mod-views .mod-aux { display: none; } .query-toolbar .bases-toolbar-result-count > * { background-color: var(--background-modifier-active-hover); padding: 2px 6px; --background-modifier-active-hover: transparent; } .mod-root .query-toolbar-item:not(.mod-views, .bases-toolbar-result-count) > .text-icon-button { padding: 0 8px; } .query-toolbar-item.mod-views > .text-icon-button, .query-toolbar-item:not(.mod-properties, .mod-add-note, .bases-toolbar-result-count) > .text-icon-button.is-active { color: var(--text-normal); background-color: var(--color-accent-5); --icon-color-hover: var(--color-accent); --text-normal: var(--color-accent-1); &:hover { background-color: var(--text-selection); } } /* Obsidian Bases (cards) */ .bases-cards-item { border-radius: var(--radius-s); padding: 8px 2px 4px; font-weight: var(--font-normal); transition: box-shadow var(--anim-super-smooth); } .bases-cards-property.mod-title { > .bases-cards-line { color: var(--color-base-100); font-size: 1.125em; font-weight: var(--font-medium); line-height: 1.375; padding-block: 0; } } .bases-cards-property { > .bases-cards-label { color: var(--bases-cards-label-color); font-size: var(--bases-cards-label-size); } a.tag { font-weight: var(--font-medium); line-height: 1.25rem; } } /* Obsidian Bases (modals) */ .query-toolbar-menu { background-color: var(--background-secondary); border-radius: var(--radius-l); } .query-toolbar-menu .input-row { padding-block-end: 4px; } .query-toolbar-menu + .suggestion-container, .formula-editor .cm-tooltip.cm-tooltip-autocomplete { border-color: var(--trans-faint-40); } .bases-toolbar-menu-form .input-row .input-row-label { font-weight: var(--font-medium); padding-block: 4px 8px; padding-inline-start: 8px; } .query-toolbar-menu .bases-toolbar-menu-container-header { padding-inline: 2px; > * { margin-block: 2px; padding: 6px; } > .back-button { color: var(--text-faint); padding-inline-start: 8px; flex-direction: row-reverse; justify-content: space-between; } [class*="icon"] { color: var(--color-base-80); --icon-stroke: var(--icon-stroke-thick); } } :is(.bases-toolbar-menu-container, .query-toolbar-menu) .bases-toolbar-menu-item { border-radius: var(--radius-sm); margin: 2px; padding-block: 6px; width: auto; } /* Bases menu search input */ .bases-toolbar-menu-container .search-input-container { background-color: var(--background-modifier-form-field); box-shadow: var(--shadow-xs); border-radius: var(--radius-sm); border: none; margin: 2px 2px 8px; padding-block: 0; } .bases-toolbar-menu-container .search-input-container input[type=search], .bases-toolbar-menu-container .search-input-container::before { margin-block-start: 2px; padding-block-start: 2px; } /* Views menu */ .mod-views .bases-toolbar-items .suggestion-group { & > * { padding: 6px 8px; } & .bases-toolbar-menu-item > .clickable-icon { background-color: var(--background-modifier-hover); padding-inline: 12px; } & .bases-toolbar-menu-item:not(.mod-active) > .clickable-icon { --background-modifier-hover: var(--trans-faint-00); } & .bases-toolbar-menu-item > .clickable-icon:hover { --background-modifier-hover: var(--hr-color); } } /* Results limit menu */ .query-toolbar-menu .input-row > .input-row-content { margin: 2px; width: auto; } /* Filter & Sort menus shared variables */ .base-toolbar-sort-item .metadata-property, .bases-query-container .filter-expression { transition: box-shadow var(--anim-super-smooth); --input-height: 30px; --metadata-input-background: var(--color-base-00); --metadata-input-background-hover: var(--color-base-00); --metadata-property-background: var(--background-primary); --metadata-property-background-hover: var(--background-primary); --metadata-property-box-shadow: var(--shadow-xs); --metadata-property-box-shadow-hover: var(--shadow-xs); --metadata-property-box-shadow-focus: var(--shadow-input-active); --metadata-label-background: var(--color-base-00); --dropdown-background: transparent; --dropdown-background-hover: var(--trans-strong-40); --bases-query-input-weight: var(--font-semi-medium); .combobox-button { color: var(--color-base-50); } .combobox-button > .combobox-button-label { color: var(--text-normal); } .combobox-button > .combobox-button-icon { color: var(--icon-color); } .combobox-button > .combobox-button-icon { --icon-size: var(--icon-xs); --icon-stroke: var(--icon-xs-stroke-width); } .combobox-button.filter-property-select > .combobox-button-chevron, .combobox-button.bases-sort-property > .combobox-button-chevron { display: none; } } /* Sort menu */ .base-toolbar-sort-item { background-color: transparent; .bases-sort-property-container { padding: 0; } .bases-sort-property-container + .clickable-icon { padding: 6px; } .combobox-button { color: var(--color-base-50); } .combobox-button.bases-sort-direction { width: 37.5%; font-weight: var(--bases-query-input-weight); --text-normal: var(--text-accent); } } .bases-sort-container .text-icon-button { border-radius: var(--radius-sm); padding-inline-start: 6px; margin: -2px 2px 0; width: calc(100% - 4px); } .bases-sort-container .text-icon-button > .text-button-label { padding-inline-end: 12px; } /* Filter menu */ .mod-filters .query-toolbar-section-header { color: var(--color-base-80); gap: 6px; padding-block: 12px; } .mod-filters .query-toolbar-section-header .flair { color: var(--text-accent); background-color: var(--color-accent-5); border-radius: var(--radius-xs); padding: 4px 6px 2px; } .bases-query-container { background-color: var(--background-primary); box-shadow: var(--shadow-setting-item); border: 1px solid var(--setting-item-border-color); border-radius: var(--radius-sm); margin: 0 10px 10px; .filter-expression { --input-height: 30px; } .filter-rhs-container :is( .metadata-input-text, .metadata-input-longtext) { color: var(--text-accent); font-weight: var(--bases-query-input-weight); } .filter-row-actions { background-color: var(--metadata-input-background); } .combobox-button.filter-operator { font-style: italic; min-width: 11.25%; padding-inline: 6px; --text-normal: var(--color-base-80); } .combobox-button.filter-property-select { padding-inline: 8px 6px; } } .bases-query-container .filter-group { .filter-row .conjunction { font-weight: var(--bases-query-input-weight); color: var(--icon-color); min-width: 3.5rem; } > .filter-group-header > .conjunction.dropdown { order: 2; color: var(--color-base-80); background-color: var(--nav-item-background-active); --background-modifier-hover: var(--trans-faint-25); } > .filter-group-header > .filter-group-header-actions > .clickable-icon { padding: 6px; } > .filter-group-actions { justify-content: center; --icon-size: var(--icon-s); } > .filter-group-actions > .text-icon-button { padding: 6px; } .mod-group > .filter-group { background-color: var(--trans-strong-40); } } .combobox > .search-input-container { margin-block: 6px 4px; } /* Properties menu */ .mod-properties .bases-toolbar-items { flex-direction: column-reverse; .suggestion-group[data-group="actions"] { border-top: none; border-bottom: 1px solid var(--divider-color); padding: 0 0 2px; } .suggestion-group[data-group="actions"] > * { font-weight: var(--font-medium); padding-inline: 8px; width: 124px; } } .mod-properties .bases-toolbar-items .suggestion-group[data-group="properties"] { padding-block: 8px 0; > * { border-radius: var(--radius-xl); padding: 6px 8px; } .bases-toolbar-menu-item .bases-toolbar-menu-item-info { order: -1; overflow: visible; } .bases-toolbar-menu-item > .clickable-icon { background-color: var(--background-modifier-hover); border-radius: var(--radius-xl); padding-inline: 12px; } .bases-toolbar-menu-item.mod-implicit > .clickable-icon:hover { --background-modifier-hover: var(--hr-color); } .bases-toolbar-menu-item.mod-hidden > .clickable-icon { --background-modifier-hover: var(--trans-faint-00); } .bases-toolbar-menu-item-info-icon { contain: content; transition: var(--anim-super-swing); } .bases-toolbar-menu-item-info-icon:is(:hover, :active) { color: var(--text-accent); } } /* Formula editor */ .query-toolbar-menu .suggestion-container { animation: none; } .mod-properties .bases-toolbar-menu-form .input-row .input-row-label { font-weight: inherit; } .mod-properties .bases-toolbar-menu-form .formula-editor-container { box-shadow: var(--shadow-input); &:focus-within { box-shadow: var(--shadow-input-active); } } .mod-properties .bases-toolbar-menu-form .input-row .input-row-status { margin-block: 8px -6px; padding-inline-start: 4px; } .formula-editor .cm-placeholder { padding-inline-start: 2px; } /*--> Web Viewer <--*/ .mod-root .workspace-tab-header-inner-icon { padding-inline-start: 2px; } .view-header-reload-button { --icon-color: var(--text-muted); --icon-stroke: var(--icon-s-stroke-width); } /* Address input */ .webviewer-address-container { padding-inline: 4px; } .mod-root .webviewer-address-container { padding-inline: 12px; } .webviewer-address input { font-weight: var(--font-normal); transition: var(--anim-fast-smooth); --background-modifier-form-field: var(--background-primary); --background-modifier-form-field-hover: var(--background-primary); --input-height: 30px; --shadow-input-active: var(--shadow-input), var(--shadow-s); } .suggestion-container:has(.webviewer-addressbar-suggestion) { max-height: none; } .suggestion-container .webviewer-addressbar-suggestion { padding-block: 12px; } .suggestion-container .webviewer-addressbar-suggestion:last-of-type { margin-block-end: 0; } .webviewer-content { border-top: none; } /* Page content Search */ .webviewer-content .document-search-container { box-shadow: var(--shadow-workspace-multi), var(--shadow-l); top: 52px; right: 16px; } .mod-sidedock .webviewer-content .document-search-container { top: 48px; left: unset; right: 16px; } .mod-right-split .webviewer-content .document-search-container { left: unset; right: unset; margin-right: 24px; } .webviewer-content .error-notice { text-align: center; } /* ========= COMMUNITY ========= */ /*--> Iconic <--*/ .iconic-sidekick { --icon-size: var(--icon-xs); --icon-stroke: var(--icon-stroke-thick); margin-inline: -1px 5px; } /*--> List Callouts <--*/ .markdown-rendered .lc-list-callout { padding-block: var(--list-spacing-default); --list-spacing-default: 0.075em; } /* does nothing if list spacing is default (i.e., when line height is Compact) */ .lc-list-callout > .list-bullet { padding-top: calc(var(--list-spacing) - var(--list-spacing-default)); } .lc-li-wrapper { padding-block: calc(var(--list-spacing) - var(--list-spacing-default)); padding-inline-end: 0.75em; z-index: 0; } .lc-li-wrapper::after { border-radius: var(--radius-s); } .lc-list-callout :is(strong,.cm-strong) { color: rgb(var(--lc-callout-color), 0.8); } body:not(.disable-list-styling) .lc-list-callout > .list-bullet::after { content: ">"; } /* List Callout Default colors */ .lc-list-callout[data-callout="!"] { --lc-callout-color: var(--color-red-rgb) !important; } .lc-list-callout[data-callout="~"] { --lc-callout-color: var(--color-purple-rgb) !important; } .lc-list-callout[data-callout="@"] { --lc-callout-color: var(--color-cyan-rgb) !important; } .lc-list-callout[data-callout="$"] { --lc-callout-color: var(--color-green-rgb) !important; } /* List Callouts Settings */ .vertical-tab-content { .lc-setting { display: flex; flex-direction: column; border-block: none; border-inline: 1px solid transparent; padding: 14px 18px; } .lc-setting:last-child { background-color: var(--setting-item-bg); border: 1px solid var(--setting-item-border-color); border-radius: var(--radius-ml); box-shadow: var(--shadow-setting-item); margin-block: 12px; } .lc-callout-container { display: flex; flex-direction: column; background-color: var(--trans-strong-30); border-radius: var(--radius-m); box-shadow: var(--shadow-input); padding: 6px 16px 6px; margin: 6px 4px 8px; } .lc-input-container { margin-inline: 12px 16px; } .lc-setting .lc-input-container > * { margin-inline-end: 6px; } .lc-input-container input:last-of-type { width: unset; } .lc-input-container input:first-of-type { width: 40px; font-weight: var(--font-medium); text-align: center; } .lc-input-container button:first-of-type { font-weight: var(--font-medium); } .lc-setting .cm-line { width: 100%; } .lc-setting .cm-line .lc-list-bg { padding-block: 0; } .lc-setting .cm-line .lc-list-bg::after { border-radius: var(--radius-s); } .lc-setting:nth-child(4) .cm-line { --lc-callout-color: var(--color-red-rgb) !important; } .lc-setting:nth-child(5) .cm-line { --lc-callout-color: var(--color-purple-rgb) !important; } .lc-setting:nth-child(6) .cm-line { --lc-callout-color: var(--color-cyan-rgb) !important; } .lc-setting:nth-child(7) .cm-line { --lc-callout-color: var(--color-green-rgb) !important; } .lc-setting:last-child .lc-input-right-align button { background-image: var(--hotkey-gradient); color: var(--text-on-accent); } } /*--> Dataview <--*/ .dataview.small-text { color: var(--table-header-color); letter-spacing: 0.5px; } div.dataview-error-box { border: none; cursor: not-allowed; user-select: none; } div.dataview-error-box > p { color: var(--text-faint); font-weight: 400; } div[class*="el-h"] + * .dataview-container .contains-task-list { margin-block: 0 var(--p-spacing); } #calendar-container { padding-inline: 0; --color-dot: var(--color-base-50); --color-arrow: var(--color-base-50); --color-button: var(--text-muted); --color-text-today: var(--color-accent-1); --color-text-weeknum: var(--text-muted); --table-row-alt-background: none; --table-row-alt-background-hover: none; --table-highlight: var(--color-accent-5); --interactive-accent: transparent; } .callout #calendar-container { padding-top: 1rem; --background-primary: transparent; --color-arrow: var(--icon-color); --color-dot: rgb(var(--callout-color)); --color-text-today: rgb(var(--callout-color)); --table-highlight: rgb(var(--callout-color), 0.1); } #calendar-container .calendar { margin-top: 12px; } .mod-root #calendar-container .weekend { background-color: var(--table-row-bg); } #calendar-container th { background-color: var(--background-primary); border-color: var(--trans-faint-40); color: var(--text-muted); font-weight: 500; letter-spacing: normal; text-align: end; text-transform: capitalize; padding: 0 0.375rem 0.25rem 0; user-select: none; } #calendar-container td { border-top: 1px solid var(--table-border-color); padding: 0; width: 12.5%; } #calendar-container .day { color: var(--text-muted); font-weight: 500; font-size: 0.75rem; border-radius: 0; padding: 3px 4px 26px 4px; text-align: end; transition: var(--anim-super-swing); } #calendar-container .day:hover, #calendar-container .day:active { background-color: var(--table-highlight); } #calendar-container .today { font-weight: var(--font-bold); color: var(--color-text-today); } #calendar-container .dot-container { width: 50%; position: absolute; justify-content: start; row-gap: 0.0625em; margin-inline-start: 3px; transform: translateY(-0.8175rem); } .mod-root #calendar-container .dot-container { width: 75%; transform: translateY(-0.875rem); } .mod-root #calendar-container .nav { padding: 0 4px; margin-block: 4px 0; } #calendar-container .month, #calendar-container .year { color: var(--text-normal); font-size: 1.5rem; } #calendar-container .month { font-weight:var(--font-bold); } #calendar-container .year { font-weight:var(--font-normal); } #calendar-container .nav .reset-button { text-transform: capitalize; font-size: 0.875em; font-weight: var(--font-medium); letter-spacing: normal; } #calendar-container .nav .arrow { scale: 0.875; } /* Sidedock calendar */ .mod-sidedock #calendar-container .calendar { margin-top: 8px; } .mod-sidedock #calendar-container { margin-top: -8px; padding-inline: 0 4px; } .mod-sidedock #calendar-container thead tr { height: 28px; } .mod-sidedock #calendar-container th { background-color: transparent; color: var(--text-faint); font-weight: var(--font-black); letter-spacing: 1px; text-transform: uppercase; padding: 0 3px; } .mod-sidedock #calendar-container td { border: none; } .mod-sidedock #calendar-container .day { color: var(--text-muted); font-size: var(--font-ui-smaller); font-weight: var(--font-medium); padding-block-end: 14px; } .mod-sidedock #calendar-container .today { color: var(--color-text-today); font-weight: var(--font-bold); } .mod-sidedock #calendar-container .nav { padding-inline: 3px; margin: 8px 0 4px 8px; } .mod-sidedock #calendar-container :is(.month, .year) { color: var(--text-muted); font-size: 0.8em; } /*--> Image Converter <--*/ .image-convert-modal .modal-warning { background-color: var(--nav-item-background-active); margin-top: 16px; } .image-convert-modal .settings-container > * { border-radius: var(--radius-sm); } .image-convert-modal h2 { margin-top: 0; } .modal-header:has( + .process-single-image-modal) { margin: 2px 8px 0; } .process-single-image-modal { margin-inline: 8px; } .process-single-image-modal .preview-image-container { background-color: var(--background-primary); border: none !important; border-radius: var(--radius-sm); box-shadow: var(--shadow-s); } .process-single-image-modal-buttons .setting-item { padding-bottom: 6px; } /*--> Editing Toolbar <--*/ #editingToolbarModalBar.top { border-radius: var(--radius-sm); margin-inline: 10px; width: calc(100% - 84px); justify-content: space-between; & > * { color: var(--text-normal); margin: 0; padding: 8px !important; } &:not(:hover) > * { filter: opacity(0.5); } & ~ .cm-editor > .cm-scroller { /* same padding as non-absolute positioned toolbars */ padding-top: 32px; } } #editingToolbarModalBar.top.editingToolbarDefaultAesthetic { border-color: transparent; background-color: var(--background-primary); width: calc(100% - 76px); } #editingToolbarModalBar.top.editingToolbarGlassAesthetic { background-color: transparent; background-image: linear-gradient(to bottom, var(--background-primary) 10%, transparent); width: calc(100% - 76px); position: absolute; & ~ .cm-editor > .cm-scroller { /* same padding as non-absolute positioned toolbars */ padding-top: 68px; } } .setting-item.editing-toolbar-fix-button { background-color: var(--background-secondary) !important; padding: 8px 16px 8px 2px !important; } .position-style-info { border-radius: var(--radius-sm); position: relative; } .position-style-info + * > .setting-item-control { flex: 0 !important; } .command-buttons-container { gap: 0 !important; } .command-lists-container { border-radius: var(--radius-xl) !important; } .editing-toolbar-title { --h1-size: var(--h2-size); --h1-weight: var(--h2-weight); } .editing-toolbar-content { --background-secondary: transparent; } .editingToolbarSettingsTabsContainer > .setting-item.editingToolbarCommandItem { padding-inline-end: 40px; --setting-item-bg: var(--trans-strong-30); } .setting-item.editingToolbarCommandsubItem { padding-inline-end: 19px !important; } .editingToolbarSettingsTabsContainer { border-block: none; margin-block: 8px 0; } .editingToolbarCommandsubItem > .setting-item-info { flex: 30% !important; } .editingToolbarCommandsubItem > .setting-item-control { flex: 0 !important; margin-inline-end: 21px; } button.editingToolbarSettingsButton { border-radius: var(--radius-s); } button:not(.mod-cta):not(.mod-warning).editingToolbarSettingsIcon { box-shadow: var(--shadow-input) !important; } /*--> Kanban <--*/ .kanban-plugin__scroll-container { will-change: unset; } .kanban-plugin__lane { border-radius: var(--radius-m); box-shadow: var(--shadow-code); border: none; contain: content; } .kanban-plugin__lane-items { margin-inline: 0; padding-inline: 8px; row-gap: 3px; } .kanban-plugin__item { box-shadow: var(--shadow-xs); border: none; border-radius: var(--radius-sm); } .kanban-plugin__item-button-wrapper { display: flex; justify-content: center; } button.kanban-plugin__new-item-button { width: fit-content; padding-inline: 20px; background-color: var(--background-primary); color: var(--text-normal) !important; font-size: 0.8125rem; } .kanban-plugin__item-button-plus { display: none; } /*--> Omnisearch <--*/ .omnisearch-input-container { padding: 8px; gap: 8px; } .omnisearch-input-container__buttons { display: none; } .omnisearch-input-container__buttons:has(button) { display: unset; margin-inline-end: 8px; z-index: 1; } /*--> Tabs (plugin) <--*/ .tabs-container { margin: 0; padding: 0; } .tabs-container .tabs-contents { padding: 0.75em 1.75em; } .tabs-nav-item { font-weight: var(--font-medium); } /*--> Vertical Tabs <--*/ body:not(.is-mobile) .vertical-tabs .nav-header .clickable-icon { color: var(--color-base-40); &:not(.is-disabled) { color: var(--text-muted); } } body:not(.is-mobile) .vertical-tabs > .obsidian-vertical-tabs-container { padding-block-start: 12px; .tree-item.is-group .tree-item-children { display: flex; flex-direction: column; row-gap: 4px; } .tree-item.is-tab { height: 32px; margin-left: 0; } .tree-item.is-tab > .tree-item-self.tree-item-self.is-clickable { color: var(--color-base-80); font-weight: inherit; margin-block: 0; padding-inline-start: 28px; } .tree-item.is-tab.is-highlighted > .tree-item-self.is-clickable { color: var(--text-normal); font-weight: inherit; background-color: var(--nav-item-background-active); } .tree-item.is-tab-slot .tree-item-self { height: 32px; } } /* other elements */ body:not(.is-mobile) .obsidian-vertical-tabs-container .is-group-slot { margin-top: 4px; --background-modifier-border: var(--trans-faint-25); .tree-item-self { padding-inline-start: 28px; margin-top: 4px; transition: color var(--anim-super-swing); --nav-item-background-hover: var(--color-accent-5); &:hover { color: var(--link-color); } } } /*--> Pomodoro Timer <--*/ /* Timer */ body:not(.is-mobile) .view-content .timer-text { font-variant-numeric: tabular-nums; } /* Button group */ .btn-group { border-radius: var(--radius-sm); padding: 2px; margin-top: 8px !important; } .btn-group:hover { background-color: var(--trans-strong-40); } body:not(.is-mobile) .workspace-leaf-content .view-content .btn-group .control { border-radius: var(--radius-s); padding: 7.5px 8px 2.5px 8px; padding-inline: 8px; transition: var(--anim-super-swing); } .btn-group .control:hover { background-color: var(--nav-item-background-hover); filter: opacity(100%) !important; } /* Page title */ body:not(.is-mobile) .workspace-leaf-content .view-content .pomodoro-tasks-wrapper { border: none; } body:not(.is-mobile) .workspace-leaf-content .pomodoro-tasks-header .pomodoro-tasks-header-title { border-radius: var(--radius-s); padding-block: 9px 8px; font-weight: var(--font-semibold); } body:not(.is-mobile) .workspace-leaf-content .pomodoro-tasks-header .pomodoro-tasks-header-title .pomodoro-tasks-count { margin-bottom: 2px; } body:not(.is-mobile) .workspace-leaf-content .pomodoro-tasks-header .pomodoro-tasks-pin { padding-right: 6px; } /*--> Recent Files <--*/ .recent-files-file .nav-file-tag { margin-inline-start: 6px; } /*--> Style Settings <--*/ .setting-item:has(.style-settings-export) { margin-bottom: 24px; } .setting-item:has(.style-settings-export) > .setting-item-info { contain: unset !important; } .style-settings-collapse-indicator { color: var(--icon-color); } .style-settings-collapse-indicator svg { stroke-width: 4px; } .style-settings-info-text { padding-block: 14px !important; --bold-color: var(--text-muted); } .style-settings-info-text .setting-item-info + .setting-item-control { display: none; } .style-settings-heading { cursor: default; margin-bottom: 0; padding-bottom: 6px; border-bottom: 1px solid var(--background-modifier-border); } .style-settings-heading[data-id="static-heading"] { pointer-events: none; padding: 8px 8px 10px 22px; } .style-settings-heading[data-id="static-heading"] .setting-item-name > span, .style-settings-heading[data-id="static-heading"] .setting-item-control { display: none; } .style-settings-heading:not(.is-collapsed)[data-level="0"] { margin-bottom: 4px; } .style-settings-heading .setting-item-name { color: var(--text-muted); transition: color var(--anim-super-swing); } .style-settings-heading:not(.is-collapsed) .setting-item-name { color: var(--text-normal); } .style-settings-container { padding-bottom: 0; } .style-settings-container .setting-item:last-child { margin-bottom: 12px; } .style-settings-heading[data-level="0"] + .style-settings-container { padding-left: 30px; padding-top: 6px; } .setting-item + div > .setting-item-heading, .setting-item + .setting-item-heading { margin-top: 8px; } /*--> Widgets <--*/ /* Clock */ .Clock_Divider { background: unset; margin-block: 0 var(--p-spacing); } .Clock_Date { font-weight: var(--font-medium); } .Clock__time-container { font-size: 4.25rem; font-weight: var(--font-thin); letter-spacing: -0.0625rem; padding-block-end: 1rem; } .Clock__am-pm { display: none; } /* Quote */ .Quote_Container, .Countdown_Item { background-color: var(--code-background); border: unset; border-radius: var(--radius-m); box-shadow: var(--shadow-code); } /* Countdown */ .Countdown_Container { margin-block: var(--p-spacing); } .Countdown_Item { > h3 { color: var(--color-base-80); font-weight: var(--h1-weight); margin-block-end: 0 !important; } > small { font-weight: var(--font-medium); } } /* =========================== =========================== 7 - CSSclasses =========================== =========================== */ /*--> UTILITY Classes <--*/ /* (utility-override) - Overrides any UTILITY CSSclasses, excluding override classes. */ /* (hide-override) - Overrides any HIDE CSSclasses. */ /* (show-override) - Overrides any SHOW CSSclasses. */ /* (style-override) - Overrides any STYlE CSSclasses. */ /* (override) - Overrides ALL CSSclasses in a particular file. Makes all editor CSSclass pills red. */ .override .metadata-property[data-property-key="cssclasses"] .multi-select-pill { --pill-color: oklch(from var(--text-error) l c h / 0.875); --pill-color-hover: oklch(from var(--text-error) l c h / 0.625); } /*--> HIDE / SHOW Classes <--*/ /* (hide-metadata) - Hides file properties in a particular file. */ .hide-metadata:not(.override, .hide-override) .metadata-container { display: none !important; } /* (hide-title) - Hides the inline title in a particular page. */ .hide-title:not(.override, .hide-override) .inline-title:not([data-level]) { display: none; } /* (show-title) - Shows the inline title in a particular page. */ :not(.node-insert-event) > .show-title:not(.override, .show-override) .inline-title:not([data-level]) { display: block; } /*--> STYLE Classes <--*/ /* (style-justify) - Justifies all text. */ :is(.style-justify,.justified):not(.override, .style-override) :is(p, .cm-line:not(.HyperMD-header)) { text-align: justify; } /* (style-wide) - Sets the file line width to the maximum value, equivalent to disabling readable width. */ .style-wide:not(.override, .style-override) { --file-line-width: 28px 0; } /* (style-top-margin) - Adds additional padding to the top of the file. */ .style-margin-top:not(.override, .style-override).markdown-source-view { padding-top: 28px; } .style-margin-top:not(.override, .style-override).markdown-preview-view { padding-top: 56px; } /* (superheading) - Turns editor H1 into a large Swiss Design heading. */ .superheading:not(.override, .style-override) :is( .markdown-source-view .HyperMD-header-1, .markdown-rendered h1) { border-bottom: 2px solid var(--hr-color); font-feature-settings: 'ss07', 'calt'; font-size: 2.5em; font-weight: var(--font-extralight); letter-spacing: -0.05rem; text-indent: -0.04375em; padding-block: 0.125em !important; --bold-modifier: 250; } /* (supertitle) - Turns editor H1 into a very large Swiss Design heading. */ .supertitle:not(.override, .style-override, .superheading) :is( .markdown-source-view .HyperMD-header-1, .markdown-rendered h1) { font-feature-settings: 'ss07', 'ss08', 'calt'; font-size: 2.75em; font-weight: var(--font-thin); letter-spacing: -0.0625rem; text-indent: -0.05em; border-block-end: none; padding-block: 0.125em 0 !important; --bold-modifier: 300; } .supertitle:not(.override, .style-override, .superheading) :is( .markdown-source-view .HyperMD-header-1, .markdown-rendered h1) > :is(strong, .cm-strong) { letter-spacing: -0.075rem; } /* (simple-title) - Gives inline title the standard heading style. */ .simple-title:not(.override, .style-override, .superheading) .inline-title:not([data-level]) { font-size: var(--h1-size-alt); font-weight: var(--h1-weight-alt); border-bottom: none; padding-bottom: 0; } /* =========================== =========================== 8 - Fonts =========================== =========================== */ /* Inter 4.1 */ @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; /*ridiculously long font URL removed!*/ font-weight: 100 900; font-style: italic; font-display: swap; } /*---------------------------------------*/ MY ADDED STUFF /*---------------------------------------*/ /* ==== Simplify AI brand overrides (keep this at the END) ==== */ /* 1) Accent = forest green from logo (#75AE37 ≈ hsl(89, 52%, 45%)) */ .theme-dark { --accent-h: 89; /* hue: 0–360 */ --accent-s: 52%; /* saturation */ --accent-l: 45%; /* lightness */ } .theme-light { --accent-h: 89; --accent-s: 52%; --accent-l: 40%; /* a bit darker so it reads on light bg */ } /* 2) Belt-and-suspenders: force link color (in case the theme overrides) */ :root { --link-color: hsl(89 52% 45%); --link-color-hover: hsl(89 52% 55%); } .markdown-rendered a, a.internal-link, a.external-link { color: var(--link-color) !important; } .markdown-rendered a:hover, a.internal-link:hover, a.external-link:hover { color: var(--link-color-hover) !important; } /* ==== Simplify AI — KISS font + link overrides (keep at END) ==== */ /* 1) System fonts (fast, no downloads) */ :root{ --font-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-interface: var(--font-text); --font-monospace: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* Apply them regardless of what the theme sets */ body, .markdown-rendered, .site-body { font-family: var(--font-text) !important; } code, pre { font-family: var(--font-monospace) !important; } /* 2) Your brand link colors (green) */ a:link, a:visited { color: #74ad38 !important; } a:hover, a:focus { color: #2e7d32 !important; text-decoration: underline; } /* ========= Mobile site logo ========= */ /* KISS: bigger header logo (scales by screen size) */ header img, .site-header img { max-height: clamp(64px, 16vw, 112px) !important; height: auto; vertical-align: middle; }