Mark media with alt text missing with text "Alt text missing"

This commit is contained in:
Roni Laukkarinen 2023-03-12 18:38:52 +02:00
parent f98c4fe121
commit c036f16f10
2 changed files with 24 additions and 2 deletions

View File

@ -1,4 +1,4 @@
### 1.1.8rc21: 2023-03-12
### 1.1.8rc22: 2023-03-12
* Remove width hack for mobile
* Add unit tests
@ -18,6 +18,7 @@
* Better Mastodon (Light) support
* Added more elements to the color scopes
* Add border radius to media
* Mark media with alt text missing with text "Alt text missing"
### 1.1.7: 2023-03-11

View File

@ -1,5 +1,5 @@
/* Mastodon Bird UI by @rolle@mementomori.social
v1.1.8rc21 */
v1.1.8rc22 */
/* CSS variables */
:root {
@ -2328,6 +2328,27 @@ a.status-card.compact .status-card__description {
}
/* Fade out media that have no alt text */
.layout-single-column .media-gallery__item-thumbnail::after,
.layout-single-column .audio-player__canvas::after,
.layout-single-column .video-player::after,
.layout-single-column .media-gallery__gifv::after,
.layout-single-column .media-gallery__preview::after {
align-items: center;
color: var(--color-light-text);
content: 'Alt text missing';
display: flex;
font-size: var(--font-size-heading);
font-weight: var(--font-weight-bold);
height: 100%;
justify-content: center;
left: 0;
opacity: .8;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.layout-single-column .media-gallery__item-thumbnail img:not([alt]),
.layout-single-column .audio-player__canvas:not([title]),
.layout-single-column .video-player video:not([title]),