@e10in/videojs-record
Version:
A video.js plugin for recording audio/video/image files.
346 lines (312 loc) • 10 kB
CSS
/*!
Default styles for @e10in/videojs-record 4.4.4
*/
@font-face {
font-family: videojs-record;
src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAW0AAsAAAAACewAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPAAAAFY6l0dQY21hcAAAAYAAAAByAAAB4PJQ5/VnbHlmAAAB9AAAAYYAAALMPcs3OGhlYWQAAAN8AAAALQAAADYQhba0aGhlYQAAA6wAAAAWAAAAJABhADtobXR4AAADxAAAAA4AAAAoAbAAAGxvY2EAAAPUAAAAFgAAABYELgNEbWF4cAAAA+wAAAAdAAAAIAEXADxuYW1lAAAEDAAAATYAAAJemUJQLnBvc3QAAAVEAAAAcAAAALoqjqNHeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGTQZpzAwMrAwCDHoAgk2aC0OAMTAw8DkGBlZsAKAtJcUxgcPjJ+5GQwAHJZwCQDAyOIAADEhgVmeJztkcENw0AIBOd8+GyilOKXC/IrZaTpq8BhIWUYaXbFCvEAYAV6cAQG7UNDdUXaMu+8MjfOnDHl0+87tEmjt9QlZi02DjZ2PKLBU+/U779zXa3IOy4F8l7oH9MKXXauhX41R4F8K5DvBXIv8B9LThoJAAB4nG1Sf0+DMBC9a4+WEJxTgRGdywKEzTmngXX7w+j3/1i+g/0wxhZer23u9d1ryZC2N9pQTe9Ex3pV+7pyz5wVnxx2HPqs6A5A5/O+O3zxvvWZq1oEh67I105ScQZtIk4iFwEnOjNi8LWCoUTEXmwUWfE8Lkw1JVbA6Txo2FBDD1AQ9u0rnxXoibNQMZfMA8RPXqNMwccFjfpb2lJKS2SPEsf0YzbhCiXU2YL7vA/dN4fSiLYbC63WWmcFfyYmxbqCs5Ex2HHiPSYn/g96gbb5hf8ssK9BuwqV84djmK21nuVQ2UehriRxakymCwARL8YmRjxdan5DT8FaTRgaoW+/4zJKoihJFLanEXDNadAtcvq8TsuyKUlnA9eWYmh8wZ7emboQrnd5Fr7ysGT/zd2CYc89qlcT3EW6E/UEKwrlYJG9Gy9tvMrFaQ9A57Pf6RXRA830BeX98c+pvg59O51KoxwjNFUKT+YaA5ZzZRm93uEl3A4v4R+WzW+KzZXgsSD6Act6LFcAAHicY2BkYGAA4gm5SzLj+W2+MnAzGABFGG7M3rMWmQaK6gJJDgYmEAcANXsKBgAAAHicY2BkYGAwYGBAIhkZUAEXAA5yAJ0AAHicY2AAAgPCGAAgOAGxAAAAAAAAAEIAYACQALwA1gDiASABRgFmAAB4nGNgZGBg4GIwYGBmAAEmMI8LSP4H8xkADk0BVAAAAHicfZA/asMwGMWf8680hlIo7ZRBUOhSYicZQ+cEOmbI7tiyY2NbRlYCuUEP0hP0EB17kJ6iL6qWZLAE0u+9732fQADu8Q0P5+Xhzp7n1cMN1T/3SY+OB+Rnx0P4mDse0X9zPMYr3h37eMCBE7zBLZ0JPhz3mP903Kf/5XhA/nE8xBN+HY8w8eB4jK03cezjxdPHPJGqaKdaxkonG5kdyujKvFRbqdtc1WIezC4La1lLHRmZiN1JtMdsYUwqUq0qsVK1kWWpRKNVIWMT7I1plmGYOj+IVYUjciSQUCjQYgpNjqk03Q0541+UiKi7kl21LVnTzalrCP5/gFlnx5pc264IhnfCrh1OPFv2ZVjQNUipU2YUKtLKTj+nS25Fp7G1ws41fHNvuxosEXKnV/nAvl79AXudcPYAAHicfctLDsIwDARQT/mUJt3DJXIoK7HULIotN+35QS1ihZjVG42GOvqfgA4nnHHBFT1uGBAQqectmfgctlpED/Ja6sG4ZBd57h5dsnpJS2Nv8VvURpu0aco8i/PDam6rS6rv14f74/5zUCN6AYpyMIA=) format("woff");
font-weight: normal;
font-style: normal;
}
.vjs-icon-av-perm {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-av-perm:before {
content: "\f101";
}
.vjs-icon-sv-perm {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-sv-perm:before {
content: "\f104";
}
.vjs-icon-video-perm {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-video-perm:before {
content: "\f102";
}
.vjs-icon-audio-perm {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-audio-perm:before {
content: "\f103";
}
.vjs-icon-screen-perm {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-screen-perm:before {
content: "\f104";
}
.vjs-icon-record-start {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-record-start:before {
content: "\f105";
}
.vjs-icon-record-stop {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-record-stop:before {
content: "\f106";
}
.vjs-icon-photo-camera {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-photo-camera:before {
content: "\f107";
}
.vjs-icon-picture-in-picture-start {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-picture-in-picture-start:before {
content: "\f108";
}
.vjs-icon-picture-in-picture-stop {
font-family: videojs-record;
font-weight: normal;
font-style: normal;
}
.vjs-icon-picture-in-picture-stop:before {
content: "\f109";
}
/* General plugin style.
--------------------------------------------------------------------------------
*/
/* Position fullscreen control on right side of the player.
--------------------------------------------------------------------------------
*/
.vjs-record.video-js .vjs-control.vjs-fullscreen-control {
position: absolute;
right: 0;
}
/* Ensure custom controls are always visible because
the plugin hides and replace the video.js native mobile
controls.
--------------------------------------------------------------------------------
*/
.vjs-record .vjs-using-native-controls .vjs-control-bar {
display: flex ;
}
/* Add workaround for controlbar flickering in Safari, see
https://github.com/collab-project/videojs-record/issues/413
--------------------------------------------------------------------------------
*/
.vjs-record.video-js .vjs-tech {
-webkit-perspective: 1000;
}
/* Handle responsive / fluid view.
--------------------------------------------------------------------------------
*/
.vjs-record.vjs-fluid wave.vjs-wavedisplay,
.vjs-record.vjs-fluid .vjs-record-canvas > canvas:nth-child(1),
.vjs-record.vjs-fluid .vjs-animation-display > img:nth-child(1) {
top: 0;
position: absolute ;
width: 100%;
min-width: 100%;
max-width: 100%;
height: 100%;
}
/* Device Button (large centered button at startup)
--------------------------------------------------------------------------------
*/
.vjs-record .vjs-device-button.vjs-control {
font-size: 3em;
position: absolute;
z-index: 2;
/* Center it vertically */
top: 50%;
/* Center it horizontally */
left: 50%;
width: 4em;
height: 2.8em;
margin-top: -1.8em;
margin-left: -2.1em;
display: block;
cursor: pointer;
opacity: 1;
/* transition */
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
text-align: center;
vertical-align: middle;
/* border-radius */
-webkit-border-radius: 0.8em;
-moz-border-radius: 0.8em;
border-radius: 0.8em;
/* Need a slightly gray bg so it can be seen on black backgrounds */
/* background-color-with-alpha */
background-color: #07141e;
background-color: rgba(7, 20, 30, 0.7);
/* box-shadow */
-webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0 0 1em rgba(255, 255, 255, 0.25);
box-shadow: 0 0 1em rgba(255, 255, 255, 0.25);
}
.vjs-record .vjs-error .vjs-device-button {
display: none;
}
.vjs-record button.vjs-device-button.vjs-control.vjs-icon-av-perm:before,
.vjs-record button.vjs-device-button.vjs-control.vjs-icon-sv-perm:before,
.vjs-record button.vjs-device-button.vjs-control.vjs-icon-audio-perm:before,
.vjs-record button.vjs-device-button.vjs-control.vjs-icon-video-perm:before,
.vjs-record button.vjs-device-button.vjs-control.vjs-icon-screen-perm:before {
font-size: 2.4em;
}
/* Record Toggle (start/stop recording button in controlbar)
--------------------------------------------------------------------------------
*/
.vjs-record .vjs-record-button.vjs-control {
cursor: pointer;
}
.vjs-record .vjs-error .vjs-record-button {
display: none;
}
.vjs-record .vjs-record-button.vjs-control.vjs-icon-record-start:before {
font-size: 1.4em;
line-height: 2.2em;
}
.vjs-record .vjs-record-button.vjs-control.vjs-icon-record-stop:before {
font-size: 2.2em;
line-height: 1.4em;
}
.vjs-record .vjs-play-control.vjs-control {
cursor: pointer;
}
/* Camera Button (snapshot try/retry)
--------------------------------------------------------------------------------
*/
.vjs-record .vjs-camera-button.vjs-control {
cursor: pointer;
}
.vjs-record .vjs-error .vjs-camera-button {
display: none;
}
.vjs-record .vjs-camera-button.vjs-control.vjs-icon-photo-camera:before {
font-size: 2em;
line-height: 1.4em;
}
.vjs-record .vjs-camera-button.vjs-control.vjs-icon-replay:before {
font-size: 2.2em;
line-height: 1.4em;
}
/* Record Indicator (dot in top-right corner visible when recording)
--------------------------------------------------------------------------------
*/
.vjs-record.video-js .vjs-control.vjs-record-indicator.vjs-hidden {
display: block ;
opacity: 0;
transform: translateX(1em) rotateX(-90deg) scale(0.9);
transition: all 0.5s, transform 0.5s 0.25s;
}
.vjs-record.video-js .vjs-control.vjs-record-indicator {
width: 0.8em;
height: 0.8em;
background-color: #ff625e;
line-height: 1.1em;
border-radius: 50%;
right: 2.5ex;
top: 2ex;
position: absolute;
opacity: 1;
transform: rotateX(0) scale(1.3);
transition: all 0.5s, transform 0.2s 0.1s;
}
.vjs-record.video-js .vjs-control.vjs-record-indicator:before {
content: attr(data-label);
color: white;
position: absolute;
left: -2.7em;
font-family: "Helvetica", sans-serif;
animation-name: pulsetext;
animation-duration: 5s;
animation-iteration-count: infinite;
top: -0.1em;
font-size: 0.8em;
opacity: 1;
transition: opacity 0.5s 0.2s;
}
.vjs-record.video-js .vjs-control.vjs-record-indicator:after {
content: "";
display: block;
height: calc(.8em - 4px);
width: calc(.8em - 4px);
border: 2px solid #ff625e;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transform-origin: center;
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0.25s;
}
@keyframes pulsetext {
from {
opacity: 0.75;
}
25% {
opacity: 0.5;
}
50% {
opacity: 0.75;
}
75% {
opacity: 0.5;
}
to {
opacity: 0.75;
}
}
@keyframes pulse {
from {
opacity: 1;
transform: scale(1.6);
}
50% {
opacity: 0.5;
transform: scale(2.5);
}
to {
opacity: 0;
transform: scale(3.5);
}
}
/* Picture-In-Picture Toggle (button in controlbar)
--------------------------------------------------------------------------------
*/
.vjs-record .vjs-pip-button.vjs-control {
cursor: pointer;
}
.vjs-record .vjs-error .vjs-pip-button {
display: none;
}
.vjs-record .vjs-pip-button.vjs-control.vjs-icon-picture-in-picture-start:before {
font-size: 1.4em;
line-height: 2.2em;
}
.vjs-record .vjs-pip-button.vjs-control.vjs-icon-picture-in-picture-stop:before {
font-size: 1.4em;
line-height: 2.2em;
}