1202 lines
36 KiB
CSS
1202 lines
36 KiB
CSS
.theme-light {
|
|
/* Background parameters from Style Settings */
|
|
--ss-light-h: 0;
|
|
/* saturation is normalized to 0-10 and multiplied by 10, range 0-100 */
|
|
--ss-light-s: 3.92%;
|
|
/* lightness is normalized to 0-10 and multiplied by 5 + 50, range 50-100 */
|
|
--ss-light-l: 9.86%;
|
|
/* contrast is normalized to 0-10 and multiplied by 4.8, range 0-48 (adds to min. contrast of 2) */
|
|
--ss-light-contrast: 0%;
|
|
|
|
/* Background Color Components */
|
|
--background-h: var(--ss-light-h);
|
|
--background-s: calc(var(--ss-light-s) * 10);
|
|
--background-l: calc(var(--ss-light-l) * 5 + 50%);
|
|
--background-contrast: calc(var(--ss-light-contrast) * 4.8);
|
|
--background-secondary-s: calc(var(--background-s) * 0.875);
|
|
--background-secondary-l: calc(var(--background-l) - 2% - var(--background-contrast));
|
|
|
|
/* Background Color Definitions */
|
|
--background-primary: hsl(var(--background-h), var(--background-s), var(--background-l));
|
|
--background-secondary: hsl(var(--background-h), var(--background-secondary-s), var(--background-secondary-l));
|
|
--background-dark: rgb(23, 35, 62);
|
|
--background-extra-dark: #000;
|
|
--background-primary-alt: var(--background-secondary);
|
|
--background-secondary-alt: var(--background-secondary);
|
|
|
|
/* Background-Derivative Accents */
|
|
--accent-soft-hsl: var(--background-h), calc(var(--background-s) * 0.5), 15%;
|
|
--accent-soft-dark: hsla(var(--accent-soft-hsl), 0.1);
|
|
--accent-soft-light: hsla(var(--accent-soft-hsl), 0.05);
|
|
|
|
/* Main Accent Colors */
|
|
--accent-h: 0;
|
|
--accent-s: 75%;
|
|
--accent-l: 52%;
|
|
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--color-accent-1: var(--color-accent);
|
|
--color-accent-background: hsla(var(--color-accent-hsl), 0.1);
|
|
--color-accent-background-hover: hsla(var(--color-accent-hsl), 0.2);
|
|
--accent-on-selection: hsla(var(--color-accent-hsl), 0.4);
|
|
--text-selection: var(--accent-on-selection);
|
|
/* default text highlights are accent color with additional saturation and lightness */
|
|
--ss-light-highlight-bg: hsl(var(--accent-h), calc(var(--accent-s) * 1.1), calc(var(--accent-l) * 1.1 + 10%));
|
|
--text-highlight-bg: var(--ss-light-highlight-bg);
|
|
|
|
/* Font Colors */
|
|
--ss-light-text-main: 0, 0, 0;
|
|
--text-normal: rgb(var(--ss-light-text-main));
|
|
--text-muted: var(--text-normal);
|
|
--text-faint: var(--text-normal);
|
|
--text-white: rgb(254, 252, 252);
|
|
--text-highlight-fg: #000;
|
|
--text-error: rgb(250, 30, 0);
|
|
--text-accent-hover: #000;
|
|
--text-on-accent: var(--text-white) !important;
|
|
--hr-color: rgba(var(--ss-light-text-main), 0.4);
|
|
|
|
/* Code Blocks (light specific colors only) */
|
|
--code-peripheral: 159, 157, 190;
|
|
--code-comment: rgba(var(--code-peripheral));
|
|
--code-indentation-guide-color: rgba(var(--code-peripheral), 0.33);
|
|
|
|
/* Callout Colors */
|
|
--callout-default: var(--text-normal);
|
|
--callout-info: var(--text-normal);
|
|
--callout-summary: var(--text-normal);
|
|
--callout-question: var(--text-normal);
|
|
--callout-example: var(--text-normal);
|
|
--callout-quote: var(--text-normal);
|
|
--callout-important: var(--color-accent);
|
|
--callout-todo: rgb(0, 130, 235);
|
|
--callout-success: rgb(0, 180, 0);
|
|
--callout-warning: rgb(240, 150, 0);
|
|
--callout-fail: rgb(235, 0, 0);
|
|
--callout-error: rgb(235, 0, 0);
|
|
--callout-bug: rgb(245, 0, 165);
|
|
--callout-tip: rgb(240, 195, 0);
|
|
|
|
/* Interface Colors */
|
|
--titlebar-background: var(--background-secondary);
|
|
--titlebar-background-focused: var(--background-secondary);
|
|
--interactive-normal: var(--accent-soft-light);
|
|
--interactive-hover: var(--accent-soft-dark);
|
|
--interactive-accent-hover: var(--color-accent);
|
|
--tag-background: var(--color-accent-background);
|
|
--tag-background-hover: var(--color-accent-background-hover);
|
|
--prompt-border-color: var(--accent-soft-dark);
|
|
--modal-border-color: var(--accent-soft-dark);
|
|
--background-modifier-hover: var(--accent-soft-light);
|
|
--background-modifier-active-hover: var(--accent-soft-light);
|
|
--background-modifier-form-field: var(--accent-soft-light);
|
|
--background-modifier-border: var(--accent-soft-dark);
|
|
--background-modifier-border-hover: var(--accent-soft-dark);
|
|
--background-modifier-border-focus: var(--accent-soft-dark);
|
|
--background-modifier-error: var(--text-error);
|
|
--background-modifier-error-hover: var(--text-error);
|
|
--search-result-bg-hover: var(--accent-soft-dark);
|
|
|
|
/* Dictionary Plugin Colors */
|
|
--dictionary-background-primary: var(--accent-soft-light);
|
|
--dictionary-background-secondary: var(--background-secondary);
|
|
|
|
/* Kanban Plugin Colors */
|
|
--kanban-button-text: var(--text-normal);
|
|
--kanban-button-text-hover: var(--text-white);
|
|
--kanban-checkbox-border: var(--accent-soft-dark);
|
|
--button-shadow-hover: rgba(0, 0, 0, 0.67);
|
|
}
|
|
|
|
.theme-dark {
|
|
/* Background parameters from Style Settings */
|
|
--ss-dark-h: 221;
|
|
/* saturation is normalized to 0-10 and multiplied by 10, range 0-100 */
|
|
--ss-dark-s: 3.33%;
|
|
/* lightness is normalized to 0-10 and multiplied by 5, range 0-50 */
|
|
--ss-dark-l: 2.58%;
|
|
/* contrast is normalized to 0-10 and multiplied by 4.8, range 0-48 (adds to min. contrast of 2) */
|
|
--ss-dark-contrast: 0.73%;
|
|
|
|
/* Background Color Components */
|
|
--background-h: var(--ss-dark-h);
|
|
--background-s: calc(var(--ss-dark-s) * 10);
|
|
--background-l: calc(var(--ss-dark-l) * 5);
|
|
--background-contrast: calc(var(--ss-dark-contrast) * 4.8);
|
|
--background-secondary-s: calc(var(--background-s) * 0.875);
|
|
--background-secondary-l: calc(var(--background-l) + 2% + var(--background-contrast));
|
|
|
|
/* Background Color Definitions */
|
|
--background-primary: hsl(var(--background-h), var(--background-s), var(--background-l));
|
|
--background-secondary: hsl(var(--background-h), var(--background-secondary-s), var(--background-secondary-l));
|
|
--background-dark: rgb(10, 18, 30);
|
|
--background-extra-dark: #000;
|
|
--background-primary-alt: var(--background-dark);
|
|
--background-secondary-alt: var(--background-secondary);
|
|
|
|
/* Background-Derivative Accents */
|
|
--accent-soft-hsl: var(--background-h), calc(var(--background-s) * 0.5), 85%;
|
|
--accent-soft-dark: hsla(var(--accent-soft-hsl), 0.1);
|
|
--accent-soft-light: hsla(var(--accent-soft-hsl), 0.05);
|
|
|
|
/* Main Accent Colors */
|
|
--accent-h: 189;
|
|
--accent-s: 100%;
|
|
--accent-l: 49%;
|
|
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--color-accent-1: var(--color-accent);
|
|
--color-accent-background: hsla(var(--color-accent-hsl), 0.1);
|
|
--color-accent-background-hover: hsla(var(--color-accent-hsl), 0.2);
|
|
--accent-on-selection: hsla(var(--color-accent-hsl), 0.4);
|
|
--text-selection: var(--accent-on-selection);
|
|
/* default text highlights are accent color with additional saturation and lightness */
|
|
--ss-dark-highlight-bg: hsl(var(--accent-h), calc(var(--accent-s) * 1.1), calc(var(--accent-l) * 1.1 + 10%));
|
|
--text-highlight-bg: var(--ss-dark-highlight-bg);
|
|
|
|
/* Font Colors */
|
|
--ss-dark-text-main: 250, 247, 245;
|
|
--text-normal: rgb(var(--ss-dark-text-main));
|
|
--text-muted: var(--text-normal);
|
|
--text-faint: var(--text-normal);
|
|
--text-white: rgb(250, 247, 245);
|
|
--text-highlight-fg: #000;
|
|
--text-error: rgb(250, 30, 0);
|
|
--text-accent-hover: var(--text-white);
|
|
--text-on-accent: #000 !important;
|
|
--hr-color: rgba(var(--ss-dark-text-main), 0.1);
|
|
|
|
/* Code Blocks (dark specific colors only) */
|
|
--code-peripheral: 175, 191, 255;
|
|
--code-comment: rgba(var(--code-peripheral), 0.7);
|
|
--code-indentation-guide-color: rgba(var(--code-peripheral), 0.23);
|
|
|
|
/* Callout Colors */
|
|
--callout-default: var(--text-normal);
|
|
--callout-info: var(--text-normal);
|
|
--callout-summary: var(--text-normal);
|
|
--callout-tip: var(--text-normal);
|
|
--callout-question: var(--text-normal);
|
|
--callout-example: var(--text-normal);
|
|
--callout-quote: var(--text-normal);
|
|
--callout-important: var(--color-accent);
|
|
--callout-todo: rgb(0, 130, 255);
|
|
--callout-success: rgb(0, 190, 0);
|
|
--callout-warning: rgb(220, 210, 0);
|
|
--callout-fail: rgb(250, 30, 0);
|
|
--callout-error: rgb(250, 30, 0);
|
|
--callout-bug: rgb(245, 0, 170);
|
|
--callout-tip: rgb(255, 220, 120);
|
|
|
|
/* Interface Colors */
|
|
--titlebar-background: var(--background-secondary);
|
|
--titlebar-background-focused: var(--background-secondary);
|
|
--interactive-normal: var(--background-dark);
|
|
--interactive-hover: var(--background-dark);
|
|
--interactive-accent-hover: var(--color-accent);
|
|
--tag-background: var(--color-accent-background);
|
|
--tag-background-hover: var(--color-accent-background-hover);
|
|
--prompt-border-color: var(--accent-soft-dark);
|
|
--modal-border-color: var(--accent-soft-dark);
|
|
--background-modifier-hover: var(--accent-soft-light);
|
|
--background-modifier-active-hover: var(--accent-soft-light);
|
|
--background-modifier-form-field: var(--background-dark);
|
|
--background-modifier-border: var(--accent-soft-dark);
|
|
--background-modifier-border-hover: var(--accent-soft-dark);
|
|
--background-modifier-border-focus: hsl(var(--background-h), var(--background-s), calc(var(--background-l) - 4%));
|
|
--background-modifier-error: var(--text-error);
|
|
--background-modifier-error-hover: var(--text-error);
|
|
--search-result-bg-hover: var(--background-modifier-form-field);
|
|
|
|
/* Dictionary Plugin Colors */
|
|
--dictionary-background-primary: var(--background-secondary);
|
|
--dictionary-background-secondary: var(--background-primary);
|
|
|
|
/* Kanban Plugin Colors */
|
|
--kanban-button-text: var(--text-normal);
|
|
--kanban-button-text-hover: var(--text-on-accent);
|
|
--kanban-checkbox-border: var(--background-primary);
|
|
--button-shadow-hover: rgba(255, 255, 255, 0.67);
|
|
}
|
|
|
|
body {
|
|
/* Polka Dots */
|
|
--polka-dots: radial-gradient(var(--color-accent) 15%, transparent 25%),
|
|
radial-gradient(var(--color-accent) 17.5%, transparent 25%);
|
|
--ribbon-border: none;
|
|
|
|
/* Font Defaults */
|
|
--font-default: 'Franklin Gothic Book', 'Rubik', 'Helvetica Neue', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--font-interface-theme: var(--font-default);
|
|
--font-monospace-default: 'iA Writer Mono S', 'IBM Plex Mono', 'Roboto Mono', Menlo, SFMono-Regular, Consolas, 'Source Code Pro', monospace;
|
|
--inline-title-size: 1.625em;
|
|
--h1-size: 1.5em;
|
|
--h2-size: 1.375em;
|
|
--h3-size: 1.25em;
|
|
--h4-size: 1.125em;
|
|
--h5-size: 1em;
|
|
--h6-size: 1em;
|
|
--h1-color: var(--text-normal);
|
|
--h2-color: var(--text-normal);
|
|
--h3-color: var(--text-normal);
|
|
--h4-color: var(--text-normal);
|
|
--h5-color: var(--text-normal);
|
|
--h6-color: var(--text-normal);
|
|
--font-ui-smallest: 12px;
|
|
--font-ui-smaller: 13px;
|
|
--font-ui-small: 14px;
|
|
--table-body-font: var(--font-text);
|
|
--table-body-font-size: 1em;
|
|
--heading-formatting: var(--text-normal);
|
|
--list-elements: var(--text-normal);
|
|
--list-marker-color: var(--list-elements);
|
|
--nav-item-color: var(--text-normal);
|
|
--status-bar-text-color: var(--text-normal);
|
|
--vault-name-font-weight: bold;
|
|
--table-header-font: var(--font-text);
|
|
--line-height-normal: 1.25em;
|
|
--list-spacing: calc(var(--line-height-normal)/5);
|
|
--list-indent: 1.25em;
|
|
--hr-thickness: 1px;
|
|
|
|
/* Border Radii */
|
|
/* border radius is normalized to 0-10 and multiplied by 20 */
|
|
--ss-border-radius: 0.1px;
|
|
--radius-s: calc(var(--ss-border-radius) * 20) !important;
|
|
--radius-m: calc(var(--radius-s) * 2) !important;
|
|
--radius-l: calc(var(--radius-s) * 3) !important;
|
|
--radius-xl: calc(var(--radius-s) * 4) !important;
|
|
--input-radius: var(--radius-m) !important;
|
|
--tag-radius: var(--radius-m);
|
|
|
|
/* Navigation Colors */
|
|
--nav-item-background-hover: var(--accent-soft-light);
|
|
--nav-item-background-active: var(--accent-soft-light);
|
|
--nav-indentation-guide-color: var(--color-accent);
|
|
--nav-collapse-icon-color: var(--color-accent);
|
|
--nav-collapse-icon-color-collapsed: var(--color-accent);
|
|
|
|
/* Icon Colors */
|
|
--icon-color: var(--text-normal);
|
|
--icon-color-hover: var(--text-normal);
|
|
--icon-color-focused: var(--text-normal);
|
|
--icon-color-active: var(--text-normal);
|
|
--collapse-icon-color: var(--color-accent);
|
|
--icon-opacity: 1;
|
|
|
|
/* Code Blocks */
|
|
--code-background: var(--background-dark) !important;
|
|
--code-normal: hsl(0, 0%, 89%) !important;
|
|
--code-punctuation: var(--code-normal) !important;;
|
|
--color-yellow: rgb(230, 205, 90) !important;
|
|
--color-orange: rgb(220, 95, 0) !important;
|
|
--color-pink: rgb(220, 100, 210) !important;
|
|
--color-red: rgb(220, 65, 65) !important;
|
|
--color-cyan: rgb(0, 202, 235) !important;
|
|
--color-green: rgb(30, 169, 67) !important;
|
|
--color-purple: rgb(140, 110, 240) !important;
|
|
|
|
/* Other Page Elements */
|
|
--ss-embed-border-style: 2px dashed var(--text-normal);
|
|
--divider-color: transparent;
|
|
--checkbox-radius: var(--radius-s);
|
|
--checkbox-border-color: var(--list-elements);
|
|
--table-border-color: var(--list-elements);
|
|
--table-header-border-color: var(--list-elements);
|
|
--indentation-guide-color: var(--hr-color) !important;
|
|
--embed-border-left: var(--ss-embed-border-style);
|
|
|
|
/* Interface Colors */
|
|
--ribbon-background: var(--background-secondary);
|
|
--tab-background-active: var(--background-primary);
|
|
--tab-outline-color: var(--color-accent);
|
|
--scrollbar-thumb-bg: var(--accent-soft-light);
|
|
--scrollbar-active-thumb-bg: var(--accent-soft-dark);
|
|
|
|
/* Kanban Plugin Styles */
|
|
--button-radius: var(--radius-s);
|
|
--button-shadow: hsl(var(--accent-soft-hsl), 0.6);
|
|
}
|
|
|
|
|
|
/* Ribbon */
|
|
.ss-polka-dots {
|
|
--polka-dots: none;
|
|
--ribbon-border: var(--divider-width) solid var(--accent-soft-light);
|
|
}
|
|
|
|
.workspace-ribbon, .side-dock-ribbon {
|
|
background-image: var(--polka-dots);
|
|
background-position: 2px 0px, 6px 4px;
|
|
background-size: 8px 8px;
|
|
border-right: var(--ribbon-border);
|
|
}
|
|
|
|
.side-dock-ribbon-action {
|
|
background: var(--background-secondary);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.side-dock-ribbon-action:hover {
|
|
background: hsl(var(--background-h), var(--background-secondary-s), calc(var(--background-l) - 5%));
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
/* Tabs */
|
|
.workspace-tab-header {
|
|
border-top-left-radius: var(--radius-s);
|
|
border-top-right-radius: var(--radius-s);
|
|
}
|
|
|
|
/* Font Styles */
|
|
h5, .markdown-rendered h5, .HyperMD-header-5, .HyperMD-list-line .cm-header-5 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h6, .markdown-rendered h6, .HyperMD-header-6, .HyperMD-list-line .cm-header-6 {
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
hr, .markdown-rendered hr {
|
|
border-top: var(--hr-color) var(--hr-thickness) dashed;
|
|
}
|
|
|
|
/* Text Block Spacing */
|
|
.cm-formatting-list, input[type=checkbox] {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
/* Tables */
|
|
table {
|
|
font-family: var(--table-body-font);
|
|
font-size: var(--table-body-font-size);
|
|
}
|
|
|
|
/* Code Blocks */
|
|
.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
|
|
border-radius: var(--radius-s) var(--radius-s) 0px 0px;
|
|
}
|
|
|
|
.cm-s-obsidian div.HyperMD-codeblock-end-bg {
|
|
border-radius: 0px 0px var(--radius-s) var(--radius-s);
|
|
}
|
|
|
|
.code-block-flair {
|
|
color: var(--code-normal) !important;
|
|
}
|
|
|
|
.code-block-flair:hover {
|
|
background: var(--background-extra-dark) !important;
|
|
}
|
|
|
|
.markdown-rendered button.copy-code-button {
|
|
color: var(--code-normal);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.markdown-rendered button.copy-code-button:hover {
|
|
color: var(--code-normal);
|
|
background-color: var(--background-extra-dark);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.HyperMD-codeblock .cm-indent::before {
|
|
border-right: var(--indentation-guide-width) solid var(--code-indentation-guide-color) !important;
|
|
}
|
|
|
|
.HyperMD-codeblock {
|
|
caret-color: var(--code-normal);
|
|
}
|
|
|
|
/* Callouts */
|
|
.callout {
|
|
border-radius: var(--radius-s);
|
|
border: 2px dashed var(--callout-color);
|
|
background: transparent;
|
|
padding: 0.75em;
|
|
}
|
|
|
|
.callout-title, .callout-icon .svg-icon {
|
|
font-size: var(--h6-size);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.callout p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.callout[data-callout="note"] {
|
|
--callout-icon: lucide-info;
|
|
}
|
|
|
|
.callout[data-callout="important"] {
|
|
--callout-icon: lucide-flag;
|
|
}
|
|
|
|
.callout[data-callout="error"] {
|
|
--callout-icon: lucide-x;
|
|
}
|
|
|
|
.callout[data-callout="missing"] {
|
|
--callout-icon: lucide-help-circle;
|
|
}
|
|
|
|
.callout[data-callout="hint"], .callout[data-callout="tip"] {
|
|
--callout-icon: lucide-lightbulb;
|
|
}
|
|
|
|
.callout[data-callout="cite"] {
|
|
--callout-icon: lucide-bookmark;
|
|
}
|
|
|
|
.callout[data-callout="check"], .callout[data-callout="done"] {
|
|
--callout-icon: lucide-check-square;
|
|
}
|
|
|
|
.callout[data-callout="todo"] {
|
|
--callout-icon: lucide-clipboard-check;
|
|
}
|
|
|
|
/* Canvases */
|
|
.canvas-node-container {
|
|
border: 2px solid var(--text-normal);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
.canvas-node.is-selected .canvas-node-container,
|
|
.canvas-node.is-focused .canvas-node-container {
|
|
border-color: var(--color-accent);
|
|
box-shadow: var(--shadow-stationary), var(--shadow-border-accent);
|
|
}
|
|
|
|
.canvas-node-container:focus {
|
|
border: 2px solid var(--text-normal);
|
|
}
|
|
|
|
/* Tags */
|
|
.tag, .cm-hashtag {
|
|
line-height: 2em !important;
|
|
}
|
|
|
|
/* Highlights */
|
|
.suggestion-highlight, .markdown-rendered mark, .cm-s-obsidian .cm-highlight, .cm-formatting-highlight {
|
|
background: var(--text-highlight-bg);
|
|
color: var(--text-highlight-fg) !important;
|
|
}
|
|
|
|
.markdown-rendered mark, .cm-s-obsidian .cm-highlight, .cm-formatting-highlight {
|
|
background: var(--text-highlight-bg);
|
|
border-radius: 0.5px;
|
|
color: var(--text-highlight-fg) !important;
|
|
}
|
|
|
|
.search-result-file-match:hover {
|
|
background: var(--search-result-bg-hover);
|
|
}
|
|
|
|
.search-result-file-matched-text {
|
|
color: var(--text-highlight-fg);
|
|
}
|
|
|
|
.is-flashing {
|
|
caret-color: var(--text-highlight-fg);
|
|
color: var(--text-highlight-fg);
|
|
}
|
|
|
|
.is-flashing .tag, .is-flashing p {
|
|
color: var(--text-highlight-fg);
|
|
}
|
|
|
|
.is-flashing .tag {
|
|
background: transparent;
|
|
}
|
|
|
|
.nav-folder-title.is-being-dragged-over {
|
|
color: var(--text-normal);
|
|
background: var(--color-accent-background);
|
|
}
|
|
|
|
/* Gutters */
|
|
.markdown-source-view.mod-cm6 .cm-gutters {
|
|
color: var(--hr-color) !important;
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-ui-smallest);
|
|
}
|
|
|
|
/* Slides */
|
|
.reveal .controls button {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Empty Pages */
|
|
.empty-state-action:hover {
|
|
cursor: pointer;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Status Bar */
|
|
.status-bar {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
/* Divider */
|
|
.workspace-leaf-resize-handle:hover {
|
|
background-color: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.is-translucent .workspace-leaf-resize-handle:hover {
|
|
background-color: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* Menus */
|
|
.menu {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
select, .dropdown, select:focus,
|
|
.dropdown:focus {
|
|
box-shadow: 0 0 1px 0px var(--background-modifier-border-focus);
|
|
}
|
|
|
|
textarea:active,
|
|
input[type='text']:active,
|
|
input[type='search']:active,
|
|
input[type='email']:active,
|
|
input[type='password']:active,
|
|
input[type='number']:active,
|
|
textarea:focus,
|
|
input[type='text']:focus,
|
|
input[type='search']:focus,
|
|
input[type='email']:focus,
|
|
input[type='password']:focus,
|
|
input[type='number']:focus,
|
|
textarea:focus-visible,
|
|
input[type='text']:focus-visible,
|
|
input[type='search']:focus-visible,
|
|
input[type='email']:focus-visible,
|
|
input[type='password']:focus-visible,
|
|
input[type='number']:focus-visible {
|
|
box-shadow: 0 0 0 0.75px var(--background-modifier-border-focus);
|
|
}
|
|
|
|
input.document-search-input.mod-no-match,
|
|
input.document-replace-input.mod-no-match {
|
|
background-color: var(--background-extra-dark);
|
|
}
|
|
|
|
/* Calendar Plugin */
|
|
#calendar-container .year {
|
|
color: var(--text-normal);
|
|
font-weight: normal;
|
|
}
|
|
|
|
#calendar-container .month, #calendar-container .year {
|
|
font-size: 20px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#calendar-container .week-num {
|
|
font-size: 9px;
|
|
font-family: var(--font-text);
|
|
}
|
|
|
|
#calendar-container .day {
|
|
border-radius: 0;
|
|
border: 1px solid var(--accent-soft-dark);
|
|
font-size: 11px;
|
|
font-family: var(--font-text);
|
|
}
|
|
|
|
#calendar-container .reset-button {
|
|
font-size: 14px;
|
|
}
|
|
|
|
#calendar-container th {
|
|
font-family: var(--font-text);
|
|
font-size: 9px;
|
|
}
|
|
|
|
#calendar-container td {
|
|
padding: 2px;
|
|
}
|
|
|
|
/* Dictionary Plugin */
|
|
.dictionary-view-content .main {
|
|
background: var(--dictionary-background-primary) !important;
|
|
border-radius: var(--radius-s) !important;
|
|
}
|
|
|
|
.dictionary-view-content .container {
|
|
background: var(--dictionary-background-secondary) !important;
|
|
border-radius: var(--radius-s) !important;
|
|
}
|
|
|
|
/* Emoji Picker */
|
|
.emoji-mart-title-label {
|
|
color: var(--text-normal);
|
|
font-size: var(--h4-size);
|
|
}
|
|
|
|
.emoji-mart {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--modal-border-color);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
.emoji-mart-bar {
|
|
border-bottom: none;
|
|
border-top: none;
|
|
}
|
|
|
|
.emoji-mart-preview {
|
|
border-top: 1px solid var(--modal-border-color);
|
|
}
|
|
|
|
#emoji-modal {
|
|
border: none;
|
|
border-radius: var(--radius-m) !important;
|
|
}
|
|
|
|
.emoji-mart-anchors {
|
|
border-bottom: 1px solid var(--modal-border-color);
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.emoji-mart-search-icon {
|
|
display: none;
|
|
}
|
|
|
|
.emoji-mart-dark .emoji-mart-search input {
|
|
background: var(--background-modifier-form-field);
|
|
border: 1px solid var(--modal-border-color);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
.emoji-mart-category-label span {
|
|
background: var(--background-secondary) !important;
|
|
padding-top: 1em;
|
|
padding-bottom: 0.5em;
|
|
font-size: 0.875em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Execute Code Plugin */
|
|
code.language-output hr {
|
|
border-top: var(--code-indentation-guide-color) 1px dashed !important;
|
|
margin: 1.5em 0 1.5em;
|
|
}
|
|
|
|
:not(.use-custom-output-color) code.language-output span.stdout {
|
|
color: var(--code-normal) !important;
|
|
}
|
|
|
|
code.language-output {
|
|
margin-bottom: 4em !important;
|
|
}
|
|
|
|
.run-code-button, .clear-button {
|
|
background: transparent !important;
|
|
border: 1px solid var(--code-normal) !important;
|
|
color: var(--code-normal) !important;
|
|
margin: 16px !important;
|
|
}
|
|
|
|
.run-code-button:hover, .clear-button:hover {
|
|
background: var(--code-normal) !important;
|
|
border: 1px solid var(--code-normal) !important;
|
|
color: var(--background-dark) !important;
|
|
}
|
|
|
|
/* File Tree Alternative Plugin */
|
|
body {
|
|
--oz-fta-folder-font-size: var(--nav-item-size);
|
|
--oz-fta-file-font-size: var(--nav-item-size);
|
|
}
|
|
|
|
.oz-folder-name.is-root-folder, .oz-file-tree-header {
|
|
font-size: var(--nav-item-size) !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.oz-folder-block, .oz-nav-file-title {
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.oz-icon-div {
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.oz-nav-file-tag {
|
|
background: var(--accent-soft-light);
|
|
border-radius: var(--radius-s);
|
|
font-size: calc(var(--nav-item-size) * 0.75);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.oz-folder-contents {
|
|
border-left: 1px solid var(--color-accent);
|
|
}
|
|
|
|
/* Kanban Plugin Styles */
|
|
.kanban-plugin__lane {
|
|
border-radius: var(--radius-s);
|
|
background: var(--main-background);
|
|
}
|
|
|
|
.kanban-plugin__lane-header-wrapper {
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.kanban-plugin__lane .task-list-item-checkbox {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--kanban-checkbox-border) !important;
|
|
filter: none !important;
|
|
transition: 0.05s;
|
|
}
|
|
|
|
.kanban-plugin__lane .task-list-item-checkbox:hover {
|
|
border: 1px solid transparent !important;
|
|
box-shadow: 0px 0px 0px 2px hsla(var(--color-accent-hsl), 0.5);
|
|
transition: 0.05s;
|
|
}
|
|
|
|
.kanban-plugin__item {
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.theme-light .kanban-plugin__item-title-wrapper {
|
|
background: var(--accent-soft-light);
|
|
}
|
|
|
|
.theme-dark .kanban-plugin__item-title-wrapper {
|
|
background: var(--accent-soft-dark);
|
|
}
|
|
|
|
.kanban-plugin__item-tag {
|
|
border-radius: var(--radius-s) !important;
|
|
line-height: 1em !important;
|
|
padding: 4px 6px !important;
|
|
}
|
|
|
|
button:not(.clickable-icon) {
|
|
border-radius: var(--radius-s);
|
|
background: var(--accent-soft-light);
|
|
box-shadow: 0px 0px 1px 0px var(--button-shadow);
|
|
color: var(--kanban-button-text);
|
|
transition: 0s;
|
|
}
|
|
|
|
button:not(.clickable-icon):hover {
|
|
border-radius: var(--radius-s);
|
|
background: hsla(var(--color-accent-hsl), 0.9);
|
|
box-shadow: 0px 0px 1px 0px var(--button-shadow-hover);
|
|
color: var(--kanban-button-text-hover);
|
|
transition: 0s;
|
|
}
|
|
|
|
.kanban-plugin__lane input[type=checkbox]:checked:after {
|
|
top: -2px;
|
|
left: -2px;
|
|
}
|
|
|
|
/* Style Settings Plugin */
|
|
.setting-item-description code {
|
|
background: var(--code-background);
|
|
color: var(--code-normal);
|
|
}
|
|
|
|
.theme-light.ss-light-zero-contrast {
|
|
--background-secondary: var(--background-primary);
|
|
--divider-color: var(--accent-soft-light) !important;
|
|
--kanban-checkbox-border: var(--accent-soft-dark);
|
|
}
|
|
|
|
.ss-light-highlights {
|
|
--ss-light-highlight-bg: rgb(250, 231, 75);
|
|
}
|
|
|
|
.theme-dark.ss-dark-zero-contrast {
|
|
--background-secondary: var(--background-primary);
|
|
--divider-color: var(--accent-soft-light) !important;
|
|
--kanban-checkbox-border: var(--accent-soft-dark);
|
|
}
|
|
|
|
.ss-dark-highlights {
|
|
--ss-dark-highlight-bg: rgb(220, 193, 45);
|
|
}
|
|
|
|
.ss-table-monospace {
|
|
--table-body-font: var(--font-monospace);
|
|
--table-body-font-size: 0.875em;
|
|
}
|
|
|
|
.ss-round-checkboxes {
|
|
--checkbox-radius: 50px !important;
|
|
}
|
|
|
|
.ss-tab-outline {
|
|
--tab-outline-color: transparent;
|
|
}
|
|
|
|
.ss-embed-borders {
|
|
--ss-embed-border-style: none;
|
|
--embed-padding: 0;
|
|
}
|
|
|
|
/* Obsidian/Plugin Bugs */
|
|
pre, .markdown-rendered pre {
|
|
color: var(--code-normal);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.dracula-code-colors {
|
|
--code-background: #282A36 !important;
|
|
--code-normal: #F8F8F2 !important;
|
|
--code-punctuation: var(--code-normal) !important;
|
|
--code-comment: #6272A4 !important;
|
|
--code-indentation-guide-color: var(--code-comment) !important;
|
|
--color-yellow: #F1FA8C !important;
|
|
--color-orange: #FFB86C !important;
|
|
--color-pink: #FF79C6 !important;
|
|
--color-red: #FF5555 !important;
|
|
--color-cyan: #8BE9FD !important;
|
|
--color-green: #50FA7B !important;
|
|
--color-purple: #BD93F9 !important;
|
|
}
|
|
|
|
.theme-dark.gruvbox-code-colors {
|
|
--code-background: #282828 !important;
|
|
--code-normal: #ebdbb2 !important;
|
|
--code-punctuation: var(--code-normal) !important;
|
|
--code-comment: #928374 !important;
|
|
--code-indentation-guide-color: var(--code-comment) !important;
|
|
--color-yellow: #fabd2f !important;
|
|
--color-orange: #fe8019 !important;
|
|
--color-pink: #d3869b !important;
|
|
--color-red: #fb4934 !important;
|
|
--color-cyan: #83a598 !important;
|
|
--color-green: #b8bb26 !important;
|
|
--color-purple: #BD93F9 !important;
|
|
}
|
|
|
|
.theme-light.gruvbox-code-colors {
|
|
--code-background: #fbf1c7 !important;
|
|
--code-normal: #3c3836 !important;
|
|
--code-punctuation: var(--code-normal) !important;
|
|
--code-comment: #928374 !important;
|
|
--code-indentation-guide-color: var(--code-comment) !important;
|
|
--color-yellow: #b57614 !important;
|
|
--color-orange: #af3a03 !important;
|
|
--color-pink: #8f3f71 !important;
|
|
--color-red: #9d0006 !important;
|
|
--color-cyan: #076678 !important;
|
|
--color-green: #79740e !important;
|
|
--color-purple: #8352c6 !important;
|
|
}
|
|
|
|
.nord-code-colors {
|
|
--code-background: #2e3440 !important;
|
|
--code-normal: #d8dee9 !important;
|
|
--code-punctuation: var(--code-normal) !important;
|
|
--code-comment: #697590 !important;
|
|
--code-indentation-guide-color: var(--code-comment) !important;
|
|
--color-yellow: #ebcb8b !important;
|
|
--color-orange: #d08770 !important;
|
|
--color-pink: #b48ead !important;
|
|
--color-red: #bf616a !important;
|
|
--color-cyan: #88c0d0 !important;
|
|
--color-green: #a3be8c !important;
|
|
--color-purple: #9c7fe5 !important;
|
|
}
|
|
|
|
.theme-dark.one-code-colors {
|
|
--code-background: #272b34 !important;
|
|
--code-normal: #dcddde !important;
|
|
--code-punctuation: var(--code-normal) !important;
|
|
--code-comment: #888 !important;
|
|
--code-indentation-guide-color: var(--code-comment) !important;
|
|
--color-yellow: #e5c07b !important;
|
|
--color-orange: #d19a66 !important;
|
|
--color-pink: #c678dd !important;
|
|
--color-red: #e06c75 !important;
|
|
--color-cyan: #56b6c2 !important;
|
|
--color-green: #98c379 !important;
|
|
--color-purple: #846ef1 !important;
|
|
}
|
|
|
|
.theme-light.one-code-colors {
|
|
--code-background: #fafafa !important;
|
|
--code-normal: #383a42 !important;
|
|
--code-punctuation: var(--code-normal) !important;
|
|
--code-comment: #8e8e90 !important;
|
|
--code-indentation-guide-color: var(--code-comment) !important;
|
|
--color-yellow: #e35649 !important;
|
|
--color-orange: #986800 !important;
|
|
--color-pink: #a625a4 !important;
|
|
--color-red: #e75545 !important;
|
|
--color-cyan: #0084bc !important;
|
|
--color-green: #4ea24c !important;
|
|
--color-purple: #5c28df !important;
|
|
}
|
|
|
|
.polka-code-colors {
|
|
--code-background: var(--background-dark) !important;
|
|
--code-normal: hsl(0, 0%, 89%) !important;
|
|
--code-punctuation: var(--code-normal) !important;
|
|
--color-yellow: rgb(230, 205, 90) !important;
|
|
--color-orange: rgb(220, 95, 0) !important;
|
|
--color-pink: rgb(220, 100, 210) !important;
|
|
--color-red: rgb(220, 65, 65) !important;
|
|
--color-cyan: rgb(0, 202, 235) !important;
|
|
--color-green: rgb(30, 169, 67) !important;
|
|
--color-purple: rgb(140, 110, 240) !important;
|
|
}
|
|
|
|
.theme-dark.solarized-code-colors {
|
|
--code-background: #002b36 !important;
|
|
--code-normal: #93a1a1 !important;
|
|
--code-punctuation: var(--code-normal) !important;
|
|
--code-comment: #586e75 !important;
|
|
--code-indentation-guide-color: var(--code-comment) !important;
|
|
--color-yellow: #b58900 !important;
|
|
--color-orange: #cb4b16 !important;
|
|
--color-pink: #d33682 !important;
|
|
--color-red: #dc322f !important;
|
|
--color-cyan: #2aa198 !important;
|
|
--color-green: #859900 !important;
|
|
--color-purple: #6c71c4 !important;
|
|
}
|
|
|
|
.theme-light.solarized-code-colors {
|
|
--code-background: #eee8d5 !important;
|
|
--code-normal: #839496 !important;
|
|
--code-punctuation: var(--code-normal) !important;
|
|
--code-comment: #586e75 !important;
|
|
--code-indentation-guide-color: var(--code-comment) !important;
|
|
--color-yellow: #b58900 !important;
|
|
--color-orange: #cb4b16 !important;
|
|
--color-pink: #d33682 !important;
|
|
--color-red: #dc322f !important;
|
|
--color-cyan: #2aa198 !important;
|
|
--color-green: #859900 !important;
|
|
--color-purple: #6c71c4 !important;
|
|
}
|
|
|
|
/* Style Settings Plugin */
|
|
/* @settings
|
|
|
|
name: Polka Light Theme Customization
|
|
id: ss-light-customization
|
|
settings:
|
|
|
|
*/
|
|
|
|
/* @settings
|
|
|
|
name: Polka Theme
|
|
id: polka
|
|
settings:
|
|
-
|
|
id: ss-light-customization
|
|
title: Light Mode Colors
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: ss-light-h
|
|
title: Background Hue
|
|
description: Cycle through the color wheel to select a base for background colors. In light mode, you'll need to reduce the default Background Lightness to see a big difference (0-360).
|
|
type: variable-number-slider
|
|
default: 0
|
|
min: 0
|
|
max: 360
|
|
step: 1
|
|
-
|
|
id: ss-light-s
|
|
title: Background Saturation
|
|
description: Set the saturation level of background colors (0-10).
|
|
type: variable-number-slider
|
|
default: 3.92
|
|
format: '%'
|
|
min: 0
|
|
max: 10
|
|
step: 0.01
|
|
-
|
|
id: ss-light-l
|
|
title: Background Lightness
|
|
description: Set the lightness level of background colors. In light mode, this has a lower limit to prevent you from accidentally making the interface illegible. Switch to dark mode to go darker (0-10).
|
|
type: variable-number-slider
|
|
default: 9.86
|
|
format: '%'
|
|
min: 0
|
|
max: 10
|
|
step: 0.01
|
|
-
|
|
id: ss-light-contrast
|
|
title: Background Contrast
|
|
description: Set the contrast level of the secondary background color. If you want to remove the secondary color entirely, use the switch below (0-10).
|
|
type: variable-number-slider
|
|
default: 0
|
|
format: '%'
|
|
min: 0
|
|
max: 10
|
|
step: 0.01
|
|
-
|
|
id: ss-light-zero-contrast
|
|
title: Background Zero Contrast Mode
|
|
description: Choose whether to use only the primary background color.
|
|
type: class-toggle
|
|
-
|
|
id: ss-light-text-main
|
|
title: Main Text Color
|
|
description: Select a color for main text.
|
|
type: variable-color
|
|
opacity: false
|
|
format: rgb-values
|
|
default: '#000000'
|
|
-
|
|
id: ss-light-highlights
|
|
title: Yellow Text Highlights
|
|
description: Choose whether to use a generic yellow for text highlights instead of your accent color.
|
|
type: class-toggle
|
|
-
|
|
id: ss-dark-customization
|
|
title: Dark Mode Colors
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: ss-dark-h
|
|
title: Background Hue
|
|
description: Cycle through the color wheel to select a base for background colors (0-360).
|
|
type: variable-number-slider
|
|
default: 221
|
|
min: 0
|
|
max: 360
|
|
step: 1
|
|
-
|
|
id: ss-dark-s
|
|
title: Background Saturation
|
|
description: Set the saturation level of background colors (0-10).
|
|
type: variable-number-slider
|
|
default: 3.33
|
|
format: '%'
|
|
min: 0
|
|
max: 10
|
|
step: 0.01
|
|
-
|
|
id: ss-dark-l
|
|
title: Background Lightness
|
|
description: Set the lightness level of background colors. In dark mode, this has an upper limit to prevent you from accidentally making the interface illegible. Switch to light mode to go lighter (0-10).
|
|
type: variable-number-slider
|
|
default: 2.58
|
|
format: '%'
|
|
min: 0
|
|
max: 10
|
|
step: 0.01
|
|
-
|
|
id: ss-dark-contrast
|
|
title: Background Contrast
|
|
description: Set the contrast level of the secondary background color. If you want to remove the secondary color entirely, use the switch below (0-10).
|
|
type: variable-number-slider
|
|
default: 0.73
|
|
format: '%'
|
|
min: 0
|
|
max: 10
|
|
step: 0.01
|
|
-
|
|
id: ss-dark-zero-contrast
|
|
title: Background Zero Contrast Mode
|
|
description: Choose whether to use only the primary background color.
|
|
type: class-toggle
|
|
-
|
|
id: ss-dark-text-main
|
|
title: Text Color
|
|
description: Select a color for main text.
|
|
type: variable-color
|
|
opacity: false
|
|
format: rgb-values
|
|
default: '#FAF7F5'
|
|
-
|
|
id: ss-dark-highlights
|
|
title: Yellow Text Highlights
|
|
description: Choose whether to use a generic yellow for text highlights instead of your accent color.
|
|
type: class-toggle
|
|
-
|
|
id: ss-content-styles
|
|
title: Content Styles
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: ss-codeblock-color-scheme
|
|
title: Codeblock Color Scheme
|
|
description: Style your codeblocks independently by selecting a dedicated color scheme.
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: polka-code-colors
|
|
options:
|
|
-
|
|
label: Dracula (dark)
|
|
value: dracula-code-colors
|
|
-
|
|
label: Gruvbox (light & dark)
|
|
value: gruvbox-code-colors
|
|
-
|
|
label: Nord (dark)
|
|
value: nord-code-colors
|
|
-
|
|
label: One (light & dark)
|
|
value: one-code-colors
|
|
-
|
|
label: Polka (dark)
|
|
value: polka-code-colors
|
|
-
|
|
label: Solarized (light & dark)
|
|
value: solarized-code-colors
|
|
-
|
|
id: ss-border-radius
|
|
title: Roundness
|
|
description: Set the roundness level for corners of text blocks, boxes, buttons and menus (0-1).
|
|
type: variable-number-slider
|
|
default: 0.1
|
|
format: px
|
|
min: 0
|
|
max: 1
|
|
step: 0.05
|
|
-
|
|
id: ss-round-checkboxes
|
|
title: Circular Checkboxes
|
|
description: Choose whether to use circular checkboxes instead of square ones.
|
|
type: class-toggle
|
|
-
|
|
id: ss-table-monospace
|
|
title: Monospace Font in Tables
|
|
description: Choose whether to use a monospace font in tables (excluding headers). This can be useful if your body font doesn't have tabular (i.e. evenly-spaced) numbers.
|
|
type: class-toggle
|
|
-
|
|
id: ss-embed-borders
|
|
title: Remove File Embed Styling
|
|
description: Choose whether to remove the styling that distinguishes file embeds from the rest of a note.
|
|
type: class-toggle
|
|
-
|
|
id: ss-tab-outline
|
|
title: Remove Tab Outline
|
|
description: Choose whether to remove the accent color from the tab outline.
|
|
type: class-toggle
|
|
-
|
|
id: ss-polka-dots
|
|
title: Remove Polka Dots
|
|
description: Choose whether to turn off the dots in the ribbon.
|
|
type: class-toggle
|
|
-
|
|
id: ss-info
|
|
title: Fonts and Accents
|
|
description: Looking to customize your font choices or accent color? Go to `Appearance` in the main menu.
|
|
type: info-text
|
|
markdown: true
|
|
|
|
*/
|