Obsidian: CSS Override

blue_topaz_overrides.css

/* @settings
name: ⚙️ Blue Topaz (Aetherx Extras)
id: blue-topaz-theme-aetherx
settings:
  -
    id: atx-general
    title: 1. General
    description: General appearance settings
    type: heading
    level: 1
    collapsed: true
  -


    id: plugin-iconize-icon-clr
    title: Icon Color
    description: Color for icons
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'



  -
    id: file-explorer
    title: 1. File Explorer (Left)
    description: Left side file Explorer and folder listings
    type: heading
    level: 1
    collapsed: true
  -
    id: file-explorer-tag-accent
    title: Accent Color
    description: Accent color for File Preview file type tags
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: file-explorer-file-indent-left
    title: File Listing Left Gap
    description: Indents each file in the File explorer list
    type: variable-number-slider
    default: 20
    format: px
    min: 0
    max: 40
    step: 1
  -
    id: file-explorer-rename-bg
    title: Rename File Background Color
    description: Background color for box when renaming file
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: file-explorer-rename-text
    title: Rename File Text Color
    description: Text color for box when renaming file
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: file-explorer-rename-padding-left
    title: Rename File Left Gap
    description: Spacing on left side of rename box
    type: variable-number-slider
    default: 5
    format: px
    min: 0
    max: 40
    step: 1
  -
    id: file-explorer-rename-font-weight
    title: Rename File Font Weight
    description: Font weight for renaming files
    type: variable-text
    default: normal


  -
    id: reading-mode
    title: 2. Reading Mode
    description: Reading Mode settings
    type: heading
    level: 1
    collapsed: true
  -
    id: read-hr-padding-top
    title: Horizontal Ruler Padding (Top)
    description: Spacing above each horizontal ruler
    type: variable-number-slider
    default: 4.5
    format: em
    min: 0
    max: 40
    step: 1
  -
    id: read-hr-padding-bottom
    title: Horizontal Ruler Padding (Bottom)
    description: Spacing below each horizontal ruler
    type: variable-number-slider
    default: 4.5
    format: em
    min: 0
    max: 40
    step: 1


  -
    id: edit-mode
    title: 3. Edit Mode
    description: Settings specifically for Edit Mode
    type: heading
    level: 1
    collapsed: true
  -
    id: edit-header-padding-top
    title: Heading Padding (Top)
    description: Spacing above each #heading
    type: variable-number-slider
    default: 0
    format: px
    min: 0
    max: 40
    step: 1
  -
    id: edit-header-padding-bottom
    title: Heading Padding (Bottom)
    description: Spacing below each #heading
    type: variable-number-slider
    default: 0
    format: px
    min: 0
    max: 40
    step: 1
  -
    id: edit-link-codeblock-color-text
    title: Link Codeblock Text Color
    description: Text color for link codeblocks using [[Page^Block]]
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: edit-link-codeblock-color-icon
    title: Link Codeblock Icon Color
    description: Icon color for link codeblocks using [[Page^Block]]
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: edit-button-icon-padding-1
    title: 
    description: "<br />"
    type: info-text
    markdown: true
  -
    id: edit-button-icon-help
    title: Generating SVG URLs
    description: "For the icon settings below; SVG URLs can be generated with: <br />[https://yoksel.github.io/url-encoder](https://yoksel.github.io/url-encoder)<br /><br />Paste SVG path in left <b>Insert SVG</b> box, copy contents of <b>Take Encoded</b> box.<br /><br />"
    type: info-text
    markdown: true
  -
    id: edit-button-icon
    title: Edit Button Icon
    description: "SVG icon for edit button for codeblocks, etc."
    type: variable-text
    default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8.707 19.707 18 10.414 13.586 6l-9.293 9.293a1.003 1.003 0 0 0-.263.464L3 21l5.242-1.03c.176-.044.337-.135.465-.263zM21 7.414a2 2 0 0 0 0-2.828L19.414 3a2 2 0 0 0-2.828 0L15 4.586 19.414 9 21 7.414z'%3E%3C/path%3E%3C/svg%3E")
  -
    id: edit-button-icon-padding-2
    title: 
    description: "<br />"
    type: info-text
    markdown: true


  -
    id: main-themescfg-list
    title: 4. Theme Settings Interface
    description: Theme settings interface (this panel).
    type: heading
    level: 1
    collapsed: true
  -
    id: main-themescfg-cat-bg-clr
    title: Category Color
    description: Background color for each 
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'


  -
    id: main-plugins
    title: A. Plugins
    description: Settings specifically for individual plugins
    type: heading
    level: 1
    collapsed: true
  -
    id: plugin-metabind
    title: A.1 Meta Bind
    type: heading
    level: 2
    collapsed: true
  -
    id: plugin-metabind-pbar-text-offset-top
    title: Progressbar Text Offset (Top)
    description: Moves the text inside a progress bar horizontally
    type: variable-number-slider
    default: 43
    min: 0
    max: 100
    step: 1
    format: "%"
  -
    id: plugin-metabind-pbar-height
    title: Progress Bar Height
    description: Height of progress bar
    type: variable-number-slider
    default: 24
    format: px
    min: 5
    max: 40
    step: 1
  -
    id: plugin-metabind-pbar-color
    title: Progress Bar Color
    description: Primary progress bar color
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: plugin-short-links
    title: A.1 Short Links
    type: heading
    level: 2
    collapsed: true
  -
    id: plugin-iconize
    title: A.2 Iconize
    type: heading
    level: 2
    collapsed: true
  -
    id: plugin-iconize-icon-clr
    title: Icon Color
    description: Color for icons
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: plugin-linkembed
    title: A.3 Link Embed
    type: heading
    level: 2
    collapsed: true
  -
    id: plugin-linkembed-box-padding
    title: Box Padding
    description: Padding of embed box
    type: variable-number-slider
    default: 10
    format: px
    min: 5
    max: 40
    step: 1
  -
    id: plugin-linkembed-box-right-bg-clr
    title: Right Side Background Color
    description: Color for box on right side surrounding website logo/icon
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: plugin-linkembed-box-left-bg-clr
    title: Left Side Background Color
    description: Color for box on left side surrounding website logo/icon
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: plugin-linkembed-description-text-clr
    title: Description Text Color
    description: Text color for website description
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: plugin-linkembed-description-text-size
    title: Description Text Size
    description: Text size for website description
    type: variable-number-slider
    default: 10
    format: px
    min: 5
    max: 40
    step: 1
  -
    id: plugin-favicon
    title: A.4 Link Favicons
    type: heading
    level: 2
    collapsed: true
  -
    id: plugin-favicon-link
    title: About Plugin
    description: "See the favicon for a linked website.<br />[https://github.com/joethei/obsidian-link-favicon](https://github.com/joethei/obsidian-link-favicon)"
    type: info-text
    markdown: true





  -
    id: plugin-favicon-icon-height
    title: Icon Height
    description: Favicon height
    type: variable-number-slider
    default: 20
    format: px
    min: 5
    max: 40
    step: 1
  -
    id: plugin-favicon-icon-padding-left
    title: Icon Margin (Left)
    description: Favicon left margin
    type: variable-number-slider
    default: 5
    format: px
    min: 0
    max: 20
    step: 1
  -
    id: plugin-favicon-icon-padding-right
    title: Icon Margin (Right)
    description: Favicon right margin
    type: variable-number-slider
    default: 4
    format: px
    min: 0
    max: 20
    step: 1
  -



    id: plugin-consolemd
    title: A.5 Console Markdown
    type: heading
    level: 2
    collapsed: true
  -
    id: plugin-consolemd-link
    title: About Plugin
    description: "Renders console commands and output. <br />[https://github.com/dellermann/obsidian-console](https://github.com/dellermann/obsidian-console)"
    type: info-text
    markdown: true
  -
    id: plugin-consolemd-box-bg-clr
    title: Box Background Color
    description: Console box background color
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
  -
    id: plugin-consolemd-txt-font-face
    title: Font Face
    description: Font used for console markdown boxes
    type: variable-text
    default: "Office Code Pro D Light"
  -
    id: plugin-consolemd-txt-font-size
    title: Font Size
    description: Text size for text inside console markdown block
    type: variable-number-slider
    default: 10
    format: px
    min: 0
    max: 20
    step: 1



  -



    id: plugin-callout
    title: A.5 Callout / Admonition
    type: heading
    level: 2
    collapsed: true
  -
    id: plugin-callout-link
    title: About Plugin
    description: "Admonition blocks<br />[https://github.com/javalent/admonitions](https://github.com/javalent/admonitions)"
    type: info-text
    markdown: true
  -
    id: plugin-callout-box-bg-clr
    title: Box Background Color
    description: Callout background color
    type: variable-themed-color
    opacity: true
    format: hex
    default-light: '#'
    default-dark: '#'
*/

