144 lines
2.4 KiB
SCSS
144 lines
2.4 KiB
SCSS
.media-item {
|
|
display: block;
|
|
float: left;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&.standalone {
|
|
media-item-gifv-thumbnail {
|
|
transform: none;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
&__thumbnail {
|
|
display: block;
|
|
cursor: zoom-in;
|
|
text-decoration: none;
|
|
color: $secondary-text-color;
|
|
line-height: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
&,
|
|
img {
|
|
@include size(100%);
|
|
}
|
|
|
|
img {
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
&__gifv {
|
|
cursor: zoom-in;
|
|
object-fit: cover;
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 1;
|
|
|
|
@include size(100%);
|
|
}
|
|
}
|
|
|
|
.media-gallery {
|
|
box-sizing: border-box;
|
|
margin-top: 8px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
&__preview {
|
|
object-fit: cover;
|
|
z-index: 0;
|
|
background: $base-overlay-background;
|
|
|
|
@include size(100%);
|
|
@include abs-position(0, auto, auto, 0);
|
|
|
|
&--hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__gifv {
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
@include size(100%);
|
|
|
|
&.autoplay {
|
|
.media-gallery__gifv__label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.media-gallery__gifv__label {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
display: block;
|
|
color: $primary-text-color;
|
|
background: rgba($base-overlay-background, 0.5);
|
|
padding: 2px 6px;
|
|
border-radius: 2px;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
opacity: 0.9;
|
|
transition: opacity 0.1s ease;
|
|
|
|
@include text-sizing(11px, 600, 18px);
|
|
@include abs-position(auto, auto, 6px, 6px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.spoiler-button {
|
|
z-index: 100;
|
|
|
|
@include size(100%);
|
|
@include abs-position(0, auto, auto, 0);
|
|
|
|
&--minified {
|
|
display: block;
|
|
|
|
@include size(auto);
|
|
@include abs-position(4px, auto, auto, 4px, false);
|
|
}
|
|
|
|
&--hidden {
|
|
display: none;
|
|
}
|
|
|
|
&__overlay {
|
|
display: block;
|
|
background: transparent;
|
|
border: 0;
|
|
|
|
@include size(100%);
|
|
|
|
&__label {
|
|
display: inline-block;
|
|
background: rgba($base-overlay-background, 0.5);
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
color: $primary-text-color;
|
|
|
|
@include text-sizing(14px, 500);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
.spoiler-button__overlay__label {
|
|
background: rgba($base-overlay-background, 0.8);
|
|
}
|
|
}
|
|
}
|
|
} |