Fixed empty previews in Chrome (npm build)

This commit is contained in:
Богданов Сергей 2024-01-09 21:44:00 +00:00
parent ed0c0502a6
commit 7364246b69
3 changed files with 127 additions and 125 deletions

View file

@ -61,8 +61,8 @@
/* SPACES */
/* ANIMATIONS */
/* FUNCTIONS */
/*@function calc_($expression) {
@return $expression;
/*@function calc_($expression) {
@return $expression;
}*/
/* ANIMATION KEYFRAMES */
@keyframes onHoverFullscreenToggle {
@ -232,11 +232,11 @@
outline-color: rgba(0, 0, 0, 0);
outline-color: transparent;
/* Doesn't work properly in Safari browser.*/
/*&.vjs-loading-video {
video {
opacity: 0;
visibility: hidden;
}
/*&.vjs-loading-video {
video {
opacity: 0;
visibility: hidden;
}
}*/ }
.video-js.vjs-mediacms video {
width: 100%;
@ -321,11 +321,11 @@
display: none;
font-size: 0.8125em;
z-index: +1;
/*display:block;
opacity: 0;
height:0;
visibility: hidden;
@include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
/*display:block;
opacity: 0;
height:0;
visibility: hidden;
@include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
will-change:height;*/ }
.video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button'] {
position: relative; }
@ -337,8 +337,8 @@
outline: 0; }
.video-js.vjs-mediacms .vjs-settings-panel.vjs-visible-panel {
display: block;
/*opacity: 1;
visibility: visible;
/*opacity: 1;
visibility: visible;
height:auto;*/ }
.video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-panel-inner {
display: block;
@ -679,7 +679,7 @@
.video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
transition: width 0.2s linear;
transition-delay: 0.15s;
/* transition: width 0s linear;
/* transition: width 0s linear;
transition-delay: 0s; */ }
.video-js.vjs-mediacms .vjs-actions-anim {
-webkit-user-select: none;
@ -986,31 +986,31 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
/*@-moz-document url-prefix() {
position: relative;
padding-right: $font-size * 1.1;
overflow: hidden;
&:before {
background-color: $bg-color;
bottom: 0;
position: absolute;
right: 0;
float: right;
text-align:right;
content: '\2026';
width: $font-size * 1.1;
}
&:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: +1;
background: $bg-color;
}
/*@-moz-document url-prefix() {
position: relative;
padding-right: $font-size * 1.1;
overflow: hidden;
&:before {
background-color: $bg-color;
bottom: 0;
position: absolute;
right: 0;
float: right;
text-align:right;
content: '\2026';
width: $font-size * 1.1;
}
&:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: +1;
background: $bg-color;
}
}*/
color: #eee; }
.video-js.vjs-mediacms .vjs-corner-layer .title-link:hover {
@ -1057,28 +1057,28 @@
.video-js.vjs-mediacms:hover .vjs-big-play-button {
background-color: #009933; }
/* @-webkit-keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
/* @-webkit-keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
} */
.video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip,
.video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display {
@ -1114,6 +1114,7 @@
width: 160px;
height: 120px;
overflow: hidden;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
background-color: rgba(28, 28, 28, 0.9);

View file

@ -61,8 +61,8 @@
/* SPACES */
/* ANIMATIONS */
/* FUNCTIONS */
/*@function calc_($expression) {
@return $expression;
/*@function calc_($expression) {
@return $expression;
}*/
/* ANIMATION KEYFRAMES */
@keyframes onHoverFullscreenToggle {
@ -232,11 +232,11 @@
outline-color: rgba(0, 0, 0, 0);
outline-color: transparent;
/* Doesn't work properly in Safari browser.*/
/*&.vjs-loading-video {
video {
opacity: 0;
visibility: hidden;
}
/*&.vjs-loading-video {
video {
opacity: 0;
visibility: hidden;
}
}*/ }
.video-js.vjs-mediacms video {
width: 100%;
@ -321,11 +321,11 @@
display: none;
font-size: 0.8125em;
z-index: +1;
/*display:block;
opacity: 0;
height:0;
visibility: hidden;
@include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
/*display:block;
opacity: 0;
height:0;
visibility: hidden;
@include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) );
will-change:height;*/ }
.video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button'] {
position: relative; }
@ -337,8 +337,8 @@
outline: 0; }
.video-js.vjs-mediacms .vjs-settings-panel.vjs-visible-panel {
display: block;
/*opacity: 1;
visibility: visible;
/*opacity: 1;
visibility: visible;
height:auto;*/ }
.video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-panel-inner {
display: block;
@ -679,7 +679,7 @@
.video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
transition: width 0.2s linear;
transition-delay: 0.15s;
/* transition: width 0s linear;
/* transition: width 0s linear;
transition-delay: 0s; */ }
.video-js.vjs-mediacms .vjs-actions-anim {
-webkit-user-select: none;
@ -986,31 +986,31 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
/*@-moz-document url-prefix() {
position: relative;
padding-right: $font-size * 1.1;
overflow: hidden;
&:before {
background-color: $bg-color;
bottom: 0;
position: absolute;
right: 0;
float: right;
text-align:right;
content: '\2026';
width: $font-size * 1.1;
}
&:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: +1;
background: $bg-color;
}
/*@-moz-document url-prefix() {
position: relative;
padding-right: $font-size * 1.1;
overflow: hidden;
&:before {
background-color: $bg-color;
bottom: 0;
position: absolute;
right: 0;
float: right;
text-align:right;
content: '\2026';
width: $font-size * 1.1;
}
&:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: +1;
background: $bg-color;
}
}*/
color: #eee; }
.video-js.vjs-mediacms .vjs-corner-layer .title-link:hover {
@ -1057,28 +1057,28 @@
.video-js.vjs-mediacms:hover .vjs-big-play-button {
background-color: #009933; }
/* @-webkit-keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
/* @-webkit-keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes vjs-poster-reveal {
0%{
opacity:0;
}
40%{
opacity:0;
}
100%{
opacity:1;
}
} */
.video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip,
.video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display {
@ -1114,6 +1114,7 @@
width: 160px;
height: 120px;
overflow: hidden;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
background-color: rgba(28, 28, 28, 0.9);

File diff suppressed because one or more lines are too long