mirror of
https://github.com/voi-tech/obsidian-praxis.git
synced 2026-07-22 04:40:27 +00:00
5815 lines
207 KiB
CSS
5815 lines
207 KiB
CSS
/* ---------------------------------------------------------------------------
|
||
|
||
Praxis Theme for Obsidian
|
||
A fork of Minimal Theme vlatest by @kepano
|
||
|
||
https://voitech.lol
|
||
|
||
MIT License
|
||
Copyright (c) 2026 voitech
|
||
Copyright (c) 2020-2024 Steph Ango (@kepano)
|
||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||
of this software and associated documentation files (the "Software"), to deal
|
||
in the Software without restriction, including without limitation the rights
|
||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||
copies of the Software, and to permit persons to whom the Software is
|
||
furnished to do so, subject to the following conditions:
|
||
|
||
The above copyright notice and this permission notice shall be included in all
|
||
copies or substantial portions of the Software.
|
||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||
SOFTWARE.
|
||
|
||
--------------------------------------------------------------------------- */
|
||
|
||
/* @settings
|
||
|
||
name: Praxis
|
||
id: praxis
|
||
settings:
|
||
-
|
||
id: praxis-background-style
|
||
title: Background contrast
|
||
type: class-select
|
||
allowEmpty: false
|
||
default: praxis-contrast-default
|
||
options:
|
||
-
|
||
label: Default
|
||
value: praxis-contrast-default
|
||
-
|
||
label: Low contrast
|
||
value: praxis-contrast-low
|
||
-
|
||
label: High contrast
|
||
value: praxis-contrast-high
|
||
-
|
||
label: True black
|
||
value: praxis-contrast-black
|
||
-
|
||
id: praxis-callout-style
|
||
title: Callout style
|
||
type: class-select
|
||
allowEmpty: false
|
||
default: praxis-callouts-soft
|
||
options:
|
||
-
|
||
label: Soft
|
||
value: praxis-callouts-soft
|
||
-
|
||
label: Outlined
|
||
value: praxis-callouts-outlined
|
||
-
|
||
label: Minimal
|
||
value: praxis-callouts-minimal
|
||
-
|
||
id: metadata-heading-on
|
||
title: Show properties heading
|
||
type: class-toggle
|
||
default: false
|
||
-
|
||
id: metadata-add-property-on
|
||
title: Show "Add property" button
|
||
type: class-toggle
|
||
default: false
|
||
-
|
||
id: active-line-off
|
||
title: Disable active line highlight
|
||
type: class-toggle
|
||
default: false
|
||
-
|
||
id: praxis-underline-title-off
|
||
title: Disable title underline
|
||
description: Remove the divider below the note title and H1 headings
|
||
type: class-toggle
|
||
default: false
|
||
-
|
||
id: praxis-links-underlined-off
|
||
title: Disable link underlines
|
||
type: class-toggle
|
||
default: false
|
||
-
|
||
id: colorful-headings-off
|
||
title: Disable colorful headings
|
||
description: Remove unique colors from heading levels H1–H6
|
||
type: class-toggle
|
||
default: false
|
||
-
|
||
id: praxis-checkboxes-off
|
||
title: Disable custom task icons
|
||
description: Turn off Praxis custom icons for task checkboxes. Useful when using a custom CSS snippet for task states.
|
||
type: class-toggle
|
||
default: false
|
||
*/
|
||
|
||
|
||
/* Variables */
|
||
body {
|
||
--font-editor-theme: var(--font-text-theme, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
|
||
--font-editor:var(--font-editor-override), var(--font-text-override), var(--font-editor-theme);
|
||
/* Bases */
|
||
--bases-table-column-border-width: 0px;
|
||
--bases-header-border-width: 0;
|
||
--bases-toolbar-opacity: 0;
|
||
/* Blockquotes */
|
||
--blockquote-style:normal;
|
||
--blockquote-color: var(--text-muted);
|
||
--blockquote-border-thickness: 1px;
|
||
--blockquote-border-color: var(--quote-opening-modifier);
|
||
--blockquote-size: 1em;
|
||
/* Embeds */
|
||
--embed-block-shadow-hover: none;
|
||
/* Font sizes */
|
||
--font-ui-smaller: 11px;
|
||
/* Font weights */
|
||
--normal-weight: 400;
|
||
/* Headings */
|
||
--inline-title-margin-bottom: 1rem;
|
||
--h1-size: 1.125em;
|
||
--h2-size: 1.05em;
|
||
--h3-size: 1em;
|
||
--h4-size: 0.90em;
|
||
--h5-size: 0.85em;
|
||
--h6-size: 0.85em;
|
||
--h1: var(--h1-size);
|
||
--h2: var(--h2-size);
|
||
--h3: var(--h3-size);
|
||
--h4: var(--h4-size);
|
||
--h5: var(--h5-size);
|
||
--h6: var(--h6-size);
|
||
--h1-weight: 600;
|
||
--h2-weight: 600;
|
||
--h3-weight: 500;
|
||
--h4-weight: 500;
|
||
--h5-weight: 500;
|
||
--h6-weight: 400;
|
||
--h1-variant: normal;
|
||
--h2-variant: normal;
|
||
--h3-variant: normal;
|
||
--h4-variant: normal;
|
||
--h5-variant: small-caps;
|
||
--h6-variant: small-caps;
|
||
--h1-style: normal;
|
||
--h2-style: normal;
|
||
--h3-style: normal;
|
||
--h4-style: normal;
|
||
--h5-style: normal;
|
||
--h6-style: normal;
|
||
/* Line widths */
|
||
--line-width: 44.5rem;
|
||
--line-height: 1.5;
|
||
--line-height-normal: var(--line-height);
|
||
--max-width: 72rem;
|
||
--max-col-width: 18em;
|
||
/* Icons */
|
||
--icon-muted: 0.5;
|
||
--cursor: pointer;
|
||
--gutter-background: transparent;
|
||
/* Quotes and transclusions */
|
||
--nested-padding:1.1em;
|
||
/* Lists */
|
||
--folding-offset: 32px;
|
||
--list-edit-offset: 0.5em;
|
||
--list-indent: 2em;
|
||
--list-spacing: 0.075em;
|
||
--input-height: 32px;
|
||
--header-height: 55px;
|
||
--tab-height: 34px;
|
||
--tab-radius: 13px;
|
||
--tab-radius-active: 13px;
|
||
--tab-curve: 0;
|
||
--tab-background: transparent;
|
||
--tab-background-active: var(--background-primary);
|
||
--tab-outline-color: var(--ui1);
|
||
--tab-outline-width: 1px;
|
||
/* Metadata */
|
||
--metadata-label-width-multiplier: 9;
|
||
--metadata-label-width: calc(var(--font-adaptive-small) * var(--metadata-label-width-multiplier));
|
||
--metadata-label-font-size: var(--font-adaptive-small);
|
||
--metadata-input-font-size: var(--font-adaptive-small);
|
||
/* Mobile sidebars */
|
||
--mobile-left-sidebar-width: 280pt;
|
||
--mobile-right-sidebar-width: 240pt;
|
||
--top-left-padding-y:0px;
|
||
/* Image opacity in dark mode */
|
||
--image-muted:0.7;
|
||
--image-radius: 5px;
|
||
/* Spacing */
|
||
--heading-spacing: 2em;
|
||
--p-spacing: 1.75rem;
|
||
--border-width: 1px;
|
||
--border-color: var(--background-modifier-border);
|
||
--table-border-width: var(--border-width);
|
||
--table-selection: var(--text-selection);
|
||
--table-selection-border-color: var(--text-accent);
|
||
--table-selection-border-width: 0px;
|
||
--table-selection-border-radius: 0px;
|
||
--table-drag-handle-background-active: var(--text-selection);
|
||
--table-drag-handle-color-active: var(--text-accent);
|
||
--table-add-button-border-width: 0px;
|
||
/* Readable line length off */
|
||
--file-margins-y: var(--size-4-2);
|
||
}
|
||
|
||
.mod-macos {
|
||
--top-left-padding-y:24px;
|
||
}
|
||
|
||
.is-phone {
|
||
/* Metadata */
|
||
--metadata-label-font-size: var(--font-adaptive-smaller);
|
||
--metadata-input-font-size: var(--font-adaptive-smaller);
|
||
}
|
||
|
||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
|
||
.is-phone {
|
||
--border-width: 0.75px;
|
||
}
|
||
}
|
||
|
||
/* Praxis colors */
|
||
.theme-dark,
|
||
.theme-light {
|
||
--color-red-rgb: 217,122,64;
|
||
--color-orange-rgb: 232,151,92;
|
||
--color-yellow-rgb: 201,168,76;
|
||
--color-green-rgb: 91,191,178;
|
||
--color-cyan-rgb: 125,207,197;
|
||
--color-blue-rgb: 107,159,212;
|
||
--color-purple-rgb: 152,120,224;
|
||
--color-pink-rgb: 200,122,176;
|
||
}
|
||
|
||
.theme-dark {
|
||
--bg1: #1d1a17;
|
||
--bg2: #242018;
|
||
--bg3: #2a2520;
|
||
--ui1: #3a3530;
|
||
--ui2: #4a4540;
|
||
--ui3: rgba(152, 120, 224, 0.28);
|
||
--tx1: #efe7d5;
|
||
--tx2: #b8a88a;
|
||
--tx3: #8c8078;
|
||
--tx4: #5bbfb2;
|
||
--ax1: #9878e0;
|
||
--ax2: #b09ae8;
|
||
--hl1: rgba(152, 120, 224, 0.25);
|
||
--hl2: rgba(217, 122, 64, 0.22);
|
||
--sp1: var(--mono0);
|
||
--color-red: #d97a40;
|
||
--color-orange: #e8975c;
|
||
--color-yellow: #c9a84c;
|
||
--color-green: #5bbfb2;
|
||
--color-cyan: #7dcfc5;
|
||
--color-blue: #6b9fd4;
|
||
--color-purple: #9878e0;
|
||
--color-pink: #c87ab0;
|
||
--callout-purple: #9878e0;
|
||
--callout-blue: #6b9fd4;
|
||
--callout-teal: #5bbfb2;
|
||
--callout-yellow: #c9a84c;
|
||
--callout-orange: #d97a40;
|
||
--callout-red: var(--praxis-error);
|
||
--callout-brown: #8b7255;
|
||
--praxis-error: #e06f6f;
|
||
}
|
||
|
||
.theme-light {
|
||
--bg1: #f7f1e7;
|
||
--bg2: #f0e8d8;
|
||
--bg3: #e8dfc8;
|
||
--ui1: #d8cdb8;
|
||
--ui2: #c4b89a;
|
||
--ui3: rgba(122, 96, 200, 0.25);
|
||
--tx1: #211d18;
|
||
--tx2: #4a3f2f;
|
||
--tx3: #7a6a54;
|
||
--tx4: #3a8f84;
|
||
--ax1: #7a60c8;
|
||
--ax2: #9878e0;
|
||
--hl1: rgba(122, 96, 200, 0.2);
|
||
--hl2: rgba(185, 102, 40, 0.18);
|
||
--sp1: var(--mono0);
|
||
--color-red: #b96830;
|
||
--color-orange: #c47a40;
|
||
--color-yellow: #a08030;
|
||
--color-green: #3a8f84;
|
||
--color-cyan: #5bbfb2;
|
||
--color-blue: #4a7fb0;
|
||
--color-purple: #7a60c8;
|
||
--color-pink: #a05a90;
|
||
--callout-purple: #7a60c8;
|
||
--callout-blue: #4a7fb0;
|
||
--callout-teal: #3a8f84;
|
||
--callout-yellow: #a08030;
|
||
--callout-orange: #c47a40;
|
||
--callout-red: var(--praxis-error);
|
||
--callout-brown: #806b4d;
|
||
--praxis-error: #c05050;
|
||
}
|
||
|
||
/* Map colors to semantic Obsidian names */
|
||
.theme-light {
|
||
--mono100: black;
|
||
--mono0: white;
|
||
}
|
||
|
||
.theme-dark {
|
||
--mono100: white;
|
||
--mono0: black;
|
||
}
|
||
|
||
.theme-dark,
|
||
.theme-light {
|
||
--background-modifier-accent: var(--ax1);
|
||
--background-modifier-border-focus: var(--ui3);
|
||
--background-modifier-border-hover: var(--ui2);
|
||
--background-modifier-border: var(--ui1);
|
||
--mobile-sidebar-background: var(--bg1);
|
||
--background-modifier-form-field-highlighted: var(--bg1);
|
||
--background-modifier-form-field: var(--bg1);
|
||
--background-modifier-success: var(--color-green);
|
||
--background-modifier-hover: var(--bg3);
|
||
--background-modifier-active-hover: var(--bg3);
|
||
--background-primary: var(--bg1);
|
||
--background-primary-alt: var(--bg2);
|
||
--background-secondary: var(--bg2);
|
||
--background-secondary-alt: var(--bg1);
|
||
--background-table-rows: var(--bg2);
|
||
--checkbox-color: var(--ax1);
|
||
--code-normal: var(--tx1);
|
||
--divider-color: var(--ui1);
|
||
--frame-divider-color: var(--ui1);
|
||
--icon-color-active: var(--tx1);
|
||
--icon-color-focused: var(--tx1);
|
||
--icon-color-hover: var(--tx2);
|
||
--icon-color: var(--tx2);
|
||
--icon-hex: var(--mono0);
|
||
--interactive-normal: var(--ui1);
|
||
--interactive-accent-hover: var(--ax1);
|
||
--interactive-accent: var(--ax1);
|
||
--interactive-hover: var(--ui1);
|
||
--list-marker-color: var(--tx3);
|
||
--nav-item-background-active: color-mix(in srgb, var(--bg3) 72%, var(--ax1));
|
||
--nav-item-background-hover: var(--bg3);
|
||
--nav-item-color: var(--tx2);
|
||
--nav-item-color-active: var(--tx1);
|
||
--nav-item-color-hover: var(--tx1);
|
||
--nav-item-color-selected: var(--tx1);
|
||
--nav-collapse-icon-color: var(--tx2);
|
||
--nav-collapse-icon-color-collapsed: var(--tx2);
|
||
--nav-indentation-guide-color: var(--ui1);
|
||
--prompt-border-color: var(--ui3);
|
||
--quote-opening-modifier: var(--ui2);
|
||
--ribbon-background: var(--bg2);
|
||
--scrollbar-active-thumb-bg: var(--ui3);
|
||
--scrollbar-bg: transparent;
|
||
--scrollbar-thumb-bg: var(--ui1);
|
||
--search-result-background: var(--bg1);
|
||
--tab-text-color-focused-active: var(--tx1);
|
||
--tab-outline-color: var(--ui1);
|
||
--text-accent-hover: var(--ax2);
|
||
--text-accent: var(--ax1);
|
||
--text-blockquote: var(--tx2);
|
||
--text-bold: var(--tx1);
|
||
--text-code: var(--tx4);
|
||
--text-error: var(--praxis-error);
|
||
--text-faint: var(--tx3);
|
||
--text-highlight-bg: var(--hl2);
|
||
--text-italic: var(--tx1);
|
||
--text-muted: var(--tx2);
|
||
--text-normal: var(--tx1);
|
||
--text-on-accent: var(--sp1);
|
||
--text-selection: var(--hl1);
|
||
--text-formatting: var(--tx3);
|
||
--title-color-inactive: var(--tx2);
|
||
--title-color: var(--tx1);
|
||
--titlebar-background: var(--bg2);
|
||
--titlebar-background-focused: var(--bg2);
|
||
--titlebar-text-color-focused: var(--tx1);
|
||
--vault-profile-color: var(--tx1);
|
||
--vault-profile-color-hover: var(--tx1);
|
||
--workspace-background-translucent: rgba(29, 26, 23, 0.85);
|
||
}
|
||
|
||
.theme-light {
|
||
--interactive-accent-rgb: 122, 96, 200;
|
||
--active-line-bg: rgba(0, 0, 0, 0.03);
|
||
--background-modifier-cover: rgba(29, 26, 23, 0.5);
|
||
--text-highlight-bg-active: rgba(0, 0, 0, 0.09);
|
||
--workspace-background-translucent: rgba(247, 241, 231, 0.85);
|
||
--shadow-color: rgba(0, 0, 0, 0.08);
|
||
--btn-shadow-color: rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.theme-dark {
|
||
--interactive-normal: var(--bg3);
|
||
--interactive-accent-rgb: 152, 120, 224;
|
||
--active-line-bg: rgba(255, 255, 255, 0.035);
|
||
--background-modifier-cover: rgba(0, 0, 0, 0.5);
|
||
--text-highlight-bg-active: rgba(152, 120, 224, 0.15);
|
||
--background-modifier-box-shadow: rgba(0, 0, 0, 0.4);
|
||
--shadow-color: rgba(0, 0, 0, 0.35);
|
||
--btn-shadow-color: rgba(0, 0, 0, 0.2);
|
||
--modal-border-color: var(--ui2);
|
||
}
|
||
|
||
/* Praxis contrast variants */
|
||
body.praxis-contrast-low {
|
||
--background-secondary: var(--background-primary);
|
||
--background-secondary-alt: var(--background-primary);
|
||
--ribbon-background: var(--background-primary);
|
||
--titlebar-background: var(--background-primary);
|
||
--titlebar-background-focused: var(--background-primary);
|
||
}
|
||
|
||
.theme-light.praxis-contrast-high {
|
||
--background-primary: #f7f1e7;
|
||
--background-secondary: #211d18;
|
||
--background-secondary-alt: #2c261f;
|
||
--nav-item-color: #d9ceb8;
|
||
--nav-item-color-hover: #ffffff;
|
||
--nav-item-color-active: #ffffff;
|
||
--icon-color: #d9ceb8;
|
||
--icon-color-hover: #ffffff;
|
||
}
|
||
|
||
.theme-dark.praxis-contrast-black {
|
||
--bg1: #000000;
|
||
--bg2: #050505;
|
||
--bg3: #101010;
|
||
--ui1: #202020;
|
||
--ui2: #333333;
|
||
--background-primary: #000000;
|
||
--background-primary-alt: #050505;
|
||
--background-secondary: #050505;
|
||
--background-secondary-alt: #000000;
|
||
--background-modifier-box-shadow: rgba(0, 0, 0, 0.8);
|
||
--shadow-color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
|
||
/* Desktop font sizes */
|
||
body {
|
||
--font-adaptive-normal:var(--font-text-size,var(--editor-font-size));
|
||
--font-adaptive-small: calc(var(--font-ui-small) * 1.07);
|
||
--font-adaptive-smaller: var(--font-ui-small);
|
||
--font-adaptive-smallest: var(--font-ui-smaller);
|
||
--line-width-wide:calc(var(--line-width) + 12.5%);
|
||
--font-code:calc(var(--font-adaptive-normal) * 0.9);
|
||
--table-text-size:calc(var(--font-adaptive-normal) * 0.875);
|
||
--bases-table-font-size:calc(var(--font-adaptive-normal) * 0.875);
|
||
}
|
||
|
||
/* Obsidian */
|
||
/* Obsidian app */
|
||
.bases-view {
|
||
--bases-table-font-size: var(--table-text-size);
|
||
}
|
||
|
||
.query-toolbar-menu .combobox-button {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.block-language-base .bases-header .bases-toolbar,
|
||
.bases-embed .bases-header .bases-toolbar {
|
||
padding-bottom: 2px;
|
||
opacity: var(--bases-toolbar-opacity);
|
||
transition: 0.15s 0.15s opacity;
|
||
}
|
||
.block-language-base .bases-header .bases-toolbar:hover,
|
||
.bases-embed .bases-header .bases-toolbar:hover {
|
||
opacity: 1;
|
||
transition: 0s opacity;
|
||
}
|
||
|
||
.base-plain .bases-header {
|
||
display: none;
|
||
}
|
||
|
||
.bases-table-header-icon {
|
||
display: var(--bases-table-header-icon-display);
|
||
}
|
||
|
||
/* Editor mode (CodeMirror 6 Live Preview) */
|
||
/* Fix strange Obsidian ghost textearea bug on right click */
|
||
.CodeMirror-wrap > div > textarea {
|
||
opacity: 0;
|
||
}
|
||
|
||
.cm-editor .cm-content {
|
||
padding-top: 0.5em;
|
||
}
|
||
|
||
.markdown-source-view {
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-sizer {
|
||
display: block;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-scroller {
|
||
padding-inline-end: 0;
|
||
padding-inline-start: 0;
|
||
}
|
||
|
||
.cm-s-obsidian .cm-line.HyperMD-header {
|
||
padding-top: calc(var(--p-spacing) / 2);
|
||
}
|
||
|
||
.markdown-rendered .mod-header + div > * {
|
||
margin-block-start: 0;
|
||
}
|
||
|
||
/* Gutters */
|
||
body :not(.canvas-node) .markdown-source-view.mod-cm6 .cm-gutters {
|
||
position: absolute;
|
||
z-index: 0;
|
||
margin-inline-end: 0;
|
||
}
|
||
body :not(.canvas-node) .markdown-source-view.mod-cm6 .cm-gutters .cm-gutter:before {
|
||
content: "";
|
||
height: 100%;
|
||
top: -100%;
|
||
width: 100%;
|
||
position: absolute;
|
||
z-index: 1;
|
||
background-color: var(--gutter-background);
|
||
min-width: var(--folding-offset);
|
||
}
|
||
|
||
body :not(.canvas-node) .markdown-source-view.mod-cm6.is-rtl .cm-gutters {
|
||
right: 0;
|
||
}
|
||
|
||
body {
|
||
--line-number-color: var(--text-faint);
|
||
--line-number-color-active: var(--text-muted);
|
||
}
|
||
|
||
.empty-state-title {
|
||
display: none;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-editor .cm-gutters {
|
||
color: var(--line-number-color);
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-editor .cm-gutterElement.cm-active .cm-heading-marker,
|
||
.markdown-source-view.mod-cm6 .cm-editor .cm-lineNumbers .cm-gutterElement.cm-active {
|
||
color: var(--line-number-color-active);
|
||
}
|
||
|
||
.cm-editor .cm-lineNumbers {
|
||
background-color: var(--gutter-background);
|
||
}
|
||
|
||
.cm-editor .cm-lineNumbers .cm-gutterElement {
|
||
min-width: var(--folding-offset);
|
||
padding-inline-end: 0.5em;
|
||
}
|
||
|
||
.is-rtl .cm-editor .cm-lineNumbers .cm-gutterElement {
|
||
text-align: left;
|
||
}
|
||
|
||
/* Line numbers */
|
||
@media (max-width: 400px) {
|
||
.cm-editor .cm-lineNumbers .cm-gutterElement {
|
||
padding-inline-end: 4px;
|
||
padding-inline-start: 8px;
|
||
}
|
||
}
|
||
.cm-editor .cm-lineNumbers .cm-gutterElement.cm-active,
|
||
.cm-editor .cm-gutterElement.cm-active .cm-heading-marker {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Code execution blocks, e.g. Dataview */
|
||
.markdown-source-view.mod-cm6 .edit-block-button {
|
||
color: var(--text-faint);
|
||
background-color: var(--background-primary);
|
||
top: 4px;
|
||
opacity: 0;
|
||
transition: opacity 200ms;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6.is-live-preview.is-readable-line-width .cm-embed-block > .edit-block-button {
|
||
width: 30px;
|
||
padding-inline-start: 7px;
|
||
}
|
||
|
||
.is-live-preview:not(.is-readable-line-width) .cm-embed-block > .edit-block-button {
|
||
padding-inline-start: 0px;
|
||
margin-inline-start: 0;
|
||
padding: 4px;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .edit-block-button:hover {
|
||
background-color: var(--background-primary);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .edit-block-button svg {
|
||
margin: 0;
|
||
opacity: 1;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .edit-block-button:hover svg {
|
||
opacity: 1;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-embed-block {
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-embed-block:hover {
|
||
border: 0;
|
||
}
|
||
|
||
.metadata-container {
|
||
--input-height: calc(var(--font-adaptive-small) * 2.2);
|
||
}
|
||
|
||
body:not(.metadata-heading-on) .metadata-properties-heading {
|
||
display: none;
|
||
}
|
||
|
||
body:not(.metadata-add-property-on) .mod-root .metadata-add-button {
|
||
display: none;
|
||
}
|
||
|
||
.metadata-dividers {
|
||
--metadata-divider-width: 1px;
|
||
--metadata-gap: 0px;
|
||
}
|
||
|
||
.metadata-icons-off .workspace-leaf-content[data-type=all-properties] .tree-item-inner {
|
||
margin-inline-start: -16px;
|
||
}
|
||
.metadata-icons-off .workspace-leaf-content[data-type=all-properties] .tree-item-icon {
|
||
display: none;
|
||
}
|
||
.metadata-icons-off .metadata-property-icon {
|
||
display: none;
|
||
}
|
||
|
||
/* Preview mode */
|
||
figure {
|
||
margin-inline-start: 0;
|
||
margin-inline-end: 0;
|
||
}
|
||
|
||
.markdown-preview-view .mod-highlighted {
|
||
transition: background-color 0.3s ease;
|
||
background-color: var(--text-selection);
|
||
color: inherit;
|
||
}
|
||
|
||
.inline-title {
|
||
padding-top: 16px;
|
||
}
|
||
|
||
/* Remove ribbon border on Mac when frameless */
|
||
.mod-macos.hider-frameless .workspace-ribbon {
|
||
border: none;
|
||
}
|
||
|
||
/* --------------- */
|
||
/* App ribbon moved to the bottom edge */
|
||
.is-tablet.hider-ribbon {
|
||
--ribbon-width: 0px;
|
||
}
|
||
.is-tablet.hider-ribbon .side-dock-ribbon {
|
||
display: none;
|
||
}
|
||
|
||
.hider-ribbon .workspace-ribbon {
|
||
padding: 0;
|
||
}
|
||
|
||
:root {
|
||
--hider-ribbon-display: none;
|
||
--ribbon-animation-duration: 0.1s;
|
||
}
|
||
|
||
.ribbon-bottom-left-hover-vertical:not(.is-mobile),
|
||
.ribbon-bottom-left-hover:not(.is-mobile) {
|
||
--hider-ribbon-display: flex;
|
||
}
|
||
|
||
body.ribbon-vertical-expand:not(.is-mobile) {
|
||
--ribbon-width: 0px;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile) .workspace-ribbon.mod-left {
|
||
width: 10px;
|
||
flex-basis: 10px;
|
||
opacity: 0;
|
||
position: fixed;
|
||
height: 100%;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
transition: all var(--ribbon-animation-duration) linear 0.6s;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile) .workspace-ribbon.mod-left .side-dock-actions {
|
||
transition: opacity var(--ribbon-animation-duration) linear 0.3s;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile) .workspace-ribbon.mod-left:hover {
|
||
width: 44px;
|
||
opacity: 1;
|
||
flex-basis: 44px;
|
||
transition: opacity var(--ribbon-animation-duration) linear 0.1s;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile) .workspace-ribbon.mod-left:hover .side-dock-actions {
|
||
opacity: 1;
|
||
transition: opacity calc(var(--ribbon-animation-duration) * 2) linear 0.2s;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile).labeled-nav .workspace-ribbon.mod-left ~ .mod-left-split .workspace-tab-header-container {
|
||
margin-left: 0;
|
||
transition: all var(--ribbon-animation-duration) linear 0.6s;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile).labeled-nav .workspace-ribbon.mod-left:hover ~ .mod-left-split .workspace-tab-header-container {
|
||
margin-left: 44px;
|
||
transition: all var(--ribbon-animation-duration) linear;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile) .workspace-ribbon.mod-left ~ .mod-left-split .workspace-tab-container {
|
||
padding-left: 0px;
|
||
transition: all var(--ribbon-animation-duration) linear 0.6s;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile) .workspace-ribbon.mod-left ~ .mod-left-split .workspace-sidedock-vault-profile {
|
||
transition: all var(--ribbon-animation-duration) linear 0.6s;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile) .workspace-ribbon.mod-left:hover ~ .mod-left-split .workspace-tab-container {
|
||
padding-left: 44px;
|
||
transition: all var(--ribbon-animation-duration) linear;
|
||
}
|
||
body.ribbon-vertical-expand:not(.is-mobile) .workspace-ribbon.mod-left:hover ~ .mod-left-split .workspace-sidedock-vault-profile {
|
||
padding-left: 52px;
|
||
transition: all var(--ribbon-animation-duration) linear;
|
||
}
|
||
|
||
.hider-ribbon .workspace-ribbon.mod-left:before,
|
||
.ribbon-bottom-left-hover-vertical .workspace-ribbon.mod-left:before,
|
||
.ribbon-bottom-left-hover .workspace-ribbon.mod-left:before {
|
||
opacity: 0;
|
||
}
|
||
.hider-ribbon .workspace-ribbon-collapse-btn,
|
||
.ribbon-bottom-left-hover-vertical .workspace-ribbon-collapse-btn,
|
||
.ribbon-bottom-left-hover .workspace-ribbon-collapse-btn {
|
||
display: none;
|
||
}
|
||
.hider-ribbon .workspace-ribbon.mod-right,
|
||
.ribbon-bottom-left-hover-vertical .workspace-ribbon.mod-right,
|
||
.ribbon-bottom-left-hover .workspace-ribbon.mod-right {
|
||
pointer-events: none;
|
||
}
|
||
.hider-ribbon .workspace-ribbon.mod-left,
|
||
.ribbon-bottom-left-hover-vertical .workspace-ribbon.mod-left,
|
||
.ribbon-bottom-left-hover .workspace-ribbon.mod-left {
|
||
overflow: visible;
|
||
border-top: var(--border-width) solid var(--background-modifier-border);
|
||
border-right: var(--border-width) solid var(--background-modifier-border);
|
||
border-top-right-radius: var(--radius-m);
|
||
padding: 0;
|
||
position: absolute;
|
||
margin: 0;
|
||
width: auto;
|
||
height: 44px;
|
||
flex-basis: 0;
|
||
bottom: 0;
|
||
top: auto;
|
||
background: var(--background-secondary);
|
||
display: var(--hider-ribbon-display);
|
||
flex-direction: row;
|
||
z-index: 17;
|
||
opacity: 0;
|
||
transition: opacity calc(var(--ribbon-animation-duration) * 2) ease-in-out;
|
||
filter: drop-shadow(2px 10px 30px rgba(0, 0, 0, 0.2));
|
||
gap: 0;
|
||
}
|
||
.hider-ribbon .side-dock-actions,
|
||
.hider-ribbon .side-dock-settings,
|
||
.ribbon-bottom-left-hover-vertical .side-dock-actions,
|
||
.ribbon-bottom-left-hover-vertical .side-dock-settings,
|
||
.ribbon-bottom-left-hover .side-dock-actions,
|
||
.ribbon-bottom-left-hover .side-dock-settings {
|
||
flex-direction: row;
|
||
display: var(--hider-ribbon-display);
|
||
background: transparent;
|
||
margin: 0;
|
||
position: relative;
|
||
gap: var(--size-2-2);
|
||
}
|
||
.hider-ribbon .side-dock-actions,
|
||
.ribbon-bottom-left-hover-vertical .side-dock-actions,
|
||
.ribbon-bottom-left-hover .side-dock-actions {
|
||
padding: 6px 6px 6px 8px;
|
||
}
|
||
.hider-ribbon .side-dock-settings:empty,
|
||
.ribbon-bottom-left-hover-vertical .side-dock-settings:empty,
|
||
.ribbon-bottom-left-hover .side-dock-settings:empty {
|
||
display: none;
|
||
}
|
||
.hider-ribbon .workspace-ribbon.mod-left .side-dock-ribbon-action,
|
||
.ribbon-bottom-left-hover-vertical .workspace-ribbon.mod-left .side-dock-ribbon-action,
|
||
.ribbon-bottom-left-hover .workspace-ribbon.mod-left .side-dock-ribbon-action {
|
||
display: var(--hider-ribbon-display);
|
||
}
|
||
.hider-ribbon .workspace-ribbon.mod-left:hover,
|
||
.ribbon-bottom-left-hover-vertical .workspace-ribbon.mod-left:hover,
|
||
.ribbon-bottom-left-hover .workspace-ribbon.mod-left:hover {
|
||
opacity: 1;
|
||
transition: opacity 0.25s ease-in-out;
|
||
}
|
||
.hider-ribbon .workspace-ribbon.mod-left .workspace-ribbon-collapse-btn,
|
||
.ribbon-bottom-left-hover-vertical .workspace-ribbon.mod-left .workspace-ribbon-collapse-btn,
|
||
.ribbon-bottom-left-hover .workspace-ribbon.mod-left .workspace-ribbon-collapse-btn {
|
||
opacity: 0;
|
||
}
|
||
.hider-ribbon .workspace-split.mod-left-split,
|
||
.ribbon-bottom-left-hover-vertical .workspace-split.mod-left-split,
|
||
.ribbon-bottom-left-hover .workspace-split.mod-left-split {
|
||
margin: 0;
|
||
}
|
||
.hider-ribbon .workspace-leaf-content .item-list,
|
||
.ribbon-bottom-left-hover-vertical .workspace-leaf-content .item-list,
|
||
.ribbon-bottom-left-hover .workspace-leaf-content .item-list {
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.ribbon-bottom-left-hover-vertical .workspace-ribbon.mod-left {
|
||
height: auto;
|
||
}
|
||
.ribbon-bottom-left-hover-vertical .side-dock-actions {
|
||
flex-direction: column;
|
||
padding: 8px 6px;
|
||
}
|
||
|
||
/* Status bar */
|
||
.praxis-status-off .status-bar {
|
||
--status-bar-position: static;
|
||
--status-bar-radius: 0;
|
||
--status-bar-border-width: 1px 0 0 0;
|
||
--status-bar-background: var(--background-secondary);
|
||
--status-bar-border-color: var(--ui1);
|
||
}
|
||
|
||
body:not(.praxis-status-off) .status-bar {
|
||
background-color: var(--background-primary);
|
||
--status-bar-border-width: 0;
|
||
}
|
||
|
||
.status-bar {
|
||
transition: color 200ms linear;
|
||
color: var(--text-faint);
|
||
font-size: var(--font-adaptive-smallest);
|
||
}
|
||
.status-bar .sync-status-icon.mod-working,
|
||
.status-bar .sync-status-icon.mod-success {
|
||
color: var(--text-faint);
|
||
}
|
||
.status-bar:hover .sync-status-icon.mod-working, .status-bar:hover .sync-status-icon.mod-success, .status-bar:hover {
|
||
color: var(--text-muted);
|
||
transition: color 200ms linear;
|
||
}
|
||
.status-bar .plugin-sync:hover .sync-status-icon.mod-working,
|
||
.status-bar .plugin-sync:hover .sync-status-icon.mod-success {
|
||
color: var(--text-normal);
|
||
}
|
||
.status-bar .status-bar-item {
|
||
cursor: var(--cursor);
|
||
}
|
||
.status-bar .status-bar-item.plugin-editor-status:hover, .status-bar .status-bar-item.plugin-sync:hover, .status-bar .status-bar-item.cMenu-statusbar-button:hover, .status-bar .status-bar-item.mod-clickable:hover {
|
||
text-align: center;
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.tab-stack-top-flipped {
|
||
--tab-stacked-text-transform: rotate(180deg);
|
||
--tab-stacked-text-align: right;
|
||
}
|
||
|
||
.tab-stack-center {
|
||
--tab-stacked-text-align: center;
|
||
}
|
||
|
||
.tab-stack-center-flipped {
|
||
--tab-stacked-text-transform: rotate(180deg);
|
||
--tab-stacked-text-align: center;
|
||
}
|
||
|
||
.tab-stack-bottom {
|
||
--tab-stacked-text-transform: rotate(180deg);
|
||
}
|
||
|
||
.tab-stack-bottom-flipped {
|
||
--tab-stacked-text-align: right;
|
||
}
|
||
|
||
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner {
|
||
flex-direction: var(--tab-stacked-spine-order);
|
||
}
|
||
|
||
/* Title Bar */
|
||
.view-header-title-parent,
|
||
.view-header-title {
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.view-header-title-container:not(.mod-at-end):after {
|
||
display: none;
|
||
}
|
||
|
||
/* Alignment */
|
||
body:not(.is-mobile) .view-actions .view-action:last-child {
|
||
margin-left: -1px;
|
||
}
|
||
|
||
body:not(.praxis-focus-mode) .workspace-ribbon:not(.is-collapsed) ~ .mod-root .view-actions,
|
||
.praxis-focus-mode .workspace-ribbon:not(.is-collapsed) ~ .mod-root .view-header:hover .view-actions,
|
||
.workspace-ribbon.mod-left.is-collapsed ~ .mod-root .view-header:hover .view-actions,
|
||
.mod-right.is-collapsed ~ .mod-root .view-header:hover .view-actions,
|
||
.view-action.is-active:hover {
|
||
opacity: 1;
|
||
transition: opacity 0.25s ease-in-out;
|
||
}
|
||
|
||
.view-header-title-container {
|
||
opacity: 0;
|
||
transition: opacity 0.1s ease-in-out;
|
||
}
|
||
|
||
.view-header-title-container:focus-within {
|
||
opacity: 1;
|
||
transition: opacity 0.1s ease-in-out;
|
||
}
|
||
|
||
.workspace-tab-header-container:hover + .workspace-tab-container .view-header-title-container,
|
||
.view-header:hover .view-header-title-container {
|
||
opacity: 1;
|
||
transition: opacity 0.1s ease-in-out;
|
||
}
|
||
|
||
.is-phone .view-header-title-container,
|
||
.praxis-tab-title-visible .view-header-title-container {
|
||
opacity: 1;
|
||
}
|
||
|
||
.praxis-tab-title-hidden .view-header-title-container {
|
||
opacity: 0;
|
||
}
|
||
.praxis-tab-title-hidden .view-header-title-container:focus-within {
|
||
opacity: 1;
|
||
transition: opacity 0.1s ease-in-out;
|
||
}
|
||
.praxis-tab-title-hidden .workspace-tab-header-container:hover + .workspace-tab-container .view-header-title-container,
|
||
.praxis-tab-title-hidden .view-header:hover .view-header-title-container {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Window frame */
|
||
body.window-title-off .titlebar-text {
|
||
display: none;
|
||
}
|
||
|
||
.titlebar-button-container.mod-right {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.is-hidden-frameless.theme-dark:not(.praxis-contrast-black):not(.colorful-frame),
|
||
.is-hidden-frameless.theme-light:not(.praxis-contrast-tonal-light):not(.colorful-frame):not(.praxis-contrast-low) {
|
||
--titlebar-background: var(--bg1);
|
||
}
|
||
.is-hidden-frameless.theme-dark:not(.praxis-contrast-black):not(.colorful-frame).is-focused .sidebar-toggle-button.mod-right,
|
||
.is-hidden-frameless.theme-dark:not(.praxis-contrast-black):not(.colorful-frame).is-focused .workspace-ribbon.mod-left.is-collapsed,
|
||
.is-hidden-frameless.theme-dark:not(.praxis-contrast-black):not(.colorful-frame).is-focused .workspace-tabs.mod-top,
|
||
.is-hidden-frameless.theme-light:not(.praxis-contrast-tonal-light):not(.colorful-frame):not(.praxis-contrast-low).is-focused .sidebar-toggle-button.mod-right,
|
||
.is-hidden-frameless.theme-light:not(.praxis-contrast-tonal-light):not(.colorful-frame):not(.praxis-contrast-low).is-focused .workspace-ribbon.mod-left.is-collapsed,
|
||
.is-hidden-frameless.theme-light:not(.praxis-contrast-tonal-light):not(.colorful-frame):not(.praxis-contrast-low).is-focused .workspace-tabs.mod-top {
|
||
--titlebar-background-focused: var(--bg1);
|
||
}
|
||
.is-hidden-frameless.theme-dark:not(.praxis-contrast-black):not(.colorful-frame):not(.praxis-contrast-tonal-dark):not(.praxis-contrast-low) .workspace-ribbon.mod-left:not(.is-collapsed),
|
||
.is-hidden-frameless.theme-light:not(.praxis-contrast-tonal-light):not(.colorful-frame):not(.praxis-contrast-low):not(.praxis-contrast-tonal-dark):not(.praxis-contrast-low) .workspace-ribbon.mod-left:not(.is-collapsed) {
|
||
--titlebar-background: var(--bg2);
|
||
}
|
||
|
||
/* Trying for a smoother animation */
|
||
.mod-macos.is-hidden-frameless:not(.is-popout-window) .sidebar-toggle-button.mod-right {
|
||
right: 0;
|
||
padding-right: var(--size-4-2);
|
||
}
|
||
|
||
body.is-focused {
|
||
--titlebar-background-focused: var(--background-secondary);
|
||
}
|
||
|
||
.is-hidden-frameless:not(.colorful-frame) .mod-left-split .mod-top .workspace-tab-header-container {
|
||
--tab-container-background: var(--background-secondary);
|
||
}
|
||
|
||
.mod-root .workspace-tab-header-status-icon {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.is-collapsed .workspace-sidedock-vault-profile {
|
||
opacity: 0;
|
||
}
|
||
|
||
body:not(.is-mobile).hide-help .workspace-drawer-vault-actions .clickable-icon:first-child {
|
||
display: none;
|
||
}
|
||
|
||
body:not(.is-mobile).hide-settings .workspace-drawer-vault-actions .clickable-icon:last-child {
|
||
display: none;
|
||
}
|
||
|
||
body:not(.is-mobile).hide-help.hide-settings .workspace-drawer-vault-actions.workspace-drawer-vault-actions {
|
||
display: none;
|
||
}
|
||
|
||
body:not(.is-grabbing):not(.is-fullscreen).labeled-nav.is-hidden-frameless.vault-profile-top .mod-left-split .mod-top .workspace-tab-header-container {
|
||
-webkit-app-region: no-drag;
|
||
}
|
||
body:not(.is-grabbing):not(.is-fullscreen).labeled-nav.is-hidden-frameless.vault-profile-top .mod-left-split .mod-top .workspace-tab-header-container:before {
|
||
position: absolute;
|
||
top: 0;
|
||
content: "";
|
||
height: var(--header-height);
|
||
width: 100%;
|
||
-webkit-app-region: drag;
|
||
}
|
||
|
||
body:not(.is-mobile):not(.labeled-nav).vault-profile-top .workspace-split.mod-left-split .mod-top .workspace-tab-container {
|
||
margin-top: calc(var(--header-height) + 8px);
|
||
}
|
||
body:not(.is-mobile):not(.labeled-nav).vault-profile-top .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
|
||
-webkit-app-region: no-drag;
|
||
position: absolute;
|
||
top: var(--header-height);
|
||
z-index: 6;
|
||
width: 100%;
|
||
border-top: 0;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
body:not(.is-mobile):not(.labeled-nav).vault-profile-top .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher {
|
||
padding-left: var(--size-4-2);
|
||
}
|
||
|
||
body:not(.is-mobile).labeled-nav.vault-profile-top .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
|
||
-webkit-app-region: no-drag;
|
||
position: absolute;
|
||
top: var(--labeled-nav-top-margin);
|
||
z-index: 6;
|
||
width: 100%;
|
||
background-color: transparent;
|
||
border-top: 0;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
body:not(.is-mobile).labeled-nav.vault-profile-top .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher {
|
||
padding-left: var(--size-4-2);
|
||
}
|
||
|
||
.vault-profile-top .workspace-tab-header-container-inner {
|
||
--labeled-nav-top-margin: 84px;
|
||
}
|
||
|
||
/* Components */
|
||
.document-search, .document-replace {
|
||
max-width: 100%;
|
||
padding: 0;
|
||
}
|
||
|
||
.document-search-container {
|
||
margin: 0 auto;
|
||
max-width: var(--max-width);
|
||
width: var(--line-width);
|
||
}
|
||
|
||
/* Modals */
|
||
.modal-button-container .mod-checkbox {
|
||
--checkbox-radius: 5px;
|
||
}
|
||
|
||
/* Confirm delete */
|
||
.modal-container.mod-confirmation .modal {
|
||
width: 480px;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Hide settings descriptions */
|
||
.hide-settings-desc.is-phone .setting-item {
|
||
padding: 0.65em 0;
|
||
}
|
||
.hide-settings-desc.is-phone .setting-item-name {
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
}
|
||
.hide-settings-desc .setting-item-name {
|
||
transition: max-height 200ms ease-in-out, padding-top 200ms ease-in-out;
|
||
}
|
||
.hide-settings-desc .setting-item-name:active + .setting-item-description {
|
||
opacity: 1;
|
||
max-height: 500px;
|
||
padding-top: 4px;
|
||
transition: opacity 100ms ease-out, max-height 200ms ease-out, padding-top 200ms ease-in-out;
|
||
}
|
||
.hide-settings-desc .setting-item-description {
|
||
opacity: 0;
|
||
max-height: 0;
|
||
padding-top: 0;
|
||
transition: max-height 200ms ease-in-out, padding-top 200ms ease-in-out;
|
||
}
|
||
|
||
.popover {
|
||
--file-margins: var(--size-4-6) var(--size-4-6) var(--size-4-6);
|
||
}
|
||
|
||
.praxis-line-nums .popover .markdown-source-view {
|
||
--file-margins: var(--size-4-4) var(--size-4-6) var(--size-4-6) var(--size-4-12);
|
||
}
|
||
.praxis-line-nums .popover .markdown-source-view.is-rtl {
|
||
--file-margins: var(--size-4-4) var(--size-4-12) var(--size-4-6) var(--size-4-6);
|
||
}
|
||
|
||
/* Progress bars */
|
||
body {
|
||
--progress-outline: var(--background-modifier-border);
|
||
--progress-complete: var(--text-accent);
|
||
}
|
||
|
||
.markdown-rendered progress,
|
||
.markdown-source-view.is-live-preview progress,
|
||
.markdown-preview-view progress {
|
||
width: 220px;
|
||
}
|
||
.markdown-rendered progress[value]::-webkit-progress-bar,
|
||
.markdown-source-view.is-live-preview progress[value]::-webkit-progress-bar,
|
||
.markdown-preview-view progress[value]::-webkit-progress-bar {
|
||
box-shadow: inset 0px 0px 0px var(--border-width) var(--progress-outline);
|
||
}
|
||
.markdown-rendered progress[value^="1"]::-webkit-progress-value, .markdown-rendered progress[value^="2"]::-webkit-progress-value, .markdown-rendered progress[value^="3"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value^="1"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value^="2"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value^="3"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value^="1"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value^="2"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value^="3"]::-webkit-progress-value {
|
||
background-color: var(--color-red);
|
||
}
|
||
.markdown-rendered progress[value^="4"]::-webkit-progress-value, .markdown-rendered progress[value^="5"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value^="4"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value^="5"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value^="4"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value^="5"]::-webkit-progress-value {
|
||
background-color: var(--color-orange);
|
||
}
|
||
.markdown-rendered progress[value^="6"]::-webkit-progress-value, .markdown-rendered progress[value^="7"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value^="6"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value^="7"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value^="6"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value^="7"]::-webkit-progress-value {
|
||
background-color: var(--color-yellow);
|
||
}
|
||
.markdown-rendered progress[value^="8"]::-webkit-progress-value, .markdown-rendered progress[value^="9"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value^="8"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value^="9"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value^="8"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value^="9"]::-webkit-progress-value {
|
||
background-color: var(--color-green);
|
||
}
|
||
.markdown-rendered progress[value="1"]::-webkit-progress-value, .markdown-rendered progress[value="100"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="1"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="100"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="1"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="100"]::-webkit-progress-value {
|
||
background-color: var(--progress-complete);
|
||
}
|
||
.markdown-rendered progress[value="0"]::-webkit-progress-value, .markdown-rendered progress[value="2"]::-webkit-progress-value, .markdown-rendered progress[value="3"]::-webkit-progress-value, .markdown-rendered progress[value="4"]::-webkit-progress-value, .markdown-rendered progress[value="5"]::-webkit-progress-value, .markdown-rendered progress[value="6"]::-webkit-progress-value, .markdown-rendered progress[value="7"]::-webkit-progress-value, .markdown-rendered progress[value="8"]::-webkit-progress-value, .markdown-rendered progress[value="9"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="0"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="2"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="3"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="4"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="5"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="6"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="7"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="8"]::-webkit-progress-value,
|
||
.markdown-source-view.is-live-preview progress[value="9"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="0"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="2"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="3"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="4"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="5"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="6"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="7"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="8"]::-webkit-progress-value,
|
||
.markdown-preview-view progress[value="9"]::-webkit-progress-value {
|
||
background-color: var(--color-red);
|
||
}
|
||
|
||
/* Tooltips */
|
||
.tooltip {
|
||
transition: none;
|
||
animation: none;
|
||
}
|
||
|
||
.tooltip.mod-left,
|
||
.tooltip.mod-right {
|
||
animation: none;
|
||
}
|
||
|
||
.tooltip.mod-error {
|
||
color: var(--text-error);
|
||
}
|
||
|
||
/* Content */
|
||
/* Blockquotes */
|
||
.markdown-preview-view blockquote {
|
||
padding-inline-start: var(--nested-padding);
|
||
font-size: var(--blockquote-size);
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote,
|
||
.markdown-source-view.mod-cm6 .HyperMD-quote {
|
||
font-size: var(--blockquote-size);
|
||
}
|
||
|
||
.is-live-preview .cm-hmd-indent-in-quote {
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
/* Callouts */
|
||
.is-live-preview.is-readable-line-width > .cm-callout .callout {
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
body.praxis-callouts-outlined .callout .callout-title {
|
||
background-color: var(--background-primary);
|
||
font-size: var(--callout-title-size);
|
||
margin-top: -24px;
|
||
z-index: 200;
|
||
width: fit-content;
|
||
padding: 0 0.5em;
|
||
margin-left: -0.75em;
|
||
letter-spacing: 0.05em;
|
||
font-variant-caps: all-small-caps;
|
||
}
|
||
body.praxis-callouts-outlined .callout {
|
||
overflow: visible;
|
||
--callout-border-width: 1px;
|
||
--callout-border-opacity: 0.5;
|
||
--callout-title-size: 0.8em;
|
||
--callout-blend-mode: normal; /* reserved for future mix-blend-mode on callout background */
|
||
background-color: transparent;
|
||
}
|
||
body.praxis-callouts-outlined .cm-embed-block.cm-callout {
|
||
padding-top: 12px;
|
||
}
|
||
body.praxis-callouts-outlined .callout-content .callout {
|
||
margin-top: 18px;
|
||
}
|
||
|
||
/* Checklists, task lists, checkboxes */
|
||
body {
|
||
--checkbox-radius: 55%;
|
||
--checkbox-top: 2px;
|
||
--checkbox-left: 0px;
|
||
--checkbox-margin: 0px 6px 0px -2em;
|
||
}
|
||
|
||
.checkbox-square {
|
||
--checkbox-size: calc(var(--font-text-size) * 0.85);
|
||
--checkbox-radius: 5px;
|
||
--checkbox-top: 1px;
|
||
--checkbox-left: 0px;
|
||
--checkbox-margin: 0px 8px 0px -2em;
|
||
}
|
||
|
||
body {
|
||
--checklist-done-decoration: none;
|
||
--checklist-done-color: var(--text-normal);
|
||
}
|
||
|
||
.markdown-preview-section > .contains-task-list {
|
||
padding-bottom: 0.5em;
|
||
}
|
||
|
||
.mod-cm6 .HyperMD-task-line[data-task] .cm-formatting-list-ol ~ .task-list-label .task-list-item-checkbox {
|
||
margin: 1px;
|
||
}
|
||
|
||
.markdown-preview-view .task-list-item-checkbox {
|
||
position: relative;
|
||
top: var(--checkbox-top);
|
||
left: var(--checkbox-left);
|
||
}
|
||
|
||
/* Mobile: ensure task checkboxes meet minimum 44px touch target (WCAG 2.5.5) */
|
||
.is-mobile .task-list-item-checkbox {
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
}
|
||
|
||
.praxis-code-scroll {
|
||
--code-white-space: pre;
|
||
}
|
||
.praxis-code-scroll .HyperMD-codeblock.HyperMD-codeblock-bg {
|
||
overflow-y: scroll;
|
||
white-space: pre;
|
||
}
|
||
.praxis-code-scroll .cm-hmd-codeblock {
|
||
white-space: pre;
|
||
}
|
||
|
||
@media print {
|
||
.print {
|
||
--code-background: #eeeeee;
|
||
}
|
||
}
|
||
/* Transcluded notes and embeds */
|
||
body {
|
||
--embed-max-height: none;
|
||
--embed-decoration-style: solid;
|
||
--embed-decoration-color: var(--background-modifier-border-hover);
|
||
}
|
||
|
||
/* Strict embeds (naked) */
|
||
.embed-strict {
|
||
--embed-background: transparent;
|
||
--embed-border-start: 0;
|
||
--embed-border-left: 0;
|
||
--embed-padding: 0;
|
||
}
|
||
.embed-strict .markdown-embed-content {
|
||
--folding-offset: 0px;
|
||
}
|
||
.embed-strict .internal-embed .markdown-embed,
|
||
.embed-strict .markdown-preview-view .markdown-embed, .embed-strict.markdown-preview-view .markdown-embed {
|
||
padding: 0;
|
||
}
|
||
.embed-strict .markdown-embed-title,
|
||
.embed-strict .internal-embed .markdown-embed .markdown-embed-title {
|
||
display: none;
|
||
}
|
||
.embed-strict .internal-embed:not([src*="#^"]) .markdown-embed-link {
|
||
width: 24px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.embed-underline .internal-embed:not(.pdf-embed, .bases-embed) {
|
||
text-decoration-line: underline;
|
||
text-decoration-style: var(--embed-decoration-style);
|
||
text-decoration-color: var(--embed-decoration-color);
|
||
}
|
||
|
||
.embed-hide-title .markdown-embed-title {
|
||
display: none;
|
||
}
|
||
|
||
.embed-strict.contextual-typography .internal-embed .markdown-preview-view .markdown-preview-sizer > div,
|
||
.contextual-typography .embed-strict .internal-embed .markdown-preview-view .markdown-preview-sizer > div {
|
||
margin: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.markdown-embed .markdown-preview-view .markdown-preview-sizer {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.markdown-preview-view.markdown-embed .markdown-preview-sizer,
|
||
.markdown-preview-view.is-readable-line-width .markdown-embed .markdown-preview-sizer {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
min-height: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.markdown-embed .markdown-preview-section div:last-child p,
|
||
.markdown-embed .markdown-preview-section div:last-child ul {
|
||
margin-block-end: 2px;
|
||
}
|
||
|
||
.markdown-preview-view .markdown-embed {
|
||
margin-top: var(--nested-padding);
|
||
padding: 0 calc(var(--nested-padding) / 2) 0 var(--nested-padding);
|
||
}
|
||
|
||
.internal-embed:not([src*="#^"]) .markdown-embed-link {
|
||
right: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.markdown-embed-link,
|
||
.file-embed-link {
|
||
top: 0px;
|
||
right: 0;
|
||
text-align: right;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.file-embed-link svg,
|
||
.markdown-embed-link svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.markdown-embed .file-embed-link,
|
||
.markdown-embed .markdown-embed-link {
|
||
opacity: 0.6;
|
||
transition: opacity 0.1s linear;
|
||
}
|
||
|
||
.markdown-embed .file-embed-link:hover,
|
||
.markdown-embed .markdown-embed-link:hover {
|
||
opacity: 1;
|
||
}
|
||
.markdown-embed .file-embed-link:hover:hover,
|
||
.markdown-embed .markdown-embed-link:hover:hover {
|
||
background-color: transparent;
|
||
--icon-color: var(--text-accent);
|
||
}
|
||
|
||
.markdown-embed-link:hover, .file-embed-link:hover {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.markdown-embed .markdown-preview-view {
|
||
padding: 0;
|
||
}
|
||
|
||
.internal-embed .markdown-embed {
|
||
border: 0;
|
||
border-left: 1px solid var(--quote-opening-modifier);
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Links */
|
||
a[href*="obsidian://search"] {
|
||
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='17' height='17' class='search'><path fill='black' stroke='black' stroke-width='2' d='M42,6C23.2,6,8,21.2,8,40s15.2,34,34,34c7.4,0,14.3-2.4,19.9-6.4l26.3,26.3l5.6-5.6l-26-26.1c5.1-6,8.2-13.7,8.2-22.1 C76,21.2,60.8,6,42,6z M42,10c16.6,0,30,13.4,30,30S58.6,70,42,70S12,56.6,12,40S25.4,10,42,10z'></path></svg>");
|
||
}
|
||
|
||
.theme-dark a[href*="obsidian://search"] {
|
||
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='17' height='17' class='search'><path fill='white' stroke='white' stroke-width='2' d='M42,6C23.2,6,8,21.2,8,40s15.2,34,34,34c7.4,0,14.3-2.4,19.9-6.4l26.3,26.3l5.6-5.6l-26-26.1c5.1-6,8.2-13.7,8.2-22.1 C76,21.2,60.8,6,42,6z M42,10c16.6,0,30,13.4,30,30S58.6,70,42,70S12,56.6,12,40S25.4,10,42,10z'></path></svg>");
|
||
}
|
||
|
||
.plain-external-links .external-link {
|
||
background-image: none;
|
||
padding-right: 0;
|
||
}
|
||
|
||
body {
|
||
--adaptive-list-edit-offset: var(--list-edit-offset);
|
||
}
|
||
|
||
.is-rtl {
|
||
--adaptive-list-edit-offset: calc(var(--list-edit-offset)*-1);
|
||
}
|
||
|
||
/* Space between list items */
|
||
.markdown-source-view ol > li,
|
||
.markdown-source-view ul > li,
|
||
.markdown-preview-view ol > li,
|
||
.markdown-preview-view ul > li,
|
||
.mod-cm6 .HyperMD-list-line.cm-line {
|
||
padding-top: var(--list-spacing);
|
||
padding-bottom: var(--list-spacing);
|
||
}
|
||
|
||
.is-mobile ul > li:not(.task-list-item)::marker {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
/* Backlinks in Preview */
|
||
.is-mobile .workspace-leaf-content:not([data-type=search]) .workspace-leaf-content[data-type=markdown] .nav-buttons-container {
|
||
border-bottom: none;
|
||
padding-top: 5px;
|
||
}
|
||
|
||
.is-mobile .mod-root .workspace-leaf-content[data-type=markdown] .search-input-container {
|
||
width: calc(100% - 160px);
|
||
}
|
||
|
||
.embedded-backlinks .backlink-pane > .tree-item-self:hover,
|
||
.embedded-backlinks .backlink-pane > .tree-item-self {
|
||
text-transform: none;
|
||
color: var(--text-normal);
|
||
font-size: var(--font-adaptive-normal);
|
||
font-weight: 500;
|
||
letter-spacing: unset;
|
||
}
|
||
|
||
body {
|
||
--pdf-dark-opacity: 1;
|
||
}
|
||
|
||
.theme-light:not(.pdf-shadows-on),
|
||
.theme-dark:not(.pdf-shadows-on) {
|
||
--pdf-shadow: none;
|
||
--pdf-thumbnail-shadow: none;
|
||
}
|
||
.theme-light:not(.pdf-shadows-on) .pdf-viewer .page,
|
||
.theme-light:not(.pdf-shadows-on) .pdfViewer .page,
|
||
.theme-dark:not(.pdf-shadows-on) .pdf-viewer .page,
|
||
.theme-dark:not(.pdf-shadows-on) .pdfViewer .page {
|
||
border: 0;
|
||
}
|
||
.theme-light:not(.pdf-shadows-on) .pdf-sidebar-container .thumbnailSelectionRing,
|
||
.theme-dark:not(.pdf-shadows-on) .pdf-sidebar-container .thumbnailSelectionRing {
|
||
padding: 0;
|
||
}
|
||
.theme-light:not(.pdf-shadows-on) .pdf-sidebar-container .thumbnail::after,
|
||
.theme-dark:not(.pdf-shadows-on) .pdf-sidebar-container .thumbnail::after {
|
||
right: var(--size-4-2);
|
||
bottom: var(--size-4-2);
|
||
}
|
||
|
||
.theme-dark {
|
||
--pdf-thumbnail-shadow: 0 0 1px 0 rgba(0,0,0,0.6);
|
||
--pdf-shadow: 0 0 1px 0 rgba(0,0,0,0.6);
|
||
}
|
||
.theme-dark .pdf-viewer .canvasWrapper,
|
||
.theme-dark .pdfViewer .canvasWrapper {
|
||
opacity: var(--pdf-dark-opacity);
|
||
}
|
||
.theme-dark.pdf-invert-dark .workspace-leaf-content[data-type=pdf] .pdf-viewer .canvasWrapper,
|
||
.theme-dark.pdf-invert-dark .workspace-leaf-content[data-type=pdf] .pdfViewer .canvasWrapper {
|
||
filter: invert(1) hue-rotate(180deg);
|
||
mix-blend-mode: screen;
|
||
}
|
||
|
||
.theme-light.pdf-blend-light .workspace-leaf-content[data-type=pdf] .pdf-viewer .canvasWrapper,
|
||
.theme-light.pdf-blend-light .workspace-leaf-content[data-type=pdf] .pdfViewer .canvasWrapper {
|
||
mix-blend-mode: multiply;
|
||
}
|
||
|
||
body {
|
||
--table-header-border-width: 1px;
|
||
--table-column-first-border-width: 0;
|
||
--table-column-last-border-width: 0;
|
||
--table-row-last-border-width: 0;
|
||
--table-edge-cell-padding-first: var(--praxis-space-4);
|
||
--table-edge-cell-padding-last: var(--praxis-space-4);
|
||
--table-cell-padding: var(--praxis-space-3) var(--praxis-space-4);
|
||
--table-header-size: var(--table-text-size);
|
||
--table-border-color: color-mix(in srgb, var(--ui1) 60%, transparent);
|
||
--table-header-background: color-mix(in srgb, var(--bg3) 60%, var(--bg2));
|
||
--table-header-color: var(--tx1);
|
||
--table-header-weight: 500;
|
||
}
|
||
|
||
/* Preview mode tables */
|
||
.markdown-source-view.mod-cm6 table {
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
.markdown-rendered th {
|
||
--table-header-size: var(--table-text-size);
|
||
}
|
||
|
||
/* Table header styling */
|
||
.markdown-source-view.mod-cm6 th,
|
||
.markdown-preview-view th {
|
||
background-color: var(--table-header-background);
|
||
color: var(--table-header-color);
|
||
font-weight: var(--table-header-weight);
|
||
border-bottom: var(--table-header-border-width) solid var(--table-border-color);
|
||
}
|
||
|
||
/* Table cell line-height */
|
||
.markdown-source-view.mod-cm6 td,
|
||
.markdown-preview-view td {
|
||
line-height: var(--line-height);
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 table,
|
||
.markdown-preview-view table {
|
||
border: var(--border-width) solid var(--table-border-color);
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
border-radius: var(--praxis-radius);
|
||
overflow: hidden;
|
||
}
|
||
.markdown-source-view.mod-cm6 td, .markdown-source-view.mod-cm6 th,
|
||
.markdown-preview-view td,
|
||
.markdown-preview-view th {
|
||
padding: var(--table-cell-padding);
|
||
}
|
||
.markdown-source-view.mod-cm6 td:first-child, .markdown-source-view.mod-cm6 th:first-child,
|
||
.markdown-preview-view td:first-child,
|
||
.markdown-preview-view th:first-child {
|
||
padding-inline-start: var(--table-edge-cell-padding-first);
|
||
}
|
||
.markdown-source-view.mod-cm6 td:first-child .table-cell-wrapper, .markdown-source-view.mod-cm6 th:first-child .table-cell-wrapper,
|
||
.markdown-preview-view td:first-child .table-cell-wrapper,
|
||
.markdown-preview-view th:first-child .table-cell-wrapper {
|
||
padding-inline-start: 0;
|
||
}
|
||
.markdown-source-view.mod-cm6 td:last-child, .markdown-source-view.mod-cm6 th:last-child,
|
||
.markdown-preview-view td:last-child,
|
||
.markdown-preview-view th:last-child {
|
||
padding-inline-end: var(--table-edge-cell-padding-last);
|
||
}
|
||
.markdown-source-view.mod-cm6 td:last-child .table-cell-wrapper, .markdown-source-view.mod-cm6 th:last-child .table-cell-wrapper,
|
||
.markdown-preview-view td:last-child .table-cell-wrapper,
|
||
.markdown-preview-view th:last-child .table-cell-wrapper {
|
||
padding-inline-end: 0;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-table-widget table {
|
||
margin-top: 0;
|
||
}
|
||
.markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper {
|
||
padding: var(--table-cell-padding);
|
||
}
|
||
|
||
.markdown-reading-view table {
|
||
--p-spacing: 0.5rem;
|
||
}
|
||
|
||
.cm-embed-block.cm-table-widget.markdown-rendered {
|
||
padding: var(--table-drag-padding);
|
||
overscroll-behavior-x: none;
|
||
}
|
||
.is-mobile .cm-embed-block.cm-table-widget.markdown-rendered {
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
/* Override Sortable plugin */
|
||
.markdown-preview-view th,
|
||
.table-view-table > thead > tr > th,
|
||
.markdown-source-view.mod-cm6 .dataview.table-view-table thead.table-view-thead tr th {
|
||
padding: var(--table-cell-padding);
|
||
}
|
||
.markdown-preview-view th:first-child,
|
||
.table-view-table > thead > tr > th:first-child,
|
||
.markdown-source-view.mod-cm6 .dataview.table-view-table thead.table-view-thead tr th:first-child {
|
||
padding-inline-start: var(--table-edge-cell-padding-first);
|
||
}
|
||
.markdown-preview-view th:last-child,
|
||
.table-view-table > thead > tr > th:last-child,
|
||
.markdown-source-view.mod-cm6 .dataview.table-view-table thead.table-view-thead tr th:last-child {
|
||
padding-inline-end: var(--table-edge-cell-padding-last);
|
||
}
|
||
|
||
/* Live Preview Tables */
|
||
.cm-s-obsidian .HyperMD-table-row span.cm-hmd-table-sep,
|
||
.cm-hmd-table-sep-dummy {
|
||
color: var(--text-faint);
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* Tags */
|
||
body.praxis-unstyled-tags {
|
||
--tag-background: transparent;
|
||
--tag-background-hover: transparent;
|
||
--tag-border-width: 0px;
|
||
--tag-padding-x: 0;
|
||
--tag-padding-y: 0;
|
||
--tag-size: inherit;
|
||
--tag-color-hover: var(--text-accent-hover);
|
||
}
|
||
body.praxis-unstyled-tags.is-mobile.theme-dark {
|
||
--tag-background: transparent;
|
||
}
|
||
|
||
body:not(.praxis-unstyled-tags) {
|
||
--tag-size: 0.8em;
|
||
--tag-padding-y: 0.2em;
|
||
--tag-background: transparent;
|
||
--tag-background-hover: transparent;
|
||
--tag-color: var(--text-muted);
|
||
--tag-border-width: 1px;
|
||
--tag-border-color: var(--background-modifier-border);
|
||
--tag-border-color-hover: var(--background-modifier-border-hover);
|
||
--tag-color-hover: var(--text-normal);
|
||
}
|
||
|
||
body.is-mobile.theme-dark {
|
||
--tag-background: transparent;
|
||
}
|
||
|
||
/* Headings and fonts */
|
||
h1, h2, h3, h4 {
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
body, input, button {
|
||
font-family: var(--font-interface);
|
||
}
|
||
|
||
.cm-s-obsidian span.cm-error {
|
||
color: var(--color-red);
|
||
}
|
||
|
||
.markdown-preview-view,
|
||
.popover,
|
||
.workspace-leaf-content[data-type=markdown] {
|
||
font-family: var(--font-text);
|
||
}
|
||
|
||
body,
|
||
.markdown-preview-view,
|
||
.view-content > .markdown-source-view.mod-cm6.is-live-preview > .cm-scroller,
|
||
.view-content > .cm-s-obsidian {
|
||
font-size: var(--font-adaptive-normal);
|
||
font-weight: var(--normal-weight);
|
||
}
|
||
|
||
.view-content > .markdown-source-view.mod-cm6 .cm-scroller,
|
||
.view-content > .markdown-source-view,
|
||
.view-content > .cm-s-obsidian {
|
||
font-family: var(--font-editor);
|
||
}
|
||
|
||
.cm-formatting:not(.cm-formatting-code-block):not(.cm-formatting-hashtag) {
|
||
color: var(--text-formatting);
|
||
}
|
||
|
||
.hide-markdown .is-live-preview .cm-formatting.cm-formatting-code.cm-inline-code, .hide-markdown .is-live-preview .cm-formatting.cm-formatting-em, .hide-markdown .is-live-preview .cm-formatting.cm-formatting-link, .hide-markdown .is-live-preview .cm-formatting.cm-formatting-strikethrough, .hide-markdown .is-live-preview .cm-formatting.cm-formatting-strong, .hide-markdown .is-live-preview .cm-formatting.cm-formatting-highlight {
|
||
display: none;
|
||
}
|
||
.hide-markdown .is-live-preview .cm-formatting-quote {
|
||
opacity: 0;
|
||
}
|
||
.hide-markdown .is-live-preview .cm-hmd-internal-link.cm-link-has-alias,
|
||
.hide-markdown .is-live-preview .cm-link-alias-pipe,
|
||
.hide-markdown .is-live-preview .cm-formatting-link,
|
||
.hide-markdown .is-live-preview .cm-formatting-header {
|
||
display: none;
|
||
}
|
||
|
||
/* Minimal features */
|
||
/* Active line highlight */
|
||
body:not(.active-line-off) .workspace-leaf-content[data-type=markdown] .cm-line.cm-active,
|
||
body:not(.active-line-off) .workspace-leaf-content[data-type=markdown] .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote.cm-active {
|
||
background-color: var(--active-line-bg);
|
||
box-shadow: -25vw 0px var(--active-line-bg), 25vw 0 var(--active-line-bg);
|
||
}
|
||
|
||
/* Animation speed helpers
|
||
* These are manual body-class overrides, NOT exposed in Style Settings.
|
||
* Apply via a CSS snippet that adds the class to <body>, or via a plugin
|
||
* such as Body Class or CustomJS:
|
||
*
|
||
* body.disable-animations — sets all Praxis transition/animation tokens to 0ms
|
||
* body.fast-animations — halves all Praxis transition/animation durations
|
||
*
|
||
* Note: system-level @media (prefers-reduced-motion: reduce) is handled
|
||
* separately at the bottom of this file and takes precedence over these classes.
|
||
*/
|
||
.disable-animations {
|
||
--ribbon-animation-duration: 0ms;
|
||
--focus-animation-duration: 0ms;
|
||
}
|
||
.disable-animations .mod-sidedock {
|
||
transition-duration: 0ms;
|
||
}
|
||
|
||
.fast-animations {
|
||
--ribbon-animation-duration: 0.05s;
|
||
--focus-animation-duration: 0.05s;
|
||
}
|
||
.fast-animations .mod-sidedock {
|
||
transition-duration: 70ms;
|
||
}
|
||
|
||
body {
|
||
--content-margin: auto;
|
||
--content-margin-start: max(
|
||
calc(50% - var(--line-width)/2),
|
||
calc(50% - var(--max-width)/2) );
|
||
--content-line-width: min(var(--line-width), var(--max-width));
|
||
--map-header-padding: 2px;
|
||
}
|
||
|
||
/* Line widths ------------------------------------ */
|
||
/* Set overall context to 100% width */
|
||
.markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer {
|
||
max-width: 100%;
|
||
margin-inline: auto;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Prevent x overflow when line numbers are on
|
||
.markdown-source-view.mod-cm6 .cm-sizer {
|
||
overflow-x: hidden;
|
||
} */
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content,
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Set inner content to line width */
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div,
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > div,
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer > .inline-title,
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer > .embedded-backlinks,
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer > .metadata-container {
|
||
max-width: var(--max-width);
|
||
width: var(--line-width);
|
||
margin-inline: var(--content-margin) !important;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > *:not(div) {
|
||
max-width: var(--content-line-width);
|
||
margin-inline-start: var(--content-margin-start) !important;
|
||
}
|
||
|
||
/* File margins ------------------------------------ */
|
||
.is-readable-line-width {
|
||
--file-margins: 1rem 0 0 0;
|
||
}
|
||
|
||
.is-mobile .markdown-preview-view {
|
||
--folding-offset: 0;
|
||
}
|
||
|
||
/* With line numbers */
|
||
.praxis-line-nums .workspace-leaf-content[data-type=markdown] {
|
||
--file-margins: var(--size-4-8) var(--size-4-8) var(--size-4-8) 48px;
|
||
}
|
||
.praxis-line-nums .workspace-leaf-content[data-type=markdown].is-rtl {
|
||
--file-margins: var(--size-4-8) 48px var(--size-4-8) var(--size-4-8);
|
||
}
|
||
.praxis-line-nums .workspace-leaf-content[data-type=markdown] .is-readable-line-width {
|
||
--file-margins: 1rem 0 0 var(--folding-offset);
|
||
}
|
||
.praxis-line-nums .workspace-leaf-content[data-type=markdown] .is-readable-line-width.is-rtl {
|
||
--file-margins: 1rem var(--folding-offset) 0 0;
|
||
}
|
||
|
||
.praxis-line-nums .mod-right-split .markdown-preview-view,
|
||
.praxis-line-nums .mod-right-split .markdown-source-view.mod-cm6 .cm-scroller,
|
||
.praxis-line-nums .mod-left-split .markdown-preview-view,
|
||
.praxis-line-nums .mod-left-split .markdown-source-view.mod-cm6 .cm-scroller {
|
||
--file-margins: var(--size-4-5) var(--size-4-5) var(--size-4-5) 48px;
|
||
}
|
||
|
||
.view-content .reader-mode-content.is-readable-line-width .markdown-preview-sizer {
|
||
max-width: var(--max-width);
|
||
width: var(--line-width);
|
||
}
|
||
|
||
/* Embeds ------------------------------------ */
|
||
.markdown-preview-view .inline-embed {
|
||
--max-width: 100%;
|
||
}
|
||
|
||
/* Content rules ------------------------------------
|
||
|
||
The benefit of this approach is that it covers all levels
|
||
of specificity wherever the helper is applied: global,
|
||
per file, and element-level.
|
||
|
||
It means we don't have to write long specific selectors
|
||
like `.table-100.markdown-source-view...`
|
||
*/
|
||
body {
|
||
--container-table-max-width: var(--max-width);
|
||
--table-max-width: none;
|
||
--table-width: auto;
|
||
--table-margin: inherit;
|
||
--table-wrapper-width: fit-content;
|
||
--container-dataview-table-width: var(--line-width);
|
||
--container-img-width: var(--line-width);
|
||
--container-img-max-width: var(--max-width);
|
||
--img-max-width: 100%;
|
||
--img-width: auto;
|
||
/* because external images don't have a container */
|
||
--img-margin-start: var(--content-margin-start);
|
||
--img-line-width: var(--content-line-width);
|
||
--container-chart-width: var(--line-width);
|
||
--container-chart-max-width: var(--max-width);
|
||
--chart-max-width: none;
|
||
--chart-width: auto;
|
||
--container-map-width: var(--line-width);
|
||
--container-map-max-width: var(--max-width);
|
||
--map-max-width: none;
|
||
--map-width: auto;
|
||
--container-iframe-width: var(--line-width);
|
||
--container-iframe-max-width: var(--max-width);
|
||
--iframe-max-width: none;
|
||
--iframe-width: auto;
|
||
/* Entire page */
|
||
}
|
||
body .wide {
|
||
--line-width: var(--line-width-wide);
|
||
--container-table-width: var(--line-width-wide);
|
||
--container-dataview-table-width: var(--line-width-wide);
|
||
--container-img-width: var(--line-width-wide);
|
||
--container-iframe-width: var(--line-width-wide);
|
||
--container-map-width: var(--line-width-wide);
|
||
--container-chart-width: var(--line-width-wide);
|
||
}
|
||
body .max {
|
||
--line-width: var(--max-width);
|
||
--container-table-width: var(--max-width);
|
||
--container-dataview-table-width: var(--max-width);
|
||
--container-img-width: var(--max-width);
|
||
--container-iframe-width: var(--max-width);
|
||
--container-map-width: var(--max-width);
|
||
--container-chart-width: var(--max-width);
|
||
}
|
||
|
||
table.dataview {
|
||
--table-min-width: min(var(--line-width),var(--max-width));
|
||
}
|
||
|
||
.cards table.dataview {
|
||
--table-width: 100%;
|
||
--table-min-width: none;
|
||
}
|
||
|
||
body {
|
||
--table-drag-space: 16px;
|
||
--container-table-margin: calc(var(--content-margin-start) - var(--table-drag-space));
|
||
--container-table-width: calc(var(--line-width) + var(--table-drag-space)*2);
|
||
--table-drag-padding: var(--table-drag-space);
|
||
}
|
||
|
||
.is-mobile {
|
||
--table-drag-space: 16px;
|
||
--container-table-max-width: calc(100% - var(--container-table-margin));
|
||
}
|
||
|
||
.maximize-tables-auto {
|
||
--container-table-max-width: 100%;
|
||
--container-table-width: 100%;
|
||
--container-dataview-table-width: 100%;
|
||
--container-table-margin: 0;
|
||
--table-drag-padding: var(--table-drag-space) 0;
|
||
--table-max-width: 100%;
|
||
--table-margin: var(--content-margin-start) auto;
|
||
--table-width: auto;
|
||
}
|
||
.maximize-tables-auto .cards {
|
||
--container-table-max-width: var(--max-width);
|
||
}
|
||
.maximize-tables-auto .cards .block-language-dataview {
|
||
--table-margin: auto;
|
||
}
|
||
|
||
.maximize-tables {
|
||
--container-table-max-width: 100%;
|
||
--container-table-width: 100%;
|
||
--container-table-margin: 0;
|
||
--table-drag-padding: var(--table-drag-space) 0;
|
||
--table-min-width: min(var(--line-width), var(--max-width));
|
||
--table-max-width: 100%;
|
||
--table-margin: auto;
|
||
--table-width: auto;
|
||
--table-edge-cell-padding-first: 8px;
|
||
--table-edge-cell-padding-last: 8px;
|
||
--table-wrapper-width: auto;
|
||
}
|
||
|
||
.table-wide,
|
||
.table-max,
|
||
.table-100,
|
||
.table-full,
|
||
.table-cards {
|
||
--table-max-width: 100%;
|
||
--table-width: 100%;
|
||
}
|
||
|
||
.table-wide {
|
||
--container-table-width: var(--line-width-wide);
|
||
--container-dataview-table-width: var(--line-width-wide);
|
||
--container-table-margin: auto;
|
||
--table-edge-cell-padding-first: 0px;
|
||
}
|
||
|
||
.table-max {
|
||
--container-table-width: var(--max-width);
|
||
--container-table-max-width: calc(var(--max-width) + var(--table-drag-space)*2);
|
||
--container-dataview-table-width: var(--max-width);
|
||
--container-table-margin: auto;
|
||
--table-edge-cell-padding-first: 0px;
|
||
--table-margin: 0;
|
||
}
|
||
|
||
.table-100,
|
||
.table-full,
|
||
.table-cards {
|
||
--container-table-width: 100%;
|
||
--container-dataview-table-width: 100%;
|
||
--container-table-max-width: 100%;
|
||
--container-table-margin: 0;
|
||
--table-edge-cell-padding-first: 16px;
|
||
--table-edge-cell-padding-last: 16px;
|
||
--table-margin: 0;
|
||
--table-drag-padding: var(--table-drag-space) 0;
|
||
--table-wrapper-width: min(fit-content, 100%);
|
||
--bases-cards-embed-padding: 0 12px;
|
||
--bases-header-padding-end: var(--size-4-2);
|
||
--bases-header-padding-start: var(--size-4-2);
|
||
}
|
||
.table-100 .bases-view[data-view-type=table],
|
||
.table-full .bases-view[data-view-type=table],
|
||
.table-cards .bases-view[data-view-type=table] {
|
||
--bases-embed-border-width: 0;
|
||
--bases-embed-border-radius: 0;
|
||
}
|
||
.table-100 .table-col-btn,
|
||
.table-full .table-col-btn,
|
||
.table-cards .table-col-btn {
|
||
cursor: default;
|
||
margin-top: 8px;
|
||
height: var(--table-header-size);
|
||
inset-inline-start: calc(100% - var(--table-drag-handle-size) - 4px);
|
||
}
|
||
.table-100 .markdown-source-view.mod-cm6, .table-100.markdown-source-view.mod-cm6,
|
||
.table-full .markdown-source-view.mod-cm6, .table-full.markdown-source-view.mod-cm6,
|
||
.table-cards .markdown-source-view.mod-cm6, .table-cards.markdown-source-view.mod-cm6 {
|
||
--table-drag-handle-background-active: transparent;
|
||
}
|
||
.table-100 .markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle, .table-100.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle,
|
||
.table-full .markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle, .table-full.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle,
|
||
.table-cards .markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle, .table-cards.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle {
|
||
inset-inline-end: calc(100% - var(--table-drag-handle-size));
|
||
}
|
||
|
||
.img-wide,
|
||
.img-max,
|
||
.img-100 {
|
||
--img-max-width: 100%;
|
||
--img-width: 100%;
|
||
}
|
||
|
||
.img-wide {
|
||
--container-img-width: var(--line-width-wide);
|
||
--img-line-width: var(--line-width-wide);
|
||
--img-margin-start: calc(50% - var(--line-width-wide)/2);
|
||
}
|
||
|
||
.img-max {
|
||
--container-img-width: var(--max-width);
|
||
--img-line-width: var(--max-width);
|
||
--img-margin-start: calc(50% - var(--max-width)/2);
|
||
}
|
||
|
||
.img-100 {
|
||
--container-img-width: 100%;
|
||
--container-img-max-width: 100%;
|
||
--img-line-width: 100%;
|
||
--img-margin-start:0;
|
||
}
|
||
|
||
.map-wide,
|
||
.map-max,
|
||
.map-100 {
|
||
--map-max-width: 100%;
|
||
--map-width: 100%;
|
||
}
|
||
|
||
.map-wide {
|
||
--container-map-width: var(--line-width-wide);
|
||
}
|
||
|
||
.map-max {
|
||
--container-map-width: var(--max-width);
|
||
}
|
||
|
||
.map-100 {
|
||
--container-map-width: 100%;
|
||
--container-map-max-width: 100%;
|
||
--map-header-padding: var(--size-4-2);
|
||
}
|
||
.map-100 .bases-view[data-view-type=map] {
|
||
--bases-embed-border-radius: 0;
|
||
}
|
||
|
||
.chart-wide,
|
||
.chart-max,
|
||
.chart-100 {
|
||
--chart-max-width: 100%;
|
||
--chart-width: 100%;
|
||
}
|
||
|
||
.chart-wide {
|
||
--container-chart-width: var(--line-width-wide);
|
||
}
|
||
|
||
.chart-max {
|
||
--container-chart-width: var(--max-width);
|
||
}
|
||
|
||
.chart-100 {
|
||
--container-chart-width: 100%;
|
||
--container-chart-max-width: 100%;
|
||
}
|
||
|
||
.iframe-wide,
|
||
.iframe-max,
|
||
.iframe-100 {
|
||
--iframe-max-width: 100%;
|
||
--iframe-width: 100%;
|
||
}
|
||
|
||
.iframe-wide {
|
||
--container-iframe-width: var(--line-width-wide);
|
||
}
|
||
|
||
.iframe-max {
|
||
--container-iframe-width: var(--max-width);
|
||
}
|
||
|
||
.iframe-100 {
|
||
--container-iframe-width: 100%;
|
||
--container-iframe-max-width: 100%;
|
||
}
|
||
|
||
/* Block widths ------------------------------------
|
||
|
||
Because we are using :has() this method requires
|
||
Obsidian installer 1.1.9 or above.
|
||
*/
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content .cm-table-widget,
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > .el-table,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer .cm-table-widget,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > .el-table {
|
||
width: var(--container-table-width);
|
||
max-width: var(--container-table-max-width);
|
||
margin-inline: var(--container-table-margin);
|
||
padding-inline-start: var(--table-drag-padding);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content .el-table,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer .el-table {
|
||
margin-inline: var(--container-table-margin);
|
||
padding-inline-start: var(--table-drag-padding);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content .table-wrapper,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer .table-wrapper {
|
||
width: var(--table-wrapper-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > .bases-embed,
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > div:has(:is(.block-language-base, .bases-embed)),
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > :has(> :is(.block-language-dataview, .block-language-dataviewjs) table),
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > .bases-embed,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div:has(:is(.block-language-base, .bases-embed)),
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > :has(> :is(.block-language-dataview, .block-language-dataviewjs) table) {
|
||
width: var(--container-dataview-table-width);
|
||
max-width: var(--container-table-max-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content table,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer table {
|
||
width: var(--table-width);
|
||
max-width: var(--table-max-width);
|
||
margin-inline: var(--table-margin);
|
||
min-width: var(--table-min-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content .block-language-dataviewjs > :is(p, h1, h2, h3, h4, h5, h6),
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer .block-language-dataviewjs > :is(p, h1, h2, h3, h4, h5, h6) {
|
||
width: var(--line-width);
|
||
margin-inline: var(--content-margin);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content .block-language-dataviewjs > .dataview-error,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer .block-language-dataviewjs > .dataview-error {
|
||
margin: 0 auto;
|
||
width: var(--content-line-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content .dataview.dataview-error-box,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer .dataview.dataview-error-box {
|
||
margin-inline: var(--table-margin);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > .image-embed,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > .image-embed {
|
||
padding-top: 0.25rem;
|
||
padding-bottom: 0.25rem;
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > .image-embed,
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > .el-embed-image,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > .image-embed,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > .el-embed-image {
|
||
width: var(--container-img-width);
|
||
max-width: var(--container-img-max-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > .image-embed img,
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > .el-embed-image img,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > .image-embed img,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > .el-embed-image img {
|
||
max-width: var(--img-max-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > img,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > img {
|
||
max-width: var(--img-line-width);
|
||
margin-inline-start: var(--img-margin-start);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content div:has(> .block-language-dataviewjs canvas, > .block-language-chart),
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer div:has(> .block-language-dataviewjs canvas, > .block-language-chart) {
|
||
width: var(--container-chart-width);
|
||
max-width: var(--container-chart-max-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content div:has(> .block-language-dataviewjs canvas, > .block-language-chart) canvas,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer div:has(> .block-language-dataviewjs canvas, > .block-language-chart) canvas {
|
||
max-width: var(--chart-max-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content div:has(.bases-view[data-view-type=map]),
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer div:has(.bases-view[data-view-type=map]) {
|
||
width: var(--container-map-width);
|
||
max-width: var(--container-map-max-width);
|
||
--bases-header-padding-end: var(--map-header-padding);
|
||
--bases-header-padding-start: var(--map-header-padding);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content div:has(.bases-view[data-view-type=map]) iframe,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer div:has(.bases-view[data-view-type=map]) iframe {
|
||
max-width: var(--map-max-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > div:has(> :is(iframe, .cm-html-embed)),
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div:has(> :is(iframe, .cm-html-embed)) {
|
||
width: var(--container-iframe-width);
|
||
max-width: var(--container-iframe-max-width);
|
||
}
|
||
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > div:has(> :is(iframe, .cm-html-embed)) iframe,
|
||
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div:has(> :is(iframe, .cm-html-embed)) iframe {
|
||
max-width: var(--iframe-max-width);
|
||
}
|
||
|
||
.borders-none {
|
||
--divider-width:0px;
|
||
--tab-outline-width: 0px;
|
||
}
|
||
|
||
body:is(.borders-none) .mod-root .workspace-tab-header-container:is(div, :hover) {
|
||
--tab-outline-width: 0px;
|
||
}
|
||
|
||
/* MIT License | Copyright (c) Stephan Ango (@kepano)
|
||
|
||
Cards snippet for Obsidian
|
||
|
||
author: @kepano
|
||
version: 3.0.1
|
||
|
||
Support my work:
|
||
https://github.com/sponsors/kepano
|
||
|
||
*/
|
||
body {
|
||
--cards-min-width: 180px;
|
||
--cards-max-width: 1fr;
|
||
--cards-mobile-width: 120px;
|
||
--cards-image-height: 400px;
|
||
--cards-padding: 1.2em;
|
||
--cards-image-fit: contain;
|
||
--cards-background: transparent;
|
||
--cards-background-hover: transparent;
|
||
--cards-border-width: 1px;
|
||
--cards-aspect-ratio: auto;
|
||
--cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width)));
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
body {
|
||
--cards-min-width:var(--cards-mobile-width);
|
||
}
|
||
}
|
||
.cards.table-100 table.dataview tbody,
|
||
.table-100 .cards table.dataview tbody {
|
||
padding: 0.25rem 0.75rem;
|
||
}
|
||
|
||
.cards table.dataview {
|
||
--table-width: 100%;
|
||
--table-edge-cell-padding-first: calc(var(--cards-padding)/2);
|
||
--table-edge-cell-padding-last: calc(var(--cards-padding)/2);
|
||
--table-cell-padding: calc(var(--cards-padding)/3) calc(var(--cards-padding)/2);
|
||
line-height: 1.3;
|
||
}
|
||
.cards table.dataview tbody {
|
||
clear: both;
|
||
padding: 0.5rem 0;
|
||
display: grid;
|
||
grid-template-columns: var(--cards-columns);
|
||
grid-column-gap: 0.75rem;
|
||
grid-row-gap: 0.75rem;
|
||
}
|
||
.cards table.dataview > tbody > tr {
|
||
background-color: var(--cards-background);
|
||
border: var(--cards-border-width) solid var(--background-modifier-border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 0;
|
||
padding: 0 0 calc(var(--cards-padding) / 3);
|
||
border-radius: var(--praxis-radius-xs);
|
||
overflow: hidden;
|
||
transition: box-shadow 0.15s linear;
|
||
max-width: var(--cards-max-width);
|
||
height: auto;
|
||
}
|
||
.cards table.dataview > tbody > tr:hover {
|
||
background-color: var(--cards-background-hover);
|
||
border: var(--cards-border-width) solid var(--background-modifier-border-hover);
|
||
box-shadow: 0 4px 6px 0px rgba(0, 0, 0, 0.05), 0 1px 3px 1px rgba(0, 0, 0, 0.025);
|
||
transition: box-shadow 0.15s linear;
|
||
}
|
||
.cards table.dataview tbody > tr > td:first-child {
|
||
font-weight: var(--bold-weight);
|
||
border: none;
|
||
}
|
||
.cards table.dataview tbody > tr > td:first-child a {
|
||
display: block;
|
||
}
|
||
.cards table.dataview tbody > tr > td:last-child {
|
||
border: none;
|
||
}
|
||
.cards table.dataview tbody > tr > td:not(:first-child) {
|
||
font-size: calc(var(--table-text-size) * 0.9);
|
||
color: var(--text-muted);
|
||
}
|
||
.cards table.dataview tbody > tr > td > * {
|
||
padding: calc(var(--cards-padding) / 3) 0;
|
||
}
|
||
.cards table.dataview tbody > tr > td:not(:last-child):not(:first-child) {
|
||
padding: 4px 0;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
width: calc(100% - var(--cards-padding));
|
||
margin: 0 calc(var(--cards-padding) / 2);
|
||
}
|
||
.cards table.dataview tbody > tr > td a {
|
||
text-decoration-line: none;
|
||
}
|
||
.cards table.dataview tbody > tr > td > button {
|
||
width: 100%;
|
||
margin: calc(var(--cards-padding) / 2) 0;
|
||
}
|
||
.cards table.dataview tbody > tr > td:last-child > button {
|
||
margin-bottom: calc(var(--cards-padding) / 6);
|
||
}
|
||
.cards table.dataview tbody > tr > td > ul {
|
||
width: 100%;
|
||
padding: 0.25em 0;
|
||
margin: 0 auto;
|
||
}
|
||
.cards table.dataview tbody > tr > td img {
|
||
aspect-ratio: var(--cards-aspect-ratio);
|
||
width: 100%;
|
||
object-fit: var(--cards-image-fit);
|
||
max-height: var(--cards-image-height);
|
||
background-color: var(--background-secondary);
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6.cards .dataview.table-view-table > tbody > tr > td,
|
||
.trim-cols .cards table.dataview tbody > tr > td {
|
||
white-space: normal;
|
||
}
|
||
|
||
.links-int-on .cards table {
|
||
--link-decoration: underline;
|
||
}
|
||
|
||
/* Block button */
|
||
.markdown-source-view.mod-cm6.cards .edit-block-button {
|
||
top: -1px;
|
||
right: 28px;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ------------------- */
|
||
/* Sorting menu */
|
||
.cards.table-100 table.dataview thead > tr,
|
||
.table-100 .cards table.dataview thead > tr {
|
||
right: 0.75rem;
|
||
}
|
||
|
||
.table-100 .cards table.dataview thead:before,
|
||
.cards.table-100 table.dataview thead:before {
|
||
margin-right: 0.75rem;
|
||
}
|
||
|
||
.cards table.dataview thead {
|
||
user-select: none;
|
||
width: 180px;
|
||
display: block;
|
||
float: right;
|
||
position: relative;
|
||
text-align: right;
|
||
height: 24px;
|
||
padding-bottom: 0px;
|
||
}
|
||
.cards table.dataview thead:hover:after {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
.cards table.dataview thead:hover:before {
|
||
background-color: var(--text-muted);
|
||
}
|
||
.cards table.dataview thead:after,
|
||
.cards table.dataview thead:before {
|
||
content: "";
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 10px;
|
||
height: 16px;
|
||
cursor: var(--cursor);
|
||
text-align: right;
|
||
padding: var(--size-4-1) var(--size-4-2);
|
||
margin-bottom: 2px;
|
||
border-radius: var(--radius-s);
|
||
font-weight: 500;
|
||
font-size: var(--font-adaptive-small);
|
||
}
|
||
.cards table.dataview thead:before {
|
||
background-color: var(--text-faint);
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: 16px;
|
||
-webkit-mask-position: center center;
|
||
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100"><path fill="currentColor" d="M49.792 33.125l-5.892 5.892L33.333 28.45V83.333H25V28.45L14.438 39.017L8.542 33.125L29.167 12.5l20.625 20.625zm41.667 33.75L70.833 87.5l-20.625 -20.625l5.892 -5.892l10.571 10.567L66.667 16.667h8.333v54.883l10.567 -10.567l5.892 5.892z"></path></svg>');
|
||
}
|
||
.cards table.dataview thead > tr {
|
||
top: -1px;
|
||
position: absolute;
|
||
display: none;
|
||
z-index: 9;
|
||
border: 1px solid var(--background-modifier-border-hover);
|
||
background-color: var(--background-secondary);
|
||
box-shadow: var(--shadow-s);
|
||
padding: 6px;
|
||
border-radius: var(--radius-m);
|
||
flex-direction: column;
|
||
margin: 24px 0 0;
|
||
width: 100%;
|
||
}
|
||
.cards table.dataview thead:hover > tr {
|
||
display: flex;
|
||
height: auto;
|
||
}
|
||
.cards table.dataview thead > tr > th {
|
||
display: block;
|
||
padding: 3px 30px 3px 6px;
|
||
border-radius: var(--radius-s);
|
||
width: 100%;
|
||
font-weight: 400;
|
||
color: var(--text-normal);
|
||
cursor: var(--cursor);
|
||
border: none;
|
||
font-size: var(--font-ui-small);
|
||
}
|
||
.cards table.dataview thead > tr > th[sortable-style=sortable-asc],
|
||
.cards table.dataview thead > tr > th[sortable-style=sortable-desc] {
|
||
color: var(--text-normal);
|
||
}
|
||
.cards table.dataview thead > tr > th:hover {
|
||
color: var(--text-normal);
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
/* ------------------- */
|
||
/* Card lists */
|
||
.list-cards.markdown-preview-view .list-bullet,
|
||
.list-cards.markdown-preview-view .list-collapse-indicator, .list-cards.markdown-preview-view.markdown-rendered.show-indentation-guide li > ul::before {
|
||
display: none;
|
||
}
|
||
.list-cards.markdown-preview-view div > ul {
|
||
display: grid;
|
||
gap: 0.75rem;
|
||
grid-template-columns: var(--cards-columns);
|
||
padding: 0;
|
||
line-height: var(--line-height-tight);
|
||
}
|
||
.list-cards.markdown-preview-view div > ul .contains-task-list {
|
||
padding-inline-start: calc(var(--cards-padding) * 1.5);
|
||
}
|
||
.list-cards.markdown-preview-view div > ul > li.task-list-item > .task-list-item-checkbox {
|
||
margin-inline-start: 3px;
|
||
}
|
||
.list-cards.markdown-preview-view div > ul > li {
|
||
background-color: var(--cards-background);
|
||
padding: calc(var(--cards-padding) / 2);
|
||
border-radius: var(--radius-s);
|
||
border: var(--cards-border-width) solid var(--background-modifier-border);
|
||
overflow: hidden;
|
||
margin-inline-start: 0;
|
||
}
|
||
.list-cards.markdown-preview-view div > ul .image-embed {
|
||
padding: 0;
|
||
display: block;
|
||
background-color: var(--background-secondary);
|
||
border-radius: var(--image-radius);
|
||
}
|
||
.list-cards.markdown-preview-view div > ul .image-embed img {
|
||
aspect-ratio: var(--cards-aspect-ratio);
|
||
object-fit: var(--cards-image-fit);
|
||
max-height: var(--cards-image-height);
|
||
background-color: var(--background-secondary);
|
||
vertical-align: bottom;
|
||
}
|
||
.list-cards.markdown-preview-view div > ul > li > a {
|
||
--link-decoration: none;
|
||
--link-external-decoration: underline;
|
||
font-weight: var(--bold-weight);
|
||
}
|
||
.list-cards.markdown-preview-view div ul > li:hover {
|
||
border-color: var(--background-modifier-border-hover);
|
||
}
|
||
.list-cards.markdown-preview-view div ul ul {
|
||
display: block;
|
||
width: 100%;
|
||
color: var(--text-muted);
|
||
font-size: var(--font-smallest);
|
||
margin: calc(var(--cards-padding) / -4) 0;
|
||
padding: calc(var(--cards-padding) / 2) 0;
|
||
}
|
||
.list-cards.markdown-preview-view div ul ul ul {
|
||
padding-bottom: calc(var(--cards-padding) / 4);
|
||
}
|
||
.list-cards.markdown-preview-view div ul ul > li {
|
||
display: block;
|
||
margin-inline-start: 0;
|
||
}
|
||
|
||
/* ------------------- */
|
||
/* Helper classes */
|
||
.cards.cards-16-9,
|
||
.list-cards.cards-16-9 {
|
||
--cards-aspect-ratio: 16/9;
|
||
}
|
||
.cards.cards-1-1,
|
||
.list-cards.cards-1-1 {
|
||
--cards-aspect-ratio: 1/1;
|
||
}
|
||
.cards.cards-2-1,
|
||
.list-cards.cards-2-1 {
|
||
--cards-aspect-ratio: 2/1;
|
||
}
|
||
.cards.cards-2-3,
|
||
.list-cards.cards-2-3 {
|
||
--cards-aspect-ratio: 2/3;
|
||
}
|
||
.cards.cards-cols-1,
|
||
.list-cards.cards-cols-1 {
|
||
--cards-columns: repeat(1, minmax(0, 1fr));
|
||
}
|
||
.cards.cards-cols-2,
|
||
.list-cards.cards-cols-2 {
|
||
--cards-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
.cards.cards-cover,
|
||
.list-cards.cards-cover {
|
||
--cards-image-fit: cover;
|
||
/* Images */
|
||
}
|
||
.cards.cards-cover tbody > tr > td:first-child,
|
||
.list-cards.cards-cover tbody > tr > td:first-child {
|
||
padding: 0;
|
||
background-color: var(--background-secondary);
|
||
display: block;
|
||
margin: 0;
|
||
width: 100%;
|
||
}
|
||
.cards.cards-cover tbody > tr > td:first-child img,
|
||
.list-cards.cards-cover tbody > tr > td:first-child img {
|
||
border-radius: 0;
|
||
}
|
||
.cards.cards-align-bottom table.dataview tbody > tr > td:last-child,
|
||
.list-cards.cards-align-bottom table.dataview tbody > tr > td:last-child {
|
||
margin-top: auto;
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
.cards table.dataview tbody > tr > td:not(:first-child) {
|
||
font-size: 80%;
|
||
}
|
||
}
|
||
@media (min-width: 400px) {
|
||
.cards-cols-3 {
|
||
--cards-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
.cards-cols-4 {
|
||
--cards-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
.cards-cols-5 {
|
||
--cards-columns: repeat(5, minmax(0, 1fr));
|
||
}
|
||
.cards-cols-6 {
|
||
--cards-columns: repeat(6, minmax(0, 1fr));
|
||
}
|
||
.cards-cols-7 {
|
||
--cards-columns: repeat(7, minmax(0, 1fr));
|
||
}
|
||
.cards-cols-8 {
|
||
--cards-columns: repeat(8, minmax(0, 1fr));
|
||
}
|
||
}
|
||
/* Checklist icons */
|
||
.cm-formatting.cm-formatting-task.cm-property {
|
||
font-family: var(--font-monospace);
|
||
}
|
||
|
||
|
||
/* Colorful active states */
|
||
.colorful-active .nav-files-container {
|
||
--nav-item-background-active: var(--interactive-accent);
|
||
--nav-item-color-active: var(--text-on-accent);
|
||
}
|
||
.colorful-active .nav-files-container .is-active .nav-file-tag {
|
||
color: var(--text-on-accent);
|
||
opacity: 0.6;
|
||
}
|
||
.colorful-active .tree-item-self.is-being-renamed:focus-within {
|
||
--nav-item-color-active: var(--text-normal);
|
||
}
|
||
.colorful-active #calendar-container .active,
|
||
.colorful-active #calendar-container .active.today,
|
||
.colorful-active #calendar-container .active:hover,
|
||
.colorful-active #calendar-container .day:active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
}
|
||
.colorful-active #calendar-container .day:active .dot,
|
||
.colorful-active #calendar-container .active .dot,
|
||
.colorful-active #calendar-container .today.active .dot {
|
||
fill: var(--text-on-accent);
|
||
}
|
||
|
||
body:not(.colorful-active) .horizontal-tab-nav-item.is-active,
|
||
body:not(.colorful-active) .vertical-tab-nav-item.is-active {
|
||
background-color: var(--bg3);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
body {
|
||
--frame-background:
|
||
hsl(
|
||
var(--frame-background-h),
|
||
var(--frame-background-s),
|
||
var(--frame-background-l));
|
||
--frame-icon-color: var(--frame-muted-color);
|
||
}
|
||
|
||
.theme-light {
|
||
--frame-background-h: var(--accent-h);
|
||
--frame-background-s: var(--accent-s);
|
||
--frame-background-l: calc(var(--accent-l) + 30%);
|
||
--frame-outline-color:
|
||
hsla(
|
||
var(--frame-background-h),
|
||
var(--frame-background-s),
|
||
calc(var(--frame-background-l) - 6.5%),
|
||
1
|
||
);
|
||
--frame-muted-color:
|
||
hsl(
|
||
var(--frame-background-h),
|
||
calc(var(--frame-background-s) - 10%),
|
||
calc(var(--frame-background-l) - 35%));
|
||
}
|
||
|
||
.theme-dark {
|
||
--frame-background-h: var(--accent-h);
|
||
--frame-background-s: var(--accent-s);
|
||
--frame-background-l: calc(var(--accent-l) - 25%);
|
||
--frame-outline-color:
|
||
hsla(
|
||
var(--frame-background-h),
|
||
calc(var(--frame-background-s) - 2%),
|
||
calc(var(--frame-background-l) + 6.5%),
|
||
1
|
||
);
|
||
--frame-muted-color:
|
||
hsl(
|
||
var(--frame-background-h),
|
||
calc(var(--frame-background-s) - 10%),
|
||
calc(var(--frame-background-l) + 25%));
|
||
}
|
||
|
||
.colorful-frame.theme-dark {
|
||
--tab-outline-width: 0px;
|
||
}
|
||
|
||
.colorful-frame.is-focused,
|
||
.colorful-frame {
|
||
--frame-divider-color: var(--frame-outline-color);
|
||
--titlebar-background: var(--frame-background);
|
||
--titlebar-background-focused: var(--frame-background);
|
||
--titlebar-text-color: var(--frame-muted-color);
|
||
--praxis-tab-text-color: var(--frame-muted-color);
|
||
}
|
||
.colorful-frame.is-focused .workspace-tabs:not(.mod-stacked),
|
||
.colorful-frame .workspace-tabs:not(.mod-stacked) {
|
||
--tab-text-color: var(--praxis-tab-text-color);
|
||
--tab-text-color-focused: var(--praxis-tab-text-color);
|
||
}
|
||
.colorful-frame.is-focused .titlebar,
|
||
.colorful-frame.is-focused .workspace-ribbon.mod-left:before,
|
||
.colorful-frame.is-focused .mod-top .workspace-tab-header-container,
|
||
.colorful-frame .titlebar,
|
||
.colorful-frame .workspace-ribbon.mod-left:before,
|
||
.colorful-frame .mod-top .workspace-tab-header-container {
|
||
--tab-outline-color: var(--frame-outline-color);
|
||
--tab-divider-color: var(--frame-outline-color);
|
||
}
|
||
.colorful-frame.is-focused .mod-root .workspace-tab-header .workspace-tab-header-inner-icon,
|
||
.colorful-frame .mod-root .workspace-tab-header .workspace-tab-header-inner-icon {
|
||
--icon-color: var(--praxis-tab-text-color-active);
|
||
--icon-color-hover: var(--praxis-tab-text-color-active);
|
||
--icon-color-active: var(--praxis-tab-text-color-active);
|
||
--icon-color-focused: var(--praxis-tab-text-color-active);
|
||
}
|
||
.colorful-frame.is-focused .sidebar-toggle-button,
|
||
.colorful-frame.is-focused .workspace-tab-header:not(.is-active),
|
||
.colorful-frame.is-focused .workspace-tab-header-new-tab,
|
||
.colorful-frame.is-focused .workspace-tab-header-tab-list,
|
||
.colorful-frame.is-focused .mod-left-split .mod-top .workspace-tab-header,
|
||
.colorful-frame.is-focused .mod-right-split .mod-top .workspace-tab-header,
|
||
.colorful-frame .sidebar-toggle-button,
|
||
.colorful-frame .workspace-tab-header:not(.is-active),
|
||
.colorful-frame .workspace-tab-header-new-tab,
|
||
.colorful-frame .workspace-tab-header-tab-list,
|
||
.colorful-frame .mod-left-split .mod-top .workspace-tab-header,
|
||
.colorful-frame .mod-right-split .mod-top .workspace-tab-header {
|
||
--background-modifier-hover: var(--frame-outline-color);
|
||
--icon-color: var(--frame-icon-color);
|
||
--icon-color-hover: var(--frame-icon-color);
|
||
--icon-color-active: var(--frame-icon-color);
|
||
--icon-color-focused: var(--frame-icon-color);
|
||
--icon-color-focus: var(--frame-icon-color);
|
||
}
|
||
.colorful-frame.is-focused .mod-right-split .mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
|
||
.colorful-frame.is-focused .mod-left-split .mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
|
||
.colorful-frame .mod-right-split .mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
|
||
.colorful-frame .mod-left-split .mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon {
|
||
color: var(--frame-icon-color);
|
||
}
|
||
|
||
.workspace-leaf-resize-handle {
|
||
transition: none;
|
||
}
|
||
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-right-split > .workspace-leaf-resize-handle {
|
||
-webkit-app-region: no-drag;
|
||
border: 0;
|
||
z-index: 15;
|
||
}
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle:after,
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-left-split > .workspace-leaf-resize-handle:after,
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-right-split > .workspace-leaf-resize-handle:after {
|
||
content: "";
|
||
height: 100%;
|
||
width: 1px;
|
||
background: linear-gradient(180deg, var(--frame-outline-color) var(--header-height), var(--divider-color) var(--header-height));
|
||
top: 0;
|
||
position: absolute;
|
||
}
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle:hover:after,
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-left-split > .workspace-leaf-resize-handle:hover:after,
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-right-split > .workspace-leaf-resize-handle:hover:after {
|
||
background: var(--divider-color-hover);
|
||
}
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-right-split > .workspace-leaf-resize-handle:after {
|
||
left: 0;
|
||
}
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle:after,
|
||
.colorful-frame.is-hidden-frameless:not(.praxis-focus-mode) .workspace-split.mod-left-split > .workspace-leaf-resize-handle:after {
|
||
right: 0;
|
||
}
|
||
|
||
/* Colorful headings — on by default; add .colorful-headings-off to disable */
|
||
body:not(.colorful-headings-off) {
|
||
--praxis-heading-1-color: var(--color-red);
|
||
--praxis-heading-2-color: var(--color-orange);
|
||
--praxis-heading-3-color: var(--color-yellow);
|
||
--praxis-heading-4-color: var(--color-green);
|
||
--praxis-heading-5-color: var(--color-blue);
|
||
--praxis-heading-6-color: var(--color-purple);
|
||
--h1-color: var(--praxis-heading-1-color);
|
||
--h2-color: var(--praxis-heading-2-color);
|
||
--h3-color: var(--praxis-heading-3-color);
|
||
--h4-color: var(--praxis-heading-4-color);
|
||
--h5-color: var(--praxis-heading-5-color);
|
||
--h6-color: var(--praxis-heading-6-color);
|
||
}
|
||
body:not(.colorful-headings-off) .modal {
|
||
--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);
|
||
}
|
||
|
||
/* Focus mode */
|
||
/* MIT License | Copyright (c) Stephan Ango (@kepano) */
|
||
/* Hide app ribbon */
|
||
.workspace-ribbon.mod-left {
|
||
border-left: 0;
|
||
transition: none;
|
||
}
|
||
|
||
:root {
|
||
--focus-animation-duration: 0.1s;
|
||
}
|
||
|
||
.praxis-focus-mode.is-translucent .workspace-ribbon.mod-left.is-collapsed, .praxis-focus-mode.is-translucent .workspace-ribbon.mod-left.is-collapsed:before {
|
||
background-color: var(--background-primary);
|
||
}
|
||
.praxis-focus-mode .workspace-ribbon.mod-left {
|
||
transition: background-color 0s linear 0s;
|
||
}
|
||
.praxis-focus-mode .workspace-ribbon.mod-left.is-collapsed {
|
||
border-color: transparent;
|
||
background-color: var(--background-primary);
|
||
}
|
||
.praxis-focus-mode .workspace-ribbon.mod-left.is-collapsed:before {
|
||
background-color: var(--background-primary);
|
||
border-color: transparent;
|
||
}
|
||
.praxis-focus-mode .workspace-ribbon.mod-left.is-collapsed .side-dock-actions,
|
||
.praxis-focus-mode .workspace-ribbon.mod-left.is-collapsed .side-dock-settings {
|
||
opacity: 0;
|
||
transition: opacity var(--focus-animation-duration) ease-in-out 0.1s;
|
||
}
|
||
.praxis-focus-mode .workspace-ribbon.mod-left.is-collapsed:hover .side-dock-actions,
|
||
.praxis-focus-mode .workspace-ribbon.mod-left.is-collapsed:hover .side-dock-settings {
|
||
opacity: 1;
|
||
transition: opacity var(--focus-animation-duration) ease-in-out 0.1s;
|
||
}
|
||
.praxis-focus-mode.borders-title .workspace-ribbon.mod-left.is-collapsed {
|
||
border-right: none;
|
||
}
|
||
.praxis-focus-mode .mod-root .sidebar-toggle-button.mod-right {
|
||
opacity: 0;
|
||
transition: opacity var(--focus-animation-duration) ease-in-out 0.5s;
|
||
}
|
||
.praxis-focus-mode:not(.praxis-status-off) .status-bar {
|
||
opacity: 0;
|
||
transition: opacity var(--focus-animation-duration) ease-in-out;
|
||
}
|
||
.praxis-focus-mode .status-bar:hover {
|
||
opacity: 1;
|
||
transition: opacity var(--focus-animation-duration) ease-in-out;
|
||
}
|
||
.praxis-focus-mode .mod-root .workspace-tabs {
|
||
position: relative;
|
||
}
|
||
.praxis-focus-mode .mod-root .workspace-tabs:before:hover {
|
||
background-color: blue;
|
||
}
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container {
|
||
height: 0px;
|
||
transition: all var(--focus-animation-duration) linear 0.6s;
|
||
--tab-outline-width: 0px;
|
||
}
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container .workspace-tab-header-container-inner,
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container .workspace-tab-header-new-tab,
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container .workspace-tab-header-tab-list {
|
||
opacity: 0;
|
||
transition: all var(--focus-animation-duration) linear 0.6s;
|
||
}
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container .workspace-tab-header-spacer:before {
|
||
width: 100%;
|
||
content: " ";
|
||
background-color: transparent;
|
||
height: 15px;
|
||
position: absolute;
|
||
z-index: 100;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container .workspace-tab-header-container-inner .workspace-tab-header.is-active,
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container .workspace-tab-header-container-inner .workspace-tab-header.is-active::before,
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container .workspace-tab-header-container-inner .workspace-tab-header.is-active::after {
|
||
transition: all var(--focus-animation-duration) linear 0.6s;
|
||
}
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container:hover {
|
||
height: var(--header-height);
|
||
--tab-outline-width: 1px;
|
||
transition: all var(--focus-animation-duration) linear 0.05s;
|
||
}
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container:hover .sidebar-toggle-button.mod-right,
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container:hover .workspace-tab-header-container-inner,
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container:hover .workspace-tab-header-new-tab,
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container:hover .workspace-tab-header-tab-list {
|
||
opacity: 1;
|
||
transition: all var(--focus-animation-duration) linear 0.05s;
|
||
}
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container:hover .workspace-tab-header-container-inner .workspace-tab-header.is-active,
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container:hover .workspace-tab-header-container-inner .workspace-tab-header.is-active::before,
|
||
.praxis-focus-mode .mod-root .workspace-tab-header-container:hover .workspace-tab-header-container-inner .workspace-tab-header.is-active::after {
|
||
transition: all var(--focus-animation-duration) linear 0.05s;
|
||
}
|
||
.praxis-focus-mode.mod-macos:not(.is-fullscreen) .workspace:not(.is-left-sidedock-open) .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner {
|
||
padding-top: 30px;
|
||
}
|
||
|
||
/* Collapse pane header */
|
||
body.show-view-header .app-container .workspace-split.mod-root > .workspace-leaf .view-header {
|
||
transition: height var(--focus-animation-duration) linear 0.1s;
|
||
}
|
||
|
||
body.praxis-focus-mode.show-view-header .mod-top-left-space .view-header {
|
||
padding-left: var(--frame-left-space);
|
||
}
|
||
body.praxis-focus-mode.show-view-header .mod-root .workspace-leaf .view-header {
|
||
height: 0em;
|
||
transition: all var(--focus-animation-duration) linear 0.5s;
|
||
}
|
||
body.praxis-focus-mode.show-view-header .view-header::after {
|
||
width: 100%;
|
||
content: " ";
|
||
background-color: transparent;
|
||
height: 40px;
|
||
position: absolute;
|
||
z-index: -9;
|
||
top: 0;
|
||
}
|
||
body.praxis-focus-mode.show-view-header .view-header-nav-buttons,
|
||
body.praxis-focus-mode.show-view-header .view-header-title-container,
|
||
body.praxis-focus-mode.show-view-header .view-actions {
|
||
opacity: 0;
|
||
transition: all var(--focus-animation-duration) linear 0.5s;
|
||
}
|
||
body.praxis-focus-mode.show-view-header .mod-root .workspace-tab-header-container:hover ~ .workspace-tab-container .view-header,
|
||
body.praxis-focus-mode.show-view-header .mod-root .workspace-leaf .view-header:hover,
|
||
body.praxis-focus-mode.show-view-header .mod-root .workspace-leaf .view-header:focus-within {
|
||
height: calc(var(--header-height) + 2px);
|
||
transition: all var(--focus-animation-duration) linear 0.1s;
|
||
}
|
||
body.praxis-focus-mode.show-view-header .mod-root .workspace-tab-header-container:hover ~ .workspace-tab-container .view-header .view-header-nav-buttons,
|
||
body.praxis-focus-mode.show-view-header .mod-root .workspace-tab-header-container:hover ~ .workspace-tab-container .view-header .view-actions,
|
||
body.praxis-focus-mode.show-view-header .mod-root .workspace-tab-header-container:hover ~ .workspace-tab-container .view-header .view-header-title-container,
|
||
body.praxis-focus-mode.show-view-header .view-header:hover .view-header-nav-buttons,
|
||
body.praxis-focus-mode.show-view-header .view-header:hover .view-actions,
|
||
body.praxis-focus-mode.show-view-header .view-header:hover .view-header-title-container,
|
||
body.praxis-focus-mode.show-view-header .view-header:focus-within .view-header-nav-buttons,
|
||
body.praxis-focus-mode.show-view-header .view-header:focus-within .view-actions,
|
||
body.praxis-focus-mode.show-view-header .view-header:focus-within .view-header-title-container {
|
||
opacity: 1;
|
||
transition: all var(--focus-animation-duration) linear 0.1s;
|
||
}
|
||
body.praxis-focus-mode.show-view-header .view-content {
|
||
height: 100%;
|
||
}
|
||
|
||
/* Full width media */
|
||
.full-width-media {
|
||
--iframe-width: 100%;
|
||
}
|
||
.full-width-media .markdown-source-view .image-embed img:not(.link-favicon):not(.emoji):not([width]),
|
||
.full-width-media .markdown-source-view img:not(.link-favicon):not(.emoji):not([width]),
|
||
.full-width-media .markdown-source-view .external-embed,
|
||
.full-width-media .markdown-source-view audio,
|
||
.full-width-media .markdown-source-view video,
|
||
.full-width-media .markdown-preview-view .image-embed img:not(.link-favicon):not(.emoji):not([width]),
|
||
.full-width-media .markdown-preview-view img:not(.link-favicon):not(.emoji):not([width]),
|
||
.full-width-media .markdown-preview-view .external-embed,
|
||
.full-width-media .markdown-preview-view audio,
|
||
.full-width-media .markdown-preview-view video {
|
||
width: 100%;
|
||
}
|
||
.full-width-media .image-embed:not([width]) .image-wrapper {
|
||
width: 100%;
|
||
}
|
||
|
||
.markdown-source-view video,
|
||
.markdown-source-view img:not(.emoji),
|
||
.markdown-rendered video,
|
||
.markdown-rendered img:not(.emoji) {
|
||
border-radius: var(--image-radius);
|
||
}
|
||
|
||
body:not(.is-mobile) div.image-embed:focus-within .image-wrapper::after {
|
||
border-radius: var(--image-radius);
|
||
}
|
||
|
||
.tabular {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* Table helper classes for alternate styles */
|
||
/* MIT License | Copyright (c) Stephan Ango (@kepano) */
|
||
.table-small .bases-view {
|
||
--bases-table-font-size: 85%;
|
||
}
|
||
.table-small table:not(.calendar) {
|
||
--table-text-size: 85%;
|
||
}
|
||
|
||
.table-tiny .bases-view {
|
||
--bases-table-font-size: 75%;
|
||
}
|
||
.table-tiny table:not(.calendar) {
|
||
--table-text-size: 75%;
|
||
}
|
||
|
||
.row-hover {
|
||
--table-edge-cell-padding-first: 8px;
|
||
--table-edge-cell-padding-last: 8px;
|
||
--table-row-background-hover: var(--hl1);
|
||
--table-row-alt-background-hover: var(--hl1);
|
||
}
|
||
|
||
.row-alt {
|
||
--table-row-alt-background: var(--background-table-rows);
|
||
--table-row-alt-background-hover: var(--background-table-rows);
|
||
--table-edge-cell-padding-first: 8px;
|
||
--table-edge-cell-padding-last: 8px;
|
||
}
|
||
|
||
.col-alt .markdown-rendered:not(.cards) {
|
||
--table-column-alt-background: var(--background-table-rows);
|
||
}
|
||
|
||
.table-tabular table:not(.calendar) {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.table-center .markdown-preview-view .markdown-preview-sizer table, .table-center.markdown-preview-view .markdown-preview-sizer table,
|
||
.table-center .markdown-source-view.mod-cm6 .table-wrapper, .table-center.markdown-source-view.mod-cm6 .table-wrapper {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.table-lines {
|
||
--table-border-width: var(--border-width);
|
||
--table-header-border-width: var(--border-width);
|
||
--table-column-first-border-width: var(--border-width);
|
||
--table-column-last-border-width:var(--border-width);
|
||
--table-row-last-border-width: var(--border-width);
|
||
--table-edge-cell-padding: 8px;
|
||
--table-edge-cell-padding-first: 8px;
|
||
--table-edge-cell-padding-last: 8px;
|
||
--table-add-button-border-width: 1px;
|
||
}
|
||
|
||
.table-nowrap {
|
||
--table-white-space: nowrap;
|
||
}
|
||
|
||
.table-nowrap-first table thead > tr > th:first-child,
|
||
.table-nowrap-first table tbody > tr > td:first-child {
|
||
--table-white-space: nowrap;
|
||
}
|
||
|
||
.trim-cols,
|
||
.table-nowrap .table-wrap {
|
||
--table-white-space: normal;
|
||
}
|
||
|
||
.table-numbers {
|
||
--table-numbers-padding-right: 0.5em;
|
||
}
|
||
.table-numbers table:not(.calendar) {
|
||
counter-reset: section;
|
||
}
|
||
.table-numbers table:not(.calendar) > thead > tr > th:first-child {
|
||
white-space: nowrap;
|
||
}
|
||
.table-numbers table:not(.calendar) > thead > tr > th:first-child::before {
|
||
content: " ";
|
||
padding-right: var(--table-numbers-padding-right);
|
||
display: inline-block;
|
||
min-width: 2em;
|
||
}
|
||
.table-numbers table:not(.calendar) > thead > tr > th:first-child .table-cell-wrapper,
|
||
.table-numbers table:not(.calendar) > thead > tr > th:first-child .cm-s-obsidian {
|
||
display: inline-block;
|
||
min-width: 10px;
|
||
}
|
||
.table-numbers table:not(.calendar):not(.table-editor) > tbody > tr > td:first-child, .table-numbers table:not(.calendar).table-editor > tbody > tr > td:first-child .table-cell-wrapper {
|
||
white-space: nowrap;
|
||
}
|
||
.table-numbers table:not(.calendar):not(.table-editor) > tbody > tr > td:first-child::before, .table-numbers table:not(.calendar).table-editor > tbody > tr > td:first-child .table-cell-wrapper::before {
|
||
counter-increment: section;
|
||
content: counter(section) " ";
|
||
text-align: center;
|
||
padding-right: var(--table-numbers-padding-right);
|
||
display: inline-block;
|
||
min-width: 2em;
|
||
color: var(--text-faint);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.table-numbers table:not(.calendar):not(.table-editor) > tbody > tr > td:first-child .cm-s-obsidian, .table-numbers table:not(.calendar).table-editor > tbody > tr > td:first-child .table-cell-wrapper .cm-s-obsidian {
|
||
display: inline-block;
|
||
min-width: 10px;
|
||
}
|
||
.table-numbers .table-editor {
|
||
--table-numbers-padding-right: 0;
|
||
}
|
||
|
||
.row-lines-off {
|
||
--table-row-last-border-width: 0;
|
||
--bases-table-row-border-width: 0;
|
||
}
|
||
.row-lines-off table:not(.calendar) tbody > tr > td,
|
||
.row-lines-off .table-view-table > tbody > tr > td,
|
||
.row-lines-off table:not(.calendar) tbody > tr:last-child > td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.row-lines:not(.table-lines) .markdown-source-view:not(.cards),
|
||
.row-lines:not(.table-lines) .markdown-preview-view:not(.cards) {
|
||
--table-row-last-border-width: 0;
|
||
}
|
||
.row-lines:not(.table-lines) .markdown-source-view:not(.cards) table:not(.calendar) tbody > tr:not(:last-child) > td,
|
||
.row-lines:not(.table-lines) .markdown-source-view:not(.cards) .table-view-table > tbody > tr:not(:last-child) > td,
|
||
.row-lines:not(.table-lines) .markdown-preview-view:not(.cards) table:not(.calendar) tbody > tr:not(:last-child) > td,
|
||
.row-lines:not(.table-lines) .markdown-preview-view:not(.cards) .table-view-table > tbody > tr:not(:last-child) > td {
|
||
border-bottom: var(--table-border-width) solid var(--table-border-color);
|
||
}
|
||
|
||
.col-lines {
|
||
--bases-table-column-border-width: var(--table-border-width);
|
||
}
|
||
.col-lines table:not(.calendar) tbody > tr > td:not(:last-child),
|
||
.col-lines .table-view-table thead > tr > th:not(:last-child),
|
||
.col-lines .table-view-table > tbody > tr > td:not(:last-child) {
|
||
border-right: var(--table-border-width) solid var(--background-modifier-border);
|
||
}
|
||
|
||
/* Dark mode images */
|
||
/* MIT License | Copyright (c) Stephan Ango (@kepano) */
|
||
:root {
|
||
--image-mix: normal ;
|
||
}
|
||
|
||
.image-blend-light {
|
||
--image-mix: multiply;
|
||
}
|
||
|
||
.theme-dark .markdown-source-view img,
|
||
.theme-dark .markdown-preview-view img {
|
||
opacity: var(--image-muted);
|
||
transition: opacity 0.25s linear;
|
||
}
|
||
|
||
@media print {
|
||
body {
|
||
--image-muted: 1;
|
||
}
|
||
}
|
||
.theme-dark .print-preview img,
|
||
.theme-dark .markdown-source-view img:hover,
|
||
.theme-dark .markdown-preview-view img:hover {
|
||
opacity: 1;
|
||
transition: opacity 0.25s linear;
|
||
}
|
||
|
||
.theme-light img {
|
||
mix-blend-mode: var(--image-mix);
|
||
}
|
||
|
||
/* Invert */
|
||
div[src$="#blend"],
|
||
div[src$="#invert"] {
|
||
background-color: var(--background-primary);
|
||
}
|
||
|
||
.theme-dark img[src$="#invert"],
|
||
.theme-dark div[src$="#invert"] img,
|
||
.theme-dark span[src$="#invert"] img {
|
||
filter: invert(1) hue-rotate(180deg);
|
||
mix-blend-mode: screen;
|
||
}
|
||
.theme-dark img[src$="#blend"],
|
||
.theme-dark div[src$="#blend"] img,
|
||
.theme-dark span[src$="#blend"] img {
|
||
mix-blend-mode: screen;
|
||
}
|
||
.theme-dark .img-blend {
|
||
mix-blend-mode: screen;
|
||
}
|
||
|
||
.theme-light img[src$="#blend"],
|
||
.theme-light div[src$="#blend"] img,
|
||
.theme-light span[src$="#blend"] img {
|
||
mix-blend-mode: multiply;
|
||
}
|
||
.theme-light img[src$="#invertW"],
|
||
.theme-light div[src$="#invertW"] img,
|
||
.theme-light span[src$=invertW] img {
|
||
filter: invert(1) hue-rotate(180deg);
|
||
}
|
||
.theme-light .img-blend {
|
||
mix-blend-mode: multiply;
|
||
}
|
||
|
||
/* Circle */
|
||
img[src$="#circle"]:not(.emoji),
|
||
span[src$="#circle"] img:not(.emoji),
|
||
span[src$="#round"] img:not(.emoji) {
|
||
border-radius: 55%;
|
||
aspect-ratio: 1/1;
|
||
}
|
||
|
||
/* Outline */
|
||
img[src$="#outline"],
|
||
div[src$="#outline"] img,
|
||
span[src$="#outline"] img {
|
||
border: 1px solid var(--ui1);
|
||
}
|
||
|
||
/* Interface */
|
||
img[src$="#interface"],
|
||
span[src$="#interface"] img {
|
||
border: 1px solid var(--ui1);
|
||
box-shadow: 0px 0.5px 0.9px rgba(0, 0, 0, 0.021), 0px 1.3px 2.5px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.039), 0px 10px 20px rgba(0, 0, 0, 0.06);
|
||
margin-top: 10px;
|
||
margin-bottom: 15px;
|
||
border-radius: var(--radius-m);
|
||
}
|
||
|
||
/* MIT License | Copyright (c) Stephan Ango (@kepano)
|
||
|
||
Image Grid snippet for Obsidian
|
||
|
||
author: @kepano
|
||
version: 4.0.0
|
||
|
||
Support my work:
|
||
https://github.com/sponsors/kepano
|
||
|
||
*/
|
||
/* Revamped for Obsidian 1.1.9+ using :has() */
|
||
body {
|
||
--image-grid-fit: cover;
|
||
--image-grid-background: transparent;
|
||
--img-grid-gap: 0.5rem;
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
body {
|
||
--img-grid-gap: 0.25rem;
|
||
}
|
||
}
|
||
.img-grid-ratio {
|
||
--image-grid-fit: contain;
|
||
}
|
||
|
||
.img-grid .image-embed.is-loaded {
|
||
line-height: 0;
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
.img-grid .image-embed.is-loaded img {
|
||
background-color: var(--image-grid-background);
|
||
}
|
||
.img-grid .image-embed.is-loaded img:active {
|
||
background-color: transparent;
|
||
}
|
||
.img-grid .markdown-preview-section > div:has(img) p:empty,
|
||
.img-grid .markdown-preview-section > div:has(img) img ~ br,
|
||
.img-grid .markdown-preview-section > div:has(img) .image-embed ~ br {
|
||
display: none;
|
||
}
|
||
.img-grid .markdown-preview-section :is(div, p):has(> :is(.image-embed, img) ~ :is(.image-embed, img)) {
|
||
display: grid;
|
||
margin-block-start: var(--img-grid-gap);
|
||
margin-block-end: var(--img-grid-gap);
|
||
grid-column-gap: var(--img-grid-gap);
|
||
grid-row-gap: 0;
|
||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||
}
|
||
.img-grid .markdown-preview-section :is(div, p):has(> :is(.image-embed, img) ~ :is(.image-embed, img)) > img {
|
||
object-fit: var(--image-grid-fit);
|
||
align-self: stretch;
|
||
}
|
||
.img-grid .markdown-preview-section :is(div, p):has(> :is(.image-embed, img) ~ :is(.image-embed, img)) > .internal-embed img {
|
||
object-fit: var(--image-grid-fit);
|
||
align-self: center;
|
||
}
|
||
.img-grid .markdown-preview-section > div:has(img) > p {
|
||
display: grid;
|
||
margin-block-start: var(--img-grid-gap);
|
||
margin-block-end: var(--img-grid-gap);
|
||
grid-column-gap: var(--img-grid-gap);
|
||
grid-row-gap: 0;
|
||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||
}
|
||
.img-grid .markdown-preview-section > div:has(img) > p > br {
|
||
display: none;
|
||
}
|
||
|
||
/* MIT License | Copyright (c) Stephan Ango (@kepano)
|
||
|
||
Labeled Nav snippet for Obsidian
|
||
|
||
author: @kepano
|
||
version: 2.0.0
|
||
|
||
Support my work:
|
||
https://github.com/sponsors/kepano
|
||
|
||
*/
|
||
.labeled-nav.mod-windows,
|
||
.labeled-nav.is-fullscreen:not(.colorful-frame) {
|
||
--labeled-nav-top-margin: 0;
|
||
}
|
||
|
||
.labeled-nav {
|
||
--labeled-nav-top-margin: var(--header-height);
|
||
}
|
||
.labeled-nav.is-translucent .mod-left-split .mod-top .workspace-tab-header-container .workspace-tab-header-container-inner {
|
||
background-color: transparent;
|
||
}
|
||
.labeled-nav.is-hidden-frameless:not(.is-fullscreen) .mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-container {
|
||
padding-left: 0;
|
||
}
|
||
.labeled-nav.mod-macos .mod-left-split .mod-top .workspace-tab-header-container:before, .labeled-nav.mod-macos.is-hidden-frameless:not(.is-fullscreen) .mod-left-split .mod-top .workspace-tab-header-container:before {
|
||
-webkit-app-region: drag;
|
||
position: absolute;
|
||
width: calc(100% - var(--divider-width));
|
||
height: calc(var(--header-height) - var(--tab-outline-width));
|
||
border-bottom: 0px solid var(--tab-outline-color);
|
||
}
|
||
.labeled-nav.mod-macos.is-hidden-frameless:not(.is-fullscreen) .workspace-ribbon.mod-left:not(.is-collapsed) {
|
||
border: none;
|
||
--tab-outline-width: 0px;
|
||
}
|
||
.labeled-nav:not(.is-hidden-frameless) .mod-left-split .mod-top .workspace-tab-header-container:before, .labeled-nav.mod-macos:not(.hider-ribbon) .mod-left-split .mod-top .workspace-tab-header-container:before, .labeled-nav.colorful-frame.is-hidden-frameless:not(.is-fullscreen) .mod-left-split .mod-top .workspace-tab-header-container:before {
|
||
border-bottom: var(--tab-outline-width) solid var(--tab-outline-color);
|
||
}
|
||
.labeled-nav:not(.is-hidden-frameless) .workspace-ribbon.mod-left:not(.is-collapsed), .labeled-nav.mod-macos:not(.hider-ribbon) .workspace-ribbon.mod-left:not(.is-collapsed), .labeled-nav.colorful-frame.is-hidden-frameless:not(.is-fullscreen) .workspace-ribbon.mod-left:not(.is-collapsed) {
|
||
--tab-outline-width: 1px;
|
||
}
|
||
.labeled-nav:not(.is-hidden-frameless) .mod-left-split .mod-top .workspace-tab-header-container:before {
|
||
position: absolute;
|
||
top: 0;
|
||
content: " ";
|
||
}
|
||
.labeled-nav.hider-ribbon.mod-macos.is-hidden-frameless:not(.is-fullscreen):not(.is-popout-window) .mod-left-split:not(.is-sidedock-collapsed) .workspace-tabs.mod-top-left-space .workspace-tab-header-container {
|
||
padding-left: 0;
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header-spacer {
|
||
display: none;
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header-inner-title {
|
||
display: inline-block;
|
||
font-weight: 500;
|
||
font-size: var(--font-adaptive-smaller);
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header-container {
|
||
position: relative;
|
||
flex-direction: column-reverse;
|
||
height: auto;
|
||
width: 100%;
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header-container .sidebar-toggle-button.mod-left {
|
||
position: absolute;
|
||
justify-content: flex-end;
|
||
padding-right: var(--size-4-2);
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header-container .workspace-tab-header-container-inner {
|
||
padding: var(--size-4-2) var(--size-4-2);
|
||
margin-top: var(--labeled-nav-top-margin);
|
||
flex-direction: column;
|
||
background-color: var(--background-secondary);
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header-container .workspace-tab-container-inner {
|
||
flex-grow: 1;
|
||
gap: 0;
|
||
padding: var(--size-4-2) var(--size-4-3);
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header {
|
||
--icon-color: var(--text-muted);
|
||
--tab-text-color: var(--text-muted);
|
||
--tab-text-color-focused: var(--text-muted);
|
||
padding: 0;
|
||
margin-bottom: 2px;
|
||
border: none;
|
||
height: auto;
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header.is-active:not(:hover) {
|
||
background-color: transparent;
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header.is-active, .labeled-nav .mod-left-split .mod-top .workspace-tab-header:hover {
|
||
opacity: 1;
|
||
--tab-text-color-active: var(--text-normal);
|
||
--tab-text-color-focused: var(--text-normal);
|
||
--tab-text-color-focused-active: var(--text-normal);
|
||
--tab-text-color-focused-active-current: var(--text-normal);
|
||
--icon-color: var(--text-normal);
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header .workspace-tab-header-inner {
|
||
gap: var(--size-2-3);
|
||
padding: var(--size-4-1) var(--size-4-2);
|
||
box-shadow: none;
|
||
border: none;
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header.has-active-menu:hover,
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header.is-active:hover {
|
||
background-color: transparent;
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header.is-active:hover .workspace-tab-header-inner,
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
|
||
background-color: var(--nav-item-background-hover);
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header:hover .workspace-tab-header-inner-icon,
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon {
|
||
color: var(--icon-color-active);
|
||
}
|
||
.labeled-nav .mod-left-split .mod-top .workspace-tab-header-container {
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Links and underline handling*/
|
||
body:not(.links-int-on) {
|
||
--link-decoration: none;
|
||
}
|
||
|
||
body:not(.links-ext-on) {
|
||
--link-external-decoration: none;
|
||
}
|
||
|
||
body:not(.sidebar-color) .mod-right-split {
|
||
--background-secondary: var(--background-primary);
|
||
}
|
||
body:not(.sidebar-color) .mod-right-split :not(.mod-top) .workspace-tab-header-container {
|
||
--tab-container-background: var(--background-primary);
|
||
}
|
||
|
||
/* Main tabs */
|
||
.theme-light,
|
||
.theme-dark {
|
||
--praxis-tab-text-color: var(--tx2);
|
||
--praxis-tab-text-color-active: var(--tx1);
|
||
}
|
||
|
||
.workspace-tabs:not(.mod-stacked) {
|
||
--tab-text-color: var(--praxis-tab-text-color);
|
||
--tab-text-color-focused: var(--praxis-tab-text-color);
|
||
--tab-text-color-active: var(--praxis-tab-text-color-active);
|
||
--tab-text-color-focused-active: var(--praxis-tab-text-color-active);
|
||
--tab-text-color-focused-active-current: var(--praxis-tab-text-color-active);
|
||
}
|
||
|
||
.tabs-plain-square .mod-root {
|
||
--tab-curve: 0;
|
||
--tab-radius: 0;
|
||
--tab-radius-active: 0;
|
||
}
|
||
.tabs-plain-square .mod-root .workspace-tab-header-container {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
.tabs-plain-square .mod-root .workspace-tab-header-container-inner {
|
||
margin-top: -1px;
|
||
margin-left: -15px;
|
||
}
|
||
.tabs-plain-square .mod-root .workspace-tab-header {
|
||
padding: 0;
|
||
}
|
||
.tabs-plain-square .mod-root .workspace-tab-header-inner {
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.tabs-square .mod-root {
|
||
--tab-curve: 0;
|
||
--tab-radius: 0;
|
||
--tab-radius-active: 0;
|
||
}
|
||
|
||
.tabs-underline .mod-root {
|
||
--tab-curve: 0;
|
||
--tab-radius: 0;
|
||
--tab-radius-active: 0;
|
||
--tab-outline-width: 0px;
|
||
--tab-background-active: transparent;
|
||
}
|
||
.tabs-underline .mod-root .workspace-tab-header-container {
|
||
border-bottom: 1px solid var(--divider-color);
|
||
}
|
||
.tabs-underline .mod-root .workspace-tab-header {
|
||
border-bottom: 2px solid transparent;
|
||
}
|
||
.tabs-underline .mod-root .workspace-tab-header:hover {
|
||
border-bottom: 2px solid var(--ui2);
|
||
}
|
||
.tabs-underline .mod-root .workspace-tab-header:hover .workspace-tab-header-inner {
|
||
background-color: transparent;
|
||
}
|
||
.tabs-underline .mod-root .workspace-tab-header.is-active {
|
||
border-bottom: 2px solid var(--ax1);
|
||
}
|
||
.tabs-underline .mod-root .workspace-tab-header-inner:hover {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* Remove underline on lower sidebar tabs */
|
||
body:not(.sidebar-tabs-underline):not(.sidebar-tabs-index):not(.sidebar-tabs-square) .workspace > .workspace-split:not(.mod-root) .workspace-tabs:not(.mod-top) .workspace-tab-header-container {
|
||
--tab-outline-width: 0;
|
||
}
|
||
|
||
/* Safari/Firefox style */
|
||
.tabs-modern.colorful-frame .mod-root .mod-top.workspace-tabs:not(.mod-stacked) {
|
||
--tab-background: var(--frame-outline-color);
|
||
--tab-outline-width: 1px;
|
||
}
|
||
.tabs-modern.colorful-frame .mod-root .mod-top.workspace-tabs:not(.mod-stacked) .workspace-tab-header:hover .workspace-tab-header-inner-close-button,
|
||
.tabs-modern.colorful-frame .mod-root .mod-top.workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active .workspace-tab-header-inner-close-button {
|
||
color: var(--praxis-tab-text-color-active);
|
||
}
|
||
.tabs-modern.praxis-focus-mode .mod-root .workspace-tab-header-container:hover {
|
||
--tab-outline-width: 0px;
|
||
}
|
||
.tabs-modern .mod-root {
|
||
--tab-container-background: var(--background-primary);
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) {
|
||
--tab-background: var(--background-modifier-hover);
|
||
--tab-height: 34px;
|
||
--tab-outline-width: 0px;
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header::before,
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header::after,
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner::after {
|
||
display: none;
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
|
||
align-items: center;
|
||
margin: 0;
|
||
padding: 2px var(--size-4-2) 0 var(--size-4-1);
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-title {
|
||
text-overflow: ellipsis;
|
||
-webkit-mask-image: none;
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
|
||
background: transparent;
|
||
border-radius: var(--praxis-radius-xs);
|
||
border: none;
|
||
box-shadow: none;
|
||
height: var(--tab-height);
|
||
margin-left: var(--size-4-1);
|
||
padding: 0;
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active .workspace-tab-header-inner-title {
|
||
color: var(--tab-text-color-active);
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:hover, .tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active.mod-active {
|
||
opacity: 1;
|
||
background-color: var(--tab-background);
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-new-tab {
|
||
margin-inline-end: 0;
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner {
|
||
padding: 0 var(--size-4-1) 0 var(--size-4-2);
|
||
border: 1px solid transparent;
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
|
||
background-color: transparent;
|
||
}
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:not(:hover):not(.mod-active) .workspace-tab-header-inner,
|
||
.tabs-modern .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active:not(.mod-active) .workspace-tab-header-inner {
|
||
border: 1px solid var(--tab-outline-color);
|
||
}
|
||
|
||
/* Sidebar tabs ------------ */
|
||
.tab-names-on .workspace-split:not(.mod-root) .workspace-tab-header-container-inner {
|
||
--sidebar-tab-text-display: static;
|
||
}
|
||
.tab-names-on .workspace-split:not(.mod-root) .workspace-tab-header-container-inner .workspace-tab-header-inner-title {
|
||
font-weight: 500;
|
||
}
|
||
.tab-names-on .workspace-split:not(.mod-root) .workspace-tab-header-container-inner .workspace-tab-header-inner {
|
||
gap: var(--size-2-3);
|
||
}
|
||
|
||
.tab-names-single .workspace > .workspace-split:not(.mod-root) .workspace-tab-header-container-inner .workspace-tab-header:only-child {
|
||
--sidebar-tab-text-display: static;
|
||
background-color: transparent;
|
||
}
|
||
.tab-names-single .workspace > .workspace-split:not(.mod-root) .workspace-tab-header-container-inner .workspace-tab-header:only-child .workspace-tab-header-inner-title {
|
||
font-weight: 500;
|
||
}
|
||
.tab-names-single .workspace > .workspace-split:not(.mod-root) .workspace-tab-header-container-inner .workspace-tab-header:only-child .workspace-tab-header-inner {
|
||
gap: var(--size-2-3);
|
||
}
|
||
|
||
.tabs-modern.sidebar-tabs-wide .mod-right-split,
|
||
.tabs-modern.sidebar-tabs-default .mod-right-split {
|
||
--tab-outline-width: 0;
|
||
}
|
||
|
||
/* Underline */
|
||
.sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-spacer, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-spacer,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-spacer {
|
||
display: none;
|
||
}
|
||
.sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container {
|
||
padding-right: 0;
|
||
}
|
||
.sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container-inner, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container-inner,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container-inner {
|
||
padding: 0;
|
||
margin: 0;
|
||
flex-grow: 1;
|
||
gap: 0;
|
||
}
|
||
.sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container .workspace-tab-header, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container .workspace-tab-header,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container .workspace-tab-header {
|
||
flex-grow: 1;
|
||
border-radius: 0;
|
||
max-width: 100px;
|
||
}
|
||
.sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container .workspace-tab-header:hover, .sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container .workspace-tab-header:hover, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container .workspace-tab-header.is-active,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container .workspace-tab-header:hover,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container .workspace-tab-header.is-active {
|
||
background-color: transparent;
|
||
}
|
||
.sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container .workspace-tab-header:hover .workspace-tab-header-inner, .sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container .workspace-tab-header:hover .workspace-tab-header-inner, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container .workspace-tab-header:hover .workspace-tab-header-inner,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner {
|
||
background-color: transparent;
|
||
}
|
||
.sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner {
|
||
border-bottom: 2px solid transparent;
|
||
border-radius: 0;
|
||
}
|
||
.sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner:hover, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner:hover,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner:hover {
|
||
border-color: var(--ui2);
|
||
}
|
||
.sidebar-tabs-underline:not(.labeled-nav) .mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner, .sidebar-tabs-underline.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner,
|
||
.sidebar-tabs-underline .mod-right-split .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner {
|
||
border-color: var(--ax1);
|
||
padding-top: 1px;
|
||
}
|
||
|
||
/* Sidebar index style */
|
||
.sidebar-tabs-square .mod-left-split,
|
||
.sidebar-tabs-square .mod-right-split {
|
||
--tab-radius: 0px;
|
||
}
|
||
|
||
.sidebar-tabs-plain-square .mod-left-split,
|
||
.sidebar-tabs-plain-square .mod-right-split {
|
||
--tab-radius: 0px;
|
||
}
|
||
.sidebar-tabs-plain-square:not(.labeled-nav) .mod-left-split, .sidebar-tabs-plain-square.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) {
|
||
--tab-background-active: var(--background-secondary);
|
||
}
|
||
.sidebar-tabs-plain-square:not(.labeled-nav) .mod-left-split .workspace-tab-header-container, .sidebar-tabs-plain-square.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container,
|
||
.sidebar-tabs-plain-square .mod-right-split .workspace-tab-header-container {
|
||
padding-left: 0;
|
||
}
|
||
.sidebar-tabs-plain-square:not(.labeled-nav) .mod-left-split .workspace-tab-header-container-inner, .sidebar-tabs-plain-square.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container-inner,
|
||
.sidebar-tabs-plain-square .mod-right-split .workspace-tab-header-container-inner {
|
||
padding: 0;
|
||
margin: 0 0 calc(var(--tab-outline-width) * -1);
|
||
flex-grow: 1;
|
||
gap: 0;
|
||
}
|
||
.sidebar-tabs-plain-square:not(.labeled-nav) .mod-left-split .workspace-tab-header, .sidebar-tabs-plain-square.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header,
|
||
.sidebar-tabs-plain-square .mod-right-split .workspace-tab-header {
|
||
flex-grow: 1;
|
||
max-width: 100px;
|
||
border-radius: var(--tab-radius) var(--tab-radius) 0 0;
|
||
}
|
||
.sidebar-tabs-plain-square:not(.labeled-nav) .mod-left-split .workspace-tab-header.is-active, .sidebar-tabs-plain-square.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header.is-active,
|
||
.sidebar-tabs-plain-square .mod-right-split .workspace-tab-header.is-active {
|
||
box-shadow: 0 0 0 var(--tab-outline-width) var(--tab-outline-color);
|
||
color: var(--tab-text-color-active);
|
||
background-color: var(--tab-background-active);
|
||
}
|
||
|
||
.sidebar-tabs-square:not(.labeled-nav) .mod-left-split, .sidebar-tabs-square.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top),
|
||
.sidebar-tabs-index:not(.labeled-nav) .mod-left-split,
|
||
.sidebar-tabs-index.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) {
|
||
--tab-background-active: var(--background-secondary);
|
||
}
|
||
.sidebar-tabs-square:not(.labeled-nav) .mod-left-split .workspace-tab-header-container-inner, .sidebar-tabs-square.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container-inner,
|
||
.sidebar-tabs-square .mod-right-split .workspace-tab-header-container-inner,
|
||
.sidebar-tabs-index:not(.labeled-nav) .mod-left-split .workspace-tab-header-container-inner,
|
||
.sidebar-tabs-index.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container-inner,
|
||
.sidebar-tabs-index .mod-right-split .workspace-tab-header-container-inner {
|
||
padding: 1px var(--size-4-2) 0;
|
||
margin: 6px 0 calc(var(--tab-outline-width) * -1);
|
||
flex-grow: 1;
|
||
}
|
||
.sidebar-tabs-square:not(.labeled-nav) .mod-left-split .workspace-tab-header, .sidebar-tabs-square.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header,
|
||
.sidebar-tabs-square .mod-right-split .workspace-tab-header,
|
||
.sidebar-tabs-index:not(.labeled-nav) .mod-left-split .workspace-tab-header,
|
||
.sidebar-tabs-index.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header,
|
||
.sidebar-tabs-index .mod-right-split .workspace-tab-header {
|
||
flex-grow: 1;
|
||
max-width: 100px;
|
||
border-radius: var(--tab-radius) var(--tab-radius) 0 0;
|
||
}
|
||
.sidebar-tabs-square:not(.labeled-nav) .mod-left-split .workspace-tab-header.is-active, .sidebar-tabs-square.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header.is-active,
|
||
.sidebar-tabs-square .mod-right-split .workspace-tab-header.is-active,
|
||
.sidebar-tabs-index:not(.labeled-nav) .mod-left-split .workspace-tab-header.is-active,
|
||
.sidebar-tabs-index.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header.is-active,
|
||
.sidebar-tabs-index .mod-right-split .workspace-tab-header.is-active {
|
||
box-shadow: 0 0 0 var(--tab-outline-width) var(--tab-outline-color);
|
||
color: var(--tab-text-color-active);
|
||
background-color: var(--tab-background-active);
|
||
}
|
||
|
||
/* Modern Wide */
|
||
.sidebar-tabs-wide:not(.labeled-nav) .mod-left-split .workspace-tab-header-container-inner, .sidebar-tabs-wide.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container-inner,
|
||
.sidebar-tabs-wide .mod-right-split .workspace-tab-header-container-inner {
|
||
flex-grow: 1;
|
||
border: 1px solid var(--tab-outline-color);
|
||
padding: 3px;
|
||
margin: 6px 8px;
|
||
border-radius: var(--praxis-radius-xs);
|
||
}
|
||
.sidebar-tabs-wide:not(.labeled-nav) .mod-left-split .workspace-tab-header, .sidebar-tabs-wide.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header,
|
||
.sidebar-tabs-wide .mod-right-split .workspace-tab-header {
|
||
flex-grow: 1;
|
||
}
|
||
.sidebar-tabs-wide:not(.labeled-nav) .mod-left-split .workspace-tab-header.is-active, .sidebar-tabs-wide.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header.is-active,
|
||
.sidebar-tabs-wide .mod-right-split .workspace-tab-header.is-active {
|
||
border-color: transparent;
|
||
}
|
||
.sidebar-tabs-wide:not(.labeled-nav) .mod-left-split .workspace-tab-header-container, .sidebar-tabs-wide.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-container,
|
||
.sidebar-tabs-wide .mod-right-split .workspace-tab-header-container {
|
||
padding-right: 0;
|
||
}
|
||
.sidebar-tabs-wide:not(.labeled-nav) .mod-left-split .workspace-tab-header-spacer, .sidebar-tabs-wide.labeled-nav .mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-spacer,
|
||
.sidebar-tabs-wide .mod-right-split .workspace-tab-header-spacer {
|
||
display: none;
|
||
}
|
||
|
||
/* Turn off file name trimming */
|
||
.full-file-names {
|
||
--nav-item-white-space: normal;
|
||
}
|
||
|
||
body:not(.full-file-names) {
|
||
--nav-item-white-space: nowrap;
|
||
}
|
||
body:not(.full-file-names) .tree-item-self {
|
||
white-space: nowrap;
|
||
}
|
||
body:not(.full-file-names) .tree-item-inner {
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Underline headings */
|
||
.theme-light,
|
||
.theme-dark {
|
||
--h1l:var(--ui1);
|
||
--h2l:var(--ui1);
|
||
--h3l:var(--ui1);
|
||
--h4l:var(--ui1);
|
||
--h5l:var(--ui1);
|
||
--h6l:var(--ui1);
|
||
}
|
||
|
||
.h1-l .markdown-reading-view h1:not(.embedded-note-title),
|
||
.h1-l .mod-cm6 .cm-editor .HyperMD-header-1 {
|
||
border-bottom: 1px solid var(--h1l);
|
||
padding-bottom: 0.4em;
|
||
margin-block-end: 0.6em;
|
||
}
|
||
|
||
.h2-l .markdown-reading-view h2,
|
||
.h2-l .mod-cm6 .cm-editor .HyperMD-header-2 {
|
||
border-bottom: 1px solid var(--h2l);
|
||
padding-bottom: 0.4em;
|
||
margin-block-end: 0.6em;
|
||
}
|
||
|
||
.h3-l .markdown-reading-view h3,
|
||
.h3-l .mod-cm6 .cm-editor .HyperMD-header-3 {
|
||
border-bottom: 1px solid var(--h3l);
|
||
padding-bottom: 0.4em;
|
||
margin-block-end: 0.6em;
|
||
}
|
||
|
||
.h4-l .markdown-reading-view h4,
|
||
.h4-l .mod-cm6 .cm-editor .HyperMD-header-4 {
|
||
border-bottom: 1px solid var(--h4l);
|
||
padding-bottom: 0.4em;
|
||
margin-block-end: 0.6em;
|
||
}
|
||
|
||
.h5-l .markdown-reading-view h5,
|
||
.h5-l .mod-cm6 .cm-editor .HyperMD-header-5 {
|
||
border-bottom: 1px solid var(--h5l);
|
||
padding-bottom: 0.4em;
|
||
margin-block-end: 0.6em;
|
||
}
|
||
|
||
.h6-l .markdown-reading-view h6,
|
||
.h6-l .mod-cm6 .cm-editor .HyperMD-header-6 {
|
||
border-bottom: 1px solid var(--h6l);
|
||
padding-bottom: 0.4em;
|
||
margin-block-end: 0.6em;
|
||
}
|
||
|
||
/* Tablet */
|
||
.is-tablet .workspace-drawer {
|
||
padding-top: 0px;
|
||
}
|
||
.is-tablet .workspace-drawer:not(.is-pinned) {
|
||
margin: 30px 16px 0;
|
||
height: calc(100vh - 48px);
|
||
border-radius: var(--praxis-radius-md);
|
||
border: none;
|
||
}
|
||
.is-tablet .workspace-drawer-ribbon {
|
||
background-color: var(--background-primary);
|
||
border-right: 1px solid var(--background-modifier-border);
|
||
}
|
||
.is-tablet .workspace-drawer-header,
|
||
.is-tablet .workspace-drawer.is-pinned .workspace-drawer-header {
|
||
padding-top: var(--size-4-4);
|
||
}
|
||
.is-tablet .workspace-drawer-header-icon {
|
||
margin-inline-start: 0;
|
||
}
|
||
|
||
.is-mobile {
|
||
--font-bold: 600;
|
||
--font-ui-medium: var(--font-adaptive-small);
|
||
--interactive-normal: var(--background-secondary);
|
||
--background-modifier-form-field: var(--background-secondary);
|
||
--background-modifier-form-field-highlighted: var(--background-secondary);
|
||
}
|
||
.is-mobile .markdown-source-view.mod-cm6 .cm-gutters {
|
||
margin-left: 0;
|
||
}
|
||
.is-mobile.theme-light .menu {
|
||
--interactive-normal: var(--background-modifier-hover);
|
||
}
|
||
.is-mobile.theme-light.praxis-contrast-tonal-light .workspace-drawer {
|
||
--interactive-normal: rgb(from color-mix(in srgb, var(--bg2), var(--bg3))r g b / 1);
|
||
}
|
||
.is-mobile .workspace-drawer.mod-left.is-pinned {
|
||
width: var(--mobile-left-sidebar-width);
|
||
min-width: 200px;
|
||
}
|
||
.is-mobile .workspace-drawer.mod-right.is-pinned {
|
||
width: var(--mobile-right-sidebar-width);
|
||
min-width: 200px;
|
||
}
|
||
|
||
.is-phone {
|
||
--bases-embed-width: 100%;
|
||
--bases-embed-transform: none;
|
||
}
|
||
|
||
/* Core plugins */
|
||
/* Backlink pane */
|
||
.outgoing-link-pane > .tree-item-self:hover,
|
||
.outgoing-link-pane > .tree-item-self,
|
||
.backlink-pane > .tree-item-self:hover,
|
||
.backlink-pane > .tree-item-self {
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
font-size: var(--font-adaptive-smallest);
|
||
font-weight: 500;
|
||
}
|
||
|
||
body {
|
||
--canvas-dot-pattern: var(--background-modifier-border-hover);
|
||
}
|
||
|
||
.canvas-node-label {
|
||
font-size: var(--font-adaptive-small);
|
||
}
|
||
|
||
.canvas-edges :not(.is-themed) path.canvas-display-path {
|
||
stroke: var(--background-modifier-border-focus);
|
||
}
|
||
|
||
.canvas-edges :not(.is-themed) polyline.canvas-path-end {
|
||
stroke: var(--background-modifier-border-focus);
|
||
fill: var(--background-modifier-border-focus);
|
||
}
|
||
|
||
.canvas-node-container {
|
||
border: 1.5px solid var(--background-modifier-border-focus);
|
||
}
|
||
|
||
.node-insert-event.mod-inside-iframe {
|
||
--max-width: 100%;
|
||
--folding-offset: 0px;
|
||
}
|
||
.node-insert-event.mod-inside-iframe .cm-editor .cm-content {
|
||
padding-top: 0;
|
||
}
|
||
|
||
/* File browser */
|
||
.hider-file-nav-header:not(.labeled-nav) .nav-files-container {
|
||
padding-top: var(--size-4-3);
|
||
}
|
||
|
||
.is-mobile .nav-folder.mod-root > .nav-folder-title .nav-folder-title-content {
|
||
display: none;
|
||
}
|
||
|
||
body:not(.is-mobile) .nav-folder.mod-root > .nav-folder-title .nav-folder-title-content {
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-muted);
|
||
font-size: var(--font-adaptive-smallest);
|
||
}
|
||
|
||
body:not(.is-mobile) .nav-buttons-container {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.nav-file-tag {
|
||
padding-top: 0.2em;
|
||
background-color: transparent;
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
.nav-file:hover .nav-file-tag,
|
||
.nav-file .is-active .nav-file-tag {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
input.prompt-input,
|
||
input.prompt-input:hover,
|
||
input.prompt-input:focus,
|
||
input.prompt-input:focus-visible {
|
||
border-color: rgba(var(--mono-rgb-100), 0.05);
|
||
}
|
||
|
||
.suggestion-item {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.suggestion-item.is-selected {
|
||
background-color: var(--background-modifier-hover);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.is-mobile {
|
||
/* Mobile publish */
|
||
}
|
||
.is-mobile .mod-publish .modal-content {
|
||
display: unset;
|
||
padding: 10px;
|
||
margin-bottom: 120px;
|
||
overflow-x: hidden;
|
||
}
|
||
.is-mobile .mod-publish .button-container,
|
||
.is-mobile .modal.mod-publish .modal-button-container {
|
||
padding: 10px 15px 30px;
|
||
margin-left: 0px;
|
||
left: 0;
|
||
}
|
||
.is-mobile .modal.mod-publish .modal-title {
|
||
padding: 10px 20px;
|
||
margin: 0 -10px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
.is-mobile .publish-site-settings-container {
|
||
margin-right: 0;
|
||
padding: 0;
|
||
}
|
||
.is-mobile .modal.mod-publish .modal-content .publish-sections-container {
|
||
margin-right: 0;
|
||
padding-right: 0;
|
||
}
|
||
.is-mobile {
|
||
/* Phone */
|
||
}
|
||
@media (max-width: 400px) {
|
||
.is-mobile .publish-section-header,
|
||
.is-mobile .publish-changes-info {
|
||
flex-wrap: wrap;
|
||
border: none;
|
||
}
|
||
.is-mobile .publish-changes-info .publish-changes-add-linked-btn {
|
||
flex-basis: 100%;
|
||
margin-top: 10px;
|
||
}
|
||
.is-mobile .publish-section-header-text {
|
||
flex-basis: 100%;
|
||
margin-bottom: 10px;
|
||
margin-left: 20px;
|
||
margin-top: -8px;
|
||
}
|
||
.is-mobile .publish-section {
|
||
background: var(--background-secondary);
|
||
border-radius: var(--praxis-radius-sm);
|
||
padding: 12px 12px 1px;
|
||
}
|
||
.is-mobile .publish-changes-switch-site {
|
||
flex-grow: 0;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.release-notes-view .cm-scroller.is-readable-line-width {
|
||
width: var(--line-width);
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.search-results-info {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.workspace-leaf-content[data-type=sync] .tree-item.nav-folder .nav-folder-title {
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
font-size: var(--font-adaptive-smallest);
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
.workspace-leaf-content[data-type=sync] .tree-item.nav-folder .nav-folder-title:hover {
|
||
color: var(--text-normal);
|
||
}
|
||
.workspace-leaf-content[data-type=sync] .tree-item.nav-folder.is-collapsed .nav-folder-title {
|
||
color: var(--text-faint);
|
||
}
|
||
.workspace-leaf-content[data-type=sync] .tree-item.nav-folder.is-collapsed .nav-folder-title:hover {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Community plugins */
|
||
/* Calendar plugin */
|
||
.workspace-leaf-content[data-type=calendar] .view-content {
|
||
padding: 5px 0 0;
|
||
}
|
||
|
||
.mod-root #calendar-container {
|
||
width: var(--line-width);
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
--calendar-dot-active: var(--text-faint);
|
||
--calendar-dot-today: var(--text-accent);
|
||
}
|
||
|
||
#calendar-container {
|
||
padding: 0 var(--size-4-4) var(--size-4-1);
|
||
--color-background-day-empty:var(--background-secondary-alt);
|
||
--color-background-day-active:var(--background-modifier-hover);
|
||
--color-background-day-hover:var(--background-modifier-hover);
|
||
--color-dot:var(--text-faint);
|
||
--calendar-text-active: inherit;
|
||
--color-text-title:var(--text-normal);
|
||
--color-text-heading:var(--text-muted);
|
||
--color-text-day:var(--text-normal);
|
||
--color-text-today:var(--text-normal);
|
||
--color-arrow:var(--text-faint);
|
||
--color-background-day-empty:transparent;
|
||
}
|
||
#calendar-container .table {
|
||
border-collapse: separate;
|
||
table-layout: fixed;
|
||
}
|
||
#calendar-container h2 {
|
||
font-weight: 400;
|
||
font-size: var(--h2);
|
||
}
|
||
#calendar-container .arrow {
|
||
cursor: var(--cursor);
|
||
width: 22px;
|
||
border-radius: var(--praxis-radius-xs);
|
||
padding: 3px 7px;
|
||
}
|
||
#calendar-container .arrow svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
color: var(--text-faint);
|
||
opacity: 0.7;
|
||
}
|
||
#calendar-container .arrow:hover {
|
||
fill: var(--text-muted);
|
||
color: var(--text-muted);
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
#calendar-container .arrow:hover svg {
|
||
color: var(--text-muted);
|
||
opacity: 1;
|
||
}
|
||
#calendar-container tr th {
|
||
padding: 2px 0 4px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.1em;
|
||
font-size: var(--font-adaptive-smallest);
|
||
}
|
||
#calendar-container tr th:first-child {
|
||
padding-left: 0;
|
||
}
|
||
#calendar-container tr td {
|
||
padding: 2px 0 0;
|
||
border-radius: var(--radius-m);
|
||
cursor: var(--cursor);
|
||
border: 1px solid transparent;
|
||
transition: none;
|
||
}
|
||
#calendar-container tr td:first-child {
|
||
padding-left: 0;
|
||
}
|
||
#calendar-container .nav {
|
||
padding: 0;
|
||
margin: var(--size-4-2) var(--size-4-1);
|
||
}
|
||
#calendar-container .dot {
|
||
margin: 0;
|
||
}
|
||
#calendar-container .year,
|
||
#calendar-container .month,
|
||
#calendar-container .title {
|
||
font-size: calc(var(--font-adaptive-small) + 2px);
|
||
font-weight: 400;
|
||
color: var(--text-normal);
|
||
}
|
||
#calendar-container .today.active,
|
||
#calendar-container .today {
|
||
color: var(--text-accent);
|
||
font-weight: 600;
|
||
}
|
||
#calendar-container .today.active .dot,
|
||
#calendar-container .today .dot {
|
||
fill: var(--calendar-dot-today);
|
||
}
|
||
#calendar-container .active .task {
|
||
stroke: var(--text-faint);
|
||
}
|
||
#calendar-container .active {
|
||
color: var(--text-normal);
|
||
}
|
||
#calendar-container .reset-button {
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
font-size: var(--font-adaptive-smaller);
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
border-radius: var(--praxis-radius-xs);
|
||
margin: 0;
|
||
padding: 2px 8px;
|
||
}
|
||
#calendar-container .reset-button:hover {
|
||
color: var(--text-normal);
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
#calendar-container .reset-button,
|
||
#calendar-container .week-num,
|
||
#calendar-container .day {
|
||
cursor: var(--cursor);
|
||
}
|
||
#calendar-container .day.adjacent-month {
|
||
color: var(--text-faint);
|
||
opacity: 1;
|
||
}
|
||
#calendar-container .day {
|
||
padding: 2px 4px 4px;
|
||
transition: none;
|
||
}
|
||
#calendar-container .day,
|
||
#calendar-container .week-num {
|
||
font-size: calc(var(--font-adaptive-smaller) + 5%);
|
||
}
|
||
#calendar-container .active,
|
||
#calendar-container .active.today,
|
||
#calendar-container .week-num:hover,
|
||
#calendar-container .day:hover {
|
||
background-color: var(--color-background-day-active);
|
||
color: var(--calendar-text-active);
|
||
transition: none;
|
||
}
|
||
#calendar-container .active .dot {
|
||
fill: var(--calendar-dot-active);
|
||
}
|
||
|
||
/* Charts */
|
||
.block-language-chart canvas,
|
||
.block-language-dataviewjs canvas {
|
||
margin: 1em 0;
|
||
}
|
||
|
||
.theme-light,
|
||
.theme-dark {
|
||
--chart-color-1:var(--color-blue);
|
||
--chart-color-2:var(--color-red);
|
||
--chart-color-3:var(--color-yellow);
|
||
--chart-color-4:var(--color-green);
|
||
--chart-color-5:var(--color-orange);
|
||
--chart-color-6:var(--color-purple);
|
||
--chart-color-7:var(--color-cyan);
|
||
--chart-color-8:var(--color-pink);
|
||
}
|
||
|
||
/* cMenu plugin */
|
||
body #cMenuModalBar {
|
||
box-shadow: 0px 2px 20px var(--shadow-color);
|
||
}
|
||
|
||
body #cMenuModalBar .cMenuCommandItem {
|
||
cursor: var(--cursor);
|
||
}
|
||
|
||
body #cMenuModalBar button.cMenuCommandItem:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
.MiniSettings-statusbar-button {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.MySnippets-statusbar-menu .menu-item .MS-OpenSnippet {
|
||
height: auto;
|
||
border: none;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
width: auto;
|
||
padding: 4px 6px;
|
||
margin-left: 0;
|
||
}
|
||
.MySnippets-statusbar-menu .menu-item .MS-OpenSnippet svg path {
|
||
fill: var(--text-muted);
|
||
}
|
||
.MySnippets-statusbar-menu .menu-item .MS-OpenSnippet:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
|
||
/* Dataview plugin */
|
||
/* inline lists */
|
||
.dataview-inline-lists .markdown-source-view .dataview-ul,
|
||
.dataview-inline-lists .markdown-preview-view .dataview-ul {
|
||
--list-spacing: 0;
|
||
}
|
||
.dataview-inline-lists .markdown-source-view .dataview-ul li:not(:last-child):after,
|
||
.dataview-inline-lists .markdown-source-view .dataview-ol li:not(:last-child):after,
|
||
.dataview-inline-lists .markdown-preview-view .dataview-ul li:not(:last-child):after,
|
||
.dataview-inline-lists .markdown-preview-view .dataview-ol li:not(:last-child):after {
|
||
content: ", ";
|
||
}
|
||
.dataview-inline-lists .markdown-source-view ul.dataview-ul > li::before,
|
||
.dataview-inline-lists .markdown-source-view ul.dataview-ol > li::before,
|
||
.dataview-inline-lists .markdown-preview-view ul.dataview-ul > li::before,
|
||
.dataview-inline-lists .markdown-preview-view ul.dataview-ol > li::before {
|
||
display: none;
|
||
}
|
||
.dataview-inline-lists .markdown-source-view .dataview-ul li,
|
||
.dataview-inline-lists .markdown-source-view .dataview-ol li,
|
||
.dataview-inline-lists .markdown-preview-view .dataview-ul li,
|
||
.dataview-inline-lists .markdown-preview-view .dataview-ol li {
|
||
display: inline-block;
|
||
padding-inline-end: 0.25em;
|
||
margin-inline-start: 0;
|
||
}
|
||
|
||
.markdown-rendered table.dataview {
|
||
margin-block-start: 0;
|
||
margin-block-end: 0;
|
||
}
|
||
.markdown-rendered table.dataview .dataview-result-list-li {
|
||
margin-inline-start: 0;
|
||
}
|
||
|
||
body .table-view-table > thead > tr > th,
|
||
.markdown-preview-view .table-view-table > thead > tr > th {
|
||
font-weight: 400;
|
||
font-size: var(--table-text-size);
|
||
color: var(--text-muted);
|
||
border-bottom: var(--table-border-width) solid var(--table-border-color);
|
||
cursor: var(--cursor);
|
||
}
|
||
|
||
table.dataview ul.dataview-ul {
|
||
list-style: none;
|
||
padding-inline-start: 0;
|
||
margin-block-start: 0em;
|
||
margin-block-end: 0em;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6:not(.cards) .table-view-table > tbody > tr > td,
|
||
.markdown-preview-view:not(.cards) .table-view-table > tbody > tr > td {
|
||
max-width: var(--max-col-width);
|
||
}
|
||
|
||
body .dataview.small-text {
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
/* Remove hover effect */
|
||
body:not(.row-hover) .dataview.task-list-item:hover,
|
||
body:not(.row-hover) .dataview.task-list-basic-item:hover,
|
||
body:not(.row-hover) .table-view-table > tbody > tr:hover {
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
body.row-hover .dataview.task-list-item:hover,
|
||
body.row-hover .dataview.task-list-basic-item:hover,
|
||
body.row-hover .table-view-table > tbody > tr:hover {
|
||
background-color: var(--table-row-background-hover);
|
||
}
|
||
|
||
body .dataview-error {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.markdown-source-view.mod-cm6 .cm-content .dataview.dataview-error,
|
||
.dataview.dataview-error {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
body div.dataview-error-box {
|
||
min-height: 0;
|
||
border: none;
|
||
background-color: transparent;
|
||
font-size: var(--table-text-size);
|
||
border-radius: var(--radius-m);
|
||
padding: 15px 0;
|
||
justify-content: flex-start;
|
||
}
|
||
body div.dataview-error-box p {
|
||
margin-block-start: 0;
|
||
margin-block-end: 0;
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
/* Trim columns feature */
|
||
.trim-cols .markdown-source-view.mod-cm6 .table-view-table > tbody > tr > td,
|
||
.trim-cols .markdown-preview-view .table-view-table > tbody > tr > td,
|
||
.trim-cols .markdown-source-view.mod-cm6 .table-view-table > thead > tr > th {
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Lists */
|
||
ul .dataview .task-list-item:hover,
|
||
ul .dataview .task-list-basic-item:hover {
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
body .dataview.result-group {
|
||
padding-left: 0;
|
||
}
|
||
|
||
/* Inline fields */
|
||
body .dataview.inline-field-key,
|
||
body .dataview.inline-field-value,
|
||
body .dataview .inline-field-standalone-value {
|
||
font-family: var(--font-text);
|
||
font-size: calc(var(--font-adaptive-normal) - 2px);
|
||
background: transparent;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
body .dataview.inline-field-key {
|
||
padding: 0;
|
||
}
|
||
|
||
body .dataview .inline-field-standalone-value {
|
||
padding: 0;
|
||
}
|
||
|
||
body .dataview.inline-field-key::after {
|
||
margin-left: 3px;
|
||
content: "|";
|
||
color: var(--background-modifier-border);
|
||
}
|
||
|
||
body .dataview.inline-field-value {
|
||
padding: 0 1px 0 3px;
|
||
}
|
||
|
||
/* Calendar */
|
||
.markdown-preview-view .block-language-dataview table.calendar th {
|
||
border: none;
|
||
cursor: default;
|
||
background-image: none;
|
||
}
|
||
|
||
.markdown-preview-view .block-language-dataview table.calendar .day {
|
||
font-size: var(--font-adaptive-small);
|
||
}
|
||
|
||
/* Git plugin */
|
||
.git-view-body .opener {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
font-size: var(--font-adaptive-smallest);
|
||
font-weight: 500;
|
||
padding: 5px 7px 5px 10px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.git-view-body .file-view .opener {
|
||
text-transform: none;
|
||
letter-spacing: normal;
|
||
font-size: var(--font-adaptive-smallest);
|
||
font-weight: normal;
|
||
padding: initial;
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.git-view-body .file-view .opener .collapse-icon {
|
||
display: flex;
|
||
margin-left: -7px;
|
||
}
|
||
|
||
.git-view-body {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.git-view-body .file-view {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.git-view-body .file-view main:hover {
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.git-view-body .file-view .tools .type {
|
||
display: none;
|
||
}
|
||
|
||
.git-view-body .file-view .tools {
|
||
opacity: 0;
|
||
transition: opacity 0.1s;
|
||
}
|
||
|
||
.git-view-body .file-view main:hover > .tools {
|
||
opacity: 1;
|
||
}
|
||
|
||
.git-view-body .staged {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.git-view-body .opener.open {
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
div[data-type=git-view] .search-input-container {
|
||
margin-left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.git-view-body .opener .collapse-icon {
|
||
display: none;
|
||
}
|
||
|
||
.git-view-body main {
|
||
background-color: var(--background-primary);
|
||
width: initial;
|
||
}
|
||
|
||
.git-view-body .file-view > main:not(.topLevel) {
|
||
margin-left: 7px;
|
||
}
|
||
|
||
div[data-type=git-view] .commit-msg {
|
||
min-height: 2.5em;
|
||
height: 2.5em;
|
||
padding: 6.5px 8px;
|
||
}
|
||
|
||
div[data-type=git-view] .search-input-clear-button {
|
||
bottom: 5.5px;
|
||
}
|
||
|
||
/* Hider plugin */
|
||
.hider-vault .nav-folder.mod-root > .nav-folder-title {
|
||
height: 4px;
|
||
}
|
||
|
||
/* Kanban plugin */
|
||
body.theme-dark,
|
||
body.praxis-contrast-black.theme-dark,
|
||
body.praxis-contrast-tonal-dark.theme-dark,
|
||
body.praxis-contrast-low.theme-light,
|
||
body.praxis-contrast-tonal-light.theme-light {
|
||
--kanban-border:0px;
|
||
}
|
||
|
||
body:not(.is-mobile) .kanban-plugin__grow-wrap > textarea:focus {
|
||
box-shadow: none;
|
||
}
|
||
|
||
body:not(.praxis-icons-off) .kanban-plugin svg.cross {
|
||
height: 14px;
|
||
width: 14px;
|
||
}
|
||
|
||
body .kanban-plugin__icon > svg,
|
||
body .kanban-plugin__lane-settings-button svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
body .kanban-plugin {
|
||
--kanban-border:var(--border-width);
|
||
--interactive-accent:var(--text-selection);
|
||
--interactive-accent-hover:var(--background-modifier-hover);
|
||
--text-on-accent:var(--text-normal);
|
||
background-color: var(--background-primary);
|
||
}
|
||
body .kanban-plugin__markdown-preview-view {
|
||
font-family: var(--font-text);
|
||
}
|
||
body .kanban-plugin__board > div {
|
||
margin: 0 auto;
|
||
}
|
||
body .kanban-plugin__checkbox-label {
|
||
color: var(--text-muted);
|
||
}
|
||
body .kanban-plugin__item-markdown ul {
|
||
margin: 0;
|
||
}
|
||
body .kanban-plugin__item-content-wrapper {
|
||
box-shadow: none;
|
||
}
|
||
body .kanban-plugin__grow-wrap > textarea,
|
||
body .kanban-plugin__grow-wrap::after {
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
}
|
||
body .kanban-plugin__markdown-preview-view,
|
||
body .kanban-plugin__grow-wrap > textarea,
|
||
body .kanban-plugin__grow-wrap::after,
|
||
body .kanban-plugin__item-title p {
|
||
font-size: var(--font-ui-medium);
|
||
line-height: 1.3;
|
||
}
|
||
body .kanban-plugin__item {
|
||
background-color: var(--background-primary);
|
||
}
|
||
body .kanban-plugin__item-title-wrapper {
|
||
align-items: center;
|
||
}
|
||
body .kanban-plugin__lane-form-wrapper {
|
||
border: 1px solid var(--background-modifier-border);
|
||
}
|
||
body .kanban-plugin__lane-header-wrapper {
|
||
border-bottom: 0;
|
||
}
|
||
body .kanban-plugin__lane-title p,
|
||
body .kanban-plugin__lane-header-wrapper .kanban-plugin__grow-wrap > textarea,
|
||
body .kanban-plugin__lane-input-wrapper .kanban-plugin__grow-wrap > textarea {
|
||
background: transparent;
|
||
color: var(--text-normal);
|
||
font-size: var(--font-ui-medium);
|
||
font-weight: 500;
|
||
}
|
||
body .kanban-plugin__item-input-wrapper .kanban-plugin__grow-wrap > textarea {
|
||
padding: 0;
|
||
border-radius: 0;
|
||
height: auto;
|
||
}
|
||
body .kanban-plugin__item-form .kanban-plugin__grow-wrap {
|
||
background-color: var(--background-primary);
|
||
}
|
||
body .kanban-plugin__item-input-wrapper .kanban-plugin__grow-wrap > textarea::placeholder {
|
||
color: var(--text-faint);
|
||
}
|
||
body .kanban-plugin__lane button.kanban-plugin__lane-settings-button.is-enabled,
|
||
body .kanban-plugin__lane button.kanban-plugin__lane-settings-button,
|
||
body .kanban-plugin__item .kanban-plugin__item-edit-archive-button,
|
||
body .kanban-plugin__item button.kanban-plugin__item-edit-button,
|
||
body .kanban-plugin__item-settings-actions > button,
|
||
body .kanban-plugin__lane-action-wrapper > button {
|
||
background: transparent;
|
||
transition: color 0.1s ease-in-out;
|
||
}
|
||
body .kanban-plugin__item .kanban-plugin__item-edit-archive-button:hover,
|
||
body .kanban-plugin__item button.kanban-plugin__item-edit-button.is-enabled,
|
||
body .kanban-plugin__item button.kanban-plugin__item-edit-button:hover,
|
||
body .kanban-plugin__lane button.kanban-plugin__lane-settings-button.is-enabled,
|
||
body .kanban-plugin__lane button.kanban-plugin__lane-settings-button:hover {
|
||
color: var(--text-normal);
|
||
transition: color 0.1s ease-in-out;
|
||
background: transparent;
|
||
}
|
||
body .kanban-plugin__new-lane-button-wrapper {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
}
|
||
body .kanban-plugin__lane-items > .kanban-plugin__placeholder:only-child {
|
||
border: 1px dashed var(--background-modifier-border);
|
||
height: 2em;
|
||
}
|
||
body .kanban-plugin__item-postfix-button-wrapper {
|
||
align-self: flex-start;
|
||
}
|
||
body .kanban-plugin__item button.kanban-plugin__item-prefix-button.is-enabled,
|
||
body .kanban-plugin__item button.kanban-plugin__item-postfix-button.is-enabled,
|
||
body .kanban-plugin__lane button.kanban-plugin__lane-settings-button.is-enabled {
|
||
color: var(--text-muted);
|
||
}
|
||
body .kanban-plugin button {
|
||
box-shadow: none;
|
||
cursor: var(--cursor);
|
||
height: auto;
|
||
}
|
||
body .kanban-plugin__item button.kanban-plugin__item-prefix-button:hover,
|
||
body .kanban-plugin__item button.kanban-plugin__item-postfix-button:hover,
|
||
body .kanban-plugin__lane button.kanban-plugin__lane-settings-button:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
}
|
||
body .kanban-plugin__item-button-wrapper > button {
|
||
color: var(--text-muted);
|
||
font-weight: 400;
|
||
background: transparent;
|
||
min-height: calc(var(--input-height) + 8px);
|
||
}
|
||
body .kanban-plugin__item-button-wrapper > button:hover {
|
||
color: var(--text-normal);
|
||
background: var(--background-modifier-hover);
|
||
}
|
||
body .kanban-plugin__item-button-wrapper > button:focus {
|
||
box-shadow: none;
|
||
}
|
||
body .kanban-plugin__item-button-wrapper {
|
||
padding: 1px 6px 5px;
|
||
border-top: none;
|
||
}
|
||
body .kanban-plugin__lane-setting-wrapper > div:last-child {
|
||
border: none;
|
||
margin: 0;
|
||
}
|
||
body .kanban-plugin.something-is-dragging {
|
||
cursor: grabbing;
|
||
}
|
||
body .kanban-plugin__item.is-dragging {
|
||
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15), 0 0 0 2px var(--text-selection);
|
||
}
|
||
body .kanban-plugin__lane-items {
|
||
border: var(--kanban-border) solid var(--background-modifier-border);
|
||
padding: 0 4px;
|
||
margin: 0;
|
||
background-color: var(--background-secondary);
|
||
}
|
||
body .kanban-plugin__lane {
|
||
background: transparent;
|
||
padding: 0;
|
||
border: var(--border-width) solid transparent;
|
||
}
|
||
body .kanban-plugin__lane.is-dragging {
|
||
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
|
||
border: 1px solid var(--background-modifier-border);
|
||
}
|
||
body .kanban-plugin__lane .kanban-plugin__item-button-wrapper {
|
||
border-top-left-radius: var(--praxis-radius-sm);
|
||
border-top-right-radius: var(--praxis-radius-sm);
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
border-bottom-width: 0;
|
||
padding: 4px 4px 0;
|
||
}
|
||
body .kanban-plugin__lane.will-prepend .kanban-plugin__lane-items {
|
||
border-radius: var(--praxis-radius-sm);
|
||
}
|
||
body .kanban-plugin__lane.will-prepend .kanban-plugin__item-form {
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
border-radius: var(--praxis-radius-sm) var(--praxis-radius-sm) 0 0;
|
||
padding: 4px 4px 0;
|
||
border-bottom-width: 0;
|
||
}
|
||
body .kanban-plugin__lane.will-prepend .kanban-plugin__item-form + .kanban-plugin__lane-items {
|
||
border-top-width: 0px;
|
||
border-radius: 0 0 var(--praxis-radius-sm) var(--praxis-radius-sm);
|
||
}
|
||
body .kanban-plugin__lane.will-prepend .kanban-plugin__item-button-wrapper + .kanban-plugin__lane-items {
|
||
border-top-width: 0px;
|
||
border-radius: 0 0 var(--praxis-radius-sm) var(--praxis-radius-sm);
|
||
}
|
||
body .kanban-plugin__lane:not(.will-prepend) .kanban-plugin__item-form,
|
||
body .kanban-plugin__lane:not(.will-prepend) .kanban-plugin__item-button-wrapper {
|
||
border-top: none;
|
||
border-radius: 0 0 var(--praxis-radius-sm) var(--praxis-radius-sm);
|
||
}
|
||
body .kanban-plugin__lane:not(.will-prepend) .kanban-plugin__item-button-wrapper {
|
||
padding: 0 4px 4px;
|
||
border-bottom-width: 1px;
|
||
}
|
||
body .kanban-plugin__lane:not(.will-prepend) .kanban-plugin__lane-items {
|
||
border-bottom: none;
|
||
border-top-width: 1px;
|
||
border-radius: var(--praxis-radius-sm) var(--praxis-radius-sm) 0 0;
|
||
}
|
||
body .kanban-plugin__item-form .kanban-plugin__item-input-wrapper {
|
||
min-height: calc(var(--input-height) + 8px);
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
body .kanban-plugin__item-form,
|
||
body .kanban-plugin__item-button-wrapper {
|
||
background-color: var(--background-secondary);
|
||
border: var(--kanban-border) solid var(--background-modifier-border);
|
||
}
|
||
body .kanban-plugin__item-form {
|
||
padding: 0 4px 5px;
|
||
}
|
||
body .kanban-plugin__markdown-preview-view ol.contains-task-list .contains-task-list,
|
||
body .kanban-plugin__markdown-preview-view ul.contains-task-list .contains-task-list,
|
||
body .kanban-plugin__markdown-preview-view ul, body .kanban-plugin__markdown-preview-view ol {
|
||
padding-inline-start: 1.8em;
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
.kanban-plugin__board {
|
||
flex-direction: column;
|
||
}
|
||
.kanban-plugin__lane {
|
||
width: 100%;
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
/* Lapel */
|
||
body .cm-heading-marker {
|
||
cursor: var(--cursor);
|
||
padding-left: 10px;
|
||
}
|
||
|
||
/* Sortable plugin */
|
||
body .markdown-preview-view th,
|
||
body .table-view-table > thead > tr > th,
|
||
body .markdown-source-view.mod-cm6 .dataview.table-view-table thead.table-view-thead tr th {
|
||
cursor: var(--cursor);
|
||
background-image: none;
|
||
}
|
||
|
||
/* Live preview */
|
||
.markdown-source-view.mod-cm6 th {
|
||
background-repeat: no-repeat;
|
||
background-position: right;
|
||
}
|
||
|
||
/* Style Settings preferences */
|
||
.style-settings-container[data-level="2"] {
|
||
background: var(--background-secondary);
|
||
border: 1px solid var(--ui1);
|
||
border-radius: var(--praxis-radius-xs);
|
||
padding: 10px 20px;
|
||
margin: 2px 0 2px -20px;
|
||
}
|
||
|
||
.workspace-leaf-content[data-type=style-settings] div[data-id=instructions] .setting-item-name {
|
||
display: none;
|
||
}
|
||
.workspace-leaf-content[data-type=style-settings] div[data-id=instructions] .setting-item-description {
|
||
color: var(--text-normal);
|
||
font-size: var(--font-adaptive-smaller);
|
||
padding-bottom: 0.5em;
|
||
}
|
||
.workspace-leaf-content[data-type=style-settings] .view-content {
|
||
padding: var(--size-4-4) 0;
|
||
}
|
||
.workspace-leaf-content[data-type=style-settings] .view-content > div {
|
||
width: var(--line-width);
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
}
|
||
.workspace-leaf-content[data-type=style-settings] .style-settings-heading[data-level="0"] .setting-item-name {
|
||
padding-left: 17px;
|
||
}
|
||
.workspace-leaf-content[data-type=style-settings] .setting-item {
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
border: none;
|
||
}
|
||
.workspace-leaf-content[data-type=style-settings] .setting-item-name {
|
||
position: relative;
|
||
}
|
||
.workspace-leaf-content[data-type=style-settings] .style-settings-collapse-indicator {
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
.setting-item-heading.style-settings-heading,
|
||
.style-settings-container .style-settings-heading {
|
||
cursor: var(--cursor);
|
||
}
|
||
|
||
.modal.mod-settings .setting-item .pickr button.pcr-button {
|
||
box-shadow: none;
|
||
border-radius: 34px;
|
||
height: 24px;
|
||
width: 24px;
|
||
}
|
||
|
||
.style-settings-container .setting-item {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.setting-item .pickr .pcr-button:after,
|
||
.setting-item .pickr .pcr-button:before {
|
||
border-radius: 34px;
|
||
box-shadow: none;
|
||
border: none;
|
||
}
|
||
.setting-item.setting-item-heading.style-settings-heading.is-collapsed {
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
.setting-item.setting-item-heading.style-settings-heading {
|
||
border: 0;
|
||
padding: 10px 0 5px;
|
||
margin-bottom: 0;
|
||
border-radius: 0;
|
||
}
|
||
.setting-item .style-settings-import,
|
||
.setting-item .style-settings-export {
|
||
text-decoration-line: none;
|
||
font-size: var(--font-ui-small);
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
margin: 0;
|
||
padding: 2px 8px;
|
||
border-radius: var(--praxis-radius-xs);
|
||
cursor: var(--cursor);
|
||
}
|
||
.setting-item .style-settings-import:hover,
|
||
.setting-item .style-settings-export:hover {
|
||
background-color: var(--background-modifier-hover);
|
||
color: var(--text-normal);
|
||
cursor: var(--cursor);
|
||
}
|
||
|
||
.mod-root .workspace-leaf-content[data-type=style-settings] .style-settings-container .setting-item:not(.setting-item-heading) {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 0.5em 0;
|
||
}
|
||
|
||
.workspace-split:not(.mod-root) .workspace-leaf-content[data-type=style-settings] .setting-item-name {
|
||
font-size: var(--font-adaptive-smaller);
|
||
}
|
||
|
||
.themed-color-wrapper > div + div {
|
||
margin-top: 0;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.theme-light .themed-color-wrapper > .theme-light {
|
||
background-color: transparent;
|
||
}
|
||
.theme-light .themed-color-wrapper > .theme-dark {
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.theme-dark .themed-color-wrapper > .theme-dark {
|
||
background-color: transparent;
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
.workspace-leaf-content[data-type=style-settings] .setting-item-name {
|
||
font-size: var(--font-adaptive-small);
|
||
}
|
||
.workspace-leaf-content[data-type=style-settings] .view-content > .setting-item > .setting-item-info:first-child {
|
||
width: 100%;
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
.zoom-plugin-header {
|
||
--link-color: var(--text-normal);
|
||
--link-decoration: none;
|
||
font-size: var(--font-ui-small);
|
||
padding: 0;
|
||
justify-content: center;
|
||
margin: var(--size-4-2) auto;
|
||
max-width: var(--max-width);
|
||
}
|
||
.zoom-plugin-header > .zoom-plugin-title {
|
||
text-decoration-line: none;
|
||
max-width: 15em;
|
||
overflow: hidden;
|
||
}
|
||
.zoom-plugin-header > .zoom-plugin-delimiter {
|
||
color: var(--text-faint);
|
||
padding: 0 var(--size-4-1);
|
||
}
|
||
|
||
/* Plugin compatibility */
|
||
|
||
/* @plugins
|
||
core:
|
||
- backlink
|
||
- command-palette
|
||
- daily-notes
|
||
- file-explorer
|
||
- file-recovery
|
||
- global-search
|
||
- graph
|
||
- outgoing-link
|
||
- outline
|
||
- page-preview
|
||
- publish
|
||
- random-note
|
||
- starred
|
||
- switcher
|
||
- sync
|
||
- tag-pane
|
||
- word-count
|
||
community:
|
||
- buttons
|
||
- dataview
|
||
- calendar
|
||
- obsidian-charts
|
||
- obsidian-checklist-plugin
|
||
- obsidian-codemirror-options
|
||
- obsidian-dictionary-plugin
|
||
- obsidian-embedded-note-titles
|
||
- obsidian-excalidraw-plugin
|
||
- obsidian-git
|
||
- obsidian-hider
|
||
- obsidian-hover-editor
|
||
- obsidian-kanban
|
||
- obsidian-metatable
|
||
- obsidian-minimal-settings
|
||
- obsidian-outliner
|
||
- obsidian-system-dark-mode
|
||
- obsidian-style-settings
|
||
- quickadd
|
||
- sliding-panes-obsidian
|
||
- todoist-sync-plugin
|
||
*/
|
||
|
||
|
||
/* ===========================================================================
|
||
PRAXIS OVERRIDES
|
||
Design system, Properties, Tasks, Callouts
|
||
=========================================================================== */
|
||
|
||
/* Praxis design tokens */
|
||
body {
|
||
--praxis-radius: 13px;
|
||
--praxis-line-width: 44.5rem;
|
||
--praxis-inline-title-size: 42px;
|
||
--praxis-heading-weight: 500;
|
||
--praxis-cards-min-width: 180px;
|
||
--praxis-cards-image-height: 400px;
|
||
--praxis-cards-image-fit: contain;
|
||
--praxis-img-grid-gap: 8px;
|
||
--praxis-properties-label-width: 128px;
|
||
--praxis-properties-input-height: 26px;
|
||
--praxis-properties-gap: 0px;
|
||
|
||
/* Fibonacci spacing */
|
||
--praxis-space-1: 3px;
|
||
--praxis-space-2: 5px;
|
||
--praxis-space-3: 8px;
|
||
--praxis-space-4: 13px;
|
||
--praxis-space-5: 21px;
|
||
--praxis-space-6: 34px;
|
||
--praxis-space-7: 55px;
|
||
--praxis-space-8: 89px;
|
||
|
||
/* Border radii — Fibonacci/golden ratio */
|
||
--praxis-radius-xs: 5px;
|
||
--praxis-radius-sm: 8px;
|
||
--praxis-radius-md: 13px;
|
||
--praxis-radius-lg: 21px;
|
||
--praxis-radius-xl: 34px;
|
||
|
||
/* Map to Obsidian radius vars */
|
||
--radius-xs: 5px;
|
||
--radius-m: 13px;
|
||
--radius-l: 21px;
|
||
--radius-xl: 34px;
|
||
|
||
/* Size overrides (Fibonacci) — only size-2-* to avoid breaking Obsidian UI */
|
||
--size-2-1: 3px;
|
||
--size-2-2: 5px;
|
||
--size-2-3: 8px;
|
||
|
||
/* Style Settings driven values */
|
||
--radius-s: var(--praxis-radius);
|
||
--radius-m: var(--praxis-radius-lg);
|
||
--radius-l: var(--praxis-radius-lg);
|
||
--image-radius: var(--radius-s);
|
||
--file-line-width: var(--praxis-line-width);
|
||
--inline-title-size: var(--praxis-inline-title-size);
|
||
--h1-weight: var(--praxis-heading-weight);
|
||
--h2-weight: var(--praxis-heading-weight);
|
||
--h3-weight: var(--praxis-heading-weight);
|
||
|
||
/* Cards */
|
||
--cards-min-width: var(--praxis-cards-min-width);
|
||
--cards-max-width: 1fr;
|
||
--cards-mobile-width: min(100%, 180px);
|
||
--cards-image-height: var(--praxis-cards-image-height);
|
||
--cards-image-fit: var(--praxis-cards-image-fit);
|
||
--cards-padding: var(--praxis-space-4);
|
||
--cards-background: transparent;
|
||
--cards-border-width: 1px;
|
||
--cards-aspect-ratio: auto;
|
||
--cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width)));
|
||
|
||
/* Image grid */
|
||
--img-grid-gap: var(--praxis-img-grid-gap);
|
||
--img-grid-fit: cover;
|
||
--img-grid-background: transparent;
|
||
--img-zoom-background: rgba(0, 0, 0, 0.72);
|
||
--img-zoom-max-width: 96%;
|
||
--img-zoom-max-height: 90vh;
|
||
--img-zoom-in-cursor: zoom-in;
|
||
--img-zoom-out-cursor: zoom-out;
|
||
|
||
/* Properties / metadata */
|
||
--metadata-background: transparent;
|
||
--metadata-max-width: var(--file-line-width);
|
||
--metadata-padding: 0 0 var(--praxis-space-4) 0;
|
||
--metadata-border-color: transparent;
|
||
--metadata-border-radius: var(--radius-s);
|
||
--metadata-border-width: 0;
|
||
--metadata-gap: var(--praxis-properties-gap);
|
||
--metadata-divider-color: transparent;
|
||
--metadata-divider-color-hover: transparent;
|
||
--metadata-divider-color-focus: transparent;
|
||
--metadata-divider-width: 0;
|
||
--metadata-property-padding: var(--size-2-1) 0;
|
||
--metadata-property-radius: var(--radius-s);
|
||
--metadata-property-radius-hover: var(--radius-s);
|
||
--metadata-property-radius-focus: var(--radius-s);
|
||
--metadata-property-background: transparent;
|
||
--metadata-property-background-hover: color-mix(in srgb, var(--background-modifier-hover) 34%, transparent);
|
||
--metadata-property-background-active: transparent;
|
||
--metadata-label-background-hover: transparent;
|
||
--metadata-label-background-active: transparent;
|
||
--metadata-label-font-size: var(--font-ui-small);
|
||
--metadata-label-font-weight: 500;
|
||
--metadata-sidebar-label-font-size: var(--font-ui-smaller);
|
||
--metadata-label-text-color: var(--text-muted);
|
||
--metadata-label-text-color-hover: var(--text-normal);
|
||
--metadata-label-width: clamp(112px, 24%, var(--praxis-properties-label-width));
|
||
--metadata-input-height: var(--praxis-properties-input-height);
|
||
--metadata-input-text-color: var(--text-normal);
|
||
--metadata-input-font-size: var(--font-ui-small);
|
||
--metadata-sidebar-input-font-size: var(--font-ui-smaller);
|
||
--metadata-input-background: transparent;
|
||
--metadata-input-background-hover: transparent;
|
||
--metadata-input-background-active: transparent;
|
||
}
|
||
|
||
/* Ribbon and icon sizing */
|
||
.workspace-ribbon .clickable-icon,
|
||
.side-dock-actions .clickable-icon,
|
||
.workspace-sidedock-vault-profile .clickable-icon,
|
||
.nav-buttons-container .clickable-icon {
|
||
border-radius: var(--radius-s);
|
||
}
|
||
|
||
/* Root tab bar: keep the bar tall while tabs stay compact. */
|
||
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container {
|
||
align-items: center;
|
||
display: flex;
|
||
height: var(--header-height);
|
||
justify-content: center;
|
||
min-height: var(--header-height);
|
||
}
|
||
|
||
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
|
||
align-items: center;
|
||
flex: 0 1 auto;
|
||
height: var(--header-height);
|
||
justify-content: center;
|
||
margin-inline: auto;
|
||
max-width: 100%;
|
||
min-height: var(--header-height);
|
||
padding-block: 0;
|
||
width: auto;
|
||
}
|
||
|
||
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-spacer {
|
||
flex: 0 0 0;
|
||
min-width: 0;
|
||
width: 0;
|
||
}
|
||
|
||
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
|
||
align-self: center;
|
||
align-items: center;
|
||
display: flex;
|
||
height: var(--tab-height);
|
||
justify-content: center;
|
||
min-height: var(--tab-height);
|
||
max-height: var(--tab-height);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner {
|
||
align-items: center;
|
||
display: flex;
|
||
height: var(--tab-height);
|
||
justify-content: center;
|
||
min-height: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-title {
|
||
line-height: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.mod-root .workspace-tabs:not(.mod-stacked) :is(.workspace-tab-header-inner-icon, .workspace-tab-header-inner-close-button) {
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.mod-root .workspace-tabs:not(.mod-stacked) :is(.workspace-tab-header-new-tab, .workspace-tab-header-tab-list) {
|
||
align-items: center;
|
||
align-self: center;
|
||
display: flex;
|
||
height: var(--tab-height);
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Focus-visible: keyboard navigation ring */
|
||
.clickable-icon:focus-visible,
|
||
.nav-item-self:focus-visible,
|
||
.tree-item-self:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px var(--background-primary),
|
||
0 0 0 4px var(--interactive-accent);
|
||
}
|
||
|
||
.markdown-source-view .image-embed,
|
||
.markdown-source-view .image-wrapper,
|
||
.markdown-rendered .image-embed,
|
||
.markdown-rendered .image-wrapper {
|
||
border-radius: var(--image-radius);
|
||
}
|
||
|
||
.markdown-source-view .image-wrapper,
|
||
.markdown-rendered .image-wrapper {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Vault profile area — reduce excess padding */
|
||
.workspace-sidedock-vault-profile {
|
||
padding-block: var(--size-2-2);
|
||
}
|
||
.workspace-drawer-vault-switcher {
|
||
padding-block: var(--size-2-1);
|
||
}
|
||
|
||
/* Settings sidebar nav items — reduce spacing */
|
||
.vertical-tab-nav-item {
|
||
padding-top: var(--size-2-2);
|
||
padding-bottom: var(--size-2-2);
|
||
padding-inline: var(--praxis-space-5);
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
body {
|
||
--metadata-label-width: clamp(82px, 34%, 128px);
|
||
}
|
||
}
|
||
|
||
.metadata-properties-title {
|
||
color: var(--text-normal);
|
||
font-size: var(--h3-size, 1em);
|
||
font-weight: 500;
|
||
letter-spacing: 0;
|
||
margin-bottom: var(--praxis-space-4);
|
||
}
|
||
|
||
.metadata-property-value :is(.metadata-input-date, .metadata-input-datetime) {
|
||
gap: 0;
|
||
}
|
||
|
||
.metadata-property-value :is(.metadata-input-date, .metadata-input-datetime) > .clickable-icon {
|
||
margin-inline-start: var(--size-2-2);
|
||
margin-inline-end: 0;
|
||
}
|
||
|
||
.metadata-property-value :is(.metadata-input-date, .metadata-input-datetime) > :is(input, span, div):not(.clickable-icon) {
|
||
margin-inline-start: 0;
|
||
}
|
||
|
||
.metadata-property-value :is(.metadata-input-date, .metadata-input-datetime) input {
|
||
padding-inline-start: 0;
|
||
}
|
||
|
||
/* Native date input — inherit theme colors */
|
||
.metadata-input-date input[type="date"],
|
||
.metadata-input-datetime input[type="datetime-local"] {
|
||
color: var(--text-normal);
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
font-size: var(--metadata-input-font-size, var(--font-ui-small));
|
||
font-family: inherit;
|
||
}
|
||
.theme-light .metadata-input-date input[type="date"],
|
||
.theme-light .metadata-input-datetime input[type="datetime-local"] {
|
||
color-scheme: light;
|
||
}
|
||
.theme-dark .metadata-input-date input[type="date"],
|
||
.theme-dark .metadata-input-datetime input[type="datetime-local"] {
|
||
color-scheme: dark;
|
||
}
|
||
.metadata-input-date input[type="date"]::-webkit-datetime-edit,
|
||
.metadata-input-datetime input[type="datetime-local"]::-webkit-datetime-edit {
|
||
color: var(--text-normal);
|
||
padding: 0;
|
||
}
|
||
.metadata-input-date input[type="date"]::-webkit-datetime-edit-fields-wrapper,
|
||
.metadata-input-datetime input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
|
||
padding: 0;
|
||
}
|
||
.metadata-input-date input[type="date"]::-webkit-calendar-picker-indicator,
|
||
.metadata-input-datetime input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
||
display: none;
|
||
}
|
||
.metadata-input-date input[type="date"]::-webkit-inner-spin-button,
|
||
.metadata-input-datetime input[type="datetime-local"]::-webkit-inner-spin-button {
|
||
display: none;
|
||
}
|
||
|
||
.metadata-property-value :is(input[type="checkbox"], .metadata-input-checkbox) {
|
||
--checkbox-border-color: var(--background-modifier-border-hover);
|
||
--checkbox-border-color-hover: var(--text-accent);
|
||
--checkbox-color: var(--interactive-accent);
|
||
--checkbox-color-hover: var(--interactive-accent-hover);
|
||
--checkbox-marker-color: var(--text-on-accent);
|
||
--checkbox-radius: var(--radius-xs);
|
||
--checkbox-size: 16px;
|
||
border-radius: var(--checkbox-radius);
|
||
height: var(--checkbox-size);
|
||
width: var(--checkbox-size);
|
||
}
|
||
|
||
.metadata-property-value :is(input[type="checkbox"], .metadata-input-checkbox)::before,
|
||
.metadata-property-value :is(input[type="checkbox"], .metadata-input-checkbox)::after {
|
||
border-radius: var(--checkbox-radius);
|
||
}
|
||
|
||
/* H1 underline */
|
||
.hide-title .inline-title,
|
||
.alt-title .inline-title {
|
||
display: none;
|
||
}
|
||
|
||
.h1-borders .markdown-rendered h1::after {
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
content: "";
|
||
display: block;
|
||
margin-top: 0.45em;
|
||
}
|
||
|
||
body:not(.praxis-underline-title-off) .inline-title {
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
padding-bottom: 0.35em;
|
||
}
|
||
|
||
body:not(.praxis-underline-title-off) .markdown-rendered h1:not(.embedded-note-title),
|
||
body:not(.praxis-underline-title-off) .mod-cm6 .cm-editor .HyperMD-header-1 {
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
padding-bottom: 0.4em;
|
||
margin-block-end: 0.6em;
|
||
}
|
||
|
||
/* Table lines helper */
|
||
.table-lines {
|
||
--table-border-width: 1px;
|
||
--table-header-border-width: 1px;
|
||
--table-column-first-border-width: 1px;
|
||
--table-column-last-border-width: 1px;
|
||
--table-row-last-border-width: 1px;
|
||
--table-edge-cell-padding: var(--praxis-space-4);
|
||
}
|
||
|
||
/* Link underlines — on by default; add .praxis-links-underlined-off to disable */
|
||
body {
|
||
--link-decoration: underline;
|
||
--link-external-decoration: underline;
|
||
}
|
||
body.praxis-links-underlined-off {
|
||
--link-decoration: none;
|
||
--link-external-decoration: none;
|
||
}
|
||
|
||
/*
|
||
* Task icons and custom checkboxes
|
||
*
|
||
* Progress bars: [0]–[9] render as a pill bar at 0%–90%. [9]=90% is intentional.
|
||
*
|
||
* Status / workflow
|
||
* [ ] incomplete (default) [x] complete (faded, no strikethrough)
|
||
* [/] in-progress (half-fill) [-] canceled (strikethrough, muted)
|
||
* [>] forwarded / delegated [<] scheduled / rescheduled
|
||
*
|
||
* Signals
|
||
* [?] question / uncertain [!] urgent / important
|
||
* [*] starred / highlight ["] quote reference
|
||
*
|
||
* Actionable
|
||
* [t] timed / waiting [a] alarm / deadline
|
||
* [l] location [P] phone call
|
||
* [R] review / due [+] added / created
|
||
*
|
||
* Categorical
|
||
* [i] information [S] money / savings
|
||
* [I] idea / insight [B] brain / mental model
|
||
* [b] bookmark [n] note / annotation
|
||
* [k] key insight / access [w] win / achievement
|
||
*
|
||
* Sentiment
|
||
* [p] pros / positive [c] cons / negative
|
||
* [u] trending up [d] trending down
|
||
* [L] love / value [f] fire / hot topic
|
||
*/
|
||
body.theme-light,
|
||
body.cupertino-light {
|
||
--praxis-task-violet: #6f55bf;
|
||
--praxis-task-mint: #2f8177;
|
||
--praxis-task-orange: #a65a2d;
|
||
--praxis-task-brown: #806b4d;
|
||
--praxis-task-muted: #8a7a65;
|
||
--praxis-task-progress-fill: var(--praxis-task-mint);
|
||
--praxis-task-progress-track: color-mix(in srgb, var(--praxis-task-muted) 14%, transparent);
|
||
--praxis-task-progress-border: color-mix(in srgb, var(--praxis-task-muted) 42%, transparent);
|
||
}
|
||
|
||
body.theme-dark,
|
||
body.cupertino-dark {
|
||
--praxis-task-violet: #9878e0;
|
||
--praxis-task-mint: #5bbfb2;
|
||
--praxis-task-orange: #d97a40;
|
||
--praxis-task-brown: #b8a88a;
|
||
--praxis-task-muted: #8c8078;
|
||
--praxis-task-progress-fill: var(--praxis-task-mint);
|
||
--praxis-task-progress-track: color-mix(in srgb, var(--praxis-task-muted) 18%, transparent);
|
||
--praxis-task-progress-border: color-mix(in srgb, var(--praxis-task-muted) 52%, transparent);
|
||
}
|
||
|
||
body {
|
||
--praxis-icon-alarm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2M5 3 2 6M22 6l-3-3M6.4 19.6 4 22M17.6 19.6 20 22'/%3E%3C/svg%3E");
|
||
--praxis-icon-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
|
||
--praxis-icon-brain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0-6 .1 4 4 0 0 0-2.5 5.8 4 4 0 0 0 .5 6.6A4 4 0 1 0 12 18Z'/%3E%3Cpath d='M12 5a3 3 0 1 1 6 .1 4 4 0 0 1 2.5 5.8 4 4 0 0 1-.5 6.6A4 4 0 1 1 12 18Z'/%3E%3Cpath d='M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4'/%3E%3C/svg%3E");
|
||
--praxis-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
|
||
--praxis-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
|
||
--praxis-icon-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 1 1 5.8 1c-.7 1.2-2.9 1.6-2.9 3M12 17h.01'/%3E%3C/svg%3E");
|
||
--praxis-icon-review: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='m9 14 2 2 4-5'/%3E%3C/svg%3E");
|
||
--praxis-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
|
||
--praxis-icon-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.4-.5-2-1-3-1.1 1.1-2 2.3-2 4a4 4 0 0 0 8 0c0-2.3-1.1-4.4-3-6 .2 1.6-.3 3-1.5 4.5'/%3E%3Cpath d='M12 22a8 8 0 0 0 8-8c0-4.8-3.4-7.7-6.2-10.6-.8 2.8-2.5 4.4-4.6 6.2C7.5 11.1 6 12.7 6 15a6 6 0 0 0 12 0'/%3E%3C/svg%3E");
|
||
--praxis-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3.3.8-4.5 2.1A6 6 0 0 0 7.5 3 5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7 7-7z'/%3E%3C/svg%3E");
|
||
--praxis-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
|
||
--praxis-icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z'/%3E%3Ccircle cx='16.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E");
|
||
--praxis-icon-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2v2M4.9 4.9l1.4 1.4M19.1 4.9l-1.4 1.4M2 12h2M20 12h2'/%3E%3Cpath d='M8 14a6 6 0 1 1 8 0c-.7.7-1 1.4-1 2H9c0-.6-.3-1.3-1-2Z'/%3E%3C/svg%3E");
|
||
--praxis-icon-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.9-8 12-8 12S4 14.9 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
|
||
--praxis-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
|
||
--praxis-icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.4 2.6a1 1 0 0 1 3 3l-9 9a2 2 0 0 1-.9.5l-2.9.8.8-2.9a2 2 0 0 1 .5-.9Z'/%3E%3C/svg%3E");
|
||
--praxis-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.7.6 2.6.7a2 2 0 0 1 2 2.3Z'/%3E%3C/svg%3E");
|
||
--praxis-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
|
||
--praxis-icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.3-.7-2-2-2H4c-1.3 0-2 .7-2 2v4c0 1.3.7 2 2 2h3c0 4-2 6-4 6v4Z'/%3E%3Cpath d='M15 21c3 0 7-1 7-8V5c0-1.3-.7-2-2-2h-4c-1.3 0-2 .7-2 2v4c0 1.3.7 2 2 2h3c0 4-2 6-4 6v4Z'/%3E%3C/svg%3E");
|
||
--praxis-icon-paper-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
|
||
--praxis-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 2.3a.6.6 0 0 1 1 0l3 6.1 6.7 1a.6.6 0 0 1 .3 1l-4.9 4.8 1.2 6.7a.6.6 0 0 1-.9.6L12 19.3l-6 3.2a.6.6 0 0 1-.9-.6l1.2-6.7-4.9-4.8a.6.6 0 0 1 .3-1l6.7-1 3-6.1z'/%3E%3C/svg%3E");
|
||
--praxis-icon-thumbs-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 14V2'/%3E%3Cpath d='M9 18.1 10 14H4.2a2 2 0 0 1-1.9-2.6l1.4-7A2 2 0 0 1 5.6 3H17a2 2 0 0 1 2 2v8.4a4 4 0 0 1-.8 2.4L14 21a2 2 0 0 1-3-2.6Z'/%3E%3C/svg%3E");
|
||
--praxis-icon-thumbs-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.9 14 10h5.8a2 2 0 0 1 1.9 2.6l-1.4 7a2 2 0 0 1-1.9 1.4H7a2 2 0 0 1-2-2v-8.4a4 4 0 0 1 .8-2.4L10 3a2 2 0 0 1 3 2.6Z'/%3E%3C/svg%3E");
|
||
--praxis-icon-trend-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 17-8.5-8.5-5 5L2 7'/%3E%3Cpath d='M16 17h6v-6'/%3E%3C/svg%3E");
|
||
--praxis-icon-trend-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
|
||
--praxis-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
|
||
--praxis-icon-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0Z'/%3E%3Cpath d='M5 4H3v3a4 4 0 0 0 4 4M19 4h2v3a4 4 0 0 1-4 4'/%3E%3C/svg%3E");
|
||
--praxis-icon-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 14h.01'/%3E%3Cpath d='M7 7h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
:is(input[data-task="/"], input[data-task="-"], input[data-task=">"], input[data-task="<"], input[data-task="?"], input[data-task="!"], input[data-task="*"], input[data-task="\""], input[data-task="\u201c"], input[data-task="l"], input[data-task="b"], input[data-task="i"], input[data-task="S"], input[data-task="I"], input[data-task="p"], input[data-task="c"], input[data-task="f"], input[data-task="k"], input[data-task="w"], input[data-task="u"], input[data-task="d"], input[data-task="+"], input[data-task="B"], input[data-task="a"], input[data-task="n"], input[data-task="R"], input[data-task="t"], input[data-task="P"], input[data-task="L"]):checked,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="/"], [data-task="-"], [data-task=">"], [data-task="<"], [data-task="?"], [data-task="!"], [data-task="*"], [data-task="\""], [data-task="\u201c"], [data-task="l"], [data-task="b"], [data-task="i"], [data-task="S"], [data-task="I"], [data-task="p"], [data-task="c"], [data-task="f"], [data-task="k"], [data-task="w"], [data-task="u"], [data-task="d"], [data-task="+"], [data-task="B"], [data-task="a"], [data-task="n"], [data-task="R"], [data-task="t"], [data-task="P"], [data-task="L"]) > input:checked,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="/"], [data-task="-"], [data-task=">"], [data-task="<"], [data-task="?"], [data-task="!"], [data-task="*"], [data-task="\""], [data-task="\u201c"], [data-task="l"], [data-task="b"], [data-task="i"], [data-task="S"], [data-task="I"], [data-task="p"], [data-task="c"], [data-task="f"], [data-task="k"], [data-task="w"], [data-task="u"], [data-task="d"], [data-task="+"], [data-task="B"], [data-task="a"], [data-task="n"], [data-task="R"], [data-task="t"], [data-task="P"], [data-task="L"]) > p > input:checked {
|
||
--checkbox-marker-color: transparent;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
background-color: currentColor;
|
||
background-image: none;
|
||
background-position: 50% 50%;
|
||
background-repeat: no-repeat;
|
||
background-size: 0 0;
|
||
border: none;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
color: var(--praxis-task-color, var(--praxis-task-violet));
|
||
filter: none;
|
||
mask-image: var(--praxis-task-icon, var(--praxis-icon-check));
|
||
mask-mode: alpha;
|
||
mask-position: 50% 50%;
|
||
mask-repeat: no-repeat;
|
||
mask-size: var(--checkbox-icon, 1em);
|
||
overflow: visible;
|
||
transform: none;
|
||
-webkit-mask-image: var(--praxis-task-icon, var(--praxis-icon-check));
|
||
-webkit-mask-position: 50% 50%;
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: var(--checkbox-icon, 1em);
|
||
}
|
||
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
:is(input[data-task="/"], input[data-task="-"], input[data-task=">"], input[data-task="<"], input[data-task="?"], input[data-task="!"], input[data-task="*"], input[data-task="\""], input[data-task="\u201c"], input[data-task="l"], input[data-task="b"], input[data-task="i"], input[data-task="S"], input[data-task="I"], input[data-task="p"], input[data-task="c"], input[data-task="f"], input[data-task="k"], input[data-task="w"], input[data-task="u"], input[data-task="d"], input[data-task="+"], input[data-task="B"], input[data-task="a"], input[data-task="n"], input[data-task="R"], input[data-task="t"], input[data-task="P"], input[data-task="L"]):checked::after,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="/"], [data-task="-"], [data-task=">"], [data-task="<"], [data-task="?"], [data-task="!"], [data-task="*"], [data-task="\""], [data-task="\u201c"], [data-task="l"], [data-task="b"], [data-task="i"], [data-task="S"], [data-task="I"], [data-task="p"], [data-task="c"], [data-task="f"], [data-task="k"], [data-task="w"], [data-task="u"], [data-task="d"], [data-task="+"], [data-task="B"], [data-task="a"], [data-task="n"], [data-task="R"], [data-task="t"], [data-task="P"], [data-task="L"]) > input:checked::after,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="/"], [data-task="-"], [data-task=">"], [data-task="<"], [data-task="?"], [data-task="!"], [data-task="*"], [data-task="\""], [data-task="\u201c"], [data-task="l"], [data-task="b"], [data-task="i"], [data-task="S"], [data-task="I"], [data-task="p"], [data-task="c"], [data-task="f"], [data-task="k"], [data-task="w"], [data-task="u"], [data-task="d"], [data-task="+"], [data-task="B"], [data-task="a"], [data-task="n"], [data-task="R"], [data-task="t"], [data-task="P"], [data-task="L"]) > p > input:checked::after,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
:is(input[data-task="/"], input[data-task="-"], input[data-task=">"], input[data-task="<"], input[data-task="?"], input[data-task="!"], input[data-task="*"], input[data-task="\""], input[data-task="\u201c"], input[data-task="l"], input[data-task="b"], input[data-task="i"], input[data-task="S"], input[data-task="I"], input[data-task="p"], input[data-task="c"], input[data-task="f"], input[data-task="k"], input[data-task="w"], input[data-task="u"], input[data-task="d"], input[data-task="+"], input[data-task="B"], input[data-task="a"], input[data-task="n"], input[data-task="R"], input[data-task="t"], input[data-task="P"], input[data-task="L"]):checked::before,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="/"], [data-task="-"], [data-task=">"], [data-task="<"], [data-task="?"], [data-task="!"], [data-task="*"], [data-task="\""], [data-task="\u201c"], [data-task="l"], [data-task="b"], [data-task="i"], [data-task="S"], [data-task="I"], [data-task="p"], [data-task="c"], [data-task="f"], [data-task="k"], [data-task="w"], [data-task="u"], [data-task="d"], [data-task="+"], [data-task="B"], [data-task="a"], [data-task="n"], [data-task="R"], [data-task="t"], [data-task="P"], [data-task="L"]) > input:checked::before,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="/"], [data-task="-"], [data-task=">"], [data-task="<"], [data-task="?"], [data-task="!"], [data-task="*"], [data-task="\""], [data-task="\u201c"], [data-task="l"], [data-task="b"], [data-task="i"], [data-task="S"], [data-task="I"], [data-task="p"], [data-task="c"], [data-task="f"], [data-task="k"], [data-task="w"], [data-task="u"], [data-task="d"], [data-task="+"], [data-task="B"], [data-task="a"], [data-task="n"], [data-task="R"], [data-task="t"], [data-task="P"], [data-task="L"]) > p > input:checked::before {
|
||
background: none;
|
||
border: 0;
|
||
content: none;
|
||
display: none;
|
||
height: 0;
|
||
mask: none;
|
||
width: 0;
|
||
-webkit-mask: none;
|
||
}
|
||
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
:is(input[data-task="0"], input[data-task="1"], input[data-task="2"], input[data-task="3"], input[data-task="4"], input[data-task="5"], input[data-task="6"], input[data-task="7"], input[data-task="8"], input[data-task="9"]):checked,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="0"], [data-task="1"], [data-task="2"], [data-task="3"], [data-task="4"], [data-task="5"], [data-task="6"], [data-task="7"], [data-task="8"], [data-task="9"]) > input:checked,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="0"], [data-task="1"], [data-task="2"], [data-task="3"], [data-task="4"], [data-task="5"], [data-task="6"], [data-task="7"], [data-task="8"], [data-task="9"]) > p > input:checked {
|
||
--checkbox-marker-color: transparent;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
background: var(--praxis-task-progress-track);
|
||
background-image: none;
|
||
border: 1px solid var(--praxis-task-progress-border, var(--background-modifier-border));
|
||
border-radius: 999px;
|
||
box-shadow: none;
|
||
color: var(--praxis-task-progress-fill, var(--interactive-accent));
|
||
filter: none;
|
||
height: calc(var(--checkbox-size, 1em) * 0.5);
|
||
mask: none;
|
||
overflow: hidden;
|
||
position: relative;
|
||
transform: none;
|
||
width: calc(var(--checkbox-size, 1em) * 2.4);
|
||
-webkit-mask: none;
|
||
}
|
||
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
:is(input[data-task="0"], input[data-task="1"], input[data-task="2"], input[data-task="3"], input[data-task="4"], input[data-task="5"], input[data-task="6"], input[data-task="7"], input[data-task="8"], input[data-task="9"]):checked::before,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="0"], [data-task="1"], [data-task="2"], [data-task="3"], [data-task="4"], [data-task="5"], [data-task="6"], [data-task="7"], [data-task="8"], [data-task="9"]) > input:checked::before,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="0"], [data-task="1"], [data-task="2"], [data-task="3"], [data-task="4"], [data-task="5"], [data-task="6"], [data-task="7"], [data-task="8"], [data-task="9"]) > p > input:checked::before {
|
||
background: none;
|
||
border: 0;
|
||
content: none;
|
||
display: none;
|
||
height: 0;
|
||
mask: none;
|
||
width: 0;
|
||
-webkit-mask: none;
|
||
}
|
||
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
:is(input[data-task="0"], input[data-task="1"], input[data-task="2"], input[data-task="3"], input[data-task="4"], input[data-task="5"], input[data-task="6"], input[data-task="7"], input[data-task="8"], input[data-task="9"]):checked::after,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="0"], [data-task="1"], [data-task="2"], [data-task="3"], [data-task="4"], [data-task="5"], [data-task="6"], [data-task="7"], [data-task="8"], [data-task="9"]) > input:checked::after,
|
||
body:is(.theme-dark, .theme-light):not(.praxis-checkboxes-off)
|
||
li:is([data-task="0"], [data-task="1"], [data-task="2"], [data-task="3"], [data-task="4"], [data-task="5"], [data-task="6"], [data-task="7"], [data-task="8"], [data-task="9"]) > p > input:checked::after {
|
||
background: currentColor;
|
||
border: 0;
|
||
border-radius: inherit;
|
||
content: "";
|
||
display: block;
|
||
height: 100%;
|
||
left: 0;
|
||
mask: none;
|
||
position: absolute;
|
||
top: 0;
|
||
width: var(--praxis-task-progress, 0%);
|
||
-webkit-mask: none;
|
||
}
|
||
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="/"], li[data-task="/"]) { --praxis-task-icon: var(--praxis-icon-minus); --praxis-task-color: var(--praxis-task-muted); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="-"], li[data-task="-"]) { --praxis-task-icon: var(--praxis-icon-minus); --praxis-task-color: var(--praxis-task-muted); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task=">"], li[data-task=">"]) { --praxis-task-icon: var(--praxis-icon-paper-plane); --praxis-task-color: var(--praxis-task-muted); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="<"], li[data-task="<"]) { --praxis-task-icon: var(--praxis-icon-calendar); --praxis-task-color: var(--praxis-task-muted); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="?"], li[data-task="?"]) { --praxis-task-icon: var(--praxis-icon-question); --praxis-task-color: var(--praxis-task-violet); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="!"], li[data-task="!"]) { --praxis-task-icon: var(--praxis-icon-alert); --praxis-task-color: var(--praxis-task-orange); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="*"], li[data-task="*"]) { --praxis-task-icon: var(--praxis-icon-star); --praxis-task-color: var(--praxis-task-violet); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task='"'], input[data-task="\201c"], li[data-task='"'], li[data-task="\201c"]) { --praxis-task-icon: var(--praxis-icon-quote); --praxis-task-color: var(--praxis-task-brown); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="l"], li[data-task="l"]) { --praxis-task-icon: var(--praxis-icon-map-pin); --praxis-task-color: var(--praxis-task-orange); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="b"], li[data-task="b"]) { --praxis-task-icon: var(--praxis-icon-bookmark); --praxis-task-color: var(--praxis-task-violet); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="i"], li[data-task="i"]) { --praxis-task-icon: var(--praxis-icon-info); --praxis-task-color: var(--praxis-task-mint); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="S"], li[data-task="S"]) { --praxis-task-icon: var(--praxis-icon-wallet); --praxis-task-color: var(--praxis-task-mint); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="I"], li[data-task="I"]) { --praxis-task-icon: var(--praxis-icon-lightbulb); --praxis-task-color: var(--praxis-task-violet); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="p"], li[data-task="p"]) { --praxis-task-icon: var(--praxis-icon-thumbs-up); --praxis-task-color: var(--praxis-task-mint); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="c"], li[data-task="c"]) { --praxis-task-icon: var(--praxis-icon-thumbs-down); --praxis-task-color: var(--praxis-task-orange); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="f"], li[data-task="f"]) { --praxis-task-icon: var(--praxis-icon-flame); --praxis-task-color: var(--praxis-task-orange); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="k"], li[data-task="k"]) { --praxis-task-icon: var(--praxis-icon-key); --praxis-task-color: var(--praxis-task-violet); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="w"], li[data-task="w"]) { --praxis-task-icon: var(--praxis-icon-trophy); --praxis-task-color: var(--praxis-task-violet); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="u"], li[data-task="u"]) { --praxis-task-icon: var(--praxis-icon-trend-up); --praxis-task-color: var(--praxis-task-mint); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="d"], li[data-task="d"]) { --praxis-task-icon: var(--praxis-icon-trend-down); --praxis-task-color: var(--praxis-task-orange); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="+"], li[data-task="+"]) { --praxis-task-icon: var(--praxis-icon-plus); --praxis-task-color: var(--praxis-task-mint); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="B"], li[data-task="B"]) { --praxis-task-icon: var(--praxis-icon-brain); --praxis-task-color: var(--praxis-task-violet); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="a"], li[data-task="a"]) { --praxis-task-icon: var(--praxis-icon-alarm); --praxis-task-color: var(--praxis-task-orange); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="n"], li[data-task="n"]) { --praxis-task-icon: var(--praxis-icon-note); --praxis-task-color: var(--praxis-task-violet); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="R"], li[data-task="R"]) { --praxis-task-icon: var(--praxis-icon-review); --praxis-task-color: var(--praxis-task-mint); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="t"], li[data-task="t"]) { --praxis-task-icon: var(--praxis-icon-clock); --praxis-task-color: var(--praxis-task-muted); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="P"], li[data-task="P"]) { --praxis-task-icon: var(--praxis-icon-phone); --praxis-task-color: var(--praxis-task-mint); }
|
||
body:not(.praxis-checkboxes-off) :is(input[data-task="L"], li[data-task="L"]) { --praxis-task-icon: var(--praxis-icon-heart); --praxis-task-color: var(--praxis-task-violet); }
|
||
body :is(input[data-task="0"], li[data-task="0"]) { --praxis-task-progress: 0%; }
|
||
body :is(input[data-task="1"], li[data-task="1"]) { --praxis-task-progress: 10%; }
|
||
body :is(input[data-task="2"], li[data-task="2"]) { --praxis-task-progress: 20%; }
|
||
body :is(input[data-task="3"], li[data-task="3"]) { --praxis-task-progress: 30%; }
|
||
body :is(input[data-task="4"], li[data-task="4"]) { --praxis-task-progress: 40%; }
|
||
body :is(input[data-task="5"], li[data-task="5"]) { --praxis-task-progress: 50%; }
|
||
body :is(input[data-task="6"], li[data-task="6"]) { --praxis-task-progress: 60%; }
|
||
body :is(input[data-task="7"], li[data-task="7"]) { --praxis-task-progress: 70%; }
|
||
body :is(input[data-task="8"], li[data-task="8"]) { --praxis-task-progress: 80%; }
|
||
body :is(input[data-task="9"], li[data-task="9"]) { --praxis-task-progress: 90%; }
|
||
|
||
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
|
||
.markdown-rendered li[data-task="x"] {
|
||
opacity: 0.2;
|
||
text-decoration-line: none;
|
||
}
|
||
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"]:hover,
|
||
.markdown-rendered li[data-task="x"]:hover {
|
||
opacity: 0.8;
|
||
transition: opacity ease-in-out 0.5s;
|
||
}
|
||
|
||
input[data-task]:not(input[data-task=""], input[data-task=" "], input[data-task="x"]):checked,
|
||
li[data-task]:not(li[data-task=""], li[data-task=" "], li[data-task="x"]) > input:checked,
|
||
li[data-task]:not(li[data-task=""], li[data-task=" "], li[data-task="x"]) > p > input:checked,
|
||
label.task-list-label:has(> input[data-task]:not(input[data-task=""], input[data-task=" "], input[data-task="x"]):checked) {
|
||
pointer-events: none;
|
||
}
|
||
|
||
body:not(.tasks) .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:is([data-task="-"]),
|
||
body:not(.tasks) .markdown-preview-view ul li[data-task="-"].task-list-item.is-checked,
|
||
body:not(.tasks) li[data-task="-"].task-list-item.is-checked {
|
||
color: var(--text-faint);
|
||
text-decoration-line: line-through;
|
||
text-decoration-style: solid;
|
||
text-decoration-color: var(--text-faint);
|
||
text-decoration-thickness: 1px;
|
||
}
|
||
|
||
/* Callouts */
|
||
.callout {
|
||
--callout-color: var(--callout-purple, rgb(152 120 224));
|
||
--callout-icon: lucide-pencil;
|
||
--callout-title-color: var(--callout-color);
|
||
--callout-border-width: 1px;
|
||
--callout-border-opacity: 1;
|
||
--callout-radius: var(--radius-s);
|
||
--callout-padding: var(--praxis-space-4);
|
||
--callout-title-padding: 0 0 var(--praxis-space-2) 0;
|
||
--callout-content-padding: var(--praxis-space-2) 0 0 0;
|
||
background: color-mix(in srgb, var(--callout-color) 12%, transparent);
|
||
border: var(--callout-border-width) solid color-mix(in srgb, var(--callout-color) 28%, transparent);
|
||
border-radius: var(--callout-radius);
|
||
padding: var(--callout-padding);
|
||
}
|
||
|
||
.callout-title,
|
||
.callout-icon,
|
||
.callout-title-icon {
|
||
color: var(--callout-title-color);
|
||
}
|
||
|
||
.callout-content {
|
||
padding: var(--callout-content-padding);
|
||
}
|
||
|
||
/* Violet — brand / intellectual / important */
|
||
.callout[data-callout="note"] { --callout-icon: lucide-pencil; }
|
||
.callout[data-callout="abstract"],
|
||
.callout[data-callout="summary"],
|
||
.callout[data-callout="tldr"] { --callout-icon: lucide-clipboard-list; }
|
||
.callout[data-callout="info"] { --callout-icon: lucide-info; }
|
||
.callout[data-callout="todo"] { --callout-icon: lucide-circle-check; }
|
||
.callout[data-callout="important"] { --callout-icon: lucide-bookmark; }
|
||
.callout[data-callout="note"],
|
||
.callout[data-callout="abstract"],
|
||
.callout[data-callout="summary"],
|
||
.callout[data-callout="tldr"],
|
||
.callout[data-callout="info"],
|
||
.callout[data-callout="todo"],
|
||
.callout[data-callout="important"] { --callout-color: var(--callout-purple); }
|
||
|
||
/* Teal — positive / actionable */
|
||
.callout[data-callout="tip"],
|
||
.callout[data-callout="hint"] { --callout-icon: lucide-flame; }
|
||
.callout[data-callout="success"],
|
||
.callout[data-callout="check"],
|
||
.callout[data-callout="done"] { --callout-icon: lucide-check; }
|
||
.callout[data-callout="tip"],
|
||
.callout[data-callout="hint"],
|
||
.callout[data-callout="success"],
|
||
.callout[data-callout="check"],
|
||
.callout[data-callout="done"] { --callout-color: var(--callout-teal); }
|
||
|
||
/* Yellow — uncertain / inquiry */
|
||
.callout[data-callout="question"],
|
||
.callout[data-callout="help"],
|
||
.callout[data-callout="faq"] { --callout-icon: lucide-circle-help; }
|
||
.callout[data-callout="question"],
|
||
.callout[data-callout="help"],
|
||
.callout[data-callout="faq"] { --callout-color: var(--callout-yellow); }
|
||
|
||
/* Orange — caution / attention */
|
||
.callout[data-callout="warning"],
|
||
.callout[data-callout="caution"],
|
||
.callout[data-callout="attention"] { --callout-icon: lucide-triangle-alert; }
|
||
.callout[data-callout="warning"],
|
||
.callout[data-callout="caution"],
|
||
.callout[data-callout="attention"] { --callout-color: var(--callout-orange); }
|
||
|
||
/* Red — failure / critical */
|
||
.callout[data-callout="failure"],
|
||
.callout[data-callout="fail"],
|
||
.callout[data-callout="missing"] { --callout-icon: lucide-x; }
|
||
.callout[data-callout="danger"],
|
||
.callout[data-callout="error"] { --callout-icon: lucide-zap; }
|
||
.callout[data-callout="bug"] { --callout-icon: lucide-bug; }
|
||
.callout[data-callout="failure"],
|
||
.callout[data-callout="fail"],
|
||
.callout[data-callout="missing"],
|
||
.callout[data-callout="danger"],
|
||
.callout[data-callout="error"],
|
||
.callout[data-callout="bug"] { --callout-color: var(--callout-red); }
|
||
|
||
/* Brown — attribution / quote / context */
|
||
.callout[data-callout="quote"],
|
||
.callout[data-callout="cite"] { --callout-color: var(--callout-brown); --callout-icon: lucide-quote; }
|
||
.callout[data-callout="example"] { --callout-color: var(--callout-brown); --callout-icon: lucide-list; }
|
||
|
||
.callout[data-callout="author"] {
|
||
--callout-color: var(--callout-brown);
|
||
--callout-icon: lucide-user;
|
||
box-shadow: 0 var(--praxis-space-3) var(--praxis-space-6) var(--shadow-color);
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
.callout[data-callout="author"] > .callout-title {
|
||
font-style: italic;
|
||
justify-content: flex-end;
|
||
padding-right: var(--size-2-3);
|
||
}
|
||
|
||
.callout[data-callout="author"] .callout-content p:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.theme-light .callout[data-callout="note"],
|
||
.theme-light .callout[data-callout="abstract"],
|
||
.theme-light .callout[data-callout="summary"],
|
||
.theme-light .callout[data-callout="tldr"],
|
||
.theme-light .callout[data-callout="info"],
|
||
.theme-light .callout[data-callout="todo"],
|
||
.theme-light .callout[data-callout="important"] { --callout-title-color: var(--callout-purple); }
|
||
|
||
.theme-light .callout[data-callout="tip"],
|
||
.theme-light .callout[data-callout="hint"],
|
||
.theme-light .callout[data-callout="success"],
|
||
.theme-light .callout[data-callout="check"],
|
||
.theme-light .callout[data-callout="done"] { --callout-title-color: var(--callout-teal); }
|
||
|
||
.theme-light .callout[data-callout="question"],
|
||
.theme-light .callout[data-callout="help"],
|
||
.theme-light .callout[data-callout="faq"] { --callout-title-color: var(--callout-yellow); }
|
||
|
||
.theme-light .callout[data-callout="warning"],
|
||
.theme-light .callout[data-callout="caution"],
|
||
.theme-light .callout[data-callout="attention"] { --callout-title-color: var(--callout-orange); }
|
||
|
||
.theme-light .callout[data-callout="failure"],
|
||
.theme-light .callout[data-callout="fail"],
|
||
.theme-light .callout[data-callout="missing"],
|
||
.theme-light .callout[data-callout="danger"],
|
||
.theme-light .callout[data-callout="error"],
|
||
.theme-light .callout[data-callout="bug"] { --callout-title-color: var(--callout-red); }
|
||
|
||
/* Brown callout title: override to --tx2 for sufficient contrast on both themes */
|
||
.theme-dark .callout[data-callout="quote"],
|
||
.theme-dark .callout[data-callout="cite"],
|
||
.theme-dark .callout[data-callout="example"],
|
||
.theme-dark .callout[data-callout="author"] { --callout-title-color: var(--tx2); }
|
||
|
||
.theme-light .callout[data-callout="quote"],
|
||
.theme-light .callout[data-callout="cite"],
|
||
.theme-light .callout[data-callout="example"],
|
||
.theme-light .callout[data-callout="author"] { --callout-title-color: var(--tx2); }
|
||
|
||
.callout:is([data-callout-metadata~="noicon"], [data-callout-metadata="noicon"]) .callout-icon,
|
||
.callout:is([data-callout-metadata~="noicon"], [data-callout-metadata="noicon"]) .callout-title-icon {
|
||
display: none;
|
||
margin: 0;
|
||
min-width: 0;
|
||
width: 0;
|
||
}
|
||
|
||
body.praxis-callouts-minimal .callout {
|
||
background: transparent;
|
||
border-color: transparent;
|
||
border-left-color: color-mix(in srgb, var(--callout-color) 65%, transparent);
|
||
border-left-width: 3px;
|
||
}
|
||
|
||
/* ====================================================
|
||
* Mobile — narrow viewport overrides (≤ 400px)
|
||
* Applies to phones and small tablets in portrait.
|
||
* These rules are scoped to .is-mobile where needed
|
||
* to avoid affecting Obsidian Publish / desktop.
|
||
* ==================================================== */
|
||
@media (max-width: 400px) {
|
||
body {
|
||
--cards-min-width: var(--cards-mobile-width);
|
||
--file-line-width: 100%;
|
||
--img-grid-gap: max(4px, calc(var(--praxis-img-grid-gap) / 2));
|
||
}
|
||
}
|
||
|
||
/* Mobile editor safety: keep content out from under the absolute CM gutter. */
|
||
@media (max-width: 400px) {
|
||
.is-mobile .markdown-source-view.mod-cm6 {
|
||
--praxis-mobile-editor-gutter-width: var(--folding-offset, 32px);
|
||
--praxis-mobile-editor-gap: var(--size-4-2);
|
||
--praxis-mobile-editor-inset: 0px;
|
||
--file-line-width: 100%;
|
||
--file-margins: var(--size-4-2) var(--size-4-4) var(--size-4-6) var(--size-4-4);
|
||
}
|
||
|
||
.is-mobile .markdown-source-view.mod-cm6:has(.cm-lineNumbers) {
|
||
--praxis-mobile-editor-inset: calc(var(--praxis-mobile-editor-gutter-width) + var(--praxis-mobile-editor-gap));
|
||
}
|
||
|
||
.is-mobile .markdown-source-view.mod-cm6 .cm-gutters {
|
||
inset-inline-start: 0;
|
||
min-width: var(--praxis-mobile-editor-gutter-width);
|
||
}
|
||
|
||
.is-mobile .markdown-source-view.mod-cm6 .cm-lineNumbers .cm-gutterElement {
|
||
min-width: var(--praxis-mobile-editor-gutter-width);
|
||
}
|
||
|
||
.is-mobile .markdown-source-view.mod-cm6 .cm-content {
|
||
box-sizing: border-box;
|
||
max-width: 100%;
|
||
padding-inline-start: var(--praxis-mobile-editor-inset);
|
||
}
|
||
|
||
.is-mobile .markdown-source-view.mod-cm6.is-rtl .cm-content {
|
||
padding-inline-start: 0;
|
||
padding-inline-end: var(--praxis-mobile-editor-inset);
|
||
}
|
||
|
||
.is-mobile .markdown-source-view.mod-cm6 .cm-line,
|
||
.is-mobile .markdown-source-view.mod-cm6 .cm-embed-block,
|
||
.is-mobile .markdown-source-view.mod-cm6 .callout,
|
||
.is-mobile .markdown-preview-view .callout {
|
||
box-sizing: border-box;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.is-mobile .markdown-source-view.mod-cm6 .HyperMD-codeblock,
|
||
.is-mobile .markdown-source-view.mod-cm6 .cm-hmd-codeblock,
|
||
.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget,
|
||
.is-mobile .markdown-preview-view pre,
|
||
.is-mobile .markdown-preview-view table {
|
||
max-width: 100%;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.is-mobile .markdown-source-view.mod-cm6 .image-embed,
|
||
.is-mobile .markdown-source-view.mod-cm6 .image-wrapper,
|
||
.is-mobile .markdown-rendered .image-embed,
|
||
.is-mobile .markdown-rendered .image-wrapper,
|
||
.is-mobile .markdown-rendered img:not(.emoji) {
|
||
box-sizing: border-box;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Accessibility: prefers-reduced-motion */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 1ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 1ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|