add image spoilers

This commit is contained in:
MathMan05 2025-04-02 10:49:06 -05:00
parent 54416197de
commit ea7769ce85
6 changed files with 131 additions and 6 deletions

View file

@ -36,6 +36,7 @@ body {
flex-grow: 0;
flex-shrink: 0;
height: 52px;
position: relative;
* {
margin: 2px;
@ -333,6 +334,12 @@ textarea {
display: block;
mask-size: cover !important;
}
.svg-spoiler {
mask: url(/icons/spoiler.svg);
}
.svg-unspoiler {
mask: url(/icons/unspoiler.svg);
}
.svg-soundMore {
mask: url(/icons/soundMore.svg);
}
@ -1094,6 +1101,7 @@ span.instanceStatus {
}
.messageimgdiv {
height: 100%;
position: relative;
}
.messageimg {
height: 100%;
@ -1223,6 +1231,29 @@ span.instanceStatus {
.messagediv:hover {
background: var(--primary-hover);
}
.fSpoil {
position: absolute;
top: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(20px);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: backdrop-filter 0.4s;
span {
background: var(--spoiler-bg);
padding: 3px 6px;
border-radius: 6px;
}
}
.fSpoil:hover {
backdrop-filter: blur(15px);
span {
background: var(--spoiler-hover);
}
}
.messageButtons,
.controls {
position: absolute;
@ -1262,6 +1293,7 @@ span.instanceStatus {
top: 6px;
right: 6px;
box-shadow: 0 0 1.5px var(--primary-text-soft);
z-index: 1;
}
.message {
padding-right: 28px;
@ -1603,6 +1635,7 @@ img.bigembedimg {
padding: 4px;
background: var(--secondary-bg);
border-radius: 4px;
position: relative;
}
.acceptinvbutton {
width: calc(100% - 24px);