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

View file

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

File diff suppressed because one or more lines are too long