/* obsdn dark rmx - v202008071640 */ body { /* Accent HSL values */ --accent-s: 80%; --accent-l: 64%; } /*----------workspace----------*/ /* ====== background ===== */ body { --background-underlying-light: var(--background-tertiary); --background-underlying-dark: var(--background-tertiary); --background-underlying: var(--background-tertiary); --background-mod-left-split-light: var(--background-secondary); --background-mod-left-split: var(--background-secondary); --background-mod-right-split-light: var(--background-secondary); --background-mod-right-split-dark: (--background-secondary); --background-mod-right-split: var(--background-secondary); --background-mod-root-split-light: var(--background-primary); --background-mod-root-split-dark: var(--background-primary); --background-mod-root-split: var(--background-primary); --background-mod-root-CSS-light: rgba(255, 255, 255, 0.5); --background-mod-root-CSS-dark: rgba(0, 0, 0, 0.5); --background-mod-root-CSS-blend-mode-light: normal; --background-mod-root-CSS-blend-mode-dark: normal; --background-mod-root-CSS-backdrop-filter-light: blur(32px); --background-mod-root-CSS-backdrop-filter-dark: blur(32px); --background-mod-left-CSS-light: rgba(255, 255, 255, 0.5); --background-mod-left-CSS-dark: rgba(0, 0, 0, 0.5); --background-mod-left-CSS-blend-mode-light: normal; --background-mod-left-CSS-blend-mode-dark: normal; --background-mod-left-CSS-backdrop-filter-light: blur(32px); --background-mod-left-CSS-backdrop-filter-dark: blur(32px); --background-mod-right-CSS-light: rgba(255, 255, 255, 0.5); --background-mod-right-CSS-dark: rgba(0, 0, 0, 0.5); --background-mod-right-CSS-blend-mode-light: normal; --background-mod-right-CSS-blend-mode-dark: normal; --background-mod-right-CSS-backdrop-filter-light: blur(32px); --background-mod-right-CSS-backdrop-filter-dark: blur(32px); --background-underlying-CSS-light: radial-gradient(100% 100% at 13% 50%, #5a6ded 0%, #e0daf7 100%), linear-gradient(6deg, rgb(235, 242, 252) 0%, rgb(90, 109, 237) 5%, rgb(166, 126, 241) 7%, rgb(224, 218, 247) 11%, rgb(90, 109, 237) 16%), radial-gradient(100% 100% at 60% 71%, rgb(224, 218, 247) 0%, rgb(219, 244, 255) 100%), linear-gradient(97deg, rgb(90, 109, 237) 0%, rgb(90, 109, 237) 23%, rgb(90, 109, 237) 53%), linear-gradient(351deg, rgb(235, 242, 252) 0%, rgb(219, 244, 255) 1%, rgb(235, 242, 252) 6%, rgb(224, 218, 247) 10%, rgb(166, 126, 241) 13%, rgb(235, 242, 252) 29%), radial-gradient(100% 100% at 10% 32%, rgb(90, 109, 237) 0%, rgb(219, 244, 255) 100%), radial-gradient(100% 100% at 35% 63%, rgb(224, 218, 247) 0%, rgb(224, 218, 247) 100%); --background-underlying-CSS-dark: linear-gradient(317deg, #7037cd 0%, #1d0c20 19%, #651f71 19%, #651f71 33%), radial-gradient(100% 100% at 90% 9%, rgb(29, 12, 32) 0%, rgb(29, 12, 32) 100%), linear-gradient(109deg, rgb(104, 178, 248) 0%, rgb(80, 110, 229) 15%, rgb(112, 55, 205) 34%, rgb(104, 178, 248) 54%, rgb(104, 178, 248) 65%), radial-gradient(100% 100% at 20% 45%, rgb(80, 110, 229) 0%, rgb(101, 31, 113) 100%), radial-gradient(100% 100% at 90% 27%, rgb(80, 110, 229) 0%, rgb(101, 31, 113) 100%), linear-gradient(339deg, rgb(101, 31, 113) 0%, rgb(104, 178, 248) 12%, rgb(101, 31, 113) 14%, rgb(80, 110, 229) 19%, rgb(101, 31, 113) 20%, rgb(29, 12, 32) 30%); --background-underlying-CSS-blend-mode-light: overlay, color-burn; --background-underlying-CSS-blend-mode-dark: soft-light, luminosity, hue, luminosity, hard-light; } /* Define variables for shadow and color */ :root { --shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.5); --shadow-hover: inset 3px 3px 3px rgba(0, 0, 0, 0.2), inset -3px -3px 3px rgba(255, 255, 255, 0.7); --shadow-active: inset 3px 3px 3px rgba(0, 0, 0, 0.5), inset -3px -3px 3px rgba(255, 255, 255, 0.2); --shadow-selected: inset 3px 3px 3px rgba(0, 0, 0, 0.3); --shadow-scrollbar: inset 4px 4px 8px rgba(0, 0, 0, 0.15), inset -4px -4px 8px rgba(255, 255, 255, 0.7); --background: #f0f0f0; } /* ======= LIGHT ==============*/ .theme-light { color-scheme: light; --text-normal: hsl(var(--accent-h), 12%, 12%); --text-muted: hsl(var(--accent-h), 9%, 36%); --text-faint: hsl(var(--accent-h), 6%, 64%); --highlight-mix-blend-mode: darken; --mono-rgb-0: 255, 255, 255; --mono-rgb-100: 0, 0, 0; --color-red-rgb: 254, 121, 104; --color-red: rgb(var(--color-red-rgb)); --color-green-rgb: 120, 186, 126; --color-green: rgb(var(--color-green-rgb)); --color-orange-rgb: 243, 156, 18; --color-orange: rgb(var(--color-orange-rgb)); --color-yellow-rgb: 229, 199, 0; --color-yellow: rgb(var(--color-yellow-rgb)); --color-cyan-rgb: 54, 215, 183; --color-cyan: rgb(var(--color-cyan-rgb)); --color-blue-rgb: 3, 138, 255; --color-blue: rgb(var(--color-blue-rgb)); --color-purple-rgb: 148, 85, 236; --color-purple: rgb(var(--color-purple-rgb)); --color-pink-rgb: 242, 63, 165; --color-pink: rgb(var(--color-pink-rgb)); --color-base-00: #ffffff; --color-base-05: #fcfcfc; --color-base-10: #fafafa; --color-base-15: #f7f7f7; --color-base-20: #F0F0F0; --color-base-25: #e3e3e3; --color-base-30: #e0e0e0; --color-base-35: #d4d4d4; --color-base-40: #bdbdbd; --color-base-50: #ababab; --color-base-60: #707070; --color-base-70: #5a5a5a; --color-base-100: #222222; --accent-h: var(--accent-light-h); --accent-s: var(--accent-light-s); --accent-l: var(--accent-light-l); --accent-light-h: 232; --accent-light-s: 80%; --accent-light-l: 64%; --color-accent-hsl: var(--color-accent-hsl-light); --color-accent: var(--color-accent-light); --color-accent-1: var(--color-accent-1-light); --color-accent-2: var(--color-accent-2-light); --color-accent-3: var(--color-accent-3-light); --color-accent-hsl-light: var(--accent-h), var(--accent-s), var(--accent-l); --color-accent-light: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --color-accent-1-light: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%)); --color-accent-2-light: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%)); --color-accent-3-light: hsla(var(--accent-h), calc(0.4*var(--accent-s)), calc(var(--accent-l))); --background-modifier-border: hsla(var(--accent-h), calc(0.4*var(--accent-s)), calc(var(--accent-l)), 0.2); --background-modifier-border-focus: hsla(var(--accent-h), calc(0.4*var(--accent-s)), calc(var(--accent-l)), 0.3); --background-primary: var(--color-base-00); --background-primary-alt: var(--color-base-10); --background-secondary: hsl(var(--accent-h), calc((var(--accent-s) - 12%) / 6), calc(100% - (100% - var(--accent-l)) / 16)); --background-secondary-alt: var(--color-base-05); --background-tertiary: hsl(calc(var(--accent-h) - 18), calc(var(--accent-s) - 4%), calc(100% - (100% - var(--accent-l)) / 8)); --background-modifier-hover: hsla(var(--accent-h), 6%, 64%, 0.15); --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); --background-modifier-cover: rgba(220, 220, 220, 0.4); --background-modifier-form-field: transparent; --search-result-background: transparent; --text-highlight-bg: rgba(255, 208, 0, 0.4); --text-highlight-bg-active: rgba(255, 128, 0, 0.4); --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, .042), 0px 15px 30px rgba(0, 0, 0, .07); --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 30px 90px rgba(0, 0, 0, 0.2); --color: 0, 0%; /*两个值一样*/ --l: 100%; /*最小值50*/ --color-primary-lightest: hsl(var(--color), var(--l)); --color-primary-lighter: hsl(var(--color), calc(var(--l) - 3%)); --color-primary-light: hsl(var(--color), calc(var(--l) - 7.5%)); --color-primary: hsl(var(--color), calc(var(--l) - 10%)); --color-primary-dark: hsl(var(--color), calc(var(--l) - 15%)); --color-primary-darkest: hsl(var(--color), calc(var(--l) - 25%)); --color-text-dark: hsl(var(--color), calc(var(--l) - 40%)); --color-text-darkest: hsl(var(--color), calc(var(--l) - 50%)); --list-radius-small: 3px; --list-radius-medium: 6px; --list-radius-large: 12px; --button-radius-small: 3px; --button-radius-medium: 6px; --button-radius-medium-large: 8px; --button-radius-large: 12px; --button-radius-circle: 36px; --image-radius: 6px; /* var(--background-modifier-hover) is used to color in buttons when hovered */ /* var(--interactive-normal) is used as a button color on top of white backgrounds */ /* consider changing 'interactive-normal' so that it accents the color it's on, instead of just being a darker white*/ --icon-color-hover: var(--text-muted); --button-hover-1: var(--text-muted); --button-color-1: #f0f0f0; --background-primary: var(--color-primary-lightest); --background-modifier-border: #EAEAEA; --background-secondary: #F6F6F6; --background-secondary-alt: var(--color-primary-lightest); --background-modifier-box-shadow: rgba(0, 0, 0, 0.85); --text-normal: #000000; --text-muted: #232323; --text-error: #ff3333; --text-error-hover: #990000; --text-matched: #7dff8f; --interactive-accent-rgb: 32, 171, 233; --interactive-accent-hover: var(--interactive-accent); --accent-strong: #ec0d0d; --text-title-h1: #000000; --text-title-h2: #000000; --text-title-h3: #000000; --text-title-h4: #000000; --text-title-h5: #000000; --text-title-h6: #000000; --toggle-thumb-color: var(--toggle-thumb-color-light); --toggle-thumb-enabled-color: var(--toggle-thumb-enabled-color-light); --toggle-thumb-color-light: white; --toggle-thumb-enabled-color-light: white; --toggle-thumb-shadow: var(--toggle-thumb-shadow-light); --toggle-thumb-enabled-shadow: var(--toggle-thumb-enabled-shadow-light); --toggle-thumb-shadow-light: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px rgba(255, 255, 255, 0.4), inset 0px -4px 4px rgba(0, 0, 0, 0.1); --toggle-thumb-enabled-shadow-light: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px rgba(255, 255, 255, 0.4), inset 0px -4px 4px hsla(var(--interactive-accent-hsl), 0.3); --toggle-track-enabled-color: var(--toggle-track-enabled-color-light); --toggle-track-color-light: var(--background-modifier-border-hover); --toggle-track-enabled-color-light: var(--interactive-accent); --toggle-track-hovered-shadow: var(--toggle-track-hovered-shadow-light); --toggle-track-shadow-light: inset 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 1px 0px var(--background-primary), 0px 2px 4px rgba(0, 0, 0, 0.04); --toggle-track-hovered-shadow-light: inset 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 1px 0px var(--background-primary), 0px 2px 4px rgba(0, 0, 0, 0.04); --interactive-normal: var(--color-base-05); --interactive-hover: var(--color-base-15); --input-radius: var(--input-radius-light); --input-shadow: var(--input-shadow-light); --input-shadow-hover: var(--input-shadow-hover-light); --input-radius-light: 5px; /* defines the radius for search boxes */ --input-shadow-light: 0px 4px 8px -4px rgba(0, 0, 0, 0.16), inset 0px -1px 0px rgba(0, 0, 0, 0.04), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 0.75px rgba(255, 255, 255, 0.24), inset 0px -3px 0.75px rgba(0, 0, 0, 0.04); --input-shadow: var(--shadow); --input-shadow-hover-light: var(--shadow-hover); --toggle-track-color: var(--toggle-track-color-light); --toggle-track-shadow: var(--toggle-track-shadow-light); } /* Defines Side dock ribbon properties */ .side-dock-ribbon-action { padding-bottom: 5px; margin-top: 10px; background-color: var(--button-color-1); border-radius: 8px; box-shadow: var(--shadow); } .side-dock-ribbon-action:hover { box-shadow: var(--shadow-hover); } .side-dock-ribbon-action:active { box-shadow: var(--shadow-active); } .side-dock-settings, .side-dock-actions { gap: var(--size-2-2); } .workspace-ribbon, .workspace-ribbon.mod-left.is-collapsed { border-right: none; background-color: transparent; } .workspace-ribbon { background-color: var(--background); } /* Defines document info ribbon properties */ .view-header { height: 50px; } .view-header-title { background-color: var(--interactive-normal); border: none; margin-left: 1px; padding: 5px 10px 5px; border-radius: var(--button-radius-medium); box-shadow: var(--shadow); } .view-header-title:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .view-header-nav-buttons button.clickable-icon { background-color: var(--interactive-normal); color: var(--text-muted); border-radius: var(--button-radius-medium); box-shadow: var(--shadow); margin-left: 5px; margin-right: 5px; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; } .view-header-nav-buttons button.clickable-icon:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .view-header-nav-buttons button.clickable-icon:active { box-shadow: var(--shadow-active); } .view-action { background-color: var(--interactive-normal); border-radius: var(--button-radius-medium); margin: 0 8px; cursor: pointer; color: var(--text-muted); position: relative; box-shadow: var(--shadow); margin-left: 5px; margin-right: 5px; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; } .view-action:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .view-action:active { box-shadow: var(--shadow-active); } /* Defines tab bar properties */ .workspace-tab-header-inner { border-radius: var(--button-radius-circle); margin: 0px 5px; /* This property adds margin to the left and right sides */ box-shadow: var(--shadow); } .workspace-tab-header-container { display: flex; height: 40px; padding-top: 0px; margin-bottom: 0px; } .workspace-tabs .workspace-tab-header.is-active .workspace-tab-header-inner { background: var(--background-primary); box-shadow: var(--shadow); border-radius: var(--button-radius-medium); } .workspace-tab-header-inner:hover { box-shadow: var(--shadow-hover); } .workspace-tab-header-inner:active { box-shadow: var(--shadow-active); } .workspace-tab-header-tab-list span.clickable-icon.has-active-menu { background-color: white; } .workspace-tab-header-tab-list span.clickable-icon.has-active-menu:hover { background-color: white; box-shadow: var(--shadow); } .workspace-tab-header-tab-list span.clickable-icon, .sidebar-toggle-button.mod-right div.clickable-icon, .sidebar-toggle-button.mod-left div.clickable-icon { background-color: var(--background-tertiary); box-shadow: var(--shadow); border-radius: var(--button-radius-medium); height: 30pxz; } .workspace-tab-header-tab-list span.clickable-icon:hover, .sidebar-toggle-button.mod-right div.clickable-icon:hover, .sidebar-toggle-button.mod-left div.clickable-icon:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .workspace-tab-header-tab-list span.clickable-icon:active, .sidebar-toggle-button.mod-right div.clickable-icon:active, .sidebar-toggle-button.mod-left div.clickable-icon:active { box-shadow: var(--shadow-active); } .sidebar-toggle-button.mod-right div.clickable-icon, .workspace-tab-header-tab-list span.clickable-icon { margin-right: 10px; } /* Adds Neumorphic styling to scrollbars */ ::-webkit-scrollbar-thumb { color: var(--color-primary-lightest); border-radius: 10px; box-shadow: var(--shadow-scrollbar); } ::-webkit-scrollbar-thumb:active { border-radius: 10px; box-shadow: var(--shadow-hover); } /* Adds Neumorphic styling to search results*/ .side-dock-collapsible-section-header { font-size: 12px; padding: 3px 14px 0 34px; user-select: none; cursor: pointer; position: relative; } .search-result-file-match, .search-result-file-matches { line-height: 20px; padding: 2px 5px; } .search-result-file-match:not(:first-child) { margin-top: 0px; } .search-result-file-matched-text { border-radius: var(--button-radius-small); box-shadow: var(--shadow); margin-left: 1px; margin-right: 2px; padding-right: 2.5px; padding-left: 2.5px; padding-top: 2.5px; padding-bottom: 2.5px; } .search-result-file-matched-text:hover { box-shadow: var(--shadow-hover); } .search-result-file-matched-text:active { box-shadow: var(--shadow-active); } .search-result-file-match, .search-result-file-matches { border-radius: var(--list-radius-medium); background-color: var(--background-primary); } .search-result-file-matches { padding-right: 4px; padding-left: 4px; padding-top: 4px; padding-bottom: 4px; margin-top: 8px; margin-bottom: 8px; } .search-result-file-match:hover { background-color: var(--background-tertiary); } /* Adds Neumorphic styling to the file in search results*/ .tree-item-self.search-result-file-title.is-clickable { border-radius: var(--list-radius-medium); } /* Adds Neumorphic styling to the "Search Settings" button */ .clickable-icon[aria-label="Search settings"] { border-radius: var(--button-radius-medium); box-shadow: var(--shadow); } .clickable-icon[aria-label="Search settings"]:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .clickable-icon[aria-label="Search settings"]:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to the "Clear search" button */ .search-input-clear-button { height: 30px; width: 30px; margin-right: 5px; border-radius: var(--button-radius-medium); box-shadow: var(--shadow); } .search-input-clear-button:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .search-input-clear-button:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to the "Match case" button */ .input-right-decorator.clickable-icon { height: 30px; width: 30px; margin-right: 10px; border-radius: var(--button-radius-medium); box-shadow: var(--shadow); } .input-right-decorator.clickable-icon:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .input-right-decorator.clickable-icon:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to the Command Palette, File search, and Template Palette */ .suggestion-item.is-selected, .suggestion-item.mod-complex.is-selected { border-radius: var(--button-radius-medium); box-shadow: var(--shadow-hover); } .suggestion-item.is-selected:active, .suggestion-item.mod-complex.is-selected:active { box-shadow: var(--shadow-active); } .suggestion-item.mod-complex kbd.suggestion-hotkey { border-radius: var(--button-radius-small); background-color: var(--background-secondary); } .suggestion-item.mod-complex.is-selected kbd.suggestion-hotkey { border-radius: var(--button-radius-small); background-color: var(--background-primary); box-shadow: var(--shadow); } /* Adds Neumorphic styling to the right click menu */ .menu-item:not(.is-disabled):not(.is-label) { margin-bottom: 1.5px; } .menu-item.selected:not(.is-disabled):not(.is-label) { box-shadow: var(--shadow-hover); border-radius: var(--button-radius-medium); background-color: var(--background-modifier-hover); } .menu-item.selected:not(.is-disabled):not(.is-label):active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to Obsidian nav buttons (The buttons above the file lists) */ .nav-action-button { background-color: var(--button-color-1); border-radius: var(--button-radius-medium); box-shadow: var(--shadow); padding: 7px; margin: 5px; } .nav-action-button:hover { box-shadow: var(--shadow-hover); } .nav-action-button:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to the Left Nav Folder */ .nav-file-title:hover, .nav-folder-title:hover { border-radius: var(--list-radius-medium); box-shadow: var(--shadow-hover); } .nav-folder-title:active, .nav-file-title:active { box-shadow: var(--shadow-active); } .nav-file-title.is-active { border-radius: var(--list-radius-medium); background-color: var(--color-primary-light); box-shadow: var(--shadow); } /* Adds Neumorphic styling to the Right Nav Folder */ .tag-container.node-insert-event div div.tree-item { border-radius: var(--list-radius-medium); } .tag-container.node-insert-event div div.tree-item:hover { box-shadow: var(--shadow-hover); } .tag-container.node-insert-event div div.tree-item:active { box-shadow: var(--shadow-active); } /* Forgor what this stuff does. Probably don't remove it */ .vertical-tab-header-group-title { color: var(--interactive-accent); } .button.clickable-icon { margin-bottom: 5px; box-shadow: var(--shadow); border-radius: 6px; margin-top: 5px; } /* Adds Neumorphic styling to the button to close windows*/ .modal-close-button { background-color: var(--interactive-normal); margin-top: 5px; box-shadow: var(--shadow); border-radius: var(--button-radius-medium); } .modal-close-button:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .modal-close-button:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to tags */ .tag { background-color: var(--text-accent); border: none; padding: 0px 9px; /* Adjust padding to be equal on both sides */ text-align: center; text-decoration: none !important; display: inline-block; margin: 5px 4px; cursor: pointer; border-radius: 2px; box-shadow: var(--shadow); } .tag:hover { box-shadow: var(--shadow-hover); } .tag:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to internal links */ .internal-link { text-decoration: none !important; background-color: var(--color-primary-lighter); margin-right: 2px; margin-left: 0px; padding-left: 3px; padding-right: 3px; border-radius: var(--button-radius-medium); display: inline-block; box-shadow: var(--shadow); } .internal-link:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .internal-link:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to external links */ .external-link { text-decoration: none !important; background-color: var(--color-primary-lighter); margin-right: 2px; margin-left: 1px; padding-right: 17px; padding-left: 5px; border-radius: var(--button-radius-medium); box-shadow: var(--shadow); display: inline-flex; /* use inline-flex to prevent line breaks */ align-items: center; /* center content vertically */ } .external-link:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .external-link:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to the "Copy Code" button */ .markdown-rendered button.copy-code-button { border-radius: var(--button-radius-medium); box-shadow: var(--shadow); } .markdown-rendered button.copy-code-button:hover { box-shadow: var(--shadow-hover); } .markdown-rendered button.copy-code-button:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to the "Copy Code" button in Preview mode */ .markdown-source-view.mod-cm6 .code-block-flair { box-shadow: var(--shadow); border-radius: var(--button-radius-medium); height: 35px; width: 35px; display: inline-flex; align-items: center; justify-content: center; } .markdown-source-view.mod-cm6 .code-block-flair:hover { box-shadow: var(--shadow-hover); } .markdown-source-view.mod-cm6 .code-block-flair:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to checkboxes */ /* Note that this is backwards from the usual pattern of "In is selected" and "Out is selectable". This is intentional */ .task-list-item-checkbox { box-shadow: var(--shadow-hover); border-bottom-width: 10px; } .task-list-item-checkbox:checked { box-shadow: var(--shadow); } /* Rounds corners on images */ .markdown-preview-view.img, img { border-radius: var(--image-radius); } /* Text related settings */ .markdown-preview-view code, .cm-s-obsidian .HyperMD-codeblock, .cm-s-obsidian span.cm-inline-code { color: var(--color-monospace); -webkit-font-smoothing: auto; font-size: 0.87em; } p { display: block; padding-top: 0px; padding-bottom: 0px; } /* Defines properties for code blocks */ .CodeMirror-lines, .CodeMirror-selected, .markdown-preview-section { max-width: 800px; /* Sets max code block width */ margin: auto; /* Centers the page*/ } .markdown-preview-view pre { line-height: 1; /* Makes code blocks more compact*/ } p { margin-block-start: 0.8em; margin-block-end: 0.85em; } .theme-light code, .theme-light pre { background-color: #F6F6F6; /* Makes code blocks a bit darker*/ border: 1px solid #EAEAEA; /* Adds a darker border to code blocks*/ white-space: pre; /* Makes code blocks scrollable */ } code, pre { word-wrap: break-word; white-space: pre; /* Makes code blocks scrollable */ overflow-x: auto; line-height: 1.6; /* 1-1.7 Sets line height for code blocks. 1.7-in Sets line height for code blocks and everything else*/ } /* Who knows what this does honestly */ .markdown-source-view { font-family: var(--font-monospace); } /* Removes strikethrough from checkboxes */ .markdown-preview-view ul > li.task-list-item.is-checked { text-decoration: none; color: var(--text-normal); } .markdown-preview-view ol > li.task-list-item.is-checked { text-decoration: none; color: var(--text-normal); } /* Adds a bar underneath content headers */ /* Note that var(--background-tertiary) needs to be defined in the theme) */ h1 { position: relative; padding-bottom: 1rem; /* Adjust the space between the header text and the bar */ } h1::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; /* Adjust the width of the bar */ height: 2px; /* Adjust the thickness of the bar */ background-color: var(--background-tertiary); /* Adjust the color of the bar */ } h2 { position: relative; padding-bottom: 1rem; /* Adjust the space between the header text and the bar */ } h2::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; /* Adjust the width of the bar */ height: 2px; /* Adjust the thickness of the bar */ background-color: var(--background-tertiary); /* Adjust the color of the bar */ } /* Stops ugly scroll bars from being shown in the left settings panel */ .vertical-tab-header::-webkit-scrollbar { display: none; } /* Adds Neumorphic styling to vertical tabs */ .vertical-tab-nav-item { box-shadow: var(--shadow); border-radius: var(--list-radius-medium); margin-top: 5px; } .vertical-tab-nav-item:hover { box-shadow: var(--shadow-hover); } .vertical-tab-nav-item:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to switches*/ .checkbox-container.is-enabled { box-shadow: var(--shadow); } .checkbox-container { box-shadow: var(--shadow-hover); } .checkbox-container.is-enabled:hover { box-shadow: var(--shadow-active); } .checkbox-container:hover { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to the circles inside of the switches*/ .checkbox-container:after { box-shadow: var(--toggle-thumb-shadow); } .checkbox-container.is-enabled:after { box-shadow: var(--toggle-thumb-enabled-shadow); } /* Adds Neumorphic styling to dropdown boxes*/ .dropdown { margin-bottom: 5px; box-shadow: var(--shadow); border-radius: var(--button-radius-medium); margin-top: 5px; } .dropdown:hover { box-shadow: var(--shadow-hover); } .dropdown:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to some buttons in settings*/ .clickable-icon.setting-editor-extra-setting-button { background-color: var(--interactive-normal); border-radius: var(--button-radius-medium); margin-right: 3px; box-shadow: var(--shadow); } .clickable-icon.setting-editor-extra-setting-button:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .clickable-icon.setting-editor-extra-setting-button:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to sliders*/ input[type='range'] { background-color: var(--color-primary); } input[type='range']::-webkit-slider-thumb { box-shadow: var(--toggle-thumb-shadow); transition: none; } input[type=range]::-webkit-slider-thumb:is(:hover, :active) { box-shadow: var(--toggle-thumb-shadow); outline-offset: 2px; outline: 2px solid var(--background-modifier-border-hover); transition: none; border-color: var(--slider-thumb-border-color); } body:not(.is-mobile) input[type=range]:is(:focus, :focus-visible)::-webkit-slider-thumb { box-shadow: var(--toggle-thumb-shadow); outline-offset: 2px; outline: 2px solid var(--background-modifier-border-focus); transition: none; border-color: var(--slider-thumb-border-color); } /* Adds Neumorphic styling to more settings boxes*/ .mod-cta { border-radius: var(--button-radius-medium); } .mod-cta:hover { box-shadow: var(--shadow-hover); } .mod-cta:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to hotkey page elements*/ .clickable-icon.setting-add-hotkey-button { background-color: var(--interactive-normal); margin-right: 12px; box-shadow: var(--shadow); border-radius: var(--button-radius-medium); } .clickable-icon.setting-add-hotkey-button:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .clickable-icon.setting-add-hotkey-button:active { box-shadow: var(--shadow-active); } .clickable-icon.setting-restore-hotkey-button { background-color: var(--interactive-normal); margin-right: 5px; box-shadow: var(--shadow); border-radius: var(--button-radius-medium); } .clickable-icon.setting-restore-hotkey-button:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .clickable-icon.setting-restore-hotkey-button:active { box-shadow: var(--shadow-active); } .setting-hotkey { height: 25px; margin-right: 5px; border-radius: var(--button-radius-medium); } .canvas-control-item { box-shadow: var(--shadow); } .canvas-control-item:hover { box-shadow: var(--shadow-hover); } .canvas-control-item:active { box-shadow: var(--shadow-active); } /* I tried so hard to find a way to line up these buttons with the ones above it but I gotta do work too. Fix this sometime later */ /* Also make it so that the button shadows aren't being cut off */ .clickable-icon.graph-controls-button { background-color: var(--interactive-normal); border-radius: var(--button-radius-medium); cursor: pointer; color: var(--text-muted); border-right: 20px; width: 25px; height: 25px; box-shadow: var(--shadow); } .clickable-icon.graph-controls-button:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .clickable-icon.graph-controls-button:active { box-shadow: var(--shadow-active); } .graph-controls.is-close { right: 0px; padding: 16px; } .graph-controls-button.mod-reset { margin-right: 5px; } /* Adds Neumorphic styling to community item boxes */ .community-item { border-radius: var(--button-radius-large); box-shadow: var(--shadow); } .community-item:hover { box-shadow: var(--shadow-hover); } .community-item.is-selected { box-shadow: var(--shadow-selected); } .community-item:hover { box-shadow: var(--shadow-hover); } .suggestion-highlight { color: black; } /* Adds Neumorphic styling to author links in community item descriptions */ .community-modal-info-author a:link, .community-modal-info-repo a:link { text-decoration: none !important; background-color: var(--color-primary-lighter); margin-right: 2px; margin-left: 0px; padding-right: 5px; padding-left: 4px; border-radius: 6px; display: inline-block; box-shadow: var(--shadow); } .community-modal-info-author a:link:hover, .community-modal-info-repo a:link:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .community-modal-info-author a:link:active, .community-modal-info-repo a:link:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to the "Change sort order" button*/ .mod-community-modal .modal-sidebar button.clickable-icon { border-radius: var(--button-radius-medium); box-shadow: var(--shadow); } .mod-community-modal .modal-sidebar button.clickable-icon:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .mod-community-modal .modal-sidebar button.clickable-icon:active { box-shadow: var(--shadow-active); } /* Adds Neumorphic styling to the back button*/ .modal-setting-nav-bar div.clickable-icon { background-color: var(--interactive-normal); border-radius: var(--button-radius-medium); box-shadow: var(--shadow); } .modal-setting-nav-bar div.clickable-icon:hover { background-color: var(--background-modifier-hover); box-shadow: var(--shadow-hover); } .modal-setting-nav-bar div.clickable-icon:active { box-shadow: var(--shadow-active); } body:not(.is-mobile):not(.card-layout-open-light).theme-light .workspace-split.mod-right-split .workspace-tabs.mod-top .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-light).theme-light .workspace-split.mod-right-split .workspace-tabs:not(.mod-top) { background: var(--background-mod-right-split) !important; } body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf, body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf-content, body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-header:not(.animate), body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-content:not(.vignette-radial, .vignette-linear, .animate), .sidebar-toggle-button, .mod-left-split .workspace-tab-header.has-active-menu, .mod-right-split .workspace-tab-header.has-active-menu, body:not(.is-mobile) .workspace-tab-header-container, .workspace > .workspace-split, .workspace-tabs.mod-top { background-color: transparent !important; } body:not(.is-mobile) .workspace, .workspace-ribbon.mod-left:before, body:not(.is-translucent):not(.is-mobile) .sidebar-toggle-button.mod-left { background-color: transparent; } .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active { background-color: transparent !important; box-shadow: none; overflow: visible; } body:not(.is-mobile) .view-header-title-container:not(.mod-at-start):before, body:not(.is-mobile) .view-header-title-container:not(.mod-at-end):after { background: transparent; } /* background - underlying */ body:not(.is-mobile) .app-container { background-color: var(--background-underlying); } body.background-underlying-Color-light.theme-light { --background-underlying: var(--background-underlying-light) !important; } body.background-underlying-Color-dark.theme-dark { --background-underlying: var(--background-underlying-dark) !important; } body.theme-light:not(.is-mobile).background-underlying-CSS-light .app-container { background: var(--background-underlying-CSS-light, --background-underlying) !important; background-blend-mode: var(--background-underlying-CSS-blend-mode-light) !important; } /* ====== Layout ===== */ /* default Layout*/ body { --card-shadow-light: 0px 0px 8px hsla(var(--accent-h), 18%, 80%, 0.4), 0px 0px 6px hsla(var(--accent-h), 18%, 80%, 0.2); --card-shadow-dark: 0px 0px 0px 1px var(--background-modifier-border); --card-border-radius-light: 8px; --card-border-radius-dark: 8px; --card-shadow-border-radius-light: calc(var(--card-border-radius-light) - 1px); --card-shadow-border-radius-dark: calc(var(--card-border-radius-dark) - 1px); } body.is-frameless:not(.is-hidden-frameless).is-fullscreen { padding-top: 0; } /* foreground - underlying */ body { --on-border-light: var(--color-accent-3); --on-border-dark: var(--color-accent-3); --mix-blend-mode-on-border-light: normal; --mix-blend-mode-on-border-dark: screen; } .theme-light:not(.is-mobile) .titlebar, .theme-light:not(.is-mobile) .status-bar, .theme-light:not(.is-mobile) .workspace-ribbon, .theme-light:not(.is-mobile) .workspace-tabs.mod-top .workspace-tab-header-container, .theme-light:not(.is-mobile).card-layout-open-light .workspace-tabs .workspace-tab-header-container { --text-muted: var(--on-border-light); --text-faint: var(--on-border-light); --titlebar-text-color: var(--text-muted); --tab-text-color-active: var(--text-muted); --tab-text-color-focused: var(--text-muted); --tab-text-color-focused-active: var(--text-muted); --status-bar-text-color: var(--text-muted); --icon-color: var(--text-muted); --icon-color-hover: var(--text-muted); --tab-text-color: var(--text-faint); --icon-opacity: 1; mix-blend-mode: var(--mix-blend-mode-on-border-light); } body.theme-light.mod-left-split-background-primary-light { --background-mod-left-split: var(--background-primary) !important; } body.theme-light.mod-right-split-background-primary-light { --background-mod-left-split: var(--background-primary) !important; } body.theme-dark:not(.is-mobile).card-layout-open-dark.mod-left-split-background-transparent-dark .mod-left-split .workspace-tab-container { --card-shadow-dark: transparent; } body.theme-light.mod-left-split-background-customize-light { --background-mod-left-split: var(--background-mod-left-split-light) !important; } body:not(.is-mobile).card-layout-open-light.theme-light .workspace-split.mod-left-split .workspace-tab-container, body:not(.is-mobile).card-layout-open-dark.theme-dark .workspace-split.mod-left-split .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-light).theme-light .workspace-split.mod-left-split .workspace-tabs.mod-top .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-dark).theme-dark .workspace-split.mod-left-split .workspace-tabs.mod-top .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-light).theme-light .workspace-split.mod-left-split .workspace-tabs:not(.mod-top), body:not(.is-mobile):not(.card-layout-open-dark).theme-dark .workspace-split.mod-left-split .workspace-tabs:not(.mod-top) { background: var(--background-mod-left-split) !important; } body:not(.is-mobile).card-layout-open-light.theme-light .workspace-split.mod-right-split .workspace-tab-container, body:not(.is-mobile).card-layout-open-dark.theme-dark .workspace-split.mod-right-split .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-light).theme-light .workspace-split.mod-right-split .workspace-tabs.mod-top .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-dark).theme-dark .workspace-split.mod-left-split .workspace-tabs.mod-top .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-light).theme-light .workspace-split.mod-right-split .workspace-tabs:not(.mod-top), body:not(.is-mobile):not(.card-layout-open-dark).theme-dark .workspace-split.mod-right-split .workspace-tabs:not(.mod-top) { background: var(--background-mod-left-split) !important; } body:not(.is-mobile).theme-light.card-layout-open-light.mod-left-split-background-CSS-light .workspace-split.mod-left-split .workspace-tab-container, body:not(.is-mobile).theme-light:not(.card-layout-open-light).mod-left-split-background-CSS-light .workspace-split.mod-left-split .workspace-tabs.mod-top .workspace-tab-container, body:not(.is-mobile).theme-light:not(.card-layout-open-light).mod-left-split-background-CSS-light .workspace-split.mod-left-split .workspace-tabs:not(.mod-top) { background: var(--background-mod-left-CSS-light) !important; background-blend-mode: var(--background-mod-left-CSS-blend-mode-light); backdrop-filter: var(--background-mod-left-CSS-backdrop-filter-light); -webkit-backdrop-filter: var(--background-mod-left-CSS-backdrop-filter-light); } body:not(.is-mobile).theme-dark.card-layout-open-dark.mod-left-split-background-CSS-dark .workspace-split.mod-left-split .workspace-tab-container, body:not(.is-mobile).theme-dark:not(.card-layout-open-dark).mod-left-split-background-CSS-dark .workspace-split.mod-left-split .workspace-tabs.mod-top .workspace-tab-container, body:not(.is-mobile).theme-dark:not(.card-layout-open-dark).mod-left-split-background-CSS-dark .workspace-split.mod-left-split .workspace-tabs:not(.mod-top) { background: var(--background-mod-left-CSS-dark) !important; background-blend-mode: var(--background-mod-left-CSS-blend-mode-dark); backdrop-filter: var(--background-mod-left-CSS-backdrop-filter-dark); -webkit-backdrop-filter: var(--background-mod-left-CSS-backdrop-filter-dark); } /* background - mod-root */ body.theme-light.mod-root-split-background-primary-light, body.theme-dark.mod-root-split-background-primary-dark, body.theme-light.mod-root-split-background-transparent-light:not(.card-layout-open-light), body.theme-dark.mod-root-split-background-transparent-dark:not(.card-layout-open-dark), body.theme-light:is(.mod-root-split-background-transparent-light, .mod-root-split-background-CSS-light) .mod-stacked, body.theme-dark:is(.mod-root-split-background-transparent-dark, .mod-root-split-background-CSS-dark) .mod-stacked { --background-mod-root-split: var(--background-primary) !important; } body.theme-light.mod-root-split-background-secondary-light, body.theme-dark.mod-root-split-background-secondary-dark { --background-mod-root-split: var(--background-secondary) !important; } body.theme-light.mod-root-split-background-transparent-light.card-layout-open-light, body.theme-dark.mod-root-split-background-transparent-dark.card-layout-open-dark { --background-mod-root-split: transparent !important; } body:not(.is-mobile).card-layout-open-light.theme-light .workspace-split.mod-root .workspace-tab-container, body:not(.is-mobile).card-layout-open-dark.theme-dark .workspace-split.mod-root .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-light).theme-light .workspace-split.mod-root .workspace-tabs.mod-top .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-dark).theme-dark .workspace-split.mod-root .workspace-tabs.mod-top .workspace-tab-container, body:not(.is-mobile):not(.card-layout-open-light).theme-light .workspace-split.mod-root .workspace-tabs:not(.mod-top), body:not(.is-mobile):not(.card-layout-open-dark).theme-dark .workspace-split.mod-root .workspace-tabs:not(.mod-top) { background: var(--background-mod-root-split) !important; } body:not(.is-mobile) .workspace-split.mod-left-split, body:not(.is-mobile) .workspace:not(.is-left-sidedock-open) .workspace-split.mod-root { border-bottom-left-radius: var(--card-border-radius-light, 8px); overflow: hidden; } body:not(.is-mobile).theme-dark .workspace-split.mod-left-split, body:not(.is-mobile).theme-dark .workspace:not(.is-left-sidedock-open) .workspace-split.mod-root { border-bottom-left-radius: var(--card-border-radius-dark, 8px); } body:not(.is-mobile) .workspace:not(.is-right-sidedock-open) .workspace-split.mod-root, body:not(.is-mobile) .workspace-split.mod-right-split { border-bottom-right-radius: var(--card-border-radius-light, 8px); overflow: hidden; } body:not(.is-mobile).theme-dark .workspace:not(.is-right-sidedock-open) .workspace-split.mod-root, body:not(.is-mobile).theme-dark .workspace-split.mod-right-split { border-bottom-right-radius: var(--card-border-radius-dark, 8px); } .workspace-window .mod-top-left-space .workspace-tab-container, .workspace-window .mod-top-left-space .workspace-tab-container .workspace-leaf-content { border-top-left-radius: 0px !important; } body:not(.is-mobile) .workspace::before { content: " "; width: calc(100% - 44px); height: calc(100% - 44px); border-radius: var(--card-shadow-border-radius-light, 7px); background-color: transparent; position: absolute; bottom: 0px; right: 0px; } body:not(.is-mobile).theme-dark .workspace::before { border-radius: var(--card-shadow-border-radius-dark, 7px); box-shadow: var(--card-shadow-dark, 0px 0px 0px 1px var(--background-modifier-border)); } body:not(.is-mobile).is-popout-window .workspace::before { width: calc(100%) !important; height: calc(100% - 44px); } .workspace-tab-header-container, .workspace-tabs.mod-top .workspace-tab-header-container, .workspace-ribbon.mod-left:before { border-bottom: 1px solid transparent; } body:not(.is-mobile) .workspace-ribbon { padding: 5px 0px 6px; } .workspace-ribbon.side-dock-ribbon.mod-left, .workspace-ribbon, .workspace-tabs { gap: 04px; } body:not(.is-mobile) .workspace-ribbon { margin-top: 44px; } .workspace-tabs:not(.mod-top) .workspace-tab-container > .workspace-leaf { box-shadow: inset 0px 1px 0px var(--workspace-divider-color); } body.theme-light.card-layout-open-light .workspace-tabs:not(.mod-top) .workspace-tab-container > .workspace-leaf, body.theme-dark.card-layout-open-dark .workspace-tabs:not(.mod-top) .workspace-tab-container > .workspace-leaf { box-shadow: inset 0px 1px 0px transparent; } /* scrollbar */ body { /* Scrollbars */ --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.15); --scrollbar-bg: rgba(var(--mono-rgb-100), 0); --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.15); } body:not(.native-scrollbars) ::-webkit-scrollbar { width: 8px; height: 8px; } body.is-mobile:not(.native-scrollbars) ::-webkit-scrollbar { width: 3px; height: 3px; } body:not(.native-scrollbars) ::-webkit-scrollbar-track, body:not(.native-scrollbars) ::-webkit-scrollbar-track-piece, body:not(.native-scrollbars):not(.is-mobile) ::-webkit-scrollbar-thumb { background-color: transparent !important; } body:not(.native-scrollbars):not(.is-mobile) :hover::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-bg) !important; } body:not(.native-scrollbars):not(.is-mobile) ::-webkit-scrollbar-thumb:hover, body:not(.native-scrollbars):not(.is-mobile) ::-webkit-scrollbar-thumb:active { background-color: var(--scrollbar-active-thumb-bg) !important; } body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:hover { margin-right: 100px 100 100; -webkit-border-radius: var(--radius-l); border: 2px solid transparent; border-width: 0px 0px 0px 0px; } body:not(.is-mobile).scrollbar-space-occupation-off :is(.mk-file-tree>div>div) { overflow-y: overlay !important; } /* ====== titlebar ===== */ body.is-hidden-frameless .titlebar .titlebar-button-container { background-color: transparent !important; } .titlebar .titlebar-button-container.mod-right { margin-right: 16px; } body.mod-windows .titlebar .titlebar-button.mod-close:hover, body.mod-windows .titlebar .titlebar-button.mod-close:focus { background-color: var(--background-modifier-error) !important; } body.mod-windows .titlebar .titlebar-button.mod-close:hover::after, body.mod-windows .titlebar .titlebar-button.mod-close:focus::after { background-color: var(--text-on-accent) !important; } body.mod-windows .titlebar .titlebar-button.mod-close:hover, body.mod-windows .titlebar .titlebar-button.mod-close:focus { color: var(--text-on-accent) !important; } .titlebar-button-container.mod-right .titlebar-button { height: 24px; width: 24px; border-radius: 12px; padding: 0; margin: auto 8px; background-color: transparent; } .titlebar-button-container.mod-right .titlebar-button:hover { background-color: var(--background-modifier-hover); } .titlebar-button-container.mod-right .titlebar-button:last-of-type { margin-right: 0px; } body.is-hidden-frameless .titlebar-button-container.mod-right { height: 44px; } .titlebar-button:not(.mod-logo) > svg { display: none; } .titlebar-button-container.mod-right .titlebar-button::after { content: ''; background-color: var(--on-border-light); width: 16px; height: 16px; margin: auto; } /* Defines window control svgs*/ .titlebar-button-container.mod-right .titlebar-button.mod-close::after { -webkit-mask-image: url('data:image/svg+xml;utf8,'); } .titlebar-button-container.mod-right .titlebar-button.mod-maximize::after { -webkit-mask-image: url('data:image/svg+xml;utf8,'); } .titlebar-button-container.mod-right .titlebar-button.mod-minimize::after { -webkit-mask-image: url('data:image/svg+xml;utf8,'); } /* ====== status bar====== */ /* tab */ /* tab layout */ .workspace-tab-header::before, .workspace-tab-header::after { display: none; } .sidebar-toggle-button { padding-top: 6px; } .mod-macos.is-hidden-frameless:not(.is-popout-window) .sidebar-toggle-button.mod-right { padding-right: 16px; } body:not(.is-hidden-frameless):not(.is-popout-window) .sidebar-toggle-button.mod-right { margin-right: -8px; } .workspace-tab-header-inner { border-radius: 6px; } .workspace .mod-root .workspace-tab-header { padding: 0px 3px 2px; } .workspace .mod-root .workspace-tab-header:first-child { padding: 0px 3px 2px 0px; } .workspace .mod-root .workspace-tab-header-inner::after { background-color: var(--divider-color); } .mod-root .workspace-tab-header-inner { padding: 0 6px 0 8px; } .mod-root .workspace-tab-header-container-inner { margin: 0px; padding: 6px 8px 4px 6px; height: calc(var(--header-height) + 4px); } .mod-left-split .workspace-tab-header-container-inner, .mod-right-split .workspace-tab-header-container-inner { padding: 6px; margin: 0px; gap: 2px; height: 44px; display: flex; align-items: center; border-radius: 6px; overflow-y: visible; } /* tab style */ body { --border-radius-activated-tab-header-light: 6px; --border-radius-activated-tab-header-dark: 6px; --color-activated-tab-header-light: var(--text-normal); --color-activated-tab-header-dark: var(--text-normal); --background-activated-tab-header-light: var(--background-primary); --shadow-activated-tab-header-light: 0px 0px 6px hsla(var(--accent-h), 18%, 80%, 0.4), 0px 0px 2px hsla(var(--accent-h), 18%, 80%, 0.2), 0 0 0 1px var(--background-modifier-border); --background-activated-tab-header-dark: var(--background-modifier-active-hover); --shadow-activated-tab-header-dark: inset 0 0 0 1px var(--background-modifier-border); } body.theme-light.color-to-tab-icon-light .mod-root .workspace-tab-header.is-active svg, body.theme-light :is(.mod-left-split, .mod-right-split) .workspace-tab-header.is-active .workspace-tab-header-inner-icon, body.theme-light .workspace-tab-header.is-active .workspace-tab-header-inner-title { color: var(--color-activated-tab-header-light) !important; --icon-opacity: 1; } body.theme-dark.color-to-tab-icon-dark .mod-root .workspace-tab-header.is-active svg, body.theme-dark :is(.mod-left-split, .mod-right-split) .workspace-tab-header.is-active .workspace-tab-header-inner-icon, body.theme-dark .workspace-tab-header.is-active .workspace-tab-header-inner-title { color: var(--color-activated-tab-header-dark) !important; --icon-opacity: 1; } body:not(.is-mobile).theme-dark .workspace-tab-header .workspace-tab-header-inner { border-radius: var(--border-radius-activated-tab-header-dark); } .workspace-tab-header-tab-list, .workspace-tab-header-new-tab { padding-top: 6px; } .mod-left-split .workspace-tab-header .workspace-tab-header-inner, .mod-right-split .workspace-tab-header .workspace-tab-header-inner, .clickable-icon.side-dock-ribbon-action, .sidebar-toggle-button .clickable-icon, .workspace-tab-header-new-tab .clickable-icon, .workspace-tab-header-tab-list .clickable-icon { padding: 6px; height: 32px; width: 32px; } .mod-left-split .workspace-tab-header .workspace-tab-header-inner, .mod-right-split .workspace-tab-header .workspace-tab-header-inner { /*pin icon*/ width: fit-content; gap: var(--size-2-2); } body:not(.is-mobile) .mod-left-split .workspace-tab-header-inner-icon .svg-icon, body:not(.is-mobile) .mod-right-split .workspace-tab-header-inner-icon .svg-icon, body:not(.is-mobile) .clickable-icon.side-dock-ribbon-action .svg-icon, body:not(.is-mobile) .clickable-icon.nav-action-button .svg-icon, body:not(.is-mobile) .sidebar-toggle-button .clickable-icon .svg-icon, body:not(.is-mobile) .workspace-tab-header-new-tab .clickable-icon .svg-icon, body:not(.is-mobile) .workspace-tab-header-tab-list .clickable-icon .svg-icon { --icon-size: var(--icon-l); --icon-l: 20px; } .titlebar .workspace-tab-header-tab-list, .titlebar .workspace-tab-header-new-tab, .mod-root .workspace-tab-header-tab-list, .mod-root .workspace-tab-header-new-tab { display: unset; } /* Adds rounded corners to the top of the workspace */ /* Find a way to make this only apply rounded corners when the workspace ribbon is closed */ body:not(.is-mobile) .workspace-ribbon, body:not(.is-mobile) .mod-top-left-space .workspace-tab-container, body.is-popout-window .workspace-tabs.mod-top-left-space > .workspace-tab-container { border-top-left-radius: var(--card-border-radius-light, 8px) !important; overflow: hidden; } body:not(.is-mobile) .workspace:not(.is-right-sidedock-open) .workspace-split.mod-root, body:not(.is-mobile) .workspace-split.mod-right-split { border-bottom-right-radius: var(--card-border-radius-light, 8px); overflow: hidden; } /* Rounds corners on the workspace ribbon while it's open */ .workspace-ribbon { border-top-left-radius: var(--card-border-radius-light); border-top-right-radius: var(--card-border-radius-light); } /* no idea what this stuff does. It's probably important */ .workspace-window .mod-top-left-space .workspace-tab-container, .workspace-window .mod-top-left-space .workspace-tab-container .workspace-leaf-content { border-top-left-radius: 0px !important; } body:not(.is-mobile) .workspace::before { content: " "; width: calc(100% - 44px); height: calc(100% - 44px); border-radius: var(--card-shadow-border-radius-light, 7px); background-color: transparent; box-shadow: var(--card-shadow-light, 0px 0px 8px hsla(var(--accent-h), 18%, 80%, 0.4), 0px 0px 6px hsla(var(--accent-h), 18%, 80%, 0.2)); position: absolute; bottom: 0px; right: 0px; } body:not(.is-mobile).is-popout-window .workspace::before { width: calc(100%) !important; height: calc(100% - 44px); } .workspace-tab-header-container, .workspace-tabs.mod-top .workspace-tab-header-container, .workspace-ribbon.mod-left:before { border-bottom: 1px solid transparent; } body { --anim-speed: 1; --anim-duration-superfast: calc(75ms / var(--anim-speed)); --anim-duration-fast: calc(150ms / var(--anim-speed)); --anim-duration-moderate: calc(300ms / var(--anim-speed)); --anim-duration-slow: calc(600ms / var(--anim-speed)); --anim-in: var(--anim-duration-fast) var(--anim-duration-superfast) var(--anim-motion-swing); --anim-out: var(--anim-duration-moderate) var(--anim-duration-slow) var(--anim-motion-swing); } body:not(.is-phone, .extra-anim-remove) .prompt, body:not(.is-mobile, .extra-anim-remove) .document-search-container, body:not(.is-phone, .extra-anim-remove) .modal:not(:has(.checkbox-container)) { -webkit-animation: scale-up var(--anim-duration-fast) cubic-bezier(0.175, 0.885, 0.32, 1.095) both; animation: scale-up var(--anim-duration-fast) cubic-bezier(0.175, 0.885, 0.32, 1.095) both; } @-webkit-keyframes scale-up { 0% { -webkit-transform: scale(0.75); transform: scale(0.75); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes scale-up { 0% { -webkit-transform: scale(0.75); transform: scale(0.75); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } body:not(.is-phone, .extra-anim-remove) .modal:has(.checkbox-container), body:not(.is-phone, .extra-anim-remove) .modal.mod-settings, body:not(.is-phone, .extra-anim-remove) .modal.mod-community-modal { -webkit-animation: var(--anim-duration-fast) fadeIn both; animation: var(--anim-duration-fast) fadeIn both; } /*from https://github.com/hydescarf/Obsidian-Theme-Mado-Miniflow */ body:not(.extra-anim-remove) .workspace-split .workspace-tabs:not(.mod-stacked) .workspace-leaf-content:not(:has(.surfing-settings-icon)) .view-content:not(.vignette-radial, .vignette-linear, .animate), body:not(.extra-anim-remove) .workspace-leaf-content:not(:has(.view-content)) { -webkit-animation: slide-up var(--anim-duration-fast) forwards; animation: slide-up var(--anim-duration-fast) forwards; } @-webkit-keyframes slide-up { 0% { transform: translateY(0%); opacity: 0; } 15% { transform: translateY(5px); opacity: 0; } 25% { transform: translateY(10px); } 45% { opacity: 0.5; } 65% { opacity: 0.7; } 100% { transform: translateY(0%); opacity: 1; } } @keyframes slide-up { 0% { transform: translateY(0%); opacity: 0; } 15% { transform: translateY(5px); opacity: 0; } 25% { transform: translateY(10px); } 45% { opacity: 0.5; } 65% { opacity: 0.7; } 100% { transform: translateY(0%); opacity: 1; } } /* input[type="color"] { background-color: var(--interactive-accent); color: red; border-radius: var(--button-radius-circle); box-shadow: var(--shadow); } */ /* body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf, body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf-content, body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-header:not(.animate), body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-content:not(.vignette-radial, .vignette-linear, .animate), .sidebar-toggle-button, .mod-left-split .workspace-tab-header.has-active-menu, .mod-right-split .workspace-tab-header.has-active-menu, body:not(.is-mobile) .workspace-tab-header-container, .workspace>.workspace-split, .workspace-tabs.mod-top, body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf, body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf-content, body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-header:not(.animate), body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-content:not(.vignette-radial, .vignette-linear, .animate), .sidebar-toggle-button, .mod-left-split .workspace-tab-header.has-active-menu, .mod-right-split .workspace-tab-header.has-active-menu, body:not(.is-mobile) .workspace-tab-header-container, .workspace>.workspace-split, .workspace-tabs.mod-top, .workspace-leaf-resize-handle, .workspace-tabs mod-top, .workspace-tabs, .workspace-tab-header-status-container, .workspace-tabs .workspace-tab-header.is-active .workspace-tab-header-inner, .workspace-tab-header, workspace-tab-header-inner, .workspace-tab-header.is-active, .workspace-tab-header-container-inner, .workspace-tab-header-spacer, .workspace-tabs, */ /* .workspace-tab-header-container-inner, .is-hidden-frameless:not(.is-fullscreen) .workspace-tab-header-container { background: var(--background-tertiary) !important; padding-right: 5px; width: 500x background-color: var(--background-tertiary) !important; color: var(--background-tertiary) !important; height: 44px; } .workspace-tab-header-container-inner { padding-right: 50px; } */