Better Block / Page embed view

Moving Better Block / Page embed view · Issue #1142 · logseq/logseq (github.com) to here since it is more of a feature request

When embedding a page/block the “double dots” are kind of nasty it would be much neater to take the “roam approach on this one”

in LogSeq (double dots highlighted)

in Roam
by default there is no double dots

however hovering on the left hand side
image
and clicking reveals them
image


I did some “research” in roam and it seems purely based on css with just one event when we click like in the 3rd picture, maybe some CSS wizard can take a look ?

1 Like

try this:

/* === hide top bullet in embed-block ===*/
.embed-block .flex-1.flex-row {
	margin-left: -15px; }  /* tweak value to move the top bullet */
.embed-block .block-children {
	border-left : 0px; }  /* hide the first indentation line */
.embed-block .flex-1.flex-row .bullet-container.cursor .bullet {
	background-color: transparent} /* embled-block top bullet */
.embed-block .block-children .flex-1.flex-row .bullet-container.cursor .bullet {
	background-color: var(--ls-block-bullet-color)} /* embled-block children bullets */

didn’t thoroughly tested it … let me know if it breaks stuff

2 Likes

at first sight it looks gold …
will test a bit more

1 Like

Just magic :smiley:

is there a way to toggle enable disable this code? since now it is kinda hard to reach the original block ?

thank you

I use Stylus to manage css snippets : GitHub - openstyles/stylus: Stylus - Userstyles Manager

that works too :smiley: thank you

The solution chosen here doesn’t work for me. Can someone confirm that it is still working with the current version of Logseq?

After some uneducated guessing, everything works when I remove all instances of " .flex-1.flex-row"

Out of curiosity, what is that parameter meant to do?