mirror of
https://github.com/mastodon/mastodon.git
synced 2024-12-16 23:22:01 +00:00
Improve scss refactor 1
This commit is contained in:
ncls7615
parent
a9be680807
commit
bb2ca23839
|
|
@ -427,31 +427,6 @@
|
||||||
@include fullwidth-gallery;
|
@include fullwidth-gallery;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 }
|
|
||||||
}
|
|
||||||
|
|
||||||
.boost-modal,
|
.boost-modal,
|
||||||
.favourite-modal,
|
.favourite-modal,
|
||||||
.confirmation-modal,
|
.confirmation-modal,
|
||||||
|
|
@ -528,129 +503,3 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-gallery {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-top: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
background: $base-shadow-color;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.detailed-status & {
|
|
||||||
margin-left: -12px;
|
|
||||||
width: calc(100% + 24px);
|
|
||||||
height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include fullwidth-gallery;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-gallery__item-thumbnail {
|
|
||||||
cursor: zoom-in;
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 0;
|
|
||||||
|
|
||||||
&,
|
|
||||||
img {
|
|
||||||
//reset
|
|
||||||
height: initial;
|
|
||||||
object-fit: initial;
|
|
||||||
//glitch
|
|
||||||
width: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
|
|
||||||
&:not(.letterbox) {
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-gallery__gifv {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-gallery__item-gifv-thumbnail {
|
|
||||||
//reset
|
|
||||||
object-fit: initial;
|
|
||||||
top: initial;
|
|
||||||
transform: initial;
|
|
||||||
width: initial;
|
|
||||||
z-index: initial;
|
|
||||||
//glitch
|
|
||||||
cursor: zoom-in;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
object-fit: contain;
|
|
||||||
|
|
||||||
&:not(.letterbox) {
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__video-player {
|
|
||||||
//reset
|
|
||||||
background: initial;
|
|
||||||
//glitch
|
|
||||||
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 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
&:not(.letterbox) {
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-player {
|
|
||||||
//reset
|
|
||||||
border-radius: initial;
|
|
||||||
//glitch
|
|
||||||
.detailed-status & {
|
|
||||||
margin-left: -12px;
|
|
||||||
width: calc(100% + 24px);
|
|
||||||
height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include fullwidth-gallery;
|
|
||||||
|
|
||||||
video {
|
|
||||||
object-fit: cover;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-spoiler-video {
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 8px;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include fullwidth-gallery;
|
|
||||||
|
|
||||||
border: 0;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -2536,46 +2536,6 @@
|
||||||
100% { opacity: 0.25; }
|
100% { opacity: 0.25; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.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%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-spoiler__warning {
|
|
||||||
display: block;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-spoiler__trigger {
|
|
||||||
display: block;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler-button {
|
.spoiler-button {
|
||||||
display: none;
|
display: none;
|
||||||
left: 4px;
|
left: 4px;
|
||||||
|
|
@ -3789,37 +3749,6 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-list {
|
.attachment-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -3870,368 +3799,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Media Gallery */
|
|
||||||
.media-gallery {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-top: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-gallery__gifv {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-gallery__item-gifv-thumbnail {
|
|
||||||
cursor: zoom-in;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-gallery__item-thumbnail-label {
|
|
||||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
|
||||||
clip: rect(1px, 1px, 1px, 1px);
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
/* End Media Gallery */
|
|
||||||
|
|
||||||
/* Status Video Player */
|
|
||||||
.status__video-player {
|
|
||||||
background: $base-overlay-background;
|
|
||||||
box-sizing: border-box;
|
|
||||||
cursor: default; /* May not be needed */
|
|
||||||
margin-top: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__video-player-video {
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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%;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
video {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.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;
|
|
||||||
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%);
|
|
||||||
}
|
|
||||||
/* End Video Player */
|
|
||||||
|
|
||||||
.account-gallery__container {
|
.account-gallery__container {
|
||||||
margin: -2px;
|
margin: -2px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
|
@ -4298,37 +3865,6 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-popout {
|
|
||||||
background: $simple-background-color;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 10px 14px;
|
|
||||||
padding-bottom: 14px;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: $ui-primary-color;
|
|
||||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: $ui-primary-color;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $ui-base-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
noscript {
|
noscript {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
|
@ -4580,5 +4116,7 @@ noscript {
|
||||||
@import 'composer';
|
@import 'composer';
|
||||||
@import 'doodle';
|
@import 'doodle';
|
||||||
@import 'drawer';
|
@import 'drawer';
|
||||||
|
@import 'media';
|
||||||
|
@import 'sensitive';
|
||||||
@import 'emoji_picker';
|
@import 'emoji_picker';
|
||||||
@import 'local_settings';
|
@import 'local_settings';
|
||||||
|
|
|
||||||
471
app/javascript/flavours/glitch/styles/components/media.scss
Normal file
471
app/javascript/flavours/glitch/styles/components/media.scss
Normal file
|
|
@ -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 a new issue