hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow setting spoiler styles via image URL

Browse Source
This commit is contained in:
daudix
2024-09-11 15:52:22 +03:00
parent 1f613d70ab
commit 0eecabb271
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
content/demo/index.md
View File

@ -613,6 +613,8 @@ When set on an image:
<img class="spoiler" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" /> <img class="spoiler" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" />
URL anchor `#spoiler` can be used for this as well.
With `solid` class: With `solid` class:
```html ```html
@ -621,6 +623,8 @@ With `solid` class:
<img class="spoiler solid" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" /> <img class="spoiler solid" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" />
URL anchor `#solid` can be used for this as well.
### Buttons Dialog ### Buttons Dialog
```html.j2 ```html.j2

10
sass/_spoiler.scss
View File

@ -1,4 +1,4 @@
.spoiler { span.spoiler {
filter: blur(0.25rem); filter: blur(0.25rem);
transition: var(--transition); transition: var(--transition);
@ -21,11 +21,11 @@
} }
} }
img.spoiler { img.spoiler,
img[src*="#spoiler"] {
opacity: var(--disabled); opacity: var(--disabled);
clip-path: inset(0% 0% 0% 0% round var(--rounded-corner)); clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
filter: blur(1rem); filter: blur(1rem);
transition: var(--transition-longer);
&:hover, &:hover,
&:active { &:active {
@ -34,11 +34,11 @@ img.spoiler {
filter: none; filter: none;
} }
&.solid { &.solid,
&[src*="#solid"] {
clip-path: none; clip-path: none;
filter: brightness(0%); filter: brightness(0%);
box-shadow: none; box-shadow: none;
border-radius: var(--rounded-corner);
&:hover, &:hover,
&:active { &:active {