Fixed: Sensitive media overlay didn't have a visible border in dark mode

This commit is contained in:
Niléane 2023-12-17 16:26:39 +01:00
commit e04d54b7d8
No known key found for this signature in database
3 changed files with 27 additions and 3 deletions

View file

@ -1943,9 +1943,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-radius: 8px; border-radius: 8px;
transition: all .2s; transition: all .2s;
} }
.app-body .spoiler-button:hover + .media-gallery__item > .media-gallery__preview { .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
outline: 1px solid rgba(0, 0, 0, 0.15); outline: 1px solid rgba(0, 0, 0, 0.15);
} }
@media (prefers-color-scheme: dark) {
.app-body .media-gallery__preview {
outline-color: rgba(255, 255, 255, .05);
}
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
outline-color: rgba(255, 255, 255, .1);
}
}
.app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label,
.app-body .spoiler-button__overlay__label:is(:focus, :hover), .app-body .spoiler-button__overlay__label:is(:focus, :hover),
.app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label { .app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label {

View file

@ -1942,9 +1942,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-radius: 8px; border-radius: 8px;
transition: all .2s; transition: all .2s;
} }
.app-body .spoiler-button:hover + .media-gallery__item > .media-gallery__preview { .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
outline: 1px solid rgba(0, 0, 0, 0.15); outline: 1px solid rgba(0, 0, 0, 0.15);
} }
@media (prefers-color-scheme: dark) {
.app-body .media-gallery__preview {
outline-color: rgba(255, 255, 255, .05);
}
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
outline-color: rgba(255, 255, 255, .1);
}
}
.app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label,
.app-body .spoiler-button__overlay__label:is(:focus, :hover), .app-body .spoiler-button__overlay__label:is(:focus, :hover),
.app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label { .app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label {

View file

@ -1942,9 +1942,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-radius: 8px; border-radius: 8px;
transition: all .2s; transition: all .2s;
} }
.app-body .spoiler-button:hover + .media-gallery__item > .media-gallery__preview { .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
outline: 1px solid rgba(0, 0, 0, 0.15); outline: 1px solid rgba(0, 0, 0, 0.15);
} }
@media (prefers-color-scheme: dark) {
.app-body .media-gallery__preview {
outline-color: rgba(255, 255, 255, .05);
}
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
outline-color: rgba(255, 255, 255, .1);
}
}
.app-body .spoiler-button__overlay__label, .app-body .spoiler-button__overlay__label,
.app-body .spoiler-button__overlay__label:is(:focus, :hover), .app-body .spoiler-button__overlay__label:is(:focus, :hover),
.app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label { .app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label {