Obsidian » Live Preview » Inline block references

lp-inline-embeds.css

/* 
Render embeds inline in Live Preview mode
Source: https://gist.github.com/asdfgeoff/e6116873daa81ae92a6755af1d3c19e5
*/

/***********
BLOCK EMBEDS
************/

/* Make a bunch of block-level elements involved in embed display as inline */
div.is-live-preview div.internal-embed,
div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-block,
div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-block div,
div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-block p {
    display: inline;
}

/* Strip list formatting if referenced block is a list item */
div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-block ul {
    display: inline-block;
    margin: 0px;
    padding-inline-start: 0px;
}

div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-block ul li::marker {
    content: "";
}

div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-block input {
    display: none;
}

/* For embeds on their own line, add padding to match the rest of body */
div.is-live-preview div.cm-content>div.internal-embed {
    padding-left: 4px;
}

/* Make this one inline-block so that link on page-level embeds is still positioned properly */
div.is-live-preview div.internal-embed div.markdown-embed {
    display: inline-block !important;
}

/* Remove the border around *all* markdown embeds */
div.is-live-preview div.internal-embed div.markdown-embed {
    display: inline;
    padding: 0px !important;
    margin: 0px !important;
    border: None;
    /* border-radius: 0px; */
}

/* Dotted bottom border */
div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-block {
    border-bottom: 1px dashed var(--block-ref-color);
}

/* Remove excess space */
div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-block div {
    padding: 0px !important;
}

/* Position link icon inline */
div.is-live-preview div.internal-embed div.markdown-embed-block+div.markdown-embed-link {
    position: relative;
    display: inline;
    top: 0px;
    right: 0px
}

/* Reduce size of link icon */
div.is-live-preview div.markdown-embed-block+div.markdown-embed-link>svg {
    height: 16px;
    width: 16px;
}

/* Hide contents of embed when line is active and in focus */
div.is-live-preview div.cm-focused div.cm-active div.internal-embed {
    display: None !important;
}

/****************
PAGE LEVEL EMBEDS
*****************/

/* Replace border */
div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-page,
div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-heading {
    display: block;
    padding: 4px 20px;
    margin: 0px;
    border: 2px solid var(--background-modifier-border) !important;
    border-radius: 10px;
}

/* Remove title */
div.is-live-preview div.internal-embed div.markdown-embed div.markdown-embed-title {
    display: none;
}

/* Remove excess padding */
div.is-live-preview div.internal-embed div.markdown-embed-heading div.markdown-preview-view,
div.is-live-preview div.internal-embed div.markdown-embed-page div.markdown-preview-view {
    padding: 0px;
}

/* Position link icon inline */
div.is-live-preview div.internal-embed div.markdown-embed-page+div.markdown-embed-link {
    position: absolute;
    display: inline;
    top: 10px;
    right: 20px
}