jellyfish-web/src/plugins/htmlVideoPlayer/style.scss
2021-03-19 13:46:12 -04:00

80 lines
1.8 KiB
SCSS

.videoPlayerContainer {
position: fixed !important;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
background: #000 !important;
}
.videoPlayerContainer-onTop {
z-index: 1000;
}
.videoPlayerContainer .libassjs-canvas-parent {
order: -1;
}
/* Controls are enabled for devices that don't support autoplay. They will be hidden when playback starts.
In Tizen 2.3 (and probably other old web engines), subtitles are located under '-webkit-media-controls' tree.
Therefore, we hide controls only if they are enabled.
*/
video[controls]::-webkit-media-controls {
display: none !important;
}
.htmlvideoplayer {
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100%;
}
.htmlvideoplayer::cue {
background-color: transparent;
text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
-webkit-font-smoothing: antialiased;
font-family: inherit;
line-height: normal; /* Restore value. See -webkit-media-text-track-container 'line-height' */
}
.htmlvideoplayer::-webkit-media-text-track-container {
font-size: 170% !important; /* Override element inline style */
line-height: 50%; /* Child element cannot set line height smaller than its parent has. This allow smaller values for children */
}
.htmlvideoplayer::-webkit-media-text-track-display {
max-width: 70%;
margin-left: 15%;
}
.videoSubtitles {
position: fixed;
bottom: 0;
text-align: center;
left: 0;
right: 0;
color: #fff;
font-size: 170%;
}
.videoSubtitlesInner {
max-width: 70%;
background-color: rgba(0, 0, 0, 0.8);
margin: auto;
display: inline-block;
}
@keyframes htmlvideoplayer-zoomin {
from {
transform: scale3d(0.2, 0.2, 0.2);
opacity: 0.6;
}
to {
transform: none;
opacity: initial;
}
}