Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Change design of hide media button in web UI (#31807)

Browse source
This commit is contained in:
Eugen Rochko 2024-09-10 11:29:17 +02:00 • committed by GitHub
parent 5260233b81
commit 3929e3c6d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 51 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

60
app/javascript/styles/mastodon/components.scss
View file

@ -4718,22 +4718,14 @@ a.status-card {
position: absolute;
z-index: 100;
&--minified {
display: block;
inset-inline-start: 4px;
top: 4px;
width: auto;
height: auto;
&--hidden {
display: none;
}
&--click-thru {
pointer-events: none;
}
&--hidden {
display: none;
}
&__overlay {
display: flex;
align-items: center;
@ -4745,19 +4737,20 @@ a.status-card {
margin: 0;
border: 0;
color: $white;
line-height: 20px;
font-size: 14px;
&__label {
background-color: rgba($black, 0.45);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
border-radius: 6px;
padding: 10px 15px;
border-radius: 8px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
gap: 4px;
flex-direction: column;
font-weight: 500;
font-size: 14px;
font-weight: 600;
}
&__action {
@ -6838,10 +6831,32 @@ a.status-card {
z-index: 9999;
}
.media-gallery__item__badges {
.media-gallery__actions {
position: absolute;
bottom: 6px;
inset-inline-start: 6px;
inset-inline-end: 6px;
display: flex;
gap: 2px;
z-index: 2;
&__pill {
display: block;
color: $white;
border: 0;
background: rgba($black, 0.65);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
padding: 3px 12px;
border-radius: 99px;
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
}
.media-gallery__item__badges {
position: absolute;
bottom: 8px;
inset-inline-start: 8px;
display: flex;
gap: 2px;
}
@ -6854,18 +6869,13 @@ a.status-card {
color: $white;
background: rgba($black, 0.65);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
padding: 2px 6px;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-size: 12px;
font-weight: 700;
z-index: 1;
pointer-events: none;
line-height: 18px;
.icon {
width: 15px;
height: 15px;
}
line-height: 20px;
}
.attachment-list {