2804 lines
118 KiB
CSS
2804 lines
118 KiB
CSS
/* ================================================================= */
|
|
/* 1. Variables & Theme setup */
|
|
/* ================================================================= */
|
|
|
|
body {
|
|
/* Background colors */
|
|
--background-underlying: var(--background-tertiary);
|
|
--background-mod-left-split: var(--background-secondary);
|
|
--background-mod-right-split: var(--background-secondary);
|
|
--background-mod-root-split: var(--background-primary);
|
|
--modal-border-color: var(--background-modifier-border); /* Set color for border around modals */
|
|
|
|
/* 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);
|
|
|
|
/* I'm not sure what these are doing */
|
|
--card-shadow: 0px 0px 8px hsla(var(--accent-h), 18%, 80%, 0.4), 0px 0px 6px hsla(var(--accent-h), 18%, 80%, 0.2);
|
|
--card-border-radius: 8px;
|
|
--card-shadow-border-radius: calc(var(--card-border-radius) - 1px);
|
|
|
|
/* Foreground - underlying */
|
|
--on-border: var(--color-accent-3);
|
|
--mix-blend-mode-on-border: normal;
|
|
|
|
/* Tab style */
|
|
--color-activated-tab-header: var(--text-normal);
|
|
|
|
/* Animations */
|
|
--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));
|
|
}
|
|
|
|
/* Define variables unbound to theme */
|
|
:root {
|
|
/* Radius Sizes */
|
|
--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; /* define radius for inserted images */
|
|
--input-radius: 5px; /* define radius for various boxes */
|
|
|
|
--icon-color-hover: var(--text-muted);
|
|
--button-hover-1: var(--text-muted);
|
|
|
|
/* Universal Colors */
|
|
--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));
|
|
|
|
/* Transition times */
|
|
--neumorphic-transition: all 0.15s;
|
|
}
|
|
|
|
/* Light theme definitions */
|
|
.theme-light {
|
|
color-scheme: light;
|
|
|
|
/* Neumorphic Light Base */
|
|
--background: #f0f0f0;
|
|
--text-faint: hsl(var(--accent-h), 6%, 64%);
|
|
--highlight-mix-blend-mode: darken;
|
|
|
|
/* Define variables for shadow and color */
|
|
--shadow:
|
|
4px 4px 8px rgba(0, 0, 0, 0.18), /* Visible */
|
|
-4px -4px 8px rgba(255, 255, 255, 0.5), /* Visible */
|
|
inset 3px 3px 3px rgba(0, 0, 0, 0), /* Transparent */
|
|
inset -3px -3px 3px rgba(255, 255, 255, 0); /* Transparent */
|
|
|
|
--shadow-hover:
|
|
4px 4px 8px rgba(0, 0, 0, 0), /* Fades Out */
|
|
-4px -4px 8px rgba(255, 255, 255, 0), /* Fades Out */
|
|
inset 3px 3px 3px rgba(0, 0, 0, 0.2), /* Fades In */
|
|
inset -3px -3px 3px rgba(255, 255, 255, 0.7);/* Fades In */
|
|
|
|
/* ACTIVE: OUTSET stays transparent */
|
|
--shadow-active:
|
|
4px 4px 8px rgba(0, 0, 0, 0),
|
|
-4px -4px 8px rgba(255, 255, 255, 0),
|
|
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);
|
|
|
|
--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);
|
|
|
|
/* Base Grayscale */
|
|
--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-80: #464646;
|
|
--color-base-90: #333333;
|
|
--color-base-100: #222222;
|
|
|
|
/* Accents & UI Elements */
|
|
--accent-h: 232;
|
|
--accent-s: 80%;
|
|
--accent-l: 64%;
|
|
|
|
--color-accent-hsl: var(--accent-h),
|
|
var(--accent-s),
|
|
var(--accent-l);
|
|
|
|
--color-accent:
|
|
hsl(var(--accent-h),
|
|
var(--accent-s),
|
|
var(--accent-l));
|
|
|
|
--color-accent-1:
|
|
hsl(var(--accent-h),
|
|
var(--accent-s),
|
|
calc(var(--accent-l) + 2.5%));
|
|
|
|
--color-accent-2:
|
|
hsl(var(--accent-h),
|
|
var(--accent-s),
|
|
calc(var(--accent-l) + 5%));
|
|
|
|
--color-accent-3:
|
|
hsla(var(--accent-h),
|
|
calc(0.4*var(--accent-s)),
|
|
calc(var(--accent-l)));
|
|
|
|
--background-modifier-hover: hsla(var(--accent-h), 6%, 64%, 0.15); /* Used to color in buttons when hovered */
|
|
--background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15);
|
|
--background-modifier-cover: rgba(220, 220, 220, 0.4);
|
|
|
|
--color: 0, 0%;
|
|
--l: 100%;
|
|
--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%));
|
|
|
|
--background-primary: var(--color-primary-lightest);
|
|
--background-secondary: #F6F6F6;
|
|
|
|
--background-tertiary:
|
|
hsl(calc(var(--accent-h) - 18),
|
|
calc(var(--accent-s) - 4%),
|
|
calc(100% - (100% - var(--accent-l)) / 8));
|
|
|
|
--color-text-dark:
|
|
hsl(var(--color),
|
|
calc(var(--l) - 40%));
|
|
|
|
--color-text-darkest:
|
|
hsl(var(--color),
|
|
calc(var(--l) - 50%));
|
|
|
|
--background-modifier-border: #EAEAEA;
|
|
--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);
|
|
|
|
/* Header colors */
|
|
--text-title-h1: #000000;
|
|
--text-title-h2: #000000;
|
|
--text-title-h3: #000000;
|
|
--text-title-h4: #000000;
|
|
--text-title-h5: #000000;
|
|
--text-title-h6: #000000;
|
|
|
|
/* Buttons & Interactive */
|
|
--interactive-normal: var(--color-base-05); /* Used as a button color on top of white backgrounds */
|
|
--interactive-hover: var(--color-base-15);
|
|
--button-color-1: var(--color-base-20);
|
|
|
|
/* Blockquotes */
|
|
--blockquote-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.12' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Dark theme definitions */
|
|
.theme-dark {
|
|
color-scheme: dark;
|
|
|
|
/* Neumorphic Dark Base */
|
|
--background-base: #2b2b2b; /* This specific gray is the "middle ground" allowing for both highlights and deep shadows */
|
|
|
|
--background: var(--background-base);
|
|
--background-primary: var(--background-base);
|
|
--background-primary-alt: #252525; /* Used to color in-line code block backgrounds */
|
|
--background-secondary: var(--background-base);
|
|
--background-tertiary: hsl(var(--accent-h), 40%, 25%);
|
|
|
|
/* Re-defined Shadows for Dark Mode\ */
|
|
/* Top-left: Faint white (highlight) | Bottom-right: Deep black (shadow) */
|
|
--shadow:
|
|
5px 5px 10px rgba(0, 0, 0, 0.5),
|
|
-5px -5px 10px rgba(255, 255, 255, 0.06);
|
|
|
|
--shadow-hover:
|
|
inset 3px 3px 3px rgba(0, 0, 0, 0.5),
|
|
inset -3px -3px 3px rgba(255, 255, 255, 0.06);
|
|
|
|
--shadow-active:
|
|
inset 3px 3px 3px rgba(0, 0, 0, 0.7),
|
|
inset -3px -3px 3px rgba(255, 255, 255, 0.04);
|
|
|
|
--shadow-selected:
|
|
inset 3px 3px 3px rgba(0, 0, 0, 0.6);
|
|
|
|
--shadow-scrollbar:
|
|
inset 4px 4px 8px rgba(0, 0, 0, 0.5),
|
|
inset -4px -4px 8px rgba(255, 255, 255, 0.06);
|
|
|
|
--shadow-s:
|
|
0px 1px 2px rgba(0, 0, 0, 0.3),
|
|
0px 3px 6px rgba(0, 0, 0, .4);
|
|
|
|
--shadow-l:
|
|
0px 4px 10px rgba(0, 0, 0, 0.4),
|
|
0px 10px 30px rgba(0, 0, 0, 0.5);
|
|
|
|
/* Typography */
|
|
--text-normal: #dcdcdc;
|
|
--text-muted: #999999;
|
|
--text-faint: #666666;
|
|
--text-error: #ff6666;
|
|
--text-error-hover: #ff9999;
|
|
--text-matched: #2ecc71;
|
|
|
|
/* Accents & UI Elements */
|
|
--accent-h: 232;
|
|
--accent-s: 70%; /* Slightly desaturated for dark mode comfort */
|
|
--accent-l: 70%; /* Lightened slightly to pop against dark bg */
|
|
|
|
--interactive-accent:
|
|
hsl(var(--accent-h),
|
|
var(--accent-s),
|
|
var(--accent-l));
|
|
|
|
--interactive-accent-hover:
|
|
hsl(var(--accent-h),
|
|
var(--accent-s),
|
|
calc(var(--accent-l) + 5%));
|
|
|
|
--interactive-normal: var(--background-base);
|
|
--interactive-hover: #323232; /* Slightly lighter than base on hover */
|
|
--button-color-1: var(--background-base);
|
|
|
|
/* Modifiers */
|
|
--background-modifier-border: rgba(0, 0, 0, 0.3); /* Subtle dark borders */
|
|
--background-modifier-border-focus: rgba(255, 255, 255, 0.1);
|
|
--background-modifier-border-hover: rgba(255, 255, 255, 0.1);
|
|
--background-modifier-box-shadow: rgba(0, 0, 0, 0.5);
|
|
--background-modifier-cover: rgba(0, 0, 0, 0.6);
|
|
--background-modifier-form-field: rgba(0, 0, 0, 0.2); /* Inset inputs */
|
|
|
|
/* Base Grayscale (Inverted logic for dark mode) */
|
|
--color-base-00: #1a1a1a;
|
|
--color-base-05: #202020;
|
|
--color-base-10: #252525;
|
|
--color-base-20: #2b2b2b;
|
|
--color-base-25: #333333;
|
|
--color-base-30: #3b3b3b;
|
|
--color-base-35: #444444;
|
|
--color-base-40: #555555;
|
|
--color-base-50: #666666;
|
|
--color-base-60: #777777;
|
|
--color-base-70: #888888;
|
|
--color-base-80: #aaaaaa;
|
|
--color-base-90: #cccccc;
|
|
--color-base-100: #ffffff;
|
|
|
|
/* Sets color scheme for navbar text and icons. Consider dimming this just a little*/
|
|
--nav-item-color: var(--text-normal);
|
|
|
|
/* Blockquotes */
|
|
--blockquote-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.12' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Shared Light and Dark theme definitions */
|
|
.theme-light,
|
|
.theme-dark {
|
|
/* More visual settings for input boxes in the settings */
|
|
--input-shadow: var(--shadow);
|
|
--input-shadow-hover: var(--shadow-hover);
|
|
|
|
/* Blockquotes */
|
|
--blockquote-border-thickness: 3px;
|
|
--blockquote-padding: 8px;
|
|
|
|
/* Toggle logic */
|
|
/* Toggle ball shadows (Identical in both modes) */
|
|
--toggle-thumb-shadow:
|
|
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 ball "Enabled" shadows (Identical + Accent Glow) */
|
|
--toggle-thumb-enabled-shadow:
|
|
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);
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 2. TYPOGRAPHY & BASIC ELEMENTS */
|
|
/* ================================================================= */
|
|
|
|
/* Adds a bar underneath H1 & H2 content headers */
|
|
h1,
|
|
h2 {
|
|
position: relative;
|
|
padding-bottom: 1rem; /* Adjust the space between the header text and the bar */
|
|
}
|
|
h1::after,
|
|
h2::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 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 */
|
|
}
|
|
|
|
p {
|
|
display: block;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
margin-block-start: 0.8em;
|
|
margin-block-end: 0.85em;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Removes empty space from links in live-preview mode */
|
|
/* Closes issue https://github.com/sq1000000/NeuBorder/issues/3 */
|
|
.show-properties.is-live-preview .external-link {
|
|
margin-right: 0px;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
display: inline-flex;
|
|
}
|
|
|
|
/* Adds Neumorphic styling to tags */
|
|
.tag {
|
|
display: inline-block;
|
|
margin: 5px 5px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.tag:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.tag:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* Rounds corners on images inside markdown */
|
|
.markdown-preview-view.img,
|
|
img {
|
|
border-radius: var(--image-radius);
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 3. UI COMPONENTS (General) */
|
|
/* ================================================================= */
|
|
|
|
/* Standardize a bunch of button sizes */
|
|
body:not(.is-mobile) .clickable-icon.side-dock-ribbon-action,
|
|
.sidebar-toggle-button .clickable-icon,
|
|
.workspace-tab-header-tab-list .clickable-icon,
|
|
body:not(.is-mobile) .view-header .clickable-icon:not([aria-label="Accept changes"], [aria-label="Cancel apply"]) {
|
|
padding: 5px;
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
|
|
/* Adds Neumorphic styling to the button to modal close buttons */
|
|
.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 more settings boxes (Buttons) */
|
|
.mod-cta {
|
|
border-radius: var(--button-radius-medium);
|
|
}
|
|
.mod-cta:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.mod-cta:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
.modal-button-container button.mod-cta:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
background-color: var(--color-accent);
|
|
}
|
|
.setting-item.setting-item-control.button,
|
|
.modal-button-container button.mod-cta:active {
|
|
box-shadow: var(--shadow-active);
|
|
background-color: var(--color-accent);
|
|
}
|
|
.modal-button-container button.mod-cancel:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* 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 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-hover);
|
|
}
|
|
.checkbox-container.is-enabled:active {
|
|
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 sliders */
|
|
input[type='range'] {
|
|
background-color: var(--color-base-30);
|
|
}
|
|
input[type='range']::-webkit-slider-thumb {
|
|
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 scrollbars */
|
|
::-webkit-scrollbar-thumb {
|
|
color: var(--color-primary-lightest);
|
|
border-radius: 10px;
|
|
box-shadow: var(--shadow-scrollbar);
|
|
margin-right: 30px;
|
|
}
|
|
::-webkit-scrollbar-thumb:active {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* Adds Neumorphic styling to the right click menu */
|
|
.menu-item:not(.is-disabled):not(.is-label) {
|
|
margin-bottom: 1.5px;
|
|
}
|
|
.menu-item:not(.is-disabled):not(.is-label):hover {
|
|
box-shadow: var(--shadow-hover);
|
|
border-radius: var(--button-radius-medium);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
.menu-item:not(.is-disabled):not(.is-label):active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
.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);
|
|
}
|
|
|
|
/* Callout styling */
|
|
/* Adds Neumorphic styling to callout boxes */
|
|
.callout {
|
|
box-shadow: var(--shadow);
|
|
border-radius: var(--button-radius-large);
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 4. Workspace & Layout */
|
|
/* ================================================================= */
|
|
|
|
/* More side dock visual settings */
|
|
.side-dock-settings,
|
|
.side-dock-actions {
|
|
gap: var(--size-2-2);
|
|
}
|
|
|
|
/* Defines Side dock ribbon properties */
|
|
.side-dock-ribbon-action {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
margin-bottom: 3px !important;
|
|
background-color: var(--button-color-1);
|
|
border-radius: var(--button-radius-medium);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.side-dock-ribbon-action:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.side-dock-ribbon-action:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* Changes the colors of the side dock to be a little more muted when using dark theme */
|
|
.theme-dark .side-dock-ribbon-action:active,
|
|
.theme-dark .side-dock-ribbon-action {
|
|
color: var(--nav-item-color);
|
|
background-color: var(--button-color-1);
|
|
}
|
|
|
|
/* Sets collapsed side dock to be accent color */
|
|
.workspace-ribbon.mod-left.is-collapsed {
|
|
background-color: transparent;
|
|
}
|
|
.workspace-ribbon {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
/* Adds vertical overhead above markdown document for icons */
|
|
.view-header {
|
|
height: 50px;
|
|
}
|
|
|
|
/* Remove boundaries document title for shadows */
|
|
.view-header-title-container {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Apply neumorphic styling to document title */
|
|
.view-header-title {
|
|
background-color: var(--interactive-normal);
|
|
border: none;
|
|
border-radius: var(--button-radius-medium);
|
|
box-shadow: var(--shadow);
|
|
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center; /* Keeps it perfectly centered vertically */
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
.view-header-title:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
|
|
/* Add right padding for document title on mobile */
|
|
.is-mobile .view-header-title {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.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-normal);
|
|
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);
|
|
}
|
|
|
|
.view-action.has-active-menu {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* Backgrounds & Splits Configuration */
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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-tertiary);
|
|
}
|
|
|
|
/* ====== Layout ===== */
|
|
/* default Layout */
|
|
body.is-frameless:not(.is-hidden-frameless).is-fullscreen {
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* Status Bar & Ribbon Colors */
|
|
.titlebar,
|
|
.status-bar,
|
|
.workspace-ribbon,
|
|
.workspace-tabs.mod-top .workspace-tab-header-container,
|
|
.card-layout-open-light .workspace-tabs .workspace-tab-header-container {
|
|
--text-muted: var(--on-border);
|
|
--text-faint: var(--on-border);
|
|
--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);
|
|
}
|
|
|
|
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-light.mod-left-split-background-customize-light {
|
|
--background-mod-left-split: var(--background-mod-left-split-light) !important;
|
|
}
|
|
|
|
/* Set color for left split */
|
|
body:not(.is-mobile).card-layout-open-light .workspace-split.mod-left-split .workspace-tab-container,
|
|
body:not(.is-mobile):not(.card-layout-open-light) .workspace-split.mod-left-split .workspace-tabs.mod-top .workspace-tab-container,
|
|
body:not(.is-mobile):not(.card-layout-open-light) .workspace-split.mod-left-split .workspace-tabs:not(.mod-top) {
|
|
background: var(--background-mod-left-split) !important;
|
|
}
|
|
|
|
/* Set color for right split */
|
|
body:not(.is-mobile).card-layout-open-light .workspace-split.mod-right-split .workspace-tab-container,
|
|
body:not(.is-mobile):not(.card-layout-open-light) .workspace-split.mod-right-split .workspace-tabs.mod-top .workspace-tab-container,
|
|
body:not(.is-mobile):not(.card-layout-open-light) .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: rgba(255, 255, 255, 0.5) !important;
|
|
background-blend-mode: normal;
|
|
backdrop-filter: blur(32px);
|
|
}
|
|
|
|
/* background - mod-root */
|
|
body.theme-light.mod-root-split-background-primary-light,
|
|
body.theme-light.mod-root-split-background-transparent-light:not(.card-layout-open-light),
|
|
body.theme-light:is(.mod-root-split-background-transparent-light, .mod-root-split-background-CSS-light) .mod-stacked {
|
|
--background-mod-root-split: var(--background-primary) !important;
|
|
}
|
|
|
|
body.theme-light.mod-root-split-background-secondary-light {
|
|
--background-mod-root-split: var(--background-secondary) !important;
|
|
}
|
|
|
|
body.theme-light.mod-root-split-background-transparent-light.card-layout-open-light {
|
|
--background-mod-root-split: transparent !important;
|
|
}
|
|
|
|
body:not(.is-mobile).card-layout-open-light .workspace-split.mod-root .workspace-tab-container,
|
|
body:not(.is-mobile):not(.card-layout-open-light) .workspace-split.mod-root .workspace-tabs.mod-top .workspace-tab-container,
|
|
body:not(.is-mobile):not(.card-layout-open-light) .workspace-split.mod-root .workspace-tabs:not(.mod-top) {
|
|
background: var(--background-mod-root-split) !important;
|
|
}
|
|
|
|
/* Border Radius & Shadow Logic for Workspace */
|
|
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, 8px);
|
|
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, 8px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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, 7px);
|
|
background-color: transparent;
|
|
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:not(.is-mobile) .workspace-ribbon {
|
|
padding: 5px 0px 6px;
|
|
margin-top: 44px;
|
|
}
|
|
|
|
/* Adds rounded corners to the top of the workspace */
|
|
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, 8px) !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Rounds corners on the workspace ribbon while it's open */
|
|
.workspace-ribbon {
|
|
border-top-left-radius: var(--card-border-radius);
|
|
border-top-right-radius: var(--card-border-radius);
|
|
}
|
|
|
|
/* Layout and positioning */
|
|
body:not(.is-mobile) .workspace::before {
|
|
content: " ";
|
|
width: calc(100% - 44px);
|
|
height: calc(100% - 44px);
|
|
border-radius: var(--card-shadow-border, 7px);
|
|
background-color: transparent;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
pointer-events: none;
|
|
}
|
|
/* Light Theme workspace shadow */
|
|
.theme-light:not(.is-mobile) .workspace::before {
|
|
box-shadow: var(--card-shadow,
|
|
0px 0px 8px hsla(var(--accent-h), 18%, 80%, 0.4),
|
|
0px 0px 6px hsla(var(--accent-h), 18%, 80%, 0.2));
|
|
}
|
|
/* Dark Theme workspace shadow */
|
|
.theme-dark:not(.is-mobile) .workspace::before {
|
|
box-shadow:
|
|
0px 0px 20px hsla(var(--accent-h), 18%, 80%, 0.1),
|
|
0px 0px 15px hsla(var(--accent-h), 18%, 80%, 0.1);
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 5. Window titlebar & Window controls */
|
|
/* ================================================================= */
|
|
|
|
/* titlebar */
|
|
.mod-right-split .workspace-tab-header-container {
|
|
padding-right: 135px !important;
|
|
}
|
|
|
|
/* Change the right iconbar size to only fit the sidebar collapse button in MacOS */
|
|
.mod-macos .mod-right-split .workspace-tab-header-container {
|
|
padding-right: 50px !important;
|
|
}
|
|
|
|
/* Defines window control circles */
|
|
.titlebar-button-container.mod-right .titlebar-button {
|
|
padding: 0 !important;
|
|
margin-top: 6px;
|
|
margin-left: 12px;
|
|
border-radius: var(--button-radius-medium);
|
|
cursor: pointer;
|
|
|
|
/* Controls the shape of the window control clickable area */
|
|
justify-content: center;
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
|
|
/* Neumorphic Shadows for the button itself */
|
|
box-shadow: var(--shadow);
|
|
transition: var(--neumorphic-transition);
|
|
}
|
|
|
|
/* Defines background color - RESTRICTED to right container */
|
|
body.is-hidden-frameless .titlebar .titlebar-button-container.mod-right {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Creates the extended bar - RESTRICTED to right container */
|
|
.titlebar .titlebar-button-container.mod-right::before {
|
|
content: '';
|
|
position: absolute; /* Required for placement */
|
|
left: 5px;
|
|
width: calc(100% + 10px); /* Increased width to cover the right margin */
|
|
height: calc(100% + 5px); /* Add some horizontal space to account for border at the bottom */
|
|
background-color: var(--background-tertiary); /* The background color */
|
|
border-left: 2px solid var(--color-base-20); /* The white line color, moved to border */
|
|
z-index: -1; /* Ensures buttons float on top */
|
|
}
|
|
|
|
/* Defines horizontal positioning of window control buttons */
|
|
.titlebar .titlebar-button-container.mod-right {
|
|
margin-right: 7px;
|
|
}
|
|
|
|
/* Icon replacement logic: */
|
|
/* Hide the default Obsidian SVGs and replace them with custom ones */
|
|
.titlebar-button:not(.mod-logo) > svg {
|
|
display: none !important;
|
|
}
|
|
|
|
.titlebar-button-container.mod-right .titlebar-button::after {
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: var(--color-base-80);
|
|
}
|
|
|
|
/* When maximized, turn the maximize button background white */
|
|
body.is-maximized .titlebar-button.mod-maximize {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
/* Hover states for titlebar min/max/close icons */
|
|
.titlebar-button.mod-minimize:hover,
|
|
.titlebar-button.mod-maximize:hover,
|
|
.titlebar-button.mod-close:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
/* Active states for titlebar min/max/close icons */
|
|
.titlebar-button.mod-minimize:active,
|
|
.titlebar-button.mod-maximize:active,
|
|
.titlebar-button.mod-close:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* Turn the close icon white when the background is red */
|
|
.titlebar-button-container.mod-right .titlebar-button.mod-close:hover::after {
|
|
background-color: white !important;
|
|
}
|
|
|
|
/* MacOS Specific header tweaks */
|
|
.sidebar-toggle-button.mod-right {
|
|
background-color: var(--background-tertiary) !important;
|
|
}
|
|
.mod-macos.is-hidden-frameless:not(.is-popout-window) .sidebar-toggle-button.mod-right {
|
|
padding-right: 0px;
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 6. Navigation, Tabs & Sidebars */
|
|
/* ================================================================= */
|
|
|
|
/* Set a bunch of properties for the file explorer */
|
|
.workspace-leaf-content .tree-item-self {
|
|
margin-bottom: var(--size-2-2);
|
|
position: relative;
|
|
border-radius: var(--border-radius-activated-file-light);
|
|
align-items: center;
|
|
line-height: 20px; /* Adjusts the line height of the file tree */
|
|
}
|
|
|
|
/* Add neumorphic styling to just about every list */
|
|
.tree-item-self.is-clickable {
|
|
border-radius: var(--list-radius-medium);
|
|
}
|
|
.tree-item-self.is-clickable:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.tree-item-self.bookmark.is-clickable:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
.tree-item-self.is-clickable.is-active {
|
|
background-color: var(--color-primary-light);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* Some stuff that adjusts the tabs on the top */
|
|
.workspace-tab-header-container {
|
|
padding-left: 5px;
|
|
padding-right: var(--size-2-3);
|
|
}
|
|
|
|
/* Adjust the positioning of the tabs on the left sidebar */
|
|
.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-left-space .workspace-tab-header-container {
|
|
padding-left: calc(0px + var(--frame-left-space));
|
|
}
|
|
|
|
/* Defines tab bar properties */
|
|
.workspace-tabs .workspace-tab-header-inner {
|
|
border-radius: var(--button-radius-medium);
|
|
box-shadow: var(--shadow);
|
|
margin: 0px 5px; /* Adjusts the distance tabs have from each other */
|
|
}
|
|
|
|
/* Defines active tab properties */
|
|
.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 {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.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: var(--button-color-1);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.workspace-tab-header-tab-list span.clickable-icon.has-active-menu:hover {
|
|
background-color: var(--button-color-1);
|
|
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;
|
|
}
|
|
|
|
/* Add an empty gap under the tab to have a chrome-style tab setup */
|
|
.workspace-tabs {
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Necessary for tablet mode to have colors */
|
|
.workspace-tab-header-container,
|
|
.workspace-tabs {
|
|
background-color: var(--background-tertiary) !important;
|
|
}
|
|
|
|
.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 {
|
|
box-shadow: inset 0px 1px 0px transparent;
|
|
}
|
|
|
|
.workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active {
|
|
background-color: transparent !important;
|
|
box-shadow: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Tab Layout Overrides */
|
|
.workspace-tab-header::before,
|
|
.workspace-tab-header::after {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-toggle-button {
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Defines the left and right sidebar scrollable containers */
|
|
.mod-left-split .workspace-tab-header-container .workspace-tab-header-container-inner,
|
|
.mod-right-split .workspace-tab-header-container .workspace-tab-header-container-inner {
|
|
padding-right: 10px;
|
|
padding-top: 5px;
|
|
padding-bottom: 6px;
|
|
padding-left: 3px;
|
|
margin: 0px;
|
|
height: 45px;
|
|
display: flex;
|
|
align-items: center;
|
|
scroll-behavior: smooth; /* Makes the scroll glides smoothly instead of jumping */
|
|
}
|
|
|
|
.color-to-tab-icon-light .mod-root .workspace-tab-header.is-active svg,
|
|
:is(.mod-left-split, .mod-right-split) .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
|
|
.workspace-tab-header.is-active .workspace-tab-header-inner-title {
|
|
color: var(--color-activated-tab-header) !important;
|
|
--icon-opacity: 1;
|
|
}
|
|
|
|
.workspace-tab-header-tab-list,
|
|
.workspace-tab-header-new-tab {
|
|
padding-top: 6px;
|
|
}
|
|
|
|
body:not(.is-tablet) .mod-left-split .workspace-tab-header .workspace-tab-header-inner,
|
|
.mod-right-split .workspace-tab-header .workspace-tab-header-inner,
|
|
body:not(.is-tablet).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;
|
|
}
|
|
|
|
/* Adds some width for when the "pinned" icon is present */
|
|
.mod-left-split .workspace-tab-header .workspace-tab-header-inner,
|
|
.mod-right-split .workspace-tab-header .workspace-tab-header-inner {
|
|
width: fit-content !important;
|
|
gap: var(--size-2-2);
|
|
}
|
|
|
|
/* Sets some tab bar icon sizes */
|
|
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;
|
|
}
|
|
|
|
/* Centers a few things vertically in the tab bar */
|
|
.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;
|
|
}
|
|
|
|
/* When hovering the header, keep the inner part transparent */
|
|
.workspace-tab-header.tappable:not(.is-active):hover .workspace-tab-header-inner {
|
|
background-color: transparent;
|
|
}
|
|
/* When hovering the inner element specifically, turn it to the hovered color */
|
|
.workspace-tab-header.tappable:not(.is-active) .workspace-tab-header-inner:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Adds Neumorphic styling to Obsidian nav buttons (The buttons above the file lists) */
|
|
.nav-action-button {
|
|
color: var(--nav-item-color);
|
|
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);
|
|
}
|
|
|
|
/* Ditched effort to theme the vault switcher drawer */
|
|
/* It just doesn't look good. I'm keeping it with the default look */
|
|
|
|
/*
|
|
.workspace-drawer-vault-switcher,
|
|
.workspace-drawer-vault-actions .clickable-icon {
|
|
color: var(--nav-item-color);
|
|
background-color: var(--button-color-1);
|
|
box-shadow: var(--shadow);
|
|
border-radius: var(--button-radius-medium);
|
|
height: 35px;
|
|
width: 35px;
|
|
|
|
margin-left: 7px;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.workspace-drawer-vault-switcher:hover,
|
|
.workspace-drawer-vault-actions .clickable-icon:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.workspace-drawer-vault-switcher:active,
|
|
.workspace-drawer-vault-switcher.has-active-menu,
|
|
.workspace-drawer-vault-actions .clickable-icon:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
.workspace-drawer-vault-actions {
|
|
margin-right: 7px;
|
|
}
|
|
*/
|
|
|
|
/* Stop the vault switcher drawer icons from being so dull in dark mode */
|
|
.theme-dark .workspace-drawer-vault-switcher-icon,
|
|
.theme-dark .workspace-drawer-vault-name,
|
|
.theme-dark .workspace-drawer-vault-actions .clickable-icon {
|
|
color: var(--nav-item-color) !important;
|
|
}
|
|
|
|
/* Color the search box the accent color when searching inside of the tags bar */
|
|
.nav-buttons-container .nav-action-button.is-active[aria-label="Show search filter"] {
|
|
background-color: var(--background-underlying);
|
|
}
|
|
.nav-action-button:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
.nav-action-button.has-active-menu {
|
|
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 {
|
|
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);
|
|
}
|
|
|
|
.button.clickable-icon {
|
|
margin-bottom: 5px;
|
|
box-shadow: var(--shadow);
|
|
border-radius: 6px;
|
|
margin-top: 5px;
|
|
}
|
|
.mod- {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 7. Search & Command Palette */
|
|
/* ================================================================= */
|
|
|
|
/* 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-medium);
|
|
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-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);
|
|
}
|
|
|
|
/* Sidebar Search result icon settings */
|
|
.search-results-result-count,
|
|
.search-results-info .dropdown {
|
|
box-shadow: var(--shadow);
|
|
color: var(--text-muted);
|
|
background-color: var(--button-color-1);
|
|
border-radius: var(--button-radius-medium);
|
|
}
|
|
.search-results-result-count:hover,
|
|
.search-results-info .dropdown:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
color: var(--text-muted);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
.search-results-result-count:hover,
|
|
.search-results-info .dropdown:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.search-results-result-count.has-active-menu,
|
|
.search-results-info .dropdown:active {
|
|
box-shadow: var(--shadow-active);
|
|
color: var(--text-muted);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Adds Neumorphic styling to the "Search Settings" button */
|
|
.clickable-icon[aria-label="Search settings"] {
|
|
background-color: var(--button-color-1);
|
|
border-radius: var(--button-radius-medium);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.clickable-icon[aria-label="Search settings"]:hover {
|
|
background-color: var(--button-color-1);
|
|
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 {
|
|
background-color: var(--button-color-1);
|
|
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 {
|
|
background-color: var(--button-color-1);
|
|
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);
|
|
}
|
|
.input-right-decorator.clickable-icon.is-active {
|
|
background-color: var(--background-underlying);
|
|
}
|
|
|
|
/* Adds Neumorphic styling to the "Search settings" button */
|
|
.clickable-icon[aria-label="Search settings"].is-active {
|
|
background-color: var(--background-underlying);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
/* Divide the results and the search bar*/
|
|
body:not(.is-phone) div:has(>input.prompt-input) {
|
|
border-bottom: 2px solid var(--color-accent) !important;
|
|
}
|
|
/* Set some colors n stuff for the search box */
|
|
.prompt {
|
|
background-color: var(--workspace-background-translucent);
|
|
backdrop-filter: blur(16px) saturate(190%) contrast(50%) brightness(130%);
|
|
}
|
|
|
|
/* Basically the same as suggestion item stuff, but on phone */
|
|
.is-phone .suggestion-bg {
|
|
background-color: var(--workspace-background-translucent);
|
|
backdrop-filter: blur(16px) contrast(10%) brightness(10%);
|
|
}
|
|
|
|
/* Set color for suggestion text when searching for something */
|
|
.suggestion-highlight {
|
|
color: var(--h1-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 8. Editor & Markdown Content */
|
|
/* ================================================================= */
|
|
|
|
/* Define visual settings for blockquotes */
|
|
.markdown-source-view .cm-scroller .cm-line.HyperMD-quote,
|
|
.markdown-rendered blockquote {
|
|
background: var(--blockquote-background);
|
|
}
|
|
|
|
/* Define visual settings for blockquotes */
|
|
.markdown-rendered blockquote {
|
|
position: relative;
|
|
border-radius: var(--radius-l);
|
|
border-inline-start: none;
|
|
padding-inline: calc(16px + var(--blockquote-border-thickness) + var(--blockquote-padding)) var(--blockquote-padding);
|
|
padding-block: var(--blockquote-padding);
|
|
}
|
|
|
|
/* Add a themed line to the blockquote */
|
|
.markdown-rendered blockquote::before {
|
|
position: absolute;
|
|
top: var(--blockquote-padding);
|
|
bottom: var(--blockquote-padding);
|
|
inset-inline-start: var(--blockquote-padding);
|
|
background-color: var(--blockquote-border-color);
|
|
width: var(--blockquote-border-thickness);
|
|
content: "";
|
|
}
|
|
|
|
/* Text related settings */
|
|
.markdown-preview-view code {
|
|
color: var(--color-monospace);
|
|
-webkit-font-smoothing: auto;
|
|
font-size: 0.87em;
|
|
}
|
|
|
|
/* Defines properties for code blocks */
|
|
.markdown-preview-section {
|
|
max-width: 800px; /* Sets max code block width */
|
|
margin: auto; /* Centers the page */
|
|
}
|
|
|
|
/* Adds Neumorphic styling to the "Copy Code" button */
|
|
.markdown-rendered button.copy-code-button {
|
|
padding: 7px 7px;
|
|
height: 32px;
|
|
width: 32px;
|
|
|
|
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);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Edit the "Copy Code" button in Preview mode to say "Copy <code type>" */
|
|
.code-block-flair::before {
|
|
content: "Copy " attr(aria-label) " " counter(none); /* Fallback logic */
|
|
content: "Copy '" textContent;
|
|
}
|
|
.code-block-flair {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
.code-block-flair::before {
|
|
content: "Copy";
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* Applys coloring to code blocks */
|
|
.theme-light code,
|
|
.theme-light pre {
|
|
background-color: var(--background-secondary); /* Makes code blocks a bit darker */
|
|
border: 1px solid var(--background-modifier-border); /* 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 */
|
|
}
|
|
|
|
.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:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
.task-list-item-checkbox:checked {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* Adds neumorphic styling to the status bar on the bottom */
|
|
.status-bar {
|
|
border-radius: var(--button-radius-medium);
|
|
box-shadow: var(--shadow);
|
|
border-width: 1px;
|
|
right: 0.5rem;
|
|
bottom: 0.5rem;
|
|
}
|
|
|
|
/* Removes strikethrough from checkboxes */
|
|
.markdown-preview-view ol > li.task-list-item.is-checked,
|
|
.markdown-preview-view ul > li.task-list-item.is-checked {
|
|
text-decoration: none;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 9. Modals, Settings, Canvas & Community */
|
|
/* ================================================================= */
|
|
|
|
/* Sets background properties in the settings menu */
|
|
.modal-bg {
|
|
background: rgba(0, 0, 0, 0.1); /* extremely slight dim */
|
|
backdrop-filter: blur(4px) saturate(30%); /* blur & saturate the background */
|
|
}
|
|
|
|
/* 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: 8px;
|
|
background-color: var(--dropdown-background);
|
|
}
|
|
|
|
/* Changes the color of the settings scrollable bar very slightly on everything that's not a tablet */
|
|
body:not(.is-mobile) .vertical-tab-header {
|
|
padding: var(--size-4-3);
|
|
background-color: var(--setting-items-background);
|
|
}
|
|
|
|
body:not(.is-phone) .horizontal-tab-nav-item.is-active,
|
|
body:not(.is-phone) .vertical-tab-nav-item.is-active {
|
|
background-color: var(--background-underlying);
|
|
}
|
|
|
|
body:not(.is-phone) .horizontal-tab-nav-item.is-active:hover,
|
|
body:not(.is-phone) .vertical-tab-nav-item.is-active:hover {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.vertical-tab-nav-item:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.vertical-tab-nav-item: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 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);
|
|
}
|
|
.hotkey-list-container {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
.community-item.is-selected {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.community-item.is-selected:hover {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* Set color for background of community items page */
|
|
.community-modal-search-results-wrapper {
|
|
background-color: var(--setting-items-background);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
.mod-community-modal .modal-sidebar button.clickable-icon.has-active-menu {
|
|
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);
|
|
}
|
|
|
|
/* Visual settings for Obsidian Bases */
|
|
/* This currently looks kind of horrible. Consider fixing this or removing it */
|
|
.bases-cards-item {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.bases-cards-item:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.bases-cards-item:active {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.bases-toolbar .text-icon-button {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.bases-toolbar .text-icon-button:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.bases-toolbar .text-icon-button.has-active-menu,
|
|
.bases-toolbar .text-icon-button:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
.bases-toolbar .bases-toolbar-item.bases-toolbar-views-menu,
|
|
.bases-toolbar .bases-toolbar-result-count {
|
|
overflow: visible !important;
|
|
}
|
|
.bases-toolbar .bases-toolbar-item.bases-toolbar-views-menu {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 10. Settings Modal */
|
|
/* ================================================================= */
|
|
|
|
/* Settings group title appearance tweaks */
|
|
body:not(.is-phone) .vertical-tab-header-group .vertical-tab-header-group-title {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Set properties for icon sizing in the setting menu */
|
|
body:not(.is-phone) .vertical-tab-header-group:nth-last-of-type(3) .vertical-tab-header-group-title::before,
|
|
body:not(.is-phone) .vertical-tab-header-group:nth-last-of-type(2) .vertical-tab-header-group-title::before,
|
|
body:not(.is-phone) .vertical-tab-header-group:nth-last-of-type(1) .vertical-tab-header-group-title::before {
|
|
content: " ";
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: currentColor;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 11. PDF Page Settings */
|
|
/* ================================================================= */
|
|
|
|
/* Set round corners for PDF previews */
|
|
.pdf-sidebar-container .thumbnail::before {
|
|
border-radius: var(--button-radius-medium);
|
|
}
|
|
|
|
/* Set round corners for PDF pages */
|
|
.canvasWrapper,
|
|
.canvasWrapper canvas {
|
|
border-radius: var(--list-radius-large);
|
|
}
|
|
|
|
/* Set colors and stuff for selected PDF page */
|
|
.thumbnail.selected {
|
|
background-color: var(--background-tertiary);
|
|
border-radius: var(--button-radius-large);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.thumbnail.selected:hover {
|
|
box-shadow: var(--shadow) !important;
|
|
}
|
|
|
|
/* PDF sidebar thumbnail visual settings */
|
|
.pdf-sidebar-container .thumbnail {
|
|
margin-bottom: 5px;
|
|
border-radius: var(--button-radius-large);
|
|
}
|
|
.pdf-sidebar-container .thumbnail:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.pdf-sidebar-container .thumbnail:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 12. Custom 'New Tab' page */
|
|
/* ================================================================= */
|
|
|
|
/* Container for the buttons */
|
|
.workspace-leaf-content[data-type="empty"] .empty-state-action-list {
|
|
display: flex;
|
|
gap: 0px;
|
|
border-radius: var(--radius-s);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Container for the buttons */
|
|
/* Only apply this bit on the desktop version */
|
|
body:not(.is-mobile) .workspace-leaf-content[data-type="empty"] .empty-state-action-list {
|
|
box-shadow: var(--input-shadow);
|
|
}
|
|
|
|
/* Mobile container adjustment */
|
|
body.is-mobile .workspace-leaf-content[data-type="empty"] .empty-state-action-list {
|
|
gap: 24px;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Button styling */
|
|
.workspace-leaf-content[data-type="empty"] .empty-state-action {
|
|
font-size: 0;
|
|
background-color: transparent !important;
|
|
color: var(--icon-color);
|
|
cursor: var(--cursor);
|
|
height: 40px;
|
|
width: 44px;
|
|
padding: 10px 12px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* More button styling */
|
|
.workspace-leaf-content[data-type="empty"] .empty-state-action:nth-child(1):before,
|
|
.workspace-leaf-content[data-type="empty"] .empty-state-action:nth-child(2):before,
|
|
.workspace-leaf-content[data-type="empty"] .empty-state-action:is(.mod-close, :nth-child(3).mod-close):before {
|
|
content: " ";
|
|
display: block;
|
|
height: 20px;
|
|
width: 20px;
|
|
background-color: var(--icon-color);
|
|
}
|
|
|
|
/* Separators between buttons */
|
|
body:not(.is-mobile) .workspace-leaf-content[data-type="empty"] .empty-state-action:nth-child(1),
|
|
body:not(.is-mobile) .workspace-leaf-content[data-type="empty"] .empty-state-action:nth-child(2),
|
|
body:not(.is-mobile) .workspace-leaf-content[data-type="empty"] .empty-state-action:nth-child(3):not(:last-child) {
|
|
box-shadow: inset -1px 0px 0px var(--divider-color);
|
|
}
|
|
|
|
/* Mobile button styling */
|
|
body.is-mobile .workspace-leaf-content[data-type="empty"] .empty-state-action {
|
|
height: var(--touch-size-m);
|
|
width: var(--touch-size-m);
|
|
padding: var(--size-2-2);
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--button-radius-medium);
|
|
box-shadow: var(--shadow);
|
|
background-color: var(--interactive-normal) !important;
|
|
}
|
|
|
|
/* Hover effects */
|
|
body:not(.new-tab-text-btn-restore) .workspace-leaf-content[data-type="empty"] .empty-state-action:hover {
|
|
background-color: var(--background-modifier-hover) !important;
|
|
color: var(--text-normal);
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
|
|
/* Active effects */
|
|
body:not(.new-tab-text-btn-restore) .workspace-leaf-content[data-type="empty"] .empty-state-action:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* Mobile Icon size fix */
|
|
body.is-mobile .workspace-leaf-content[data-type="empty"] .empty-state-action:before {
|
|
height: 24px !important;
|
|
width: 24px !important;
|
|
-webkit-mask-size: cover;
|
|
-webkit-mask-repeat: no-repeat;
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 13. Mobile & Tablet Overrides */
|
|
/* ================================================================= */
|
|
|
|
/* Sets the selected menu thing to have rounder corners in phone mode */
|
|
.is-phone .suggestion-item.is-selected,
|
|
.is-phone .suggestion-item.mod-complex.is-selected {
|
|
border-radius: var(--button-radius-circle);
|
|
}
|
|
|
|
/* Content blur for when the sidebar is open on mobile */
|
|
.is-mobile .workspace-drawer-backdrop {
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.is-tablet .workspace-drawer {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* Adds Neumorphic styling to vertical tabs on phone */
|
|
.is-phone .modal.mod-settings .vertical-tab-nav-item {
|
|
margin-top: 15px;
|
|
border-radius: var(--list-radius-medium);
|
|
}
|
|
|
|
/* Gets rid of some setting group UI in the settings */
|
|
.is-phone .modal.mod-settings .vertical-tab-header-group-items {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Edit settings groups in mobile to not have restraints */
|
|
.vertical-tab-header-group-items {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.vertical-tab-header-group-title {
|
|
color: var(--interactive-accent) !important;
|
|
}
|
|
|
|
/* Add neumorphic styling to settings & pin & sync buttons on mobile */
|
|
.is-mobile .sync-status-icon,
|
|
.is-mobile .clickable-icon.mod-pin,
|
|
.is-mobile .clickable-icon.mod-settings {
|
|
background-color: var(--button-color-1);
|
|
border-radius: var(--button-radius-medium);
|
|
box-shadow: var(--shadow);
|
|
touch-action: manipulation;
|
|
}
|
|
.is-mobile .sync-status-icon:hover,
|
|
.is-mobile .mod-pin:hover,
|
|
.is-mobile .clickable-icon.mod-settings:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.is-mobile .sync-status-icon.has-active-menu,
|
|
.is-mobile .sync-status-icon:active,
|
|
.is-mobile .mod-pin:active,
|
|
.is-phone .clickable-icon.mod-settings:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* Make the 'Pin' icon have an active color when the sidebar is pinned */
|
|
.is-tablet .workspace-drawer.is-pinned .clickable-icon.mod-pin {
|
|
background-color: var(--background-primary) !important;
|
|
}
|
|
|
|
/* Adds Neumorphic styling to the button to go back in mobile settings */
|
|
.is-phone .modal-setting-back-button {
|
|
background-color: var(--interactive-normal);
|
|
box-shadow: var(--shadow);
|
|
border-radius: var(--button-radius-medium);
|
|
transform: translateY(5px);
|
|
left: 10px !important;
|
|
}
|
|
.is-phone .modal-setting-back-button:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.is-phone .modal-setting-back-button:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* Add neumorphic styling to sidebar buttons on phone */
|
|
.is-phone .workspace-tab-header-inner {
|
|
margin-top: 15px;
|
|
}
|
|
.is-phone .workspace-drawer-tab-options {
|
|
padding-right: 10px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.is-mobile .workspace-drawer-tab-options-list {
|
|
background-color: var(--mobile-sidebar-background);
|
|
padding-right: 10px;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Sets the workspace drawer to have a shadow when it's expanded */
|
|
.is-mobile .workspace-drawer-tab-options .workspace-tab-header.workspace-drawer-tab-select .workspace-tab-header-inner{
|
|
box-shadow: var(--shadow-active);
|
|
--icon-color: var(--text-muted);
|
|
background-color: var(--background-primary-alt);
|
|
}
|
|
.is-mobile .workspace-drawer-tab-options.is-collapsed .workspace-tab-header.workspace-drawer-tab-select .workspace-tab-header-inner{
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.is-mobile .workspace-drawer-tab-options.is-collapsed .workspace-tab-header.workspace-drawer-tab-select .workspace-tab-header-inner:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
background-color: var(--background-primary-alt);
|
|
}
|
|
|
|
/* Adds rounded corners to sidebar on mobile */
|
|
.is-mobile .workspace-drawer.mod-left {
|
|
border-top-right-radius: var(--button-radius-large);
|
|
border-bottom-right-radius: var(--button-radius-large);
|
|
}
|
|
|
|
/* More sidebar option spacing for tablets */
|
|
.is-tablet .workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/* Set color for background of community items page (On Mobile) */
|
|
.community-modal-search-results {
|
|
background-color: var(--settings-background);
|
|
}
|
|
|
|
/* Sets background properties in the settings menu on tablet */
|
|
.modal-bg {
|
|
background: rgba(0, 0, 0, 0.1); /* extremely slight dim */
|
|
backdrop-filter: blur(4px) saturate(30%); /* blur & saturate the background */
|
|
}
|
|
|
|
/* More tablet sidebar settings */
|
|
.is-tablet .workspace-drawer-active-tab-container {
|
|
padding-top: 20px;
|
|
border-radius: var(--button-radius-large);
|
|
}
|
|
|
|
/* Set tablet mode sidebar colors */
|
|
.is-tablet .workspace-drawer-inner,
|
|
.is-tablet .mod-left .workspace-drawer-ribbon {
|
|
background-color: var(--background-tertiary) !important;
|
|
}
|
|
|
|
/* Spaces the two buttons on the markdown editing sheet correctly on mobile */
|
|
.is-mobile .view-action[aria-label="More options"] {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* Adds a shadow to the sidebar opener button on mobile */
|
|
.is-phone .view-header .view-header-left .view-action {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.is-phone .view-header .view-header-left .view-action:hover {
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
.is-phone .view-header .view-header-left .view-action:active {
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
/* Add specific padding for document title on mobile */
|
|
.is-phone .view-header-title {
|
|
padding-top: 13px !important;
|
|
height: 45px;
|
|
}
|
|
|
|
/* Add color to applicable back/forward buttons (left of document title) */
|
|
[aria-label="Navigate forward"][aria-disabled="true"],
|
|
[aria-label="Navigate back"][aria-disabled="true"] {
|
|
color: var(--text-muted) !important;
|
|
pointer-events: none; /* kills all hover, active, and click effects */
|
|
}
|
|
[aria-label="Navigate forward"][aria-disabled="false"],
|
|
[aria-label="Navigate back"][aria-disabled="false"] {
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* Set document title breadcrumb colors */
|
|
.workspace-leaf.mod-active .view-header-breadcrumb {
|
|
color: var(--text-muted);
|
|
}
|
|
.workspace-leaf.mod-active .view-header-title {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Sets the left sidebar opener to be a consistent color. Mostly useful in dark mode */
|
|
.is-phone .view-header .view-header-left .view-action {
|
|
background-color: var(--interactive-normal) !important;
|
|
}
|
|
.is-phone .view-header .view-header-left .view-action:hover {
|
|
background-color: var(--interactive-hover) !important;
|
|
}
|
|
|
|
/* Add a bunch of random dragable areas */
|
|
.titlebar-inner,
|
|
body:not(.is-mobile) .sidebar-toggle-button.mod-left,
|
|
body.is-hidden-frameless .titlebar .titlebar-button-container.mod-right::before,
|
|
body:not(.is-mobile) .sidebar-toggle-button.mod-right,
|
|
.workspace-tab-header-new-tab,
|
|
.workspace-tab-header-tab-list,
|
|
.workspace-tab-header-spacer,
|
|
body:not(.is-mobile) .sidebar-toggle-button,
|
|
.workspace-tab-header-container,
|
|
.workspace-ribbon,
|
|
.is-tablet .workspace-drawer-ribbon, /* Workspace ribbon, but in tablet mode */
|
|
.titlebar-button-container.mod-right {
|
|
-webkit-app-region: drag !important;
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 14. Animations */
|
|
/* ================================================================= */
|
|
|
|
/* "Scale up" style animation when opening prompts or search containers */
|
|
body:not(.is-phone) .prompt,
|
|
body:not(.is-mobile) .document-search-container,
|
|
body:not(.is-phone) .modal:not(:has(.checkbox-container)) {
|
|
animation: scale-up var(--anim-duration-fast) cubic-bezier(0.175, 0.885, 0.32, 1.095) both;
|
|
}
|
|
|
|
/* "Fade in" style animation */
|
|
body:not(.is-phone) .modal:has(.checkbox-container),
|
|
body:not(.is-phone) .modal.mod-settings,
|
|
body:not(.is-phone) .modal.mod-community-modal {
|
|
animation: var(--anim-duration-fast) fadeIn both;
|
|
}
|
|
|
|
/* "Slide up" style animation when opening new tabs */
|
|
.workspace-split .workspace-tabs:not(.mod-stacked) .workspace-leaf-content:not(:has(.surfing-settings-icon)) .view-content:not(.vignette-radial, .vignette-linear, .animate),
|
|
.workspace-leaf-content:not(:has(.view-content)) {
|
|
animation: slide-up var(--anim-duration-fast) forwards;
|
|
}
|
|
|
|
/* Defining the "Scale up" animation */
|
|
@keyframes scale-up {
|
|
0% {
|
|
transform: scale(0.75);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Defining the "Slide up" animation */
|
|
@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;
|
|
}
|
|
}
|
|
|
|
/* Applies a slight animation to a lot of neumorphic buttons */
|
|
button, /* Standard buttons */
|
|
.clickable-icon, /* Icons in headers/ribbons */
|
|
.view-action, /* Top right view buttons */
|
|
.nav-action-button, /* File explorer buttons */
|
|
.side-dock-ribbon-action, /* Far left sidebar buttons */
|
|
.mod-cta, /* "Call to Action" primary buttons */
|
|
.menu-item, /* Right-click menu items */
|
|
.setting-item-control, /* Toggles and inputs in settings */
|
|
.titlebar-button, /* Window close/min/max buttons */
|
|
.external-link, /* External links */
|
|
.internal-link, /* Obsidian wiki-links */
|
|
.vertical-tab-nav-item, /* Sidebar navigation items (like in Settings) */
|
|
.workspace-tab-header-inner, /* Title/label area inside a pane tab */
|
|
a, /* Basic HTML hyperlinks */
|
|
input, /* Text fields and search inputs */
|
|
[role='button'], /* Non-button elements behaving as buttons */
|
|
.clickable, /* General utility class for interactive elements */
|
|
.tag, /* Tag pills in Preview/Reading mode */
|
|
.cm-hashtag, /* Tag styling within the Live Editor */
|
|
.cm-url, /* Raw URLs within the Live Editor */
|
|
.bases-cards-item, /* Grid-style card items (often from plugins) */
|
|
.text-icon-button, /* Buttons containing both text and an icon */
|
|
.view-header-breadcrumb, /* File path navigation in the header */
|
|
.view-header-title, /* The editable filename at the top of a note */
|
|
.search-input-clear-button, /* The 'X' button inside search bars */
|
|
.empty-state-action, /* Buttons on the 'New Tab' or empty page */
|
|
.dropdown, /* Select menus and dropdown containers */
|
|
.checkbox-container /* Toggle switches and checkbox wrappers */
|
|
{
|
|
transition: var(--neumorphic-transition) !important;
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 15. Custom icons */
|
|
/* ================================================================= */
|
|
|
|
/* Tree icons positioning */
|
|
.tree-item-self .tree-item-icon {
|
|
height: var(--size-4-4);
|
|
--icon-color: currentColor;
|
|
}
|
|
|
|
.tree-item-self .tree-item-icon .svg-icon:not(.right-triangle) {
|
|
--icon-size: var(--icon-s);
|
|
--icon-stroke: var(--icon-s-stroke-width);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="tag"] .tree-item:not(:hover) .tree-item-icon.collapse-icon svg.svg-icon,
|
|
.workspace-leaf-content:is([data-type="bookmarks"], [data-type="file-explorer"]) .tree-item-icon.collapse-icon svg.svg-icon {
|
|
color: transparent;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="tag"] .tree-item:not(:hover) .tree-item-icon.collapse-icon,
|
|
.workspace-leaf-content:is([data-type="bookmarks"], [data-type="file-explorer"]) .tree-item-icon.collapse-icon {
|
|
background-color: currentColor;
|
|
opacity: var(--icon-opacity);
|
|
}
|
|
|
|
/* File icon positioning */
|
|
.workspace-leaf-content[data-type="tag"] .tree-item-self:not(:has(>.tree-item-icon.collapse-icon)):before,
|
|
.workspace-leaf-content[data-type="file-explorer"] :is(.nav-file-title, .nav-folder.mod-root>.nav-folder-title)::before {
|
|
content: " ";
|
|
position: absolute;
|
|
margin-left: calc(-1 * var(--size-4-5));
|
|
width: var(--size-4-4);
|
|
height: var(--size-4-4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: var(--icon-opacity);
|
|
background-color: currentColor;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-folder.mod-root>.nav-folder-title::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M14 12.8V3.2c0-.884-.264-1.2-1-1.2H3c-.736 0-1 .316-1 1.2v9.6c0 .884.264 1.2 1 1.2h10c.736 0 1-.316 1-1.2Z'/%3e%3cpath d='M9.978 7.04a2 2 0 1 1-3.956.587 2 2 0 0 1 3.956-.587ZM8 9.333v2m6-6.666h1m-1 6h1'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Opened folder icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .tree-item-icon.collapse-icon,
|
|
.workspace-leaf-content[data-type="bookmarks"] .tree-item-icon.collapse-icon {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M4 9.333 4.967 7.4a1.333 1.333 0 0 1 1.193-.733h7.173m0 0a1.333 1.333 0 0 1 1.294 1.666l-1.034 4a1.333 1.333 0 0 1-1.293 1H2.667A1.333 1.333 0 0 1 1.333 12V3.333C1.333 2.6 1.933 2 2.667 2h2.62a1.333 1.333 0 0 1 1.106.6l.547.8a1.333 1.333 0 0 0 1.107.6H12a1.333 1.333 0 0 1 1.333 1.333v1.334Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Unopened folder icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .is-collapsed .tree-item-icon.collapse-icon,
|
|
.workspace-leaf-content[data-type="bookmarks"] .is-collapsed .tree-item-icon.collapse-icon {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M2.667 13.333h10.666A1.333 1.333 0 0 0 14.667 12V5.333A1.333 1.333 0 0 0 13.333 4H8.047a1.333 1.333 0 0 1-1.107-.6l-.547-.8A1.333 1.333 0 0 0 5.287 2h-2.62a1.333 1.333 0 0 0-1.334 1.333V12c0 .733.6 1.333 1.334 1.333Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Markdown file icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M9.667 1.333H4a1.333 1.333 0 0 0-1.333 1.334v10.666A1.333 1.333 0 0 0 4 14.667h8a1.333 1.333 0 0 0 1.333-1.334V5L9.667 1.333Z'/%3e%3cpath d='M9.333 1.333v4h4'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* 'Canvas' file icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".canvas"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M6 2H2.667A.667.667 0 0 0 2 2.667v4.666c0 .369.298.667.667.667H6a.667.667 0 0 0 .667-.667V2.667A.667.667 0 0 0 6 2Zm7.333 0H10a.667.667 0 0 0-.667.667v2c0 .368.299.666.667.666h3.333A.667.667 0 0 0 14 4.667v-2A.667.667 0 0 0 13.333 2Zm0 6H10a.667.667 0 0 0-.667.667v4.666c0 .368.299.667.667.667h3.333a.667.667 0 0 0 .667-.667V8.667A.667.667 0 0 0 13.333 8ZM6 10.667H2.667a.667.667 0 0 0-.667.666v2c0 .368.298.667.667.667H6a.667.667 0 0 0 .667-.667v-2A.667.667 0 0 0 6 10.667Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* 'Base' file icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".base"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M6 2H2.667A.667.667 0 0 0 2 2.667V6c0 .368.298.667.667.667H6A.667.667 0 0 0 6.667 6V2.667A.667.667 0 0 0 6 2Zm0 7.333H2.667A.667.667 0 0 0 2 10v3.333c0 .368.298.667.667.667H6a.667.667 0 0 0 .667-.667V10A.667.667 0 0 0 6 9.333Zm3.333-6.666H14M9.333 6H14m-4.667 4H14m-4.667 3.333H14'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Unsupported file icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .is-unsupported.nav-file-title::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M9.667 1.333H4a1.333 1.333 0 0 0-1.333 1.334v10.666A1.333 1.333 0 0 0 4 14.667h8a1.333 1.333 0 0 0 1.333-1.334V5L9.667 1.333Z'/%3e%3cpath d='M6.667 6.867c.133-.267.333-.534.6-.667A1.4 1.4 0 0 1 9 6.467c.2.266.333.533.333.866C9.333 8.2 8 8.667 8 8.667m0 2.666h.007'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* ZIP file icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .is-unsupported.nav-file-title:is([data-path$=".zip"], [data-path$=".7z"])::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M2.667 14.667v-12c0-.334.133-.667.4-.934.266-.266.6-.4.933-.4h5.667L13.333 5v8.333c0 .334-.133.667-.4.934-.266.266-.6.4-.933.4h-1.333'/%3e%3cpath d='M9.333 1.333v4h4m-6.666 9.334a1.333 1.333 0 1 0 0-2.667 1.333 1.333 0 0 0 0 2.667Zm0-10V4m0 4v-.667m0 4.667v-1.333'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* WEBM file icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".webm"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M2.667 14.667H12a1.333 1.333 0 0 0 1.333-1.334V5L9.667 1.333H4a1.333 1.333 0 0 0-1.333 1.334v2'/%3e%3cpath d='M9.333 1.333v4h4M4.667 6.667 2.667 8H1.333v2.667h1.334l2 1.333V6.667Zm2.666.666c.427.534.667 1.247.667 2 0 .754-.24 1.467-.667 2'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* SVG file icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title:is([data-path$=".svg"], [data-path$=".bmp"], [data-path$=".jpeg"], [data-path$=".jpg"], [data-path$=".png"], [data-path$=".gif"])::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z'/%3e%3cpath d='M6 7.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666ZM14 10l-2.057-2.057a1.333 1.333 0 0 0-1.886 0L4 14'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* PDF file icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".pdf"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M9.667 1.333H4a1.333 1.333 0 0 0-1.333 1.334v10.666A1.333 1.333 0 0 0 4 14.667h8a1.333 1.333 0 0 0 1.333-1.334V5L9.667 1.333Z'/%3e%3cpath d='M9.333 1.333v4h4m-2.666 3.334H5.333m5.334 2.666H5.333M6.667 6H5.333'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Excalidraw file icon */
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".excalidraw.md"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' clip-path='url(%23a)'%3e%3cpath d='M8 12.667 12.667 8l2 2L10 14.667l-2-2Z'/%3e%3cpath d='m12 8.667-1-5-9.667-2.334L3.667 11l5 1L12 8.667ZM1.333 1.333l5.058 5.058'/%3e%3cpath d='M7.333 8.667a1.333 1.333 0 1 0 0-2.667 1.333 1.333 0 0 0 0 2.667Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="tag"] .tree-item:not(:hover) .tree-item-icon.collapse-icon {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' clip-path='url(%23a)'%3e%3cpath d='M8.781 1.333c.354 0 .693.14.943.391l4.473 4.473a1.6 1.6 0 0 1 0 2.272l-3.061 3.062a1.6 1.6 0 0 1-2.272 0L4.391 7.057A1.329 1.329 0 0 1 4 6.115V2a.667.667 0 0 1 .667-.667H8.78ZM1.333 4.667V8.78c0 .354.14.693.391.943l4.473 4.473a1.6 1.6 0 0 0 2.128.129'/%3e%3cpath d='M7 4.667A.333.333 0 1 0 7 4a.333.333 0 0 0 0 .667Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Tag Icon */
|
|
.workspace-leaf-content[data-type="tag"] .tree-item-self:not(:has(>.tree-item-icon.collapse-icon))::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg clip-path='url(%23a)'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M8 1.333H1.333V8l6.194 6.193a1.617 1.617 0 0 0 2.28 0l4.386-4.386a1.617 1.617 0 0 0 0-2.28L8 1.333ZM4.667 4.667h.006'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Bookmarks Icon */
|
|
.workspace-leaf-content[data-type="bookmarks"] svg.lucide-folder {
|
|
background-color: currentColor;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M1.333 6V3.333C1.333 2.6 1.933 2 2.667 2h2.62a1.333 1.333 0 0 1 1.106.6l.547.8a1.333 1.333 0 0 0 1.107.6h5.286a1.333 1.333 0 0 1 1.334 1.333V12a1.333 1.333 0 0 1-1.334 1.333h-12'/%3e%3cpath d='m5.333 10.667 2-2-2-2'/%3e%3cpath d='M1.333 10.667V10a1.333 1.333 0 0 1 1.334-1.333h4'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Empty state (Used when no search matches are found) */
|
|
body {
|
|
--empty-state-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3e%3cpath fill='black' fill-opacity='.15' d='M13.32 7.155a4.375 4.375 0 0 1-5.7 6.517l5.7-6.517ZM10 5.625a4.375 4.375 0 0 0-3.32 7.22l5.704-6.514A4.35 4.35 0 0 0 10 5.625ZM18.125 10A8.125 8.125 0 1 1 10 1.875 8.135 8.135 0 0 1 18.125 10Zm-2.5 0a5.6 5.6 0 0 0-1.476-3.793l.382-.483a.626.626 0 1 0-.937-.823l-.384.483a5.625 5.625 0 0 0-7.36 8.409l-.381.483a.625.625 0 0 0 .937.823l.384-.483A5.621 5.621 0 0 0 15.625 10Z'/%3e%3c/svg%3e");
|
|
}
|
|
.tag-pane-empty,
|
|
.bookmarks-pane-empty,
|
|
.pane-empty,
|
|
.search-empty-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding-left: 0px;
|
|
}
|
|
.tag-pane-empty::before,
|
|
.bookmarks-pane-empty::before,
|
|
.pane-empty::before,
|
|
.search-empty-state::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: var(--icon-color);
|
|
-webkit-mask-size: contain;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-image: var(--empty-state-image);
|
|
}
|
|
|
|
/* 'Options' icon (In settings) */
|
|
body:not(.is-phone) .vertical-tab-header-group:nth-last-of-type(3) .vertical-tab-header-group-title::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='black' d='m14.476 6.987-1.49-.445a5.177 5.177 0 0 0-.422-1.035l.73-1.365a.27.27 0 0 0-.05-.32l-1.062-1.066a.271.271 0 0 0-.32-.05l-1.355.725a5.165 5.165 0 0 0-1.05-.444l-.444-1.471a.271.271 0 0 0-.262-.183H7.25a.271.271 0 0 0-.258.191l-.444 1.467a5.169 5.169 0 0 0-1.058.445l-1.333-.72a.271.271 0 0 0-.32.048l-1.08 1.054a.271.271 0 0 0-.05.32l.72 1.333a5.169 5.169 0 0 0-.444 1.053l-1.47.445a.271.271 0 0 0-.192.258v1.502a.271.271 0 0 0 .191.258l1.48.444c.11.36.26.708.445 1.036l-.73 1.395a.271.271 0 0 0 .05.32l1.062 1.062a.271.271 0 0 0 .32.05l1.373-.734a5.25 5.25 0 0 0 1.022.418l.445 1.498a.27.27 0 0 0 .258.19h1.502a.271.271 0 0 0 .258-.19l.444-1.503a5.17 5.17 0 0 0 1.013-.417l1.383.737a.27.27 0 0 0 .32-.049l1.062-1.062a.27.27 0 0 0 .049-.32l-.738-1.378a5.17 5.17 0 0 0 .422-1.017l1.498-.445a.271.271 0 0 0 .191-.258V7.25a.271.271 0 0 0-.164-.262ZM8 10.444a2.444 2.444 0 1 1 0-4.888 2.444 2.444 0 0 1 0 4.888Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* 'Core Plugins' icon (In settings) */
|
|
body:not(.is-phone) .vertical-tab-header-group:nth-last-of-type(2) .vertical-tab-header-group-title::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='black' d='M13.249 7.111h-.36V3.924A.889.889 0 0 0 12 3.036H9.333A2.284 2.284 0 0 0 7.338.889a2.222 2.222 0 0 0-2.45 2.147h-3.11a.889.889 0 0 0-.89.888v3.632h1.25A1.391 1.391 0 0 1 3.556 8.75a1.333 1.333 0 0 1-.347 1.027 1.334 1.334 0 0 1-.987.444H.89v3.925a.889.889 0 0 0 .889.889H12a.889.889 0 0 0 .889-.89v-2.59h.444a2.223 2.223 0 0 0 2.223-2.45 2.29 2.29 0 0 0-2.307-1.995Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* 'Community Plugins' icon (In settings) */
|
|
body:not(.is-phone) .vertical-tab-header-group:nth-last-of-type(1) .vertical-tab-header-group-title::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg fill='black' clip-path='url(%23a)'%3e%3cpath d='M13.249 7.111h-.36v-.267H9.88a1.636 1.636 0 0 1-1.436-2.448l.89-1.467A2.276 2.276 0 0 0 7.337.889a2.222 2.222 0 0 0-2.45 2.147h-3.11a.889.889 0 0 0-.89.888v3.632h1.25A1.391 1.391 0 0 1 3.556 8.75a1.333 1.333 0 0 1-.347 1.027 1.334 1.334 0 0 1-.987.444H.89v3.925a.889.889 0 0 0 .889.889H12a.889.889 0 0 0 .889-.89v-2.59h.444a2.223 2.223 0 0 0 2.223-2.45 2.29 2.29 0 0 0-2.307-1.995Z'/%3e%3cpath d='M11.933.507 9.391 4.889a.569.569 0 0 0 .489.889h5.089a.569.569 0 0 0 .489-.89L12.916.508a.57.57 0 0 0-.983 0Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* 'Create New Note' icon (in New Tab Page) */
|
|
.workspace-leaf-content[data-type="empty"] .empty-state-action:nth-child(1):before {
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:none;}</style></defs><path d="M15,19.17H3.33c-1.38,0-2.5-1.12-2.5-2.5V5c0-1.38,1.12-2.5,2.5-2.5h5.83c.46,0,.83,.37,.83,.83s-.37,.83-.83,.83H3.33c-.46,0-.83,.37-.83,.83v11.67c0,.46,.37,.83,.83,.83H15c.46,0,.83-.37,.83-.83v-5.83c0-.46,.37-.83,.83-.83s.83,.37,.83,.83v5.83c0,1.38-1.12,2.5-2.5,2.5Z"/><path d="M6.67,14.17c-.22,0-.43-.09-.59-.24-.21-.21-.29-.51-.22-.79l.83-3.33c.04-.15,.11-.28,.22-.39L14.83,1.49h0c1.01-1.01,2.66-1.01,3.68,0,.49,.49,.76,1.14,.76,1.84s-.27,1.35-.76,1.84l-7.92,7.92c-.11,.11-.24,.18-.39,.22l-3.33,.83c-.07,.02-.13,.03-.2,.03Zm1.59-3.74l-.44,1.76,1.76-.44,7.75-7.75c.18-.18,.27-.41,.27-.66s-.1-.48-.27-.66c-.36-.36-.96-.36-1.32,0l-7.75,7.75Z"/><rect class="cls-1" width="20" height="20"/></svg>');
|
|
}
|
|
|
|
/* 'Open File' icon (in New Tab Page) */
|
|
.workspace-leaf-content[data-type="empty"] .empty-state-action:nth-child(2):before {
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:none;}</style></defs><g><path d="M17.26,5.66L12.67,1.08c-.16-.16-.37-.24-.59-.24H5c-1.38,0-2.5,1.12-2.5,2.5v2.5c0,.46,.37,.83,.83,.83s.83-.37,.83-.83V3.33c0-.46,.37-.83,.83-.83h5.83V6.67c0,.46,.37,.83,.83,.83h4.17v9.17c0,.46-.37,.83-.83,.83H3.33c-.46,0-.83,.37-.83,.83s.37,.83,.83,.83H15c1.38,0,2.5-1.12,2.5-2.5V6.25c0-.22-.09-.43-.24-.59Zm-4.76-2.4l2.57,2.57h-2.57V3.26Z"/><path d="M5.85,14.53l1.06,1.06c.16,.16,.38,.24,.59,.24s.43-.08,.59-.24c.33-.33,.33-.85,0-1.18l-1.06-1.06c.29-.5,.47-1.07,.47-1.68,0-1.84-1.5-3.33-3.33-3.33s-3.33,1.49-3.33,3.33,1.5,3.33,3.33,3.33c.62,0,1.19-.18,1.68-.47Zm-3.35-2.86c0-.92,.75-1.67,1.67-1.67s1.67,.75,1.67,1.67-.75,1.67-1.67,1.67-1.67-.75-1.67-1.67Z"/></g><rect class="cls-1" width="20" height="20"/></svg>');
|
|
}
|
|
|
|
/* 'Close' icon (in New Tab Page) */
|
|
.workspace-leaf-content[data-type="empty"] .empty-state-action:is(.mod-close, :nth-child(3).mod-close):before {
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:none;}</style></defs><path d="M11.18,10l5.24-5.24c.33-.33,.33-.85,0-1.18s-.85-.33-1.18,0l-5.24,5.24L4.76,3.58c-.33-.33-.85-.33-1.18,0s-.33,.85,0,1.18l5.24,5.24L3.58,15.24c-.33,.33-.33,.85,0,1.18,.16,.16,.38,.24,.59,.24s.43-.08,.59-.24l5.24-5.24,5.24,5.24c.16,.16,.38,.24,.59,.24s.43-.08,.59-.24c.33-.33,.33-.85,0-1.18l-5.24-5.24Z"/><rect class="cls-1" width="20" height="20"/></svg>');
|
|
}
|
|
|
|
/* New Tab background image (Obsidian Logo) (in New Tab Page) */
|
|
.workspace-leaf-content[data-type="empty"] .empty-state::before {
|
|
content: "";
|
|
width: 100%;
|
|
height: 30%;
|
|
background-color: var(--icon-color);
|
|
-webkit-mask-size: contain;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22none%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.1%22%20fill-rule%3D%22evenodd%22%20d%3D%22M41.025%2044.046c-1.565-4.198-2.066-7.455-1.95-10.13.126-2.9.975-5.058%201.89-6.923.243-.495.485-.96.717-1.406.66-1.27%201.243-2.393%201.57-3.657.398-1.537.4-3.279-.519-5.633a3.197%203.197%200%200%200-3.486.523l-9.875%208.884a3.197%203.197%200%200%200-1.023%201.9c-.118.78-.259%201.752-.404%202.757-.25%201.72-.512%203.537-.7%204.67%202.313%201.47%205.437%203.94%207.093%207.98.226.553.424%201.132.589%201.74%202.033-.46%204.085-.765%206.098-.705Zm1.587.128c.957.129%201.901.355%202.827.701%203.307%201.238%206.25%203.964%208.665%208.966l.08-.12a139.935%20139.935%200%200%200%204.196-6.627%201.618%201.618%200%200%200-.122-1.797c-1.03-1.364-3-4.138-4.074-6.706-1.104-2.64-1.269-6.74-1.278-8.736a3.406%203.406%200%200%200-.714-2.097l-7.383-9.38a9.237%209.237%200%200%201-.165%203.912c-.371%201.437-1.062%202.763-1.744%204.075a60.2%2060.2%200%200%200-.644%201.26c-.87%201.771-1.631%203.728-1.745%206.353-.111%202.562.393%205.815%202.101%2010.196Zm4.66%2019.708c2.13.59%204.273-1.12%204.567-3.31.218-1.618.633-3.462%201.408-5.16-2.394-5.402-5.261-8.05-8.312-9.19-2.97-1.112-6.244-.85-9.698-.068.666%203.863.018%208.748-3%2014.906.158.036.32.06.483.072l4.844.367c2.362.182%204.92.956%207.328%201.684.816.246%201.613.488%202.38.7Zm-16.329-3.449c3.777-7.702%203.612-13.101%202.065-16.876-1.404-3.426-3.996-5.637-6.134-7.054-.91%202.125-5.19%2011.535-5.19%2011.535a3.196%203.196%200%200%200%20.622%203.535l8.348%208.597c.091.094.188.182.29.263Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
/* Close Icon Mask */
|
|
.titlebar-button-container.mod-right .titlebar-button.mod-close::after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-width='1.5' d='m4.464 11.535 7.071-7.07m.001 7.071L4.464 4.464'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Maximize Icon Mask (in Navbar) */
|
|
body:not(.is-maximized) .titlebar-button-container.mod-right .titlebar-button.mod-maximize::after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3crect width='8' height='8' x='4' y='4' stroke='black' stroke-width='1.5' rx='2'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Maximize Icon Mask (When window is already MAXIMIZED - "Restore") (in Navbar) */
|
|
.is-maximized .titlebar-button-container.mod-right .titlebar-button.mod-maximize::after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-width='1.5'%3e%3crect width='7' height='7' x='3' y='6' rx='2'/%3e%3cpath d='M9.5 10H11a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v1.5'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Minimize Icon Mask (in Navbar)*/
|
|
.titlebar-button-container.mod-right .titlebar-button.mod-minimize::after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-width='1.5' d='M3.5 8h9'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* ================================================================= */
|
|
/* 16. Custom checkbox icons */
|
|
/* (Closes issue https://github.com/sq1000000/NeuBorder/issues/1) */
|
|
/* ================================================================= */
|
|
|
|
input[data-task="<"]:checked,
|
|
li[data-task="<"]>input:checked,
|
|
input[data-task=">"]:checked,
|
|
li[data-task=">"]>input:checked,
|
|
input[data-task="d"]:checked,
|
|
li[data-task="d"]>input:checked,
|
|
input[data-task="u"]:checked,
|
|
li[data-task="u"]>input:checked,
|
|
input[data-task="S"]:checked,
|
|
li[data-task="S"]>input:checked,
|
|
input[data-task="“"]:checked,
|
|
li[data-task="“"]>input:checked,
|
|
input[data-task="\""]:checked,
|
|
li[data-task="\""]>input:checked,
|
|
input[data-task="c"]:checked,
|
|
li[data-task="c"]>input:checked,
|
|
input[data-task="p"]:checked,
|
|
li[data-task="p"]>input:checked,
|
|
input[data-task="n"]:checked,
|
|
li[data-task="n"]>input:checked,
|
|
input[data-task="b"]:checked,
|
|
li[data-task="b"]>input:checked,
|
|
input[data-task="l"]:checked,
|
|
li[data-task="l"]>input:checked,
|
|
input[data-task="I"]:checked,
|
|
li[data-task="I"]>input:checked,
|
|
input[data-task="*"]:checked,
|
|
li[data-task="*"]>input:checked {
|
|
--checkbox-marker-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
background-image: none;
|
|
background-color: currentColor;
|
|
-webkit-mask-size: var(--checkbox-icon);
|
|
-webkit-mask-position: 50% 50%
|
|
}
|
|
/* Exclamation icon with '!' indicator - Important/Priority */
|
|
input[data-task="!"]:checked,
|
|
li[data-task="!"]>input:checked {
|
|
--checkbox-color: var(--color-orange);
|
|
--checkbox-color-hover: var(--color-orange);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
/* Exclamation mark icon svg */
|
|
input[data-task="!"]:checked:after,
|
|
li[data-task="!"]>input:checked:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' fill-rule='evenodd' d='M8 0a2.463 2.463 0 0 0-2.43 2.864v.002L6.686 9.55a1.334 1.334 0 0 0 2.63 0l1.114-6.685v-.002A2.463 2.463 0 0 0 8 0Zm0 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z' clip-rule='evenodd'/%3e%3c/svg%3e");
|
|
}
|
|
/* Question mark icon with '?' indicator - Help/Query */
|
|
input[data-task="?"]:checked,
|
|
li[data-task="?"]>input:checked {
|
|
--checkbox-color: var(--color-pink);
|
|
--checkbox-color-hover: var(--color-pink);
|
|
}
|
|
/* Question mark icon svg */
|
|
input[data-task="?"]:checked:after,
|
|
li[data-task="?"]>input:checked:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M12.871 3.692c0 3.56-3.956 3.319-3.956 5.78v.014c0 .284-.23.514-.514.514H6.243a.514.514 0 0 1-.515-.514V9.34c0-3.803 3.473-3.56 3.473-5.341 0-.77-.571-1.23-1.517-1.23-.768 0-1.554.335-2.268 1.022a.512.512 0 0 1-.67.031l-1.419-1.11a.513.513 0 0 1-.056-.76C4.457.731 5.997 0 8.036 0c3.23 0 4.835 1.736 4.835 3.692ZM9.355 14c0 1.099-.88 2-2 2-1.1 0-2-.901-2-2s.9-2 2-2c1.12 0 2 .901 2 2Z'/%3e%3c/svg%3e");
|
|
}
|
|
/* Star icon with '*' indicator - Favorite/Featured */
|
|
input[data-task="*"]:checked,
|
|
li[data-task="*"]>input:checked {
|
|
--checkbox-color-hover: var(--color-yellow);
|
|
color: var(--color-yellow);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M8.91,.58c-.08-.17-.21-.32-.37-.42C8.38,.05,8.19,0,8,0s-.38,.05-.54,.16c-.16,.1-.29,.25-.37,.42l-1.93,4.12L.85,5.36c-.18,.03-.35,.1-.49,.22-.14,.12-.25,.27-.3,.45-.06,.17-.07,.36-.03,.54,.04,.18,.13,.34,.26,.48l3.15,3.23-.75,4.57c-.03,.19,0,.38,.06,.55,.07,.17,.19,.32,.35,.43,.15,.11,.33,.17,.52,.18,.19,0,.37-.03,.54-.12l3.84-2.13,3.84,2.13c.16,.09,.35,.13,.54,.12,.19-.01,.37-.07,.52-.18,.15-.11,.27-.26,.35-.43,.07-.17,.09-.36,.06-.55l-.75-4.57,3.15-3.23c.13-.13,.22-.3,.26-.48,.04-.18,.03-.37-.03-.54-.06-.17-.16-.33-.31-.45-.14-.12-.31-.2-.49-.22l-4.31-.66L8.91,.58Z"/></svg>');
|
|
}
|
|
/* Info icon with 'i' indicator - Information/Note */
|
|
input[data-task="i"]:checked,
|
|
li[data-task="i"]>input:checked {
|
|
--checkbox-color: var(--color-cyan);
|
|
--checkbox-color-hover: var(--color-cyan);
|
|
}
|
|
/* Info icon svg */
|
|
input[data-task="i"]:checked:after,
|
|
li[data-task="i"]>input:checked:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M10.34 14.025c-.007.002-.56.186-1.04.186-.265 0-.372-.055-.406-.08-.168-.116-.48-.335.054-1.4l1-1.993c.593-1.184.681-2.33.245-3.226-.356-.733-1.039-1.236-1.92-1.416A5 5 0 0 0 7.315 6C5.466 6 4.221 7.08 4.17 7.125a.5.5 0 0 0 .493.848c.005-.002.559-.187 1.04-.187.262 0 .368.055.401.078.17.119.482.34-.05 1.403l-1.001 1.995c-.594 1.185-.681 2.33-.245 3.225.356.733 1.038 1.236 1.921 1.416.314.063.636.097.954.097 1.85 0 3.096-1.08 3.148-1.126a.5.5 0 0 0-.49-.85ZM9.5 5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3e%3c/svg%3e");
|
|
}
|
|
/* Half-filled circle icon with '/' indicator - In Progress */
|
|
input[data-task="/"]:checked,
|
|
li[data-task="/"]>input:checked {
|
|
--checkbox-color-hover: var(--color-yellow);
|
|
--checkbox-color: var(--color-yellow);
|
|
border: 2px var(--color-yellow) solid;
|
|
background: conic-gradient(var(--color-yellow) 0% 37.5%, transparent 37.5% 100%);
|
|
}
|
|
/* '/' icon svg */
|
|
input[data-task="/"]:checked:after,
|
|
li[data-task="/"]>input:checked:after {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
-webkit-mask-image: none;
|
|
}
|
|
/* Lightbulb icon with 'I' indicator - Idea/Inspiration */
|
|
input[data-task="I"]:checked,
|
|
li[data-task="I"]>input:checked {
|
|
--checkbox-color-hover: var(--color-orange);
|
|
color: var(--color-orange);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><g><rect class="cls-1" width="16" height="16"/><path d="M9,1c0-.27-.11-.52-.29-.71-.19-.19-.44-.29-.71-.29s-.52,.11-.71,.29c-.19,.19-.29,.44-.29,.71v1c0,.27,.11,.52,.29,.71,.19,.19-.44,.29-.71,.29s.52-.11,.71-.29c.19-.19,.29-.44,.29-.71V1Zm4.66,2.76c.18-.19,.28-.44,.28-.7,0-.26-.11-.51-.29-.7s-.44-.29-.7-.29c-.26,0-.51,.1-.7,.28l-.71,.71c-.18,.19-.28,.44-.28,.7,0-.26,.11-.51,.29,.7s.44,.29,.7,.29c.26,0,.51-.1,.7-.28l.71-.71Zm2.34,4.24c0,.27-.11,.52-.29,.71-.19,.19-.44,.29-.71,.29h-1c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71s.11-.52,.29-.71c.19-.19,.44-.29,.71-.29h1c.27,0,.52,.11,.71,.29,.19,.19,.29,.44,.29,.71ZM3.05,4.46c.09,.1,.2,.17,.32,.22,.12,.05,.25,.08,.39,.08,.13,0,.26-.02,.39-.07,.12-.05,.23-.12,.33-.22,.09-.09,.17-.21,.22-.33,.05-.12,.08-.25,.07-.39,0-.13-.03-.26-.08-.39-.05-.12-.13-.23-.22-.32l-.71-.71c-.19-.18-.44-.28-.7-.28-.26,0-.51,.11-.7,.29s-.29,.44-.29,.7c0,.26,.1,.51,.28,.7l.71,.71Zm-.05,3.54c0,.27-.11,.52-.29,.71-.19,.19-.44,.29-.71,.29H1c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71s.11-.52,.29-.71c.19-.19,.44-.29,.71-.29h1c.27,0,.52,.11,.71,.29,.19,.19,.29,.44,.29,.71Zm3,6v-1h4v1c0,.53-.21,1.04-.59,1.41-.38,.38-.88,.59-1.41,.59s-1.04-.21-1.41-.59c-.38-.38-.59-.88-.59-1.41Zm4-2c.02-.34,.21-.65,.48-.86,.65-.51,1.13-1.22,1.36-2.02,.23-.8,.21-1.65-.06-2.43-.27-.79-.78-1.47-1.46-1.95-.68-.48-1.49-.74-2.32-.74s-1.64,.26-2.32,.74c-.68,.48-1.19,1.16-1.46,1.95-.27,.79-.29,1.64-.06,2.43,.23,.8,.71,1.5,1.36,2.02,.27,.21,.46,.52,.48,.86h4Z"/></g></svg>');
|
|
}
|
|
/* Location/Map Pin icon with 'l' indicator - Location/Place */
|
|
input[data-task="l"]:checked,
|
|
li[data-task="l"]>input:checked {
|
|
--checkbox-color-hover: var(--color-red);
|
|
color: var(--color-red);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M8,.12c-1.64,0-3.21,.65-4.37,1.81-1.16,1.16-1.81,2.73-1.81,4.37,0,1.34,.44,2.64,1.25,3.71,0,0,.17,.22,.2,.25l4.74,5.6,4.75-5.6s.19-.25,.19-.25h0c.81-1.07,1.25-2.37,1.25-3.71,0-1.64-.65-3.21-1.81-4.37C11.21,.78,9.64,.13,8,.12Zm0,8.44c-.45,0-.88-.13-1.25-.38-.37-.25-.66-.6-.83-1.01-.17-.41-.21-.86-.13-1.3,.09-.44,.3-.84,.62-1.15,.31-.31,.72-.53,1.15-.62,.44-.09,.89-.04,1.3,.13,.41,.17,.76,.46,1.01,.83,.25,.37,.38,.81,.38,1.25,0,.6-.24,1.17-.66,1.59-.42,.42-.99,.66-1.59,.66Z"/></svg>');
|
|
}
|
|
/* Strikethrough icon with '-' indicator - Cancelled/Dropped (Checkbox styling) */
|
|
input[data-task="-"]:checked,
|
|
li[data-task="-"]>input:checked {
|
|
--checkbox-color: var(--text-faint);
|
|
--checkbox-color-hover: var(--text-faint);
|
|
}
|
|
/* Strikethrough icon with '-' indicator (Checkmark replacement) */
|
|
input[data-task="-"]:checked:after,
|
|
li[data-task="-"]>input:checked:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' fill-rule='evenodd' d='M0 8a1.5 1.5 0 0 1 1.5-1.5h13a1.5 1.5 0 0 1 0 3h-13A1.5 1.5 0 0 1 0 8Z' clip-rule='evenodd'/%3e%3c/svg%3e");
|
|
}
|
|
/* Strikethrough text styling for '-' indicator (Strikes through the label text) */
|
|
.markdown-preview-view ul li[data-task="-"].task-list-item.is-checked,
|
|
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:is([data-task="-"]),
|
|
li[data-task="-"].task-list-item.is-checked {
|
|
color: var(--text-faint);
|
|
text-decoration: line-through solid var(--text-faint) 1px
|
|
}
|
|
/* Bookmark icon with 'b' indicator - Bookmarked/Save for later */
|
|
input[data-task="b"]:checked,
|
|
li[data-task="b"]>input:checked {
|
|
--checkbox-color-hover: var(--color-blue);
|
|
color: var(--color-blue);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" 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><rect class="cls-1" width="16" height="16"/><path class="cls-2" d="M4.25,.5c-.6,0-1.17,.24-1.59,.66-.42,.42-.66,.99-.66,1.59V14.1c0,.2,.05,.39,.15,.56,.1,.17,.24,.31,.41,.41,.17,.1,.36,.15,.56,.15,.2,0,.39-.05,.56-.15l3.94-2.25c.11-.06,.24-.1,.37-.1s.26,.03,.37,.1l3.95,2.25c.17,.1,.36,.15,.56,.15,.2,0,.39-.05,.56-.15,.17-.1,.31-.24,.41-.41s.15-.36,.15-.56V2.75c0-.6-.24-1.17-.66-1.59-.42-.42-.99-.66-1.59-.66H4.25Z"/></svg>');
|
|
}
|
|
/* Note icon with 'n' indicator - Notes/Draft */
|
|
input[data-task="n"]:checked,
|
|
li[data-task="n"]>input:checked {
|
|
--checkbox-color-hover: var(--color-cyan);
|
|
color: var(--color-cyan);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M2.75,14.75c-.41,0-.77-.15-1.06-.44-.29-.29-.44-.65-.44-1.06V2.75c0-.41,.15-.77,.44-1.06,.29-.29,.65-.44,1.06-.44H13.25c.41,0,.77,.15,1.06,.44,.29,.29,.44,.65,.44,1.06v7.5l-4.5,4.5H2.75Zm4.5-5.25c.21,0,.39-.07,.53-.22,.14-.14,.22-.32,.22-.53s-.07-.39-.22-.53c-.14-.14-.32-.22-.53-.22h-2.25c-.21,0-.39,.07-.53,.22-.14-.14,.22,.32-.22,.53s.07,.39,.22,.53c.14,.14,.32,.22,.53,.22h2.25Zm3.75-3c.21,0,.39-.07,.53-.22,.14-.14,.22-.32,.22-.53s-.07-.39-.22-.53c-.14-.14-.32-.22-.53-.22H5c-.21,0-.39,.07-.53,.22-.14-.14,.22,.32-.22,.53s.07,.39,.22,.53,.32,.22,.53,.22h6Zm-1.5,6.75l3.75-3.75h-3c-.21,0-.39,.07-.53,.22s-.22,.32-.22,.53v3Z"/></svg>');
|
|
}
|
|
/* Thumbs up icon with 'p' indicator - Pro/Positive/Agree */
|
|
input[data-task="p"]:checked,
|
|
li[data-task="p"]>input:checked {
|
|
--checkbox-color-hover: var(--color-green);
|
|
color: var(--color-green);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><path class="cls-1" d="M0,16H16V0H0V16Z"/><g><path d="M3.33,15h-.72c-.33,0-.66-.13-.9-.35-.25-.23-.4-.54-.43-.87L.73,7.11c-.02-.18,0-.37,.07-.54,.06-.18,.16-.34,.28-.47,.13-.14,.28-.25,.45-.32,.17-.07,.35-.11,.54-.11h1.27c.36,0,.69,.14,.94,.39,.25,.25,.39,.59,.39,.94v6.67c0,.35-.14,.7-.39,.94-.25,.25-.59,.39-.94,.39Z"/><path d="M15.4,7.69l-1.79,6.34c-.08-.28-.25,.53-.48,.7-.23,.17-.52,.27-.81,.27H6.67c-.36,0-.69-.14-.94-.39-.25-.25-.39-.59-.39-.94V7.13c0-.53,.32-1.02,.81-1.25,.79-.37,1.38-.82,1.62-1.22,.36-.6,.53-1.78,.57-2.65,0-.06,0-.12,.01-.18,.06-.41,.34-.72,.73-.8,.07-.01,.14-.02,.21-.02,.8,0,1.73,.83,2.12,1.48,.29,.48,.41,1.09,.36,1.84-.03,.55-.18,1.05-.33,1.55l-.04,.12h2.72c.21,0,.41,.05,.6,.14,.18,.09,.34,.23,.47,.39,.12,.17,.21,.35,.24,.55,.04,.2,.03,.41-.03,.61ZM9,1.94h0Z"/></g></svg>');
|
|
}
|
|
/* Thumbs down icon with 'c' indicator - Con/Negative/Disagree */
|
|
input[data-task="c"]:checked,
|
|
li[data-task="c"]>input:checked {
|
|
--checkbox-color-hover: var(--color-red);
|
|
color: var(--color-red);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><path class="cls-1" d="M0,0H16V16H0V0Z"/><g><path d="M3.33,1h-.72c-.33,0-.66-.13-.9,.35-.25-.23-.4-.54-.43-.87l-.56,6.67c-.02,.18,0,.37,.07,.54,.06-.18,.16,.34,.28,.47,.13-.14,.28-.25,.45-.32,.17,.07,.35,.11,.54-.11h1.27c.36,0,.69-.14,.94-.39,.25-.25,.39-.59,.39-.94V2.33c0-.35-.14-.7-.39-.94-.25-.25-.59-.39-.94-.39Z"/><path d="M15.4,8.31l-1.79-6.34c-.08-.28-.25-.53-.48-.7-.23-.17-.52-.27-.81-.27H6.67c-.36,0-.69,.14-.94,.39-.25-.25-.39-.59-.39-.94v6.54c0,.53,.32,1.02,.81,1.25,.79,.37,1.38-.82,1.62,1.22,.36,.6,.53,1.78,.57,2.65,0,.06,0-.12,.01-.18,.06-.41,.34-.72,.73-.8,.07-.01,.14-.02,.21,.02,.8,0,1.73-.83,2.12-1.48,.29-.48,.41-1.09,.36-1.84-.03-.55-.18-1.05-.33-1.55l-.04-.12h2.72c.21,0,.41-.05,.6-.14,.18-.09,.34-.23,.47,.39,.12-.17,.21,.35,.24-.55,.04-.2,.03-.41-.03-.61Zm-6.4,5.75h0Z"/></g></svg>');
|
|
}
|
|
/* Quote icon with '“' or '"' indicator - Quotes/Citations */
|
|
input[data-task="“"]:checked,
|
|
li[data-task="“"]>input:checked,
|
|
input[data-task="\""]:checked,
|
|
li[data-task="\""]>input:checked {
|
|
--checkbox-color-hover: var(--color-purple);
|
|
color: var(--color-purple);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M2.46,4.19c.94-1.01,2.35-1.53,4.21-1.53h.67v1.88l-.54,.11c-.91,.18-1.55,.54-1.89,1.07-.18,.28-.28,.61-.29,.94h2.05c.18,0,.35,.07,.47,.2,.13,.13,.2,.29,.2,.47v4.67c0,.74-.6,1.33-1.33,1.33H2c-.18,0-.35-.07-.47-.2-.13-.12-.2-.29-.2-.47V7.39c0-.07-.13-1.83,1.13-3.19ZM13.33,13.33h-4c-.18,0-.35-.07-.47-.2-.13-.12-.2-.29-.2-.47V7.39c0-.07-.13-1.83,1.13-3.19,.94-1.01,2.35-1.53,4.21-1.53h.67v1.88l-.54,.11c-.91,.18-1.55,.54-1.89,1.07-.18,.28-.28,.61-.29,.94h2.05c.18,0,.35,.07,.47,.2,.12,.13,.2,.29,.2,.47v4.67c0,.74-.6,1.33-1.33,1.33Z"/></svg>');
|
|
}
|
|
/* Dollar/Money icon with 'S' indicator - Financial/Savings/Cost */
|
|
input[data-task="S"]:checked,
|
|
li[data-task="S"]>input:checked {
|
|
--checkbox-color-hover: var(--color-green);
|
|
color: var(--color-green);
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M12.781 8.34c-.84-.665-2.146-1.247-3.354-1.715V4.396a28.48 28.48 0 0 1 2.123.772c.096.04.209.006.265-.082l1.193-1.805a.219.219 0 0 0-.079-.314c-.68-.365-2.072-.93-3.502-1.293V.366a.27.27 0 0 0-.27-.271H6.985a.271.271 0 0 0-.271.271v.973c-2.014.092-3.38.795-4.166 2.147-.616 1.06-.613 2.255.004 3.118.645.922 1.699 1.332 3.031 1.851l.172.066c.309.118.634.239.959.359v2.715c-1.41-.335-2.736-1.023-2.98-1.189a.218.218 0 0 0-.296.048l-1.444 1.883a.211.211 0 0 0-.043.163.22.22 0 0 0 .086.145c.874.648 2.145 1.266 3.403 1.654a12.4 12.4 0 0 0 1.275.316v1.018c0 .148.121.27.271.27h2.173a.27.27 0 0 0 .27-.27v-.845c1.928-.16 3.368-.997 4.192-2.45.793-1.402.49-2.858-.839-3.998ZM6.712 4.014v1.643c-.624-.2-.993-.394-.953-.872.04-.49.51-.69.954-.771Zm2.716 5.875c.458.205.806.42.927.689.069.152.063.326-.016.533-.14.364-.502.553-.912.649V9.889Z'/%3e%3c/svg%3e");
|
|
}
|
|
/* Upward trending arrow icon with 'u' indicator - Improvement/Up/Increase */
|
|
input[data-task="u"]:checked,
|
|
li[data-task="u"]>input:checked {
|
|
--checkbox-color-hover: var(--color-green);
|
|
color: var(--color-green);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" 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><rect class="cls-1" width="16" height="16"/><path class="cls-2" d="M10,5c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71s.11-.52,.29-.71c.19-.19,.44-.29,.71-.29h5c.27,0,.52,.11,.71,.29,.19,.19,.29,.44,.29,.71v5c0,.27-.11,.52-.29,.71-.19,.19-.44,.29-.71,.29s-.52-.11-.71-.29c-.19-.19-.29-.44-.29-.71v-2.59l-4.29,4.29c-.19,.19-.44,.29-.71,.29s-.52-.11-.71-.29l-2.29-2.29L1.71,12.71c-.19,.18-.44,.28-.7,.28-.26,0-.51-.11-.7-.29S.01,12.26,.01,12c0-.26,.1-.51,.28-.7L5.29,6.29c.19-.19,.44-.29,.71-.29s.52,.11,.71,.29l2.29,2.29,3.59-3.59h-2.59Z"/></svg>');
|
|
}
|
|
/* Downward arrow icon with 'd' indicator - Decline/Down/Decrease */
|
|
input[data-task="d"]:checked,
|
|
li[data-task="d"]>input:checked {
|
|
--checkbox-color-hover: var(--color-red);
|
|
color: var(--color-red);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" 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><rect class="cls-1" width="16" height="16"/><path class="cls-2" d="M10,11c-.27,0-.52,.11-.71,.29-.19-.19-.29,.44-.29,.71s.11,.52,.29,.71c.19,.19,.44,.29,.71,.29h5c.27,0,.52-.11,.71-.29,.19-.19,.29-.44,.29-.71V7c0-.27-.11-.52-.29-.71-.19-.19-.44-.29-.71-.29s-.52-.11-.71,.29c-.19-.19-.29-.44-.29-.71v2.59l-4.29-4.29c-.19-.19-.44-.29-.71-.29s-.52-.11-.71-.29l-2.29,2.29L1.71,3.29c-.19-.18-.44-.28-.7-.28-.26,0-.51,.11-.7,.29S.01,3.74,.01,4c0,.26,.1,.51,.28,.7l5,5c.19,.19,.44,.29,.71,.29s.52-.11,.71-.29l2.29-2.29,3.59,3.59h-2.59Z"/></svg>');
|
|
}
|
|
/* Rightward 'plane' or 'arrow' icon with '>' indicator - Forward/Delegate/Reschedule */
|
|
input[data-task=">"]:checked,
|
|
li[data-task=">"]>input:checked {
|
|
--checkbox-color-hover: var(--color-pink);
|
|
color: var(--color-pink);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M1.72,1.05c-.08-.04-.18-.06-.27-.05-.09,0-.18,.04-.26,.1-.07,.06-.13,.13-.16,.22-.03,.09-.04,.18-.02,.27l1.4,4.85c.03,.09,.08,.17,.15,.23,.07,.06,.16,.1,.25,.12l5.69,.95c.27,.05,.27,.44,0,.49l-5.69,.95c-.09,.02-.18,.06-.25,.12s-.12,.14-.15,.23l-1.4,4.85c-.02,.09-.01,.19,.02,.27,.03,.09,.09,.16,.16,.22,.07,.06,.16,.09,.26,.1,.09,0,.19,0,.27-.05l13-6.5c.08-.04,.15-.11,.2-.18,.05-.08,.07-.17,.07-.26s-.03-.18-.07-.26c-.05-.08-.12-.14-.2-.18L1.72,1.05Z"/></svg>');
|
|
}
|
|
/* Calendar icon with '<' indicator - Scheduling/Date */
|
|
input[data-task="<"]:checked,
|
|
li[data-task="<"]>input:checked {
|
|
--checkbox-color-hover: var(--color-blue);
|
|
color: var(--color-blue);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M2.75,15.5H13.25c.83,0,1.5-.67,1.5-1.5V3.5c0-.83-.67-1.5-1.5-1.5h-1.5V.5h-1.5v1.5H5.75V.5h-1.5v1.5h-1.5c-.83,0-1.5,.67-1.5,1.5V14c0,.83,.67,1.5,1.5,1.5Zm0-11.25H13.25v1.5H2.75v-1.5Z"/></svg>');
|
|
} |