ncls7615
6 years ago
parent
a9be680807
commit
bb2ca23839
@ -0,0 +1,471 @@ |
||||
.video-error-cover { |
||||
align-items: center; |
||||
background: $base-overlay-background; |
||||
color: $primary-text-color; |
||||
cursor: pointer; |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
justify-content: center; |
||||
margin-top: 8px; |
||||
position: relative; |
||||
text-align: center; |
||||
z-index: 100; |
||||
} |
||||
|
||||
.media-spoiler { |
||||
background: $base-overlay-background; |
||||
color: $ui-primary-color; |
||||
border: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
&:hover, |
||||
&:active, |
||||
&:focus { |
||||
color: lighten($ui-primary-color, 8%); |
||||
} |
||||
|
||||
.status__content > & { |
||||
margin-top: 15px; // Add margin when used bare for NSFW video player |
||||
} |
||||
@include fullwidth-gallery; |
||||
} |
||||
|
||||
.media-spoiler__warning { |
||||
display: block; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.media-spoiler__trigger { |
||||
display: block; |
||||
font-size: 11px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.media-gallery__gifv__label { |
||||
display: block; |
||||
position: absolute; |
||||
color: $primary-text-color; |
||||
background: rgba($base-overlay-background, 0.5); |
||||
bottom: 6px; |
||||
left: 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; |
||||
} |
||||
|
||||
.media-gallery__gifv { |
||||
&.autoplay { |
||||
.media-gallery__gifv__label { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
.media-gallery__gifv__label { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.media-gallery { |
||||
box-sizing: border-box; |
||||
margin-top: 8px; |
||||
overflow: hidden; |
||||
position: relative; |
||||
background: $base-shadow-color; |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
.detailed-status & { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
@include fullwidth-gallery; |
||||
} |
||||
|
||||
.media-gallery__item { |
||||
border: none; |
||||
box-sizing: border-box; |
||||
display: block; |
||||
float: left; |
||||
position: relative; |
||||
|
||||
&.standalone { |
||||
.media-gallery__item-gifv-thumbnail { |
||||
transform: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.media-gallery__item-thumbnail { |
||||
cursor: zoom-in; |
||||
display: block; |
||||
text-decoration: none; |
||||
height: 100%; |
||||
line-height: 0; |
||||
|
||||
&, |
||||
img { |
||||
width: 100%; |
||||
object-fit: contain; |
||||
|
||||
&:not(.letterbox) { |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.media-gallery__gifv { |
||||
height: 100%; |
||||
overflow: hidden; |
||||
position: relative; |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.media-gallery__item-gifv-thumbnail { |
||||
cursor: zoom-in; |
||||
height: 100%; |
||||
width: 100%; |
||||
position: relative; |
||||
z-index: 1; |
||||
object-fit: contain; |
||||
|
||||
&:not(.letterbox) { |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.media-gallery__item-thumbnail-label { |
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ |
||||
clip: rect(1px, 1px, 1px, 1px); |
||||
overflow: hidden; |
||||
position: absolute; |
||||
} |
||||
|
||||
.status__video-player { |
||||
display: flex; |
||||
align-items: center; |
||||
background: $base-shadow-color; |
||||
box-sizing: border-box; |
||||
cursor: default; /* May not be needed */ |
||||
margin-top: 8px; |
||||
overflow: hidden; |
||||
position: relative; |
||||
|
||||
@include fullwidth-gallery; |
||||
} |
||||
|
||||
.status__video-player-video { |
||||
height: 100%; |
||||
object-fit: cover; |
||||
position: relative; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
width: 100%; |
||||
z-index: 1; |
||||
|
||||
&:not(.letterbox) { |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.status__video-player-expand, |
||||
.status__video-player-mute { |
||||
color: $primary-text-color; |
||||
opacity: 0.8; |
||||
position: absolute; |
||||
right: 4px; |
||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; |
||||
} |
||||
|
||||
.status__video-player-spoiler { |
||||
display: none; |
||||
color: $primary-text-color; |
||||
left: 4px; |
||||
position: absolute; |
||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; |
||||
top: 4px; |
||||
z-index: 100; |
||||
|
||||
&.status__video-player-spoiler--visible { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.status__video-player-expand { |
||||
bottom: 4px; |
||||
z-index: 100; |
||||
} |
||||
|
||||
.status__video-player-mute { |
||||
top: 4px; |
||||
z-index: 5; |
||||
} |
||||
|
||||
.video-player { |
||||
overflow: hidden; |
||||
position: relative; |
||||
background: $base-shadow-color; |
||||
max-width: 100%; |
||||
|
||||
.detailed-status & { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
@include fullwidth-gallery; |
||||
|
||||
video { |
||||
height: 100%; |
||||
width: 100%; |
||||
z-index: 1; |
||||
object-fit: cover; |
||||
position: relative; |
||||
} |
||||
|
||||
&.fullscreen { |
||||
width: 100% !important; |
||||
height: 100% !important; |
||||
margin: 0; |
||||
|
||||
video { |
||||
max-width: 100% !important; |
||||
max-height: 100% !important; |
||||
} |
||||
} |
||||
|
||||
&.inline { |
||||
video { |
||||
object-fit: cover; |
||||
position: relative; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
} |
||||
} |
||||
|
||||
&__controls { |
||||
position: absolute; |
||||
z-index: 2; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
box-sizing: border-box; |
||||
background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); |
||||
padding: 0 15px; |
||||
opacity: 0; |
||||
transition: opacity .1s ease; |
||||
|
||||
&.active { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
&.inactive { |
||||
video, |
||||
.video-player__controls { |
||||
visibility: hidden; |
||||
} |
||||
} |
||||
|
||||
&__spoiler { |
||||
display: none; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 4; |
||||
border: 0; |
||||
background: $base-shadow-color; |
||||
color: $ui-primary-color; |
||||
transition: none; |
||||
pointer-events: none; |
||||
|
||||
&.active { |
||||
display: block; |
||||
pointer-events: auto; |
||||
|
||||
&:hover, |
||||
&:active, |
||||
&:focus { |
||||
color: lighten($ui-primary-color, 8%); |
||||
} |
||||
} |
||||
|
||||
&__title { |
||||
display: block; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
&__subtitle { |
||||
display: block; |
||||
font-size: 11px; |
||||
font-weight: 500; |
||||
} |
||||
} |
||||
|
||||
&__buttons-bar { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding-bottom: 10px; |
||||
} |
||||
|
||||
&__buttons { |
||||
font-size: 16px; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
|
||||
&.left { |
||||
button { |
||||
padding-left: 0; |
||||
} |
||||
} |
||||
|
||||
&.right { |
||||
button { |
||||
padding-right: 0; |
||||
} |
||||
} |
||||
|
||||
button { |
||||
background: transparent; |
||||
padding: 2px 10px; |
||||
font-size: 16px; |
||||
border: 0; |
||||
color: rgba($white, 0.75); |
||||
|
||||
&:active, |
||||
&:hover, |
||||
&:focus { |
||||
color: $white; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__time-sep, |
||||
&__time-total, |
||||
&__time-current { |
||||
font-size: 14px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
&__time-current { |
||||
color: $white; |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
&__time-sep { |
||||
display: inline-block; |
||||
margin: 0 6px; |
||||
} |
||||
|
||||
&__time-sep, |
||||
&__time-total { |
||||
color: $white; |
||||
} |
||||
|
||||
&__seek { |
||||
cursor: pointer; |
||||
height: 24px; |
||||
position: relative; |
||||
|
||||
&::before { |
||||
content: ""; |
||||
width: 100%; |
||||
background: rgba($white, 0.35); |
||||
border-radius: 4px; |
||||
display: block; |
||||
position: absolute; |
||||
height: 4px; |
||||
top: 10px; |
||||
} |
||||
|
||||
&__progress, |
||||
&__buffer { |
||||
display: block; |
||||
position: absolute; |
||||
height: 4px; |
||||
border-radius: 4px; |
||||
top: 10px; |
||||
background: lighten($ui-highlight-color, 8%); |
||||
} |
||||
|
||||
&__buffer { |
||||
background: rgba($white, 0.2); |
||||
} |
||||
|
||||
&__handle { |
||||
position: absolute; |
||||
z-index: 3; |
||||
opacity: 0; |
||||
border-radius: 50%; |
||||
width: 12px; |
||||
height: 12px; |
||||
top: 6px; |
||||
margin-left: -6px; |
||||
transition: opacity .1s ease; |
||||
background: lighten($ui-highlight-color, 8%); |
||||
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); |
||||
pointer-events: none; |
||||
|
||||
&.active { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
.video-player__seek__handle { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.detailed, |
||||
&.fullscreen { |
||||
.video-player__buttons { |
||||
button { |
||||
padding-top: 10px; |
||||
padding-bottom: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.media-spoiler-video { |
||||
background-size: cover; |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
cursor: pointer; |
||||
margin-top: 8px; |
||||
position: relative; |
||||
|
||||
@include fullwidth-gallery; |
||||
|
||||
border: 0; |
||||
display: block; |
||||
} |
||||
|
||||
.media-spoiler-video-play-icon { |
||||
border-radius: 100px; |
||||
color: rgba($primary-text-color, 0.8); |
||||
font-size: 36px; |
||||
left: 50%; |
||||
padding: 5px; |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
.sensitive-info { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
position: absolute; |
||||
top: 4px; |
||||
left: 4px; |
||||
z-index: 100; |
||||
} |
||||
|
||||
.sensitive-marker { |
||||
margin: 0 3px; |
||||
border-radius: 2px; |
||||
padding: 2px 6px; |
||||
color: rgba($primary-text-color, 0.8); |
||||
background: rgba($base-overlay-background, 0.5); |
||||
font-size: 12px; |
||||
line-height: 15px; |
||||
text-transform: uppercase; |
||||
opacity: .9; |
||||
transition: opacity .1s ease; |
||||
|
||||
.media-gallery:hover & { opacity: 1 } |
||||
} |
||||
Loading…
Reference in new issue