WYSIWYG : Adjust Code Mirror Companion

WYSIWYG_Code-Mirror_Companion.css

/* This plugins need to be used with the "Code Mirror Options" Plugins. Only for PC */


/* @settings
name: CodeMirror Companion
id: CM-companion
settings: 
    -
        id: markdown-opacity
        type: variable-number-slider
        default: 0.1
        min: 0
        max: 1
        step: 0.1
        title: Opacity for markdown clutter.
    - 
        id: header-tags
        title: Tags
        description: Change the color for the tags pills.
        type: heading
        level: 1
        collapsed: true
    - 
        id: tag-background-color
        title: Tag Background Color
        type: variable-themed-color
        opacity: true
        format: hex
        default-light: '#80cbee67'
        default-dark: '#80cbee67'
    - 
        id: tag
        title: Tag color font
        type: variable-themed-color
        opacity: true
        format: hex
        default-light: '#1d588f'
        default-dark: '#1d588f'
    - 
        id: tag-border-color
        title: Tag border color 
        type: variable-themed-color
        opacity: true
        format: hex
        default-light: "#0493ec"
        default-dark: "#0493ec"
    -
        id: tag-up
        title: Tag Padding Up
        default: 0
        format: px
        type: variable-number
    -
        id: tag-left
        title: Tag Padding Left
        default: 4
        format: px
        type: variable-number
    -
        id: tag-bottom
        title: Tag Padding Bottom
        default: 4
        format: px
        type: variable-number
    -
        id : header-Blockquote
        title: Blockquote
        type: heading
        description: Active and change the color for the blockquote.
        level: 1
        collapsed: true 
    -
        id: blockquote
        title: Blockquote 
        description: Add nice blockquote. 
        type: class-toggle
    - 
        id: color-blockquote
        title: Blockquote border color
        description: change the blockquote color
        type: variable-themed-color
        opacity: false
        format: hex
        default-light: "#54b6c0"
        default-dark: "#54b6c0"
*/

.theme-dark {
    --tag: #1d588f;
    --tag-background-color: #80cbee67;
    --tag-border-color: #0493ec;
    --bg-blockquote: #ffffff00;
}

.theme-light {
    --tag: #1d588f;
    --tag-background-color: #80cbee67;
    --tag-border-color: #0493ec;
    --bg-blockquote: #ffffff00;
}

