Fix media spoiler design (#6507)

- 4px rounded corners on media attachments
- Better colors/contrast for CW/media spoiler on public pages
- Fix vertical alignment of "Show more" button
- Fix layout jump when unhiding standalone media
th-downstream
Eugen Rochko 7 years ago committed by GitHub
parent fa710fd496
commit a30a207fd2

@ -227,12 +227,8 @@ export default class MediaGallery extends React.PureComponent {
const style = {};
if (this.isStandaloneEligible()) {
if (!visible && width) {
// only need to forcibly set the height in "sensitive" mode
if (width) {
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
} else {
// layout automatically, using image's natural aspect ratio
style.height = '';
}
} else {
// crop the image

@ -686,12 +686,13 @@
background: transparent;
border: 0;
color: lighten($ui-base-color, 8%);
font-weight: 500;
font-weight: 700;
font-size: 11px;
padding: 0 6px;
text-transform: uppercase;
line-height: inherit;
line-height: 20px;
cursor: pointer;
vertical-align: middle;
}
.status__prepend-icon-wrapper {
@ -899,6 +900,11 @@
height: 24px;
margin: -1px 0 0;
}
.status__content__spoiler-link {
line-height: 24px;
margin: -1px 0 0;
}
}
.video-player {
@ -2667,12 +2673,16 @@ a.status-card {
background: $base-overlay-background;
color: $ui-primary-color;
border: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 4px;
appearance: none;
&:hover,
&:active,
&:focus {
padding: 0;
color: lighten($ui-primary-color, 8%);
}
}
@ -2685,7 +2695,7 @@ a.status-card {
.media-spoiler__trigger {
display: block;
font-size: 11px;
font-weight: 500;
font-weight: 700;
}
.spoiler-button {
@ -4091,6 +4101,7 @@ a.status-card {
box-sizing: border-box;
margin-top: 8px;
overflow: hidden;
border-radius: 4px;
position: relative;
width: 100%;
}
@ -4101,6 +4112,8 @@ a.status-card {
display: block;
float: left;
position: relative;
border-radius: 4px;
overflow: hidden;
&.standalone {
.media-gallery__item-gifv-thumbnail {
@ -4113,6 +4126,7 @@ a.status-card {
cursor: zoom-in;
display: block;
text-decoration: none;
color: $ui-secondary-color;
height: 100%;
line-height: 0;

@ -146,10 +146,10 @@
a.status__content__spoiler-link {
color: $primary-text-color;
background: $ui-primary-color;
background: $ui-base-color;
&:hover {
background: lighten($ui-primary-color, 8%);
background: lighten($ui-base-color, 8%);
}
}
}
@ -214,10 +214,10 @@
a.status__content__spoiler-link {
color: $primary-text-color;
background: $ui-primary-color;
background: $ui-base-color;
&:hover {
background: lighten($ui-primary-color, 8%);
background: lighten($ui-base-color, 8%);
}
}
}
@ -260,16 +260,8 @@
}
.media-spoiler {
background: $ui-primary-color;
color: $white;
transition: all 40ms linear;
&:hover,
&:active,
&:focus {
background: darken($ui-primary-color, 2%);
color: unset;
}
background: $ui-base-color;
color: $ui-primary-color;
}
.pre-header {

Loading…
Cancel
Save