Skip to content

Instantly share code, notes, and snippets.

@GitMurf

GitMurf/obsidian.live-preview.css.block-ref-inline.css

Last active October 27, 2025 08:27
Show Gist options
  • Save GitMurf/46c9ae78d6c3ce53d42d7832c7601271 to your computer and use it in GitHub Desktop.
Save GitMurf/46c9ae78d6c3ce53d42d7832c7601271 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. GitMurf revised this gist Aug 30, 2022. 1 changed file with 109 additions and 78 deletions.
    187 changes: 109 additions & 78 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,10 @@
    :root {
    --block-ref-line-color: grey; /* #7159de (similar to Obsidian purple) */
    /* #7159de (similar to Obsidian purple) */
    --block-ref-line-color: grey;
    --block-ref-line-type: solid;
    --block-ref-line-size: 2px;
    --block-ref-hover-bg-color: #d4d0d026; /* Set to "inherit" for no bg color */
    /* Set to "inherit" for no bg color */
    --block-ref-hover-bg-color: #d4d0d026;
    }

    /*
    @@ -15,57 +17,67 @@ Live Preview (WYSIWYG Edit mode) inline block refs
    Styling the embed when the reference embed is on its own line (NOT inline)
    This was added due to recent update on 2022_02_18 to include children bullets
    */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed,
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view {
    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed>.markdown-embed,
    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed>.markdown-embed>div>.markdown-preview-view {
    padding: 0px;
    margin: 0px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed {

    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed>.markdown-embed {
    border: none;
    border-radius: 0px;
    padding: 0px 25px 0px 0px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) {

    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed:not(.image-embed) {
    display: flex;
    padding: 0 2px 0 4px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed p {

    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed p {
    margin: 0px;
    text-decoration: underline var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    text-underline-position: under;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p {

    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed:hover p {
    background-color: var(--block-ref-hover-bg-color);
    }

    /* checkboxes in embeds on their own line */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed ul > li > input {
    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed ul>li>input {
    vertical-align: unset;
    top: 2px;
    }

    /* max height change to give more room in the embed */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > div > div.markdown-embed-content.markdown-embed-block {
    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed>div>div.markdown-embed-content.markdown-embed-block {
    max-height: 80vh;
    }

    /* TWO OPTIONS FOR STANDALONE BULLET LIST REFERENCES ON THEIR OWN LINE (NOT INLINE WITH OTHER TEXT)... CHOOSE ONE BELOW BY COMMENTING OUT THE OTHER */
    /* 1) WHEN YOU WANT THE BULLETS TO LOOK SIMILAR TO INLINE REFS WITH COLORED UNDERLINE UNDER EACH BULLET */
    /**/
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer {
    padding-bottom: unset !important;
    min-height: unset !important;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul {
    margin: 0px;
    padding-left: 20px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed li {
    margin: 0px;
    text-decoration: underline var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    text-underline-position: under;
    }
    /**/
    /* 1) WHEN YOU WANT THE BULLETS TO LOOK SIMILAR TO INLINE REFS WITH COLORED UNDERLINE UNDER EACH BULLET */
    /**/
    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer {
    padding-bottom: unset !important;
    min-height: unset !important;
    }

    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed>.markdown-embed>div>.markdown-preview-view>.markdown-preview-sizer.markdown-preview-section>div>ul {
    margin: 0px;
    padding-left: 20px;
    }

    div.is-live-preview :not(.cm-line)>[src*="^"].internal-embed li {
    margin: 0px;
    text-decoration: underline var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    text-underline-position: under;
    }

    /**/

    /* 2) WHEN YOU WANT THE BLOCK REFS ON THEIR OWN LINE TO LOOK MORE LIKE NATIVE EMBEDS BUT JUST LESS WASTED SPACE */
    /*
    /* 2) WHEN YOU WANT THE BLOCK REFS ON THEIR OWN LINE TO LOOK MORE LIKE NATIVE EMBEDS BUT JUST LESS WASTED SPACE */
    /*
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul {
    border: 2px solid var(--background-modifier-border);
    border-radius: 10px;
    @@ -75,17 +87,19 @@ div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > div > div.markd
    */

    /* Removing the children bullets from inline block refs due to recent update 2022_02_18 */
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li:not([data-line="0"]),
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li .list-collapse-indicator {
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer li:not([data-line="0"]),
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer li .list-collapse-indicator {
    display: none;
    }
    div.is-live-preview .cm-line > [src*="^"].internal-embed > div.markdown-embed {

    div.is-live-preview .cm-line>[src*="^"].internal-embed>div.markdown-embed {
    border: none;
    border-radius: 0px;
    }

    /* Set the styling of the line */
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed p,
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed li {
    div.is-live-preview .cm-line>[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed p,
    div.is-live-preview .cm-line>[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed li {
    border-top: none;
    border-left: none;
    border-right: none;
    @@ -106,96 +120,106 @@ div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div
    text-underline-offset: 2px;
    */
    }
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed ol {

    div.is-live-preview .cm-line>[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed ol {
    padding: 0px;
    margin: 0px;
    }

    /* Need to slightly raise list items up or the border is hidden by the line below it (because of the padding-bottom: 2px added above) */
    div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed)>div.markdown-embed {
    bottom: 0px;
    }
    div.is-live-preview .cm-line.HyperMD-list-line.HyperMD-task-line [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {

    div.is-live-preview .cm-line.HyperMD-list-line.HyperMD-task-line [src*="^"].internal-embed:not(.image-embed)>div.markdown-embed {
    bottom: 3px;
    }

    /* Remove margin and padding and set display inline... also remove bullets */
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed),
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    div.is-live-preview .cm-line>[src*="^"].internal-embed:not(.image-embed),
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed,
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content,
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view,
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer,
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer>div,
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer>div>p,
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer>div>div,
    div.is-live-preview .cm-line>[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed>div.markdown-embed-content>div.markdown-preview-view>div.markdown-preview-section ul,
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer ul,
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer li,
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer li>div {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {

    div.is-live-preview [src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer>div>blockquote {
    display: inline-block;
    padding: 0px 0px 4px 5px;
    margin: 0px;
    border: 0 solid var(--interactive-accent);
    border-left-width: 7px;
    }

    /* Account for the extra space added on end of block reference text content (Licat needs to fix) */
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) {
    div.is-live-preview .cm-line>[src*="^"].internal-embed:not(.image-embed) {
    /* Not going to apply this as Licat will fix eventually */
    /*margin-right: -3px;*/
    }

    /* Hide the block ref link unless hovered */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed)>div.markdown-embed>div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }

    /* Show the block ref link on hover */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed)>div.markdown-embed:hover>div.markdown-embed-link {
    display: block;
    width: 90%;
    min-width: 150px;
    max-width: 90%;
    }
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p,
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover li {

    div.is-live-preview .cm-line>[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed:hover p,
    div.is-live-preview .cm-line>[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed:hover li {
    background-color: var(--block-ref-hover-bg-color);
    border-bottom-style: var(--block-ref-line-type);
    /* Using underline instead of border like TfTHacker prefers
    text-decoration-style: var(--block-ref-line-type);
    */
    }

    /* Remove line breaks on multi-line block refs */
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer br {
    /*display: none;*/
    }
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {

    div.is-live-preview .cm-line>[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer li input.task-list-item-checkbox {
    top: 0px;
    vertical-align: middle;
    z-index: 1;
    /* margin-left: revert; */
    margin-left: 0px;
    margin-right: 5px;
    }

    /* For embeds of code blocks */
    .markdown-source-view.mod-cm6.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed pre[class*="language-"] code {
    .markdown-source-view.mod-cm6.is-live-preview .cm-line>[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed pre[class*="language-"] code {
    white-space: pre-wrap;
    word-break: break-word;
    }



    /*
    ***************************************************
    PREVIEW MODE inline block refs
    Works for both CM5 (Legacy) and CM6
    ***************************************************
    */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed {
    border-top: none;
    border-left: none;
    border-right: none;
    @@ -216,23 +240,25 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    text-underline-offset: 2px;
    */
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed),
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {

    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed),
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer>div,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer>div>p,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer>div>div,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer ul,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer li,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer li>div,
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed>div.markdown-embed-content>div.markdown-preview-view>div.markdown-preview-section ul {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {

    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer>div>blockquote {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    @@ -241,32 +267,37 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    border-bottom: none;
    border-right: none;
    }

    /* Hide the block ref link unless hovered */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed>div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }

    /* Show the block ref link on hover */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed:hover>div.markdown-embed-link {
    display: block;
    width: 100%;
    min-width: 150px;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {

    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed)>div.markdown-embed:hover {
    background-color: var(--block-ref-hover-bg-color);
    border-bottom-style: var(--block-ref-line-type);
    /* Using underline instead of border like TfTHacker prefers
    text-decoration-style: var(--block-ref-line-type);
    */
    }

    /* Remove line breaks on multi-line block refs */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer br {
    /*display: none;*/
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {

    div.workspace-leaf-content>div.view-content>div>div.markdown-preview-view>div.markdown-preview-section span[src*="^"].internal-embed>.markdown-embed>.markdown-embed-content>.markdown-preview-view>.markdown-preview-sizer li input.task-list-item-checkbox {
    z-index: 1;
    margin-left: revert;
    }
  2. GitMurf revised this gist Apr 27, 2022. 1 changed file with 20 additions and 4 deletions.
    24 changes: 20 additions & 4 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    :root {
    --block-ref-line-color: #a337ff; /* #7159de (similar to Obsidian purple) */
    --block-ref-line-color: grey; /* #7159de (similar to Obsidian purple) */
    --block-ref-line-type: solid;
    --block-ref-line-size: 2px;
    --block-ref-hover-bg-color: #d4d0d026; /* Set to "inherit" for no bg color */
    @@ -37,7 +37,16 @@ div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed p {
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p {
    background-color: var(--block-ref-hover-bg-color);
    }
    /* TWO OPTIONS... CHOOSE ONE BELOW BY COMMENTING OUT THE OTHER */
    /* checkboxes in embeds on their own line */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed ul > li > input {
    vertical-align: unset;
    top: 2px;
    }
    /* max height change to give more room in the embed */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > div > div.markdown-embed-content.markdown-embed-block {
    max-height: 80vh;
    }
    /* TWO OPTIONS FOR STANDALONE BULLET LIST REFERENCES ON THEIR OWN LINE (NOT INLINE WITH OTHER TEXT)... CHOOSE ONE BELOW BY COMMENTING OUT THE OTHER */
    /* 1) WHEN YOU WANT THE BULLETS TO LOOK SIMILAR TO INLINE REFS WITH COLORED UNDERLINE UNDER EACH BULLET */
    /**/
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer {
    @@ -103,7 +112,10 @@ div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div
    }
    /* Need to slightly raise list items up or the border is hidden by the line below it (because of the padding-bottom: 2px added above) */
    div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    bottom: 1px;
    bottom: 0px;
    }
    div.is-live-preview .cm-line.HyperMD-list-line.HyperMD-task-line [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    bottom: 3px;
    }
    /* Remove margin and padding and set display inline... also remove bullets */
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed),
    @@ -165,14 +177,18 @@ div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .ma
    top: 0px;
    vertical-align: middle;
    z-index: 1;
    margin-left: revert;
    /* margin-left: revert; */
    margin-left: 0px;
    margin-right: 5px;
    }
    /* For embeds of code blocks */
    .markdown-source-view.mod-cm6.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed pre[class*="language-"] code {
    white-space: pre-wrap;
    word-break: break-word;
    }



    /*
    ***************************************************
    PREVIEW MODE inline block refs
  3. GitMurf revised this gist Mar 8, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -126,7 +126,7 @@ div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embe
    display: inline-block;
    padding: 0px 0px 4px 5px;
    margin: 0px;
    border: 0 solid var(--interactive-accent);
    border: 0 solid var(--interactive-accent);
    border-left-width: 7px;
    }
    /* Account for the extra space added on end of block reference text content (Licat needs to fix) */
  4. GitMurf revised this gist Mar 8, 2022. 1 changed file with 5 additions and 7 deletions.
    12 changes: 5 additions & 7 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@ div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed
    padding: 0px 25px 0px 0px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) {
    display: inline-flex;
    display: flex;
    padding: 0 2px 0 4px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed p {
    @@ -122,14 +122,12 @@ div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .ma
    padding: 0px;
    margin: 0px;
    }
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {
    display: inline-block;
    padding: 0px;
    padding: 0px 0px 4px 5px;
    margin: 0px;
    padding-left: 5px;
    border-top: none;
    border-bottom: none;
    border-right: none;
    border: 0 solid var(--interactive-accent);
    border-left-width: 7px;
    }
    /* Account for the extra space added on end of block reference text content (Licat needs to fix) */
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) {
  5. GitMurf revised this gist Mar 8, 2022. 1 changed file with 33 additions and 24 deletions.
    57 changes: 33 additions & 24 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -15,41 +15,55 @@ Live Preview (WYSIWYG Edit mode) inline block refs
    Styling the embed when the reference embed is on its own line (NOT inline)
    This was added due to recent update on 2022_02_18 to include children bullets
    */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer {
    padding-bottom: unset !important;
    min-height: unset !important;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed,
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view {
    padding: 0px;
    margin: 0px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed {
    padding: 10px 25px 10px 15px;
    border: none;
    border-radius: 0px;
    padding: 0px 25px 0px 0px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed {
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) {
    display: inline-flex;
    padding-right: 20px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul {
    margin: 0px;
    padding-left: 20px;
    padding: 0 2px 0 4px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed p,
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed li {
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed p {
    margin: 0px;
    text-decoration: underline var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    text-underline-position: under;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed {
    border: none;
    border-radius: 0px;
    padding: 0px 25px 0px 0px;
    }
    /*div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover :not(li) > ul,*/
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p {
    background-color: var(--block-ref-hover-bg-color);
    }
    /* TWO OPTIONS... CHOOSE ONE BELOW BY COMMENTING OUT THE OTHER */
    /* 1) WHEN YOU WANT THE BULLETS TO LOOK SIMILAR TO INLINE REFS WITH COLORED UNDERLINE UNDER EACH BULLET */
    /**/
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer {
    padding-bottom: unset !important;
    min-height: unset !important;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul {
    margin: 0px;
    padding-left: 20px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed li {
    margin: 0px;
    text-decoration: underline var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    text-underline-position: under;
    }
    /**/

    /* 2) WHEN YOU WANT THE BLOCK REFS ON THEIR OWN LINE TO LOOK MORE LIKE NATIVE EMBEDS BUT JUST LESS WASTED SPACE */
    /*
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul {
    border: 2px solid var(--background-modifier-border);
    border-radius: 10px;
    margin: 0px;
    padding: 10px 20px 10px 35px;
    }
    */

    /* Removing the children bullets from inline block refs due to recent update 2022_02_18 */
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li:not([data-line="0"]),
    @@ -117,11 +131,6 @@ div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .ma
    border-bottom: none;
    border-right: none;
    }
    /* For block refs by themselves on their own line add padding to match normal CodeMirror line .cm-line padding */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) {
    /*display: inline-flex;*/
    padding: 0 2px 0 4px;
    }
    /* Account for the extra space added on end of block reference text content (Licat needs to fix) */
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) {
    /* Not going to apply this as Licat will fix eventually */
  6. GitMurf revised this gist Mar 7, 2022. 1 changed file with 68 additions and 51 deletions.
    119 changes: 68 additions & 51 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,51 +1,68 @@
    :root {
    --block-ref-line-color: green;
    --block-ref-line-color: #a337ff; /* #7159de (similar to Obsidian purple) */
    --block-ref-line-type: solid;
    --block-ref-line-size: 2px;
    --block-ref-hover-bg-color: #a9a9a93d; /* Set to "inherit" for no bg color */
    --block-ref-hover-bg-color: #d4d0d026; /* Set to "inherit" for no bg color */
    }

    /* Removing the children bullets from inline block refs due to recent update 2022_02_18 */
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li:not([data-line="0"]),
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li .list-collapse-indicator {
    display: none;
    }
    /* Styling the embed when using the "children" ALIAS in order to actually show children embeds */
    /* EXAMPLE: ![[note#^cc4b6d|children]] */
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer {
    /*
    ***************************************************
    Live Preview (WYSIWYG Edit mode) inline block refs
    ***************************************************
    */

    /*
    Styling the embed when the reference embed is on its own line (NOT inline)
    This was added due to recent update on 2022_02_18 to include children bullets
    */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer {
    padding-bottom: unset !important;
    min-height: unset !important;
    }
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed,
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed > div > .markdown-preview-view {
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed,
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view {
    padding: 0px;
    margin: 0px;
    }
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed {
    padding: 20px;
    display: inline-flex;
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed {
    padding: 10px 25px 10px 15px;
    }
    div.is-live-preview [src*="^"].internal-embed[alt="children"] {
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed {
    display: inline-flex;
    padding: 10px;
    padding-right: 20px;
    }
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul {
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul {
    margin: 0px;
    padding-left: 20px;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed p,
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed li {
    margin: 0px;
    text-decoration: underline var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    text-underline-position: under;
    }
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed {
    border: none;
    border-radius: 0px;
    padding: 0px 25px 0px 0px;
    }
    /*div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover :not(li) > ul,*/
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p {
    background-color: var(--block-ref-hover-bg-color);
    }

    /*
    ***************************************************
    Live Preview (WYSIWYG Edit mode) inline block refs
    ***************************************************
    */
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > div.markdown-embed {
    /* Removing the children bullets from inline block refs due to recent update 2022_02_18 */
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li:not([data-line="0"]),
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li .list-collapse-indicator {
    display: none;
    }
    div.is-live-preview .cm-line > [src*="^"].internal-embed > div.markdown-embed {
    border: none;
    border-radius: 0px;
    }
    /* Set the styling of the line */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed p,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed li {
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed p,
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed li {
    border-top: none;
    border-left: none;
    border-right: none;
    @@ -66,32 +83,32 @@ div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="childr
    text-underline-offset: 2px;
    */
    }
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed ol {
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed ol {
    padding: 0px;
    margin: 0px;
    }
    /* Need to slightly raise list items up or the border is hidden by the line below it (because of the padding-bottom: 2px added above) */
    div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed {
    div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    bottom: 1px;
    }
    /* Remove margin and padding and set display inline... also remove bullets */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]),
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed),
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    @@ -101,50 +118,50 @@ div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-
    border-right: none;
    }
    /* For block refs by themselves on their own line add padding to match normal CodeMirror line .cm-line padding */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) {
    display: inline-flex;
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) {
    /*display: inline-flex;*/
    padding: 0 2px 0 4px;
    }
    /* Account for the extra space added on end of block reference text content (Licat needs to fix) */
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) {
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) {
    /* Not going to apply this as Licat will fix eventually */
    /*margin-right: -3px;*/
    }
    /* Hide the block ref link unless hovered */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed > div.markdown-embed-link {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }
    /* Show the block ref link on hover */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed:hover > div.markdown-embed-link {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
    width: 90%;
    min-width: 150px;
    max-width: 90%;
    }
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed:hover p,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed:hover li {
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p,
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover li {
    background-color: var(--block-ref-hover-bg-color);
    border-bottom-style: var(--block-ref-line-type);
    /* Using underline instead of border like TfTHacker prefers
    text-decoration-style: var(--block-ref-line-type);
    */
    }
    /* Remove line breaks on multi-line block refs */
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    /*display: none;*/
    }
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    top: 0px;
    vertical-align: middle;
    z-index: 1;
    margin-left: revert;
    }
    /* For embeds of code blocks */
    .markdown-source-view.mod-cm6.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed pre[class*="language-"] code {
    .markdown-source-view.mod-cm6.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed pre[class*="language-"] code {
    white-space: pre-wrap;
    word-break: break-word;
    }
  7. GitMurf revised this gist Feb 20, 2022. 1 changed file with 53 additions and 30 deletions.
    83 changes: 53 additions & 30 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,24 +5,47 @@
    --block-ref-hover-bg-color: #a9a9a93d; /* Set to "inherit" for no bg color */
    }

    /* Removing the children bullets from recent update 2022_02_18 */
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li:not([data-line="0"]),
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li .list-collapse-indicator {
    /* Removing the children bullets from inline block refs due to recent update 2022_02_18 */
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li:not([data-line="0"]),
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li .list-collapse-indicator {
    display: none;
    }
    /* Styling the embed when using the "children" ALIAS in order to actually show children embeds */
    /* EXAMPLE: ![[note#^cc4b6d|children]] */
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer {
    padding-bottom: unset !important;
    min-height: unset !important;
    }
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed,
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed > div > .markdown-preview-view {
    padding: 0px;
    margin: 0px;
    }
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed {
    padding: 20px;
    display: inline-flex;
    }
    div.is-live-preview [src*="^"].internal-embed[alt="children"] {
    display: inline-flex;
    padding: 10px;
    }
    div.is-live-preview [src*="^"].internal-embed[alt="children"] > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul {
    margin: 0px;
    padding-left: 20px;
    }

    /*
    ***************************************************
    Live Preview (WYSIWYG Edit mode) inline block refs
    ***************************************************
    */
    div.is-live-preview [src*="^"].internal-embed > div.markdown-embed {
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > div.markdown-embed {
    border: none;
    border-radius: 0px;
    }
    /* Set the styling of the line */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed p,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed li {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed p,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed li {
    border-top: none;
    border-left: none;
    border-right: none;
    @@ -43,32 +66,32 @@ div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-e
    text-underline-offset: 2px;
    */
    }
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed ol {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed ol {
    padding: 0px;
    margin: 0px;
    }
    /* Need to slightly raise list items up or the border is hidden by the line below it (because of the padding-bottom: 2px added above) */
    div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed {
    bottom: 1px;
    }
    /* Remove margin and padding and set display inline... also remove bullets */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed),
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]),
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    @@ -78,50 +101,50 @@ div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embe
    border-right: none;
    }
    /* For block refs by themselves on their own line add padding to match normal CodeMirror line .cm-line padding */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) {
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) {
    display: inline-flex;
    padding: 0 2px 0 4px;
    }
    /* Account for the extra space added on end of block reference text content (Licat needs to fix) */
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) {
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) {
    /* Not going to apply this as Licat will fix eventually */
    /*margin-right: -3px;*/
    }
    /* Hide the block ref link unless hovered */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }
    /* Show the block ref link on hover */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
    width: 90%;
    min-width: 150px;
    max-width: 90%;
    }
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover li {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed:hover p,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed:hover li {
    background-color: var(--block-ref-hover-bg-color);
    border-bottom-style: var(--block-ref-line-type);
    /* Using underline instead of border like TfTHacker prefers
    text-decoration-style: var(--block-ref-line-type);
    */
    }
    /* Remove line breaks on multi-line block refs */
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    /*display: none;*/
    }
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    div.is-live-preview [src*="^"].internal-embed:not([alt="children"]) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    top: 0px;
    vertical-align: middle;
    z-index: 1;
    margin-left: revert;
    }
    /* For embeds of code blocks */
    .markdown-source-view.mod-cm6.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed pre[class*="language-"] code {
    .markdown-source-view.mod-cm6.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt="children"]) > div.markdown-embed pre[class*="language-"] code {
    white-space: pre-wrap;
    word-break: break-word;
    }
  8. GitMurf revised this gist Feb 19, 2022. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,12 @@
    --block-ref-hover-bg-color: #a9a9a93d; /* Set to "inherit" for no bg color */
    }

    /* Removing the children bullets from recent update 2022_02_18 */
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li:not([data-line="0"]),
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li .list-collapse-indicator {
    display: none;
    }

    /*
    ***************************************************
    Live Preview (WYSIWYG Edit mode) inline block refs
  9. GitMurf revised this gist Jan 18, 2022. 1 changed file with 19 additions and 1 deletion.
    20 changes: 19 additions & 1 deletion obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ Live Preview (WYSIWYG Edit mode) inline block refs
    */
    div.is-live-preview [src*="^"].internal-embed > div.markdown-embed {
    border: none;
    border-radius: 0px;
    border-radius: 0px;
    }
    /* Set the styling of the line */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed p,
    @@ -62,6 +62,15 @@ div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embe
    padding: 0px;
    margin: 0px;
    }
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    padding-left: 5px;
    border-top: none;
    border-bottom: none;
    border-right: none;
    }
    /* For block refs by themselves on their own line add padding to match normal CodeMirror line .cm-line padding */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) {
    display: inline-flex;
    @@ -154,6 +163,15 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    padding: 0px;
    margin: 0px;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    padding-left: 5px;
    border-top: none;
    border-bottom: none;
    border-right: none;
    }
    /* Hide the block ref link unless hovered */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
  10. GitMurf revised this gist Jan 12, 2022. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -37,6 +37,10 @@ div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-e
    text-underline-offset: 2px;
    */
    }
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed ol {
    padding: 0px;
    margin: 0px;
    }
    /* Need to slightly raise list items up or the border is hidden by the line below it (because of the padding-bottom: 2px added above) */
    div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    bottom: 1px;
  11. GitMurf revised this gist Jan 8, 2022. 1 changed file with 57 additions and 6 deletions.
    63 changes: 57 additions & 6 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,32 @@
    :root {
    --block-ref-line-color: green;
    --block-ref-line-type: solid;
    --block-ref-line-size: 1px;
    --block-ref-line-size: 2px;
    --block-ref-hover-bg-color: #a9a9a93d; /* Set to "inherit" for no bg color */
    }


    /*
    ***************************************************
    Live Preview (WYSIWYG Edit mode) inline block refs
    ***************************************************
    */
    div.is-live-preview [src*="^"].internal-embed > div.markdown-embed {
    border: none;
    border-radius: 0px;
    }
    /* Set the styling of the line */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed p,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed li {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;
    border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    padding: 0px;
    margin: 0px;
    padding-bottom: 2px;

    /* Using underline instead of border like TfTHacker prefers
    border: none;
    border-radius: unset;
    text-decoration-color: var(--block-ref-line-color);
    @@ -21,9 +35,14 @@ div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-e
    text-decoration-line: underline;
    text-underline-position: under;
    text-underline-offset: 2px;
    */
    }
    /* Need to slightly raise list items up or the border is hidden by the line below it (because of the padding-bottom: 2px added above) */
    div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    bottom: 1px;
    }
    /* Remove margin and padding and set display inline... also remove bullets */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt*="95"]),
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed),
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    @@ -39,6 +58,16 @@ div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embe
    padding: 0px;
    margin: 0px;
    }
    /* For block refs by themselves on their own line add padding to match normal CodeMirror line .cm-line padding */
    div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) {
    display: inline-flex;
    padding: 0 2px 0 4px;
    }
    /* Account for the extra space added on end of block reference text content (Licat needs to fix) */
    div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) {
    /* Not going to apply this as Licat will fix eventually */
    /*margin-right: -3px;*/
    }
    /* Hide the block ref link unless hovered */
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    @@ -54,9 +83,13 @@ div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-e
    min-width: 150px;
    max-width: 90%;
    }
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover li {
    background-color: var(--block-ref-hover-bg-color);
    border-bottom-style: var(--block-ref-line-type);
    /* Using underline instead of border like TfTHacker prefers
    text-decoration-style: var(--block-ref-line-type);
    */
    }
    /* Remove line breaks on multi-line block refs */
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    @@ -68,7 +101,11 @@ div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embe
    z-index: 1;
    margin-left: revert;
    }

    /* For embeds of code blocks */
    .markdown-source-view.mod-cm6.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed pre[class*="language-"] code {
    white-space: pre-wrap;
    word-break: break-word;
    }

    /*
    ***************************************************
    @@ -77,6 +114,16 @@ Works for both CM5 (Legacy) and CM6
    ***************************************************
    */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;
    border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    padding: 0px;
    margin: 0px;
    padding-bottom: 2px;

    /* Using underline instead of border like TfTHacker prefers
    border: none;
    border-radius: unset;
    text-decoration-color: var(--block-ref-line-color);
    @@ -85,6 +132,7 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    text-decoration-line: underline;
    text-underline-position: under;
    text-underline-offset: 2px;
    */
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed),
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed,
    @@ -118,7 +166,10 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    background-color: var(--block-ref-hover-bg-color);
    border-bottom-style: var(--block-ref-line-type);
    /* Using underline instead of border like TfTHacker prefers
    text-decoration-style: var(--block-ref-line-type);
    */
    }
    /* Remove line breaks on multi-line block refs */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
  12. GitMurf revised this gist Nov 20, 2021. 1 changed file with 20 additions and 19 deletions.
    39 changes: 20 additions & 19 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ Live Preview (WYSIWYG Edit mode) inline block refs
    ***************************************************
    */
    /* Set the styling of the line */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    border: none;
    border-radius: unset;
    text-decoration-color: var(--block-ref-line-color);
    @@ -23,45 +23,46 @@ div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdo
    text-underline-offset: 2px;
    }
    /* Remove margin and padding and set display inline... also remove bullets */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed):not([alt*="95"]),
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed):not([alt*="95"]),
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    /* Hide the block ref link unless hovered */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }
    /* Show the block ref link on hover */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
    width: 100%;
    width: 90%;
    min-width: 150px;
    max-width: 90%;
    }
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    background-color: var(--block-ref-hover-bg-color);
    text-decoration-style: var(--block-ref-line-type);
    }
    /* Remove line breaks on multi-line block refs */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    /*display: none;*/
    }
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    top: 0px;
    vertical-align: middle;
    z-index: 1;
  13. GitMurf revised this gist Nov 16, 2021. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -65,6 +65,7 @@ div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-
    top: 0px;
    vertical-align: middle;
    z-index: 1;
    margin-left: revert;
    }


    @@ -124,4 +125,5 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    z-index: 1;
    margin-left: revert;
    }
  14. GitMurf revised this gist Nov 16, 2021. 1 changed file with 0 additions and 83 deletions.
    83 changes: 0 additions & 83 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -124,87 +124,4 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    z-index: 1;
    }







    /*
    ***************************************************
    ***************************************************
    ***************************************************
    IGNORE BELOW WHEN UPDATING CODE IN PUBLIC GIST
    ***************************************************
    ***************************************************
    ***************************************************
    */

    /*
    ***************************************************
    CM5 (Legacy)
    This is for Edit mode using CM Options plugin
    ***************************************************
    */

    /* CM Options block, header, and page references */
    div.markdown-source-view.mod-cm5 .CodeMirror-widget span.rendered-inline-embed.embed-type-block span.internal-embed div.markdown-embed,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed {
    border: none;
    border-radius: unset;
    text-decoration-color: var(--block-ref-line-color);
    text-decoration-style: var(--block-ref-line-type);
    text-decoration-thickness: var(--block-ref-line-size);
    text-decoration-line: underline;
    text-underline-position: under;
    text-underline-offset: 2px;
    }
    div.markdown-source-view.mod-cm5 .cm-s-obsidian .CodeMirror-widget .rendered-inline-embed:hover {
    border-color: transparent;
    }
    /* CM Options block ref embed on its own line */
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed),
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
    display: inline;
    padding: 0px !important;
    margin: 0px !important;
    }
    /* Hide the block ref link unless hovered */
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }
    /* Show the block ref link on hover */
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
    width: 100%;
    height: 100%;
    }
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed:hover,
    div.markdown-source-view.mod-cm5 .CodeMirror-widget span.rendered-inline-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed:hover {
    background-color: var(--block-ref-hover-bg-color);
    text-decoration-style: var(--block-ref-line-type);
    }
    /* PLACEHOLDER EXAMPLE to target just Header embeds and not block ref or page embed */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section [src*="#"].internal-embed:not([src*="#^"]) {
    /*border: 2px solid lime;*/
    }
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox,
    div.markdown-source-view.mod-cm5 .CodeMirror-widget span.rendered-inline-embed.embed-type-block span.internal-embed:not(.image-embed) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    z-index: 1;
    }
  15. GitMurf revised this gist Nov 16, 2021. 1 changed file with 116 additions and 34 deletions.
    150 changes: 116 additions & 34 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,35 +13,29 @@ Live Preview (WYSIWYG Edit mode) inline block refs
    */
    /* Set the styling of the line */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;
    border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    padding: 0px;
    margin: 0px;
    padding-bottom: 2px;
    }
    /* Remove margin and padding and set display inline */
    border: none;
    border-radius: unset;
    text-decoration-color: var(--block-ref-line-color);
    text-decoration-style: var(--block-ref-line-type);
    text-decoration-thickness: var(--block-ref-line-size);
    text-decoration-line: underline;
    text-underline-position: under;
    text-underline-offset: 2px;
    }
    /* Remove margin and padding and set display inline... also remove bullets */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed):not([alt*="95"]),
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    /* Convert bullet list block refs inline (removing the bullet) */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    display: inline;
    }
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
    padding: 0px;
    margin: 0px;
    }
    @@ -60,13 +54,18 @@ div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdo
    min-width: 150px;
    }
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    border-bottom-style: var(--block-ref-line-type);
    background-color: var(--block-ref-hover-bg-color);
    text-decoration-style: var(--block-ref-line-type);
    }
    /* Remove line breaks on multi-line block refs */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    /*display: none;*/
    }
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    top: 0px;
    vertical-align: middle;
    z-index: 1;
    }


    /*
    @@ -76,11 +75,14 @@ Works for both CM5 (Legacy) and CM6
    ***************************************************
    */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    border-top: none;
    border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    padding: 0px;
    margin: 0px;
    padding-bottom: 2px;
    border: none;
    border-radius: unset;
    text-decoration-color: var(--block-ref-line-color);
    text-decoration-style: var(--block-ref-line-type);
    text-decoration-thickness: var(--block-ref-line-size);
    text-decoration-line: underline;
    text-underline-position: under;
    text-underline-offset: 2px;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed),
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed,
    @@ -89,18 +91,12 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    /* Convert bullet list block refs inline (remove the bullet) */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    display: inline;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    @@ -119,10 +115,96 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    min-width: 150px;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    border-bottom-style: var(--block-ref-line-type);
    background-color: var(--block-ref-hover-bg-color);
    text-decoration-style: var(--block-ref-line-type);
    }
    /* Remove line breaks on multi-line block refs */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    /*display: none;*/
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    z-index: 1;
    }







    /*
    ***************************************************
    ***************************************************
    ***************************************************
    IGNORE BELOW WHEN UPDATING CODE IN PUBLIC GIST
    ***************************************************
    ***************************************************
    ***************************************************
    */

    /*
    ***************************************************
    CM5 (Legacy)
    This is for Edit mode using CM Options plugin
    ***************************************************
    */

    /* CM Options block, header, and page references */
    div.markdown-source-view.mod-cm5 .CodeMirror-widget span.rendered-inline-embed.embed-type-block span.internal-embed div.markdown-embed,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed {
    border: none;
    border-radius: unset;
    text-decoration-color: var(--block-ref-line-color);
    text-decoration-style: var(--block-ref-line-type);
    text-decoration-thickness: var(--block-ref-line-size);
    text-decoration-line: underline;
    text-underline-position: under;
    text-underline-offset: 2px;
    }
    div.markdown-source-view.mod-cm5 .cm-s-obsidian .CodeMirror-widget .rendered-inline-embed:hover {
    border-color: transparent;
    }
    /* CM Options block ref embed on its own line */
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed),
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div,
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
    display: inline;
    padding: 0px !important;
    margin: 0px !important;
    }
    /* Hide the block ref link unless hovered */
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }
    /* Show the block ref link on hover */
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
    width: 100%;
    height: 100%;
    }
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed:hover,
    div.markdown-source-view.mod-cm5 .CodeMirror-widget span.rendered-inline-embed.embed-type-block span.internal-embed:not(.image-embed) > div.markdown-embed:hover {
    background-color: var(--block-ref-hover-bg-color);
    text-decoration-style: var(--block-ref-line-type);
    }
    /* PLACEHOLDER EXAMPLE to target just Header embeds and not block ref or page embed */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section [src*="#"].internal-embed:not([src*="#^"]) {
    /*border: 2px solid lime;*/
    }
    div.markdown-source-view.mod-cm5 div.CodeMirror-linewidget.rendered-block-embed div.rendered-embed.embed-type-block span.internal-embed:not(.image-embed) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox,
    div.markdown-source-view.mod-cm5 .CodeMirror-widget span.rendered-inline-embed.embed-type-block span.internal-embed:not(.image-embed) > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox {
    z-index: 1;
    }
  16. GitMurf revised this gist Nov 16, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    :root {
    --block-ref-line-color: green;
    --block-ref-line-type: solid;
    --block-ref-line-size: 2px;
    --block-ref-line-size: 1px;
    --block-ref-hover-bg-color: #a9a9a93d; /* Set to "inherit" for no bg color */
    }

  17. GitMurf revised this gist Nov 16, 2021. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    --block-ref-line-color: green;
    --block-ref-line-type: solid;
    --block-ref-line-size: 2px;
    --block-ref-hover-bg-color: inherit; /* Set to "inherit" for no bg color */
    --block-ref-hover-bg-color: #a9a9a93d; /* Set to "inherit" for no bg color */
    }


    @@ -20,6 +20,7 @@ div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdo
    border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    padding: 0px;
    margin: 0px;
    padding-bottom: 2px;
    }
    /* Remove margin and padding and set display inline */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed):not([alt*="95"]),
    @@ -79,6 +80,7 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    padding: 0px;
    margin: 0px;
    padding-bottom: 2px;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed),
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed,
  18. GitMurf revised this gist Nov 16, 2021. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    --block-ref-line-color: green;
    --block-ref-line-type: solid;
    --block-ref-line-size: 2px;
    --block-ref-bg-color: inherit; /* Set to "inherit" for no bg color */
    --block-ref-hover-bg-color: inherit; /* Set to "inherit" for no bg color */
    }


    @@ -60,7 +60,7 @@ div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdo
    }
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    border-bottom-style: var(--block-ref-line-type);
    background-color: var(--block-ref-bg-color);
    background-color: var(--block-ref-hover-bg-color);
    }
    /* Remove line breaks on multi-line block refs */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    @@ -118,7 +118,7 @@ div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    border-bottom-style: var(--block-ref-line-type);
    background-color: var(--block-ref-bg-color);
    background-color: var(--block-ref-hover-bg-color);
    }
    /* Remove line breaks on multi-line block refs */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
  19. GitMurf revised this gist Nov 16, 2021. 1 changed file with 77 additions and 9 deletions.
    86 changes: 77 additions & 9 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,28 @@
    /* Live preview inline block refs */
    :root {
    --block-ref-color: green;
    --block-ref-bg-color: #a9a9a93d;
    --block-ref-line-color: green;
    --block-ref-line-type: solid;
    --block-ref-line-size: 2px;
    --block-ref-bg-color: inherit; /* Set to "inherit" for no bg color */
    }


    /*
    ***************************************************
    Live Preview (WYSIWYG Edit mode) inline block refs
    ***************************************************
    */
    /* Set the styling of the line */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;
    border-bottom: 2px var(--block-ref-line-type) var(--block-ref-color);
    border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    padding: 0px;
    margin: 0px;
    }
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed),
    /* Remove margin and padding and set display inline */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed):not([alt*="95"]),
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    @@ -25,7 +34,7 @@ div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-
    padding: 0px;
    margin: 0px;
    }
    /* Convert bullet list block refs inline (remove the bullet) */
    /* Convert bullet list block refs inline (removing the bullet) */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    @@ -47,12 +56,71 @@ div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdo
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
    width: 100%;
    min-width: 200px;
    min-width: 150px;
    }
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    border-bottom-style: var(--block-ref-line-type);
    background-color: var(--block-ref-bg-color);
    }
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section {
    min-height: 0px !important;
    /* Remove line breaks on multi-line block refs */
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    /*display: none;*/
    }


    /*
    ***************************************************
    PREVIEW MODE inline block refs
    Works for both CM5 (Legacy) and CM6
    ***************************************************
    */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    border-top: none;
    border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color);
    padding: 0px;
    margin: 0px;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed),
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    /* Convert bullet list block refs inline (remove the bullet) */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    display: inline;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
    padding: 0px;
    margin: 0px;
    }
    /* Hide the block ref link unless hovered */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }
    /* Show the block ref link on hover */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
    width: 100%;
    min-width: 150px;
    }
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    border-bottom-style: var(--block-ref-line-type);
    background-color: var(--block-ref-bg-color);
    }
    /* Remove line breaks on multi-line block refs */
    div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    /*display: none;*/
    }
  20. GitMurf revised this gist Nov 13, 2021. 1 changed file with 19 additions and 17 deletions.
    36 changes: 19 additions & 17 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,10 @@
    /* Live preview inline block refs */
    :root {
    --block-ref-color: green;
    --block-ref-bg-color: #a9a9a93d;
    --block-ref-line-type: solid;
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed {
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    border-top: none;
    border-left: none;
    border-right: none;
    @@ -12,45 +13,46 @@ div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed {
    padding: 0px;
    margin: 0px;
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed),
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div {
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed),
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    /* Convert bullet list block refs inline (remove the bullet) */
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    display: inline;
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
    padding: 0px;
    margin: 0px;
    }
    /* Hide the block ref link unless hovered */
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }
    /* Show the block ref link on hover */
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
    width: 100%;
    min-width: 200px;
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed:hover {
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    border-bottom-style: var(--block-ref-line-type);
    background-color: var(--block-ref-bg-color);
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section {
    div.mod-cm6 div.cm-line [alt*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section {
    min-height: 0px !important;
    }
  21. GitMurf created this gist Nov 11, 2021.
    56 changes: 56 additions & 0 deletions obsidian.live-preview.css.block-ref-inline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    /* Live preview inline block refs */
    :root {
    --block-ref-color: green;
    --block-ref-line-type: solid;
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;
    border-bottom: 2px var(--block-ref-line-type) var(--block-ref-color);
    padding: 0px;
    margin: 0px;
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed),
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div {
    display: inline;
    padding: 0px;
    margin: 0px;
    }
    /* Convert bullet list block refs inline (remove the bullet) */
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
    div.mod-cm6 div.cm-line .internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    display: inline;
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
    padding: 0px;
    margin: 0px;
    }
    /* Hide the block ref link unless hovered */
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    color: transparent;
    top: 0px;
    left: 0px;
    right: unset;
    }
    /* Show the block ref link on hover */
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
    width: 100%;
    min-width: 200px;
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed:hover {
    border-bottom-style: var(--block-ref-line-type);
    }
    div.mod-cm6 div.cm-line .internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section {
    min-height: 0px !important;
    }