Last active
August 17, 2025 18:47
-
-
Save claudioluciano/1c108c5fe7804d3ff393f27667d84971 to your computer and use it in GitHub Desktop.
Obsidian - snippet to create spoilers on notes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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; | |
| } |
Author
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.
I had an issue (macOS) where the spoiler blocks were covering the entire line width instead of just the text content.
Fix: Made the spoiler containers inline-block to fit content width and added padding for better right-hand spacing to match the space added by content: ' ':
/* Document */
[data-task="#"] .cm-list-1 {
display: inline-block;
position: relative;
padding-right: 0.1ch;
}
/* Popover */
.popover [data-task="#"] {
margin-inline-start: initial;
display: inline-block;
position: relative;
padding-right: 0.1ch;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 !! :))