tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add ALT badges to media that has alternative text in web UI

Browse Source 
Port 8131a5b330 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2023-05-02 14:47:04 +02:00
committed by Claire
parent a8939e9098
commit bbd0e9caa6
2 changed files with 43 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/javascript/flavours/glitch/styles/components/media.scss
View File

@ -43,30 +43,25 @@
font-weight: 500;
}
.media-gallery__gifv__label {
display: block;
.media-gallery__item__badges {
position: absolute;
color: $primary-text-color;
background: rgba($base-overlay-background, 0.5);
bottom: 6px;
inset-inline-start: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
z-index: 1;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
display: flex;
gap: 2px;
}
.media-gallery__gifv {
&:hover {
.media-gallery__gifv__label {
opacity: 1;
}
}
.media-gallery__gifv__label {
display: block;
color: $white;
background: rgba($black, 0.65);
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
z-index: 1;
pointer-events: none;
line-height: 18px;
}
.media-gallery {
@ -77,6 +72,10 @@
position: relative;
width: 100%;
min-height: 64px;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
gap: 2px;
@include fullwidth-gallery;
}
@ -85,13 +84,16 @@
border: 0;
box-sizing: border-box;
display: block;
float: left;
position: relative;
border-radius: 4px;
overflow: hidden;
.full-width & {
border-radius: 0;
&--tall {
grid-row: span 2;
}
&--wide {
grid-column: span 2;
}
&.standalone {
@ -101,6 +103,10 @@
}
}
.full-width & {
border-radius: 0;
}
&.letterbox {
background: $base-shadow-color;
}