-
-
Save claudioluciano/1c108c5fe7804d3ff393f27667d84971 to your computer and use it in GitHub Desktop.
| :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; | |
| } |
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.
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;
}
Currently the checkbox disappears when editing the line and caret is after the - [#] part:
For people who prefer seeing the checkbox as an indication that it's a "spoiler" line, change:
/* Hide the checkbox */
[data-task="#"]>label {
display: none;
}with
/* Hide the checkbox */
[data-task="#"]:not(.cm-active)>label {
display: none;
}It will show a standard checkbox:
Ideally we'd have a dedicated “sharp / spoiler” icon but that's more work.
Hi there! I’ve made some updates to the snippet to fix this bug and added a smooth transition.