Skip to content

Instantly share code, notes, and snippets.

@tallguyjenks
Last active December 9, 2024 00:03
Show Gist options
  • Select an option

  • Save tallguyjenks/d11c82b6661ac177c2cba51c2efe35dd to your computer and use it in GitHub Desktop.

Select an option

Save tallguyjenks/d11c82b6661ac177c2cba51c2efe35dd to your computer and use it in GitHub Desktop.

Revisions

  1. tallguyjenks revised this gist Apr 4, 2021. 2 changed files with 1 addition and 1381 deletions.
    1,381 changes: 0 additions & 1,381 deletions obsidian.css
    Original file line number Diff line number Diff line change
    @@ -1,1381 +0,0 @@
    /**=================================================================================
    /** ██████╗░██████╗░██╗░░░██╗░█████╗░███╗░░██╗██╗░██████╗
    /** ██╔══██╗██╔══██╗╚██╗░██╔╝██╔══██╗████╗░██║╚█║██╔════╝
    /** ██████╦╝██████╔╝░╚████╔╝░███████║██╔██╗██║░╚╝╚█████╗░
    /** ██╔══██╗██╔══██╗░░╚██╔╝░░██╔══██║██║╚████║░░░░╚═══██╗
    /** ██████╦╝██║░░██║░░░██║░░░██║░░██║██║░╚███║░░░██████╔╝
    /** ╚═════╝░╚═╝░░╚═╝░░░╚═╝░░░╚═╝░░╚═╝╚═╝░░╚══╝░░░╚═════╝░
    /**
    /** ░█████╗░██████╗░░██████╗██╗██████╗░██╗░█████╗░███╗░░██╗  ░█████╗░░██████╗░██████╗
    /** ██╔══██╗██╔══██╗██╔════╝██║██╔══██╗██║██╔══██╗████╗░██║  ██╔══██╗██╔════╝██╔════╝
    /** ██║░░██║██████╦╝╚█████╗░██║██║░░██║██║███████║██╔██╗██║  ██║░░╚═╝╚█████╗░╚█████╗░
    /** ██║░░██║██╔══██╗░╚═══██╗██║██║░░██║██║██╔══██║██║╚████║  ██║░░██╗░╚═══██╗░╚═══██╗
    /** ╚█████╔╝██████╦╝██████╔╝██║██████╔╝██║██║░░██║██║░╚███║  ╚█████╔╝██████╔╝██████╔╝
    /** ░╚════╝░╚═════╝░╚═════╝░╚═╝╚═════╝░╚═╝╚═╝░░╚═╝╚═╝░░╚══╝  ░╚════╝░╚═════╝░╚═════╝░
    /**==================================================================================*/

    /** ----- TABLE OF CONTENTS ----- */

    /** .. 1. Default Theme */
    /** .. 2. Custom CSS Section */

    /** .... 2.1 Bullet Points */
    /** ...... 2.1.1 Bullet Point Relationship Lines -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2 */
    /** ...... 2.1.2 tasklist (preview) indentation lines correction -- https://forum.obsidian.md/t/bullet-lines-in-css-for-checkboxes/6262/3 */
    /** ...... 2.1.3 Better Bullet Points In Edit Mode https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */
    /** ...... 2.1.4 Bullet points in preview -- https://discord.com/channels/686053708261228577/702656734631821413/772094128832905226 */

    /** .... 2.2 File Navigation Pane */
    /** ...... 2.2.1 Relationship lines for the folder levels in file navigation: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 */
    /** ...... 2.2.2 Custom icons differing files and folders -- https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896 */

    /** .... 2.3 Clutter Free Mode */
    /** ...... 2.3.1 Make subtler folding gutter arrows -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 */
    /** ...... 2.3.2 Hide Block Reference ID's -- https://discord.com/channels/686053708261228577/716028884885307432/769267134114037871 */
    /** ...... 2.3.3 Shortened Url Links -- https://forum.obsidian.md/t/hide-or-truncate-urls-in-editor-using-css/359/3 */
    /** ...... 2.3.4 highlight (==) not visible anymore if not active line -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/221 */

    /** .... 2.4 Font Formatting */
    /** ...... 2.4.1 Make Mathjax Font Larger */
    /** ...... 2.4.2 Hyphenation & Justification -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */
    /** ...... 2.4.3 Stylish Block Quotes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */
    /** ...... 2.4.4 General Font Formatting */

    /** .... 2.5 Graph Formatting */
    /** ...... 2.5.1 Graph View CSS -- https://discordapp.com/channels/686053708261228577/702656734631821413/760488978691784705 */

    /** .... 2.6 Image Manipulation */
    /** ...... 2.6.1 Image Hover Grow -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */

    /** .... 2.7 Check Boxes */
    /** ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */
    /** ...... 2.7.2 Animated Check Boxes -- https://github.com/TriDiamond/Obsidian-Obsidianite/blob/82207bed4313ee0e6f0bb1fd59b04129408018f5/obsidian.css#L463 */

    /** .... 2.8 Tags */
    /** ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */

    /** .... 2.9 [[Link]] Modification */
    /** ...... 2.9.1 Bigger Link Hover Popup Preview -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 */

    /** .... 2.10 Plugin Specific CSS */
    /** ...... 2.10.1 Calendar Plugin CSS */

    /** .... 2.11 Heading Formatting */
    /** ...... 2.11.1 Heading Under Gradient Line -- https://github.com/TriDiamond/Obsidian-Obsidianite */
    /** ...... 2.11.2 Emoji Orientation in Andy Mode Headers -- https://discord.com/channels/686053708261228577/702656734631821413/775900471406624768 */

    /** .... 2.12 Horizontal Rule Formatting */
    /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */

    /** .... 2.13 PDF Export Formatting */
    /** ...... 2.13.1 Page Break -- https://gist.github.com/liamcain/81679412643690a7cdd13dff4dc909ce */

    /** .... 2.14 Tables */
    /** ...... 2.14.1 Banded Table Rows -- https://discord.com/channels/686053708261228577/702656734631821413/777106171948564500 */

    /** .. 3. Grave Yard */
    /* ============================================================================================================================================================ */

    /* 1. Default Theme */
    :root
    {
    --dark0-hard: #1d2021;
    --dark0: #282828;
    --dark0-soft: #32302f;
    --dark1: #3c3836;
    --dark2: #504945;
    --dark3: #665c54;
    --dark4: #7c6f64;

    --gray: #928374;

    --light0-hard: #f9f5d7;
    --light0: #fbf1c7;
    --light0-soft: #f2e5bc;
    --light1: #ebdbb2;
    --light2: #d5c4a1;
    --light3: #bdae93;
    --light4: #a89984;

    --bright-red: #fb4934;
    --bright-green: #b8bb26;
    --bright-yellow: #fabd2f;
    --bright-blue: #83a598;
    --bright-purple: #d3869b;
    --bright-aqua: #8ec07c;
    --bright-orange: #fe8019;

    --neutral-red: #cc241d;
    --neutral-green: #98971a;
    --neutral-yellow: #d79921;
    --neutral-blue: #458588;
    --neutral-purple: #b16286;
    --neutral-aqua: #689d6a;
    --neutral-orange: #d65d0e;

    --faded-red: #9d0006;
    --faded-green: #79740e;
    --faded-yellow: #b57614;
    --faded-blue: #076678;
    --faded-purple: #8f3f71;
    --faded-aqua: #427b58;
    --faded-orange: #af3a03;
    }

    .theme-dark
    {
    --font-monospace: 'fira code', 'Hack Nerd Font', 'Source Code Pro', monospace;
    --background-primary: var(--dark0);
    --background-primary-alt: var(--dark0);
    --background-secondary: var(--dark0-hard);
    --background-secondary-alt: var(--dark1);
    --text-normal: var(--light0);
    --text-faint: var(--light3);
    --text-title-h1: var(--neutral-red);
    --text-title-h2: var(--neutral-orange);
    --text-title-h3: var(--neutral-yellow);
    --text-title-h4: var(--neutral-green);
    --text-title-h5: var(--neutral-aqua);
    --text-link: var(--bright-blue);
    --text-a: var(--bright-orange);
    --text-a-hover: var(--bright-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--dark1);
    --text-highlight-bg: var(--faded-aqua);
    --interactive-accent: var(--bright-orange);
    --interactive-before: var(--dark4);
    --background-modifier-border: var(--dark2);
    --text-accent: var(--bright-orange);
    --interactive-accent-rgb: var(--bright-orange);
    --inline-code: var(--bright-blue);
    --code-block: var(--bright-blue);
    --vim-cursor: var(--bright-orange);
    --text-selection: rgba(168, 153, 132, 0.5); /* light4 */
    }

    .theme-light
    {
    --background-primary: var(--light0);
    --background-primary-alt: var(--light0);
    --background-secondary: var(--light0-hard);
    --background-secondary-alt: var(--light1);
    --text-normal: var(--dark0);
    --text-faint: var(--dark3);
    --text-title-h1: var(--faded-red);
    --text-title-h2: var(--faded-orange);
    --text-title-h3: var(--faded-yellow);
    --text-title-h4: var(--faded-green);
    --text-title-h5: var(--faded-aqua);
    --text-link: var(--neutral-blue);
    --text-a: var(--neutral-orange);
    --text-a-hover: var(--neutral-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--light1);
    --text-highlight-bg: var(--bright-aqua);
    --interactive-accent: var(--neutral-orange);
    --interactive-before: var(--light4);
    --background-modifier-border: var(--light2);
    --text-accent: var(--neutral-orange);
    --interactive-accent-rgb: var(--neutral-orange);
    --inline-code: var(--neutral-blue);
    --vim-cursor: var(--neutral-orange);
    --text-selection: rgba(189, 174, 147, 0.5); /* light3 */
    }

    .theme-dark code[class*="language-"],
    .theme-dark pre[class*="language-"],
    .theme-light code[class*="language-"],
    .theme-light pre[class*="language-"]
    {
    text-shadow: none !important;
    background-color: var(--pre-code) !important;
    }

    .graph-view.color-circle,
    .graph-view.color-fill-highlight,
    .graph-view.color-line-highlight
    {
    color: var(--interactive-accent-rgb) !important;
    }
    .graph-view.color-text
    {
    color: var(--text-a-hover) !important;
    }
    /*
    .graph-view.color-fill
    {
    color: var(--background-secondary);
    }
    .graph-view.color-line
    {
    color: var(--background-modifier-border);
    }
    */

    html,
    body
    {
    font-size: 16px !important;
    font-family: var(--font-monospace); /** Remove this to return body font back to normal */

    /** Norse rune font for hilarity */
    /* font-family: 'Norse';
    font-size: 20px !important; */
    }

    strong
    {
    font-weight: 600 !important;
    }

    a,
    .cm-hmd-internal-link
    {
    color: var(--text-a) !important;
    text-decoration: none !important;
    }

    a:hover,
    .cm-hmd-internal-link:hover,
    .cm-url
    {
    color: var(--text-a-hover) !important;
    text-decoration: none !important;
    }

    mark
    {
    background-color: var(--text-mark) !important;
    color: var(--dark0) !important;
    }

    .view-actions a
    {
    color: var(--text-normal) !important;
    }

    .view-actions a:hover
    {
    color: var(--text-a) !important;
    }

    .HyperMD-codeblock-bg
    {
    background-color: var(--pre-code) !important;
    }

    .HyperMD-codeblock
    {
    line-height: 1.4em !important;
    color: var(--code-block) !important;
    }

    .HyperMD-codeblock-begin
    {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    }

    .HyperMD-codeblock-end
    {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    }

    th
    {
    font-weight: 600 !important;
    }

    thead
    {
    border-bottom: 2px solid var(--background-modifier-border) !important;
    }

    .HyperMD-table-row
    {
    line-height: normal !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    background-color: var(--pre-code) !important;
    }

    .HyperMD-table-row-0
    {
    /* padding-top: 4px !important; */
    }

    .CodeMirror-foldgutter-folded,
    .is-collapsed .nav-folder-collapse-indicator
    {
    color: var(--text-a) !important;
    }

    .nav-file-tag
    {
    color: var(--text-a) !important;
    }

    .is-active .nav-file-title
    {
    color: var(--text-a) !important;
    background-color: var(--background-primary-alt) !important;
    }

    .nav-file-title
    {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    }

    img
    {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    .HyperMD-list-line
    {
    padding-top: 0 !important;
    }
    .CodeMirror-code,
    .CodeMirror-linenumber,
    .cm-formatting
    {
    font-family: var(--font-monospace) !important;
    font-size: 0.9em;
    }

    .markdown-preview-section pre code,
    .markdown-preview-section code
    {
    font-size: 0.9em !important;
    background-color: var(--pre-code) !important;
    }

    .markdown-preview-section pre code
    {
    padding: 4px !important;
    line-height: 1.4em !important;
    display: block !important;
    color: var(--code-block) !important;
    }

    .markdown-preview-section code
    {
    color: var(--inline-code) !important;
    }

    .cm-s-obsidian,
    .cm-inline-code
    {
    -webkit-font-smoothing: auto !important;
    }

    .cm-inline-code
    {
    color: var(--inline-code) !important;
    background-color: var(--pre-code) !important;
    padding: 1px !important;
    }

    .workspace-leaf-header-title
    {
    font-weight: 600 !important;
    }

    .side-dock-title
    {
    padding-top: 15px !important;
    font-size: 20px !important;
    }

    .side-dock-ribbon-tab:hover,
    .side-dock-ribbon-action:hover,
    .side-dock-ribbon-action.is-active:hover,
    .nav-action-button:hover,
    .side-dock-collapse-btn:hover
    {
    color: var(--text-a);
    }

    .side-dock
    {
    border-right: 0 !important;
    }

    .cm-s-obsidian,
    .markdown-preview-view
    {
    padding-left: 10px !important;
    padding-right: 10px !important;
    }

    /* vertical resize-handle */
    .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
    .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
    .workspace-split.mod-right-split > .workspace-leaf-resize-handle
    {
    width: 1px !important;
    background-color: var(--background-secondary-alt);
    }

    /* horizontal resize-handle */
    .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle
    {
    height: 1px !important;
    background-color: var(--background-secondary-alt);
    }

    /* Remove vertical split padding */
    .workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
    .workspace-split.mod-vertical > .workspace-split,
    .workspace-split.mod-vertical > .workspace-leaf,
    .workspace-tabs
    {
    padding-right: 0px;
    }

    .markdown-embed-title
    {
    font-weight: 600 !important;
    }

    .markdown-embed
    {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    }

    .mermaid .note
    {
    fill: var(--dark3) !important;
    }

    .cm-header-1,
    .markdown-preview-section h1
    {
    font-weight: 500 !important;
    font-size: 34px !important;
    color: var(--text-title-h1) !important;
    }

    .cm-header-2,
    .markdown-preview-section h2
    {
    font-weight: 500 !important;
    font-size: 26px !important;
    color: var(--text-title-h2) !important;
    }

    .cm-header-3,
    .markdown-preview-section h3
    {
    font-weight: 500 !important;
    font-size: 22px !important;
    color: var(--text-title-h3) !important;
    }

    .cm-header-4,
    .markdown-preview-section h4
    {
    font-weight: 500 !important;
    font-size: 20px !important;
    color: var(--text-title-h4) !important;
    }

    .cm-header-5,
    .cm-header-6,
    .markdown-preview-section h5,
    .markdown-preview-section h6
    {
    font-weight: 500 !important;
    font-size: 18px !important;
    color: var(--text-title-h5) !important;
    }

    .suggestion-item.is-selected
    {
    background-color: var(--background-secondary);
    }

    .empty-state-container:hover
    {
    background-color: var(--background-secondary-alt);
    border: 5px solid var(--interactive-accent) !important;
    }

    .checkbox-container
    {
    background-color: var(--interactive-before);
    }

    .checkbox-container:after
    {
    background-color: var(--background-secondary-alt);
    }

    .mod-cta
    {
    color: var(--background-secondary-alt) !important;
    font-weight: 600 !important;
    }

    .mod-cta:hover
    {
    background-color: var(--interactive-before) !important;
    font-weight: 600 !important;
    }

    .CodeMirror-cursor
    {
    background-color: var(--vim-cursor) !important;
    opacity: 60% !important;
    }

    input.task-list-item-checkbox {
    border: 1px solid var(--dark4);
    appearance: none;
    -webkit-appearance: none;
    }

    input.task-list-item-checkbox:checked
    {
    background-color: var(--dark4);
    box-shadow: inset 0 0 0 2px var(--background-primary);
    }

    ::selection
    {
    background-color: var(--text-selection) !important;
    }

    /* .. 2. Custom CSS Section */
    /* .... 2.1 Bullet Points */
    /* ...... 2.1.1 Bullet Point Relationship Lines -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2 */
    .cm-hmd-list-indent .cm-tab,
    ul ul {
    position: relative;
    }
    .cm-hmd-list-indent .cm-tab::before,
    ul ul::before {
    content: "";
    border-left: 1px solid var(--bright-aqua);
    position: absolute;
    }
    .cm-hmd-list-indent .cm-tab::before {
    left: 5px;
    top: -5px;
    bottom: -4px;
    }
    ul ul::before {
    left: -16px;
    top: 0;
    bottom: 0;
    }
    /* ...... 2.1.2 tasklist (preview) indentation lines correction -- https://forum.obsidian.md/t/bullet-lines-in-css-for-checkboxes/6262/3 */
    .contains-task-list::before {
    left: 10px ;
    }
    /* ...... 2.1.3 Better Bullet Points In Edit Mode https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */
    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul {
    color: transparent;
    position: relative;
    }
    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after {
    content: "•";
    position: absolute;
    top: -6px;
    left: 4px;
    color: var(--bright-aqua);
    font-family: sans-serif;
    font-size: 20px;
    }
    /* ...... 2.1.4 Bullet points in preview -- https://discord.com/channels/686053708261228577/702656734631821413/772094128832905226 */
    ul,
    ul ul,
    ol ul,
    ul ul ul,
    ol ul ul {
    list-style: none;
    }
    li > p {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    }
    ul li:not(.task-list-item)::before {
    content: '•';
    color: var(--bright-aqua);
    display: inline-block;
    width: 1em;
    margin-left: -1.15em;
    padding: 0;
    font-weight: bold;
    text-shadow: 0 0 0.5em var(--bright-aqua);
    }
    ul ul li:not(.task-list-item)::before {
    content: '•';
    }
    ul ul ul li:not(.task-list-item)::before {
    content: '•';
    }
    /* .... 2.2 File Navigation Pane */
    /* ...... 2.2.1 Relationship lines for the folder levels in file navigation: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 */
    .outline .collapsible-item-children {
    margin-left: 20px;
    border-left: 1px solid var(--faded-aqua);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
    }
    .outline .collapsible-item-children:hover {
    border-left-color: var(--faded-aqua);
    }
    .nav-folder-children .nav-folder-children {
    margin-left: 20px;
    padding-left: 0;
    border-left: 1px solid var(--faded-aqua);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
    }
    .nav-folder-children .nav-folder-children:hover {
    border-left-color: var(--faded-aqua);
    }
    /* ...... 2.2.2 Custom icons differing files and folders: https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896 */
    /* Emoji */
    /*.nav-file-title-content::before { content: '🗒 '; }
    .nav-folder-title-content::before { content: '📂 '; }
    */

    /* Flat font */
    /* Requires: https://icomoon.io/#icons-icomoon/liga-font */
    .nav-folder-children .nav-file-title-content:first-child::before {
    content: "\e924 ";
    font-family: "IcoMoon-Free";
    }
    .nav-folder-children .nav-folder-title-content::before {
    content: "\e930 ";
    font-family: "IcoMoon-Free";
    }
    /* .... 2.3 Clutter Free Mode */
    /* ...... 2.3.1 Make subtler folding gutter arrows -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 */
    .CodeMirror-foldgutter-folded:after,
    .CodeMirror-foldgutter-open:after {
    opacity: 0.5;
    font-size: 60%;
    color: var(--bright-aqua);
    }
    .CodeMirror-foldgutter-folded:hover:after,
    .CodeMirror-foldgutter-open:hover:after {
    opacity: 1;
    }
    .CodeMirror-foldgutter-folded:after {
    content: "\25BA";
    }
    .CodeMirror-foldgutter-open:after {
    content: "\25BC";
    }
    /* ...... 2.3.2 Hide Block Reference ID's -- https://discord.com/channels/686053708261228577/716028884885307432/769267134114037871 */
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-blockid {
    visibility: hidden;
    }
    .cm-blockid::first-letter
    {
    visibility: visible;
    font-weight: 800;
    }
    /* ...... 2.3.3 Shortened Url Links -- https://forum.obsidian.md/t/hide-or-truncate-urls-in-editor-using-css/359/3 */
    div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting) {
    font-size: 0;
    }
    div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after {
    content: '🔗';
    font-size: 1rem;
    }
    /* ...... 2.3.4 highlight (==) not visible anymore if not active line -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/221 */
    div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight {
    font-size: 1em;
    color: transparent;
    }
    /* .... 2.4 Font Formatting */
    /* ...... 2.4.1 Make Mathjax Font Larger */
    .MJX-TEX {
    font-size: 180%;
    }
    /* ...... 2.4.2 Hyphenation & Justification https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */
    .cm-s-obsidian,
    .markdown-preview-view {
    text-align: justify;
    hyphens: auto;
    }
    /* ...... 2.4.3 Stylish Block Quotes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */
    blockquote:before {
    font: 14px/20px italic Times, serif;
    content: "“";
    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -0.4em;
    }
    blockquote p {
    display: inline;
    }
    /* ...... 2.4.4 General Font Formatting */
    b, strong, .cm-s-obsidian .cm-strong{
    color: var(--bright-red) !important;
    }
    i, em, span.cm-em {
    color: var(--bright-green) !important;
    }
    u {
    color: var(--bright-purple) !important;
    }
    /* .... 2.5 Graph Formatting */
    /* ...... 2.5.1 Graph View CSS -- https://discordapp.com/channels/686053708261228577/702656734631821413/760488978691784705 */
    .theme-dark .graph-view.color-arrow {
    color: var(--bright-aqua);
    }
    .theme-dark .graph-view.color-fill-tag {
    color: var(--bright-yellow);
    }
    .theme-dark .graph-view.color-fill-attachment {
    color: var(--neutral-blue);
    }
    .theme-dark .graph-view.color-fill-unresolved {
    color: var(--bright-red);
    }
    .graph-view.color-fill {
    color: var(--light1);
    }
    /* .graph-view.color-line {
    color: var(--gray);
    }*/
    /* .... 2.6 Image Manipulation */
    /* ...... 2.6.1 Image Hover Grow -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */
    .markdown-preview-view img {
    display: block;
    margin-top: 20pt;
    margin-bottom: 20pt;
    margin-left: auto;
    margin-right: auto;
    width: 50%; /* experiment with values */
    transition: transform 0.25s ease;
    }
    .markdown-preview-view img:hover {
    -webkit-transform: scale(1.8); /* experiment with values */
    transform: scale(2);
    }
    /* .... 2.7 Check Boxes */
    /* ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */
    /* input[type="checkbox"],
    .cm-formatting-task {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
    vertical-align: top;
    }
    .cm-s-obsidian span.cm-formatting-task {
    color: transparent;
    width: 1.25em !important;
    height: 1.25em;
    display: inline-block;
    }
    input[type="checkbox"]:focus {
    outline: 0;
    }
    input[type="checkbox"]:checked,
    .cm-formatting-task.cm-property {
    background-color: var(--text-accent-hover);
    border: 1px solid var(--text-accent-hover);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
    } */
    /** ...... 2.7.2 Animated Check Boxes -- https://github.com/TriDiamond/Obsidian-Obsidianite/blob/82207bed4313ee0e6f0bb1fd59b04129408018f5/obsidian.css#L463 */

    .contains-task-list .task-list-item .contains-task-list {
    padding-inline-start: 5px;
    }

    .contains-task-list .task-list-item ul.contains-task-list::before {
    left: -46px !important;
    border-width: 2px;
    }

    .contains-task-list .task-list-item {
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    padding-left: 30px;
    }

    .contains-task-list .task-list-item input[type='checkbox'] {
    position: absolute;
    top: 4px;
    left: -23px;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    z-index: 10;
    }

    .markdown-preview-view .list-collapse-indicator {
    margin-left: -80px !important;
    box-sizing: border-box;
    }

    .contains-task-list .task-list-item::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -25px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    border: 2px solid var(--neutral-blue);/* #9e9e9e; */
    margin-right: 15px;
    border-radius: 3px;
    transition: all 0.3s;
    box-sizing: border-box;
    z-index: 1;
    }

    .contains-task-list .is-checked.task-list-item::before {
    border: 10px solid var(--neutral-purple);
    animation: bounce 300ms;
    }

    .contains-task-list .is-checked.task-list-item::after {
    content: '';
    position: absolute;
    top: 8px;
    left: -21px;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transform: rotate(45deg);
    transform-origin: 0% 100%;
    animation: checked-box 125ms 250ms forwards;
    z-index: 5;
    }

    .markdown-preview-view ul > li.task-list-item.is-checked {
    text-decoration: line-through !important;
    color: var(--interactive-accent) !important;
    }

    .markdown-preview-view ul > li.task-list-item.is-checked ul > li:not(.is-checked) {
    text-decoration: none !important;
    color: var(--text-normal) !important;
    }

    @keyframes checked-box {
    0% {
    width: 0;
    height: 0;
    border-color: #FFFFFF;
    transform: translate(0, 0) rotate(45deg);
    }
    33% {
    width: 4px;
    height: 0;
    border-color: #FFFFFF;
    transform: translate(0, 0) rotate(45deg);
    }
    100% {
    width: 4px;
    height: 8px;
    border-color: #FFFFFF;
    transform: translate(0, -8px) rotate(45deg);
    }
    }

    @keyframes bounce {
    0% {
    border-width: 2px;
    /* transform: scale(1); */
    }
    33% {
    border-width: 4px;
    /* transform: scale(0.7); */
    }
    100% {
    border-width: 10px;
    /* transform: scale(1); */
    }
    }
    /* .... 2.8 Tags */
    /* ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */
    .tag:not(.token) {
    background-color: var(--faded-blue);
    border: none;
    color: white;
    font-size: 14px;
    padding: 0px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 14px;
    font-weight: bold;
    }
    .tag:not(.token):hover {
    color: var(--bright-red) !important;
    background-color: var(--bright-red);
    }
    /*==============================================*/
    .tag[href^="#📥️"] {
    background-color: var(--light4);
    color: var(--light4) !important;
    }
    .tag[href^="#🌱️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#🌞️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#🌲️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#✏"] {
    background-color: var(--faded-blue);
    color: var(--faded-blue) !important;
    }
    /*==============================================*/
    .tag[href^="#✅️"] {
    background-color: var(--bright-orange);
    color: var(--bright-orange) !important;
    }
    .tag[href^="#🗺️"] {
    background-color: var(--bright-yellow);
    color: var(--bright-yellow) !important;
    }
    .tag[href^="#⚙️"] {
    background-color: var(--dark3);
    color: var(--dark3) !important;
    }
    .tag[href^="#❗️"] {
    background-color: var(--light1);
    color: var(--light1) !important;
    }
    .tag[href^="#🏷️"] {
    background-color: var(--faded-purple);
    color: var(--faded-purple) !important;
    }
    /* .... 2.9 [[Link]] Modification */
    /* ...... 2.9.1 Bigger Link Hover Popup Preview -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 */
    .popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px;
    min-height: 50px;
    width: 700px;
    overflow: overlay; /* new added */
    }
    .popover.hover-popover .markdown-embed {
    height: 100%;
    }
    .popover.hover-popover.is-loaded .markdown-embed .markdown-embed-content .markdown-preview-view{
    padding: 10px 10px 10px 16px; /*16px two pop magin */
    }
    /* ...... 2.10.1 Calendar Plugin CSS */
    .container {
    --color-background-heading: transparent;

    --color-background-day: transparent;
    --color-background-day-empty: var(--background-secondary-alt);
    --color-background-day-active: var(--interactive-accent);
    --color-background-day-hover: var(--interactive-hover);

    --color-dot: var(--text-muted);

    --color-text-heading: var(--text-normal);
    --color-text-day: var(--text-normal);
    --color-text-today: var(--text-accent);
    }
    /** .... 2.11 Heading Formatting */
    /** ...... 2.11.1 Heading Under Gradient Line -- https://github.com/TriDiamond/Obsidian-Obsidianite */
    .markdown-preview-view h1,
    .markdown-preview-view h2,
    .markdown-preview-view h3,
    .markdown-preview-view h4,
    .markdown-preview-view h5,
    .markdown-preview-view h6 {
    /* padding-top: 1.25rem; */
    /* margin: 45px 0 20px 0; */
    position: relative;
    }
    .markdown-preview-view h1:after,
    .markdown-preview-view h2:after,
    .markdown-preview-view h3:after,
    .markdown-preview-view h4:after,
    .markdown-preview-view h5:after,
    .markdown-preview-view h6:after {
    position: absolute;
    content: '';
    height: 1px;
    width: 35%;
    left: 0;
    bottom: -0.2rem;
    background-image: linear-gradient(to right, var(--bright-aqua), var(--background-primary)) ;
    opacity: 1;
    }
    /** ...... 2.11.2 Emoji Orientation in Andy Mode Headers -- https://discord.com/channels/686053708261228577/702656734631821413/775900471406624768 */
    body.plugin-sliding-panes-rotate-header .workspace > .mod-root .view-header {
    text-orientation: sideways;
    }

    /** .... 2.12 Horizontal Rule Formatting */
    /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */

    .markdown-preview-view hr {
    margin-block-start: 4em;
    margin-block-end: 4em;
    border: none;
    height: 1px;
    background-image: linear-gradient(to right, var(--background-primary), var(--text-accent), var(--background-primary));
    }

    .markdown-preview-view hr::after {
    content: '§';
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%) rotate(60deg);
    transform-origin: 50% 50%;
    padding: 0.5rem;
    color: var(--bright-aqua);
    background-color: var(--background-primary);
    }
    /** ...... 2.13.1 Page Break -- https://gist.github.com/liamcain/81679412643690a7cdd13dff4dc909ce */
    @media print {
    /* pagebreak before all ## headings */
    h2 {
    page-break-before: always;
    }

    h3,
    h4 {
    page-break-after: avoid;
    }

    pre,
    blockquote {
    page-break-inside: avoid;
    }

    /* use double <hr> ('---') to indicate a page break */
    hr + hr {
    page-break-before: always;
    visibility: hidden;
    }

    :not(hr) + hr {
    visibility: hidden;
    }

    :not(hr) + hr + :not(hr):not(h2) {
    border-top: 1px solid black;
    padding-top: 2em;
    }
    }


    /** ...... 2.14.1 Banded Table Rows -- https://discord.com/channels/686053708261228577/702656734631821413/777106171948564500 */
    table {
    padding: 0;
    word-break: initial;
    }

    table tr {
    border-top: 1px solid #cccccc;
    margin: 0;
    padding: 0;
    }

    table tr:nth-child(2n) {
    background-color: var(--dark1);
    }

    table tr th {
    font-weight: bold;
    border: 1px solid #cccccc;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
    }

    table tr td {
    border: 1px solid #cccccc;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
    }

    table tr th:first-child,
    table tr td:first-child {
    margin-top: 0;
    }

    table tr th:last-child,
    table tr td:last-child {
    margin-bottom: 0;
    }
    /** .. 3. Grave Yard */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Change color of internal links https://discordapp.com/channels/686053708261228577/702656734631821413/767572809848848385 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* .cm-s-obsidian span.cm-hmd-internal-link, a.internal-link {
    color: var(--bright-orange) !important;
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Whitespace Characters */ /* https://forum.obsidian.md/t/editors-css-to-show-tabs-trailing-whitespace-and-strict-line-breaks/4234 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* .cm-trailing-space-new-line, .cm-trailing-space-a, .cm-trailing-space-b, .cm-tab{
    font-size: 0;
    }
    .cm-trailing-space-a::before, .cm-trailing-space-b::before, .cm-trailing-space-new-line::before, .cm-tab::before{
    content:'·';
    color:var(--dark2);
    font-size: initial;
    }
    .cm-trailing-space-new-line::before {
    content:'↵';
    }
    .cm-tab::before {
    content:'⟶'
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Remove blockquote left margin
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*
    blockquote {
    margin-inline-start: 0;
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Make Tags and Searched pages have expanded columns --- THIS MESSES WITH ANDY MODE */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div:nth-child(4) > div.workspace-leaf > div > div > div,
    body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-left-split > div.workspace-tabs > div.workspace-leaf > div > div.search-result-container.mod-global-search > div
    {
    column-width:200px;
    }*/
    /* Expand List Column for file search (THIS MESSES WITH ANDY MODE): */
    /*.nav-folder-children
    {
    column-width:200px;
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Lime Light but only for body text */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*.cm-s-obsidian,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-link,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-internal-link,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-url,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-escape-backslash,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-inline-code,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line.HyperMD-codeblock,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-builtin,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hr,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-footref,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line pre.HyperMD-footnote span.cm-hmd-footnote,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-list,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-quote,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-math,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.hmd-fold-math-placeholder {
    color: var(--dark2);
    }
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight {
    background-color: transparent;
    }
    .CodeMirror-activeline {
    color: var(--light1);
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* WYSIWYG Editor Features From: https://discordapp.com/channels/686053708261228577/702656734631821413/749843052385796147 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* inline formatting, link targets and [[ ]] disappears if not active line
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting,
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-string.cm-url,
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link
    { display: none; } */
    /* hide all html tags -- IT IS COMMENTED OUT BY DEFAULT
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag{ display: none; }*/
    /* optionally header hashes span.cm-formatting-header,
    /* except list markers span.cm-formatting-list,
    /* code block backticks span.cm-formatting-code-block.cm-hmd-codeblock
    {
    display: inline !important;
    }*/
    /* and task checkboxes
    span.cm-formatting-task { display: inline !important; font-family: monospace; }
    */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* replace H1-H6 markup in edit mode: https://discordapp.com/channels/686053708261228577/702656734631821413/753842312882159687
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* .CodeMirror-sizer {
    margin-left: 48px !important;
    } */
    /*-- reduce left padding --*/
    /* .CodeMirror {
    height: 100%;
    direction: ltr;
    padding: 0 10px;
    } */
    /*-- header color --*/
    /* .cm-header.cm-header-1 {
    color: var(--text-accent);
    left: 0px;
    position: relative;
    } */
    /* .cm-header.cm-header-2 {
    color: var(--text-accent2);
    left: 0px;
    position: relative;
    } */
    /*-- hide # markup--*/
    /* .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1,
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2,
    .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3,
    .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
    .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6 {
    font-size: 0px;
    }
    */
    /*-- display H1-h6 in gutter--*/
    /* .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before {
    content: "H1";
    font-size: 34px;
    color: var(--text-accent2);
    left: -49px;
    top: -50px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before {
    content: "H2";
    font-size: 26px;
    color: var(--text-accent2);
    left: -43px;
    top: -35px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before {
    content: "H3";
    font-size: 22px;
    color: var(--text-accent2);
    left: -36px;
    top: -6px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before {
    content: "H4";
    font-size: 20px;
    color: var(--text-accent2);
    left: -36px;
    top: -6px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before {
    content: "H5";
    font-size: 18px;
    color: var(--text-accent2);
    left: -36px;
    top: -6px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before {
    content: "H6";
    font-size: 16px;
    color: var(--text-accent2);
    left: -36px;
    top: -4px;
    position: absolute;
    } */

    /*-- is active line, hide H[1-6] in gutter --*/
    /* .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before {
    font-size: 0px;
    } */
    /*-- is active line, display # markup --*/
    /* .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1 {
    font-size: 32px;
    display: inline;
    }
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2 {
    font-size: 24px;
    display: inline;
    }
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3 {
    font-size: 19px;
    display: inline;
    }
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6 {
    font-size: 13px;
    display: inline;
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------
    NO HIGHLIGHT OR LINK MARKS WYSIWYG https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175
    --------------------------------------------------------------------------------------------------------------------------------------------*/
    /* div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link),
    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-highlight {
    display: none !important;
    } */

    1 change: 1 addition & 0 deletions obsidian.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    To get a copy of my most up to date custom CSS sign up to my monthly newsletter [[[HERE]]](https://bryanjenkstech.ck.page/d4ec0713d5) Thank you! 🙏🏻️
  2. tallguyjenks revised this gist Nov 20, 2020. 1 changed file with 116 additions and 1 deletion.
    117 changes: 116 additions & 1 deletion obsidian.css
    Original file line number Diff line number Diff line change
    @@ -49,6 +49,7 @@

    /** .... 2.7 Check Boxes */
    /** ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */
    /** ...... 2.7.2 Animated Check Boxes -- https://github.com/TriDiamond/Obsidian-Obsidianite/blob/82207bed4313ee0e6f0bb1fd59b04129408018f5/obsidian.css#L463 */

    /** .... 2.8 Tags */
    /** ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */
    @@ -770,7 +771,7 @@ u {
    }
    /* .... 2.7 Check Boxes */
    /* ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */
    input[type="checkbox"],
    /* input[type="checkbox"],
    .cm-formatting-task {
    -webkit-appearance: none;
    appearance: none;
    @@ -796,6 +797,120 @@ input[type="checkbox"]:checked,
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
    } */
    /** ...... 2.7.2 Animated Check Boxes -- https://github.com/TriDiamond/Obsidian-Obsidianite/blob/82207bed4313ee0e6f0bb1fd59b04129408018f5/obsidian.css#L463 */

    .contains-task-list .task-list-item .contains-task-list {
    padding-inline-start: 5px;
    }

    .contains-task-list .task-list-item ul.contains-task-list::before {
    left: -46px !important;
    border-width: 2px;
    }

    .contains-task-list .task-list-item {
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
    padding-left: 30px;
    }

    .contains-task-list .task-list-item input[type='checkbox'] {
    position: absolute;
    top: 4px;
    left: -23px;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    z-index: 10;
    }

    .markdown-preview-view .list-collapse-indicator {
    margin-left: -80px !important;
    box-sizing: border-box;
    }

    .contains-task-list .task-list-item::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -25px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    border: 2px solid var(--neutral-blue);/* #9e9e9e; */
    margin-right: 15px;
    border-radius: 3px;
    transition: all 0.3s;
    box-sizing: border-box;
    z-index: 1;
    }

    .contains-task-list .is-checked.task-list-item::before {
    border: 10px solid var(--neutral-purple);
    animation: bounce 300ms;
    }

    .contains-task-list .is-checked.task-list-item::after {
    content: '';
    position: absolute;
    top: 8px;
    left: -21px;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transform: rotate(45deg);
    transform-origin: 0% 100%;
    animation: checked-box 125ms 250ms forwards;
    z-index: 5;
    }

    .markdown-preview-view ul > li.task-list-item.is-checked {
    text-decoration: line-through !important;
    color: var(--interactive-accent) !important;
    }

    .markdown-preview-view ul > li.task-list-item.is-checked ul > li:not(.is-checked) {
    text-decoration: none !important;
    color: var(--text-normal) !important;
    }

    @keyframes checked-box {
    0% {
    width: 0;
    height: 0;
    border-color: #FFFFFF;
    transform: translate(0, 0) rotate(45deg);
    }
    33% {
    width: 4px;
    height: 0;
    border-color: #FFFFFF;
    transform: translate(0, 0) rotate(45deg);
    }
    100% {
    width: 4px;
    height: 8px;
    border-color: #FFFFFF;
    transform: translate(0, -8px) rotate(45deg);
    }
    }

    @keyframes bounce {
    0% {
    border-width: 2px;
    /* transform: scale(1); */
    }
    33% {
    border-width: 4px;
    /* transform: scale(0.7); */
    }
    100% {
    border-width: 10px;
    /* transform: scale(1); */
    }
    }
    /* .... 2.8 Tags */
    /* ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */
  3. tallguyjenks revised this gist Nov 19, 2020. 1 changed file with 14 additions and 3 deletions.
    17 changes: 14 additions & 3 deletions obsidian.css
    Original file line number Diff line number Diff line change
    @@ -123,7 +123,7 @@

    .theme-dark
    {
    --font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace;
    --font-monospace: 'fira code', 'Hack Nerd Font', 'Source Code Pro', monospace;
    --background-primary: var(--dark0);
    --background-primary-alt: var(--dark0);
    --background-secondary: var(--dark0-hard);
    @@ -215,6 +215,11 @@ html,
    body
    {
    font-size: 16px !important;
    font-family: var(--font-monospace); /** Remove this to return body font back to normal */

    /** Norse rune font for hilarity */
    /* font-family: 'Norse';
    font-size: 20px !important; */
    }

    strong
    @@ -335,11 +340,12 @@ img
    {
    padding-top: 0 !important;
    }

    .CodeMirror-code,
    .CodeMirror-linenumber,
    .cm-formatting
    {
    font-family: var(--font-monospace) !important;
    font-size: 0.9em;
    }

    .markdown-preview-section pre code,
    @@ -409,7 +415,7 @@ img

    /* vertical resize-handle */
    .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
    .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
    .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
    .workspace-split.mod-right-split > .workspace-leaf-resize-handle
    {
    width: 1px !important;
    @@ -445,6 +451,11 @@ img
    margin-right: 10px !important;
    }

    .mermaid .note
    {
    fill: var(--dark3) !important;
    }

    .cm-header-1,
    .markdown-preview-section h1
    {
  4. tallguyjenks revised this gist Nov 15, 2020. 1 changed file with 45 additions and 3 deletions.
    48 changes: 45 additions & 3 deletions obsidian.css
    Original file line number Diff line number Diff line change
    @@ -69,6 +69,9 @@
    /** .... 2.13 PDF Export Formatting */
    /** ...... 2.13.1 Page Break -- https://gist.github.com/liamcain/81679412643690a7cdd13dff4dc909ce */

    /** .... 2.14 Tables */
    /** ...... 2.14.1 Banded Table Rows -- https://discord.com/channels/686053708261228577/702656734631821413/777106171948564500 */

    /** .. 3. Grave Yard */
    /* ============================================================================================================================================================ */

    @@ -961,6 +964,48 @@ body.plugin-sliding-panes-rotate-header .workspace > .mod-root .view-header {
    padding-top: 2em;
    }
    }


    /** ...... 2.14.1 Banded Table Rows -- https://discord.com/channels/686053708261228577/702656734631821413/777106171948564500 */
    table {
    padding: 0;
    word-break: initial;
    }

    table tr {
    border-top: 1px solid #cccccc;
    margin: 0;
    padding: 0;
    }

    table tr:nth-child(2n) {
    background-color: var(--dark1);
    }

    table tr th {
    font-weight: bold;
    border: 1px solid #cccccc;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
    }

    table tr td {
    border: 1px solid #cccccc;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
    }

    table tr th:first-child,
    table tr td:first-child {
    margin-top: 0;
    }

    table tr th:last-child,
    table tr td:last-child {
    margin-bottom: 0;
    }
    /** .. 3. Grave Yard */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    @@ -1208,6 +1253,3 @@ div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-highlight {
    display: none !important;
    } */




  5. tallguyjenks revised this gist Nov 11, 2020. 1 changed file with 41 additions and 6 deletions.
    47 changes: 41 additions & 6 deletions obsidian.css
    Original file line number Diff line number Diff line change
    @@ -61,10 +61,14 @@

    /** .... 2.11 Heading Formatting */
    /** ...... 2.11.1 Heading Under Gradient Line -- https://github.com/TriDiamond/Obsidian-Obsidianite */
    /** ...... 2.11.2 Emoji Orientation in Andy Mode Headers -- https://discord.com/channels/686053708261228577/702656734631821413/775900471406624768 */

    /** .... 2.12 Horizontal Rule Formatting */
    /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */

    /** .... 2.13 PDF Export Formatting */
    /** ...... 2.13.1 Page Break -- https://gist.github.com/liamcain/81679412643690a7cdd13dff4dc909ce */

    /** .. 3. Grave Yard */
    /* ============================================================================================================================================================ */

    @@ -898,6 +902,10 @@ padding: 10px 10px 10px 16px; /*16px two pop magin */
    background-image: linear-gradient(to right, var(--bright-aqua), var(--background-primary)) ;
    opacity: 1;
    }
    /** ...... 2.11.2 Emoji Orientation in Andy Mode Headers -- https://discord.com/channels/686053708261228577/702656734631821413/775900471406624768 */
    body.plugin-sliding-panes-rotate-header .workspace > .mod-root .view-header {
    text-orientation: sideways;
    }

    /** .... 2.12 Horizontal Rule Formatting */
    /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */
    @@ -921,10 +929,39 @@ padding: 10px 10px 10px 16px; /*16px two pop magin */
    color: var(--bright-aqua);
    background-color: var(--background-primary);
    }



    /* .. 3. Grave Yard */
    /** ...... 2.13.1 Page Break -- https://gist.github.com/liamcain/81679412643690a7cdd13dff4dc909ce */
    @media print {
    /* pagebreak before all ## headings */
    h2 {
    page-break-before: always;
    }

    h3,
    h4 {
    page-break-after: avoid;
    }

    pre,
    blockquote {
    page-break-inside: avoid;
    }

    /* use double <hr> ('---') to indicate a page break */
    hr + hr {
    page-break-before: always;
    visibility: hidden;
    }

    :not(hr) + hr {
    visibility: hidden;
    }

    :not(hr) + hr + :not(hr):not(h2) {
    border-top: 1px solid black;
    padding-top: 2em;
    }
    }
    /** .. 3. Grave Yard */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Change color of internal links https://discordapp.com/channels/686053708261228577/702656734631821413/767572809848848385 */
    @@ -1174,5 +1211,3 @@ div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-highlight {





  6. tallguyjenks revised this gist Nov 4, 2020. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions obsidian.css
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,19 @@
    /**=================================================================================
    /** ██████╗░██████╗░██╗░░░██╗░█████╗░███╗░░██╗██╗░██████╗
    /** ██╔══██╗██╔══██╗╚██╗░██╔╝██╔══██╗████╗░██║╚█║██╔════╝
    /** ██████╦╝██████╔╝░╚████╔╝░███████║██╔██╗██║░╚╝╚█████╗░
    /** ██╔══██╗██╔══██╗░░╚██╔╝░░██╔══██║██║╚████║░░░░╚═══██╗
    /** ██████╦╝██║░░██║░░░██║░░░██║░░██║██║░╚███║░░░██████╔╝
    /** ╚═════╝░╚═╝░░╚═╝░░░╚═╝░░░╚═╝░░╚═╝╚═╝░░╚══╝░░░╚═════╝░
    /**
    /** ░█████╗░██████╗░░██████╗██╗██████╗░██╗░█████╗░███╗░░██╗  ░█████╗░░██████╗░██████╗
    /** ██╔══██╗██╔══██╗██╔════╝██║██╔══██╗██║██╔══██╗████╗░██║  ██╔══██╗██╔════╝██╔════╝
    /** ██║░░██║██████╦╝╚█████╗░██║██║░░██║██║███████║██╔██╗██║  ██║░░╚═╝╚█████╗░╚█████╗░
    /** ██║░░██║██╔══██╗░╚═══██╗██║██║░░██║██║██╔══██║██║╚████║  ██║░░██╗░╚═══██╗░╚═══██╗
    /** ╚█████╔╝██████╦╝██████╔╝██║██████╔╝██║██║░░██║██║░╚███║  ╚█████╔╝██████╔╝██████╔╝
    /** ░╚════╝░╚═════╝░╚═════╝░╚═╝╚═════╝░╚═╝╚═╝░░╚═╝╚═╝░░╚══╝  ░╚════╝░╚═════╝░╚═════╝░
    /**==================================================================================*/

    /** ----- TABLE OF CONTENTS ----- */

    /** .. 1. Default Theme */
  7. tallguyjenks revised this gist Nov 1, 2020. 1 changed file with 710 additions and 677 deletions.
    1,387 changes: 710 additions & 677 deletions obsidian.css
    Original file line number Diff line number Diff line change
    @@ -1,122 +1,181 @@
    :root {
    --dark0-hard: #1d2021;
    --dark0: #282828;
    --dark0-soft: #32302f;
    --dark1: #3c3836;
    --dark2: #504945;
    --dark3: #665c54;
    --dark4: #7c6f64;

    --gray: #928374;

    --light0-hard: #f9f5d7;
    --light0: #fbf1c7;
    --light0-soft: #f2e5bc;
    --light1: #ebdbb2;
    --light2: #d5c4a1;
    --light3: #bdae93;
    --light4: #a89984;

    --bright-red: #fb4934;
    --bright-green: #b8bb26;
    --bright-yellow: #fabd2f;
    --bright-blue: #83a598;
    --bright-purple: #d3869b;
    --bright-aqua: #8ec07c;
    --bright-orange: #fe8019;

    --neutral-red: #cc241d;
    --neutral-green: #98971a;
    --neutral-yellow: #d79921;
    --neutral-blue: #458588;
    --neutral-purple: #b16286;
    --neutral-aqua: #689d6a;
    --neutral-orange: #d65d0e;

    --faded-red: #9d0006;
    --faded-green: #79740e;
    --faded-yellow: #b57614;
    --faded-blue: #076678;
    --faded-purple: #8f3f71;
    --faded-aqua: #427b58;
    --faded-orange: #af3a03;
    }

    .theme-dark {
    --font-monospace: "Hack Nerd Font", "Source Code Pro", monospace;
    --background-primary: var(--dark0);
    --background-primary-alt: var(--dark0);
    --background-secondary: var(--dark0-hard);
    --background-secondary-alt: var(--dark1);
    --text-normal: var(--light0);
    --text-faint: var(--light3);
    --text-title-h1: var(--neutral-red);
    --text-title-h2: var(--neutral-orange);
    --text-title-h3: var(--neutral-yellow);
    --text-title-h4: var(--neutral-green);
    --text-title-h5: var(--neutral-aqua);
    --text-title-h6: var(--neutral-purple);
    --text-link: var(--bright-blue);
    --text-a: var(--bright-orange);
    --text-a-hover: var(--bright-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--dark1);
    --text-highlight-bg: var(--faded-aqua);
    --interactive-accent: var(--bright-orange);
    --interactive-before: var(--dark4);
    --background-modifier-border: var(--dark2);
    --text-accent: var(--bright-orange);
    --interactive-accent-rgb: var(--bright-orange);
    --inline-code: var(--bright-blue);
    --code-block: var(--bright-blue);
    --vim-cursor: var(--bright-orange);
    --text-selection: var(--dark3);
    }

    .theme-light {
    --background-primary: var(--light0);
    --background-primary-alt: var(--light0);
    --background-secondary: var(--light0-hard);
    --background-secondary-alt: var(--light1);
    --text-normal: var(--dark0);
    --text-faint: var(--dark3);
    --text-title-h1: var(--faded-red);
    --text-title-h2: var(--faded-orange);
    --text-title-h3: var(--faded-yellow);
    --text-title-h4: var(--faded-green);
    --text-title-h5: var(--faded-aqua);
    --text-title-h6: var(--faded-purple);
    --text-link: var(--neutral-blue);
    --text-a: var(--neutral-orange);
    --text-a-hover: var(--neutral-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--light1);
    --text-highlight-bg: var(--bright-aqua);
    --interactive-accent: var(--neutral-orange);
    --interactive-before: var(--light4);
    --background-modifier-border: var(--light2);
    --text-accent: var(--neutral-orange);
    --interactive-accent-rgb: var(--neutral-orange);
    --inline-code: var(--neutral-blue);
    --vim-cursor: var(--neutral-orange);
    --text-selection: var(--light2);
    /** ----- TABLE OF CONTENTS ----- */

    /** .. 1. Default Theme */
    /** .. 2. Custom CSS Section */

    /** .... 2.1 Bullet Points */
    /** ...... 2.1.1 Bullet Point Relationship Lines -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2 */
    /** ...... 2.1.2 tasklist (preview) indentation lines correction -- https://forum.obsidian.md/t/bullet-lines-in-css-for-checkboxes/6262/3 */
    /** ...... 2.1.3 Better Bullet Points In Edit Mode https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */
    /** ...... 2.1.4 Bullet points in preview -- https://discord.com/channels/686053708261228577/702656734631821413/772094128832905226 */

    /** .... 2.2 File Navigation Pane */
    /** ...... 2.2.1 Relationship lines for the folder levels in file navigation: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 */
    /** ...... 2.2.2 Custom icons differing files and folders -- https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896 */

    /** .... 2.3 Clutter Free Mode */
    /** ...... 2.3.1 Make subtler folding gutter arrows -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 */
    /** ...... 2.3.2 Hide Block Reference ID's -- https://discord.com/channels/686053708261228577/716028884885307432/769267134114037871 */
    /** ...... 2.3.3 Shortened Url Links -- https://forum.obsidian.md/t/hide-or-truncate-urls-in-editor-using-css/359/3 */
    /** ...... 2.3.4 highlight (==) not visible anymore if not active line -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/221 */

    /** .... 2.4 Font Formatting */
    /** ...... 2.4.1 Make Mathjax Font Larger */
    /** ...... 2.4.2 Hyphenation & Justification -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */
    /** ...... 2.4.3 Stylish Block Quotes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */
    /** ...... 2.4.4 General Font Formatting */

    /** .... 2.5 Graph Formatting */
    /** ...... 2.5.1 Graph View CSS -- https://discordapp.com/channels/686053708261228577/702656734631821413/760488978691784705 */

    /** .... 2.6 Image Manipulation */
    /** ...... 2.6.1 Image Hover Grow -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */

    /** .... 2.7 Check Boxes */
    /** ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */

    /** .... 2.8 Tags */
    /** ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */

    /** .... 2.9 [[Link]] Modification */
    /** ...... 2.9.1 Bigger Link Hover Popup Preview -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 */

    /** .... 2.10 Plugin Specific CSS */
    /** ...... 2.10.1 Calendar Plugin CSS */

    /** .... 2.11 Heading Formatting */
    /** ...... 2.11.1 Heading Under Gradient Line -- https://github.com/TriDiamond/Obsidian-Obsidianite */

    /** .... 2.12 Horizontal Rule Formatting */
    /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */

    /** .. 3. Grave Yard */
    /* ============================================================================================================================================================ */

    /* 1. Default Theme */
    :root
    {
    --dark0-hard: #1d2021;
    --dark0: #282828;
    --dark0-soft: #32302f;
    --dark1: #3c3836;
    --dark2: #504945;
    --dark3: #665c54;
    --dark4: #7c6f64;

    --gray: #928374;

    --light0-hard: #f9f5d7;
    --light0: #fbf1c7;
    --light0-soft: #f2e5bc;
    --light1: #ebdbb2;
    --light2: #d5c4a1;
    --light3: #bdae93;
    --light4: #a89984;

    --bright-red: #fb4934;
    --bright-green: #b8bb26;
    --bright-yellow: #fabd2f;
    --bright-blue: #83a598;
    --bright-purple: #d3869b;
    --bright-aqua: #8ec07c;
    --bright-orange: #fe8019;

    --neutral-red: #cc241d;
    --neutral-green: #98971a;
    --neutral-yellow: #d79921;
    --neutral-blue: #458588;
    --neutral-purple: #b16286;
    --neutral-aqua: #689d6a;
    --neutral-orange: #d65d0e;

    --faded-red: #9d0006;
    --faded-green: #79740e;
    --faded-yellow: #b57614;
    --faded-blue: #076678;
    --faded-purple: #8f3f71;
    --faded-aqua: #427b58;
    --faded-orange: #af3a03;
    }

    .theme-dark
    {
    --font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace;
    --background-primary: var(--dark0);
    --background-primary-alt: var(--dark0);
    --background-secondary: var(--dark0-hard);
    --background-secondary-alt: var(--dark1);
    --text-normal: var(--light0);
    --text-faint: var(--light3);
    --text-title-h1: var(--neutral-red);
    --text-title-h2: var(--neutral-orange);
    --text-title-h3: var(--neutral-yellow);
    --text-title-h4: var(--neutral-green);
    --text-title-h5: var(--neutral-aqua);
    --text-link: var(--bright-blue);
    --text-a: var(--bright-orange);
    --text-a-hover: var(--bright-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--dark1);
    --text-highlight-bg: var(--faded-aqua);
    --interactive-accent: var(--bright-orange);
    --interactive-before: var(--dark4);
    --background-modifier-border: var(--dark2);
    --text-accent: var(--bright-orange);
    --interactive-accent-rgb: var(--bright-orange);
    --inline-code: var(--bright-blue);
    --code-block: var(--bright-blue);
    --vim-cursor: var(--bright-orange);
    --text-selection: rgba(168, 153, 132, 0.5); /* light4 */
    }

    .theme-light
    {
    --background-primary: var(--light0);
    --background-primary-alt: var(--light0);
    --background-secondary: var(--light0-hard);
    --background-secondary-alt: var(--light1);
    --text-normal: var(--dark0);
    --text-faint: var(--dark3);
    --text-title-h1: var(--faded-red);
    --text-title-h2: var(--faded-orange);
    --text-title-h3: var(--faded-yellow);
    --text-title-h4: var(--faded-green);
    --text-title-h5: var(--faded-aqua);
    --text-link: var(--neutral-blue);
    --text-a: var(--neutral-orange);
    --text-a-hover: var(--neutral-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--light1);
    --text-highlight-bg: var(--bright-aqua);
    --interactive-accent: var(--neutral-orange);
    --interactive-before: var(--light4);
    --background-modifier-border: var(--light2);
    --text-accent: var(--neutral-orange);
    --interactive-accent-rgb: var(--neutral-orange);
    --inline-code: var(--neutral-blue);
    --vim-cursor: var(--neutral-orange);
    --text-selection: rgba(189, 174, 147, 0.5); /* light3 */
    }

    .theme-dark code[class*="language-"],
    .theme-dark pre[class*="language-"],
    .theme-light code[class*="language-"],
    .theme-light pre[class*="language-"] {
    text-shadow: none !important;
    background-color: var(--pre-code) !important;
    .theme-light pre[class*="language-"]
    {
    text-shadow: none !important;
    background-color: var(--pre-code) !important;
    }

    .graph-view.color-circle,
    .graph-view.color-fill-highlight,
    .graph-view.color-line-highlight {
    color: var(--interactive-accent-rgb) !important;
    .graph-view.color-line-highlight
    {
    color: var(--interactive-accent-rgb) !important;
    }
    .graph-view.color-text {
    color: var(--text-a-hover) !important;
    .graph-view.color-text
    {
    color: var(--text-a-hover) !important;
    }
    /*
    .graph-view.color-fill
    @@ -130,296 +189,340 @@
    */

    html,
    body {
    font-size: 16px !important;
    body
    {
    font-size: 16px !important;
    }

    strong {
    font-weight: 600 !important;
    strong
    {
    font-weight: 600 !important;
    }

    a,
    .cm-hmd-internal-link {
    color: var(--text-a) !important;
    text-decoration: none !important;
    .cm-hmd-internal-link
    {
    color: var(--text-a) !important;
    text-decoration: none !important;
    }

    a:hover,
    .cm-hmd-internal-link:hover,
    .cm-url {
    color: var(--text-a-hover) !important;
    text-decoration: none !important;
    .cm-url
    {
    color: var(--text-a-hover) !important;
    text-decoration: none !important;
    }

    mark {
    background-color: var(--text-mark) !important;
    color: var(--dark0) !important;
    mark
    {
    background-color: var(--text-mark) !important;
    color: var(--dark0) !important;
    }

    .view-actions a {
    color: var(--text-normal) !important;
    .view-actions a
    {
    color: var(--text-normal) !important;
    }

    .view-actions a:hover {
    color: var(--text-a) !important;
    .view-actions a:hover
    {
    color: var(--text-a) !important;
    }

    .HyperMD-codeblock-bg {
    background-color: var(--pre-code) !important;
    .HyperMD-codeblock-bg
    {
    background-color: var(--pre-code) !important;
    }

    .HyperMD-codeblock {
    line-height: 1.4em !important;
    color: var(--code-block) !important;
    .HyperMD-codeblock
    {
    line-height: 1.4em !important;
    color: var(--code-block) !important;
    }

    .HyperMD-codeblock-begin {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    .HyperMD-codeblock-begin
    {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    }

    .HyperMD-codeblock-end {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    .HyperMD-codeblock-end
    {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    }

    th {
    font-weight: 600 !important;
    th
    {
    font-weight: 600 !important;
    }

    thead {
    border-bottom: 2px solid var(--background-modifier-border) !important;
    thead
    {
    border-bottom: 2px solid var(--background-modifier-border) !important;
    }

    .HyperMD-table-row {
    line-height: normal !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    background-color: var(--pre-code) !important;
    .HyperMD-table-row
    {
    line-height: normal !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    background-color: var(--pre-code) !important;
    }

    .HyperMD-table-row-0 {
    /* padding-top: 4px !important; */
    .HyperMD-table-row-0
    {
    /* padding-top: 4px !important; */
    }

    .CodeMirror-foldgutter-folded,
    .is-collapsed .nav-folder-collapse-indicator {
    color: var(--text-a) !important;
    .is-collapsed .nav-folder-collapse-indicator
    {
    color: var(--text-a) !important;
    }

    .nav-file-tag {
    color: var(--text-a) !important;
    .nav-file-tag
    {
    color: var(--text-a) !important;
    }

    .is-active .nav-file-title {
    color: var(--text-a) !important;
    background-color: var(--background-primary-alt) !important;
    .is-active .nav-file-title
    {
    color: var(--text-a) !important;
    background-color: var(--background-primary-alt) !important;
    }

    .nav-file-title {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    .nav-file-title
    {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    }

    img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    img
    {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    .HyperMD-list-line {
    padding-top: 0 !important;
    .HyperMD-list-line
    {
    padding-top: 0 !important;
    }

    .CodeMirror-linenumber,
    .cm-formatting {
    font-family: var(--font-monospace) !important;
    .cm-formatting
    {
    font-family: var(--font-monospace) !important;
    }

    .markdown-preview-section pre code,
    .markdown-preview-section code {
    font-size: 0.9em !important;
    background-color: var(--pre-code) !important;
    .markdown-preview-section code
    {
    font-size: 0.9em !important;
    background-color: var(--pre-code) !important;
    }

    .markdown-preview-section pre code {
    padding: 4px !important;
    line-height: 1.4em !important;
    display: block !important;
    color: var(--code-block) !important;
    .markdown-preview-section pre code
    {
    padding: 4px !important;
    line-height: 1.4em !important;
    display: block !important;
    color: var(--code-block) !important;
    }

    .markdown-preview-section code {
    color: var(--inline-code) !important;
    .markdown-preview-section code
    {
    color: var(--inline-code) !important;
    }

    .cm-s-obsidian,
    .cm-inline-code {
    -webkit-font-smoothing: auto !important;
    .cm-inline-code
    {
    -webkit-font-smoothing: auto !important;
    }

    .cm-inline-code {
    color: var(--inline-code) !important;
    background-color: var(--pre-code) !important;
    padding: 1px !important;
    .cm-inline-code
    {
    color: var(--inline-code) !important;
    background-color: var(--pre-code) !important;
    padding: 1px !important;
    }

    .workspace-leaf-header-title {
    font-weight: 600 !important;
    .workspace-leaf-header-title
    {
    font-weight: 600 !important;
    }

    .side-dock-title {
    padding-top: 15px !important;
    font-size: 20px !important;
    .side-dock-title
    {
    padding-top: 15px !important;
    font-size: 20px !important;
    }

    .side-dock-ribbon-tab:hover,
    .side-dock-ribbon-action:hover,
    .side-dock-ribbon-action.is-active:hover,
    .nav-action-button:hover,
    .side-dock-collapse-btn:hover {
    color: var(--text-a);
    .side-dock-collapse-btn:hover
    {
    color: var(--text-a);
    }

    .side-dock {
    border-right: 0 !important;
    .side-dock
    {
    border-right: 0 !important;
    }

    .cm-s-obsidian,
    .markdown-preview-view {
    padding-left: 10px !important;
    padding-right: 10px !important;
    .markdown-preview-view
    {
    padding-left: 10px !important;
    padding-right: 10px !important;
    }

    /* vertical resize-handle */
    .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
    .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
    .workspace-split.mod-right-split > .workspace-leaf-resize-handle {
    width: 1px !important;
    background-color: var(--background-secondary-alt);
    .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
    .workspace-split.mod-right-split > .workspace-leaf-resize-handle
    {
    width: 1px !important;
    background-color: var(--background-secondary-alt);
    }

    /* horizontal resize-handle */
    .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle {
    height: 1px !important;
    background-color: var(--background-secondary-alt);
    .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle
    {
    height: 1px !important;
    background-color: var(--background-secondary-alt);
    }

    /* Remove vertical split padding */
    .workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
    .workspace-split.mod-vertical > .workspace-split,
    .workspace-split.mod-vertical > .workspace-leaf,
    .workspace-tabs {
    padding-right: 0px;
    .workspace-tabs
    {
    padding-right: 0px;
    }

    .markdown-embed-title {
    font-weight: 600 !important;
    .markdown-embed-title
    {
    font-weight: 600 !important;
    }

    .markdown-embed {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    .markdown-embed
    {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    }

    .cm-header-1,
    .markdown-preview-section h1 {
    font-weight: 500 !important;
    font-size: 34px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h1) !important;
    .markdown-preview-section h1
    {
    font-weight: 500 !important;
    font-size: 34px !important;
    color: var(--text-title-h1) !important;
    }

    .cm-header-2,
    .markdown-preview-section h2 {
    font-weight: 500 !important;
    font-size: 26px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h2) !important;
    .markdown-preview-section h2
    {
    font-weight: 500 !important;
    font-size: 26px !important;
    color: var(--text-title-h2) !important;
    }

    .cm-header-3,
    .markdown-preview-section h3 {
    font-weight: 500 !important;
    font-size: 22px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h3) !important;
    .markdown-preview-section h3
    {
    font-weight: 500 !important;
    font-size: 22px !important;
    color: var(--text-title-h3) !important;
    }

    .cm-header-4,
    .markdown-preview-section h4 {
    font-weight: 500 !important;
    font-size: 20px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h4) !important;
    .markdown-preview-section h4
    {
    font-weight: 500 !important;
    font-size: 20px !important;
    color: var(--text-title-h4) !important;
    }

    .cm-header-5,
    .markdown-preview-section h5 {
    font-weight: 500 !important;
    font-size: 18px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h5) !important;
    }

    .cm-header-6,
    .markdown-preview-section h6 {
    font-weight: 500 !important;
    font-size: 16px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h6) !important;
    .markdown-preview-section h5,
    .markdown-preview-section h6
    {
    font-weight: 500 !important;
    font-size: 18px !important;
    color: var(--text-title-h5) !important;
    }

    .suggestion-item.is-selected {
    background-color: var(--background-secondary);
    .suggestion-item.is-selected
    {
    background-color: var(--background-secondary);
    }

    .empty-state-container:hover {
    background-color: var(--background-secondary-alt);
    border: 5px solid var(--interactive-accent) !important;
    .empty-state-container:hover
    {
    background-color: var(--background-secondary-alt);
    border: 5px solid var(--interactive-accent) !important;
    }

    .checkbox-container {
    background-color: var(--interactive-before);
    .checkbox-container
    {
    background-color: var(--interactive-before);
    }

    .checkbox-container:after {
    background-color: var(--background-secondary-alt);
    .checkbox-container:after
    {
    background-color: var(--background-secondary-alt);
    }

    .mod-cta {
    color: var(--background-secondary-alt) !important;
    font-weight: 600 !important;
    .mod-cta
    {
    color: var(--background-secondary-alt) !important;
    font-weight: 600 !important;
    }

    .mod-cta:hover {
    background-color: var(--interactive-before) !important;
    font-weight: 600 !important;
    .mod-cta:hover
    {
    background-color: var(--interactive-before) !important;
    font-weight: 600 !important;
    }

    .CodeMirror-cursor {
    background-color: var(--vim-cursor) !important;
    opacity: 60% !important;
    .CodeMirror-cursor
    {
    background-color: var(--vim-cursor) !important;
    opacity: 60% !important;
    }

    input.task-list-item-checkbox {
    border: 1px solid var(--dark4);
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--dark4);
    appearance: none;
    -webkit-appearance: none;
    }

    input.task-list-item-checkbox:checked {
    background-color: var(--dark4);
    box-shadow: inset 0 0 0 2px var(--background-primary);
    input.task-list-item-checkbox:checked
    {
    background-color: var(--dark4);
    box-shadow: inset 0 0 0 2px var(--background-primary);
    }

    /*============================================================================================================================================*/
    /*| |*/
    /*| THIS IS MY CUSTOM CSS SECTION WHERE I FIND COOL SHIT AND ADD IT IN |*/
    /*| |*/
    /*============================================================================================================================================*/
    ::selection
    {
    background-color: var(--text-selection) !important;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* BULLET POINT RELATIONSHIP LINES */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* .. 2. Custom CSS Section */
    /* .... 2.1 Bullet Points */
    /* ...... 2.1.1 Bullet Point Relationship Lines -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2 */
    .cm-hmd-list-indent .cm-tab,
    ul ul {
    position: relative;
    @@ -440,33 +543,184 @@ ul ul::before {
    top: 0;
    bottom: 0;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* tasklist (preview) indentation lines correction */ /* https://forum.obsidian.md/t/bullet-lines-in-css-for-checkboxes/6262/3 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* ...... 2.1.2 tasklist (preview) indentation lines correction -- https://forum.obsidian.md/t/bullet-lines-in-css-for-checkboxes/6262/3 */
    .contains-task-list::before {
    left: 10px ;
    }
    /* ...... 2.1.3 Better Bullet Points In Edit Mode https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */
    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul {
    color: transparent;
    position: relative;
    }
    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after {
    content: "•";
    position: absolute;
    top: -6px;
    left: 4px;
    color: var(--bright-aqua);
    font-family: sans-serif;
    font-size: 20px;
    }
    /* ...... 2.1.4 Bullet points in preview -- https://discord.com/channels/686053708261228577/702656734631821413/772094128832905226 */
    ul,
    ul ul,
    ol ul,
    ul ul ul,
    ol ul ul {
    list-style: none;
    }
    li > p {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    }
    ul li:not(.task-list-item)::before {
    content: '•';
    color: var(--bright-aqua);
    display: inline-block;
    width: 1em;
    margin-left: -1.15em;
    padding: 0;
    font-weight: bold;
    text-shadow: 0 0 0.5em var(--bright-aqua);
    }
    ul ul li:not(.task-list-item)::before {
    content: '•';
    }
    ul ul ul li:not(.task-list-item)::before {
    content: '•';
    }
    /* .... 2.2 File Navigation Pane */
    /* ...... 2.2.1 Relationship lines for the folder levels in file navigation: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 */
    .outline .collapsible-item-children {
    margin-left: 20px;
    border-left: 1px solid var(--faded-aqua);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
    }
    .outline .collapsible-item-children:hover {
    border-left-color: var(--faded-aqua);
    }
    .nav-folder-children .nav-folder-children {
    margin-left: 20px;
    padding-left: 0;
    border-left: 1px solid var(--faded-aqua);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
    }
    .nav-folder-children .nav-folder-children:hover {
    border-left-color: var(--faded-aqua);
    }
    /* ...... 2.2.2 Custom icons differing files and folders: https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896 */
    /* Emoji */
    /*.nav-file-title-content::before { content: '🗒 '; }
    .nav-folder-title-content::before { content: '📂 '; }
    */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* MAKE MATHJAX FONT LARGER */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Flat font */
    /* Requires: https://icomoon.io/#icons-icomoon/liga-font */
    .nav-folder-children .nav-file-title-content:first-child::before {
    content: "\e924 ";
    font-family: "IcoMoon-Free";
    }
    .nav-folder-children .nav-folder-title-content::before {
    content: "\e930 ";
    font-family: "IcoMoon-Free";
    }
    /* .... 2.3 Clutter Free Mode */
    /* ...... 2.3.1 Make subtler folding gutter arrows -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 */
    .CodeMirror-foldgutter-folded:after,
    .CodeMirror-foldgutter-open:after {
    opacity: 0.5;
    font-size: 60%;
    color: var(--bright-aqua);
    }
    .CodeMirror-foldgutter-folded:hover:after,
    .CodeMirror-foldgutter-open:hover:after {
    opacity: 1;
    }
    .CodeMirror-foldgutter-folded:after {
    content: "\25BA";
    }
    .CodeMirror-foldgutter-open:after {
    content: "\25BC";
    }
    /* ...... 2.3.2 Hide Block Reference ID's -- https://discord.com/channels/686053708261228577/716028884885307432/769267134114037871 */
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-blockid {
    visibility: hidden;
    }
    .cm-blockid::first-letter
    {
    visibility: visible;
    font-weight: 800;
    }
    /* ...... 2.3.3 Shortened Url Links -- https://forum.obsidian.md/t/hide-or-truncate-urls-in-editor-using-css/359/3 */
    div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting) {
    font-size: 0;
    }
    div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after {
    content: '🔗';
    font-size: 1rem;
    }
    /* ...... 2.3.4 highlight (==) not visible anymore if not active line -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/221 */
    div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight {
    font-size: 1em;
    color: transparent;
    }
    /* .... 2.4 Font Formatting */
    /* ...... 2.4.1 Make Mathjax Font Larger */
    .MJX-TEX {
    font-size: 180%;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* _hyphenation_and_justification https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* ...... 2.4.2 Hyphenation & Justification https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */
    .cm-s-obsidian,
    .markdown-preview-view {
    text-align: justify;
    hyphens: auto;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* IMAGE HOVER GROW https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* ...... 2.4.3 Stylish Block Quotes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */
    blockquote:before {
    font: 14px/20px italic Times, serif;
    content: "“";
    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -0.4em;
    }
    blockquote p {
    display: inline;
    }
    /* ...... 2.4.4 General Font Formatting */
    b, strong, .cm-s-obsidian .cm-strong{
    color: var(--bright-red) !important;
    }
    i, em, span.cm-em {
    color: var(--bright-green) !important;
    }
    u {
    color: var(--bright-purple) !important;
    }
    /* .... 2.5 Graph Formatting */
    /* ...... 2.5.1 Graph View CSS -- https://discordapp.com/channels/686053708261228577/702656734631821413/760488978691784705 */
    .theme-dark .graph-view.color-arrow {
    color: var(--bright-aqua);
    }
    .theme-dark .graph-view.color-fill-tag {
    color: var(--bright-yellow);
    }
    .theme-dark .graph-view.color-fill-attachment {
    color: var(--neutral-blue);
    }
    .theme-dark .graph-view.color-fill-unresolved {
    color: var(--bright-red);
    }
    .graph-view.color-fill {
    color: var(--light1);
    }
    /* .graph-view.color-line {
    color: var(--gray);
    }*/
    /* .... 2.6 Image Manipulation */
    /* ...... 2.6.1 Image Hover Grow -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */
    .markdown-preview-view img {
    display: block;
    margin-top: 20pt;
    @@ -476,17 +730,12 @@ ul ul::before {
    width: 50%; /* experiment with values */
    transition: transform 0.25s ease;
    }

    .markdown-preview-view img:hover {
    -webkit-transform: scale(1.8); /* experiment with values */
    transform: scale(2);
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* NICER CHECK BOXES */
    /* Round checkbxes in preview and editor */
    /* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* .... 2.7 Check Boxes */
    /* ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */
    input[type="checkbox"],
    .cm-formatting-task {
    -webkit-appearance: none;
    @@ -496,14 +745,12 @@ input[type="checkbox"],
    padding: 0;
    vertical-align: top;
    }

    .cm-s-obsidian span.cm-formatting-task {
    color: transparent;
    width: 1.25em !important;
    height: 1.25em;
    display: inline-block;
    }

    input[type="checkbox"]:focus {
    outline: 0;
    }
    @@ -516,197 +763,205 @@ input[type="checkbox"]:checked,
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* STYLISH BLOCK QUOTES */
    /* Add quotation character before quote */
    /* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    blockquote:before {
    font: 14px/20px italic Times, serif;
    content: "“";
    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -0.4em;
    /* .... 2.8 Tags */
    /* ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */
    .tag:not(.token) {
    background-color: var(--faded-blue);
    border: none;
    color: white;
    font-size: 14px;
    padding: 0px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 14px;
    font-weight: bold;
    }
    blockquote p {
    display: inline;
    .tag:not(.token):hover {
    color: var(--bright-red) !important;
    background-color: var(--bright-red);
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Remove blockquote left margin
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*
    blockquote {
    margin-inline-start: 0;
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*============bigger link popup preview ================*/
    /* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/82 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px; /* was 300 */
    min-height: 100px;
    width: 500px; /* was 400 */
    /*==============================================*/
    .tag[href^="#📥️"] {
    background-color: var(--light4);
    color: var(--light4) !important;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Expand List Column for file search --- THIS MESSES WITH ANDY MODE */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*.nav-folder-children
    {
    column-width:200px;
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Make Tags and Searched pages have expanded columns --- THIS MESSES WITH ANDY MODE */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div:nth-child(4) > div.workspace-leaf > div > div > div,
    body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-left-split > div.workspace-tabs > div.workspace-leaf > div > div.search-result-container.mod-global-search > div
    {
    column-width:200px;
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Andy Matuschak mode! */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */

    /* everything under .mod-root now. Don't want Andy messing with sidebars */
    /* also, Andy only makes sense for vertical splits, at the root level, right? */

    /* 36px is the header height in the default theme */
    /* .mod-root.workspace-split.mod-vertical {
    overflow-x: auto;
    --header-width: 36px;
    } */

    /* 700px is the default theme's "readable" max-width */
    /* .mod-root.workspace-split.mod-vertical > div {
    min-width: calc(
    700px + var(--header-width)
    );
    box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.25);
    position: sticky;
    left: 0;
    } */

    /* shift sticky position, so titles will stack up to the left */
    /* This will currently stack to a maximum of 10 before resetting */
    /* .mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) {
    left: calc(var(--header-width) * 0);
    .tag[href^="#🌱️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#🌞️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#🌲️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) {
    left: calc(var(--header-width) * 1);
    .tag[href^="#✏"] {
    background-color: var(--faded-blue);
    color: var(--faded-blue) !important;
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) {
    left: calc(var(--header-width) * 2);
    /*==============================================*/
    .tag[href^="#✅️"] {
    background-color: var(--bright-orange);
    color: var(--bright-orange) !important;
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) {
    left: calc(var(--header-width) * 3);
    .tag[href^="#🗺️"] {
    background-color: var(--bright-yellow);
    color: var(--bright-yellow) !important;
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) {
    left: calc(var(--header-width) * 4);
    .tag[href^="#⚙️"] {
    background-color: var(--dark3);
    color: var(--dark3) !important;
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) {
    left: calc(var(--header-width) * 5);
    .tag[href^="#❗️"] {
    background-color: var(--light1);
    color: var(--light1) !important;
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) {
    left: calc(var(--header-width) * 6);
    .tag[href^="#🏷️"] {
    background-color: var(--faded-purple);
    color: var(--faded-purple) !important;
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) {
    left: calc(var(--header-width) * 7);
    /* .... 2.9 [[Link]] Modification */
    /* ...... 2.9.1 Bigger Link Hover Popup Preview -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 */
    .popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px;
    min-height: 50px;
    width: 700px;
    overflow: overlay; /* new added */
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n + 0) {
    left: calc(var(--header-width) * 8);
    .popover.hover-popover .markdown-embed {
    height: 100%;
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n + 1) {
    left: calc(var(--header-width) * 9);
    .popover.hover-popover.is-loaded .markdown-embed .markdown-embed-content .markdown-preview-view{
    padding: 10px 10px 10px 16px; /*16px two pop magin */
    }
    */
    /* now it's time for the fancy vertical titles */

    /* first we'll add a bit of gap for the title to sit inside of */
    /* .workspace-leaf-content {
    padding-left: var(--header-width);
    /* ...... 2.10.1 Calendar Plugin CSS */
    .container {
    --color-background-heading: transparent;

    --color-background-day: transparent;
    --color-background-day-empty: var(--background-secondary-alt);
    --color-background-day-active: var(--interactive-accent);
    --color-background-day-hover: var(--interactive-hover);

    --color-dot: var(--text-muted);

    --color-text-heading: var(--text-normal);
    --color-text-day: var(--text-normal);
    --color-text-today: var(--text-accent);
    }
    /** .... 2.11 Heading Formatting */
    /** ...... 2.11.1 Heading Under Gradient Line -- https://github.com/TriDiamond/Obsidian-Obsidianite */
    .markdown-preview-view h1,
    .markdown-preview-view h2,
    .markdown-preview-view h3,
    .markdown-preview-view h4,
    .markdown-preview-view h5,
    .markdown-preview-view h6 {
    /* padding-top: 1.25rem; */
    /* margin: 45px 0 20px 0; */
    position: relative;
    } */

    /* this is where the magic happens */
    /* .view-header {
    writing-mode: vertical-lr;
    border-right: 1px solid var(--background-secondary-alt);
    border-left: 2px solid var(--background-secondary-alt);
    border-top: none;
    border-bottom: none;
    height: auto;
    width: var(--header-width);
    }
    .markdown-preview-view h1:after,
    .markdown-preview-view h2:after,
    .markdown-preview-view h3:after,
    .markdown-preview-view h4:after,
    .markdown-preview-view h5:after,
    .markdown-preview-view h6:after {
    position: absolute;
    content: '';
    height: 1px;
    width: 35%;
    left: 0;
    top: 0;
    bottom: 0;
    } */
    bottom: -0.2rem;
    background-image: linear-gradient(to right, var(--bright-aqua), var(--background-primary)) ;
    opacity: 1;
    }

    /* active titles have different border colours */
    /* .workspace-leaf.mod-active .view-header {
    border-right: 2px solid var(--interactive-accent);
    border-bottom: none;
    } */
    /** .... 2.12 Horizontal Rule Formatting */
    /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */

    /* unset the title container height and swap padding */
    /* .view-header-title-container {
    height: unset;
    padding-left: unset;
    padding-top: 5px;
    } */
    .markdown-preview-view hr {
    margin-block-start: 4em;
    margin-block-end: 4em;
    border: none;
    height: 1px;
    background-image: linear-gradient(to right, var(--background-primary), var(--text-accent), var(--background-primary));
    }

    /* fix the long-title-obscuring shadows */
    /* .view-header-title-container:after {
    width: 100%;
    height: 30px;
    top: unset;
    bottom: 0;
    background: linear-gradient(
    to bottom,
    transparent,
    var(--background-secondary)
    );
    }
    .workspace-leaf.mod-active .view-header-title-container:after {
    background: linear-gradient(
    to bottom,
    transparent,
    var(--background-primary-alt)
    );
    .markdown-preview-view hr::after {
    content: '§';
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%) rotate(60deg);
    transform-origin: 50% 50%;
    padding: 0.5rem;
    color: var(--bright-aqua);
    background-color: var(--background-primary);
    }



    /* .. 3. Grave Yard */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Change color of internal links https://discordapp.com/channels/686053708261228577/702656734631821413/767572809848848385 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* .cm-s-obsidian span.cm-hmd-internal-link, a.internal-link {
    color: var(--bright-orange) !important;
    } */

    /* swap the padding/margin around for the header and actions icons */
    /* .view-header-icon,
    .view-actions {
    padding: 10px 5px;
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Whitespace Characters */ /* https://forum.obsidian.md/t/editors-css-to-show-tabs-trailing-whitespace-and-strict-line-breaks/4234 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* .cm-trailing-space-new-line, .cm-trailing-space-a, .cm-trailing-space-b, .cm-tab{
    font-size: 0;
    }
    .cm-trailing-space-a::before, .cm-trailing-space-b::before, .cm-trailing-space-new-line::before, .cm-tab::before{
    content:'·';
    color:var(--dark2);
    font-size: initial;
    }
    .view-action {
    margin: 8px 0;
    .cm-trailing-space-new-line::before {
    content:'↵';
    }
    .cm-tab::before {
    content:'⟶'
    } */

    /* get rid of the gap left by the now-missing horizontal title */
    /* .view-content {
    height: 100%;
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Remove blockquote left margin
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*
    blockquote {
    margin-inline-start: 0;
    } */

    /* make the fake drop target overlay have a background so you can see it. */
    /* TODO: figure out how the fake target overlay works so we can put the title back, too */
    /* .workspace-fake-target-overlay {
    background-color: var(--background-primary);
    } */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Make Tags and Searched pages have expanded columns --- THIS MESSES WITH ANDY MODE */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div:nth-child(4) > div.workspace-leaf > div > div > div,
    body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-left-split > div.workspace-tabs > div.workspace-leaf > div > div.search-result-container.mod-global-search > div
    {
    column-width:200px;
    }*/
    /* Expand List Column for file search (THIS MESSES WITH ANDY MODE): */
    /*.nav-folder-children
    {
    column-width:200px;
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Lime Light but only for body text */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /*.cm-s-obsidian,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-link,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-internal-link,
    @@ -728,48 +983,40 @@ body > div > div.horizontal-main-container > div > div.workspace-split.mod-horiz
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.hmd-fold-math-placeholder {
    color: var(--dark2);
    }
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight {
    background-color: transparent;
    }
    .CodeMirror-activeline {
    color: var(--light1);
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* WYSIWYG Editor Features From: https://discordapp.com/channels/686053708261228577/702656734631821413/749843052385796147 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* inline formatting, link targets and [[ ]] disappears if not active line
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting,
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-string.cm-url,
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link
    { display: none; } */

    /* hide all html tags -- IT IS COMMENTED OUT BY DEFAULT
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag{ display: none; }*/

    /* optionally header hashes span.cm-formatting-header,
    /* except list markers span.cm-formatting-list,
    /* code block backticks span.cm-formatting-code-block.cm-hmd-codeblock
    {
    display: inline !important;
    }*/

    /* and task checkboxes
    span.cm-formatting-task { display: inline !important; font-family: monospace; }
    */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* replace H1-H6 markup in edit mode: https://discordapp.com/channels/686053708261228577/702656734631821413/753842312882159687
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* .CodeMirror-sizer {
    margin-left: 48px !important;
    } */

    /*-- reduce left padding --*/
    /* .CodeMirror {
    height: 100%;
    @@ -787,7 +1034,6 @@ span.cm-formatting-task { display: inline !important; font-family: monospace; }
    left: 0px;
    position: relative;
    } */

    /*-- hide # markup--*/
    /* .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1,
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2,
    @@ -904,226 +1150,13 @@ span.cm-formatting-task { display: inline !important; font-family: monospace; }
    /*--------------------------------------------------------------------------------------------------------------------------------------------
    NO HIGHLIGHT OR LINK MARKS WYSIWYG https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175
    --------------------------------------------------------------------------------------------------------------------------------------------*/

    /* div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link),
    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-highlight {
    display: none !important;
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Custom icons differing files and folders: https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* Emoji */
    /*.nav-file-title-content::before { content: '🗒 '; }
    .nav-folder-title-content::before { content: '📂 '; }*/

    /* Flat font */
    /* Requires: https://icomoon.io/#icons-icomoon/liga-font */
    .nav-folder-children .nav-file-title-content:first-child::before {
    content: "\e924 ";
    font-family: "IcoMoon-Free";
    }
    .nav-folder-children .nav-folder-title-content::before {
    content: "\e930 ";
    font-family: "IcoMoon-Free";
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* ====== Tag Pills ======== https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    .tag:not(.token) {
    background-color: var(--faded-blue);
    border: none;
    color: white;
    font-size: 14px;
    padding: 0px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 14px;
    font-weight: bold;
    }
    .tag:not(.token):hover {
    color: var(--bright-red) !important;
    background-color: var(--bright-red);
    }

    /*==============================================*/

    .tag[href^="#📥️"] {
    background-color: var(--light4);
    color: var(--light4) !important;
    }
    .tag[href^="#🌱️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#🌞️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#🌲️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#✏"] {
    background-color: var(--faded-blue);
    color: var(--faded-blue) !important;
    }

    /*==============================================*/

    .tag[href^="#✅️"] {
    background-color: var(--bright-orange);
    color: var(--bright-orange) !important;
    }
    .tag[href^="#🗺️"] {
    background-color: var(--bright-yellow);
    color: var(--bright-yellow) !important;
    }
    .tag[href^="#⚙️"] {
    background-color: var(--dark3);
    color: var(--dark3) !important;
    }
    .tag[href^="#❗️"] {
    background-color: var(--light1);
    color: var(--light1) !important;
    }
    .tag[href^="#🏷️"] {
    background-color: var(--faded-purple);
    color: var(--faded-purple) !important;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Make subtler folding gutter arrows: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .CodeMirror-foldgutter-folded:after,
    .CodeMirror-foldgutter-open:after {
    opacity: 0.5;
    font-size: 60%;
    }

    .CodeMirror-foldgutter-folded:hover:after,
    .CodeMirror-foldgutter-open:hover:after {
    opacity: 1;
    }

    .CodeMirror-foldgutter-folded:after {
    content: "\25BA";
    }

    .CodeMirror-foldgutter-open:after {
    content: "\25BC";
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Relationship lines for the folder levels in file navigation: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .outline .collapsible-item-children {
    margin-left: 20px;
    border-left: 1px solid var(--faded-aqua);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
    }
    .outline .collapsible-item-children:hover {
    border-left-color: var(--faded-aqua);
    }
    .nav-folder-children .nav-folder-children {
    margin-left: 20px;
    padding-left: 0;
    border-left: 1px solid var(--faded-aqua);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
    }
    .nav-folder-children .nav-folder-children:hover {
    border-left-color: var(--faded-aqua);
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Graph View CSS https://discordapp.com/channels/686053708261228577/702656734631821413/760488978691784705 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    .theme-dark .graph-view.color-arrow {
    color: var(--bright-aqua);
    }

    .theme-dark .graph-view.color-fill-tag {
    color: var(--bright-yellow);
    }

    .theme-dark .graph-view.color-fill-attachment {
    color: var(--neutral-blue);
    }

    .theme-dark .graph-view.color-fill-unresolved {
    color: var(--bright-red);
    }
    .graph-view.color-fill {
    color: var(--light1);
    }
    /*
    .graph-view.color-line {
    color: var(--gray);
    }
    */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Better bullet points in edit mode https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul {
    color: transparent;
    position: relative;
    }

    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after {
    content: "•";
    position: absolute;
    top: -6px;
    left: 4px;
    color: var(--bright-aqua);
    font-family: sans-serif;
    font-size: 20px;
    }


    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* some more text formatting */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    b, strong, .cm-s-obsidian .cm-strong{
    color: var(--bright-red) !important;
    }

    i, em {
    color: var(--bright-green) !important;
    }

    u {
    color: var(--bright-purple) !important;
    }


    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Larger popup windows https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    .popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px;
    min-height: 50px;
    width: 700px;
    overflow: overlay; /* new added */
    }

    .popover.hover-popover .markdown-embed {
    height: 100%;
    }

    .popover.hover-popover.is-loaded .markdown-embed .markdown-embed-content .markdown-preview-view{
    padding: 10px 10px 10px 16px; /*16px two pop magin */
    }
  8. tallguyjenks revised this gist Oct 16, 2020. 1 changed file with 819 additions and 573 deletions.
    1,392 changes: 819 additions & 573 deletions obsidian.css
    Original file line number Diff line number Diff line change
    @@ -1,129 +1,122 @@

    :root
    {
    --dark0-hard: #1d2021;
    --dark0: #282828;
    --dark0-soft: #32302f;
    --dark1: #3c3836;
    --dark2: #504945;
    --dark3: #665c54;
    --dark4: #7c6f64;

    --gray: #928374;

    --light0-hard: #f9f5d7;
    --light0: #fbf1c7;
    --light0-soft: #f2e5bc;
    --light1: #ebdbb2;
    --light2: #d5c4a1;
    --light3: #bdae93;
    --light4: #a89984;

    --bright-red: #fb4934;
    --bright-green: #b8bb26;
    --bright-yellow: #fabd2f;
    --bright-blue: #83a598;
    --bright-purple: #d3869b;
    --bright-aqua: #8ec07c;
    --bright-orange: #fe8019;

    --neutral-red: #cc241d;
    --neutral-green: #98971a;
    --neutral-yellow: #d79921;
    --neutral-blue: #458588;
    --neutral-purple: #b16286;
    --neutral-aqua: #689d6a;
    --neutral-orange: #d65d0e;

    --faded-red: #9d0006;
    --faded-green: #79740e;
    --faded-yellow: #b57614;
    --faded-blue: #076678;
    --faded-purple: #8f3f71;
    --faded-aqua: #427b58;
    --faded-orange: #af3a03;
    }

    .theme-dark
    {
    --font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace;
    --background-primary: var(--dark0);
    --background-primary-alt: var(--dark0);
    --background-secondary: var(--dark0-hard);
    --background-secondary-alt: var(--dark1);
    --text-normal: var(--light0);
    --text-faint: var(--light3);
    --text-title-h1: var(--neutral-red);
    --text-title-h2: var(--neutral-orange);
    --text-title-h3: var(--neutral-yellow);
    --text-title-h4: var(--neutral-green);
    --text-title-h5: var(--neutral-aqua);
    --text-title-h6: var(--neutral-purple);
    --text-link: var(--bright-blue);
    --text-a: var(--bright-orange);
    --text-a-hover: var(--bright-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--dark1);
    --text-highlight-bg: var(--faded-aqua);
    --interactive-accent: var(--bright-orange);
    --interactive-before: var(--dark4);
    --background-modifier-border: var(--dark2);
    --text-accent: var(--bright-orange);
    --interactive-accent-rgb: var(--bright-orange);
    --inline-code: var(--bright-blue);
    --code-block: var(--bright-blue);
    --vim-cursor: var(--bright-orange);
    --text-selection: var(--dark3);
    }

    .theme-light
    {
    --background-primary: var(--light0);
    --background-primary-alt: var(--light0);
    --background-secondary: var(--light0-hard);
    --background-secondary-alt: var(--light1);
    --text-normal: var(--dark0);
    --text-faint: var(--dark3);
    --text-title-h1: var(--faded-red);
    --text-title-h2: var(--faded-orange);
    --text-title-h3: var(--faded-yellow);
    --text-title-h4: var(--faded-green);
    --text-title-h5: var(--faded-aqua);
    --text-title-h6: var(--faded-purple);
    --text-link: var(--neutral-blue);
    --text-a: var(--neutral-orange);
    --text-a-hover: var(--neutral-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--light1);
    --text-highlight-bg: var(--bright-aqua);
    --interactive-accent: var(--neutral-orange);
    --interactive-before: var(--light4);
    --background-modifier-border: var(--light2);
    --text-accent: var(--neutral-orange);
    --interactive-accent-rgb: var(--neutral-orange);
    --inline-code: var(--neutral-blue);
    --vim-cursor: var(--neutral-orange);
    --text-selection: var(--light2);
    :root {
    --dark0-hard: #1d2021;
    --dark0: #282828;
    --dark0-soft: #32302f;
    --dark1: #3c3836;
    --dark2: #504945;
    --dark3: #665c54;
    --dark4: #7c6f64;

    --gray: #928374;

    --light0-hard: #f9f5d7;
    --light0: #fbf1c7;
    --light0-soft: #f2e5bc;
    --light1: #ebdbb2;
    --light2: #d5c4a1;
    --light3: #bdae93;
    --light4: #a89984;

    --bright-red: #fb4934;
    --bright-green: #b8bb26;
    --bright-yellow: #fabd2f;
    --bright-blue: #83a598;
    --bright-purple: #d3869b;
    --bright-aqua: #8ec07c;
    --bright-orange: #fe8019;

    --neutral-red: #cc241d;
    --neutral-green: #98971a;
    --neutral-yellow: #d79921;
    --neutral-blue: #458588;
    --neutral-purple: #b16286;
    --neutral-aqua: #689d6a;
    --neutral-orange: #d65d0e;

    --faded-red: #9d0006;
    --faded-green: #79740e;
    --faded-yellow: #b57614;
    --faded-blue: #076678;
    --faded-purple: #8f3f71;
    --faded-aqua: #427b58;
    --faded-orange: #af3a03;
    }

    .theme-dark {
    --font-monospace: "Hack Nerd Font", "Source Code Pro", monospace;
    --background-primary: var(--dark0);
    --background-primary-alt: var(--dark0);
    --background-secondary: var(--dark0-hard);
    --background-secondary-alt: var(--dark1);
    --text-normal: var(--light0);
    --text-faint: var(--light3);
    --text-title-h1: var(--neutral-red);
    --text-title-h2: var(--neutral-orange);
    --text-title-h3: var(--neutral-yellow);
    --text-title-h4: var(--neutral-green);
    --text-title-h5: var(--neutral-aqua);
    --text-title-h6: var(--neutral-purple);
    --text-link: var(--bright-blue);
    --text-a: var(--bright-orange);
    --text-a-hover: var(--bright-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--dark1);
    --text-highlight-bg: var(--faded-aqua);
    --interactive-accent: var(--bright-orange);
    --interactive-before: var(--dark4);
    --background-modifier-border: var(--dark2);
    --text-accent: var(--bright-orange);
    --interactive-accent-rgb: var(--bright-orange);
    --inline-code: var(--bright-blue);
    --code-block: var(--bright-blue);
    --vim-cursor: var(--bright-orange);
    --text-selection: var(--dark3);
    }

    .theme-light {
    --background-primary: var(--light0);
    --background-primary-alt: var(--light0);
    --background-secondary: var(--light0-hard);
    --background-secondary-alt: var(--light1);
    --text-normal: var(--dark0);
    --text-faint: var(--dark3);
    --text-title-h1: var(--faded-red);
    --text-title-h2: var(--faded-orange);
    --text-title-h3: var(--faded-yellow);
    --text-title-h4: var(--faded-green);
    --text-title-h5: var(--faded-aqua);
    --text-title-h6: var(--faded-purple);
    --text-link: var(--neutral-blue);
    --text-a: var(--neutral-orange);
    --text-a-hover: var(--neutral-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--light1);
    --text-highlight-bg: var(--bright-aqua);
    --interactive-accent: var(--neutral-orange);
    --interactive-before: var(--light4);
    --background-modifier-border: var(--light2);
    --text-accent: var(--neutral-orange);
    --interactive-accent-rgb: var(--neutral-orange);
    --inline-code: var(--neutral-blue);
    --vim-cursor: var(--neutral-orange);
    --text-selection: var(--light2);
    }

    .theme-dark code[class*="language-"],
    .theme-dark pre[class*="language-"],
    .theme-light code[class*="language-"],
    .theme-light pre[class*="language-"]
    {
    text-shadow: none !important;
    background-color: var(--pre-code) !important;
    .theme-light pre[class*="language-"] {
    text-shadow: none !important;
    background-color: var(--pre-code) !important;
    }

    .graph-view.color-circle,
    .graph-view.color-fill-highlight,
    .graph-view.color-line-highlight
    {
    color: var(--interactive-accent-rgb) !important;
    .graph-view.color-line-highlight {
    color: var(--interactive-accent-rgb) !important;
    }
    .graph-view.color-text
    {
    color: var(--text-a-hover) !important;
    .graph-view.color-text {
    color: var(--text-a-hover) !important;
    }
    /*
    .graph-view.color-fill
    @@ -137,338 +130,285 @@
    */

    html,
    body
    {
    font-size: 16px !important;
    body {
    font-size: 16px !important;
    }

    strong
    {
    font-weight: 600 !important;
    strong {
    font-weight: 600 !important;
    }

    a,
    .cm-hmd-internal-link
    {
    color: var(--text-a) !important;
    text-decoration: none !important;
    .cm-hmd-internal-link {
    color: var(--text-a) !important;
    text-decoration: none !important;
    }

    a:hover,
    .cm-hmd-internal-link:hover,
    .cm-url
    {
    color: var(--text-a-hover) !important;
    text-decoration: none !important;
    .cm-url {
    color: var(--text-a-hover) !important;
    text-decoration: none !important;
    }

    mark
    {
    background-color: var(--text-mark) !important;
    color: var(--dark0) !important;
    mark {
    background-color: var(--text-mark) !important;
    color: var(--dark0) !important;
    }

    .view-actions a
    {
    color: var(--text-normal) !important;
    .view-actions a {
    color: var(--text-normal) !important;
    }

    .view-actions a:hover
    {
    color: var(--text-a) !important;
    .view-actions a:hover {
    color: var(--text-a) !important;
    }

    .HyperMD-codeblock-bg
    {
    background-color: var(--pre-code) !important;
    .HyperMD-codeblock-bg {
    background-color: var(--pre-code) !important;
    }

    .HyperMD-codeblock
    {
    line-height: 1.4em !important;
    color: var(--code-block) !important;
    .HyperMD-codeblock {
    line-height: 1.4em !important;
    color: var(--code-block) !important;
    }

    .HyperMD-codeblock-begin
    {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    .HyperMD-codeblock-begin {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    }

    .HyperMD-codeblock-end
    {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    .HyperMD-codeblock-end {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    }

    th
    {
    font-weight: 600 !important;
    th {
    font-weight: 600 !important;
    }

    thead
    {
    border-bottom: 2px solid var(--background-modifier-border) !important;
    thead {
    border-bottom: 2px solid var(--background-modifier-border) !important;
    }

    .HyperMD-table-row
    {
    line-height: normal !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    background-color: var(--pre-code) !important;
    .HyperMD-table-row {
    line-height: normal !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    background-color: var(--pre-code) !important;
    }

    .HyperMD-table-row-0
    {
    /* padding-top: 4px !important; */
    .HyperMD-table-row-0 {
    /* padding-top: 4px !important; */
    }

    .CodeMirror-foldgutter-folded,
    .is-collapsed .nav-folder-collapse-indicator
    {
    color: var(--text-a) !important;
    .is-collapsed .nav-folder-collapse-indicator {
    color: var(--text-a) !important;
    }

    .nav-file-tag
    {
    color: var(--text-a) !important;
    .nav-file-tag {
    color: var(--text-a) !important;
    }

    .is-active .nav-file-title
    {
    color: var(--text-a) !important;
    background-color: var(--background-primary-alt) !important;
    .is-active .nav-file-title {
    color: var(--text-a) !important;
    background-color: var(--background-primary-alt) !important;
    }

    .nav-file-title
    {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    .nav-file-title {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    }

    img
    {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    .HyperMD-list-line
    {
    padding-top: 0 !important;
    .HyperMD-list-line {
    padding-top: 0 !important;
    }

    .CodeMirror-linenumber,
    .cm-formatting
    {
    font-family: var(--font-monospace) !important;
    .cm-formatting {
    font-family: var(--font-monospace) !important;
    }

    .markdown-preview-section pre code,
    .markdown-preview-section code
    {
    font-size: 0.9em !important;
    background-color: var(--pre-code) !important;
    .markdown-preview-section code {
    font-size: 0.9em !important;
    background-color: var(--pre-code) !important;
    }

    .markdown-preview-section pre code
    {
    padding: 4px !important;
    line-height: 1.4em !important;
    display: block !important;
    color: var(--code-block) !important;
    .markdown-preview-section pre code {
    padding: 4px !important;
    line-height: 1.4em !important;
    display: block !important;
    color: var(--code-block) !important;
    }

    .markdown-preview-section code
    {
    color: var(--inline-code) !important;
    .markdown-preview-section code {
    color: var(--inline-code) !important;
    }

    .cm-s-obsidian,
    .cm-inline-code
    {
    -webkit-font-smoothing: auto !important;
    .cm-inline-code {
    -webkit-font-smoothing: auto !important;
    }

    .cm-inline-code
    {
    color: var(--inline-code) !important;
    background-color: var(--pre-code) !important;
    padding: 1px !important;
    .cm-inline-code {
    color: var(--inline-code) !important;
    background-color: var(--pre-code) !important;
    padding: 1px !important;
    }

    .workspace-leaf-header-title
    {
    font-weight: 600 !important;
    .workspace-leaf-header-title {
    font-weight: 600 !important;
    }

    .side-dock-title
    {
    padding-top: 15px !important;
    font-size: 20px !important;
    .side-dock-title {
    padding-top: 15px !important;
    font-size: 20px !important;
    }

    .side-dock-ribbon-tab:hover,
    .side-dock-ribbon-action:hover,
    .side-dock-ribbon-action.is-active:hover,
    .nav-action-button:hover,
    .side-dock-collapse-btn:hover
    {
    color: var(--text-a);
    .side-dock-collapse-btn:hover {
    color: var(--text-a);
    }

    .side-dock
    {
    border-right: 0 !important;
    .side-dock {
    border-right: 0 !important;
    }

    .cm-s-obsidian,
    .markdown-preview-view
    {
    padding-left: 10px !important;
    padding-right: 10px !important;
    .markdown-preview-view {
    padding-left: 10px !important;
    padding-right: 10px !important;
    }

    /* vertical resize-handle */
    .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
    .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
    .workspace-split.mod-right-split > .workspace-leaf-resize-handle
    {
    width: 1px !important;
    background-color: var(--background-secondary-alt);
    .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
    .workspace-split.mod-right-split > .workspace-leaf-resize-handle {
    width: 1px !important;
    background-color: var(--background-secondary-alt);
    }

    /* horizontal resize-handle */
    .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle
    {
    height: 1px !important;
    background-color: var(--background-secondary-alt);
    .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle {
    height: 1px !important;
    background-color: var(--background-secondary-alt);
    }

    /* Remove vertical split padding */
    .workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
    .workspace-split.mod-vertical > .workspace-split,
    .workspace-split.mod-vertical > .workspace-leaf,
    .workspace-tabs
    {
    padding-right: 0px;

    .workspace-tabs {
    padding-right: 0px;
    }


    .markdown-embed-title
    {
    font-weight: 600 !important;
    .markdown-embed-title {
    font-weight: 600 !important;
    }

    .markdown-embed
    {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    .markdown-embed {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    }

    .cm-header-1,
    .markdown-preview-section h1
    {
    font-weight: 500 !important;
    font-size: 34px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h1) !important;
    .markdown-preview-section h1 {
    font-weight: 500 !important;
    font-size: 34px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h1) !important;
    }

    .cm-header-2,
    .markdown-preview-section h2
    {
    font-weight: 500 !important;
    font-size: 26px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h2) !important;
    .markdown-preview-section h2 {
    font-weight: 500 !important;
    font-size: 26px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h2) !important;
    }

    .cm-header-3,
    .markdown-preview-section h3
    {
    font-weight: 500 !important;
    font-size: 22px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h3) !important;
    .markdown-preview-section h3 {
    font-weight: 500 !important;
    font-size: 22px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h3) !important;
    }

    .cm-header-4,
    .markdown-preview-section h4
    {
    font-weight: 500 !important;
    font-size: 20px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h4) !important;
    .markdown-preview-section h4 {
    font-weight: 500 !important;
    font-size: 20px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h4) !important;
    }

    .cm-header-5,
    .markdown-preview-section h5
    {
    font-weight: 500 !important;
    font-size: 18px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h5) !important;
    .markdown-preview-section h5 {
    font-weight: 500 !important;
    font-size: 18px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h5) !important;
    }


    .cm-header-6,
    .markdown-preview-section h6
    {
    font-weight: 500 !important;
    font-size: 16px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h6) !important;
    .markdown-preview-section h6 {
    font-weight: 500 !important;
    font-size: 16px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h6) !important;
    }

    .suggestion-item.is-selected
    {
    background-color: var(--background-secondary);
    .suggestion-item.is-selected {
    background-color: var(--background-secondary);
    }

    .empty-state-container:hover
    {
    background-color: var(--background-secondary-alt);
    border: 5px solid var(--interactive-accent) !important;
    .empty-state-container:hover {
    background-color: var(--background-secondary-alt);
    border: 5px solid var(--interactive-accent) !important;
    }

    .checkbox-container
    {
    background-color: var(--interactive-before);
    .checkbox-container {
    background-color: var(--interactive-before);
    }

    .checkbox-container:after
    {
    background-color: var(--background-secondary-alt);
    .checkbox-container:after {
    background-color: var(--background-secondary-alt);
    }

    .mod-cta
    {
    color: var(--background-secondary-alt) !important;
    font-weight: 600 !important;
    .mod-cta {
    color: var(--background-secondary-alt) !important;
    font-weight: 600 !important;
    }

    .mod-cta:hover
    {
    background-color: var(--interactive-before) !important;
    font-weight: 600 !important;
    .mod-cta:hover {
    background-color: var(--interactive-before) !important;
    font-weight: 600 !important;
    }

    .CodeMirror-cursor
    {
    background-color: var(--vim-cursor) !important;
    opacity: 60% !important;
    .CodeMirror-cursor {
    background-color: var(--vim-cursor) !important;
    opacity: 60% !important;
    }

    input.task-list-item-checkbox {
    border: 1px solid var(--dark4);
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--dark4);
    appearance: none;
    -webkit-appearance: none;
    }

    input.task-list-item-checkbox:checked {
    background-color: var(--dark4);
    box-shadow: inset 0 0 0 2px var(--background-primary);
    background-color: var(--dark4);
    box-shadow: inset 0 0 0 2px var(--background-primary);
    }

    /*============================================================================================================================================*/
    @@ -480,95 +420,118 @@ input.task-list-item-checkbox:checked {
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* BULLET POINT RELATIONSHIP LINES */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
    .cm-hmd-list-indent .cm-tab::before, ul ul::before {
    content:'';
    border-left: 1px solid rgba(235, 219, 178, 0.5);
    position: absolute;
    .cm-hmd-list-indent .cm-tab,
    ul ul {
    position: relative;
    }
    .cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px;
    .cm-hmd-list-indent .cm-tab::before,
    ul ul::before {
    content: "";
    border-left: 1px solid var(--bright-aqua);
    position: absolute;
    }
    .cm-hmd-list-indent .cm-tab::before {
    left: 5px;
    top: -5px;
    bottom: -4px;
    }
    ul ul::before {
    left: -16px;
    top: 0;
    bottom: 0;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* tasklist (preview) indentation lines correction */ /* https://forum.obsidian.md/t/bullet-lines-in-css-for-checkboxes/6262/3 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .contains-task-list::before {
    left: 10px ;
    }
    ul ul::before { left: -16px; top: 0; bottom: 0;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* MAKE MATHJAX FONT LARGER */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .MJX-TEX {
    font-size: 180%;
    font-size: 180%;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* _hyphenation_and_justification */
    /* _hyphenation_and_justification https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .cm-s-obsidian, .markdown-preview-view {
    text-align: justify;
    hyphens: auto;
    .cm-s-obsidian,
    .markdown-preview-view {
    text-align: justify;
    hyphens: auto;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* IMAGE HOVER GROW */
    /* IMAGE HOVER GROW https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .markdown-preview-view img {
    display: block;
    margin-top: 20pt;
    margin-bottom: 20pt;
    margin-left: auto;
    margin-right: auto;
    width: 50%; /* experiment with values */
    transition:transform 0.25s ease;
    display: block;
    margin-top: 20pt;
    margin-bottom: 20pt;
    margin-left: auto;
    margin-right: auto;
    width: 50%; /* experiment with values */
    transition: transform 0.25s ease;
    }

    .markdown-preview-view img:hover {
    -webkit-transform:scale(1.8); /* experiment with values */
    transform:scale(2);

    -webkit-transform: scale(1.8); /* experiment with values */
    transform: scale(2);
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* NICER CHECK BOXES */
    /* Round checkbxes in preview and editor */
    /* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    input[type=checkbox], .cm-formatting-task {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
    vertical-align: top;
    input[type="checkbox"],
    .cm-formatting-task {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
    vertical-align: top;
    }

    .cm-s-obsidian span.cm-formatting-task {
    color: transparent;
    width: 1.25em !important;
    height: 1.25em;
    display: inline-block;
    color: transparent;
    width: 1.25em !important;
    height: 1.25em;
    display: inline-block;
    }

    input[type=checkbox]:focus{
    outline:0;
    input[type="checkbox"]:focus {
    outline: 0;
    }
    input[type=checkbox]:checked, .cm-formatting-task.cm-property {
    background-color: var(--text-accent-hover);
    border: 1px solid var(--text-accent-hover);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
    input[type="checkbox"]:checked,
    .cm-formatting-task.cm-property {
    background-color: var(--text-accent-hover);
    border: 1px solid var(--text-accent-hover);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* STYLISH BLOCK QUOTES */
    /* Add quotation character before quote */
    /* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    blockquote:before {
    font: 14px/20px italic Times, serif;
    content: "“";
    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -0.4em;
    }
    blockquote p { display: inline; }
    font: 14px/20px italic Times, serif;
    content: "“";
    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -0.4em;
    }
    blockquote p {
    display: inline;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Remove blockquote left margin
    @@ -580,24 +543,25 @@ blockquote {

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*============bigger link popup preview ================*/
    /* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/82 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px; /* was 300 */
    min-height: 100px;
    width: 500px; /* was 400 */
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px; /* was 300 */
    min-height: 100px;
    width: 500px; /* was 400 */
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Expand List Column for file search */
    /* Expand List Column for file search --- THIS MESSES WITH ANDY MODE */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*.nav-folder-children
    {
    column-width:200px;
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Make Tags and Searched pages have expanded columns */
    /* Make Tags and Searched pages have expanded columns --- THIS MESSES WITH ANDY MODE */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div:nth-child(4) > div.workspace-leaf > div > div > div,
    body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-left-split > div.workspace-tabs > div.workspace-leaf > div > div.search-result-container.mod-global-search > div
    @@ -606,110 +570,144 @@ body > div > div.horizontal-main-container > div > div.workspace-split.mod-horiz
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Andy Matuschak mode! */
    /* Andy Matuschak mode! */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */

    /* everything under .mod-root now. Don't want Andy messing with sidebars */
    /* also, Andy only makes sense for vertical splits, at the root level, right? */
    .mod-root.workspace-split.mod-vertical {
    overflow-x:auto;
    --header-width: 36px; /* <- 36px is the header height in the default theme */
    }
    .mod-root.workspace-split.mod-vertical > div {
    min-width: calc(700px + var(--header-width)); /* <-- 700px is the default theme's "readable" max-width */
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25);
    position:sticky;
    left:0;
    }

    /* shift sticky position, so titles will stack up to the left */
    /* This will currently stack to a maximum of 10 before resetting */
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--header-width) * 0); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--header-width) * 1); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--header-width) * 2); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--header-width) * 3); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--header-width) * 4); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--header-width) * 5); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--header-width) * 6); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--header-width) * 7); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n+0) { left: calc(var(--header-width) * 8); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n+1) { left: calc(var(--header-width) * 9); }

    /* now it's time for the fancy vertical titles */

    /* first we'll add a bit of gap for the title to sit inside of */
    .workspace-leaf-content {
    padding-left: var(--header-width);
    position: relative;
    }

    /* this is where the magic happens */
    .view-header {
    writing-mode: vertical-lr;
    border-right: 1px solid var(--background-secondary-alt);
    border-left: 2px solid var(--background-secondary-alt);
    border-top: none;
    border-bottom: none;
    height: auto;
    width: var(--header-width);
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    }

    /* active titles have different border colours */
    .workspace-leaf.mod-active .view-header {
    border-right: 2px solid var(--interactive-accent);
    border-bottom: none;
    }

    /* unset the title container height and swap padding */
    .view-header-title-container {
    height: unset;
    padding-left: unset;
    padding-top: 5px;
    }

    /* fix the long-title-obscuring shadows */
    .view-header-title-container:after {
    width: 100%;
    height: 30px;
    top:unset;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, var(--background-secondary));
    }
    .workspace-leaf.mod-active .view-header-title-container:after {
    background: linear-gradient(to bottom, transparent, var(--background-primary-alt));
    }

    /* swap the padding/margin around for the header and actions icons */
    .view-header-icon, .view-actions {
    padding: 10px 5px;
    }
    .view-action {
    margin: 8px 0;
    }

    /* get rid of the gap left by the now-missing horizontal title */
    .view-content {
    height: 100%;
    }

    /* make the fake drop target overlay have a background so you can see it. */
    /* TODO: figure out how the fake target overlay works so we can put the title back, too */
    .workspace-fake-target-overlay {
    background-color: var(--background-primary);
    }


    /* 36px is the header height in the default theme */
    /* .mod-root.workspace-split.mod-vertical {
    overflow-x: auto;
    --header-width: 36px;
    } */

    /* 700px is the default theme's "readable" max-width */
    /* .mod-root.workspace-split.mod-vertical > div {
    min-width: calc(
    700px + var(--header-width)
    );
    box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.25);
    position: sticky;
    left: 0;
    } */

    /* shift sticky position, so titles will stack up to the left */
    /* This will currently stack to a maximum of 10 before resetting */
    /* .mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) {
    left: calc(var(--header-width) * 0);
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) {
    left: calc(var(--header-width) * 1);
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) {
    left: calc(var(--header-width) * 2);
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) {
    left: calc(var(--header-width) * 3);
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) {
    left: calc(var(--header-width) * 4);
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) {
    left: calc(var(--header-width) * 5);
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) {
    left: calc(var(--header-width) * 6);
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) {
    left: calc(var(--header-width) * 7);
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n + 0) {
    left: calc(var(--header-width) * 8);
    }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n + 1) {
    left: calc(var(--header-width) * 9);
    }
    */
    /* now it's time for the fancy vertical titles */

    /* first we'll add a bit of gap for the title to sit inside of */
    /* .workspace-leaf-content {
    padding-left: var(--header-width);
    position: relative;
    } */

    /* this is where the magic happens */
    /* .view-header {
    writing-mode: vertical-lr;
    border-right: 1px solid var(--background-secondary-alt);
    border-left: 2px solid var(--background-secondary-alt);
    border-top: none;
    border-bottom: none;
    height: auto;
    width: var(--header-width);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    } */

    /* active titles have different border colours */
    /* .workspace-leaf.mod-active .view-header {
    border-right: 2px solid var(--interactive-accent);
    border-bottom: none;
    } */

    /* unset the title container height and swap padding */
    /* .view-header-title-container {
    height: unset;
    padding-left: unset;
    padding-top: 5px;
    } */

    /* fix the long-title-obscuring shadows */
    /* .view-header-title-container:after {
    width: 100%;
    height: 30px;
    top: unset;
    bottom: 0;
    background: linear-gradient(
    to bottom,
    transparent,
    var(--background-secondary)
    );
    }
    .workspace-leaf.mod-active .view-header-title-container:after {
    background: linear-gradient(
    to bottom,
    transparent,
    var(--background-primary-alt)
    );
    } */

    /* swap the padding/margin around for the header and actions icons */
    /* .view-header-icon,
    .view-actions {
    padding: 10px 5px;
    }
    .view-action {
    margin: 8px 0;
    } */

    /* get rid of the gap left by the now-missing horizontal title */
    /* .view-content {
    height: 100%;
    } */

    /* make the fake drop target overlay have a background so you can see it. */
    /* TODO: figure out how the fake target overlay works so we can put the title back, too */
    /* .workspace-fake-target-overlay {
    background-color: var(--background-primary);
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Lime Light but only for body text */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*
    .cm-s-obsidian,

    /*.cm-s-obsidian,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-link,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-internal-link,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-url,
    @@ -740,7 +738,6 @@ body > div > div.horizontal-main-container > div > div.workspace-split.mod-horiz
    color: var(--light1);
    }*/


    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* WYSIWYG Editor Features From: https://discordapp.com/channels/686053708261228577/702656734631821413/749843052385796147 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    @@ -766,118 +763,367 @@ span.cm-formatting-task { display: inline !important; font-family: monospace; }
    */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* replace H1-H6 markup in edit mode */
    /* replace H1-H6 markup in edit mode: https://discordapp.com/channels/686053708261228577/702656734631821413/753842312882159687
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    .CodeMirror-sizer{
    margin-left: 48px !important;
    }
    /* .CodeMirror-sizer {
    margin-left: 48px !important;
    } */

    /*-- reduce left padding --*/
    .CodeMirror {
    height: 100%;
    direction: ltr;
    padding: 0 10px;
    }
    /* .CodeMirror {
    height: 100%;
    direction: ltr;
    padding: 0 10px;
    } */
    /*-- header color --*/
    .cm-header.cm-header-1{
    color: var(--text-accent);
    left: 0px;
    position: relative;
    }
    .cm-header.cm-header-2{
    color: var(--text-accent2);
    left: 0px;
    position: relative;
    }
    /* .cm-header.cm-header-1 {
    color: var(--text-accent);
    left: 0px;
    position: relative;
    } */
    /* .cm-header.cm-header-2 {
    color: var(--text-accent2);
    left: 0px;
    position: relative;
    } */

    /*-- hide # markup--*/
    .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1,
    /* .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1,
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2,
    .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3,
    .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
    .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6
    {
    font-size: 0px;
    }

    /*-- display H1-h6 in gutter--*/
    .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before{
    content:"H1";
    font-size:34px;
    color: var(--text-accent2);
    left:-49px;
    top:-50px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before{
    content:"H2";
    font-size:26px;
    color: var(--text-accent2);
    left:-43px;
    top:-35px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before{
    content:"H3";
    font-size:22px;
    color: var(--text-accent2);
    left:-36px;
    top:-6px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before{
    content:"H4";
    font-size:20px;
    color: var(--text-accent2);
    left:-36px;
    top:-6px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before{
    content:"H5";
    font-size:18px;
    color: var(--text-accent2);
    left:-36px;
    top:-6px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before{
    content:"H6";
    font-size:16px;
    color: var(--text-accent2);
    left:-36px;
    top:-4px;
    position:absolute;
    }

    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6 {
    font-size: 0px;
    }
    */
    /*-- display H1-h6 in gutter--*/
    /* .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before {
    content: "H1";
    font-size: 34px;
    color: var(--text-accent2);
    left: -49px;
    top: -50px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before {
    content: "H2";
    font-size: 26px;
    color: var(--text-accent2);
    left: -43px;
    top: -35px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before {
    content: "H3";
    font-size: 22px;
    color: var(--text-accent2);
    left: -36px;
    top: -6px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before {
    content: "H4";
    font-size: 20px;
    color: var(--text-accent2);
    left: -36px;
    top: -6px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before {
    content: "H5";
    font-size: 18px;
    color: var(--text-accent2);
    left: -36px;
    top: -6px;
    position: absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before {
    content: "H6";
    font-size: 16px;
    color: var(--text-accent2);
    left: -36px;
    top: -4px;
    position: absolute;
    } */

    /*-- is active line, hide H[1-6] in gutter --*/
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before
    {
    font-size: 0px;
    }
    /* .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before,
    .CodeMirror-activeline
    span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before {
    font-size: 0px;
    } */
    /*-- is active line, display # markup --*/
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1{
    font-size:32px;
    display:inline;
    }
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2{
    font-size:24px;
    display:inline;
    }
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3{
    font-size:19px;
    display:inline;
    }
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6{
    font-size:13px;
    display:inline;
    }
    /* .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1 {
    font-size: 32px;
    display: inline;
    }
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2 {
    font-size: 24px;
    display: inline;
    }
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3 {
    font-size: 19px;
    display: inline;
    }
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
    .CodeMirror-activeline
    > pre
    > span
    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6 {
    font-size: 13px;
    display: inline;
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------
    NO HIGHLIGHT OR LINK MARKS WYSIWYG https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175
    --------------------------------------------------------------------------------------------------------------------------------------------*/

    /* div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link),
    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-highlight {
    display: none !important;
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Custom icons differing files and folders: https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* Emoji */
    /*.nav-file-title-content::before { content: '🗒 '; }
    .nav-folder-title-content::before { content: '📂 '; }*/

    /* Flat font */
    /* Requires: https://icomoon.io/#icons-icomoon/liga-font */
    .nav-folder-children .nav-file-title-content:first-child::before {
    content: "\e924 ";
    font-family: "IcoMoon-Free";
    }
    .nav-folder-children .nav-folder-title-content::before {
    content: "\e930 ";
    font-family: "IcoMoon-Free";
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* ====== Tag Pills ======== https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    .tag:not(.token) {
    background-color: var(--faded-blue);
    border: none;
    color: white;
    font-size: 14px;
    padding: 0px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 14px;
    font-weight: bold;
    }
    .tag:not(.token):hover {
    color: var(--bright-red) !important;
    background-color: var(--bright-red);
    }

    /*==============================================*/

    .tag[href^="#📥️"] {
    background-color: var(--light4);
    color: var(--light4) !important;
    }
    .tag[href^="#🌱️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#🌞️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#🌲️"] {
    background-color: var(--faded-aqua);
    color: var(--faded-aqua) !important;
    }
    .tag[href^="#✏"] {
    background-color: var(--faded-blue);
    color: var(--faded-blue) !important;
    }

    /*==============================================*/

    .tag[href^="#✅️"] {
    background-color: var(--bright-orange);
    color: var(--bright-orange) !important;
    }
    .tag[href^="#🗺️"] {
    background-color: var(--bright-yellow);
    color: var(--bright-yellow) !important;
    }
    .tag[href^="#⚙️"] {
    background-color: var(--dark3);
    color: var(--dark3) !important;
    }
    .tag[href^="#❗️"] {
    background-color: var(--light1);
    color: var(--light1) !important;
    }
    .tag[href^="#🏷️"] {
    background-color: var(--faded-purple);
    color: var(--faded-purple) !important;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Make subtler folding gutter arrows: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .CodeMirror-foldgutter-folded:after,
    .CodeMirror-foldgutter-open:after {
    opacity: 0.5;
    font-size: 60%;
    }

    .CodeMirror-foldgutter-folded:hover:after,
    .CodeMirror-foldgutter-open:hover:after {
    opacity: 1;
    }

    .CodeMirror-foldgutter-folded:after {
    content: "\25BA";
    }

    .CodeMirror-foldgutter-open:after {
    content: "\25BC";
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Relationship lines for the folder levels in file navigation: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .outline .collapsible-item-children {
    margin-left: 20px;
    border-left: 1px solid var(--faded-aqua);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
    }
    .outline .collapsible-item-children:hover {
    border-left-color: var(--faded-aqua);
    }
    .nav-folder-children .nav-folder-children {
    margin-left: 20px;
    padding-left: 0;
    border-left: 1px solid var(--faded-aqua);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
    }
    .nav-folder-children .nav-folder-children:hover {
    border-left-color: var(--faded-aqua);
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Graph View CSS https://discordapp.com/channels/686053708261228577/702656734631821413/760488978691784705 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    .theme-dark .graph-view.color-arrow {
    color: var(--bright-aqua);
    }

    .theme-dark .graph-view.color-fill-tag {
    color: var(--bright-yellow);
    }

    .theme-dark .graph-view.color-fill-attachment {
    color: var(--neutral-blue);
    }

    .theme-dark .graph-view.color-fill-unresolved {
    color: var(--bright-red);
    }
    .graph-view.color-fill {
    color: var(--light1);
    }
    /*
    .graph-view.color-line {
    color: var(--gray);
    }
    */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Better bullet points in edit mode https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul {
    color: transparent;
    position: relative;
    }

    div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after {
    content: "•";
    position: absolute;
    top: -6px;
    left: 4px;
    color: var(--bright-aqua);
    font-family: sans-serif;
    font-size: 20px;
    }


    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* some more text formatting */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    b, strong, .cm-s-obsidian .cm-strong{
    color: var(--bright-red) !important;
    }

    i, em {
    color: var(--bright-green) !important;
    }

    u {
    color: var(--bright-purple) !important;
    }


    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Larger popup windows https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    .popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px;
    min-height: 50px;
    width: 700px;
    overflow: overlay; /* new added */
    }

    .popover.hover-popover .markdown-embed {
    height: 100%;
    }

    .popover.hover-popover.is-loaded .markdown-embed .markdown-embed-content .markdown-preview-view{
    padding: 10px 10px 10px 16px; /*16px two pop magin */
    }
  9. tallguyjenks created this gist Sep 14, 2020.
    883 changes: 883 additions & 0 deletions obsidian.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,883 @@

    :root
    {
    --dark0-hard: #1d2021;
    --dark0: #282828;
    --dark0-soft: #32302f;
    --dark1: #3c3836;
    --dark2: #504945;
    --dark3: #665c54;
    --dark4: #7c6f64;

    --gray: #928374;

    --light0-hard: #f9f5d7;
    --light0: #fbf1c7;
    --light0-soft: #f2e5bc;
    --light1: #ebdbb2;
    --light2: #d5c4a1;
    --light3: #bdae93;
    --light4: #a89984;

    --bright-red: #fb4934;
    --bright-green: #b8bb26;
    --bright-yellow: #fabd2f;
    --bright-blue: #83a598;
    --bright-purple: #d3869b;
    --bright-aqua: #8ec07c;
    --bright-orange: #fe8019;

    --neutral-red: #cc241d;
    --neutral-green: #98971a;
    --neutral-yellow: #d79921;
    --neutral-blue: #458588;
    --neutral-purple: #b16286;
    --neutral-aqua: #689d6a;
    --neutral-orange: #d65d0e;

    --faded-red: #9d0006;
    --faded-green: #79740e;
    --faded-yellow: #b57614;
    --faded-blue: #076678;
    --faded-purple: #8f3f71;
    --faded-aqua: #427b58;
    --faded-orange: #af3a03;
    }

    .theme-dark
    {
    --font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace;
    --background-primary: var(--dark0);
    --background-primary-alt: var(--dark0);
    --background-secondary: var(--dark0-hard);
    --background-secondary-alt: var(--dark1);
    --text-normal: var(--light0);
    --text-faint: var(--light3);
    --text-title-h1: var(--neutral-red);
    --text-title-h2: var(--neutral-orange);
    --text-title-h3: var(--neutral-yellow);
    --text-title-h4: var(--neutral-green);
    --text-title-h5: var(--neutral-aqua);
    --text-title-h6: var(--neutral-purple);
    --text-link: var(--bright-blue);
    --text-a: var(--bright-orange);
    --text-a-hover: var(--bright-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--dark1);
    --text-highlight-bg: var(--faded-aqua);
    --interactive-accent: var(--bright-orange);
    --interactive-before: var(--dark4);
    --background-modifier-border: var(--dark2);
    --text-accent: var(--bright-orange);
    --interactive-accent-rgb: var(--bright-orange);
    --inline-code: var(--bright-blue);
    --code-block: var(--bright-blue);
    --vim-cursor: var(--bright-orange);
    --text-selection: var(--dark3);
    }

    .theme-light
    {
    --background-primary: var(--light0);
    --background-primary-alt: var(--light0);
    --background-secondary: var(--light0-hard);
    --background-secondary-alt: var(--light1);
    --text-normal: var(--dark0);
    --text-faint: var(--dark3);
    --text-title-h1: var(--faded-red);
    --text-title-h2: var(--faded-orange);
    --text-title-h3: var(--faded-yellow);
    --text-title-h4: var(--faded-green);
    --text-title-h5: var(--faded-aqua);
    --text-title-h6: var(--faded-purple);
    --text-link: var(--neutral-blue);
    --text-a: var(--neutral-orange);
    --text-a-hover: var(--neutral-blue);
    --text-mark: var(--neutral-yellow);
    --pre-code: var(--light1);
    --text-highlight-bg: var(--bright-aqua);
    --interactive-accent: var(--neutral-orange);
    --interactive-before: var(--light4);
    --background-modifier-border: var(--light2);
    --text-accent: var(--neutral-orange);
    --interactive-accent-rgb: var(--neutral-orange);
    --inline-code: var(--neutral-blue);
    --vim-cursor: var(--neutral-orange);
    --text-selection: var(--light2);
    }

    .theme-dark code[class*="language-"],
    .theme-dark pre[class*="language-"],
    .theme-light code[class*="language-"],
    .theme-light pre[class*="language-"]
    {
    text-shadow: none !important;
    background-color: var(--pre-code) !important;
    }

    .graph-view.color-circle,
    .graph-view.color-fill-highlight,
    .graph-view.color-line-highlight
    {
    color: var(--interactive-accent-rgb) !important;
    }
    .graph-view.color-text
    {
    color: var(--text-a-hover) !important;
    }
    /*
    .graph-view.color-fill
    {
    color: var(--background-secondary);
    }
    .graph-view.color-line
    {
    color: var(--background-modifier-border);
    }
    */

    html,
    body
    {
    font-size: 16px !important;
    }

    strong
    {
    font-weight: 600 !important;
    }

    a,
    .cm-hmd-internal-link
    {
    color: var(--text-a) !important;
    text-decoration: none !important;
    }

    a:hover,
    .cm-hmd-internal-link:hover,
    .cm-url
    {
    color: var(--text-a-hover) !important;
    text-decoration: none !important;
    }

    mark
    {
    background-color: var(--text-mark) !important;
    color: var(--dark0) !important;
    }

    .view-actions a
    {
    color: var(--text-normal) !important;
    }

    .view-actions a:hover
    {
    color: var(--text-a) !important;
    }

    .HyperMD-codeblock-bg
    {
    background-color: var(--pre-code) !important;
    }

    .HyperMD-codeblock
    {
    line-height: 1.4em !important;
    color: var(--code-block) !important;
    }

    .HyperMD-codeblock-begin
    {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    }

    .HyperMD-codeblock-end
    {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    }

    th
    {
    font-weight: 600 !important;
    }

    thead
    {
    border-bottom: 2px solid var(--background-modifier-border) !important;
    }

    .HyperMD-table-row
    {
    line-height: normal !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    background-color: var(--pre-code) !important;
    }

    .HyperMD-table-row-0
    {
    /* padding-top: 4px !important; */
    }

    .CodeMirror-foldgutter-folded,
    .is-collapsed .nav-folder-collapse-indicator
    {
    color: var(--text-a) !important;
    }

    .nav-file-tag
    {
    color: var(--text-a) !important;
    }

    .is-active .nav-file-title
    {
    color: var(--text-a) !important;
    background-color: var(--background-primary-alt) !important;
    }

    .nav-file-title
    {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    }

    img
    {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    .HyperMD-list-line
    {
    padding-top: 0 !important;
    }

    .CodeMirror-linenumber,
    .cm-formatting
    {
    font-family: var(--font-monospace) !important;
    }

    .markdown-preview-section pre code,
    .markdown-preview-section code
    {
    font-size: 0.9em !important;
    background-color: var(--pre-code) !important;
    }

    .markdown-preview-section pre code
    {
    padding: 4px !important;
    line-height: 1.4em !important;
    display: block !important;
    color: var(--code-block) !important;
    }

    .markdown-preview-section code
    {
    color: var(--inline-code) !important;
    }

    .cm-s-obsidian,
    .cm-inline-code
    {
    -webkit-font-smoothing: auto !important;
    }

    .cm-inline-code
    {
    color: var(--inline-code) !important;
    background-color: var(--pre-code) !important;
    padding: 1px !important;
    }

    .workspace-leaf-header-title
    {
    font-weight: 600 !important;
    }

    .side-dock-title
    {
    padding-top: 15px !important;
    font-size: 20px !important;
    }

    .side-dock-ribbon-tab:hover,
    .side-dock-ribbon-action:hover,
    .side-dock-ribbon-action.is-active:hover,
    .nav-action-button:hover,
    .side-dock-collapse-btn:hover
    {
    color: var(--text-a);
    }

    .side-dock
    {
    border-right: 0 !important;
    }

    .cm-s-obsidian,
    .markdown-preview-view
    {
    padding-left: 10px !important;
    padding-right: 10px !important;
    }

    /* vertical resize-handle */
    .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
    .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
    .workspace-split.mod-right-split > .workspace-leaf-resize-handle
    {
    width: 1px !important;
    background-color: var(--background-secondary-alt);
    }

    /* horizontal resize-handle */
    .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle
    {
    height: 1px !important;
    background-color: var(--background-secondary-alt);
    }

    /* Remove vertical split padding */
    .workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
    .workspace-split.mod-vertical > .workspace-split,
    .workspace-split.mod-vertical > .workspace-leaf,
    .workspace-tabs
    {
    padding-right: 0px;

    }


    .markdown-embed-title
    {
    font-weight: 600 !important;
    }

    .markdown-embed
    {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    }

    .cm-header-1,
    .markdown-preview-section h1
    {
    font-weight: 500 !important;
    font-size: 34px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h1) !important;
    }

    .cm-header-2,
    .markdown-preview-section h2
    {
    font-weight: 500 !important;
    font-size: 26px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h2) !important;
    }

    .cm-header-3,
    .markdown-preview-section h3
    {
    font-weight: 500 !important;
    font-size: 22px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h3) !important;
    }

    .cm-header-4,
    .markdown-preview-section h4
    {
    font-weight: 500 !important;
    font-size: 20px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h4) !important;
    }

    .cm-header-5,
    .markdown-preview-section h5
    {
    font-weight: 500 !important;
    font-size: 18px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h5) !important;
    }


    .cm-header-6,
    .markdown-preview-section h6
    {
    font-weight: 500 !important;
    font-size: 16px; /* Removed !important so that the #'s are hidden */
    color: var(--text-title-h6) !important;
    }

    .suggestion-item.is-selected
    {
    background-color: var(--background-secondary);
    }

    .empty-state-container:hover
    {
    background-color: var(--background-secondary-alt);
    border: 5px solid var(--interactive-accent) !important;
    }

    .checkbox-container
    {
    background-color: var(--interactive-before);
    }

    .checkbox-container:after
    {
    background-color: var(--background-secondary-alt);
    }

    .mod-cta
    {
    color: var(--background-secondary-alt) !important;
    font-weight: 600 !important;
    }

    .mod-cta:hover
    {
    background-color: var(--interactive-before) !important;
    font-weight: 600 !important;
    }

    .CodeMirror-cursor
    {
    background-color: var(--vim-cursor) !important;
    opacity: 60% !important;
    }

    input.task-list-item-checkbox {
    border: 1px solid var(--dark4);
    appearance: none;
    -webkit-appearance: none;
    }

    input.task-list-item-checkbox:checked {
    background-color: var(--dark4);
    box-shadow: inset 0 0 0 2px var(--background-primary);
    }

    /*============================================================================================================================================*/
    /*| |*/
    /*| THIS IS MY CUSTOM CSS SECTION WHERE I FIND COOL SHIT AND ADD IT IN |*/
    /*| |*/
    /*============================================================================================================================================*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* BULLET POINT RELATIONSHIP LINES */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
    .cm-hmd-list-indent .cm-tab::before, ul ul::before {
    content:'';
    border-left: 1px solid rgba(235, 219, 178, 0.5);
    position: absolute;
    }
    .cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px;
    }
    ul ul::before { left: -16px; top: 0; bottom: 0;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* MAKE MATHJAX FONT LARGER */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .MJX-TEX {
    font-size: 180%;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* _hyphenation_and_justification */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .cm-s-obsidian, .markdown-preview-view {
    text-align: justify;
    hyphens: auto;
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* IMAGE HOVER GROW */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .markdown-preview-view img {
    display: block;
    margin-top: 20pt;
    margin-bottom: 20pt;
    margin-left: auto;
    margin-right: auto;
    width: 50%; /* experiment with values */
    transition:transform 0.25s ease;
    }

    .markdown-preview-view img:hover {
    -webkit-transform:scale(1.8); /* experiment with values */
    transform:scale(2);

    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* NICER CHECK BOXES */
    /* Round checkbxes in preview and editor */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    input[type=checkbox], .cm-formatting-task {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
    vertical-align: top;
    }

    .cm-s-obsidian span.cm-formatting-task {
    color: transparent;
    width: 1.25em !important;
    height: 1.25em;
    display: inline-block;
    }

    input[type=checkbox]:focus{
    outline:0;
    }
    input[type=checkbox]:checked, .cm-formatting-task.cm-property {
    background-color: var(--text-accent-hover);
    border: 1px solid var(--text-accent-hover);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* STYLISH BLOCK QUOTES */
    /* Add quotation character before quote */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    blockquote:before {
    font: 14px/20px italic Times, serif;
    content: "“";
    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -0.4em;
    }
    blockquote p { display: inline; }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Remove blockquote left margin
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*
    blockquote {
    margin-inline-start: 0;
    } */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*============bigger link popup preview ================*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    .popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px; /* was 300 */
    min-height: 100px;
    width: 500px; /* was 400 */
    }

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Expand List Column for file search */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*.nav-folder-children
    {
    column-width:200px;
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Make Tags and Searched pages have expanded columns */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div:nth-child(4) > div.workspace-leaf > div > div > div,
    body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-left-split > div.workspace-tabs > div.workspace-leaf > div > div.search-result-container.mod-global-search > div
    {
    column-width:200px;
    }*/

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Andy Matuschak mode! */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */

    /* everything under .mod-root now. Don't want Andy messing with sidebars */
    /* also, Andy only makes sense for vertical splits, at the root level, right? */
    .mod-root.workspace-split.mod-vertical {
    overflow-x:auto;
    --header-width: 36px; /* <- 36px is the header height in the default theme */
    }
    .mod-root.workspace-split.mod-vertical > div {
    min-width: calc(700px + var(--header-width)); /* <-- 700px is the default theme's "readable" max-width */
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25);
    position:sticky;
    left:0;
    }

    /* shift sticky position, so titles will stack up to the left */
    /* This will currently stack to a maximum of 10 before resetting */
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--header-width) * 0); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--header-width) * 1); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--header-width) * 2); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--header-width) * 3); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--header-width) * 4); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--header-width) * 5); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--header-width) * 6); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--header-width) * 7); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n+0) { left: calc(var(--header-width) * 8); }
    .mod-root.workspace-split.mod-vertical > div:nth-child(10n+1) { left: calc(var(--header-width) * 9); }

    /* now it's time for the fancy vertical titles */

    /* first we'll add a bit of gap for the title to sit inside of */
    .workspace-leaf-content {
    padding-left: var(--header-width);
    position: relative;
    }

    /* this is where the magic happens */
    .view-header {
    writing-mode: vertical-lr;
    border-right: 1px solid var(--background-secondary-alt);
    border-left: 2px solid var(--background-secondary-alt);
    border-top: none;
    border-bottom: none;
    height: auto;
    width: var(--header-width);
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    }

    /* active titles have different border colours */
    .workspace-leaf.mod-active .view-header {
    border-right: 2px solid var(--interactive-accent);
    border-bottom: none;
    }

    /* unset the title container height and swap padding */
    .view-header-title-container {
    height: unset;
    padding-left: unset;
    padding-top: 5px;
    }

    /* fix the long-title-obscuring shadows */
    .view-header-title-container:after {
    width: 100%;
    height: 30px;
    top:unset;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, var(--background-secondary));
    }
    .workspace-leaf.mod-active .view-header-title-container:after {
    background: linear-gradient(to bottom, transparent, var(--background-primary-alt));
    }

    /* swap the padding/margin around for the header and actions icons */
    .view-header-icon, .view-actions {
    padding: 10px 5px;
    }
    .view-action {
    margin: 8px 0;
    }

    /* get rid of the gap left by the now-missing horizontal title */
    .view-content {
    height: 100%;
    }

    /* make the fake drop target overlay have a background so you can see it. */
    /* TODO: figure out how the fake target overlay works so we can put the title back, too */
    .workspace-fake-target-overlay {
    background-color: var(--background-primary);
    }


    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* Lime Light but only for body text */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /*
    .cm-s-obsidian,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-link,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-internal-link,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-url,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-escape-backslash,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-inline-code,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line.HyperMD-codeblock,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-builtin,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hr,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-footref,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line pre.HyperMD-footnote span.cm-hmd-footnote,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-list,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-quote,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-math,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.hmd-fold-math-placeholder {
    color: var(--dark2);
    }
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight,
    .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight {
    background-color: transparent;
    }
    .CodeMirror-activeline {
    color: var(--light1);
    }*/


    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* WYSIWYG Editor Features From: https://discordapp.com/channels/686053708261228577/702656734631821413/749843052385796147 */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    /* inline formatting, link targets and [[ ]] disappears if not active line
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting,
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-string.cm-url,
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link
    { display: none; } */

    /* hide all html tags -- IT IS COMMENTED OUT BY DEFAULT
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag{ display: none; }*/

    /* optionally header hashes span.cm-formatting-header,
    /* except list markers span.cm-formatting-list,
    /* code block backticks span.cm-formatting-code-block.cm-hmd-codeblock
    {
    display: inline !important;
    }*/

    /* and task checkboxes
    span.cm-formatting-task { display: inline !important; font-family: monospace; }
    */

    /*--------------------------------------------------------------------------------------------------------------------------------------------*/
    /* replace H1-H6 markup in edit mode */
    /*--------------------------------------------------------------------------------------------------------------------------------------------*/

    .CodeMirror-sizer{
    margin-left: 48px !important;
    }

    /*-- reduce left padding --*/
    .CodeMirror {
    height: 100%;
    direction: ltr;
    padding: 0 10px;
    }
    /*-- header color --*/
    .cm-header.cm-header-1{
    color: var(--text-accent);
    left: 0px;
    position: relative;
    }
    .cm-header.cm-header-2{
    color: var(--text-accent2);
    left: 0px;
    position: relative;
    }

    /*-- hide # markup--*/
    .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1,
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2,
    .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3,
    .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
    .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6
    {
    font-size: 0px;
    }

    /*-- display H1-h6 in gutter--*/
    .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before{
    content:"H1";
    font-size:34px;
    color: var(--text-accent2);
    left:-49px;
    top:-50px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before{
    content:"H2";
    font-size:26px;
    color: var(--text-accent2);
    left:-43px;
    top:-35px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before{
    content:"H3";
    font-size:22px;
    color: var(--text-accent2);
    left:-36px;
    top:-6px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before{
    content:"H4";
    font-size:20px;
    color: var(--text-accent2);
    left:-36px;
    top:-6px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before{
    content:"H5";
    font-size:18px;
    color: var(--text-accent2);
    left:-36px;
    top:-6px;
    position:absolute;
    }
    .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before{
    content:"H6";
    font-size:16px;
    color: var(--text-accent2);
    left:-36px;
    top:-4px;
    position:absolute;
    }

    /*-- is active line, hide H[1-6] in gutter --*/
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before,
    .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before
    {
    font-size: 0px;
    }
    /*-- is active line, display # markup --*/
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1{
    font-size:32px;
    display:inline;
    }
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2{
    font-size:24px;
    display:inline;
    }
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3{
    font-size:19px;
    display:inline;
    }
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4,
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5,
    .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6{
    font-size:13px;
    display:inline;
    }