/*
    global variables
*/

    body
    {
        --line-number-height-correction:            0.3px;
        --file-explorer-tag-accent:                 var(--background-modifier-hover);
        --file-explorer-file-indent-left:           20px;
        --file-explorer-rename-bg:                  #61162f;
        --file-explorer-rename-text:                #FFFFFF;
        --file-explorer-rename-padding-left:        5px;
        --file-explorer-rename-font-weight:         normal;
        --read-hr-padding-top:                      4.5em;
        --read-hr-padding-bottom:                   4.5em;
    
        --edit-header-padding-top:                  0px;
        --edit-header-padding-bottom:               0px;
        --edit-link-codeblock-color-text:           #818181;
        --edit-link-codeblock-color-icon:           #c72060;
        --edit-button-icon:                         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8.707 19.707 18 10.414 13.586 6l-9.293 9.293a1.003 1.003 0 0 0-.263.464L3 21l5.242-1.03c.176-.044.337-.135.465-.263zM21 7.414a2 2 0 0 0 0-2.828L19.414 3a2 2 0 0 0-2.828 0L15 4.586 19.414 9 21 7.414z'%3E%3C/path%3E%3C/svg%3E");

        --main-themescfg-cat-bg-collapsed-clr:      #202020;
        --main-themescfg-cat-bg-activated-clr:      #970b41;

        --plugin-metabind-pbar-text-offset-top:     43%;
        --plugin-metabind-pbar-height:              24px;
        --plugin-metabind-pbar-color:               #C01E50;

        --plugin-iconize-icon-clr:                  #FFFFFF;

        --plugin-linkembed-box-padding:             10px;
        --plugin-linkembed-box-left-bg-clr:         #353333;
        --plugin-linkembed-box-right-bg-clr:        #1f1f1f;
        --plugin-linkembed-txt-desc-clr:            #fa306d;

        --plugin-linkembed-txt-desc-size:           9pt;

        --plugin-favicon-icon-height:               20px;
        --plugin-favicon-icon-margin-bottom:        5px;
        --plugin-favicon-icon-padding-left:         5px;
        --plugin-favicon-icon-padding-right:        4px;

        --plugin-consolemd-box-bg-clr:              #0c3317cc;
        --plugin-consolemd-txt-font-face:           "Office Code Pro D Light";
        --plugin-consolemd-txt-font-size:           10px;

        --plugin-callout-box-bg-clr:              #0e0e0eb3;
        

    }

