diff --git a/content/demo/index.md b/content/demo/index.md index f51dd20..318737e 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -613,6 +613,8 @@ When set on an image: +URL anchor `#spoiler` can be used for this as well. + With `solid` class: ```html @@ -621,6 +623,8 @@ With `solid` class: +URL anchor `#solid` can be used for this as well. + ### Buttons Dialog ```html.j2 diff --git a/sass/_spoiler.scss b/sass/_spoiler.scss index d380288..fcd63c7 100644 --- a/sass/_spoiler.scss +++ b/sass/_spoiler.scss @@ -1,4 +1,4 @@ -.spoiler { +span.spoiler { filter: blur(0.25rem); transition: var(--transition); @@ -21,11 +21,11 @@ } } -img.spoiler { +img.spoiler, +img[src*="#spoiler"] { opacity: var(--disabled); clip-path: inset(0% 0% 0% 0% round var(--rounded-corner)); filter: blur(1rem); - transition: var(--transition-longer); &:hover, &:active { @@ -34,11 +34,11 @@ img.spoiler { filter: none; } - &.solid { + &.solid, + &[src*="#solid"] { clip-path: none; filter: brightness(0%); box-shadow: none; - border-radius: var(--rounded-corner); &:hover, &:active {