Block embeds cleanly / flush about obsidian-theme-ebullientworks

[ebullient]

If I use this as blockref source:

Something here ^blockref-1

Something there ^blockref-2

- List item with kids ^blockref-3
    - Sublist item: Lorem **ipsum** dolor _sit_ amet, **_consectetur_** adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ^blockref-4
- [ ] Task item: An alternate thing ^blockref-5

^blockref-6

Longer block: Lorem **ipsum** dolor _sit_ amet, **_consectetur_** adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ^blockref-7

> Lorem **ipsum** dolor *sit* amet, ***consectetur*** adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
^embed-blockquote

And include those embeds in a list like this (continuing an existing list):

5. ![Something here](#^blockref-1)
6. ![[#^blockref-2]]
7. ![[#^blockref-3]]
8. ![[#^blockref-4]]
9. ![[#^blockref-5]]
10. ![[#^blockref-6]]
11. ![[#^blockref-7]]
12. ![[#^embed-blockquote]]

If I don't use invisible-embed, I see this:

If I use invisible-embed, I see this:

That is with no other snippets or styles.

Are you looking at live preview? And are you planning on using other snippets that provide embed adjustments?

[SemanticBeeng]

Thanks for everything!

[ebullient]

Can you share the source you're using for that image, please?
And also be clear which style settings you're using, and if you have any cssClass values set (and if so, what those snippets contain)?

[SemanticBeeng]

* ![[cosigner#^def|alt=seamless]]
* ![[First Cosigner#^def|alt=seamless]]
* ![[Quorum Cosigner#^def|alt=seamless]]
* ![[Final Cosigner#^def|alt=seamless]]

Using cssclasses: invisible-embed or not renders same way in the sense above.
PS: Latest Obsidian uses cssclasses .

See also SlRvb/Obsidian--ITS-Theme#240 for similar issue and experience and with more details that might help.

Using no other CSS snippets at this time. Tried lots that claimed to fix but did not (no longer) help.

Seems people figured this known issue out but then Obsidian changed. (https://gist.github.com/GitMurf/46c9ae78d6c3ce53d42d7832c7601271?permalink_comment_id=4659156#gistcomment-4659156)

[SemanticBeeng]

Noticed that when embed text is shorter than one line the embed renders "seamless", a desired

(another showing the embed block)

when this version of Block_reference_embed.css is enabled with Anuppucin.

/* 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, .internal-embed-link {
    position: absolute;
    top: 0em;
    right: -1em;
    color: #ebe134;
    cursor: pointer;
}



/* Removing the top and bottom lines */
.markdown-preview-view .markdown-embed, .markdown-preview-view .internal-embed {
    border-top: 0px;
    border-bottom: 0px;
    padding: 0px 0;
    margin: 0px 0;
}


/* Removing duplication of bullets when block referencing a list item
Parent inside a bullet list */
li .markdown-embed ul {
    position: relative;
    margin-left: 0px;
    padding-left: 0px; 
    cursor: alias;
}

/* Child inside a bullet list */
li .markdown-embed ul ul   {
    position: relative;
    margin-left: 0px;
    padding-left: 40px; 
}

/* Task list inside an embed */
li .markdown-embed li.task-list-item {
    position: relative;
    margin-left: 0px;
    padding-left: 0px;

}

/* change background color, to exactly see what’s embedded */
.markdown-preview-view .markdown-embed,
.markdown-preview-view .internal-embed {
  background-color: var(--background-secondary) !important;
}

/* Remove the embed heading */
.embed-title {
  display:none;
}

/* Align embed text with normal text */
.markdown-embed {
  padding-left: 0px;
  border-left: none;
}

/* Highlight the entire embed when hovering */
/* NOTE: Tested approaches to highlight the embed only when hovering
 * over the embed link. These conflicted with other styles and mouse
 * events. I opted for the simpler approach and kept it subtle. */

.markdown-embed:hover {
  backdrop-filter: invert(1%);
  box-shadow: 0 0 1px 3px rgba(136, 136, 136, 0.1);
}

/* Code kindly provided by @zamsyt#4459 on discord */

:is(li, .HyperMD-list-line) > .internal-embed[alt*='^'] {
  display: inline-block;
  vertical-align: middle;
}

.internal-embed[alt*='^'] :is(p, ul, li) {
  margin: 0;   /* This makes spacing top, bottom, and between list items */
  padding: 0.5;  /* Putting this on 0 makes checkboxes and bullets disappear (?) */
}

.internal-embed[alt*='^'] .markdown-embed {
  padding: 0;   /* This doesnt do anything */
}

.internal-embed[alt*='^'] + :is(br, img.cm-widgetBuffer) {
  display: none;   /* Don't know what this does */
}

.internal-embed[alt*='^'] .markdown-embed-link {
  display: none;   /* This hides the link symbol */
  right: -1px;  /* Increasing the number makes the link symbol disappear in the right border */ 
}

Also noticed this embed block frame does not reach the right side of the screen ...

So maybe the issue am facing is caused by this embed bloc being pushed down when reaching the right side of the screen.

Maybe it helps

[SemanticBeeng]

I figured it; all complex block embeds look clean and flush now

Using AnuPpucin theme.
All of the use these two a ![[device-locked key#^def|^ wtall]]

Changed above to top alignment from middle.

/* Code kindly provided by @zamsyt#4459 on discord */

:is(li, .HyperMD-list-line) > .internal-embed[alt*='^'] {
  display: inline-block;
  vertical-align: top; /**from middle;*//
}

And this style makes the block div smaller so it can slide in place (assuming).
https://github.com/SlRvb/Obsidian--ITS-Theme/blob/58900e2ed13b2a2f65a8dee5118fc64421f53fc7/Snippets/S%20-%20Embed%20Adjustments.css#L43-L45

These two extra css sheets are active

Rough explanation.

[ebullient]

Ok. So I've lost track of what you're asking for here.

• Are you asking for support for block reference based styles (wtall, etc)? If that snippet works well with my theme, I think that's a great answer. I think it is safest to allow the ITS theme maintainer to keep evolving those snippets.

• If you're asking for general cleanup of embedded block references inside list items, then I can do that.

[SemanticBeeng]

Are you looking at live preview?

Looking to render and publish in a way that is consistently rendering clean embeds.

And are you planning on using other snippets that provide embed adjustments?

Hmm ... ideally no, would like the embed adjustments to be common, not theme specific.
Now I have to use a few things together to make it work but it is not desireable.

Not sure I understood the questions fully.

[ebullient]

Ok. you opened this issue specifically with a theme.

I don't currently have plans to support |alt=seamless tags, as those are not a default part of Obsidian. ITS (for example) provides a standalone snippet that brings in that function, which should work with other themes (including this one).