jellyfish-web/src/components/htmlvideoplayer/style.css

79 lines
1.5 KiB
CSS
Raw Normal View History

2018-10-23 01:13:23 +03:00
.videoPlayerContainer {
position: fixed !important;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
2018-10-23 01:13:23 +03:00
}
2019-09-26 21:20:15 +03:00
.videoPlayerContainer:not(.videoPlayerContainer-withBackdrop) {
background: #000 !important;
}
2018-10-23 01:13:23 +03:00
.videoPlayerContainer-withBackdrop {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-color: #000;
2018-10-23 01:13:23 +03:00
}
.videoPlayerContainer-onTop {
z-index: 1000;
2018-10-23 01:13:23 +03:00
}
2019-09-26 21:20:15 +03:00
video::-webkit-media-controls {
2019-10-01 01:03:34 +09:00
display: none !important;
2019-09-26 21:20:15 +03:00
}
2018-10-23 01:13:23 +03:00
.htmlvideoplayer {
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100%;
2018-10-23 01:13:23 +03:00
}
2019-09-26 21:20:15 +03:00
.htmlvideoplayer::cue {
background-color: transparent;
2019-10-01 01:03:34 +09:00
text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
2019-09-26 21:20:15 +03:00
-webkit-font-smoothing: antialiased;
font-family: inherit;
}
2018-10-23 01:13:23 +03:00
.htmlvideoplayer-moveupsubtitles::-webkit-media-text-track-display {
2019-10-01 01:03:34 +09:00
/* style the text itself */
margin-top: -2em;
2018-10-23 01:13:23 +03:00
}
.videoSubtitles {
position: fixed;
bottom: 10%;
text-align: center;
left: 0;
right: 0;
color: #fff;
font-size: 170%;
2018-10-23 01:13:23 +03:00
}
.videoSubtitlesInner {
max-width: 70%;
2019-10-01 01:03:34 +09:00
background-color: rgba(0, 0, 0, 0.8);
padding: 0.25em;
2018-10-23 01:13:23 +03:00
margin: auto;
display: inline-block;
2018-10-23 01:13:23 +03:00
}
@keyframes htmlvideoplayer-zoomin {
from {
2019-10-01 01:03:34 +09:00
transform: scale3d(0.2, 0.2, 0.2);
opacity: .6;
2018-10-23 01:13:23 +03:00
}
to {
transform: none;
opacity: initial;
2018-10-23 01:13:23 +03:00
}
}