Flush Inline embeds

1stprinciples · October 28, 2020, 12:40pm

Hello everyone,
I have tried my hand at improving the appearance of the inline block reference embeds using CSS

Screenshots

Current Obsidian version

My version

Description

I have removed the padding and the lines from the top and the bottom to make it look like inline text.
I have changed the colour of the link icon to make it more prominent.
The idea is that I would like the embed to be indistinguishable from an inline text except for the embed link pointing towards the source.

Code

The code resides here

github.com

1stprinciples/Obsidian-hacks/blob/main/Block_reference_embed.css#L1-L34


/* I added this - Code for changing the appearance of 
block reference embeds */

/* Adjust padding on the embed */
.markdown-embed .markdown-preview-view { /* the padding */
    padding: 0px 0px 0px 0px; /* up right down left */
}

/* Adjusting the link icon in the embed */
.markdown-embed-link, .file-embed-link {
    position: absolute;
    top: 0em;
    right: -1em;
    color: var(--block-embed-link-icon);
    cursor: pointer;
}



/* Removing the top and bottom lines */

This file has been truncated. show original

Edit: Some corrections to make the post more accurate

Klaas · October 28, 2020, 11:43am

@1stprinciples: what is the added value to create this now when we have block referencing built into Obs? I am not criticising, just trying to understand.

1stprinciples · October 28, 2020, 11:52am

Hey @Klaas,
Sorry about the confusion. I have updated the post to better reflect what I’m trying to do.

jokysatria · October 28, 2020, 11:54am

Thank you so much. I looked for alternative of naked embed which was broken since 0.9.4.

Klaas · October 28, 2020, 12:10pm

@1stprinciples: no problem. Your correction helped, although @jokysatria’s comment also helps.

I think the confusion arises from your use of the term “block reference”, which is a new feature added to Obs 0.9.6.

1stprinciples · October 28, 2020, 12:17pm

I was consciously referring to embeds for Block references. I created this CSS hack to get flush, inline block references. After your comment, I realise that it also impacts any type of embed (link, header or block reference embed)

Klaas · October 28, 2020, 12:25pm

@1stprinciples: we’re on the same page now. Well done with the code

ishgunacar · October 28, 2020, 2:56pm

looks awesome! And hopefully if we get a way to distinguish between the embeds it will be even more useful. I put a feature request here: CSS classes for each embed type (page, heading, block)

Klaas · October 28, 2020, 4:14pm

@1stprinciples: I don’t know if this is of interest:

/* eliminate scrollbars in transclusions */

.markdown-preview-view .markdown-embed-content, 
.markdown-preview-view .markdown-embed-content>.markdown-preview-view {
  max-height: unset;
}

joeshirley · November 13, 2020, 6:23pm

So glad to have found this - thanks!

Do you have any solutions for also hiding the scrollbars in hover previews?

Klaas · November 13, 2020, 6:25pm

@joeshirley: no, sorry, I don’t.

joeshirley · November 13, 2020, 6:26pm

Ah well. Thanks for letting me know. If I figure out a solution I’ll add it here.

Klaas · November 13, 2020, 6:31pm

@joeshirley: yes, please do because others may find it useful.

Yesterday I published my list of CSS snippets that you might find useful. It is nothing revolutionary, but you might pick up a thing or 2.

joeshirley · November 13, 2020, 7:01pm

Posting a question in Discord to see if anyone has suggestions. BTW, this works great in Publish as well.

matcoudert · January 16, 2021, 5:03pm

hello,
Can I use this with a CSS snippet? Or should I change the css within my theme file please?
thanks for the help.