1562 lines
61 KiB
CSS
1562 lines
61 KiB
CSS
/* 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,<?xml version="1.0" encoding="UTF-8"?><svg id="_层_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}.cls-2{fill-rule:evenodd;}</style></defs><path class="cls-2" d="M4.29,4.29c.39-.39,1.02-.39,1.41,0l6,6c.39,.39,.39,1.02,0,1.41s-1.02,.39-1.41,0L4.29,5.71c-.39-.39-.39-1.02,0-1.41Z"/><path class="cls-2" d="M11.71,4.29c.39,.39,.39,1.02,0,1.41l-6,6c-.39,.39-1.02,.39-1.41,0s-.39-1.02,0-1.41l6-6c.39-.39,1.02-.39,1.41,0Z"/><rect class="cls-1" width="16" height="16"/></svg>');
|
||
}
|
||
.titlebar-button-container.mod-right .titlebar-button.mod-maximize::after {
|
||
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_层_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}.cls-2{fill-rule:evenodd;}</style></defs><path class="cls-2" d="M6,6v4h4V6H6Zm-1-2c-.55,0-1,.45-1,1v6c0,.55,.45,1,1,1h6c.55,0,1-.45,1-1V5c0-.55-.45-1-1-1H5Z"/><rect class="cls-1" width="16" height="16"/></svg>');
|
||
}
|
||
.titlebar-button-container.mod-right .titlebar-button.mod-minimize::after {
|
||
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="_层_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}.cls-2{fill-rule:evenodd;}</style></defs><path class="cls-2" d="M4,11c0-.55,.45-1,1-1h6c.55,0,1,.45,1,1s-.45,1-1,1H5c-.55,0-1-.45-1-1Z"/><rect class="cls-1" width="16" height="16"/></svg>');
|
||
}
|
||
/* ====== 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;
|
||
}
|
||
|
||
*/
|