/* Remove title */
.embed-title{
display: none;
}
/* reduce padding for all embeds - padding (top-right-bottom-left) */
.markdown-embed {
padding: 0 0 0 5px;
}
/* moves list to the left more */
.markdown-source-view.mod-cm6 .internal-embed .task-list-item-checkbox{
margin-inline-start: calc(var(--checkbox-size) * -1.3)
}
/* makes the collapse indicator accessible again (was too far left, cut off by line) */
.markdown-source-view.mod-cm6 .internal-embed .list-collapse-indicator.collapse-indicator.collapse-icon{
margin-inline-start: -2.25em;
}
I wanted a way to try and use checklists in a daily workflow I have without having to rewrite the checklist every day and potentially forgetting things or missing something, but embedding them caused a ton of bulk and just was not easy to look at or parse information from. Even just removing the title or using something like clean-embeds-all.css wouldn’t fix the spacing issue with checklists in particular. I saw a bug post about the checklist embeds being wonky in editor so hopefully this can help anyone else trying to use them in a similar way.
Nice, I recently started working on the same thing, embedding task embeds into daily notes, so I’m definitely going to try this out.
Although I’m pretty happy with this embed snippet by @CKHarwood, after a few tweaks to align the embedded task with non-embedded tasks.
Btw, I made a Templater script for GTD that fetches all tasks tagged #todo/next-action, or → #todo/inbox → #todo/someday-maybe, if no tasks were tagged with the previous tag (or, alternatively, any specific tag to pass to the function).
The matching tasks are presented in a suggester, where I can then choose what to focus on today, or, just make a new task. If I choose an existing task, it gets rescheduled to today’s date as needed, and embedded into the daily note. If the task has no block ID, one gets added to the task to enable embedding.
Just sharing since we seem to have similar visions for our daily note task workflow, or stated otherwise, the same issue to solve.
That is really cool, thanks for sharing! I am currently creating individual notes for each task I have, and then have a checklist for the task breakdown and any references I need for it listed on that note. Then I’m able to just embed those notes into my daily notes template until I finish the task. I plan on just editing my template currently, but for things that shouldn’t take multiple days, what you’re describing sounds extremely useful. I actually haven’t made much use of tags so far (I mainly am just here for the formatting). If you have a link to somewhere I could see that script, I’d love to take a look at it
You make a great point for wanting an embed to align with non-embedded tasks. I kinda want my embeds to still look like embeds (at least currently), which is why I’ve left in the border and a little bit of padding. I’ll definitely check out that thread if I ever want to try and make a version that fully aligns non-embedded and embedded checklists within the editor. I think it could easily be tweaked with what is in the thread you linked or in the clean-embeds-all post to make them fully aligned and seamless.
My main goal was to fix the alignment of the checklists with their indentation guides without changing the current look and spacing of the list itself. What I have now also lets embedded checklists align with embedded lists too. There is still quite a bit of padding on the top and bottom of the embeds, if you want to remove that you can add this:
Not at the moment, unfortunately. I just implemented it, and since it involves three inter-related user scripts, I think I will have to make a demo vault to share it in an accessible way.
The scripts are:
nextActions.js: Can be run with no argument, or passing a specific tag. Returns tasks with some predefined tags, returning the results of the first tag that has tasks associated with it.
toggleList.js: Takes a Dataview task object passed from nextActions (or elsewhere) and can toggle them half-done [/], done [x], or dropped [-], or re-schedule them to a specified date using Tasks plugin syntax. Uses the Tasks API to toggle tasks done.
insertBlockEmbed.js: Takes a Dataview task object passed from nextActions (or elsewhere) and its their block link and block embed link. Adds block IDs as needed.
Anyway, back to the CSS at hand. Personally, I feel it’s less jarring when the embedded tasks are more seamlessly embedded, especially since I’m mostly embedded one task at a time, so I want that to integrate with non-embedded tasks, as mentioned. But your snippet looks very useful for a better representation of embedded task lists. So our embedding workflows are slightly different.
Here’s the one I use (while hovering, otherwise there is no border and shade)
Not perfect. There’s some issues like 1) the scaling of the text (or at least the checkbox) is a bit smaller 2) there is less space between the checkbox and the text 3) the top and bottom padding is a bit different.
Here’s yours (with the adjustment you shared for the margin):
/* clean checklist embeds */
/* Remove title and excess padding for embeds, focusing on checklists */
.embed-title{
display: none;
}
/* all embeds - padding (top-right-bottom-left) */
.markdown-embed {
padding: 0 0 0 0px;
border: none;
}
/* moves list to the left more */
.markdown-source-view.mod-cm6 .internal-embed .task-list-item-checkbox{
margin-inline-start: calc(var(--checkbox-size) * -1.77); /* may need to tweak this number to make it look pixel perfect */
}
/* makes the collapse indicator accessible again (was too far left, cut off by line) */
.markdown-source-view.mod-cm6 .internal-embed .list-collapse-indicator.collapse-indicator.collapse-icon{
margin-inline-start: -2.5em;
}
/* top and bottom padding */
.markdown-source-view.mod-cm6 .internal-embed .contains-task-list{
margin: 0 0 0 0;
}
/* indentation guide position */
.markdown-source-view.mod-cm6 .internal-embed .contains-task-list::before{
margin-inline-start: -.5em; /* may need to tweak this number to make it look pixel perfect */
For me, this is producing this result with the default theme:
I also checked with just pulling one bullet out of the test note I’m doing using a block and that also seemed to work/display as I’d expect.
The only issue I’m finding so far is that the collapse indicator is getting cut off within the embed, but no worse than it was in the default theme, and may not even be an issue for you if you’re only doing single bullets at a time. If certain padding isn’t showing up, I’ve found that I can hard-refresh the css by doing ctrl+shift+i and then clicking inside the inspector and doing ctrl+f5. That would hopefully let it show up, otherwise try testing it with default theme to make sure the theme isn’t for some reason adding padding. Sorry if you already tried this, this is my first time messing with Obsidian like this so that is the only trick I know
Thanks a lot, I ended up adapting this plus some of the other snippet I shared before, plus some of my own tweaks. I’ll share some screenshots when I get the time, but it looks very seamless now, so I’m happy!