:root {
    --task-size: 35px;
    --tag-up: 0px;
    --tag-left: 4px;
    --tag-bottom: 4px;
    --markdown-opacity: 0.1;
    --color-blockquote: #54b6c0;
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-link.cm-list-1.cm-hmd-internal-link.cm-internal-link-url {
    display: none !important;
}

.cm-s-obsidian span.hmd-hidden-token.cm-internal-link-url {
    color: transparent !important;
}

span.cm-string.cm-hmd-frontmatter {
    font-size: revert !important;
}


/* Tags*/

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hashtag-end:before {
    content: "";
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-comment.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-list-1.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta {
    opacity: var(--markdown-opacity) !important;
}

.cm-s-obsidian span.cm-hashtag-end {
    background-color: var(--tag-background-color) !important;
    border: 1px solid var(--tag-border-color) !important;
    color: var(--tag) !important;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 10px;
    height: 30px !important;
    padding: 0 !important;
    z-index: 100 !important;
    font-family: inherit;
}

.tag:not(.kanban-plugin .tag) {
    background-color: var(--tag-background-color) !important;
    border: 1px solid var(--tag-border-color) !important;
    color: var(--tag) !important;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 10px;
    height: 30px !important;
    z-index: 100 !important;
    font-family: inherit;
}

.cm-s-obsidian span.cm-hashtag-end {
    line-height: 30px !important;
    padding: var(--tag-up) var(--tag-left) var(--tag-bottom) !important;
}

.cm-s-obsidian span.cm-hashtag,
.frontmatter-container .tag,
.tag,
span.cm-header.cm-header-1.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag,
span.cm-header.cm-header-2.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin,
span.cm-header.cm-header-3.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag,
span.cm-header.cm-header-4.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag,
span.cm-header.cm-header-5.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag,
span.cm-header.cm-header-6.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag {
    color: var(--text-accent);
}

span.cm-comment.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-Review.lt-underline.lt-major {
    padding-top: calc(var(--tag-up) + 3px) !important;
    padding-bottom: var(--tag-bottom) !important;
    padding-left: calc(var(--tag-left) + 2px) !important;
    padding-right: calc(var(--tag-left) + 2px) !important;
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hashtag-end:hover,
.cm-s-obsidian span.cm-hashtag-end:hover,
.wys-enhanced div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hashtag-end:hover,
a.tag:hover,
.markdown-preview-view a.tag:hover:not(.kanban-plugin .tag) {
    background-color: var(--tag) !important;
    color: #ffffff !important;
}

.markdown-preview-view a.tag:not(.kanban-plugin .tag) {
    color: var(--tag) !important;
    background-color: var(--tag-background-color) !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: calc(var(--tag-left) + 2px) !important;
    padding-right: calc(var(--tag-left) + 2px) !important;
}

.tag {
    padding: 0 !important;
}


/* Header tags */

span.cm-header.cm-header-1.cm-hashtag.cm-meta.cm-hashtag-end {
    padding: 0 5px !important;
    font-size: var(--h1) !important;
    position: relative;
    top: -1px !important;
}

span.cm-header.cm-header-2.cm-hashtag.cm-meta.cm-hashtag-end {
    font-size: var(--h2) !important;
    padding: 0 5px !important;
    position: relative;
    top: -1px !important;
}

span.cm-header.cm-header-3.cm-hashtag.cm-meta.cm-hashtag-end {
    font-size: var(--h3) !important;
    padding: 3px 4px !important;
    position: relative;
    top: -1px !important;
}

span.cm-header.cm-header-4.cm-hashtag.cm-meta.cm-hashtag-end {
    font-size: var(--h4) !important;
    padding: 0px 5px !important;
    position: relative;
    top: -1px !important;
}

span.cm-header.cm-header-5.cm-hashtag.cm-meta.cm-hashtag-end {
    font-size: var(--h5) !important;
    padding: 3px !important;
    position: relative;
    top: -1px !important;
}

span.cm-header.cm-header-6.cm-hashtag.cm-meta.cm-hashtag-end {
    font-size: var(--h6) !important;
    padding-top: 3px !important;
    padding-right: 8px !important;
    position: relative;
    top: -1px !important;
    margin-left: 3px !important;
}


/* Links */

.markdown-preview-view .internal-link,
.markdown-preview-view .external-link,
.cm-s-obsidian span.cm-link,
.cm-s-obsidian span.cm-hmd-internal-link {
    text-decoration: underline;
}


/* HTML */

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag.cm-bracket.cm-hmd-html-begin:not(span.cm-tag.cm-hmd-codeblock),
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag:not(span.cm-tag.cm-hmd-codeblock),
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag.cm-bracket:not(span.cm-tag.cm-hmd-codeblock),
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-attribute:not(span.cm-attribute.cm-hmd-codeblock),
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-string:not(span.cm-string.cm-hmd-codeblock, span.cm-string.cm-hmd-frontmatter, span.cm-templater-command.cm-string),
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-escape:not(span.cm-formatting-escape.cm-hmd-escape-backslash) {
    font-family: monospace;
    font-size: 1px !important;
    letter-spacing: -1ch;
    color: transparent;
}


/* I prefer my line */

.hide-tokens .cm-s-obsidian pre.HyperMD-hr {
    background: revert !important;
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hr:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: var(--background-modifier-border);
    left: 0;
    top: 50%;
}


/* Quote */

.hide-tokens .cm-s-obsidian pre.hmd-inactive-line span.cm-formatting-quote {
    color: transparent !important;
    content: "";
}

.blockquote .HyperMD-quote {
    color: var(--color-blockquote) !important;
}

span.cm-quote.cm-quote-1 {
    color: var(--color-blockquote) !important;
}

pre.HyperMD-quote.HyperMD-quote-1 {
    padding-left: 3em !important;
}

span.suggestion-prefix {
    display: none;
}

.cm-s-obsidian .hmd-inactive-line span.cm-hmd-escape-backslash {
    font-size: var(--editor-font-size) !important;
}