mirror of
https://github.com/dsvictor/Ink-Paper.git
synced 2026-07-22 05:00:29 +00:00
2256 lines
97 KiB
CSS
2256 lines
97 KiB
CSS
/* @settings
|
|
name: Workspace Layout (Cards & Panels)
|
|
id: workspace-layout-settings
|
|
settings:
|
|
-
|
|
id: layout-select
|
|
title: Select Workspace Layout
|
|
description: Choose between Default (flush) or Card (floating) layout.
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: layout-default
|
|
options:
|
|
- label: Default Layout
|
|
value: layout-default
|
|
- label: Card Layout
|
|
value: layout-card
|
|
-
|
|
id: toggle-left-panel
|
|
title: Enable Custom Left Panel Background
|
|
description: Adjust color and opacity for the left sidebar.
|
|
type: class-toggle
|
|
-
|
|
id: color-left-panel
|
|
title: Left Panel Color
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: hex
|
|
default-light: '#fcfcfc'
|
|
default-dark: '#1e1e1e'
|
|
-
|
|
id: toggle-middle-panel
|
|
title: Enable Custom Middle Panel Background
|
|
description: Adjust color and opacity for the main editor.
|
|
type: class-toggle
|
|
-
|
|
id: color-middle-panel
|
|
title: Middle Panel Color
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: hex
|
|
default-light: '#ffffff'
|
|
default-dark: '#100f0f'
|
|
-
|
|
id: toggle-right-panel
|
|
title: Enable Custom Right Panel Background
|
|
description: Adjust color and opacity for the right sidebar.
|
|
type: class-toggle
|
|
-
|
|
id: color-right-panel
|
|
title: Right Panel Color
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: hex
|
|
default-light: '#fcfcfc'
|
|
default-dark: '#1e1e1e'
|
|
-
|
|
id: toggle-active-tab
|
|
title: Enable Custom Active Tab Background
|
|
type: class-toggle
|
|
-
|
|
id: color-active-tab
|
|
title: Active Tab Color
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: hex
|
|
default-light: '#ffffff'
|
|
default-dark: '#262626'
|
|
-
|
|
id: toggle-vault-profile
|
|
title: Enable Custom Vault Profile Background
|
|
type: class-toggle
|
|
-
|
|
id: color-vault-profile
|
|
title: Vault Profile Color
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: hex
|
|
default-light: '#e3e3e3'
|
|
default-dark: '#363636'
|
|
-
|
|
id: toggle-panel-borders
|
|
title: Enable Panel Borders
|
|
description: Apply custom borders to the Left, Middle, and Right panels.
|
|
type: class-toggle
|
|
-
|
|
id: panel-border-width
|
|
title: Panel Border Thickness
|
|
type: variable-text
|
|
default: 1px
|
|
-
|
|
id: panel-border-color
|
|
title: Panel Border Color
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: hex
|
|
default-light: '#d4d4d4'
|
|
default-dark: '#3f3f3f'
|
|
-
|
|
id: panel-border-style
|
|
title: Panel Border Style
|
|
description: Choose the line style for your custom borders.
|
|
type: variable-select
|
|
default: solid
|
|
options:
|
|
- solid
|
|
- dashed
|
|
- dotted
|
|
-
|
|
id: panel-border-color
|
|
title: Panel Border Color
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: hex
|
|
default-light: '#d4d4d4'
|
|
default-dark: '#3f3f3f'
|
|
-
|
|
id: panel-border-radius
|
|
title: Panel Border Radius
|
|
description: Controls the corner roundness when borders are enabled (e.g., 8px, 12px)
|
|
type: variable-text
|
|
default: 8px
|
|
-
|
|
id: layout-gap-middle
|
|
title: Inner Panel Gap
|
|
description: Spacing BETWEEN the left, middle, and right panels (e.g., 5px, 16px).
|
|
type: variable-text
|
|
default: 5px
|
|
-
|
|
id: layout-gap-right
|
|
title: Right Edge Gap
|
|
description: Spacing on the far RIGHT edge of the window.
|
|
type: variable-text
|
|
default: 5px
|
|
-
|
|
id: layout-gap-bottom
|
|
title: Bottom Edge Gap
|
|
description: Spacing on the far BOTTOM edge of the window.
|
|
type: variable-text
|
|
default: 5px
|
|
-
|
|
id: toggle-card-bg
|
|
title: Enable Custom Card Background
|
|
description: Override the default background color and opacity for the Card Layout.
|
|
type: class-toggle
|
|
-
|
|
id: card-bg-color
|
|
title: Card Background Color
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: hex
|
|
default-light: '#ffffff'
|
|
default-dark: '#1c1b1a'
|
|
*/
|
|
|
|
/* @settings
|
|
name: FlexoPaper Settings
|
|
id: minimal-texture-theme
|
|
settings:
|
|
-
|
|
id: bg-textures-light
|
|
title: Light Mode Background
|
|
type: heading
|
|
collapsed: false
|
|
level: 3
|
|
-
|
|
id: paper-bg-color-opacity-light
|
|
title: Base Background Opacity (Light)
|
|
type: variable-number-slider
|
|
default: 1
|
|
min: 0.0
|
|
max: 1.0
|
|
step: 0.05
|
|
-
|
|
id: textures-light
|
|
title: ""
|
|
description: "<h3 style='text-align: center;'>Texture</h3>"
|
|
type: info-text
|
|
markdown: true
|
|
-
|
|
id: paper-bg-image-light
|
|
title: Texture URL (Light)
|
|
description: 'Ensure you wrap the link in url("...")'
|
|
type: variable-text
|
|
default: 'url("https://www.transparenttextures.com/patterns/cream-paper.png")'
|
|
-
|
|
id: paper-bg-image-opacity-light
|
|
title: Texture Opacity (Light)
|
|
type: variable-number-slider
|
|
default: 1
|
|
min: 0.0
|
|
max: 1.0
|
|
step: 0.05
|
|
-
|
|
id: paper-bg-blend-light
|
|
title: Texture Blend Mode (Light)
|
|
type: variable-select
|
|
default: normal
|
|
options:
|
|
- normal
|
|
- darken
|
|
- multiply
|
|
- color-burn
|
|
- lighten
|
|
- screen
|
|
- color-dodge
|
|
- overlay
|
|
- soft-light
|
|
- hard-light
|
|
- difference
|
|
- exclusion
|
|
- hue
|
|
- saturation
|
|
- color
|
|
- luminosity
|
|
- plus-lighter
|
|
- plus-darker
|
|
-
|
|
id: tint-light
|
|
title: ""
|
|
description: "<h3 style='text-align: center;'>Tint</h3>"
|
|
type: info-text
|
|
markdown: true
|
|
-
|
|
id: paper-tint-color-light
|
|
title: Tint Color (Light)
|
|
type: variable-color
|
|
format: hex
|
|
default: '#FFFCF0'
|
|
-
|
|
id: paper-tint-opacity-light
|
|
title: Tint Opacity (Light)
|
|
type: variable-number-slider
|
|
default: 0
|
|
min: 0.0
|
|
max: 1.0
|
|
step: 0.05
|
|
-
|
|
id: paper-tint-blend-light
|
|
title: Tint Blend Mode (Light)
|
|
type: variable-select
|
|
default: normal
|
|
options:
|
|
- normal
|
|
- darken
|
|
- multiply
|
|
- color-burn
|
|
- lighten
|
|
- screen
|
|
- color-dodge
|
|
- overlay
|
|
- soft-light
|
|
- hard-light
|
|
- difference
|
|
- exclusion
|
|
- hue
|
|
- saturation
|
|
- color
|
|
- luminosity
|
|
- plus-lighter
|
|
- plus-darker
|
|
-
|
|
id: bg-textures-dark
|
|
title: Dark Mode Background
|
|
type: heading
|
|
collapsed: false
|
|
level: 3
|
|
-
|
|
id: paper-bg-color-opacity-dark
|
|
title: Base Background Opacity (Dark)
|
|
type: variable-number-slider
|
|
default: 1
|
|
min: 0.0
|
|
max: 1.0
|
|
step: 0.05
|
|
-
|
|
id: textures-dark
|
|
title: ""
|
|
description: "<h3 style='text-align: center;'>Texture</h3>"
|
|
type: info-text
|
|
markdown: true
|
|
-
|
|
id: paper-bg-image-dark
|
|
title: Texture URL (Dark)
|
|
description: 'Ensure you wrap the link in url("...")'
|
|
type: variable-text
|
|
default: 'url("https://www.transparenttextures.com/patterns/black-paper.png")'
|
|
-
|
|
id: paper-bg-image-opacity-dark
|
|
title: Texture Opacity (Dark)
|
|
type: variable-number-slider
|
|
default: 1
|
|
min: 0.0
|
|
max: 1.0
|
|
step: 0.05
|
|
-
|
|
id: paper-bg-blend-dark
|
|
title: Texture Blend Mode (Dark)
|
|
type: variable-select
|
|
default: normal
|
|
options:
|
|
- normal
|
|
- darken
|
|
- multiply
|
|
- color-burn
|
|
- lighten
|
|
- screen
|
|
- color-dodge
|
|
- overlay
|
|
- soft-light
|
|
- hard-light
|
|
- difference
|
|
- exclusion
|
|
- hue
|
|
- saturation
|
|
- color
|
|
- luminosity
|
|
- plus-lighter
|
|
- plus-darker
|
|
-
|
|
id: tint-dark
|
|
title: ""
|
|
description: "<h3 style='text-align: center;'>Tint</h3>"
|
|
type: info-text
|
|
markdown: true
|
|
-
|
|
id: paper-tint-color-dark
|
|
title: Tint Color (Dark)
|
|
type: variable-color
|
|
format: hex
|
|
default: '#100F0F'
|
|
-
|
|
id: paper-tint-opacity-dark
|
|
title: Tint Opacity (Dark)
|
|
type: variable-number-slider
|
|
default: 0
|
|
min: 0.0
|
|
max: 1.0
|
|
step: 0.05
|
|
-
|
|
id: paper-tint-blend-dark
|
|
title: Tint Blend Mode (Dark)
|
|
type: variable-select
|
|
default: normal
|
|
options:
|
|
- normal
|
|
- darken
|
|
- multiply
|
|
- color-burn
|
|
- lighten
|
|
- screen
|
|
- color-dodge
|
|
- overlay
|
|
- soft-light
|
|
- hard-light
|
|
- difference
|
|
- exclusion
|
|
- hue
|
|
- saturation
|
|
- color
|
|
- luminosity
|
|
- plus-lighter
|
|
- plus-darker
|
|
*/
|
|
|
|
/* ==========================================================
|
|
MINIMAL PAPER THEME - FULL FEATURE EDITION
|
|
Flexoki Palette + Border Component Logic
|
|
========================================================== */
|
|
|
|
/* --- 1. LIGHT MODE COLOR PALETTE --- */
|
|
.theme-light {
|
|
--color-red-rgb: 175, 48, 41;
|
|
--color-orange-rgb: 188, 82, 21;
|
|
--color-yellow-rgb: 173, 131, 1;
|
|
--color-green-rgb: 102, 128, 11;
|
|
--color-cyan-rgb: 36, 131, 123;
|
|
--color-blue-rgb: 32, 94, 166;
|
|
--color-purple-rgb: 94, 64, 157;
|
|
--color-pink-rgb: 160, 47, 111;
|
|
|
|
--color-red: #AF3029;
|
|
--color-orange: #BC5215;
|
|
--color-yellow: #AD8301;
|
|
--color-green: #66800B;
|
|
--color-cyan: #24837B;
|
|
--color-blue: #205EA6;
|
|
--color-purple: #5E409D;
|
|
--color-pink: #A02F6F;
|
|
|
|
--accent-h: 175;
|
|
--accent-s: 57%;
|
|
--accent-l: 33%;
|
|
|
|
--color-base-00: #FFFCF0;
|
|
--color-base-05: #FFFCF0;
|
|
--color-base-10: #F2F0E5;
|
|
--color-base-20: #F2F0E5;
|
|
--color-base-25: #E6E4D9;
|
|
--color-base-30: #E6E4D9;
|
|
--color-base-35: #DAD8CE;
|
|
--color-base-40: #CECDC3;
|
|
--color-base-50: #B7B5AC;
|
|
--color-base-60: #878580;
|
|
--color-base-70: #6F6E69;
|
|
--color-base-100: #100F0F;
|
|
|
|
--text-normal: var(--color-base-100);
|
|
--text-muted: var(--color-base-70);
|
|
--text-faint: var(--color-base-50);
|
|
--icon-color: var(--color-base-70);
|
|
|
|
--background-primary: var(--color-base-00);
|
|
--background-primary-alt: var(--color-base-10);
|
|
--background-secondary: var(--color-base-10);
|
|
--background-secondary-alt: var(--color-base-00);
|
|
--background-tertiary: var(--color-base-40);
|
|
|
|
--background-modifier-hover: rgba(16, 15, 15, 0.07);
|
|
--background-modifier-border: var(--color-base-35);
|
|
--background-modifier-border-hover: var(--color-base-40);
|
|
--background-modifier-border-focus: var(--color-base-50);
|
|
|
|
--radius-s: 6px;
|
|
--divider-color: transparent;
|
|
|
|
--input-shadow: var(--input-shadow-light);
|
|
--input-shadow-light: 0px 4px 8px -4px rgba(0, 0, 0, 0.16), inset 0px -1px 0px rgba(0, 0, 0, 0.04), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 0.75px rgba(255, 255, 255, 0.4), inset 0px -3px 0.75px rgba(0, 0, 0, 0.04);
|
|
|
|
}
|
|
|
|
/* --- 2. DARK MODE COLOR PALETTE --- */
|
|
.theme-dark {
|
|
--color-red-rgb: 209, 77, 65;
|
|
--color-orange-rgb: 218, 112, 44;
|
|
--color-yellow-rgb: 208, 162, 21;
|
|
--color-green-rgb: 135, 154, 57;
|
|
--color-cyan-rgb: 58, 169, 159;
|
|
--color-blue-rgb: 67, 133, 190;
|
|
--color-purple-rgb: 139, 126, 200;
|
|
--color-pink-rgb: 206, 93, 151;
|
|
|
|
--color-red: #D14D41;
|
|
--color-orange: #DA702C;
|
|
--color-yellow: #D0A215;
|
|
--color-green: #879A39;
|
|
--color-cyan: #3AA99F;
|
|
--color-blue: #4385BE;
|
|
--color-purple: #8B7EC8;
|
|
--color-pink: #CE5D97;
|
|
|
|
--accent-h: 175;
|
|
--accent-s: 57%;
|
|
--accent-l: 33%;
|
|
|
|
--color-base-00: #100F0F;
|
|
--color-base-05: #100F0F;
|
|
--color-base-10: #1C1B1A;
|
|
--color-base-20: #1C1B1A;
|
|
--color-base-25: #282726;
|
|
--color-base-30: #282726;
|
|
--color-base-35: #343331;
|
|
--color-base-40: #403E3C;
|
|
--color-base-50: #575653;
|
|
--color-base-60: #6F6E69;
|
|
--color-base-70: #878580;
|
|
--color-base-100: #CECDC3;
|
|
|
|
--text-normal: var(--color-base-100);
|
|
--text-muted: var(--color-base-70);
|
|
--text-faint: var(--color-base-50);
|
|
--icon-color: var(--color-base-70);
|
|
|
|
--background-primary: var(--color-base-00);
|
|
--background-primary-alt: var(--color-base-10);
|
|
--background-secondary: var(--color-base-10);
|
|
--background-secondary-alt: var(--color-base-00);
|
|
--background-tertiary: var(--color-base-40);
|
|
|
|
--background-modifier-hover: rgba(206, 205, 195, 0.08);
|
|
--background-modifier-border: var(--color-base-35);
|
|
--background-modifier-border-hover: var(--color-base-40);
|
|
--background-modifier-border-focus: var(--color-base-50);
|
|
|
|
--radius-s: 6px;
|
|
--divider-color: transparent;
|
|
|
|
--input-shadow: var(--input-shadow-dark);
|
|
--input-shadow-dark: 0px 4px 8px -4px rgba(0, 0, 0, 0.32), 0px 1px 2px rgba(0, 0, 0, 0.32), 0px 0px 0px 1px rgba(0, 0, 0, 0.32), 0px 0px 1px 1px rgba(0, 0, 0, 0.12), inset 0px 1px 0.75px rgba(255, 255, 255, 0.24), inset 0px -2px 0.75px rgba(0, 0, 0, 0.16);
|
|
|
|
|
|
}
|
|
|
|
/* --- Some Global Color --- */
|
|
body {
|
|
--card-border-color: hsla(var(--interactive-accent-hsl), 0.55);
|
|
}
|
|
|
|
|
|
|
|
/* --- 3. GLOBAL BACKGROUND TEXTURES & COLORS --- */
|
|
body {
|
|
--paper-bg-image-light: url("https://www.transparenttextures.com/patterns/cream-paper.png");
|
|
--paper-bg-image-opacity-light: 1;
|
|
--paper-bg-blend-light: normal;
|
|
--paper-tint-opacity-light: 0;
|
|
--paper-tint-blend-light: normal;
|
|
|
|
--paper-bg-image-dark: url("https://www.transparenttextures.com/patterns/black-paper.png");
|
|
--paper-bg-image-opacity-dark: 1;
|
|
--paper-bg-blend-dark: normal;
|
|
--paper-tint-opacity-dark: 0;
|
|
--paper-tint-blend-dark: normal;
|
|
}
|
|
|
|
/* Base Background Logic using color-mix */
|
|
body.theme-light {
|
|
background-color: color-mix(in srgb, #FFFFFF calc(var(--paper-bg-color-opacity-light, 1) * 100%), transparent) !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
body.theme-dark {
|
|
background-color: color-mix(in srgb, #000000 calc(var(--paper-bg-color-opacity-dark, 1) * 100%), transparent) !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
/* Texture & Tint Layer Positioning */
|
|
body.theme-light::before, body.theme-dark::before,
|
|
body.theme-light::after, body.theme-dark::after {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Texture Layer */
|
|
body.theme-light::before {
|
|
background-image: var(--paper-bg-image-light);
|
|
mix-blend-mode: var(--paper-bg-blend-light);
|
|
opacity: var(--paper-bg-image-opacity-light);
|
|
}
|
|
|
|
body.theme-dark::before {
|
|
background-image: var(--paper-bg-image-dark);
|
|
mix-blend-mode: var(--paper-bg-blend-dark);
|
|
opacity: var(--paper-bg-image-opacity-dark);
|
|
}
|
|
|
|
/* Tint Layer Logic using color-mix */
|
|
body.theme-light::after {
|
|
background-color: color-mix(in srgb, var(--paper-tint-color-light, #FFFFFF) calc(var(--paper-tint-opacity-light, 0) * 100%), transparent);
|
|
mix-blend-mode: var(--paper-tint-blend-light);
|
|
}
|
|
|
|
body.theme-dark::after {
|
|
background-color: color-mix(in srgb, var(--paper-tint-color-dark, #000000) calc(var(--paper-tint-opacity-dark, 0) * 100%), transparent);
|
|
mix-blend-mode: var(--paper-tint-blend-dark);
|
|
}
|
|
|
|
/* --- 4. TRANSPARENT WORKSPACE PANES & APP AREAS --- */
|
|
/* Strips default opaque backgrounds from the entire app layout so the texture shows through */
|
|
|
|
body .app-container,
|
|
body .workspace,
|
|
body .workspace-split,
|
|
body .workspace-tab-container,
|
|
body .workspace-leaf,
|
|
body .workspace-leaf-content,
|
|
body .view-content,
|
|
body .view-header,
|
|
body .workspace-tab-header-container,
|
|
body .workspace-tabs,
|
|
body .workspace-ribbon,
|
|
body .titlebar,
|
|
body .titlebar-inner,
|
|
body .titlebar-button-container,
|
|
body .sidebar-toggle-button,
|
|
body .workspace-tabs.mod-top-right-space {
|
|
background-color: transparent !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Active tab transparency logic */
|
|
body .workspace-tabs .workspace-tab-header.is-active,
|
|
body:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active,
|
|
body .workspace-tabs .workspace-tab-header.is-active .workspace-tab-header-inner {
|
|
background-color: transparent !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border-radius: 6px !important;
|
|
position: relative;
|
|
}
|
|
|
|
/* Active tab underline */
|
|
body .workspace-tabs .workspace-tab-header.is-active .workspace-tab-header-inner::before {
|
|
content: "" !important;
|
|
width: calc(100% - 14px) !important;
|
|
height: 2px !important;
|
|
background-color: var(--interactive-accent) !important;
|
|
position: absolute !important;
|
|
top: auto !important;
|
|
bottom: 3px !important;
|
|
border-radius: 2px !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
/* Clean up borders and split lines */
|
|
body .workspace-leaf-resize-handle {
|
|
border-color: var(--background-modifier-border) !important;
|
|
border-width: 1px !important;
|
|
}
|
|
|
|
|
|
body .workspace-tab-header::before,
|
|
body .workspace-tab-header::after,
|
|
body .workspace-tab-header.is-active::before,
|
|
body .workspace-tab-header.is-active::after {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Clean up Left Ribbon lines */
|
|
body .workspace-ribbon.mod-left {
|
|
border-right: none !important;
|
|
}
|
|
body .workspace-ribbon.mod-left::before,
|
|
body .workspace-ribbon.mod-left::after {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Vault profile & Settings lines */
|
|
body .workspace-sidedock-vault-profile,
|
|
body .workspace-drawer-vault-profile,
|
|
body .side-dock-settings {
|
|
border-top: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/*view-header*/
|
|
|
|
body:not(.is-mobile) .view-header {
|
|
padding: 0 6px;
|
|
border: 0;
|
|
}
|
|
|
|
body:not(.is-mobile) .view-header>* {
|
|
padding-top: var(--size-2-3);
|
|
padding-bottom: var(--size-2-1);
|
|
--icon-size: var(--icon-m);
|
|
--icon-stroke: var(--icon-m-stroke-width);
|
|
}
|
|
|
|
|
|
|
|
/* vault profile */
|
|
|
|
body:not(.is-mobile) .workspace-split.mod-left-split {
|
|
position: relative;
|
|
}
|
|
|
|
body:not(.is-mobile) .workspace-split.mod-left-split .workspace-tabs:last-of-type .workspace-tab-container {
|
|
padding-bottom: 44px;
|
|
}
|
|
|
|
body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
|
|
padding: 6px;
|
|
background-color: transparent;
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
height: 44px;
|
|
}
|
|
|
|
body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher {
|
|
height: 32px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions {
|
|
gap: var(--size-2-1);
|
|
}
|
|
|
|
/* file active states */
|
|
.theme-light {
|
|
--border-radius-activated-file-light: var(--radius-s);
|
|
--color-activated-file-light: var(--nav-item-color-active);
|
|
--background-activated-file-light: var(--nav-item-background-active);
|
|
--shadow-activated-file-light: none;
|
|
}
|
|
|
|
.theme-dark {
|
|
--border-radius-activated-file-dark: var(--radius-s);
|
|
--color-activated-file-dark: var(--nav-item-color-active);
|
|
--background-activated-file-dark: var(--nav-item-background-active);
|
|
--shadow-activated-file-dark: none;
|
|
}
|
|
|
|
.activated-file-default-light.theme-light {
|
|
--border-radius-activated-file-light: var(--radius-s) !important;
|
|
--color-activated-file-light: var(--nav-item-color-active) !important;
|
|
--background-activated-file-light: var(--nav-item-background-active) !important;
|
|
--shadow-activated-file-light: none !important;
|
|
}
|
|
|
|
.activated-file-default-dark.theme-dark {
|
|
--border-radius-activated-file-dark: var(--radius-s) !important;
|
|
--color-activated-file-dark: var(--nav-item-color-active) !important;
|
|
--background-activated-file-dark: var(--nav-item-background-active) !important;
|
|
--shadow-activated-file-dark: none !important;
|
|
}
|
|
|
|
.activated-file-accent-light.theme-light {
|
|
--border-radius-activated-file-light: var(--radius-s) !important;
|
|
--color-activated-file-light: var(--text-on-accent) !important;
|
|
--background-activated-file-light: var(--color-accent) !important;
|
|
--shadow-activated-file-light: none !important;
|
|
}
|
|
|
|
.activated-file-accent-dark.theme-dark {
|
|
--border-radius-activated-file-dark: var(--radius-s) !important;
|
|
--color-activated-file-dark: var(--text-on-accent) !important;
|
|
--background-activated-file-dark: var(--color-accent) !important;
|
|
--shadow-activated-file-dark: none !important;
|
|
}
|
|
|
|
.activated-file-accent-light.theme-light .nav-file-title.is-active .nav-file-tag,
|
|
.activated-file-accent-dark.theme-dark .nav-file-title.is-active .nav-file-tag,
|
|
.activated-file-accent-light.theme-light .tree-item-self.is-active svg,
|
|
.activated-file-accent-dark.theme-dark .tree-item-self.is-active svg {
|
|
color: var(--text-on-accent) !important;
|
|
}
|
|
|
|
.activated-file-tab-style-light.theme-light {
|
|
--border-radius-activated-file-light: var(--border-radius-activated-tab-header-light) !important;
|
|
--color-activated-file-light: var(--color-activated-tab-header-light) !important;
|
|
--background-activated-file-light: var(--background-activated-tab-header-light) !important;
|
|
--shadow-activated-file-light: var(--shadow-activated-tab-header-light) !important;
|
|
}
|
|
|
|
.activated-file-tab-style-dark.theme-dark {
|
|
--border-radius-activated-file-dark: var(--border-radius-activated-tab-header-dark) !important;
|
|
--color-activated-file-dark: var(--color-activated-tab-header-dark) !important;
|
|
--background-activated-file-dark: var(--background-activated-tab-header-dark) !important;
|
|
--shadow-activated-file-dark: var(--shadow-activated-tab-header-dark) !important;
|
|
}
|
|
|
|
.activated-file-tab-style-light.theme-light .nav-file-title.is-active .nav-file-tag,
|
|
.activated-file-tab-style-light.theme-light .tree-item-self.is-active svg {
|
|
color: var(--color-activated-file-light) !important;
|
|
}
|
|
|
|
.activated-file-tab-style-dark.theme-dark .nav-file-title.is-active .nav-file-tag,
|
|
.activated-file-tab-style-dark.theme-dark .tree-item-self.is-active svg {
|
|
color: var(--color-activated-file-dark) !important;
|
|
}
|
|
|
|
.activated-file-customize-light {
|
|
--border-radius-activated-file-light: 4px;
|
|
--color-activated-file-light: var(--nav-item-color-active);
|
|
--background-activated-file-light: rgba(0, 0, 0, 0.05);
|
|
--shadow-activated-file-light: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.activated-file-customize-dark {
|
|
--border-radius-activated-file-dark: 4px;
|
|
--color-activated-file-light: var(--nav-item-color-active);
|
|
--background-activated-file-dark: rgba(255, 255, 255, 0.075);
|
|
--shadow-activated-file-dark: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.activated-file-customize-light.theme-light .nav-file-title.is-active .nav-file-tag,
|
|
.activated-file-customize-light.theme-light .tree-item-self.is-active svg {
|
|
color: var(--color-activated-file-light) !important;
|
|
}
|
|
|
|
.activated-file-customize-dark.theme-dark .nav-file-title.is-active .nav-file-tag,
|
|
.activated-file-customize-dark.theme-dark .tree-item-self.is-active svg {
|
|
color: var(--color-activated-file-dark) !important;
|
|
}
|
|
|
|
.theme-light:not(.is-grabbing) .workspace-leaf-content[data-type="bookmarks"] .tree-item-self.is-active:hover,
|
|
.theme-light .workspace-leaf-content[data-type="bookmarks"] .tree-item-self.is-active,
|
|
.theme-light .mk-tree-item.nav-folder-title.is-active.is-selected,
|
|
.theme-light .mk-tree-item.nav-file-title.is-active.is-selected,
|
|
.theme-light:not(.is-grabbing) .nav-file-title.is-active:hover,
|
|
.theme-light:not(.is-grabbing) .nav-folder-title.is-active:hover,
|
|
.theme-light .nav-file-title.is-active:not(.is-being-dragged),
|
|
.theme-light .nav-folder-title.is-active:not(.is-being-dragged) {
|
|
--nav-item-color-active: var(--color-activated-file-light);
|
|
--nav-item-color-selected: var(--color-activated-file-light);
|
|
border-radius: var(--border-radius-activated-file-light);
|
|
background: var(--background-activated-file-light) !important;
|
|
box-shadow: var(--shadow-activated-file-light);
|
|
}
|
|
|
|
.theme-dark:not(.is-grabbing) .workspace-leaf-content[data-type="bookmarks"] .tree-item-self.is-active:hover,
|
|
.theme-dark .workspace-leaf-content[data-type="bookmarks"] .tree-item-self.is-active,
|
|
.theme-dark .mk-tree-item.nav-folder-title.is-active.is-selected,
|
|
.theme-dark .mk-tree-item.nav-file-title.is-active.is-selected,
|
|
.theme-dark:not(.is-grabbing) .nav-file-title.is-active:hover,
|
|
.theme-dark:not(.is-grabbing) .nav-folder-title.is-active:hover,
|
|
.theme-dark .nav-file-title.is-active:not(.is-being-dragged),
|
|
.theme-dark .nav-folder-title.is-active:not(.is-being-dragged) {
|
|
--nav-item-color-active: var(--color-activated-file-dark);
|
|
--nav-item-color-selected: var(--color-activated-file-dark);
|
|
border-radius: var(--border-radius-activated-file-dark);
|
|
background: var(--background-activated-file-dark) !important;
|
|
box-shadow: var(--shadow-activated-file-dark);
|
|
}
|
|
|
|
|
|
box-shadow: var(--shadow-activated-file-dark);
|
|
}
|
|
|
|
|
|
/* file layout & style */
|
|
.workspace-leaf-content .tree-item-self {
|
|
margin-bottom: var(--size-2-2);
|
|
position: relative;
|
|
border-radius: var(--border-radius-activated-file-light);
|
|
align-items: center;
|
|
}
|
|
|
|
.theme-dark .workspace-leaf-content .tree-item-self {
|
|
border-radius: var(--border-radius-activated-file-dark);
|
|
}
|
|
|
|
.workspace-leaf-content .tree-item-self :is(.tree-item-flair, .tree-item-inner) {
|
|
line-height: 20px;
|
|
}
|
|
|
|
/*file tag*/
|
|
.nav-file-tag {
|
|
background-color: transparent;
|
|
color: var(--text-faint);
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/*other pane*/
|
|
.workspace-leaf-content .nav-header~.node-insert-event {
|
|
padding-top: var(--size-4-1);
|
|
}
|
|
|
|
/*icons in pane*/
|
|
.tree-item-self .tree-item-icon {
|
|
height: var(--size-4-4);
|
|
--icon-color: currentColor;
|
|
}
|
|
|
|
.tree-item-self .tree-item-icon .svg-icon:not(.right-triangle) {
|
|
--icon-size: var(--icon-s);
|
|
--icon-stroke: var(--icon-s-stroke-width);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="tag"] .tree-item:not(:hover) .tree-item-icon.collapse-icon svg.svg-icon,
|
|
.workspace-leaf-content:is([data-type="bookmarks"], [data-type="file-explorer"]) .tree-item-icon.collapse-icon svg.svg-icon {
|
|
color: transparent;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="tag"] .tree-item:not(:hover) .tree-item-icon.collapse-icon,
|
|
.workspace-leaf-content:is([data-type="bookmarks"], [data-type="file-explorer"]) .tree-item-icon.collapse-icon {
|
|
background-color: currentColor;
|
|
opacity: var(--icon-opacity);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="tag"] .tree-item-self:not(:has(>.tree-item-icon.collapse-icon)):before,
|
|
.workspace-leaf-content[data-type="file-explorer"] :is(.nav-file-title, .nav-folder.mod-root>.nav-folder-title)::before {
|
|
content: " ";
|
|
position: absolute;
|
|
margin-left: calc(-1 * var(--size-4-5));
|
|
width: var(--size-4-4);
|
|
height: var(--size-4-4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: var(--icon-opacity);
|
|
background-color: currentColor;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-folder.mod-root>.nav-folder-title::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M14 12.8V3.2c0-.884-.264-1.2-1-1.2H3c-.736 0-1 .316-1 1.2v9.6c0 .884.264 1.2 1 1.2h10c.736 0 1-.316 1-1.2Z'/%3e%3cpath d='M9.978 7.04a2 2 0 1 1-3.956.587 2 2 0 0 1 3.956-.587ZM8 9.333v2m6-6.666h1m-1 6h1'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .tree-item-icon.collapse-icon,
|
|
.workspace-leaf-content[data-type="bookmarks"] .tree-item-icon.collapse-icon {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M4 9.333 4.967 7.4a1.333 1.333 0 0 1 1.193-.733h7.173m0 0a1.333 1.333 0 0 1 1.294 1.666l-1.034 4a1.333 1.333 0 0 1-1.293 1H2.667A1.333 1.333 0 0 1 1.333 12V3.333C1.333 2.6 1.933 2 2.667 2h2.62a1.333 1.333 0 0 1 1.106.6l.547.8a1.333 1.333 0 0 0 1.107.6H12a1.333 1.333 0 0 1 1.333 1.333v1.334Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .is-collapsed .tree-item-icon.collapse-icon,
|
|
.workspace-leaf-content[data-type="bookmarks"] .is-collapsed .tree-item-icon.collapse-icon {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M2.667 13.333h10.666A1.333 1.333 0 0 0 14.667 12V5.333A1.333 1.333 0 0 0 13.333 4H8.047a1.333 1.333 0 0 1-1.107-.6l-.547-.8A1.333 1.333 0 0 0 5.287 2h-2.62a1.333 1.333 0 0 0-1.334 1.333V12c0 .733.6 1.333 1.334 1.333Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M9.667 1.333H4a1.333 1.333 0 0 0-1.333 1.334v10.666A1.333 1.333 0 0 0 4 14.667h8a1.333 1.333 0 0 0 1.333-1.334V5L9.667 1.333Z'/%3e%3cpath d='M9.333 1.333v4h4'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".canvas"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M6 2H2.667A.667.667 0 0 0 2 2.667v4.666c0 .369.298.667.667.667H6a.667.667 0 0 0 .667-.667V2.667A.667.667 0 0 0 6 2Zm7.333 0H10a.667.667 0 0 0-.667.667v2c0 .368.299.667.667.667h3.333A.667.667 0 0 0 14 4.667v-2A.667.667 0 0 0 13.333 2Zm0 6H10a.667.667 0 0 0-.667.667v4.666c0 .368.299.667.667.667h3.333a.667.667 0 0 0 .667-.667V8.667A.667.667 0 0 0 13.333 8ZM6 10.667H2.667a.667.667 0 0 0-.667.666v2c0 .368.298.667.667.667H6a.667.667 0 0 0 .667-.667v-2A.667.667 0 0 0 6 10.667Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".base"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M6 2H2.667A.667.667 0 0 0 2 2.667V6c0 .368.298.667.667.667H6A.667.667 0 0 0 6.667 6V2.667A.667.667 0 0 0 6 2Zm0 7.333H2.667A.667.667 0 0 0 2 10v3.333c0 .368.298.667.667.667H6a.667.667 0 0 0 .667-.667V10A.667.667 0 0 0 6 9.333Zm3.333-6.666H14M9.333 6H14m-4.667 4H14m-4.667 3.333H14'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .is-unsupported.nav-file-title::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M9.667 1.333H4a1.333 1.333 0 0 0-1.333 1.334v10.666A1.333 1.333 0 0 0 4 14.667h8a1.333 1.333 0 0 0 1.333-1.334V5L9.667 1.333Z'/%3e%3cpath d='M6.667 6.867c.133-.267.333-.534.6-.667A1.4 1.4 0 0 1 9 6.467c.2.266.333.533.333.866C9.333 8.2 8 8.667 8 8.667m0 2.666h.007'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .is-unsupported.nav-file-title:is([data-path$=".zip"], [data-path$=".7z"])::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M2.667 14.667v-12c0-.334.133-.667.4-.934.266-.266.6-.4.933-.4h5.667L13.333 5v8.333c0 .334-.133.667-.4.934-.266.266-.6.4-.933.4h-1.333'/%3e%3cpath d='M9.333 1.333v4h4m-6.666 9.334a1.333 1.333 0 1 0 0-2.667 1.333 1.333 0 0 0 0 2.667Zm0-10V4m0 4v-.667m0 4.667v-1.333'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".webm"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M2.667 14.667H12a1.333 1.333 0 0 0 1.333-1.334V5L9.667 1.333H4a1.333 1.333 0 0 0-1.333 1.334v2'/%3e%3cpath d='M9.333 1.333v4h4M4.667 6.667 2.667 8H1.333v2.667h1.334l2 1.333V6.667Zm2.666.666c.427.534.667 1.247.667 2 0 .754-.24 1.467-.667 2'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title:is([data-path$=".svg"], [data-path$=".bmp"], [data-path$=".jpeg"], [data-path$=".jpg"], [data-path$=".png"], [data-path$=".gif"])::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z'/%3e%3cpath d='M6 7.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666ZM14 10l-2.057-2.057a1.333 1.333 0 0 0-1.886 0L4 14'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".pdf"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M9.667 1.333H4a1.333 1.333 0 0 0-1.333 1.334v10.666A1.333 1.333 0 0 0 4 14.667h8a1.333 1.333 0 0 0 1.333-1.334V5L9.667 1.333Z'/%3e%3cpath d='M9.333 1.333v4h4m-2.666 3.334H5.333m5.334 2.666H5.333M6.667 6H5.333'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path$=".excalidraw.md"]::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' clip-path='url(%23a)'%3e%3cpath d='M8 12.667 12.667 8l2 2L10 14.667l-2-2Z'/%3e%3cpath d='m12 8.667-1-5-9.667-2.334L3.667 11l5 1L12 8.667ZM1.333 1.333l5.058 5.058'/%3e%3cpath d='M7.333 8.667a1.333 1.333 0 1 0 0-2.667 1.333 1.333 0 0 0 0 2.667Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="tag"] .tree-item:not(:hover) .tree-item-icon.collapse-icon {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' clip-path='url(%23a)'%3e%3cpath d='M8.781 1.333c.354 0 .693.14.943.391l4.473 4.473a1.6 1.6 0 0 1 0 2.272l-3.061 3.062a1.6 1.6 0 0 1-2.272 0L4.391 7.057A1.329 1.329 0 0 1 4 6.115V2a.667.667 0 0 1 .667-.667H8.78ZM1.333 4.667V8.78c0 .354.14.693.391.943l4.473 4.473a1.6 1.6 0 0 0 2.128.129'/%3e%3cpath d='M7 4.667A.333.333 0 1 0 7 4a.333.333 0 0 0 0 .667Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="tag"] .tree-item-self:not(:has(>.tree-item-icon.collapse-icon))::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg clip-path='url(%23a)'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M8 1.333H1.333V8l6.194 6.193a1.617 1.617 0 0 0 2.28 0l4.386-4.386a1.617 1.617 0 0 0 0-2.28L8 1.333ZM4.667 4.667h.006'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="bookmarks"] svg.lucide-folder {
|
|
background-color: currentColor;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333'%3e%3cpath d='M1.333 6V3.333C1.333 2.6 1.933 2 2.667 2h2.62a1.333 1.333 0 0 1 1.106.6l.547.8a1.333 1.333 0 0 0 1.107.6h5.286a1.333 1.333 0 0 1 1.334 1.333V12a1.333 1.333 0 0 1-1.334 1.333h-12'/%3e%3cpath d='m5.333 10.667 2-2-2-2'/%3e%3cpath d='M1.333 10.667V10a1.333 1.333 0 0 1 1.334-1.333h4'/%3e%3c/g%3e%3c/svg%3e");
|
|
}
|
|
|
|
|
|
/*====== setting modal ======*/
|
|
|
|
body {
|
|
--modal-border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
.modal-sidebar {
|
|
--background-modifier-form-field: transparent;
|
|
}
|
|
|
|
.settings-search-container.vertical-tab-header-group {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
body:not(.is-phone) .vertical-tab-header-group .vertical-tab-header-group-title {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
body:not(.is-phone) .vertical-tab-header-group:nth-last-of-type(3) .vertical-tab-header-group-title::before {
|
|
content: " ";
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: currentColor;
|
|
margin-right: 8px;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='black' d='m14.476 6.987-1.49-.445a5.177 5.177 0 0 0-.422-1.035l.73-1.365a.27.27 0 0 0-.05-.32l-1.062-1.066a.271.271 0 0 0-.32-.05l-1.355.725a5.165 5.165 0 0 0-1.05-.444l-.444-1.471a.271.271 0 0 0-.262-.183H7.25a.271.271 0 0 0-.258.191l-.444 1.467a5.169 5.169 0 0 0-1.058.445l-1.333-.72a.271.271 0 0 0-.32.048l-1.08 1.054a.271.271 0 0 0-.05.32l.72 1.333a5.169 5.169 0 0 0-.444 1.053l-1.47.445a.271.271 0 0 0-.192.258v1.502a.271.271 0 0 0 .191.258l1.48.444c.11.36.26.708.445 1.036l-.73 1.395a.271.271 0 0 0 .05.32l1.062 1.062a.271.271 0 0 0 .32.05l1.373-.734a5.25 5.25 0 0 0 1.022.418l.445 1.498a.27.27 0 0 0 .258.19h1.502a.271.271 0 0 0 .258-.19l.444-1.503a5.17 5.17 0 0 0 1.013-.417l1.383.737a.27.27 0 0 0 .32-.049l1.062-1.062a.27.27 0 0 0 .049-.32l-.738-1.378a5.17 5.17 0 0 0 .422-1.017l1.498-.445a.271.271 0 0 0 .191-.258V7.25a.271.271 0 0 0-.164-.262ZM8 10.444a2.444 2.444 0 1 1 0-4.888 2.444 2.444 0 0 1 0 4.888Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
body:not(.is-phone) .vertical-tab-header-group:nth-last-of-type(2) .vertical-tab-header-group-title::before {
|
|
content: " ";
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: currentColor;
|
|
margin-right: 8px;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='black' d='M13.249 7.111h-.36V3.924A.889.889 0 0 0 12 3.036H9.333A2.284 2.284 0 0 0 7.338.889a2.222 2.222 0 0 0-2.45 2.147h-3.11a.889.889 0 0 0-.89.888v3.632h1.25A1.391 1.391 0 0 1 3.556 8.75a1.333 1.333 0 0 1-.347 1.027 1.334 1.334 0 0 1-.987.444H.89v3.925a.889.889 0 0 0 .889.889H12a.889.889 0 0 0 .889-.89v-2.59h.444a2.223 2.223 0 0 0 2.223-2.45 2.29 2.29 0 0 0-2.307-1.995Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
body:not(.is-phone) .vertical-tab-header-group:nth-last-of-type(1) .vertical-tab-header-group-title::before {
|
|
content: " ";
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: currentColor;
|
|
margin-right: 8px;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg fill='black' clip-path='url(%23a)'%3e%3cpath d='M13.249 7.111h-.36v-.267H9.88a1.636 1.636 0 0 1-1.436-2.448l.89-1.467A2.276 2.276 0 0 0 7.337.889a2.222 2.222 0 0 0-2.45 2.147h-3.11a.889.889 0 0 0-.89.888v3.632h1.25A1.391 1.391 0 0 1 3.556 8.75a1.333 1.333 0 0 1-.347 1.027 1.334 1.334 0 0 1-.987.444H.89v3.925a.889.889 0 0 0 .889.889H12a.889.889 0 0 0 .889-.89v-2.59h.444a2.223 2.223 0 0 0 2.223-2.45 2.29 2.29 0 0 0-2.307-1.995Z'/%3e%3cpath d='M11.933.507 9.391 4.889a.569.569 0 0 0 .489.889h5.089a.569.569 0 0 0 .489-.89L12.916.508a.57.57 0 0 0-.983 0Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
body:not(.is-phone) .horizontal-tab-nav-item.is-active,
|
|
body:not(.is-phone) .vertical-tab-nav-item.is-active {
|
|
color: var(--nav-item-color-active);
|
|
background-color: var(--nav-item-background-active);
|
|
}
|
|
|
|
.theme-dark .community-item,
|
|
.theme-dark .setting-hotkey {
|
|
box-shadow: inset 0 1px 0 0 var(--background-modifier-border-focus);
|
|
}
|
|
|
|
/* scrollbar */
|
|
body {
|
|
/* Scrollbars */
|
|
--scrollbar-bg: rgba(var(--mono-rgb-100), 0);
|
|
--scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1);
|
|
--scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.15);
|
|
}
|
|
|
|
|
|
/* Keep the 14px physical width so your mouse can still easily grab it */
|
|
::-webkit-scrollbar {
|
|
width: 14px !important;
|
|
height: 14px !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* 1. Default State: Invisible with a heavier mask */
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: transparent !important;
|
|
border-radius: 99px !important;
|
|
background-clip: padding-box !important;
|
|
/* A 5px mask leaves only a 4px sleek visible line in the center */
|
|
border: 5px solid transparent !important;
|
|
}
|
|
|
|
/* 2. Show the thin line when hovering anywhere in the pane */
|
|
.workspace-leaf:hover ::-webkit-scrollbar-thumb,
|
|
.workspace-drawer:hover ::-webkit-scrollbar-thumb,
|
|
.modal:hover ::-webkit-scrollbar-thumb,
|
|
.menu:hover ::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb-bg) !important;
|
|
}
|
|
|
|
/* 3. Direct Hover: Thicken slightly when grabbed */
|
|
::-webkit-scrollbar-thumb:hover,
|
|
::-webkit-scrollbar-thumb:active {
|
|
background-color: var(--scrollbar-active-thumb-bg) !important;
|
|
/* Shrinking the mask to 4px makes the visible bar 6px thick */
|
|
border-width: 4px !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
|
|
/* ====== TABLE ====== */
|
|
|
|
body {
|
|
--table-header-background-light: var(--background-alt-light);
|
|
--table-header-background-dark: var(--background-alt-dark);
|
|
--table-radius: var(--radius-s);
|
|
}
|
|
|
|
/* Table width — same as note width */
|
|
.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper,
|
|
:is(.markdown-rendered, .markdown-source-view.mod-cm6.is-live-preview) table {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Header background */
|
|
.theme-light :is(.markdown-rendered, .cm-table-widget) thead tr {
|
|
background: var(--table-header-background-light);
|
|
}
|
|
|
|
.theme-dark :is(.markdown-rendered, .cm-table-widget) thead tr {
|
|
background: var(--table-header-background-dark);
|
|
}
|
|
|
|
/* Table + rounded corners */
|
|
:is(.markdown-rendered, .cm-table-widget) table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border-radius: var(--table-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
:is(.markdown-rendered, .cm-table-widget) {
|
|
& th:first-child { border-top-left-radius: var(--table-radius); }
|
|
& th:last-child { border-top-right-radius: var(--table-radius); }
|
|
& tr:last-child td:first-child { border-bottom-left-radius: var(--table-radius); }
|
|
& tr:last-child td:last-child { border-bottom-right-radius: var(--table-radius); }
|
|
}
|
|
|
|
/* ====== tag ====== */
|
|
body {
|
|
/* Tags */
|
|
--tag-size: var(--font-smaller);
|
|
--tag-color: var(--text-accent);
|
|
--tag-color-hover: var(--text-accent);
|
|
--tag-decoration: none;
|
|
--tag-decoration-hover: none;
|
|
--tag-background: hsla(var(--interactive-accent-hsl), 0.1);
|
|
--tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2);
|
|
--tag-border-color: hsla(var(--interactive-accent-hsl), 0.15);
|
|
--tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15);
|
|
--tag-border-width: 1px;
|
|
--tag-padding-x: 0.65em;
|
|
--tag-padding-y: 0.25em;
|
|
--tag-radius: 2em;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
|
|
.cm-hashtag-end:hover,
|
|
.cm-hashtag-begin:has(+.cm-hashtag-end:hover),
|
|
.cm-hashtag-begin:hover,
|
|
.cm-hashtag-begin:hover+.cm-hashtag-end {
|
|
background-color: var(--tag-background-hover);
|
|
border-color: var(--tag-border-color-hover);
|
|
color: var(--tag-color-hover);
|
|
text-decoration: var(--tag-decoration-hover);
|
|
}
|
|
}
|
|
|
|
/* ====== highlight ====== */
|
|
/* Reading view */
|
|
.markdown-rendered mark {
|
|
border-radius: 4px;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
/* Live Preview / Source mode */
|
|
.cm-highlight {
|
|
border-radius: 4px;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
|
|
/* ====== link ====== */
|
|
body {
|
|
/* Links */
|
|
--link-external-color: var(--color-blue);
|
|
--link-external-color-hover: var(--color-blue);
|
|
}
|
|
|
|
.cm-s-obsidian span:is(.cm-link, .cm-url) a {
|
|
color: var(--link-external-color);
|
|
}
|
|
|
|
a:not(.tag, .raindrop-tag, .clickable-icon, :has(img:not(.link-favicon))):hover,
|
|
.cm-s-obsidian .cm-line:not(.cm-active) span.cm-hmd-internal-link:hover,
|
|
.external-link:not(:has(img:not(.link-favicon))):hover,
|
|
.cm-s-obsidian .cm-line:not(.cm-active) span:is(.cm-link, .cm-url):hover {
|
|
border-radius: var(--radius-s);
|
|
background-color: var(--background-modifier-hover);
|
|
transition: background-color var(--anim-duration-fast) var(--anim-motion-smooth);
|
|
}
|
|
|
|
|
|
/* ====== hover indicator ====== */
|
|
|
|
/*general*/
|
|
|
|
.line-hover-indicator .workspace-leaf-content[data-type="markdown"] .markdown-source-view .cm-content>div::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -20px;
|
|
top: 3px;
|
|
width: 3px;
|
|
height: 0;
|
|
border-radius: 10px;
|
|
background: var(--hover-indicator-color);
|
|
--hover-indicator-color: var(--text-faint);
|
|
opacity: 1;
|
|
}
|
|
|
|
.line-hover-indicator .workspace-leaf-content[data-type="markdown"] .markdown-source-view .cm-content>.HyperMD-quote::after {
|
|
left: calc(-20px - var(--blockquote-padding));
|
|
}
|
|
|
|
.line-hover-indicator .workspace-leaf-content[data-type="markdown"] .markdown-source-view .cm-content>div:hover::after {
|
|
height: calc(100% - 6px);
|
|
}
|
|
|
|
/* num */
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line:after,
|
|
.line-hover-indicator.focus-indicator-codeblock-line-number .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-codeblock:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end)::after {
|
|
background: unset !important;
|
|
opacity: 0 !important;
|
|
position: absolute !important;
|
|
left: -20px !important;
|
|
top: 0px !important;
|
|
height: 100% !important;
|
|
width: 3px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
color: var(--hover-indicator-color);
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line:hover::after,
|
|
.line-hover-indicator.focus-indicator-codeblock-line-number .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-codeblock:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end):hover:after {
|
|
opacity: 1 !important;
|
|
--hover-indicator-color: var(--text-faint);
|
|
}
|
|
|
|
/* code */
|
|
.line-hover-indicator.focus-indicator-codeblock-line-number .workspace-leaf-content[data-type="markdown"] .cm-contentContainer,
|
|
.line-hover-indicator.focus-indicator-codeblock-line-number .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-codeblock-end {
|
|
counter-reset: code-line;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-codeblock-line-number .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-codeblock:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end)::after {
|
|
counter-increment: code-line;
|
|
content: counter(code-line) !important;
|
|
}
|
|
|
|
/* list */
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line:after {
|
|
content: "";
|
|
text-indent: 0px !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-1::after {
|
|
content: "1" !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-2::after {
|
|
content: "2" !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-3::after {
|
|
content: "3" !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-4::after {
|
|
content: "4" !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-5::after {
|
|
content: "5" !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-6::after {
|
|
content: "6" !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-7::after {
|
|
content: "7" !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-8::after {
|
|
content: "8" !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-9::after {
|
|
content: "9" !important;
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-line.HyperMD-list-line.HyperMD-list-line-10::after {
|
|
content: "10" !important;
|
|
}
|
|
|
|
/* active line */
|
|
|
|
.line-hover-indicator .workspace-leaf-content[data-type="markdown"] .markdown-source-view .cm-content>.cm-active::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -20px;
|
|
top: 3px;
|
|
width: 3px;
|
|
height: calc(100% - 6px);
|
|
border-radius: 10px;
|
|
background: var(--hover-indicator-color);
|
|
--hover-indicator-color: var(--color-accent) !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.line-hover-indicator .workspace-leaf-content[data-type="markdown"] .markdown-source-view .cm-content>.cm-active.HyperMD-quote::after {
|
|
left: calc(-20px - var(--blockquote-padding));
|
|
}
|
|
|
|
.line-hover-indicator.focus-indicator-list-level .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-active.HyperMD-list-line::after,
|
|
.line-hover-indicator.focus-indicator-codeblock-line-number .workspace-leaf-content[data-type="markdown"] .cm-contentContainer .cm-active.HyperMD-codeblock:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end):after {
|
|
opacity: 1 !important;
|
|
--hover-indicator-color: var(--color-accent) !important;
|
|
}
|
|
|
|
/* Cursor */
|
|
|
|
body {
|
|
--cursor: pointer;
|
|
--cursor-link: pointer;
|
|
}
|
|
|
|
/* ====== Callout ====== */
|
|
body {
|
|
/* Callouts */
|
|
--callout-border-width: 0px;
|
|
--callout-border-opacity: 0.25;
|
|
--callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6);
|
|
--callout-radius: var(--radius-s);
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 0;
|
|
--callout-title-size: inherit;
|
|
--callout-content-padding: 0;
|
|
--callout-content-background: transparent;
|
|
--callout-content-radius: 0px;
|
|
}
|
|
|
|
.theme-light .callout:is([data-callout-metadata*="style-1"], [data-callout*=style-1]),
|
|
.callout-style-1.theme-light {
|
|
--callout-border-width: 1px;
|
|
--callout-border-opacity: 0.25;
|
|
--callout-padding: 0;
|
|
--callout-radius: var(--radius-s);
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 8px 16px;
|
|
--callout-title-size: inherit;
|
|
--callout-content-padding: 0px 16px;
|
|
--callout-content-background: #FFFFFFBF;
|
|
--callout-content-radius: 0px;
|
|
}
|
|
|
|
.theme-dark .callout:is([data-callout-metadata*="style-1"], [data-callout*=style-1]),
|
|
.callout-style-1.theme-dark {
|
|
--callout-border-width: 1px;
|
|
--callout-border-opacity: 0.25;
|
|
--callout-padding: 0;
|
|
--callout-radius: var(--radius-s);
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 8px 16px;
|
|
--callout-title-size: inherit;
|
|
--callout-content-padding: 0px 16px;
|
|
--callout-content-background: #00000040;
|
|
--callout-content-radius: 0px;
|
|
}
|
|
|
|
.theme-light .callout:is([data-callout-metadata*="style-2"], [data-callout*=style-2]),
|
|
.callout-style-2.theme-light {
|
|
--callout-border-width: 1px;
|
|
--callout-border-opacity: 0.25;
|
|
--callout-padding: 0 6px 6px;
|
|
--callout-radius: var(--radius-s);
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 8px 16px;
|
|
--callout-title-size: inherit;
|
|
--callout-content-padding: 0px 16px;
|
|
--callout-content-background: #FFFFFFBF;
|
|
--callout-content-radius: 4px;
|
|
}
|
|
|
|
.theme-dark .callout:is([data-callout-metadata*="style-2"], [data-callout*=style-2]),
|
|
.callout-style-2.theme-dark {
|
|
--callout-border-width: 1px;
|
|
--callout-border-opacity: 0.25;
|
|
--callout-padding: 0 6px 6px;
|
|
--callout-radius: var(--radius-s);
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 8px 16px;
|
|
--callout-title-size: inherit;
|
|
--callout-content-padding: 0px 16px;
|
|
--callout-content-background: #00000040;
|
|
--callout-content-radius: 4px;
|
|
}
|
|
|
|
body:is(.theme-light, .theme-dark) .callout:is([data-callout-metadata*="style-3"], [data-callout*=style-3]),
|
|
.callout-style-3:is(.theme-light, .theme-dark) {
|
|
--callout-border-width: 0 0 0 4px;
|
|
--callout-border-opacity: 1;
|
|
--callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6);
|
|
--callout-radius: var(--radius-s);
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 0;
|
|
--callout-title-size: inherit;
|
|
--callout-content-padding: 0;
|
|
--callout-content-background: transparent;
|
|
--callout-content-radius: 0px;
|
|
}
|
|
|
|
.theme-light .callout:is([data-callout-metadata*="style-4"], [data-callout*=style-4]),
|
|
.callout-style-4.theme-light {
|
|
--callout-border-width: 0 0 0 4px;
|
|
--callout-border-opacity: 1;
|
|
--callout-padding: 0;
|
|
--callout-radius: var(--radius-s);
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 8px 16px;
|
|
--callout-title-size: inherit;
|
|
--callout-content-padding: 0px 16px;
|
|
--callout-content-background: #FFFFFFBF;
|
|
--callout-content-radius: 0px;
|
|
}
|
|
|
|
.theme-dark .callout:is([data-callout-metadata*="style-4"], [data-callout*=style-4]),
|
|
.callout-style-4.theme-dark {
|
|
--callout-border-width: 0 0 0 4px;
|
|
--callout-border-opacity: 1;
|
|
--callout-padding: 0;
|
|
--callout-radius: var(--radius-s);
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 8px 16px;
|
|
--callout-title-size: inherit;
|
|
--callout-content-padding: 0px 16px;
|
|
--callout-content-background: #00000040;
|
|
--callout-content-radius: 0px;
|
|
}
|
|
|
|
.callout-content {
|
|
border-radius: var(--callout-content-radius);
|
|
}
|
|
|
|
|
|
/* ====== Blockquotes ====== */
|
|
body {
|
|
--background-alt-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.12' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
|
|
--background-alt-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.12' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
|
|
body {
|
|
/* Blockquotes */
|
|
--blockquote-border-thickness: 3px;
|
|
--blockquote-border-color: var(--interactive-accent);
|
|
--blockquote-font-style: normal;
|
|
--blockquote-color: inherit;
|
|
--blockquote-background-color: transparent;
|
|
--blockquote-background-light: var(--background-alt-light);
|
|
--blockquote-background-dark: var(--background-alt-dark);
|
|
--blockquote-padding: 8px;
|
|
}
|
|
|
|
.theme-light .markdown-source-view .cm-scroller .cm-line.HyperMD-quote,
|
|
.theme-light .markdown-rendered blockquote {
|
|
border-radius: var(--radius-s);
|
|
background: var(--blockquote-background-light);
|
|
}
|
|
|
|
.theme-dark .markdown-source-view .cm-scroller .cm-line.HyperMD-quote,
|
|
.theme-dark .markdown-rendered blockquote {
|
|
border-radius: var(--radius-s);
|
|
background: var(--blockquote-background-dark);
|
|
}
|
|
|
|
.markdown-rendered blockquote {
|
|
position: relative;
|
|
border-radius: var(--radius-s);
|
|
border-inline-start: none;
|
|
padding-inline: calc(16px + var(--blockquote-border-thickness) + var(--blockquote-padding)) var(--blockquote-padding);
|
|
padding-block: var(--blockquote-padding);
|
|
}
|
|
|
|
.markdown-rendered blockquote>blockquote {
|
|
padding-inline-start: calc(16px + var(--blockquote-border-thickness));
|
|
padding-block: 0 !important;
|
|
}
|
|
|
|
.markdown-rendered blockquote>blockquote::before {
|
|
top: 0;
|
|
bottom: 0;
|
|
inset-inline-start: 0;
|
|
}
|
|
|
|
.markdown-rendered blockquote::before {
|
|
position: absolute;
|
|
top: var(--blockquote-padding);
|
|
bottom: var(--blockquote-padding);
|
|
inset-inline-start: var(--blockquote-padding);
|
|
border-radius: var(--radius-s);
|
|
background-color: var(--blockquote-border-color);
|
|
width: var(--blockquote-border-thickness);
|
|
pointer-events: none;
|
|
content: "";
|
|
}
|
|
|
|
.HyperMD-quote {
|
|
border: solid transparent;
|
|
border-width: 0 var(--blockquote-padding) 0 var(--blockquote-padding);
|
|
background-color: var(--blockquote-background-color);
|
|
}
|
|
|
|
.HyperMD-quote::before {
|
|
width: 0 !important;
|
|
}
|
|
|
|
.HyperMD-quote:first-child,
|
|
.cm-sizer>div>div>*:not(.HyperMD-quote)+.HyperMD-quote {
|
|
border-top-width: var(--blockquote-padding);
|
|
border-start-start-radius: var(--radius-s);
|
|
border-start-end-radius: var(--radius-s);
|
|
}
|
|
|
|
.HyperMD-quote:first-child::before,
|
|
.cm-sizer>div>div>*:not(.HyperMD-quote)+.HyperMD-quote::before {
|
|
border-start-start-radius: var(--radius-s);
|
|
border-start-end-radius: var(--radius-s);
|
|
}
|
|
|
|
.HyperMD-quote:last-child,
|
|
.cm-sizer>div>div>.HyperMD-quote:has(+ *:not(.HyperMD-quote)) {
|
|
border-bottom-width: var(--blockquote-padding);
|
|
border-end-start-radius: var(--radius-s);
|
|
border-end-end-radius: var(--radius-s);
|
|
}
|
|
|
|
.HyperMD-quote:last-child::before,
|
|
.cm-sizer>div>div>.HyperMD-quote:has(+ *:not(.HyperMD-quote))::before {
|
|
border-end-start-radius: var(--radius-s);
|
|
border-end-end-radius: var(--radius-s);
|
|
}
|
|
|
|
/*kbd*/
|
|
kbd {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/*inline code*/
|
|
body {
|
|
--inline-code-normal: var(--color-pink);
|
|
--inline-code-background-light: var(--background-alt-light);
|
|
--inline-code-background-dark: var(--background-alt-dark);
|
|
}
|
|
|
|
.markdown-rendered :not(pre)>code,
|
|
.cm-s-obsidian span.cm-inline-code {
|
|
color: var(--inline-code-normal)
|
|
}
|
|
|
|
.theme-light .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight),
|
|
.theme-light .cm-s-obsidian span.cm-inline-code,
|
|
.theme-light :not(pre)>code {
|
|
background: var(--inline-code-background-light);
|
|
}
|
|
|
|
.theme-dark .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight),
|
|
.theme-dark .cm-s-obsidian span.cm-inline-code,
|
|
.theme-dark :not(pre)>code {
|
|
background: var(--inline-code-background-dark);
|
|
}
|
|
|
|
.theme-light .cm-s-obsidian span.cm-inline-code span.cm-inline-code.cm-hmd-indented-code,
|
|
.theme-dark .cm-s-obsidian span.cm-inline-code span.cm-inline-code.cm-hmd-indented-code {
|
|
background: unset;
|
|
}
|
|
|
|
/*codeblock*/
|
|
body {
|
|
/* Code */
|
|
--code-white-space: pre-wrap;
|
|
--code-radius: var(--radius-s);
|
|
--code-size: var(--font-smaller);
|
|
--code-background-light: var(--background-alt-light);
|
|
--code-background-dark: var(--background-alt-dark);
|
|
--code-border-light: 1px solid var(--background-modifier-border);
|
|
--code-border-dark: 1px solid var(--background-modifier-border);
|
|
--code-normal: var(--text-muted);
|
|
--code-comment: var(--text-faint);
|
|
--code-function: var(--color-yellow);
|
|
--code-important: var(--color-orange);
|
|
--code-keyword: var(--color-pink);
|
|
--code-operator: var(--color-red);
|
|
--code-property: var(--color-cyan);
|
|
--code-punctuation: var(--text-muted);
|
|
--code-string: var(--color-green);
|
|
--code-tag: var(--color-red);
|
|
--code-value: var(--color-purple);
|
|
}
|
|
|
|
.theme-light {
|
|
--code-background: var(--code-background-light);
|
|
--code-border: var(--code-border-light);
|
|
}
|
|
|
|
.theme-dark {
|
|
--code-background: var(--code-background-dark);
|
|
--code-border: var(--code-border-dark);
|
|
}
|
|
|
|
.cm-s-obsidian div.HyperMD-codeblock-begin-bg,
|
|
.cm-s-obsidian div.HyperMD-codeblock-end-bg,
|
|
.cm-s-obsidian div.HyperMD-codeblock-bg,
|
|
.markdown-rendered pre {
|
|
background: var(--code-background);
|
|
}
|
|
|
|
.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
|
|
border-top: var(--code-border);
|
|
}
|
|
|
|
.cm-s-obsidian div.HyperMD-codeblock-end-bg {
|
|
border-bottom: var(--code-border);
|
|
}
|
|
|
|
.cm-s-obsidian div.HyperMD-codeblock-bg {
|
|
border-left: var(--code-border);
|
|
border-right: var(--code-border);
|
|
}
|
|
|
|
.markdown-rendered pre {
|
|
border: var(--code-border);
|
|
}
|
|
|
|
.cm-s-obsidian .HyperMD-codeblock {
|
|
caret-color: auto;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .code-block-flair,
|
|
.markdown-rendered button.copy-code-button {
|
|
color: var(--code-normal);
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .code-block-flair {
|
|
transform: translateY(-5px);
|
|
padding: 1px 5px;
|
|
height: auto;
|
|
min-height: 0;
|
|
line-height: 1.2;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* ===== embeds ====== */
|
|
body {
|
|
/* Embeds */
|
|
--embed-border-radius: 0px;
|
|
}
|
|
|
|
.seamless-embeds {
|
|
--embed-border-left: none;
|
|
}
|
|
|
|
.seamless-embeds .markdown-embed {
|
|
--embed-border-start: none;
|
|
}
|
|
|
|
.markdown-embed {
|
|
border-radius: var(--embed-border-radius);
|
|
}
|
|
|
|
/* ===== image ====== */
|
|
|
|
/* image center align */
|
|
.img-center-align .print :is(.markdown-preview-view, .markdown-rendered) img:not([class]),
|
|
.img-center-align .markdown-preview-view img:not([class]),
|
|
.img-center-align .markdown-source-view img:not([class]) {
|
|
display: block;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
.img-center-align .print :is(.markdown-preview-view, .markdown-rendered) img:is([class=""], .image-ready-resize, .image-ready-click-view),
|
|
.img-center-align .markdown-preview-view img:is([class=""], .image-ready-resize, .image-ready-click-view),
|
|
.img-center-align .markdown-source-view img:is([class=""], .image-ready-resize, .image-ready-click-view) {
|
|
display: block;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
/* image hover effect */
|
|
|
|
.theme-dark.img-darken .markdown-preview-view img,
|
|
.theme-dark.img-darken .markdown-source-view img {
|
|
opacity: 0.75;
|
|
transition: opacity var(--anim-duration-fast) linear;
|
|
}
|
|
|
|
.theme-dark.img-darken .markdown-preview-view img:hover,
|
|
.theme-dark.img-darken .markdown-source-view img:hover {
|
|
opacity: 1;
|
|
transition: opacity var(--anim-duration-fast) linear;
|
|
}
|
|
|
|
/* ====== icon ====== */
|
|
body {
|
|
--clickable-icon-radius: 6px;
|
|
}
|
|
|
|
.workspace-tab-header-inner-icon {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.workspace-tab-header-tab-list,
|
|
.workspace-tab-header-new-tab {
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.clickable-icon.document-search-button,
|
|
.clickable-icon.document-search-close-button,
|
|
body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon,
|
|
.mod-left-split .workspace-tab-header .workspace-tab-header-inner,
|
|
.mod-right-split .workspace-tab-header .workspace-tab-header-inner,
|
|
.clickable-icon.nav-action-button,
|
|
.clickable-icon.side-dock-ribbon-action,
|
|
.sidebar-toggle-button .clickable-icon,
|
|
.workspace-tab-header-new-tab .clickable-icon,
|
|
.workspace-tab-header-tab-list .clickable-icon,
|
|
body:not(.is-mobile) .view-header .clickable-icon:not([aria-label="Accept changes"], [aria-label="Cancel apply"]) {
|
|
padding: 7px;
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
|
|
.workspace-leaf.has-pane-relief-label .view-header .view-header-nav-buttons .clickable-icon {
|
|
width: unset;
|
|
}
|
|
|
|
.mod-left-split .workspace-tab-header .workspace-tab-header-inner,
|
|
.mod-right-split .workspace-tab-header .workspace-tab-header-inner {
|
|
/*pin icon*/
|
|
width: fit-content;
|
|
gap: var(--size-2-2);
|
|
}
|
|
|
|
.is-mobile .clickable-icon.nav-action-button,
|
|
.is-mobile .clickable-icon.side-dock-ribbon-action,
|
|
.is-mobile .sidebar-toggle-button .clickable-icon,
|
|
.is-mobile .view-header .clickable-icon {
|
|
padding: var(--size-2-2);
|
|
}
|
|
|
|
.titlebar .workspace-tab-header-tab-list,
|
|
.titlebar .workspace-tab-header-new-tab,
|
|
.mod-root .workspace-tab-header-tab-list,
|
|
.mod-root .workspace-tab-header-new-tab {
|
|
display: unset;
|
|
}
|
|
|
|
.side-dock-settings,
|
|
.side-dock-actions {
|
|
gap: var(--size-2-2);
|
|
}
|
|
|
|
.workspace-tab-header-status-icon,
|
|
.mod-root .workspace-tab-header-status-icon,
|
|
.mod-root .workspace-tab-header-inner-icon {
|
|
--icon-size: var(--icon-s);
|
|
}
|
|
|
|
|
|
/* ====== icon replace ====== */
|
|
svg {
|
|
-webkit-mask-size: contain;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-repeat: no-repeat;
|
|
}
|
|
|
|
/* ====== checkboxes ====== */
|
|
body {
|
|
/* Checkboxes */
|
|
--checkbox-radius: 6px;
|
|
--checkbox-size: var(--font-text-size);
|
|
--checkbox-marker-color: var(--background-primary);
|
|
--checkbox-color: var(--color-green);
|
|
--checkbox-color-hover: var(--color-green);
|
|
--checkbox-border-color: var(--text-faint);
|
|
--checkbox-border-color-hover: var(--text-faint);
|
|
--checklist-done-decoration: line-through;
|
|
--checklist-done-color: var(--text-faint);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
input[type=checkbox]:checked:hover {
|
|
filter: brightness(1.075);
|
|
}
|
|
|
|
|
|
input[type=checkbox]:hover {
|
|
outline-offset: 2px;
|
|
outline: 2px solid var(--background-modifier-border-hover);
|
|
}
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
transition: box-shadow var(--anim-duration-moderate) var(--anim-motion-swing), filter var(--anim-duration-moderate) var(--anim-motion-smooth);
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=checkbox]:checked:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='black' d='M15.53 2.41a1.5 1.5 0 0 1 .06 2.12l-8.5 9a1.501 1.501 0 0 1-2.15.03l-4.5-4.5a1.5 1.5 0 0 1 2.12-2.12l3.41 3.408 7.44-7.878a1.5 1.5 0 0 1 2.12-.06Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
}
|
|
|
|
|
|
/* Alternate Checkboxes */
|
|
|
|
input[data-task="<"]:checked,
|
|
li[data-task="<"]>input:checked,
|
|
li[data-task="<"]>p>input:checked,
|
|
input[data-task=">"]:checked,
|
|
li[data-task=">"]>input:checked,
|
|
li[data-task=">"]>p>input:checked,
|
|
input[data-task="d"]:checked,
|
|
li[data-task="d"]>input:checked,
|
|
li[data-task="d"]>p>input:checked,
|
|
input[data-task="u"]:checked,
|
|
li[data-task="u"]>input:checked,
|
|
li[data-task="u"]>p>input:checked,
|
|
input[data-task="S"]:checked,
|
|
li[data-task="S"]>input:checked,
|
|
li[data-task="S"]>p>input:checked,
|
|
input[data-task="“"]:checked,
|
|
li[data-task="“"]>input:checked,
|
|
li[data-task="“"]>p>input:checked,
|
|
input[data-task="\""]:checked,
|
|
li[data-task="\""]>input:checked,
|
|
li[data-task="\""]>p>input:checked,
|
|
input[data-task="c"]:checked,
|
|
li[data-task="c"]>input:checked,
|
|
li[data-task="c"]>p>input:checked,
|
|
input[data-task="p"]:checked,
|
|
li[data-task="p"]>input:checked,
|
|
li[data-task="p"]>p>input:checked,
|
|
input[data-task="n"]:checked,
|
|
li[data-task="n"]>input:checked,
|
|
li[data-task="n"]>p>input:checked,
|
|
input[data-task="b"]:checked,
|
|
li[data-task="b"]>input:checked,
|
|
li[data-task="b"]>p>input:checked,
|
|
input[data-task="l"]:checked,
|
|
li[data-task="l"]>input:checked,
|
|
li[data-task="l"]>p>input:checked,
|
|
input[data-task="I"]:checked,
|
|
li[data-task="I"]>input:checked,
|
|
li[data-task="I"]>p>input:checked,
|
|
input[data-task="*"]:checked,
|
|
li[data-task="*"]>input:checked,
|
|
li[data-task="*"]>p>input:checked {
|
|
--checkbox-marker-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
background-image: none;
|
|
background-color: currentColor;
|
|
-webkit-mask-size: var(--checkbox-icon);
|
|
-webkit-mask-position: 50% 50%
|
|
}
|
|
|
|
input[data-task="!"]:checked,
|
|
li[data-task="!"]>input:checked,
|
|
li[data-task="!"]>p>input:checked {
|
|
--checkbox-color: var(--color-orange);
|
|
--checkbox-color-hover: var(--color-orange);
|
|
}
|
|
|
|
input[data-task="!"]:checked:after,
|
|
li[data-task="!"]>input:checked:after,
|
|
li[data-task="!"]>p>input:checked:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' fill-rule='evenodd' d='M8 0a2.463 2.463 0 0 0-2.43 2.864v.002L6.686 9.55a1.334 1.334 0 0 0 2.63 0l1.114-6.685v-.002A2.463 2.463 0 0 0 8 0Zm0 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z' clip-rule='evenodd'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
input[data-task="?"]:checked,
|
|
li[data-task="?"]>input:checked,
|
|
li[data-task="?"]>p>input:checked {
|
|
--checkbox-color: var(--color-pink);
|
|
--checkbox-color-hover: var(--color-pink);
|
|
}
|
|
|
|
input[data-task="?"]:checked:after,
|
|
li[data-task="?"]>input:checked:after,
|
|
li[data-task="?"]>p>input:checked:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M12.871 3.692c0 3.56-3.956 3.319-3.956 5.78v.014c0 .284-.23.514-.514.514H6.243a.514.514 0 0 1-.515-.514V9.34c0-3.803 3.473-3.56 3.473-5.341 0-.77-.571-1.23-1.517-1.23-.768 0-1.554.335-2.268 1.022a.512.512 0 0 1-.67.031l-1.419-1.11a.513.513 0 0 1-.056-.76C4.457.731 5.997 0 8.036 0c3.23 0 4.835 1.736 4.835 3.692ZM9.355 14c0 1.099-.88 2-2 2-1.1 0-2-.901-2-2s.9-2 2-2c1.12 0 2 .901 2 2Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
input[data-task="*"]:checked,
|
|
li[data-task="*"]>input:checked,
|
|
li[data-task="*"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-yellow);
|
|
color: var(--color-yellow);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M8.91,.58c-.08-.17-.21-.32-.37-.42C8.38,.05,8.19,0,8,0s-.38,.05-.54,.16c-.16,.1-.29,.25-.37,.42l-1.93,4.12L.85,5.36c-.18,.03-.35,.1-.49,.22-.14,.12-.25,.27-.3,.45-.06,.17-.07,.36-.03,.54,.04,.18,.13,.34,.26,.48l3.15,3.23-.75,4.57c-.03,.19,0,.38,.06,.55,.07,.17,.19,.32,.35,.43,.15,.11,.33,.17,.52,.18,.19,0,.37-.03,.54-.12l3.84-2.13,3.84,2.13c.16,.09,.35,.13,.54,.12,.19-.01,.37-.07,.52-.18,.15-.11,.27-.26,.35-.43,.07-.17,.09-.36,.06-.55l-.75-4.57,3.15-3.23c.13-.13,.22-.3,.26-.48,.04-.18,.03-.37-.03-.54-.06-.17-.16-.33-.31-.45-.14-.12-.31-.2-.49-.22l-4.31-.66L8.91,.58Z"/></svg>');
|
|
}
|
|
|
|
input[data-task="i"]:checked,
|
|
li[data-task="i"]>input:checked,
|
|
li[data-task="i"]>p>input:checked {
|
|
--checkbox-color: var(--color-cyan);
|
|
--checkbox-color-hover: var(--color-cyan);
|
|
}
|
|
|
|
input[data-task="i"]:checked:after,
|
|
li[data-task="i"]>input:checked:after,
|
|
li[data-task="i"]>p>input:checked:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M10.34 14.025c-.007.002-.56.186-1.04.186-.265 0-.372-.055-.406-.08-.168-.116-.48-.335.054-1.4l1-1.993c.593-1.184.681-2.33.245-3.226-.356-.733-1.039-1.236-1.92-1.416A5 5 0 0 0 7.315 6C5.466 6 4.221 7.08 4.17 7.125a.5.5 0 0 0 .493.848c.005-.002.559-.187 1.04-.187.262 0 .368.055.401.078.17.119.482.34-.05 1.403l-1.001 1.995c-.594 1.185-.681 2.33-.245 3.225.356.733 1.038 1.236 1.921 1.416.314.063.636.097.954.097 1.85 0 3.096-1.08 3.148-1.126a.5.5 0 0 0-.49-.85ZM9.5 5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
input[data-task="/"]:checked,
|
|
li[data-task="/"]>input:checked,
|
|
li[data-task="/"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-yellow);
|
|
--checkbox-color: var(--color-yellow);
|
|
border: 2px var(--color-yellow) solid;
|
|
background: conic-gradient(var(--color-yellow) 0% 37.5%, transparent 37.5% 100%);
|
|
}
|
|
|
|
input[data-task="/"]:checked:hover,
|
|
li[data-task="/"]>input:checked:hover,
|
|
li[data-task="/"]>p>input:checked:hover {
|
|
background: conic-gradient(var(--color-yellow) 0% 37.5%, transparent 37.5% 100%);
|
|
}
|
|
|
|
input[data-task="/"]:checked:after,
|
|
li[data-task="/"]>input:checked:after,
|
|
li[data-task="/"]>p>input:checked:after {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
-webkit-mask-image: none;
|
|
}
|
|
|
|
input[data-task="I"]:checked,
|
|
li[data-task="I"]>input:checked,
|
|
li[data-task="I"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-orange);
|
|
color: var(--color-orange);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><g><rect class="cls-1" width="16" height="16"/><path d="M9,1c0-.27-.11-.52-.29-.71-.19-.19-.44-.29-.71-.29s-.52,.11-.71,.29c-.19,.19-.29,.44-.29,.71v1c0,.27,.11,.52,.29,.71,.19,.19,.44,.29,.71,.29s.52-.11,.71-.29c.19-.19,.29-.44,.29-.71V1Zm4.66,2.76c.18-.19,.28-.44,.28-.7,0-.26-.11-.51-.29-.7s-.44-.29-.7-.29c-.26,0-.51,.1-.7,.28l-.71,.71c-.18,.19-.28,.44-.28,.7,0,.26,.11,.51,.29,.7s.44,.29,.7,.29c.26,0,.51-.1,.7-.28l.71-.71Zm2.34,4.24c0,.27-.11,.52-.29,.71-.19,.19-.44,.29-.71,.29h-1c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71s.11-.52,.29-.71c.19-.19,.44-.29,.71-.29h1c.27,0,.52,.11,.71,.29,.19,.19,.29,.44,.29,.71ZM3.05,4.46c.09,.1,.2,.17,.32,.22,.12,.05,.25,.08,.39,.08,.13,0,.26-.02,.39-.07,.12-.05,.23-.12,.33-.22,.09-.09,.17-.21,.22-.33,.05-.12,.08-.25,.07-.39,0-.13-.03-.26-.08-.39-.05-.12-.13-.23-.22-.32l-.71-.71c-.19-.18-.44-.28-.7-.28-.26,0-.51,.11-.7,.29s-.29,.44-.29,.7c0,.26,.1,.51,.28,.7l.71,.71Zm-.05,3.54c0,.27-.11,.52-.29,.71-.19,.19-.44,.29-.71,.29H1c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71s.11-.52,.29-.71c.19-.19,.44-.29,.71-.29h1c.27,0,.52,.11,.71,.29,.19,.19,.29,.44,.29,.71Zm3,6v-1h4v1c0,.53-.21,1.04-.59,1.41-.38,.38-.88,.59-1.41,.59s-1.04-.21-1.41-.59c-.38-.38-.59-.88-.59-1.41Zm4-2c.02-.34,.21-.65,.48-.86,.65-.51,1.13-1.22,1.36-2.02,.23-.8,.21-1.65-.06-2.43-.27-.79-.78-1.47-1.46-1.95-.68-.48-1.49-.74-2.32-.74s-1.64,.26-2.32,.74c-.68,.48-1.19,1.16-1.46,1.95-.27,.79-.29,1.64-.06,2.43,.23,.8,.71,1.5,1.36,2.02,.27,.21,.46,.52,.48,.86h4Z"/></g></svg>');
|
|
}
|
|
|
|
input[data-task="l"]:checked,
|
|
li[data-task="l"]>input:checked,
|
|
li[data-task="l"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-red);
|
|
color: var(--color-red);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M8,.12c-1.64,0-3.21,.65-4.37,1.81-1.16,1.16-1.81,2.73-1.81,4.37,0,1.34,.44,2.64,1.25,3.71,0,0,.17,.22,.2,.25l4.74,5.6,4.75-5.6s.19-.25,.19-.25h0c.81-1.07,1.25-2.37,1.25-3.71,0-1.64-.65-3.21-1.81-4.37C11.21,.78,9.64,.13,8,.12Zm0,8.44c-.45,0-.88-.13-1.25-.38-.37-.25-.66-.6-.83-1.01-.17-.41-.21-.86-.13-1.3,.09-.44,.3-.84,.62-1.15,.31-.31,.72-.53,1.15-.62,.44-.09,.89-.04,1.3,.13,.41,.17,.76,.46,1.01,.83,.25,.37,.38,.81,.38,1.25,0,.6-.24,1.17-.66,1.59-.42,.42-.99,.66-1.59,.66Z"/></svg>');
|
|
}
|
|
|
|
input[data-task="-"]:checked,
|
|
li[data-task="-"]>input:checked,
|
|
li[data-task="-"]>p>input:checked {
|
|
--checkbox-color: var(--text-faint);
|
|
--checkbox-color-hover: var(--text-faint);
|
|
}
|
|
|
|
input[data-task="-"]:checked:after,
|
|
li[data-task="-"]>input:checked:after,
|
|
li[data-task="-"]>p>input:checked:after {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' fill-rule='evenodd' d='M0 8a1.5 1.5 0 0 1 1.5-1.5h13a1.5 1.5 0 0 1 0 3h-13A1.5 1.5 0 0 1 0 8Z' clip-rule='evenodd'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
body:not(.disable-alternative-checkboxes):not(.tasks) .markdown-preview-view ul li[data-task="-"].task-list-item.is-checked,
|
|
body:not(.disable-alternative-checkboxes):not(.tasks) .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:is([data-task="-"]),
|
|
body:not(.disable-alternative-checkboxes):not(.tasks) li[data-task="-"].task-list-item.is-checked {
|
|
color: var(--text-faint);
|
|
text-decoration: line-through solid var(--text-faint) 1px
|
|
}
|
|
|
|
|
|
input[data-task="b"]:checked,
|
|
li[data-task="b"]>input:checked,
|
|
li[data-task="b"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-blue);
|
|
color: var(--color-blue);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}.cls-2{fill-rule:evenodd;}</style></defs><rect class="cls-1" width="16" height="16"/><path class="cls-2" d="M4.25,.5c-.6,0-1.17,.24-1.59,.66-.42,.42-.66,.99-.66,1.59V14.1c0,.2,.05,.39,.15,.56,.1,.17,.24,.31,.41,.41,.17,.1,.36,.15,.56,.15,.2,0,.39-.05,.56-.15l3.94-2.25c.11-.06,.24-.1,.37-.1s.26,.03,.37,.1l3.95,2.25c.17,.1,.36,.15,.56,.15,.2,0,.39-.05,.56-.15,.17-.1,.31-.24,.41-.41s.15-.36,.15-.56V2.75c0-.6-.24-1.17-.66-1.59-.42-.42-.99-.66-1.59-.66H4.25Z"/></svg>');
|
|
}
|
|
|
|
input[data-task="n"]:checked,
|
|
li[data-task="n"]>input:checked,
|
|
li[data-task="n"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-cyan);
|
|
color: var(--color-cyan);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M2.75,14.75c-.41,0-.77-.15-1.06-.44-.29-.29-.44-.65-.44-1.06V2.75c0-.41,.15-.77,.44-1.06,.29-.29,.65-.44,1.06-.44H13.25c.41,0,.77,.15,1.06,.44,.29,.29,.44,.65,.44,1.06v7.5l-4.5,4.5H2.75Zm4.5-5.25c.21,0,.39-.07,.53-.22,.14-.14,.22-.32,.22-.53s-.07-.39-.22-.53c-.14-.14-.32-.22-.53-.22h-2.25c-.21,0-.39,.07-.53,.22-.14,.14-.22,.32-.22,.53s.07,.39,.22,.53c.14,.14,.32,.22,.53,.22h2.25Zm3.75-3c.21,0,.39-.07,.53-.22,.14-.14,.22-.32,.22-.53s-.07-.39-.22-.53c-.14-.14-.32-.22-.53-.22H5c-.21,0-.39,.07-.53,.22-.14,.14-.22,.32-.22,.53s.07,.39,.22,.53,.32,.22,.53,.22h6Zm-1.5,6.75l3.75-3.75h-3c-.21,0-.39,.07-.53,.22s-.22,.32-.22,.53v3Z"/></svg>');
|
|
}
|
|
|
|
input[data-task="p"]:checked,
|
|
li[data-task="p"]>input:checked,
|
|
li[data-task="p"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-green);
|
|
color: var(--color-green);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><path class="cls-1" d="M0,16H16V0H0V16Z"/><g><path d="M3.33,15h-.72c-.33,0-.66-.13-.9-.35-.25-.23-.4-.54-.43-.87L.73,7.11c-.02-.18,0-.37,.07-.54,.06-.18,.16-.34,.28-.47,.13-.14,.28-.25,.45-.32,.17-.07,.35-.11,.54-.11h1.27c.36,0,.69,.14,.94,.39,.25,.25,.39,.59,.39,.94v6.67c0,.35-.14,.7-.39,.94-.25,.25-.59,.39-.94,.39Z"/><path d="M15.4,7.69l-1.79,6.34c-.08,.28-.25,.53-.48,.7-.23,.17-.52,.27-.81,.27H6.67c-.36,0-.69-.14-.94-.39-.25-.25-.39-.59-.39-.94V7.13c0-.53,.32-1.02,.81-1.25,.79-.37,1.38-.82,1.62-1.22,.36-.6,.53-1.78,.57-2.65,0-.06,0-.12,.01-.18,.06-.41,.34-.72,.73-.8,.07-.01,.14-.02,.21-.02,.8,0,1.73,.83,2.12,1.48,.29,.48,.41,1.09,.36,1.84-.03,.55-.18,1.05-.33,1.55l-.04,.12h2.72c.21,0,.41-.05,.6,.14,.18,.09,.34,.23,.47,.39,.12,.17,.21,.35,.24,.55,.04,.2,.03,.41-.03,.61ZM9,1.94h0Z"/></g></svg>');
|
|
}
|
|
|
|
input[data-task="c"]:checked,
|
|
li[data-task="c"]>input:checked,
|
|
li[data-task="c"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-red);
|
|
color: var(--color-red);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><path class="cls-1" d="M0,0H16V16H0V0Z"/><g><path d="M3.33,1h-.72c-.33,0-.66,.13-.9,.35-.25,.23-.4,.54-.43,.87l-.56,6.67c-.02,.18,0,.37,.07,.54,.06,.18,.16,.34,.28,.47,.13,.14,.28,.25,.45,.32,.17,.07,.35,.11,.54,.11h1.27c.36,0,.69-.14,.94-.39,.25-.25,.39-.59,.39-.94V2.33c0-.35-.14-.7-.39-.94-.25-.25-.59-.39-.94-.39Z"/><path d="M15.4,8.31l-1.79-6.34c-.08-.28-.25-.53-.48-.7-.23-.17-.52-.27-.81-.27H6.67c-.36,0-.69,.14-.94,.39-.25,.25-.39,.59-.39,.94v6.54c0,.53,.32,1.02,.81,1.25,.79,.37,1.38,.82,1.62,1.22,.36,.6,.53,1.78,.57,2.65,0,.06,0,.12,.01,.18,.06,.41,.34,.72,.73,.8,.07,.01,.14,.02,.21,.02,.8,0,1.73-.83,2.12-1.48,.29-.48,.41-1.09,.36-1.84-.03-.55-.18-1.05-.33-1.55l-.04-.12h2.72c.21,0,.41-.05,.6,.14,.18-.09,.34-.23,.47-.39,.12,.17,.21-.35,.24-.55,.04-.2,.03-.41-.03-.61Zm-6.4,5.75h0Z"/></g></svg>');
|
|
}
|
|
|
|
input[data-task="“"]:checked,
|
|
li[data-task="“"]>input:checked,
|
|
li[data-task="“"]>p>input:checked,
|
|
input[data-task="\""]:checked,
|
|
li[data-task="\""]>input:checked,
|
|
li[data-task="\""]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-purple);
|
|
color: var(--color-purple);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M2.46,4.19c.94-1.01,2.35-1.53,4.21-1.53h.67v1.88l-.54,.11c-.91,.18-1.55,.54-1.89,1.07-.18,.28-.28,.61-.29,.94h2.05c.18,0,.35,.07,.47,.2,.13,.13,.2,.29,.2,.47v4.67c0,.74-.6,1.33-1.33,1.33H2c-.18,0-.35-.07-.47-.2-.13-.12-.2-.29-.2-.47V7.39c0-.07-.13-1.83,1.13-3.19ZM13.33,13.33h-4c-.18,0-.35-.07-.47-.2-.13-.12-.2-.29-.2-.47V7.39c0-.07-.13-1.83,1.13-3.19,.94-1.01,2.35-1.53,4.21-1.53h.67v1.88l-.54,.11c-.91,.18-1.55,.54-1.89,1.07-.18,.28-.28,.61-.29,.94h2.05c.18,0,.35,.07,.47,.2,.12,.13,.2,.29,.2,.47v4.67c0,.74-.6,1.33-1.33,1.33Z"/></svg>');
|
|
}
|
|
|
|
input[data-task="S"]:checked,
|
|
li[data-task="S"]>input:checked,
|
|
li[data-task="S"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-green);
|
|
color: var(--color-green);
|
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M12.781 8.34c-.84-.665-2.146-1.247-3.354-1.715V4.396a28.48 28.48 0 0 1 2.123.772c.096.04.209.006.265-.082l1.193-1.805a.219.219 0 0 0-.079-.314c-.68-.365-2.072-.93-3.502-1.293V.366a.27.27 0 0 0-.27-.271H6.985a.271.271 0 0 0-.271.271v.973c-2.014.092-3.38.795-4.166 2.147-.616 1.06-.613 2.255.004 3.118.645.922 1.699 1.332 3.031 1.851l.172.066c.309.118.634.239.959.359v2.715c-1.41-.335-2.736-1.023-2.98-1.189a.218.218 0 0 0-.296.048l-1.444 1.883a.211.211 0 0 0-.043.163.22.22 0 0 0 .086.145c.874.648 2.145 1.266 3.403 1.654a12.4 12.4 0 0 0 1.275.316v1.018c0 .148.121.27.271.27h2.173a.27.27 0 0 0 .27-.27v-.845c1.928-.16 3.368-.997 4.192-2.45.793-1.402.49-2.858-.839-3.998ZM6.712 4.014v1.643c-.624-.2-.993-.394-.953-.872.04-.49.51-.69.954-.771Zm2.716 5.875c.458.205.806.42.927.689.069.152.063.326-.016.533-.14.364-.502.553-.912.649V9.889Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
input[data-task="u"]:checked,
|
|
li[data-task="u"]>input:checked,
|
|
li[data-task="u"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-green);
|
|
color: var(--color-green);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}.cls-2{fill-rule:evenodd;}</style></defs><rect class="cls-1" width="16" height="16"/><path class="cls-2" d="M10,5c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71s.11-.52,.29-.71c.19-.19,.44-.29,.71-.29h5c.27,0,.52,.11,.71,.29,.19,.19,.29,.44,.29,.71v5c0,.27-.11,.52-.29,.71-.19,.19-.44,.29-.71,.29s-.52-.11-.71-.29c-.19-.19-.29-.44-.29-.71v-2.59l-4.29,4.29c-.19,.19-.44,.29-.71,.29s-.52-.11-.71-.29l-2.29-2.29L1.71,12.71c-.19,.18-.44,.28-.7,.28-.26,0-.51-.11-.7-.29S.01,12.26,.01,12c0-.26,.1-.51,.28-.7L5.29,6.29c.19-.19,.44-.29,.71-.29s.52,.11,.71,.29l2.29,2.29,3.59-3.59h-2.59Z"/></svg>');
|
|
}
|
|
|
|
input[data-task="d"]:checked,
|
|
li[data-task="d"]>input:checked,
|
|
li[data-task="d"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-red);
|
|
color: var(--color-red);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}.cls-2{fill-rule:evenodd;}</style></defs><rect class="cls-1" width="16" height="16"/><path class="cls-2" d="M10,11c-.27,0-.52,.11-.71,.29-.19,.19-.29,.44-.29,.71s.11,.52,.29,.71c.19,.19,.44,.29,.71,.29h5c.27,0,.52-.11,.71-.29,.19-.19,.29-.44,.29-.71V7c0-.27-.11-.52-.29-.71-.19-.19-.44-.29-.71-.29s-.52,.11-.71,.29c-.19,.19-.29,.44-.29,.71v2.59l-4.29-4.29c-.19-.19-.44-.29-.71-.29s-.52,.11-.71,.29l-2.29,2.29L1.71,3.29c-.19-.18-.44-.28-.7-.28-.26,0-.51,.11-.7,.29S.01,3.74,.01,4c0,.26,.1,.51,.28,.7l5,5c.19,.19,.44,.29,.71,.29s.52-.11,.71-.29l2.29-2.29,3.59,3.59h-2.59Z"/></svg>');
|
|
}
|
|
|
|
input[data-task=">"]:checked,
|
|
li[data-task=">"]>input:checked,
|
|
li[data-task=">"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-pink);
|
|
color: var(--color-pink);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M1.72,1.05c-.08-.04-.18-.06-.27-.05-.09,0-.18,.04-.26,.1-.07,.06-.13,.13-.16,.22-.03,.09-.04,.18-.02,.27l1.4,4.85c.03,.09,.08,.17,.15,.23,.07,.06,.16,.1,.25,.12l5.69,.95c.27,.05,.27,.44,0,.49l-5.69,.95c-.09,.02-.18,.06-.25,.12s-.12,.14-.15,.23l-1.4,4.85c-.02,.09-.01,.19,.02,.27,.03,.09,.09,.16,.16,.22,.07,.06,.16,.09,.26,.1,.09,0,.19,0,.27-.05l13-6.5c.08-.04,.15-.11,.2-.18,.05-.08,.07-.17,.07-.26s-.03-.18-.07-.26c-.05-.08-.12-.14-.2-.18L1.72,1.05Z"/></svg>');
|
|
}
|
|
|
|
input[data-task="<"]:checked,
|
|
li[data-task="<"]>input:checked,
|
|
li[data-task="<"]>p>input:checked {
|
|
--checkbox-color-hover: var(--color-blue);
|
|
color: var(--color-blue);
|
|
-webkit-mask-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="svg0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}</style></defs><rect class="cls-1" width="16" height="16"/><path d="M2.75,15.5H13.25c.83,0,1.5-.67,1.5-1.5V3.5c0-.83-.67-1.5-1.5-1.5h-1.5V.5h-1.5v1.5H5.75V.5h-1.5v1.5h-1.5c-.83,0-1.5,.67-1.5,1.5V14c0,.83,.67,1.5,1.5,1.5Zm0-11.25H13.25v1.5H2.75v-1.5Z"/></svg>');
|
|
}
|
|
|
|
|
|
/* ==========================================================
|
|
0. HIDE INACTIVE SETTINGS
|
|
========================================================== */
|
|
body:not(.toggle-card-bg) .setting-item[data-id="color-card-bg"],
|
|
body:not(.toggle-left-panel) .setting-item[data-id="color-left-panel"],
|
|
body:not(.toggle-middle-panel) .setting-item[data-id="color-middle-panel"],
|
|
body:not(.toggle-right-panel) .setting-item[data-id="color-right-panel"],
|
|
body:not(.toggle-active-tab) .setting-item[data-id="color-active-tab"],
|
|
body:not(.toggle-vault-profile) .setting-item[data-id="color-vault-profile"],
|
|
body:not(.toggle-panel-borders) .setting-item[data-id="panel-border-width"],
|
|
body:not(.toggle-panel-borders) .setting-item[data-id="panel-border-color"],
|
|
body:not(.toggle-panel-borders) .setting-item[data-id="panel-border-radius"],
|
|
body:not(.toggle-panel-borders):not(.layout-card) .setting-item:is([data-id="layout-gap-middle"], [data-id="layout-gap-right"], [data-id="layout-gap-bottom"]),
|
|
body:not(.toggle-panel-borders) .setting-item:is([data-id="panel-border-width"], [data-id="panel-border-color"], [data-id="panel-border-radius"], [data-id="panel-border-style"]),
|
|
body:not(.toggle-active-file-colors) .setting-item[data-id="color-active-file"], {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ==========================================================
|
|
1. HIDE INACTIVE SETTINGS
|
|
========================================================== */
|
|
body:not(.toggle-active-file-colors) .setting-item[data-id$="color-active-file"],
|
|
body:not(.toggle-card-bg) .setting-item[data-id$="color-card-bg"],
|
|
body:not(.toggle-left-panel) .setting-item[data-id$="color-left-panel"],
|
|
body:not(.toggle-middle-panel) .setting-item[data-id$="color-middle-panel"],
|
|
body:not(.toggle-right-panel) .setting-item[data-id$="color-right-panel"],
|
|
body:not(.toggle-active-tab) .setting-item[data-id$="color-active-tab"],
|
|
body:not(.toggle-vault-profile) .setting-item[data-id$="color-vault-profile"],
|
|
body:not(.toggle-panel-borders) .setting-item[data-id$="panel-border-width"],
|
|
body:not(.toggle-panel-borders) .setting-item[data-id$="panel-border-color"],
|
|
body:not(.toggle-panel-borders) .setting-item[data-id$="panel-border-radius"],
|
|
body:not(.toggle-panel-borders):not(.layout-card) .setting-item:is([data-id$="layout-gap-middle"], [data-id$="layout-gap-right"], [data-id$="layout-gap-bottom"]),
|
|
body:not(.toggle-panel-borders) .setting-item:is([data-id$="panel-border-width"], [data-id$="panel-border-color"], [data-id$="panel-border-radius"], [data-id$="panel-border-style"]) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ==========================================================
|
|
2. FORCE CHILD TRANSPARENCY
|
|
Ensures inner panes don't block the container backgrounds
|
|
========================================================== */
|
|
body .workspace-split .workspace-leaf,
|
|
body .workspace-split .workspace-leaf-content,
|
|
body .workspace-split .view-content,
|
|
body .workspace-split .view-header {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* ==========================================================
|
|
3. CUSTOM PANEL COLORS & OPACITY
|
|
========================================================== */
|
|
body.toggle-left-panel .workspace-split.mod-left-split .workspace-tab-container {
|
|
background-color: var(--color-left-panel) !important;
|
|
}
|
|
|
|
body.toggle-middle-panel .workspace-split.mod-root .workspace-tab-container {
|
|
background-color: var(--color-middle-panel) !important;
|
|
}
|
|
|
|
body.toggle-right-panel .workspace-split.mod-right-split .workspace-tab-container {
|
|
background-color: var(--color-right-panel) !important;
|
|
}
|
|
|
|
body.toggle-vault-profile .workspace-sidedock-vault-profile {
|
|
background-color: var(--color-vault-profile) !important;
|
|
}
|
|
|
|
body.toggle-active-tab .workspace-tab-header.is-active .workspace-tab-header-inner {
|
|
background-color: var(--color-active-tab) !important;
|
|
}
|
|
|
|
/* ==========================================================
|
|
4. CUSTOM BORDERS, RADIUS & DIVIDERS (ALL DESKTOPS ONLY)
|
|
========================================================== */
|
|
|
|
/* 1. APPLY MAIN PANEL BORDERS (Any Desktop, never on mobile) */
|
|
body.toggle-panel-borders:not(.is-mobile) .workspace-split.mod-left-split .workspace-tab-container,
|
|
body.toggle-panel-borders:not(.is-mobile) .workspace-split.mod-root .workspace-tab-container,
|
|
body.toggle-panel-borders:not(.is-mobile) .workspace-split.mod-right-split .workspace-tab-container {
|
|
border: var(--panel-border-width, 1px) var(--panel-border-style, solid) var(--card-border-color, var(--color-accent)) !important;
|
|
border-radius: var(--panel-border-radius, 8px) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* 2. PANEL GAP LOGIC (Separates the panels so borders never overlap) */
|
|
/* Internal Gaps */
|
|
body.toggle-panel-borders:not(.layout-card):not(.is-mobile) .workspace.is-left-sidedock-open .workspace-split.mod-horizontal.mod-left-split {
|
|
margin-right: var(--layout-gap-middle, 5px) !important;
|
|
}
|
|
body.toggle-panel-borders:not(.layout-card):not(.is-mobile) .workspace.is-right-sidedock-open .workspace-split.mod-horizontal.mod-right-split {
|
|
margin-left: var(--layout-gap-middle, 5px) !important;
|
|
}
|
|
body.toggle-panel-borders:not(.layout-card):not(.is-mobile) .workspace-split.mod-vertical {
|
|
gap: var(--layout-gap-middle, 5px) !important;
|
|
}
|
|
|
|
/* Outer Gaps */
|
|
body.toggle-panel-borders:not(.layout-card):not(.is-mobile) .workspace {
|
|
padding-right: var(--layout-gap-right, 5px) !important;
|
|
padding-bottom: var(--layout-gap-bottom, 5px) !important;
|
|
}
|
|
|
|
/* Clean up native box-shadows added by the original theme */
|
|
body.toggle-panel-borders:not(.is-mobile) .workspace-tabs:not(.mod-top) .workspace-tab-container > .workspace-leaf {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* 3. HIDE ALL RESIZE HANDLES GLOBALLY (When Borders or Cards are ON) */
|
|
body.toggle-panel-borders:not(.is-mobile) .workspace-leaf-resize-handle,
|
|
body.layout-card:not(.is-mobile) .workspace-leaf-resize-handle {
|
|
opacity: 0 !important;
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
body.toggle-panel-borders:not(.is-mobile) .workspace-leaf-resize-handle::before,
|
|
body.toggle-panel-borders:not(.is-mobile) .workspace-leaf-resize-handle::after,
|
|
body.layout-card:not(.is-mobile) .workspace-leaf-resize-handle::before,
|
|
body.layout-card:not(.is-mobile) .workspace-leaf-resize-handle::after {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 4. VAULT PROFILE DIVIDER LINE */
|
|
body.layout-card:not(.is-mobile) .workspace-sidedock-vault-profile,
|
|
body.toggle-panel-borders:not(.is-mobile) .workspace-sidedock-vault-profile {
|
|
border-top: var(--panel-border-width, 1px) var(--panel-border-style, solid) var(--card-border-color, var(--color-accent)) !important;
|
|
}
|
|
|
|
/* 5. RE-ADD THE 75% VERTICAL DIVIDERS (Default Layout ONLY, Borders OFF) */
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-split.mod-right-split > .workspace-leaf-resize-handle {
|
|
height: 75% !important;
|
|
width: 2px !important;
|
|
top: calc((100% - 75%) / 2) !important;
|
|
background-color: var(--background-modifier-border) !important;
|
|
border: none !important;
|
|
transition: background-color 0.2s ease;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* 6. HOVER ACCENT FOR DEFAULT LAYOUT */
|
|
/* Standard hover for inner elements */
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-leaf-resize-handle:hover,
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-leaf-resize-handle:active,
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-leaf-resize-handle.is-grabbing,
|
|
/* High-specificity hover for the left and right 75% dividers */
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-split.mod-left-split > .workspace-leaf-resize-handle:hover,
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-split.mod-right-split > .workspace-leaf-resize-handle:hover,
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-split.mod-left-split > .workspace-leaf-resize-handle:active,
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-split.mod-right-split > .workspace-leaf-resize-handle:active,
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-split.mod-left-split > .workspace-leaf-resize-handle.is-grabbing,
|
|
body:not(.layout-card):not(.toggle-panel-borders):not(.is-mobile) .workspace-split.mod-right-split > .workspace-leaf-resize-handle.is-grabbing {
|
|
background-color: var(--color-accent) !important;
|
|
opacity: 1 !important;
|
|
transition: background-color 0.15s ease-in-out !important;
|
|
}
|
|
|
|
/* ==========================================================
|
|
5. CARD LAYOUT LOGIC
|
|
========================================================== */
|
|
body.layout-card:not(.is-mobile) .workspace::before {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Custom Gap Logic for Cards (Syncs with Style Settings!) */
|
|
body.layout-card:not(.is-mobile) .workspace-split.mod-vertical {
|
|
gap: var(--layout-gap-middle, 8px) !important;
|
|
}
|
|
body.layout-card:not(.is-mobile) .workspace.is-left-sidedock-open .workspace-split.mod-horizontal.mod-left-split {
|
|
margin-right: var(--layout-gap-middle, 8px) !important;
|
|
}
|
|
body.layout-card:not(.is-mobile) .workspace.is-right-sidedock-open .workspace-split.mod-horizontal.mod-right-split {
|
|
margin-left: var(--layout-gap-middle, 8px) !important;
|
|
}
|
|
|
|
/* Outer Gaps (Perfectly frames the cards against the Right and Bottom window edges) */
|
|
body.layout-card:not(.is-mobile) .workspace {
|
|
padding-right: var(--layout-gap-right, 8px) !important;
|
|
padding-bottom: var(--layout-gap-bottom, 8px) !important;
|
|
margin-right: 0px !important; /* Overrides the native theme's hardcoded margin */
|
|
}
|
|
|
|
/* Shape the containers as cards */
|
|
body.layout-card:not(.is-mobile) .workspace-tab-container {
|
|
border-radius: 12px !important;
|
|
overflow: hidden !important;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
/* Fallback: If Card Layout is ON but Custom Colors are OFF, give cards a default solid background */
|
|
body.layout-card:not(.toggle-left-panel) .workspace-split.mod-left-split .workspace-tab-container,
|
|
body.layout-card:not(.toggle-middle-panel) .workspace-split.mod-root .workspace-tab-container,
|
|
body.layout-card:not(.toggle-right-panel) .workspace-split.mod-right-split .workspace-tab-container {
|
|
background-color: var(--background-primary) !important;
|
|
}
|
|
|
|
/* Clean up tab bar areas for cards */
|
|
body.layout-card:not(.is-mobile) .workspace-tabs,
|
|
body.layout-card:not(.is-mobile) .workspace-split {
|
|
overflow: visible !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Apply custom card background color & opacity when toggled ON */
|
|
body.layout-card.toggle-card-bg:not(.is-mobile) .workspace-split.mod-left-split .workspace-tab-container,
|
|
body.layout-card.toggle-card-bg:not(.is-mobile) .workspace-split.mod-root .workspace-tab-container,
|
|
body.layout-card.toggle-card-bg:not(.is-mobile) .workspace-split.mod-right-split .workspace-tab-container {
|
|
background-color: var(--card-bg-color) !important;
|
|
}
|
|
|
|
|
|
/* graph view*/
|
|
.graph-controls {
|
|
right: var(--size-4-2);
|
|
top: var(--size-4-2);
|
|
}
|
|
|
|
.graph-controls.is-close {
|
|
border: 1px solid var(--background-modifier-border);
|
|
padding: 0px;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.graph-controls-button.mod-open,
|
|
.graph-controls-button.mod-animate {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 0px;
|
|
--icon-color: var(--text-normal);
|
|
}
|