2530 lines
62 KiB
CSS
2530 lines
62 KiB
CSS
/**---------------------**
|
|
*! Obsidian Everforest
|
|
*?
|
|
*? 1. Variables
|
|
*? - Implementation
|
|
*? 2. Themes
|
|
*? - Dark
|
|
*? - Light
|
|
*? 2. General UI
|
|
*? - Workspace
|
|
*? - Menus
|
|
*? - Sidebars
|
|
*? - Canvas
|
|
*? - Loading Screen
|
|
*? 4. Markdown
|
|
*? - Emphasis
|
|
*? - Code
|
|
*? - Links
|
|
*? - Lists
|
|
*? - Blockquotes
|
|
*? - Tables
|
|
*? - Tags
|
|
*? - Embeds
|
|
*? - YAML
|
|
*? - Graph
|
|
*? 5. Mobile
|
|
*? 6. Cursor
|
|
*? 7. Style Settings
|
|
*? - Custom Stacked Panes
|
|
*? - Custom Background Image
|
|
*? 8. Extra Fixes
|
|
*? - Callouts
|
|
*? - Image Formatting
|
|
*? - CSS Classes
|
|
*? - Misc.
|
|
*?
|
|
**---------------------**/
|
|
|
|
/**** Implementation ****/
|
|
|
|
:root body:where(.theme-dark, .theme-light) {
|
|
/** Miscellaneous **/
|
|
|
|
--checkbox-size: calc(var(--font-text-size) - 2px);
|
|
--checkbox-radius: 25%;
|
|
|
|
/* Adjusted in Style Settings */
|
|
--list-indent: var(--list-indent-custom, 28px);
|
|
--list-spacing: 0;
|
|
--list-bullet-size: 6px;
|
|
|
|
--file-folding-offset: 22px;
|
|
|
|
--shadow-l: 0 4px 14px -2px hsla(0, 0%, 0%, 40%);
|
|
|
|
/* Adjusted in Style Settings */
|
|
--file-line-width: var(--readable-line-length-custom, 700px);
|
|
|
|
/** Backgrounds **/
|
|
|
|
--background-modifier-border: var(--bg5);
|
|
--background-modifier-border-hover: var(--bg3);
|
|
--background-embed: var(--background-embed-transparent);
|
|
--embed-block-shadow-hover: var(--shadow-l);
|
|
--blockquote-background-color: var(--background-embed);
|
|
|
|
--background-primary: var(--bg0);
|
|
--background-primary-rgb: var(--bg0-rgb);
|
|
--background-primary-alt: var(--bg0);
|
|
--background-secondary: var(--bg0);
|
|
--background-secondary-alt: var(--bg0);
|
|
|
|
/** General Colors **/
|
|
|
|
--text-normal: var(--fg);
|
|
--text-muted: var(--color-base-70);
|
|
--text-faint: var(--grey1);
|
|
--text-selection: var(--bg-visual);
|
|
|
|
--link-color: var(--header-aqua);
|
|
--link-color-hover: var(--fg-aqua);
|
|
--link-external-color: var(--header-blue);
|
|
--link-external-color-hover: var(--fg-blue);
|
|
--text-accent: var(--header-blue);
|
|
--text-accent-hover: var(--header-purple);
|
|
|
|
--link-unresolved-decoration-style: dashed;
|
|
--link-unresolved-color: var(--header-blue);
|
|
--link-unresolved-color-hover: var(--header-purple); /* Non-standard */
|
|
--link-unresolved-decoration-color: var(--bg-red);
|
|
--link-unresolved-decoration-color-hover: var(--fg-red); /* Non-standard */
|
|
|
|
--code-header: #0004;
|
|
--code-background: var(--bg-dim);
|
|
--code-normal: var(--text-muted);
|
|
--code-inline: var(--fg-blue);
|
|
|
|
--code-normal: var(--fg);
|
|
--code-comment: var(--grey1);
|
|
--code-function: var(--fg-green);
|
|
--code-important: var(--fg-red);
|
|
--code-keyword: var(--fg-blue);
|
|
--code-operator: var(--fg-orange);
|
|
--code-property: var(--fg-aqua);
|
|
--code-punctuation: var(--grey1);
|
|
--code-string: var(--fg-yellow);
|
|
--code-tag: var(--fg-orange);
|
|
--code-value: var(--fg-purple);
|
|
|
|
--table-background: var(--bg2);
|
|
--table-column-alt-background: unset;
|
|
--table-row-alt-background: var(--bg1);
|
|
--table-header-background: var(--bg-green);
|
|
--table-header-background-hover: var(--bg-green);
|
|
--table-row-background-hover: var(--bg4);
|
|
|
|
--interactive-before: var(--bg4);
|
|
--interactive-accent: var(--header-aqua);
|
|
--interactive-accent-hover: var(--header-blue);
|
|
|
|
--text-highlight-bg: var(--bg-yellow);
|
|
|
|
--heading-formatting: ;
|
|
|
|
--tag-color: var(--header-blue);
|
|
--tag-background: hsla(var(--tag-color-hsl), 0.1);
|
|
--tag-background-hover: hsla(var(--tag-color-hsl), 0.2);
|
|
|
|
--checkbox-color: var(--fg-blue);
|
|
|
|
--canvas-dot-pattern: var(--color-base-50);
|
|
|
|
/** Headers **/
|
|
|
|
--h1-color: var(--header-red);
|
|
--h2-color: var(--header-orange);
|
|
--h3-color: var(--header-yellow);
|
|
--h4-color: var(--header-green);
|
|
--h5-color: var(--header-blue);
|
|
--h6-color: var(--header-purple);
|
|
|
|
--h1-size: 2.125em;
|
|
--h2-size: 1.625em;
|
|
--h3-size: 1.375em;
|
|
--h4-size: 1.25em;
|
|
--h5-size: 1.125em;
|
|
--h6-size: 1em;
|
|
|
|
--h1-line-height: 1.5;
|
|
--h2-line-height: 1.5;
|
|
--h3-line-height: 1.5;
|
|
--h4-line-height: 1.5;
|
|
--h5-line-height: 1.5;
|
|
--h6-line-height: 1.5;
|
|
|
|
--h1-weight: 500;
|
|
--h2-weight: 500;
|
|
--h3-weight: 500;
|
|
--h4-weight: 500;
|
|
--h5-weight: 500;
|
|
--h6-weight: 500;
|
|
}
|
|
|
|
/** Mobile mode fixes **/
|
|
:root body.is-mobile {
|
|
--input-shadow-hover: var(--input-shadow);
|
|
--input-border-width: 1px;
|
|
--file-margins: 16px 20px;
|
|
}
|
|
/* Dark mode */
|
|
:root body.is-mobile.theme-dark {
|
|
--input-shadow: inset 0 1px 1px 0.5px rgba(255, 255, 255, 0.1),
|
|
0 2px 4px rgba(0, 0, 0, 0.4);
|
|
--interactive-normal: var(--color-base-30);
|
|
--background-modifier-form-field: var(--color-base-25);
|
|
}
|
|
/* Light mode */
|
|
:root body.is-mobile.theme-light {
|
|
--input-shadow: inset 0 0 0.5px 1px rgba(0, 0, 0, 0.1),
|
|
0 2px 3px rgba(0, 0, 0, 0.1);
|
|
--interactive-normal: var(--color-base-00);
|
|
--background-modifier-form-field: var(--color-base-00);
|
|
}
|
|
|
|
/**** Theme Colors ****/
|
|
|
|
/** Dark Theme (Soft) **/
|
|
|
|
:root .theme-dark {
|
|
--bg-dim-rgb: 41, 49, 54;
|
|
--bg-dim: #293136;
|
|
--bg0: #333c43;
|
|
--bg1: #3a464c;
|
|
--bg2: #434f55;
|
|
--bg3: #4d5960;
|
|
--bg4: #555f66;
|
|
--bg5: #5d6b66;
|
|
|
|
--bg-visual: #5c3f4f;
|
|
--bg-red: #59464c;
|
|
--bg-green: #48584e;
|
|
--bg-blue: #3f5865;
|
|
--bg-yellow: #55544a;
|
|
|
|
--fg: #d3c6aa;
|
|
|
|
--fg-red: #e67e80;
|
|
--fg-orange: #e69875;
|
|
--fg-yellow: #dbbc7f;
|
|
--fg-green: #a7c080;
|
|
--fg-aqua: #83c092;
|
|
--fg-blue: #7fbbb3;
|
|
--fg-purple: #d699b6;
|
|
|
|
--header-red: #da6362;
|
|
--header-orange: #d77f48;
|
|
--header-yellow: #bf983d;
|
|
--header-green: #899c40;
|
|
--header-aqua: #569d79;
|
|
--header-blue: #5a93a2;
|
|
--header-purple: #b87b9d;
|
|
|
|
--grey0: #7a8478;
|
|
--grey1: #859289;
|
|
--grey2: #9da9a0;
|
|
|
|
--statusline0: #a7c080;
|
|
--statusline1: #d3c6aa;
|
|
--statusline2: #e67e80;
|
|
|
|
--bg0-rgb: 51, 60, 67;
|
|
--background-embed-transparent: rgba(62, 75, 80, 0.7);
|
|
--tag-color-hsl: 254, 80%, 68%;
|
|
}
|
|
|
|
/** Light Theme (Hard) **/
|
|
|
|
:root .theme-light {
|
|
--bg-dim-rgb: 242, 239, 223;
|
|
--bg-dim: #f2efdf;
|
|
--bg0: #fffbef;
|
|
--bg1: #f8f5e4;
|
|
--bg2: #f2efdf;
|
|
--bg3: #edeada;
|
|
--bg4: #e8e5d5;
|
|
--bg5: #bec5b2;
|
|
|
|
--bg-visual: #ded8db; /* Changed for visibility */
|
|
--bg-red: #ffe7de;
|
|
--bg-green: #f3f5d9;
|
|
--bg-blue: #ecf5ed;
|
|
--bg-yellow: #fef2d5;
|
|
|
|
--fg: #5c6a72;
|
|
|
|
--fg-red: #f85552;
|
|
--fg-orange: #f57d26;
|
|
--fg-yellow: #dfa000;
|
|
--fg-green: #8da101;
|
|
--fg-aqua: #35a77c;
|
|
--fg-blue: #3a94c5;
|
|
--fg-purple: #df69ba;
|
|
|
|
--header-red: #f85552;
|
|
--header-orange: #f88f44;
|
|
--header-yellow: #f3b931;
|
|
--header-green: #abd113;
|
|
--header-aqua: #569d79;
|
|
--header-blue: #5a93a2;
|
|
--header-purple: #dd2b8d;
|
|
|
|
--grey0: #a6b0a0;
|
|
--grey1: #939f91;
|
|
--grey2: #829181;
|
|
|
|
--statusline0: #93b259;
|
|
--statusline1: #708089;
|
|
--statusline2: #e66868;
|
|
|
|
--bg0-rgb: 255, 251, 239;
|
|
--background-embed-transparent: rgb(238 236 213 / 70%); /* Using bg2 */
|
|
--tag-color-hsl: 254, 80%, 68%;
|
|
}
|
|
|
|
/**** General UI ****/
|
|
|
|
/** Workspace **/
|
|
|
|
/* Title bar */
|
|
.workspace-leaf .view-header {
|
|
box-shadow: 0 0 8px -4px var(--divider-color);
|
|
}
|
|
|
|
/* Title text */
|
|
.view-header-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Gutters */
|
|
.markdown-source-view.mod-cm6 .cm-gutters {
|
|
padding-inline-end: var(--file-folding-offset);
|
|
pointer-events: none;
|
|
}
|
|
.cm-gutter .cm-active {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Make gutters not affect the content flow for unstacked tabs */
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.mod-cm6.is-readable-line-width:not(.full-width),
|
|
body:not(.stacked-panes-gutter-disable-float)
|
|
.workspace-tabs.mod-stacked
|
|
.mod-cm6.is-readable-line-width {
|
|
.cm-contentContainer {
|
|
display: grid !important;
|
|
}
|
|
:is(.cm-gutters, .cm-content) {
|
|
grid-area: 1 / -1;
|
|
}
|
|
.cm-content {
|
|
width: unset !important;
|
|
}
|
|
.cm-gutters {
|
|
justify-self: left;
|
|
translate: -100% 0;
|
|
}
|
|
}
|
|
|
|
/* Smaller margins for stacked tabs */
|
|
.mod-stacked {
|
|
--file-margins: 32px 12px;
|
|
}
|
|
|
|
/* Collapse indicator */
|
|
.markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator {
|
|
padding-right: 0.45rem;
|
|
}
|
|
.markdown-source-view.mod-cm6
|
|
.cm-line:not(.cm-active):not(.HyperMD-header):not(
|
|
.HyperMD-task-line,
|
|
.HyperMD-list-line-1
|
|
)
|
|
.cm-fold-indicator
|
|
.collapse-indicator {
|
|
padding-right: 0.75rem;
|
|
}
|
|
div ul.has-list-bullet ul.has-list-bullet .collapse-indicator {
|
|
margin-left: -2.75rem;
|
|
}
|
|
.markdown-rendered .list-collapse-indicator {
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
/* Hide extra tab dividers */
|
|
.workspace-tab-header:has(+ .is-active) > .workspace-tab-header-inner::after {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Change outliner navigation highlight */
|
|
.is-flashing {
|
|
background-color: transparent !important;
|
|
color: inherit;
|
|
border-radius: 0;
|
|
box-shadow: 0 4px 0 var(--text-highlight-bg);
|
|
}
|
|
|
|
/* Fix gutter number vertical cutoff */
|
|
:root .cm-lineNumbers .cm-gutterElement {
|
|
line-height: normal !important;
|
|
}
|
|
|
|
/** Menus **/
|
|
|
|
/* Checkboxes and dropdowns */
|
|
select:hover,
|
|
select:focus-within,
|
|
button:hover {
|
|
transition: background-color var(--anim-duration-superfast) ease-out;
|
|
}
|
|
|
|
/* Modal transitions */
|
|
body:not(.disable-menu-animations, .enable-menu-blur) .modal-bg {
|
|
animation: fade-in var(--anim-duration-superfast) linear;
|
|
}
|
|
body:not(.disable-menu-animations) :is(.modal, .prompt) {
|
|
animation:
|
|
fade-in var(--anim-duration-superfast),
|
|
slide-in var(--anim-duration-superfast) ease-out;
|
|
}
|
|
@keyframes slide-in {
|
|
0% {
|
|
translate: 0 4px;
|
|
}
|
|
100% {
|
|
translate: 0 0;
|
|
}
|
|
}
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/** Sidebars **/
|
|
|
|
/* Stop the scrollbar from causing layout shifts */
|
|
.nav-files-container {
|
|
scrollbar-gutter: stable;
|
|
padding-right: var(--size-2-2);
|
|
}
|
|
|
|
/** Canvas **/
|
|
|
|
/* Changed in Style Settings */
|
|
|
|
/** Loading Screen **/
|
|
|
|
/* Text trees */
|
|
.progress-bar-message::before {
|
|
content: "🌲 ";
|
|
}
|
|
.progress-bar-message::after {
|
|
content: " 🌲";
|
|
}
|
|
|
|
/* Progress bars */
|
|
.progress-bar-indicator {
|
|
height: 12px;
|
|
overflow-y: hidden;
|
|
width: min(90vw, 1200px);
|
|
}
|
|
.progress-bar-indicator,
|
|
.progress-bar-subline {
|
|
border-radius: 12px;
|
|
}
|
|
.progress-bar-line,
|
|
.progress-bar-subline {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
/**** Markdown ****/
|
|
|
|
/** Headers **/
|
|
|
|
/* Fix update formatting coloring */
|
|
.cm-formatting-header {
|
|
color: unset;
|
|
}
|
|
|
|
/* Remove top padding from the first element in reading mode (presumably a header) */
|
|
.mod-header + div:has(pre.frontmatter) + div > *,
|
|
.mod-header + div > * {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/** Emphasis **/
|
|
|
|
/* Bold and italic */
|
|
.cm-s-obsidian span.cm-strong,
|
|
strong,
|
|
.cm-s-obsidian span.cm-em,
|
|
em,
|
|
.language-markdown :is(.bold, .italic) > *,
|
|
span:is(.cm-em, .cm-strong) + .cm-widgetBuffer + span.math,
|
|
span.math:has(+ .cm-widgetBuffer + span:is(.cm-em, .cm-strong)) {
|
|
color: var(--fg-purple);
|
|
}
|
|
|
|
/* Strike through */
|
|
.cm-strikethrough,
|
|
del {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/** Code **/
|
|
|
|
/* Inline code */
|
|
.cm-s-obsidian
|
|
span.cm-inline-code:not(.cm-formatting):not(
|
|
.cm-formatting + .cm-inline-code
|
|
),
|
|
.markdown-rendered code {
|
|
background-color: var(--code-background);
|
|
padding: 0.1em 0.25em;
|
|
border-radius: var(--radius-s);
|
|
font-size: var(--code-size) !important; /* required for lp */
|
|
}
|
|
/* Fix other elements' inline code */
|
|
.cm-s-obsidian span.cm-inline-code:not(.cm-formatting),
|
|
.markdown-rendered
|
|
:is(table, p, li, .callout-title-inner, h1, h2, h3, h4, h5, h6)
|
|
code {
|
|
color: var(--code-inline);
|
|
}
|
|
|
|
/* Codeblock */
|
|
.cm-s-obsidian pre.HyperMD-codeblock {
|
|
background-color: var(--code-background);
|
|
}
|
|
pre {
|
|
border: 1px solid var(--code-header);
|
|
}
|
|
.HyperMD-codeblock {
|
|
border-color: var(--code-header);
|
|
border-style: solid;
|
|
border-width: 0 1px 0;
|
|
}
|
|
.HyperMD-codeblock-begin {
|
|
border-width: 1px 1px 0;
|
|
}
|
|
.HyperMD-codeblock-end {
|
|
border-width: 0 1px 1px;
|
|
}
|
|
|
|
/* Disable wrap on language blocks */
|
|
.markdown-reading-view .markdown-preview-view pre:not(.frontmatter) code {
|
|
white-space: pre;
|
|
}
|
|
|
|
/* Codeblock top bars */
|
|
pre[class^="language-"] {
|
|
padding-top: calc(
|
|
var(--size-4-2) + var(--code-size) * var(--line-height-normal) + 1px
|
|
);
|
|
}
|
|
pre[class^="language-"]::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
height: calc(var(--code-size) * var(--line-height-normal));
|
|
background-color: var(--code-header);
|
|
}
|
|
.HyperMD-codeblock-begin-bg:not(:has(> .code-block-flair > *)):has(
|
|
> .code-block-flair
|
|
) {
|
|
overflow: hidden;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: var(--code-header);
|
|
/* border-radius: 4px 4px 0 0; */
|
|
}
|
|
}
|
|
|
|
/* Codeblock language labels */
|
|
pre[class^="language-"]::after {
|
|
content: attr(class);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 6px;
|
|
padding: 0 4px;
|
|
height: calc(1em * var(--line-height-normal));
|
|
display: flex;
|
|
place-items: center;
|
|
color: var(--text-muted);
|
|
font-size: 0.875em;
|
|
}
|
|
.markdown-source-view.mod-cm6 .code-block-flair:not(:has(> svg)) {
|
|
top: 0;
|
|
padding: 0 4px;
|
|
height: calc(1em * var(--line-height-normal));
|
|
display: flex;
|
|
place-items: center;
|
|
font-family: var(--font-monospace);
|
|
font-size: 1em;
|
|
}
|
|
.markdown-rendered pre[class^="language-"] button.copy-code-button {
|
|
top: calc(6px + var(--code-size) * var(--line-height-normal));
|
|
}
|
|
|
|
pre.language-applescript::after {
|
|
content: "AppleScript";
|
|
}
|
|
pre.language-armasm::after,
|
|
pre.language-arm-asm::after {
|
|
content: "ARM Assembly";
|
|
}
|
|
pre.language-bash::after {
|
|
content: "Bash";
|
|
}
|
|
pre.language-c::after {
|
|
content: "C";
|
|
}
|
|
pre.language-cpp::after {
|
|
content: "C++";
|
|
}
|
|
pre.language-cs::after {
|
|
content: "C#";
|
|
}
|
|
pre.language-css::after {
|
|
content: "CSS";
|
|
}
|
|
pre.language-flow::after {
|
|
content: "Flow";
|
|
}
|
|
pre.language-git::after {
|
|
content: "GIT";
|
|
}
|
|
pre.language-haskell::after {
|
|
content: "Haskell";
|
|
}
|
|
pre.language-html::after {
|
|
content: "HTML";
|
|
}
|
|
pre.language-ini::after {
|
|
content: "INI";
|
|
}
|
|
pre.language-java::after {
|
|
content: "JAVA";
|
|
}
|
|
pre.language-javascript::after {
|
|
content: "JavaScript";
|
|
}
|
|
pre.language-js::after {
|
|
content: "JavaScript";
|
|
}
|
|
pre.language-json::after {
|
|
content: "JSON";
|
|
}
|
|
pre.language-lua::after {
|
|
content: "Lua";
|
|
}
|
|
pre.language-makefile::after {
|
|
content: "Makefile";
|
|
}
|
|
pre.language-md::after,
|
|
pre.language-markdown::after {
|
|
content: "Markdown";
|
|
}
|
|
pre.language-matlab::after {
|
|
content: "MATLAB";
|
|
}
|
|
pre.language-nginx::after {
|
|
content: "Nginx";
|
|
}
|
|
pre.language-node::after {
|
|
content: "Node";
|
|
}
|
|
pre.language-php::after {
|
|
content: "PHP";
|
|
}
|
|
pre.language-py::after {
|
|
content: "Python";
|
|
}
|
|
pre.language-python::after {
|
|
content: "Python";
|
|
}
|
|
pre.language-r::after {
|
|
content: "R";
|
|
}
|
|
pre.language-react::after {
|
|
content: "React";
|
|
}
|
|
pre.language-regex::after {
|
|
content: "Regex";
|
|
}
|
|
pre.language-rust::after {
|
|
content: "Rust";
|
|
}
|
|
pre.language-sequence::after {
|
|
content: "Sequence";
|
|
}
|
|
pre.language-shell::after {
|
|
content: "Shell";
|
|
}
|
|
pre.language-sql::after {
|
|
content: "SQL";
|
|
}
|
|
pre.language-text::after {
|
|
content: "Plain Text";
|
|
}
|
|
pre.language-ts::after {
|
|
content: "TypeScript";
|
|
}
|
|
pre.language-toml::after {
|
|
content: "TOML";
|
|
}
|
|
pre.language-txt::after {
|
|
content: "Plain Text";
|
|
}
|
|
pre.language-typescript::after {
|
|
content: "TypeScript";
|
|
}
|
|
pre.language-url::after {
|
|
content: "URL";
|
|
}
|
|
pre.language-vim::after {
|
|
content: "vimrc";
|
|
}
|
|
pre.language-xml::after {
|
|
content: "XML";
|
|
}
|
|
pre.language-yaml::after {
|
|
content: "YAML";
|
|
}
|
|
pre.language-zsh::after {
|
|
content: "zsh";
|
|
}
|
|
|
|
/** Links **/
|
|
|
|
:root a {
|
|
transition: opacity 0s;
|
|
}
|
|
|
|
/* Unresolved links */
|
|
:root:root a.is-unresolved:hover,
|
|
.markdown-source-view.mod-cm6 .is-unresolved .cm-underline:hover {
|
|
text-decoration-color: var(--link-unresolved-decoration-color-hover);
|
|
color: var(--link-unresolved-color-hover);
|
|
}
|
|
.cm-s-obsidian span.cm-hmd-internal-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/** Lists **/
|
|
|
|
.markdown-source-view span.list-bullet {
|
|
padding-right: 0.3rem;
|
|
}
|
|
.markdown-preview-view .list-bullet::after {
|
|
font-size: 19px;
|
|
}
|
|
.markdown-source-view .list-bullet::after {
|
|
font-size: 19px;
|
|
}
|
|
|
|
/* Loose lists in reading mode */
|
|
:root:root:root li > p {
|
|
margin-block: var(--p-spacing);
|
|
}
|
|
|
|
/* Fix list bullets and indentation lines offset for reading mode */
|
|
.markdown-rendered .list-bullet {
|
|
margin-left: -12px;
|
|
}
|
|
:root .show-indentation-guide li :is(ul, ol)::before {
|
|
left: -11px;
|
|
}
|
|
ul > .task-list-item {
|
|
margin-left: 6px;
|
|
}
|
|
.show-indentation-guide .contains-task-list.has-list-bullet::before {
|
|
margin-left: -6px;
|
|
}
|
|
|
|
/* Fix ordered list checkboxes */
|
|
ol > li.task-list-item.is-checked[data-task="x"] {
|
|
text-decoration: var(--checklist-done-decoration);
|
|
color: var(--checklist-done-color);
|
|
}
|
|
|
|
/* Indentation lines*/
|
|
.cm-indent::before,
|
|
ul::before,
|
|
ol::before {
|
|
opacity: 0.5;
|
|
border-right: 2px solid var(--fg-blue) !important;
|
|
}
|
|
|
|
/* Checkbox list */
|
|
.markdown-source-view.mod-cm6 input.task-list-item-checkbox {
|
|
border-width: 1px;
|
|
}
|
|
input.task-list-item-checkbox:hover {
|
|
border-color: var(--header-blue);
|
|
}
|
|
input.task-list-item-checkbox:checked {
|
|
box-shadow: inset 0 0 0 calc(0.0625 * var(--font-text-size))
|
|
var(--background-primary);
|
|
transition: box-shadow 0s;
|
|
}
|
|
input.task-list-item-checkbox:checked::after {
|
|
-webkit-mask-size: calc(50% + 1px);
|
|
}
|
|
|
|
.checkbox-container {
|
|
background-color: var(--interactive-before);
|
|
transition: background-color var(--anim-duration-moderate)
|
|
cubic-bezier(0, 0.5, 0, 1);
|
|
}
|
|
.checkbox-container:after {
|
|
background-color: var(--interactive-accent);
|
|
}
|
|
.checkbox-container.is-enabled:after {
|
|
background-color: var(--bg3);
|
|
}
|
|
|
|
/** Blockquotes **/
|
|
|
|
.markdown-preview-view blockquote {
|
|
padding-block: 0.25em;
|
|
padding-left: 1.7ch;
|
|
}
|
|
|
|
/* Make blockquotes work in source view */
|
|
.markdown-source-view:not(.is-live-preview) .HyperMD-quote {
|
|
background-color: var(--background-embed);
|
|
border-left: var(--blockquote-border-thickness) solid
|
|
var(--blockquote-border-color);
|
|
}
|
|
.markdown-source-view:not(.is-live-preview)
|
|
.cm-formatting-quote:not(.cm-formatting-quote-1) {
|
|
position: relative;
|
|
}
|
|
.markdown-source-view:not(.is-live-preview)
|
|
.cm-formatting-quote:not(.cm-formatting-quote-1)::before {
|
|
content: "\200b";
|
|
position: absolute;
|
|
width: 1px;
|
|
border-left: var(--blockquote-border-thickness) solid
|
|
var(--blockquote-border-color);
|
|
color: transparent;
|
|
left: -2px;
|
|
}
|
|
|
|
/** Tables **/
|
|
|
|
.markdown-rendered table {
|
|
--line-height-tight: 1.375;
|
|
}
|
|
|
|
/* Fix table margin collapse bug and add table margins */
|
|
/* They keep changing this and it breaks the theme every time, I'm quite annoyed... */
|
|
.markdown-preview-view .block-language-dataview,
|
|
.markdown-preview-view div:not([class]):has(> table) {
|
|
overflow: unset !important;
|
|
|
|
> table {
|
|
margin-block: var(--p-spacing);
|
|
}
|
|
}
|
|
|
|
/* Fix borders from Dataview */
|
|
.table-view-table > thead > tr > th {
|
|
border-left: var(--table-header-border-width) solid
|
|
var(--table-header-border-color);
|
|
border-top: var(--table-header-border-width) solid
|
|
var(--table-header-border-color);
|
|
border-right: var(--table-header-border-width) solid
|
|
var(--table-header-border-color);
|
|
}
|
|
:root .table-view-table thead > tr > th {
|
|
border-width: var(--table-border-width) 0 3px var(--table-border-width);
|
|
}
|
|
:root .table-view-table thead > tr > th:last-child {
|
|
border-right-width: var(--table-border-width);
|
|
}
|
|
:root .table-view-table tbody > tr + tr > td {
|
|
border-top: var(--table-border-width) solid var(--table-border-color);
|
|
}
|
|
:root .table-view-table tbody > tr > td {
|
|
border-left: var(--table-border-width) solid var(--table-border-color);
|
|
}
|
|
:root .table-view-table tbody > tr > td:last-child {
|
|
border-right: var(--table-border-width) solid var(--table-border-color);
|
|
}
|
|
:root .table-view-table tbody > tr:last-child > td {
|
|
border-bottom: var(--table-border-width) solid var(--table-border-color);
|
|
}
|
|
|
|
/** Tags **/
|
|
|
|
.cm-s-obsidian span.cm-hashtag,
|
|
a.tag {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Remove spacing between h1 + tag */
|
|
div:has(+ div > p > .tag) > h1 {
|
|
margin-bottom: 0;
|
|
}
|
|
div:has(h1) + div p:has(.tag) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/** Embeds **/
|
|
|
|
.markdown-embed {
|
|
--icon-opacity: 0.25;
|
|
padding-inline: 10px;
|
|
padding-block: 0.25rem;
|
|
}
|
|
|
|
/* Fix overflow blocks ruining margin collapse */
|
|
.markdown-embed .markdown-preview-sizer > div {
|
|
overflow-x: unset !important;
|
|
}
|
|
|
|
/* Add a shadow to embeds */
|
|
.cm-embed-block {
|
|
box-shadow: 0 4px 14px -2px hsla(0, 0%, 0%, 0%);
|
|
transition: box-shadow var(--anim-duration-fast) ease-out;
|
|
}
|
|
|
|
/* Reduce embed edit button opacity */
|
|
.markdown-source-view.mod-cm6 .cm-embed-block:hover .edit-block-button {
|
|
opacity: 0.5;
|
|
}
|
|
.markdown-source-view.mod-cm6 .cm-embed-block:hover .edit-block-button:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/*Embed titles*/
|
|
.markdown-embed-title {
|
|
display: none;
|
|
}
|
|
|
|
/* Embed backgrounds */
|
|
.internal-embed.is-loaded:not(.image-embed, [src$=".excalidraw"]) {
|
|
background-color: var(--blockquote-background-color);
|
|
}
|
|
|
|
/* Embed first header */
|
|
.markdown-embed-content
|
|
.markdown-preview-section
|
|
.mod-header
|
|
+ div
|
|
:is(h1, h2, h3, h4, h5, h6) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Embed last p */
|
|
.markdown-embed-content .markdown-preview-section > div:last-child > p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/*
|
|
This snippet adds modification in the [[markdown link|modification]] format
|
|
*/
|
|
|
|
/* Clean embed (no background, padding, borders) */
|
|
.markdown-embed[alt~="clean"] {
|
|
--blockquote-background-color: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
/* Removes the first title */
|
|
.markdown-embed[alt~="no-title"]
|
|
.markdown-preview-section
|
|
> :is(.mod-header, .mod-header + div:has(.frontmatter))
|
|
+ div:has(h1, h2, h3, h4, h5, h6) {
|
|
display: none;
|
|
}
|
|
/* Removes the embed icon */
|
|
.markdown-embed[alt~="no-link"] .markdown-embed-link {
|
|
display: none;
|
|
}
|
|
|
|
/** YAML **/
|
|
|
|
/* Frontmatter error */
|
|
.markdown-rendered .frontmatter.mod-failed:after {
|
|
height: 0;
|
|
}
|
|
.mod-error {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/**** Graph ****/
|
|
|
|
.graph-view.color-circle,
|
|
.graph-view.color-fill-highlight {
|
|
color: var(--text-muted);
|
|
}
|
|
.graph-view.color-arrow {
|
|
color: var(--text-normal);
|
|
opacity: 0.5;
|
|
}
|
|
.graph-view.color-line {
|
|
color: var(--background-modifier-border);
|
|
}
|
|
.graph-view.color-fill-highlight,
|
|
.graph-view.color-line-highlight {
|
|
color: var(--interactive-accent);
|
|
}
|
|
.graph-view.color-fill-unresolved {
|
|
color: var(--text-muted);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/**** Mobile ****/
|
|
|
|
/* Add shadow to mobile navbar */
|
|
.mobile-navbar {
|
|
box-shadow: 0 0 8px -4px var(--divider-color);
|
|
}
|
|
/* Remove new tab button backgrounds */
|
|
.is-mobile .empty-state-action {
|
|
background-color: unset;
|
|
}
|
|
|
|
/**** Cursor ****/
|
|
|
|
.cm-cursorLayer .cm-cursor {
|
|
}
|
|
|
|
/* animation of the blinking */
|
|
.cm-cursorLayer {
|
|
/* deactivate built-in animation from CodeMirror */
|
|
animation-name: none !important; /* important needed */
|
|
}
|
|
|
|
.cm-cursorLayer .cm-cursor-secondary {
|
|
border-left-color: var(--text-accent) !important;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: 1200ms;
|
|
animation-timing-function: steps(1);
|
|
animation-name: cm-blink;
|
|
}
|
|
|
|
/* Vim mode cursor */
|
|
.cm-editor.cm-focused .cm-fat-cursor {
|
|
background: var(--fg);
|
|
color: var(--bg0);
|
|
}
|
|
|
|
.cm-editor:not(.cm-focused) .cm-fat-cursor {
|
|
outline-color: var(--fg);
|
|
}
|
|
|
|
/**** Style Settings ****/
|
|
|
|
/* @settings
|
|
|
|
name: Everforest Enchanted
|
|
id: everforest-enchanted-theme
|
|
collapsed: false
|
|
settings:
|
|
-
|
|
id: test-main-description
|
|
title: Welcome!
|
|
description: |
|
|
Use these settings to adjust basic extra settings or various extra elements of the theme. Visit the [GitHub Repo](https://github.com/FireIsGood/obsidian-everforest-enchanted) for more information.
|
|
type: info-text
|
|
markdown: true
|
|
-
|
|
id: editor-settings
|
|
title: Editor
|
|
description: Folders, line length, line numbers, menu modal blur
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
id: folder-settings
|
|
title: Folders
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: highlighted-folders
|
|
title: Enable highlighted active folders
|
|
description: Adds a background on opened folders.
|
|
type: class-toggle
|
|
-
|
|
id: line-length-settings
|
|
title: Line Length
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: readable-line-length-custom
|
|
title: Line length
|
|
description: Sets a custom readable line width in pixels.
|
|
type: variable-number
|
|
default: 700
|
|
format: px
|
|
-
|
|
id: wide-width-readable-line-length-custom
|
|
title: Wide Line length
|
|
description: Sets a custom readable line width for the CSS class "wide-width" in pixels.
|
|
type: variable-number
|
|
default: 1000
|
|
format: px
|
|
-
|
|
id: gutter-settings
|
|
title: Line Numbers
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: stacked-panes-gutter-disable-float
|
|
title: Disable stacked tabs floating line numbers
|
|
description: Disables custom line number floating in the stacked tab mode. This makes the line numbers shift over the content in stacked tabs. Use this if your panes are too thin to show them.
|
|
type: class-toggle
|
|
-
|
|
id: menu-blur-settings
|
|
title: Menu modals
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: disable-menu-animations
|
|
title: Disable menu animations
|
|
description: Disables the floating-up animation of modal menus (e.g. settings, command palette).
|
|
type: class-toggle
|
|
-
|
|
id: enable-menu-blur
|
|
title: Enable menu blur
|
|
description: Blur the content behind modal menus (e.g. settings, command palette).
|
|
type: class-toggle
|
|
-
|
|
id: menu-blur-radius
|
|
title: Menu blur radius
|
|
description: The amount to blur in pixels.
|
|
type: variable-number
|
|
default: 5
|
|
format: px
|
|
-
|
|
id: vim-cursor-settings
|
|
title: Vim
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: vim-curor-animate
|
|
title: Animate vim cursor
|
|
description: Adds an animation when moving the vim cursor.
|
|
type: class-toggle
|
|
-
|
|
id: vim-cursor-speed
|
|
title: Vim cursor speed
|
|
description: Speed at which the cursor will move
|
|
type: variable-select
|
|
default: var(--anim-duration-superfast)
|
|
options:
|
|
-
|
|
label: FTL
|
|
value: 30ms
|
|
-
|
|
label: Light speed
|
|
value: 45ms
|
|
-
|
|
label: Fast
|
|
value: 55ms
|
|
-
|
|
label: Normal
|
|
value: var(--anim-duration-superfast)
|
|
-
|
|
label: Slow
|
|
value: var(--anim-duration-fast)
|
|
-
|
|
label: Very slow
|
|
value: var(--anim-duration-moderate)
|
|
-
|
|
label: Snail speed
|
|
value: var(--anim-duration-slow)
|
|
-
|
|
label: Molases in January
|
|
value: 1000ms
|
|
-
|
|
label: 0 degrees kelvin
|
|
value: 5s
|
|
-
|
|
label: The seconds hand of the analogue clock in your least favorite middle school class
|
|
value: 20s
|
|
-
|
|
label: Zeno's paradox
|
|
value: 60s
|
|
-
|
|
id: element-settings
|
|
title: Elements
|
|
description: Canvas, headers, image embeds, links, lists, math blocks, tables
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
id: canvas-settings
|
|
title: Canvas
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: canvas-dot-size
|
|
title: Canvas - Background dot size
|
|
description: The size of dots on the canvas. It starts breaking past 10.
|
|
type: variable-number
|
|
default: 0.7
|
|
format: px
|
|
-
|
|
id: header-settings
|
|
title: Headers
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: h1-settings
|
|
title: Header 1 settings
|
|
type: heading
|
|
level: 3
|
|
collapsed: true
|
|
-
|
|
id: h1-underline
|
|
title: Headers - h1 underline
|
|
description: Enable h1 underline.
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h1-underline-style
|
|
title: Headers - h1 underline style
|
|
description: Change style of the h1 underline
|
|
type: variable-select
|
|
default: solid
|
|
options:
|
|
-
|
|
label: Solid
|
|
value: solid
|
|
-
|
|
label: Dotted
|
|
value: dotted
|
|
-
|
|
label: Dashed
|
|
value: dashed
|
|
-
|
|
id: h2-settings
|
|
title: Header 2 settings
|
|
type: heading
|
|
level: 3
|
|
collapsed: true
|
|
-
|
|
id: h2-underline
|
|
title: Headers - H2 underline
|
|
description: Enable h2 underline.
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h2-underline-style
|
|
title: Headers - H2 underline style
|
|
description: Change style of the h2 underline
|
|
type: variable-select
|
|
default: solid
|
|
options:
|
|
-
|
|
label: Solid
|
|
value: solid
|
|
-
|
|
label: Dotted
|
|
value: dotted
|
|
-
|
|
label: Dashed
|
|
value: dashed
|
|
-
|
|
id: h3-settings
|
|
title: Header 3 settings
|
|
type: heading
|
|
level: 3
|
|
collapsed: true
|
|
-
|
|
id: h3-underline
|
|
title: Headers - h3 underline
|
|
description: Enable h3 underline.
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h3-underline-style
|
|
title: Headers - h3 underline style
|
|
description: Change style of the h3 underline
|
|
type: variable-select
|
|
default: solid
|
|
options:
|
|
-
|
|
label: Solid
|
|
value: solid
|
|
-
|
|
label: Dotted
|
|
value: dotted
|
|
-
|
|
label: Dashed
|
|
value: dashed
|
|
-
|
|
id: h4-settings
|
|
title: Header 4 settings
|
|
type: heading
|
|
level: 3
|
|
collapsed: true
|
|
-
|
|
id: h4-underline
|
|
title: Headers - h4 underline
|
|
description: Enable h4 underline.
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h4-underline-style
|
|
title: Headers - h4 underline style
|
|
description: Change style of the h4 underline
|
|
type: variable-select
|
|
default: solid
|
|
options:
|
|
-
|
|
label: Solid
|
|
value: solid
|
|
-
|
|
label: Dotted
|
|
value: dotted
|
|
-
|
|
label: Dashed
|
|
value: dashed
|
|
-
|
|
id: h5-settings
|
|
title: Header 5 settings
|
|
type: heading
|
|
level: 3
|
|
collapsed: true
|
|
-
|
|
id: h5-underline
|
|
title: Headers - h5 underline
|
|
description: Enable h5 underline.
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h5-underline-style
|
|
title: Headers - h5 underline style
|
|
description: Change style of the h5 underline
|
|
type: variable-select
|
|
default: solid
|
|
options:
|
|
-
|
|
label: Solid
|
|
value: solid
|
|
-
|
|
label: Dotted
|
|
value: dotted
|
|
-
|
|
label: Dashed
|
|
value: dashed
|
|
-
|
|
id: h6-settings
|
|
title: Header 6 settings
|
|
type: heading
|
|
level: 3
|
|
collapsed: true
|
|
-
|
|
id: h6-underline
|
|
title: Headers - h6 underline
|
|
description: Enable h6 underline.
|
|
type: class-toggle
|
|
default: false
|
|
-
|
|
id: h6-underline-style
|
|
title: Headers - h6 underline style
|
|
description: Change style of the h6 underline
|
|
type: variable-select
|
|
default: solid
|
|
options:
|
|
-
|
|
label: Solid
|
|
value: solid
|
|
-
|
|
label: Dotted
|
|
value: dotted
|
|
-
|
|
label: Dashed
|
|
value: dashed
|
|
-
|
|
id: image-embed-settings
|
|
title: Image Embeds
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: image-embed-enable-zoom
|
|
title: Image Embeds - Enable zoom
|
|
description: Enable zooming in on images by clicking on them. Just like minimal! Note that mobile Obsidian already has this.
|
|
type: class-toggle
|
|
-
|
|
id: image-embed-no-drag
|
|
title: Image Embeds - Disable dragging
|
|
description: Stop zoomed images from being dragged around. This breaks the blur keyword.
|
|
type: class-toggle
|
|
-
|
|
id: image-embed-stretch
|
|
title: Image Embeds - Stretch all images to fit the full width
|
|
description: Makes all images stretch to fit the full width by default. Added as an option to revert behavior.
|
|
type: class-toggle
|
|
-
|
|
id: link-settings
|
|
title: Links
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: external-link-remove-icon
|
|
title: Links - Remove external link icon
|
|
description: Removes the link icon from external links.
|
|
type: class-toggle
|
|
-
|
|
id: list-settings
|
|
title: Lists
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: list-indent-custom
|
|
title: Lists - List indent size
|
|
description: The size of list item indents. The default value set here of 28px mimics the appearance of editing mode. If you want a more default experience, the default theme uses 2.25em which is essentially 36px. Currently does not work as intended due to JS changes in Obsidian 1.5 which is sad... There are technically workarounds but they would not be very clean.
|
|
type: variable-number
|
|
default: 28
|
|
format: px
|
|
-
|
|
id: math-settings
|
|
title: Math blocks
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: disable-math-outline
|
|
title: Math blocks - Disable outline
|
|
description: Removes the outline around math blocks.
|
|
type: class-toggle
|
|
-
|
|
id: table-settings
|
|
title: Tables
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: centered-tables
|
|
title: Tables - Center alignment
|
|
description: Aligns tables to the center.
|
|
type: class-toggle
|
|
-
|
|
id: full-width-tables
|
|
title: Tables - Full width
|
|
description: Makes tables fit the full width.
|
|
type: class-toggle
|
|
-
|
|
id: rounded-tables
|
|
title: Tables - Rounded corners
|
|
description: Adds a rounded effect to table corners. Automatically disabled when a table has rowspan as it is not possible to guarantee the correct corners are rounded.
|
|
type: class-toggle
|
|
-
|
|
id: rounded-tables-radius
|
|
title: Tables - Rounded corners radius
|
|
description: The corner radius of rounded tables. You may need to reload tabs to see the effect.
|
|
type: variable-number
|
|
default: 8
|
|
format: px
|
|
-
|
|
id: extra-appearance-settings
|
|
title: Extras
|
|
description: Background images, Stacked panes with a count, visual parity between modes
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
id: background-image
|
|
title: Background Image
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: background-image-description
|
|
title: Info
|
|
description: |
|
|
Adds background images. This is easiest to do with an external URL. If you want to use local images for offline access, you'll have to use a snippet. Check the [GitHub Repo documentation](https://github.com/FireIsGood/obsidian-everforest-enchanted/blob/main/custom_background_image.md) for more information.
|
|
type: info-text
|
|
markdown: true
|
|
-
|
|
id: background-image-enabled
|
|
title: Background Image
|
|
description: Enables the background image.
|
|
type: class-toggle
|
|
-
|
|
id: background-image-dark-url
|
|
title: Dark Mode Background URL
|
|
description: Set an online background image.
|
|
type: variable-text
|
|
default: url("http://")
|
|
-
|
|
id: background-image-light-url
|
|
title: Light Mode Background URL
|
|
description: Set an online background image.
|
|
type: variable-text
|
|
default: url("http://")
|
|
-
|
|
id: background-image-position
|
|
title: Background Position
|
|
description: Change where the image is centered.
|
|
type: variable-select
|
|
default: center
|
|
options:
|
|
-
|
|
label: Center
|
|
value: center
|
|
-
|
|
label: Top
|
|
value: top
|
|
-
|
|
label: Bottom
|
|
value: bottom
|
|
-
|
|
label: Left
|
|
value: left
|
|
-
|
|
label: Right
|
|
value: right
|
|
-
|
|
label: Top Left
|
|
value: top left
|
|
-
|
|
label: Top Right
|
|
value: top right
|
|
-
|
|
label: Bottom Left
|
|
value: bottom left
|
|
-
|
|
label: Bottom Right
|
|
value: bottom right
|
|
-
|
|
id: pane-opacity
|
|
title: Pane Opacity
|
|
description: How opaque page backgrounds are.
|
|
type: variable-number-slider
|
|
default: 0.85
|
|
min: 0
|
|
max: 1
|
|
step: 0.05
|
|
-
|
|
id: ui-opacity
|
|
title: UI Opacity
|
|
description: How opaque UI backgrounds are.
|
|
type: variable-number-slider
|
|
default: 0.85
|
|
min: 0
|
|
max: 1
|
|
step: 0.05
|
|
-
|
|
id: tab-opacity
|
|
title: Tab Opacity
|
|
description: How opaque STACKED TAB backgrounds are.
|
|
type: variable-number-slider
|
|
default: 0.85
|
|
min: 0
|
|
max: 1
|
|
step: 0.05
|
|
-
|
|
id: background-image-fun
|
|
title: Fun Settings
|
|
type: heading
|
|
level: 3
|
|
collapsed: true
|
|
-
|
|
id: background-image-pane-view
|
|
title: Pane view
|
|
description: Changes pages to be panes on a transparent background. BEST USED WITH UI OPACITY 0!
|
|
type: class-toggle
|
|
-
|
|
id: custom-stacked-panes
|
|
title: Stacked Pane Count
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: custom-stacked-panes-description
|
|
title: Info
|
|
description: |
|
|
This setting turns stacked panes from a pixel width to a number visible on screen at once. Check the [GitHub Repo documentation](https://github.com/FireIsGood/obsidian-everforest-enchanted/blob/main/custom_stacked_panes.md) for more information.
|
|
type: info-text
|
|
markdown: true
|
|
-
|
|
id: custom-stacked-panes-enabled
|
|
title: Custom Stacked Panes
|
|
description: Changes stacked panes to fit a certain number on screen instead of using pixel values.
|
|
type: class-toggle
|
|
-
|
|
id: custom-stacked-panes-count
|
|
title: Pane Count
|
|
description: The number of panes to show up at once.
|
|
type: variable-number-slider
|
|
default: 2
|
|
min: 1
|
|
max: 5
|
|
step: 1
|
|
-
|
|
id: visual-parity
|
|
title: Visual Parity
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
-
|
|
id: visual-parity-description
|
|
title: Info
|
|
description: |
|
|
Changes reading mode to match editing mode visually. This mainly modifies the sizes of margins and makes the top element not have margin to simulare how it works in editing mode.
|
|
type: info-text
|
|
markdown: true
|
|
-
|
|
id: visual-parity-enabled
|
|
title: Visual Parity
|
|
description: Enables visual parity.
|
|
type: class-toggle
|
|
|
|
*/
|
|
|
|
/** Improve style setting appearance **/
|
|
/* Padding on the bottom */
|
|
[data-type="style-settings"] .view-content > div:last-child,
|
|
.vertical-tab-content > div:has(.style-settings-heading):last-child {
|
|
padding-bottom: 400px;
|
|
}
|
|
|
|
/* Remove default margins */
|
|
[data-id="everforest-enchanted-theme"]
|
|
+ .style-settings-container
|
|
.setting-item-heading {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Style headings */
|
|
[data-id="everforest-enchanted-theme"]
|
|
+ .style-settings-container
|
|
.setting-item-heading {
|
|
border-color: var(--setting-border-color);
|
|
}
|
|
.setting-item-heading > .setting-item-info > .setting-item-name {
|
|
color: var(--setting-border-color) !important;
|
|
}
|
|
/* Style heading containers */
|
|
[data-id="everforest-enchanted-theme"]
|
|
+ .style-settings-container
|
|
.setting-item-heading
|
|
+ .style-settings-container {
|
|
margin-top: 2px;
|
|
padding-top: 16px;
|
|
padding-left: 25px;
|
|
border-width: 0 0 1px 1px;
|
|
border-style: dashed;
|
|
border-color: var(--setting-border-color);
|
|
}
|
|
/* Style the carat */
|
|
.style-settings-collapse-indicator {
|
|
color: var(--setting-border-color);
|
|
}
|
|
|
|
/* Modify the style of setting items */
|
|
.view-content
|
|
.style-settings-container
|
|
:is(.setting-item-control:has(input), input[type="text"]) {
|
|
width: 100%;
|
|
place-content: flex-start;
|
|
}
|
|
|
|
/* Heading colors */
|
|
/* Yellow skipped for contrast. There will hopefully never be 6 levels of indentation */
|
|
[data-level="1"],
|
|
[data-level="1"] + .style-settings-container {
|
|
--setting-border-color: var(--header-red);
|
|
--setting-icon-color: var(--fg-red);
|
|
}
|
|
[data-level="2"],
|
|
[data-level="2"] + .style-settings-container {
|
|
--setting-border-color: var(--header-orange);
|
|
--setting-icon-color: var(--fg-orange);
|
|
}
|
|
[data-level="3"],
|
|
[data-level="3"] + .style-settings-container {
|
|
--setting-border-color: var(--header-green);
|
|
--setting-icon-color: var(--fg-green);
|
|
}
|
|
[data-level="4"],
|
|
[data-level="4"] + .style-settings-container {
|
|
--setting-border-color: var(--header-blue);
|
|
--setting-icon-color: var(--fg-blue);
|
|
}
|
|
[data-level="5"],
|
|
[data-level="5"] + .style-settings-container {
|
|
--setting-border-color: var(--header-purple);
|
|
--setting-icon-color: var(--fg-purple);
|
|
}
|
|
|
|
/** Editor Settings **/
|
|
|
|
/* Highlighted folders */
|
|
body.highlighted-folders .nav-folder:not(.is-collapsed, .mod-root) {
|
|
border-radius: var(--radius-s);
|
|
background-color: rgba(var(--mono-rgb-100), 0.05);
|
|
}
|
|
|
|
/* Menu blur */
|
|
body:not(.is-translucent).enable-menu-blur .modal-bg {
|
|
backdrop-filter: blur(var(--menu-blur-radius, 5px));
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Vim cursor options */
|
|
body.vim-curor-animate .cm-fat-cursor {
|
|
transition:
|
|
left var(--vim-cursor-speed, var(--anim-duration-superfast))
|
|
cubic-bezier(0.39, 0.575, 0.565, 1),
|
|
top var(--vim-cursor-speed, var(--anim-duration-superfast))
|
|
cubic-bezier(0.39, 0.575, 0.565, 1);
|
|
}
|
|
|
|
/** Element Settings **/
|
|
|
|
/* Custom dot pattern size (style settings) */
|
|
.canvas-background > pattern > circle {
|
|
cx: var(--canvas-dot-size, 0.7);
|
|
cy: var(--canvas-dot-size, 0.7);
|
|
r: var(--canvas-dot-size, 0.7);
|
|
}
|
|
|
|
/* Header underlines */
|
|
/* H1 underline option */
|
|
body.h1-underline h1,
|
|
body.h1-underline .HyperMD-header-1.cm-line {
|
|
border-bottom: 2px var(--h1-underline-style, solid)
|
|
var(--background-modifier-border);
|
|
padding-bottom: 2px;
|
|
}
|
|
/* H2 underline option */
|
|
body.h2-underline h2,
|
|
body.h2-underline .HyperMD-header-2.cm-line {
|
|
border-bottom: 2px var(--h2-underline-style, solid)
|
|
var(--background-modifier-border);
|
|
padding-bottom: 2px;
|
|
}
|
|
/* H3 underline option */
|
|
body.h3-underline h3,
|
|
body.h3-underline .HyperMD-header-3.cm-line {
|
|
border-bottom: 2px var(--h3-underline-style, solid)
|
|
var(--background-modifier-border);
|
|
padding-bottom: 2px;
|
|
}
|
|
/* H4 underline option */
|
|
body.h4-underline h4,
|
|
body.h4-underline .HyperMD-header-4.cm-line {
|
|
border-bottom: 2px var(--h4-underline-style, solid)
|
|
var(--background-modifier-border);
|
|
padding-bottom: 2px;
|
|
}
|
|
/* H5 underline option */
|
|
body.h5-underline h5,
|
|
body.h5-underline .HyperMD-header-5.cm-line {
|
|
border-bottom: 2px var(--h5-underline-style, solid)
|
|
var(--background-modifier-border);
|
|
padding-bottom: 2px;
|
|
}
|
|
/* H6 underline option */
|
|
body.h6-underline h6,
|
|
body.h6-underline .HyperMD-header-6.cm-line {
|
|
border-bottom: 2px var(--h6-underline-style, solid)
|
|
var(--background-modifier-border);
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
/* External links */
|
|
body.external-link-remove-icon {
|
|
& .cm-formatting.external-link {
|
|
display: none;
|
|
}
|
|
& a.external-link {
|
|
background-image: none;
|
|
padding-right: unset;
|
|
}
|
|
}
|
|
|
|
/* Image zoom */
|
|
body.image-embed-enable-zoom {
|
|
& .image-embed {
|
|
& img {
|
|
cursor: zoom-out;
|
|
}
|
|
|
|
&:active {
|
|
--zoom-embed-size: min(
|
|
90%,
|
|
calc(var(--readable-line-length-custom, 700px) + 120px)
|
|
);
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
max-width: 100%;
|
|
width: 100% !important;
|
|
margin: auto 0 !important;
|
|
inset: 0;
|
|
object-fit: contain;
|
|
z-index: 1;
|
|
}
|
|
&:active img {
|
|
width: var(--zoom-embed-size) !important;
|
|
max-height: 80%;
|
|
margin: 0 !important;
|
|
user-select: none;
|
|
object-fit: contain;
|
|
}
|
|
&:active::after {
|
|
margin-inline: 0 !important;
|
|
padding: 1ch;
|
|
font-size: large;
|
|
box-sizing: border-box;
|
|
width: var(--zoom-embed-size) !important;
|
|
background-color: var(--background-primary);
|
|
}
|
|
&:active::before {
|
|
content: "";
|
|
position: absolute;
|
|
background-color: var(--color-base-00);
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
/* Option to disable dragging */
|
|
&.image-embed-no-drag .image-embed:active img {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hacky fix for callouts */
|
|
& .cm-embed-block.cm-callout:has(.image-embed:active) {
|
|
contain: none !important;
|
|
}
|
|
}
|
|
|
|
/* List indent size */
|
|
/* Set in the body selector at the top */
|
|
|
|
/* Math */
|
|
/* Outlines for math blocks (enabled by default) */
|
|
body:not(.disable-math-outline)
|
|
:is(
|
|
div.math-block,
|
|
span.math-block > mjx-container,
|
|
.math.math-block.cm-embed-block
|
|
) {
|
|
border: 1px solid var(--bg5);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Tables */
|
|
/* Centered tables */
|
|
body.centered-tables table {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
/* Full width tables */
|
|
body.full-width-tables table {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Rounded tables */
|
|
body.rounded-tables :where(table:not(:has([rowspan]))) {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
|
|
& :is(td, th) {
|
|
border-width: 0 var(--table-border-width) var(--table-border-width) 0;
|
|
}
|
|
& th:first-of-type {
|
|
border-top-left-radius: var(--rounded-tables-radius, 8px);
|
|
}
|
|
& th:last-of-type {
|
|
border-top-right-radius: var(--rounded-tables-radius, 8px);
|
|
}
|
|
& tr:last-of-type td:first-of-type {
|
|
border-bottom-left-radius: var(--rounded-tables-radius, 8px);
|
|
}
|
|
& tr:last-of-type td:last-of-type {
|
|
border-bottom-right-radius: var(--rounded-tables-radius, 8px);
|
|
}
|
|
}
|
|
|
|
/** Custom Stacked Panes **/
|
|
|
|
.custom-stacked-panes-enabled .mod-vertical .mod-stacked .workspace-leaf {
|
|
max-width: calc(
|
|
(100% / var(--custom-stacked-panes-count, 2)) - 2.5rem
|
|
) !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/** Custom Background Image **/
|
|
|
|
.theme-dark {
|
|
--background-image-url: var(--background-image-dark-url);
|
|
}
|
|
.theme-light {
|
|
--background-image-url: var(--background-image-light-url);
|
|
}
|
|
|
|
body.background-image-enabled {
|
|
/* This breaks canvas screenshots! */
|
|
--canvas-background: transparent;
|
|
|
|
--background-transparent: rgba(
|
|
var(--background-primary-rgb),
|
|
var(--pane-opacity, 0.85)
|
|
);
|
|
--background-partially-transparent: rgba(
|
|
var(--background-primary-rgb),
|
|
var(--ui-opacity, 0.85)
|
|
);
|
|
--background-tabs-transparent: rgba(
|
|
var(--background-primary-rgb),
|
|
var(--tab-opacity, 0.85)
|
|
);
|
|
}
|
|
|
|
/* Apply the background image */
|
|
.background-image-enabled .horizontal-main-container {
|
|
background-color: var(--background-primary);
|
|
background-image: var(--background-image-url);
|
|
background-position: var(--background-image-position, center);
|
|
background-size: cover;
|
|
}
|
|
|
|
/* Make panes transparent */
|
|
.workspace-tab-container::-webkit-scrollbar-track,
|
|
.background-image-enabled :is(.mod-root .view-content, .view-header) {
|
|
background-color: var(--background-transparent) !important;
|
|
}
|
|
|
|
/* Make workspace UI elements transparent */
|
|
.background-image-enabled
|
|
:is(
|
|
.mod-root .workspace-tab-header-container,
|
|
.workspace-ribbon,
|
|
.workspace-split,
|
|
.graph-controls
|
|
),
|
|
.workspace-ribbon::before {
|
|
background-color: var(--background-partially-transparent) !important;
|
|
}
|
|
|
|
/* Make stacked tab headers transparent */
|
|
.background-image-enabled
|
|
.workspace-tab-container
|
|
.workspace-tab-header:not(.mod-active),
|
|
.background-image-enabled
|
|
.workspace-tab-container
|
|
.workspace-tab-header.mod-active {
|
|
background-color: var(--background-tabs-transparent) !important;
|
|
}
|
|
|
|
/* Remove other backgrounds */
|
|
.background-image-enabled
|
|
:is(
|
|
.titlebar-button-container,
|
|
.mod-vertical .workspace-tab-header,
|
|
.document-search-container,
|
|
.workspace-leaf,
|
|
.horizontal-main-container > .workspace,
|
|
.pdf-sidebar-container,
|
|
.pdf-container,
|
|
.pdf-toolbar
|
|
),
|
|
.background-image-enabled
|
|
.workspace-split:not(.mod-root, .mod-horizontal)
|
|
.workspace-tab-header-container,
|
|
.background-image-enabled
|
|
.workspace-split:not(.mod-left-split, .mod-right-split),
|
|
.background-image-enabled
|
|
.workspace-split.mod-left-split
|
|
.workspace-sidedock-vault-profile {
|
|
background-color: transparent !important;
|
|
}
|
|
/* Fix double side headers */
|
|
.background-image-enabled .workspace-tab-header-container {
|
|
background-color: unset;
|
|
}
|
|
|
|
/* Remove tabs weird gradients and exterior curves */
|
|
.background-image-enabled .workspace-tab-header.is-active::before,
|
|
.background-image-enabled .workspace-tab-header.is-active::after,
|
|
.background-image-enabled .view-header-title-container:not(.mod-at-end):after {
|
|
display: none;
|
|
}
|
|
|
|
/* Pane view */
|
|
.background-image-pane-view .view-content:has(.markdown-reading-view) {
|
|
background-color: transparent !important;
|
|
}
|
|
.background-image-pane-view .view-content .cm-sizer,
|
|
.background-image-pane-view
|
|
.view-content
|
|
> .markdown-reading-view
|
|
> .markdown-rendered
|
|
> .markdown-preview-sizer {
|
|
box-sizing: content-box;
|
|
padding-inline: 2rem;
|
|
padding-top: 2rem;
|
|
border-radius: 1rem;
|
|
background-color: var(--background-transparent) !important;
|
|
}
|
|
.background-image-pane-view .view-content .cm-sizer:has(.cm-gutters) {
|
|
padding-left: calc(2rem + 24px);
|
|
}
|
|
:root .background-image-pane-view .view-header {
|
|
background-color: var(--background-partially-transparent) !important;
|
|
}
|
|
/* New tab page */
|
|
:root .background-image-pane-view .view-content:has(> .empty-state) {
|
|
width: fit-content;
|
|
height: unset;
|
|
margin: auto;
|
|
padding: clamp(2rem, 5vw, 4rem);
|
|
border-radius: 1rem;
|
|
}
|
|
.background-image-enabled .empty-state {
|
|
position: static;
|
|
}
|
|
|
|
/** Visual Parity **/
|
|
body.visual-parity-enabled {
|
|
--p-spacing: calc(1.5 * var(--font-text-size));
|
|
--heading-spacing: calc(var(--p-spacing) * 1);
|
|
|
|
/* Fix hr elements */
|
|
.markdown-rendered hr {
|
|
margin-block: calc(
|
|
(
|
|
var(--font-text-size, 1rem) * var(--line-height-normal) -
|
|
var(--hr-thickness)
|
|
) / 2 + var(--p-spacing)
|
|
);
|
|
}
|
|
|
|
/* Fix header top margins */
|
|
.is-live-preview .cm-content > .HyperMD-header {
|
|
padding-top: unset;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-table-widget {
|
|
padding-block: 0;
|
|
}
|
|
|
|
/* Fix collapsed headers in live preview */
|
|
.HyperMD-header:has(> .is-collapsed) {
|
|
padding-block: 0 var(--p-spacing);
|
|
}
|
|
|
|
/* Fix blockquotes */
|
|
& :not(blockquote) + blockquote,
|
|
& .cm-line:not(.HyperMD-quote-1) + .HyperMD-quote-1,
|
|
& .HyperMD-quote-1:first-child {
|
|
padding-top: 0.25em !important;
|
|
}
|
|
& blockquote:has(+ :not(blockquote)),
|
|
& .HyperMD-quote-1:has(+ .cm-line:not(.HyperMD-quote-1)),
|
|
& .HyperMD-quote-1:last-child {
|
|
padding-bottom: 0.25em !important;
|
|
}
|
|
}
|
|
|
|
/**** Extra Fixes ****/
|
|
|
|
/** Callouts **/
|
|
|
|
.callout {
|
|
--callout-content-padding: var(--size-4-2) var(--size-4-4);
|
|
--callout-content-color: rgba(var(--bg-dim-rgb), 0.3);
|
|
--callout-border-solid: 1px solid rgba(var(--callout-color), 0.3);
|
|
--callout-border-dashed: 1px dashed rgba(var(--callout-color), 0.4);
|
|
padding: 0;
|
|
border-left: 0.125rem solid rgba(var(--callout-color), 0.7);
|
|
border-top: var(--callout-border-solid);
|
|
border-right: var(--callout-border-solid);
|
|
border-bottom: var(--callout-border-solid);
|
|
border-radius: 4px;
|
|
mix-blend-mode: normal !important;
|
|
}
|
|
.callout,
|
|
.cm-callout {
|
|
box-shadow: 2px 2px 3px #0004;
|
|
}
|
|
.callout-title {
|
|
padding: 0.5rem 0.75rem;
|
|
gap: 0.5rem;
|
|
border-radius: 2px 2px 0 0;
|
|
background-color: rgba(var(--callout-color), 0.2);
|
|
}
|
|
.callout.is-collapsible .callout-title {
|
|
cursor: pointer !important;
|
|
}
|
|
.callout-icon svg.svg-icon {
|
|
color: rgb(var(--callout-color));
|
|
}
|
|
.callout-title-inner {
|
|
color: color-mix(
|
|
in srgb,
|
|
rgb(var(--callout-color)) 70%,
|
|
var(--color-base-100)
|
|
);
|
|
filter: contrast(2);
|
|
}
|
|
.callout-title-inner > * {
|
|
filter: contrast(0.5);
|
|
}
|
|
.callout-fold {
|
|
margin-left: auto;
|
|
}
|
|
.callout-content {
|
|
border-top: var(--callout-border-dashed);
|
|
border-radius: 0 0 2px 2px;
|
|
background-color: rgba(var(--bg-dim-rgb), 0.3);
|
|
}
|
|
.callout-content > *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.callout-content > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Quote callout */
|
|
.callout[data-callout="quote"] {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
position: relative;
|
|
}
|
|
.callout[data-callout="quote"] .callout-title {
|
|
background-color: var(--callout-content-color);
|
|
padding: 0 1ch 1ch;
|
|
display: block;
|
|
text-align: right;
|
|
}
|
|
.callout[data-callout="quote"] .callout-title .callout-icon {
|
|
display: none;
|
|
}
|
|
.callout[data-callout="quote"] .callout-content {
|
|
border: none;
|
|
padding-top: var(--size-4-4);
|
|
}
|
|
|
|
/* Custom callouts */
|
|
/* Uses Material Colors 300-500 + A100 */
|
|
.callout[data-callout="math"] {
|
|
--callout-color: 132, 255, 255;
|
|
--callout-icon: lucide-sigma;
|
|
}
|
|
.callout[data-callout="math"] .callout-content {
|
|
padding: 0 !important;
|
|
}
|
|
.callout[data-callout="math"] .callout-content .math-block {
|
|
border: none;
|
|
}
|
|
.callout[data-callout="graph"] {
|
|
--callout-color: 255, 152, 0;
|
|
--callout-icon: lucide-line-chart;
|
|
}
|
|
.callout[data-callout="image"] {
|
|
--callout-color: 234, 128, 252;
|
|
--callout-icon: lucide-image;
|
|
}
|
|
.callout[data-callout="image"] .callout-content {
|
|
padding: 0 !important;
|
|
}
|
|
.callout[data-callout="code"] {
|
|
--callout-color: 76, 175, 80;
|
|
--callout-icon: lucide-curly-braces;
|
|
}
|
|
.callout[data-callout="code"] .callout-content {
|
|
padding: 0 !important;
|
|
}
|
|
.callout[data-callout="code"] .callout-content > pre {
|
|
margin-block: 0;
|
|
background-color: var(--code-background);
|
|
}
|
|
|
|
/** Image Formatting **/
|
|
|
|
img {
|
|
display: block;
|
|
margin-inline: auto;
|
|
image-rendering: auto !important;
|
|
}
|
|
|
|
/* Makes multiple images on the same line appear in a flex grid */
|
|
/* Editing mode part */
|
|
.cm-line:not(.cm-active):has(
|
|
.image-embed ~ .image-embed,
|
|
img:not(.cm-widgetBuffer) ~ img:not(.cm-widgetBuffer)
|
|
):not(:has([alt="inline"])),
|
|
p:has(.image-embed ~ .image-embed, img ~ img):not(:has([alt="inline"])) {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: start;
|
|
|
|
& > .image-embed {
|
|
flex: 1 1 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
& > .cm-widgetBuffer {
|
|
display: none !important;
|
|
}
|
|
}
|
|
/* Makes a highlighted line shrink the image */
|
|
:root:root
|
|
.cm-line.cm-active
|
|
> :is(.image-embed:not([alt="inline"]), img:not([alt="inline"])) {
|
|
width: 100px;
|
|
display: inline-block;
|
|
}
|
|
/* Centers the image if it is modified */
|
|
:root:root .cm-line:not(.cm-active) > .image-embed:not([alt="inline"]),
|
|
p > .image-embed:not([alt="inline"]) {
|
|
display: flex;
|
|
place-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Disable changes if images have the alt text is exactly inline */
|
|
img[alt="inline"] {
|
|
display: inline !important;
|
|
}
|
|
|
|
/*
|
|
This snippet adds modification in the ![[image link# modification|caption]] format
|
|
Excalidraw is not supported as it has its own format of using alt text set max width in pixels
|
|
*/
|
|
|
|
/* Style setting to revert to old behavior */
|
|
.image-embed-stretch {
|
|
--img-width: 100;
|
|
}
|
|
|
|
/* Sizing */
|
|
.image-embed > img:not([width]),
|
|
span > img[src^="http"]:not([width]) {
|
|
display: block;
|
|
width: calc(var(--img-width) / 100 * min(100%, var(--file-line-width)));
|
|
margin-right: auto;
|
|
}
|
|
.image-embed[src~="1/4"],
|
|
img[src^="http"][alt~="1/4"] {
|
|
--img-width: 25;
|
|
}
|
|
.image-embed[src~="2/5"],
|
|
img[src^="http"][alt~="2/5"] {
|
|
--img-width: 40;
|
|
}
|
|
.image-embed[src~="1/3"],
|
|
img[src^="http"][alt~="1/3"] {
|
|
--img-width: 33.3;
|
|
}
|
|
.image-embed[src~="1/2"],
|
|
img[src^="http"][alt~="1/2"] {
|
|
--img-width: 50;
|
|
}
|
|
.image-embed[src~="3/5"],
|
|
img[src^="http"][alt~="3/5"] {
|
|
--img-width: 60;
|
|
}
|
|
.image-embed[src~="2/3"],
|
|
img[src^="http"][alt~="2/3"] {
|
|
--img-width: 66.6;
|
|
}
|
|
.image-embed[src~="3/4"],
|
|
img[src^="http"][alt~="3/4"] {
|
|
--img-width: 75;
|
|
}
|
|
.image-embed[src~="4/5"],
|
|
img[src^="http"][alt~="4/5"] {
|
|
--img-width: 80;
|
|
}
|
|
.image-embed[src~="1/1"],
|
|
.image-embed[src~="full"],
|
|
img[src^="http"][alt~="1/1"],
|
|
img[src^="http"][alt~="full"] {
|
|
--img-width: 100;
|
|
}
|
|
|
|
/* Alignment */
|
|
.image-embed[src~="left"] > img,
|
|
.markdown-source-view.mod-cm6 .cm-content img[src^="http"][alt~="left"],
|
|
img[src^="http"][alt~="left"] {
|
|
margin-left: 0 !important;
|
|
}
|
|
.image-embed[src~="right"] > img,
|
|
.markdown-source-view.mod-cm6 .cm-content img[src^="http"][alt~="right"],
|
|
img[src^="http"][alt~="right"] {
|
|
margin-right: 0 !important;
|
|
}
|
|
/* External images */
|
|
.markdown-source-view.mod-cm6 .cm-content > img {
|
|
margin-inline: auto !important;
|
|
}
|
|
|
|
/* Floats */
|
|
.markdown-reading-view .image-embed[src~="float"] > img:not([width]) {
|
|
width: calc(
|
|
var(--img-width, 100) / 100 * min(100vw, var(--file-line-width))
|
|
);
|
|
margin: 0 !important;
|
|
}
|
|
.markdown-reading-view .image-embed[src~="float"] {
|
|
clear: both;
|
|
}
|
|
.markdown-reading-view .image-embed[src~="float"][src~="left"] {
|
|
float: left;
|
|
margin-right: 2%;
|
|
}
|
|
.markdown-reading-view .image-embed[src~="float"][src~="right"] {
|
|
float: right;
|
|
margin-left: 2%;
|
|
}
|
|
|
|
/* Image alt text other modifications */
|
|
.image-embed[src~="white"] > img,
|
|
img[src^="http"][alt~="white"] {
|
|
background-color: white;
|
|
}
|
|
.image-embed[src~="black"] > img,
|
|
img[src^="http"][alt~="black"] {
|
|
background-color: black;
|
|
}
|
|
.image-embed[src~="border"] > img,
|
|
img[src^="http"][alt~="border"] {
|
|
border: 0.25rem solid var(--background-modifier-border);
|
|
}
|
|
.image-embed[src~="shadow"] > img,
|
|
img[src^="http"][alt~="shadow"] {
|
|
box-shadow: 2px 2px 4px #0007;
|
|
}
|
|
.image-embed[src~="rounded"] > img,
|
|
img[src^="http"][alt~="rounded"] {
|
|
border-radius: 0.5rem;
|
|
}
|
|
.image-embed[src~="blur"] > img,
|
|
img[src^="http"][alt~="blur"] {
|
|
filter: blur(5px);
|
|
transition: filter 500ms 250ms ease;
|
|
}
|
|
.image-embed[src~="blur"] > img:hover,
|
|
img[src^="http"][alt~="blur"]:hover {
|
|
filter: blur(0);
|
|
}
|
|
|
|
/* Alt text as caption under image */
|
|
body:not(.no-image-alttext-caption)
|
|
.image-embed:not(
|
|
[alt*=".png"],
|
|
[alt*=".gif"],
|
|
[alt*=".jpg"],
|
|
[alt*=".jpeg"],
|
|
[alt*=".tiff"],
|
|
[alt*=".avif"],
|
|
[alt*=".webp"],
|
|
[alt="inline"],
|
|
[width]
|
|
)::after {
|
|
content: attr(alt);
|
|
display: block;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
width: calc(
|
|
var(--img-width, 100) / 100 * min(100%, var(--file-line-width))
|
|
);
|
|
}
|
|
/* Align the text boxes correctly */
|
|
.image-embed {
|
|
&::after {
|
|
margin-inline: auto;
|
|
}
|
|
&[src~="left"]::after {
|
|
margin-inline: 0 auto;
|
|
}
|
|
&[src~="right"]::after {
|
|
margin-inline: auto 0;
|
|
}
|
|
:root .markdown-preview-view &[src~="float"]::after {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/** CSS Classes **/
|
|
|
|
/* Custom width layouts */
|
|
.full-width {
|
|
--file-line-width: 100%;
|
|
}
|
|
.wide-width {
|
|
--file-line-width: var(--wide-width-readable-line-length-custom, 1000px);
|
|
}
|
|
|
|
/* Numbered lists to columns in read mode */
|
|
.columns :where(div, li) > ol {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 0.5rem;
|
|
padding-left: 0;
|
|
}
|
|
.columns :where(div, li) > ol > li {
|
|
outline: 1px solid var(--color-base-40);
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
.columns :where(div, li) > ol > li > ul {
|
|
background: none;
|
|
}
|
|
.columns :where(div, li) > ol > li > .list-collapse-indicator {
|
|
display: none;
|
|
}
|
|
.columns :where(div, li) > ol > li > :where(ul, ol):before {
|
|
border-right: none !important;
|
|
}
|
|
|
|
/* Custom dashboard */
|
|
/* Title at top of the document */
|
|
.dashboard {
|
|
& .markdown-preview-section .title {
|
|
top: 60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
font-size: 26pt !important;
|
|
font-weight: bolder;
|
|
letter-spacing: 8px;
|
|
}
|
|
|
|
& h1 {
|
|
border-bottom-style: dotted !important;
|
|
border-width: 1px !important;
|
|
padding-bottom: 3px !important;
|
|
}
|
|
& div > ul:not(.dataview) {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 0.5rem;
|
|
padding-left: 0;
|
|
& > li {
|
|
outline: 1px solid var(--bg5);
|
|
padding: 0.5rem 0.25rem;
|
|
}
|
|
}
|
|
|
|
& div > ul > li {
|
|
& > .list-bullet {
|
|
display: none;
|
|
}
|
|
& .list-collapse-indicator {
|
|
display: none;
|
|
}
|
|
& ul:before {
|
|
border-right: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Misc. **/
|
|
|
|
/* Fix Dataview markers */
|
|
.dataview.list-view-ul li {
|
|
list-style-type: none;
|
|
}
|
|
.dataview.list-view-ul li::before {
|
|
visibility: visible;
|
|
position: absolute;
|
|
content: "\200B";
|
|
pointer-events: none;
|
|
border-radius: var(--list-bullet-radius);
|
|
width: var(--list-bullet-size);
|
|
height: var(--list-bullet-size);
|
|
border: var(--list-bullet-border);
|
|
transform: translate(-0.85em, 0.6em);
|
|
background-color: var(--list-marker-color);
|
|
transition:
|
|
transform 0.15s,
|
|
box-shadow 0.15s;
|
|
}
|
|
.table-view-table > tbody > tr:hover {
|
|
background-color: var(--table-row-background-hover) !important;
|
|
}
|
|
|
|
/* Make math display better */
|
|
div.math-block {
|
|
padding-block: 0.125em;
|
|
}
|
|
/* Make the weird span ones also work */
|
|
span.math-block > mjx-container {
|
|
padding-block: 1rem;
|
|
}
|
|
|
|
/* Make MathJax text bigger */
|
|
.MJX-TEX {
|
|
font-size: 110%;
|
|
}
|
|
/* Make \overline{} display on higher resolution screens*/
|
|
mjx-stretchy-h.mjx-c2013 mjx-ext mjx-c::before {
|
|
font-weight: 900;
|
|
}
|
|
|
|
/* Make print break hr elements */
|
|
hr.page-break {
|
|
opacity: 0.5;
|
|
height: 1.5rem;
|
|
display: flex;
|
|
border-top: 4px dotted;
|
|
background-color: unset;
|
|
}
|
|
hr.page-break::before {
|
|
content: "Page Break";
|
|
font-size: 0.75em;
|
|
margin-inline: auto;
|
|
}
|
|
@media print {
|
|
hr.page-break {
|
|
visibility: hidden;
|
|
page-break-after: always;
|
|
}
|
|
}
|
|
|
|
/* Fix weird ol bug */
|
|
ol > li > p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Make backlinks padding more consistent */
|
|
.markdown-preview-view .embedded-backlinks {
|
|
margin-top: 100px;
|
|
}
|
|
|
|
/* Fix specific word break difference */
|
|
:root .cm-lineWrapping {
|
|
white-space: unset;
|
|
}
|