Obsidian - snippet to create spoilers on notes

spoiler_obsidian.css

:root {
    --spoiler-bg-color: rgb(23, 23, 26);
    --spoiler-border-radius: 2px;
    --spoiler-transition-duration: 0.3s;
    --spoiler-transition-timing: ease-in-out;
}

/* Document */

/* Hide the checkbox */
[data-task="#"]>label {
    display: none;
}

/* Spoiler when the line is not active */
[data-task="#"]:not(.cm-active)>.cm-list-1::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--spoiler-bg-color);
    border-radius: var(--spoiler-border-radius);
    transition: opacity var(--spoiler-transition-duration) var(--spoiler-transition-timing);
}

/* Reveal when hovering and the line is not active */
[data-task="#"]:hover:not(.cm-active)>.cm-list-1::before {
    opacity: 0;
}

/* Popover */

/* Hide the checkbox */
.popover [data-task="#"]>input[type="checkbox"] {
    display: none;
}

/* Remove the margin on the left of the spoiler */
.popover [data-task="#"] {
    margin-inline-start: initial;
}

/* Spoiler the line */
.popover [data-task="#"]::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--spoiler-bg-color);
    border-radius: var(--spoiler-border-radius);
    transition: opacity var(--spoiler-transition-duration) var(--spoiler-transition-timing);
}

/* Reveal when hovering */
.popover [data-task="#"]:hover::before {
    opacity: 0;
}

This code is based on this reddit comment

- [#] test

*** For now, it's not work in callout or other blocks

show.mov

Works like charm, but has a bug where if the text flows over the end of the line, it shows a little of the text at the end.

The blocking box shrinks when I change the size of the window.

Edit: Now i realize that it tries to block both lines and if the lines are uneven, it blocks till the end of the second line, that's why the first line overflows.

Works like charm, but has a bug where if the text flows over the end of the line, it shows a little of the text at the end. The blocking box shrinks when I change the size of the window.

Edit: Now i realize that it tries to block both lines and if the lines are uneven, it blocks till the end of the second line, that's why the first line overflows.

Hi there! I’ve made some updates to the snippet to fix this bug and added a smooth transition.

Tested it out, it's perfect!
Now the only problem stays is that when I hover a link to a file with a spoiler tag, the tags show up as checked checkbox, and not a spoiler!

Tested it out, it's perfect! Now the only problem stays is that when I hover a link to a file with a spoiler tag, the tags show up as checked checkbox, and not a spoiler!

Hey, i've update the snippet to cover the popover when you hover a link to another file. (:

You're the most dedicated man alive
Thank you sir, would've given it thousands stars if I found out a glitch how lmao
Have a good day !! :))

You're the most dedicated man alive Thank you sir, would've given it thousands stars if I found out a glitch how lmao Have a good day !! :))

Thanks man, I'm glad you liked it.