/*
    animation: pulse
*/

.anim_pulse
{
    animation: pulse 2s infinite;
    cursor: pointer;
}

@keyframes pulse
{
    0%
    {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70%
    {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100%
    {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/*
    General >  Animation: Blink
*/

    .anim_blink
    {
        animation: blinker 1s linear infinite;
    }
    
    @keyframes blinker
    {
        50%
        {
            opacity: 0;
        }
    }

/*
    General >  Animation: Glow
*/

    .glow
    {
        font-size:          13px;
        color:              #fff;
        text-align:         center;
        -webkit-animation:  glow 1s ease-in-out infinite alternate;
        -moz-animation:     glow 1s ease-in-out infinite alternate;
        animation:          glow 1s ease-in-out infinite alternate;
    }
    
    @keyframes glow
    {
        from
        {
            text-shadow:      0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
        }
        to
        {
            text-shadow:      0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
        }
    }

/*
    Callout Boxes

    fix code block background color inside callout box.
*/

    .callout-content > .code-styler.code-styler-style-inline .cm-s-obsidian span.cm-inline-code, .code-styler.code-styler-style-inline .markdown-rendered :not(pre) > code:not([class*=blur]), .code-styler.code-styler-style-inline code.code-styler-settings-inline-code
    {
        background-color: var(--plugin-callout-box-bg-clr);
    }

    .callout-content > pre[class*="language-"]
    {
        background-color: var(--plugin-callout-box-bg-clr);
    }

/*
    @plugin     : Console Markdown Plugin
    @url        : https://github.com/dellermann/obsidian-console

    Requires the console markdown plugin
*/

    .callout-content pre[class*='language-console'], .language-console
    {
        background-color: var(--plugin-consolemd-box-bg-clr) !important;
        font-family: var(--plugin-consolemd-txt-font-face) !important;
        font-size: var(--plugin-consolemd-txt-font-size);
    }

/*
    @plugin     : Console Markdown Plugin
    @url        : https://github.com/dellermann/obsidian-console

    Add spacing between the > character and the code
*/

    .console-command
    {
        color: var(--code-function);
        padding-left: 7px;
    }

/*
    Obsidian Settings > Plugin List
    Expanded Category
*/

    div.style-settings-heading[data-level="0"]
    {
        height: 33px;
        background-color: var(--main-themescfg-cat-bg-activated-clr);
    }

/*
    Obsidian Settings > Plugin List
    Collapse Category
*/

    div.style-settings-heading[data-level="0"].is-collapsed
    {
        box-shadow: none;
        background-color: var(--main-themescfg-cat-bg-collapsed-clr);
    }


/*
    Obsidian Settings > Plugin List
    Aetherx Category
*/

    div.style-settings-heading[data-id="blue-topaz-theme-aetherx"]
    {
        background: #5e0b24 !important;
    }

/*
    Obsidian Settings > Plugin List
    Level 0 > Plugin Name
*/

    .setting-item.setting-item-heading.style-settings-heading[data-level="0"] .setting-item-name
    {
        font-size: 10pt;
    }

/*
    Obsidian Settings > Plugin List
    Level 1 > Plugin Name
*/

    .setting-item.setting-item-heading.style-settings-heading[data-level="1"] .setting-item-name
    {
        font-size: 9pt;
    }

/*
    Plugin List > Arrow
*/

    .setting-item.setting-item-heading.style-settings-heading.is-collapsed .style-settings-collapse-indicator
    {
        opacity: 1;
    }

/*
    Plugin List > Gap to left
*/

    .style-settings-container
    {
        padding-bottom: 30px !important;
    }

    div.style-settings-heading[data-level="0"] + .style-settings-container
    {
        padding: 20px 0px;
    }

/*
    Obsidian Settings > Plugin List
    Setting Name
*/

    .setting-item-name
    {
        padding-left: 25px;
    }

/*
    Obsidian Settings > Plugin List
    Setting Description
*/

    .setting-item-description
    {
        color: #797979;
        padding-left: 25px;
    }

/*
    Obsidian Settings > Plugin List
    Add gap to last setting of each category
*/

    .setting-item-description > div
    {
        padding-top: 13px;
    }

/*
    Control Element > Range Slider
*/

    input[type="range"]
    {
        /* removing default */
        -webkit-appearance: none;
        appearance: none;

        width: 50%;
        cursor: pointer;
        outline: none;
        height: 3px;
        background: #424142;
        border-radius: 16px;
    }
      
    /* Track: Webkit */
    input[type="range"]::-webkit-slider-runnable-track
    {
        padding-top: 2px;
        background: #424142;
        border-radius: 16px;
    }
    
    /* Track: Mozilla Firefox */
    input[type="range"]::-moz-range-track
    {
        padding-top: 2px;
        background: #ac0f50;
        border-radius: 16px;
    }
    
    input[type="range"]::-webkit-slider-thumb
    {
        /* removing default */
        -webkit-appearance: none;
        appearance: none;

        cursor: pointer;
        height: 15px;
        width: 15px;
        background-color: #eb1e6c;
        border-radius: 50%;
        border: 1px solid #e71163;
        animation: pulse 2s infinite;
    }

    input[type="range"]::-moz-range-thumb
    {
        cursor: pointer;
        height: 15px;
        width: 15px;
        background-color: #eb1e6c;
        border-radius: 50%;
        border: 1px solid #e71163;
        animation: pulse 2s infinite;
    }

/*
    @plugin     : Link Facicons
    @url        : https://github.com/joethei/obsidian-link-favicon
    
    adds more padding between favicon and text
*/

    img.link-favicon
    {
        height: var(--plugin-favicon-icon-height) !important;
        display: inline-block;
        vertical-align: middle;
        padding-right: var(--plugin-favicon-icon-padding-right);
        padding-left: var(--plugin-favicon-icon-padding-right);
        border: none;
    }

/*
    @plugin     : Link Facicons
    @url        : https://github.com/joethei/obsidian-link-favicon

    remove giant gap to the right of favicons
*/

    .external-link
    {
        padding-right: 3px;
    }

/*
    @plugin     : Link Embed
    @url        : https://github.com/Seraphli/obsidian-link-embed

    Adds padding between outter edge and icon
*/

    ._lc._sm:not(.xd) .wc
    {
        padding: var(--plugin-linkembed-box-padding);
        background: var(--plugin-linkembed-box-left-bg-clr);
    }

/*
    @plugin     : Link Embed
    @url        : https://github.com/Seraphli/obsidian-link-embed

    right side background
*/

    ._lc._sm:not(.xd) .wt
    {
        background: var(--plugin-linkembed-box-right-bg-clr);
    }


/*
    @plugin     : Link Embed
    @url        : https://github.com/Seraphli/obsidian-link-embed

    Description + title text color
*/

    .em > a, .tc > a, .th > a
    {
        color: var(--plugin-linkembed-txt-desc-clr);
    }

/*
    @plugin     : Link Embed
    @url        : https://github.com/Seraphli/obsidian-link-embed

    smaller description
*/

    ._lc > .wf > .wt > ._f0 > .td
    {
        font-size: var(--plugin-linkembed-txt-desc-size);
    }

/*
    @plugin     : Iconize
    @url        : https://github.com/FlorianWoelki/obsidian-iconize
*/

    .iconize-icon svg
    {
        color: var(--plugin-iconize-icon-clr) !important;
        fill: var(--plugin-iconize-icon-clr) !important;
    }

/*
    Font Awesome Icons
*/

    .isc-icon > *:first-child
    {
        color: var(--plugin-iconize-icon-clr);
    }

    .isc-icon.icon-emoji-icon > *:first-child
    {
        color: var(--plugin-iconize-icon-clr);
    }

    .isc-icon.isc-fas > *:first-child
    {
        color: var(--plugin-iconize-icon-clr);
    }

    .isc-icon:not(.isc-char-icon)
    {
        display: inline-flex;
        vertical-align: text-top;
        padding-top: calc(var(--font-text-size) / 8);
    }

    .isc-icon > img,
    .isc-icon > svg
    {
        cursor: default !important;
        height: 1em;
        width: 1em;
    }

    .view-content .mod-cm6 .cm-isc > .isc-icon > img,
    .view-content .mod-cm6 .cm-isc > .isc-icon > svg
    {
        cursor: pointer;
        color: var(--plugin-iconize-icon-clr);
    }

    .markdown-source-view .isc-icon > img,
    .markdown-source-view .isc-icon > svg,
    .markdown-preview-view .isc-icon > img,
    .markdown-preview-view .isc-icon > svg
    {
        color: var(--plugin-iconize-icon-clr);
        height: var(--font-text-size, var(--editor-font-size, 1em));
        width: var(--font-text-size, var(--editor-font-size, 1em));
    }

    .markdown-source-view .HyperMD-header-1 .isc-icon > img,
    .markdown-source-view .HyperMD-header-1 .isc-icon > svg,
    .markdown-preview-view h1 .isc-icon > img,
    .markdown-preview-view h1 .isc-icon > svg
    {
        color: var(--plugin-iconize-icon-clr);
        height: var(--h1-size);
        width: var(--h1-size);
    }

    .markdown-source-view .HyperMD-header-2 .isc-icon > img,
    .markdown-source-view .HyperMD-header-2 .isc-icon > svg,
    .markdown-preview-view h2 .isc-icon > img,
    .markdown-preview-view h2 .isc-icon > svg
    {
        color: var(--plugin-iconize-icon-clr);
        height: var(--h2-size);
        width: var(--h2-size);
    }

    .markdown-source-view .HyperMD-header-3 .isc-icon > img,
    .markdown-source-view .HyperMD-header-3 .isc-icon > svg,
    .markdown-preview-view h3 .isc-icon > img,
    .markdown-preview-view h3 .isc-icon > svg
    {
        color: var(--plugin-iconize-icon-clr);
        height: var(--h3-size);
        width: var(--h3-size);
    }

    .markdown-source-view .HyperMD-header-4 .isc-icon > img,
    .markdown-source-view .HyperMD-header-4 .isc-icon > svg,
    .markdown-preview-view h4 .isc-icon > img,
    .markdown-preview-view h4 .isc-icon > svg
    {
        color: var(--plugin-iconize-icon-clr);
        height: var(--h4-size);
        width: var(--h4-size);
    }

    .markdown-source-view .HyperMD-header-5 .isc-icon > img,
    .markdown-source-view .HyperMD-header-5 .isc-icon > svg,
    .markdown-preview-view h5 .isc-icon > img,
    .markdown-preview-view h5 .isc-icon > svg
    {
        color: var(--plugin-iconize-icon-clr);
        height: var(--h5-size);
        width: var(--h5-size);
    }

    .markdown-source-view .HyperMD-header-6 .isc-icon > img,
    .markdown-source-view .HyperMD-header-6 .isc-icon > svg,
    .markdown-preview-view h6 .isc-icon > img,
    .markdown-preview-view h6 .isc-icon > svg
    {
        color: var(--plugin-iconize-icon-clr);
        height: var(--h6-size);
        width: var(--h6-size);
    }

    .suggestion-container svg
    {
        color: var(--plugin-iconize-icon-clr);
    }

    .cm-iconize-icon
    {
        color: var(--plugin-iconize-icon-clr);
    }

    .callout .callout-icon.isc-icon > img,
    .callout .callout-icon.isc-icon > svg
    {
        color: var(--plugin-iconize-icon-clr);
        height: 16px;
        width: 16px;
    }

    .suggestion-container.isc .suggestion-flair
    {
        color: var(--plugin-iconize-icon-clr);
        opacity: 1;
    }

    .suggestion-container.isc .suggestion-flair > .isc-icon
    {
        color: var(--plugin-iconize-icon-clr);
    }

/*
    File Explorer
*/

    /*
        Right-side tags for file types
    */

        .nav-file-tag
        {
            background-color: var(--file-explorer-tag-accent);
        }

    /*
        add spacing to left of each file
    */

        .nav-file
        {
            padding-left: var(--file-explorer-file-indent-left);
        }


/*
    @plugin     : Metabind Plugin
    @url        : https://github.com/mProjectsCode/obsidian-meta-bind-plugin
*/

    /*
        Progress Bar
    */

        .mb-progress-bar-label-left, .mb-progress-bar-value, .mb-progress-bar-label-right
        {
            top: var(--plugin-metabind-pbar-text-offset-top);
        }

        .mb-progress-bar-progress
        {
            height: var(--plugin-metabind-pbar-height);
            background: var(--plugin-metabind-pbar-color);
        }

/*
    rename folder / file

    @NOTE       : must use !important for font color. Somewhere else also using the same flag.
*/

    .nav-file-title-content.is-being-renamed, .nav-folder-title-content.is-being-renamed
    {
        background-color: var(--file-explorer-rename-bg);
        color: var(--file-explorer-rename-text) !important;
        padding-left: var(--file-explorer-rename-padding-left);
        font-weight: var(--file-explorer-rename-font-weight);
    }

/*
    Remove padding from headers
    Edit Mode Only

    padding-bottom requires !important
        @TODO:      check where primary value comes from
*/

    .cm-s-obsidian .cm-line.HyperMD-header
    {
        padding-top: var(--edit-header-padding-top);
        padding-bottom: var(--edit-header-padding-bottom) !important;
    }
    
/*
    bigger gap between header lines
    Reading mode only
    ---
*/

    body.fancy-hr-no-icon .markdown-rendered hr
    {
        margin-block-start: var(--read-hr-padding-top);
        margin-block-end: var(--read-hr-padding-bottom);
    }

/*
    @plugin     : Short Links Plugin
    @url        : https://github.com/scottwillmoore/obsidian-short-links

    This removes the icons for certain types because we dont really need them.
*/

    .lucide-hash, .lucide-external-link, .lucide-file
    {
        display: none;
        margin: 0px;
    }

/*
    Codeblock > Text
*/

    .cm-s-obsidian span.cm-footref, .cm-s-obsidian span.cm-blockid
    {
        color: var(--edit-link-codeblock-color-text);
    }

/*
    Codeblock > Add icon

    A block is an internal link with the ^ appended to the end
    ![[MyPage^Block]]
*/


    .cm-blockid::before
    {
        color: var(--edit-link-codeblock-color-icon);
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='%23c72060'%3E%3Cpath d='m21.406 6.086-9-4a1.001 1.001 0 0 0-.813 0l-9 4c-.02.009-.034.024-.054.035-.028.014-.058.023-.084.04-.022.015-.039.034-.06.05a.87.87 0 0 0-.19.194c-.02.028-.041.053-.059.081a1.119 1.119 0 0 0-.076.165c-.009.027-.023.052-.031.079A1.013 1.013 0 0 0 2 7v10c0 .396.232.753.594.914l9 4c.13.058.268.086.406.086a.997.997 0 0 0 .402-.096l.004.01 9-4A.999.999 0 0 0 22 17V7a.999.999 0 0 0-.594-.914zM12 4.095 18.538 7 12 9.905l-1.308-.581L5.463 7 12 4.095zm1 15.366V11.65l7-3.111v7.812l-7 3.11z'%3E%3C/path%3E%3C/svg%3E");
        position: relative;
        top: 2px;
        margin-left: 0px;
        padding-right: 5px;
        background-size: 10px 20px;
        font-size: 7px;
    }

/*
    reverse text
*/

      .txt-reverse
      {
        unicode-bidi:       bidi-override;
        direction:          rtl;
      }

/*
    dim
*/

      .txt-dim
      {
        filter:             brightness(50%);
      }

/*
    standout - white background, dark text
*/

    .txt-highlight
    {
        background-color:   #FFF;
        color:              #000;
        padding-left:       4px;
        padding-right:      4px;
        font-weight:        bold;
    }

/*
    run code text output
*/

    .stdout
    {
        font-size:          9pt !important;
    }

/*
    Stops plugin from pushing folder arrows down

    @plugin     : folder-notes
    @ref        : .obsidian\plugins\folder-notes\styles.css
*/

    .fn-whitespace-stop-collapsing .nav-folder-collapse-indicator
    {
        margin-top: 0px !important;
    }

/*
    Add separators to file preview list
*/

    /*
        @replete Folder Separators v2 tested with Obsidian 1.1.9
    */

        /*
            Separator  below nav item
        */

            .nav-folder-children > [class*=nav-]:has([data-path="Backups"])::after,
            .nav-folder-children > [class*=nav-]:has([data-path="WSL"])::before,
            .nav-folder-children > [class*=nav-]:has([data-path="C#"])::after
            {
                content:'';
                display:block;
                height:1px;
                width:100%;
                background:linear-gradient(to right, var(--divider-color), transparent);
                margin:6px 0 6px -8px;
            }

        /*
            separator above Attachments Menu Item
        */

        .nav-folder-children > [class*=nav-]:has([data-path="Software"])::before
        {
            content:'';
            display:block;
            height:2px;
            width:100%;
            background:linear-gradient(to right, #a30245, transparent);
            margin:16px 0px 16px -8px;
        }

        /*
            separator above Attachments Menu Item
        */

            .nav-folder-children > [class*=nav-]:has([data-path="Attachments"])::before
            {
                content:'';
                display:block;
                height:2px;
                width:100%;
                background:linear-gradient(to right, #a30245, transparent);
                margin:16px 0px 16px -8px;
            }

        /*
            separator above Attachments Menu Item
        */

        .nav-folder-children > [class*=nav-]:has([data-path="Users"])::before
        {
            content:'';
            display:block;
            height:2px;
            width:100%;
            background:linear-gradient(to right, #a30245, transparent);
            margin:16px 0px 16px -8px;
        }

        /*
            separator above Attachments Menu Item
        */

        .nav-folder-children > [class*=nav-]:has([data-path="Projects"])::before
        {
            content:'';
            display:block;
            height:2px;
            width:100%;
            background:linear-gradient(to right, #a30245, transparent);
            margin:16px 0px 16px -8px;
        }

        /*
            separator above Attachments Menu Item
        */

        .nav-folder-children > [class*=nav-]:has([data-path="User Configs"])::before
        {
            content:'';
            display:block;
            height:2px;
            width:100%;
            background:linear-gradient(to right, #a30245, transparent);
            margin:16px 0px 16px -8px;
        }

        /*
            separator above Windows Menu Item
        */

            .nav-folder-children > [class*=nav-]:has([data-path="Windows"])::before
            {
                content:'';
                display:block;
                height:2px;
                width:100%;
                background:linear-gradient(to right, #a30245, transparent);
                margin:16px 0px 16px -8px;
            }

/*
    Dark grey box shadow for objects like Dataview (table of contents)
    and embed blocks
*/

    .markdown-source-view.mod-cm6 .cm-embed-block:hover
    {
        box-shadow: none !important;
    }

/*
    table header colors
*/

    .markdown-rendered thead tr
    {
        background-color: #df0257 !important;
        height: 35px !important;
    }

    body.table-style-two :is(.markdown-preview-view,.markdown-rendered) th
    {
        border-bottom: 2px solid #ff006a !important;
    }

/*
    queries
*/

    :not(pre)>code:not([class*='language-']):not([class*="blur-"])
    {
        color: var(--code-styler-inline-colour) !important;
    }

    .code-styler-header-language-tag-query
    {
        display: none !important;
    }

    .internal-query
    {
        margin: 0;
        border: 0px !important;
        border-top: 0px !important;
    }

    .search-result:not(.is-collapsed) .search-result-file-title
    {
        font-size: 11pt !important;
        background-color: #2a2a2a;
        border-radius: 2px !important;
        height: 28px !important;
        vertical-align: middle;
    }

    .search-results-children .search-result-file-title .tree-item-inner
    {
        line-height: unset !important;
    }

    .search-result > .tree-item-self.is-clickable:hover
    {
        background-color: #A30245 !important;
        cursor: pointer !important;
    }

    span.search-result-file-matched-text
    {
        background: none !important;
    }

    .search-result-file-matches
    {
        box-shadow: none !important;
    }

    .language-query .code-styler-header-text
    {
        padding-left: 15px !important;
    }

    [class^=code-styler-header-container].language-query::after
    {
            display: none !important;
    }

    /* Hide the query header text */
    .internal-query-header {
        display: none !important;
    }

    .internal-query .search-result-container
    {
        padding: 2px 0px 0px 0px !important;
    }

/*
    Button Plugin
*/

    .theme-dark button.button-default
    {
        border: 0.5px solid #cb2160;
        background-color: #262626;
        padding: 5px 15px;
        margin: 0px;
        font-size: 10pt;
        margin-bottom: 10px;
    }

    .theme-dark button.button-default:hover
    {
        animation: pulse 2s infinite;
        cursor: pointer;
    }

/*
    Tab Button (Active)
*/

    .workspace-tab-header.mod-active .workspace-tab-header-inner-title
    {
        font-weight: normal;
    }

    body.transparent-tab-style.theme-dark .workspace-split.mod-root .workspace-tab-header.is-active.mod-active
    {
        background-color: #a30245;
        font-weight: normal;
    }

/*
    Vault Statistics Plugin

    Show all
*/

    .obsidian-vault-statistics--item
    {
        display: initial !important;
    }

/*
    file tree view > hover selected
*/

    body:not(.is-grabbing) .tree-item-self.is-clickable.nav-file-title.is-active:hover, body:not(.is-grabbing) .tree-item-self.is-clickable.nav-file-title:hover, .nav-file:not(.is-active):hover .nav-file-title, .nav-folder:hover .nav-folder-content
    {
        opacity: 1 !important;
        background-color: var(--nav-item-background-active) !important;
    }

/*
    footnote
*/

    a.footnote-link
    {
        color: #ff3e0e;
        font-weight: bold;
    }

/*
    footnote > back arrow
*/

    a.footnote-backref
    {
        color: #4531ff !important;
    }

/*
    footnote > front number
*/

    body.colorful-ordered-list ol li::marker, body.colorful-ordered-list ol li::before, body.colorful-ordered-list .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line div.cm-fold-indicator ~ span.cm-formatting.cm-formatting-list-ol, body.colorful-ordered-list .cm-formatting.cm-formatting-list.cm-formatting-list-ol, body.colorful-ordered-list .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line span.cm-hmd-list-indent ~ span.cm-formatting.cm-formatting-list-ol {
        color: #ff3e0e;
        font-weight: bold;
    }

/*
    document property tag pills
*/

    .multi-select-pill
    {
        padding-left: 2px;
        padding-right: 2px;
        padding-top: 6px;
        font-size:9pt;
    }

/*
    document property that show at the top of each page.
    Adjusts the line height of each item
*/

    .metadata-property
    {
        line-height: 20px;
    }

/*
    Frontmatter
    Moves the "Add Property" button to far left of frontmatter values overlapping useless "Property" label.
*/

    .workspace-split.mod-root .metadata-container .metadata-add-button
    {
        left: 0;
        background-color: #a9043d;
        cursor: pointer;
        color: #FFF !important;
    }

/*
    document property that show at the top of each page.
    Add Property button text pushed down some
*/

    .metadata-add-button > .text-button-label
    {
        padding-top: 4px !important;
    }

    .metadata-property-key
    {
        background-color: #CCC;
    }

/*
    document property that show at the top of each page.
    add slight bg color to left side values
*/

    .metadata-property-key
    {
        background-color: #202020;
    }

    .metadata-property-key-input
    {
        color: #f8146c !important;
        font-weight: bold !important;
    }

/*
    @plugin     : github embed plugin
    @url        : https://github.com/MrGVSV/obsidian-github-embeds

    removes <p></p> gap between a link and the bottom of a table
*/

    ._embed-container_tpqtd_1
    {
        margin: auto !important;
    }

/*
    Remove bold from strong words that are bold
*/

    *:not(font)>em>strong,
    *:not(font)>strong>em,
    .cm-strong.cm-em {
        font-weight: normal !important;
        font-family: var(--font-text) !important;
    }

    span.cm-strong,
    :not(font)>strong,
    .cm-s-obsidian .cm-highlight.cm-strong {
        font-weight: normal !important;
        font-family: var(--font-text) !important;
    }

    span.cm-strong, :not(font)>strong, .cm-s-obsidian .cm-highlight.cm-strong
    {
        color: var(--accent-strong) !important;
        font-family: var(--font-text) !important;
        font-weight: normal;
    }

/*
    highlights done with
        == Text ==
        *== Text == *
*/

    body:not(.no-rounded-corners-highlight):not(.all-rounded-corners-highlight) .cm-s-obsidian .cm-widgetBuffer[aria-hidden="true"]+span.cm-highlight:has(+ .cm-widgetBuffer[aria-hidden="true"])
    {
        padding-left: 5px;
        padding-right: 5px;
    }

    body:not(.no-rounded-corners-highlight):not(.all-rounded-corners-highlight) .cm-s-obsidian .cm-widgetBuffer[aria-hidden="true"]+span.cm-highlight:has(+ .cm-widgetBuffer[aria-hidden="true"])
    {
        padding-top: 0px;
        padding-bottom: 0px;
        font-size: 10pt;
    }

/*
    border shadow for images
    exclude favicon images
*/

    body.image-border img:not([class*='link-favicon'])
    {2023-11-01 22:18:10
        filter: none;
        border: 3px solid #424242;
        padding: 8px !important;
    }

    .block-language-gist {
        margin-bottom: -50px;
    }
    
/*
    Background color for content when clicking a header and going to that section
*/

    .is-flashing
    {
        background-color: #303030 !important;
    }

    .is-flashing > .cm-header
    {
        padding-left: 15px;
        padding-right: 15px;
    }

/*
    trying to straighten out lists •
*/

    ol
    {
        margin-left: -20px;
    }

    li
    {
        list-style: none;
    }
    
    :not([class*='dataview']) > li::before
    {
        position: relative;
        top: -2px;
        color: #ffb2c5 !important;
        content: "●";
        margin-left: -15px;
        padding-right: 13px;
        background-size: 10px 20px;
        font-size: 7px;
    }

/*
    change dataview tables
*/

    ul.dataview.list-view-ul>li:not(.task-list-item)
    {
        font-size: 14px;
        margin-left: 15px;
    }

    ol.dataview.list-view-ol>li:not(.task-list-item)
    {
        font-size: 14px;
        margin-left: 15px;
    }

/*
    change dataview tables font color for links

    color: #ffb2c5 !important;
*/

    ul.dataview.list-view-ul>li:not(.task-list-item) a
    {
        color: #a5a3ff !important;
    }

    ol.dataview.list-view-ol>li:not(.task-list-item) a
    {
        color: #a5a3ff !important;
    }

    :not(.default-ol-list-marker) .cm-formatting.cm-formatting-list.cm-formatting-list-ol
    {
        margin-left: 0px;
        padding-right: 9px;
    }
    
/*
    requires columns plugin

    creates a column / box with background color
*/

    .wiki_col_right
    {
        border: 1px solid #494949;
        padding: 14px;
        background-color:#2a2a2a;
    }

/*
    table styles
*/

    .left
    {
        float: left;
    }

    .right
    {
        float: right;
    }

    .clear
    {
        clear:both;
    }

    .t_w_30
    {
        width: 30%;
    }

    .t_w_40
    {
        width: 40%;
    }

    .t_w_50
    {
        width: 50%;
    }

/*
    remove padding from columns plugin
*/

    .columnParent, div[data-callout="col"].callout > div.callout-content
    {
        padding: 0px;
    }

/*
    add more padding to the right of a list item
*/

    .list-bullet
    {
        padding-right: 10px;
    }

/*
    table > change header link font-size
*/

    .dataview.table-view-table span a.internal-link
    {
        font-size: 8pt;
    }

/*
    table > change top category column font size
*/

    .dataview.table-view-table .table-view-th
    {
        font-size: 8pt;
    }
    
    .markdown-rendered.show-indentation-guide
    {
        font-size: 11pt;
    }

/*
    Code styler plugin

    add padding between the gutter (line numbers) and the actual code for that line.
*/

    .cm-atom.cm-hmd-codeblock
    {
        padding-left: 10px;
    }

/*
    Code styler plugin

    add padding between the gutter (line numbers) and the actual code for that line.

    original:       calc(12px + var
*/

    .code-styler .markdown-source-view .HyperMD-codeblock:has(.code-styler-line-number) {
        padding-left: calc(20px + var(--language-border-width) + var(--line-number-gutter-width) + var(--line-number-gutter-padding)) !important;
    }


/*
    Code Block and Admonition

    Edit Code Block Icon
*/

    .markdown-source-view.mod-cm6 .edit-block-button
    {
        padding: 0;
        top: 5px;
        border-radius: var(--radius-s);
        right: 10px;
        opacity: 0.3;
    }

/*
    Code Blocks
    Icon to the far right </> which represents "Edit".

    Can be used with FontAwesome SVG files.
    Apply the desired FontAwesome icon to a random folder, inspect element to grab the svg path.
    Paste that svg path inside:
        https://yoksel.github.io/url-encoder/

    Copy the output in the "Take Encoded" box and paste into the CSS below between %3C and svg%3E
    
*/

    .markdown-source-view.mod-cm6 .edit-block-button::before
    {
        width: 24px;
        font-size: 10px;
        text-align: center;
        content: var(--edit-button-icon);
        margin-left: 0em;
        padding: 4px;
        padding-top: 8px;
    }

/*
    Code Blocks
    Icon to the far right </> which represents "Edit".

    same as above, but adjusts opacity.
*/

    .markdown-source-view.mod-cm6 .edit-block-button
    {
        padding: 0;
        top: 0px;
        border-radius: var(--radius-s);
        right: 10px;
        opacity: 0.7;
    }

/*
    Admonition > Warning
*/

    .callout[data-callout="warning"]
    {
        --callout-title-color: var(--callout-type-basic-darkcolor);
        --callout-color: var(--callout-type-basic-lightcolor);
        --callout-icon: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve" fill="#ffffff"><g transform="matrix(15 0 0 15 -5924 -6649.4327)"></g><g transform="matrix(-3.75 0 0 3.75 2295.9997 -3330.35765)"><path stroke="#000000" stroke-miterlimit="10" d="M492.417,955.35h38.25v-62.156l38.25,90.844h-38.25v62.156L492.417,955.35z"></path></g></svg> !important;
    }

/*
    Opengate background color
*/

    .open-gate-view .open-gate-iframe, .open-gate-view .open-gate-webview
    {
        background-color: transparent;
    }

/*
    code block header text color
*/

    .code-styler-header-text
    {
        color: #777777;
    }