@uppy/screen-capture
Version:
Uppy plugin that captures video from display or application.
154 lines (144 loc) • 3.01 kB
CSS
.uppy-ScreenCapture-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.uppy-ScreenCapture-videoContainer {
position: relative;
flex: 1;
flex-grow: 1;
width: 100%;
overflow: hidden;
text-align: center;
background-color: #333;
}
.uppy-size--md .uppy-ScreenCapture-videoContainer {
max-width: 100%;
}
.uppy-ScreenCapture-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
outline: 0;
}
.uppy-ScreenCapture-buttonContainer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 75px;
padding: 0 20px;
background-color: #fff;
border-top: 1px solid #eaeaea;
}
[data-uppy-theme=dark] .uppy-ScreenCapture-buttonContainer {
background-color: #1f1f1f;
border-top: 1px solid #333;
}
.uppy-ScreenCapture-button {
width: 45px;
height: 45px;
color: #fff;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
}
.uppy-ScreenCapture-button:focus {
outline: none;
}
.uppy-ScreenCapture-button::-moz-focus-inner {
border: 0;
}
.uppy-ScreenCapture-button:focus {
box-shadow: 0 0 0 3px rgba(18, 105, 207, 0.5);
}
[data-uppy-theme=dark] .uppy-ScreenCapture-button:focus {
outline: none;
}
[data-uppy-theme=dark] .uppy-ScreenCapture-button::-moz-focus-inner {
border: 0;
}
[data-uppy-theme=dark] .uppy-ScreenCapture-button:focus {
box-shadow: 0 0 0 2px rgba(170, 225, 255, 0.85);
}
.uppy-size--md .uppy-ScreenCapture-button {
width: 60px;
height: 60px;
}
.uppy-ScreenCapture-button:hover {
background-color: #d31b2d;
}
.uppy-ScreenCapture-button svg {
display: inline-block;
width: 30px;
max-width: 100%;
height: 30px;
max-height: 100%;
overflow: hidden;
vertical-align: text-top;
fill: currentColor;
}
.uppy-ScreenCapture-button--submit {
margin-left: 12px;
background-color: #1269cf;
}
.uppy-ScreenCapture-button--submit:hover {
background-color: #105db8;
}
.uppy-ScreenCapture-button--submit:disabled {
background-color: #939393;
cursor: default;
}
.uppy-ScreenCapture-button--submit:disabled:hover {
background-color: #eaeaea;
}
.uppy-ScreenCapture-title {
max-width: 500px;
margin: 0;
margin-bottom: 5px;
padding: 0 15px;
color: #333;
font-weight: 400;
font-size: 22px;
line-height: 1.35;
text-align: center;
}
.uppy-ScreenCapture-icon--stream {
position: absolute;
top: 0;
right: 0;
z-index: 1;
margin: 1rem;
}
.uppy-ScreenCapture-icon--stream svg {
fill: #939393;
}
.uppy-ScreenCapture-icon--streamActive svg {
animation: uppy-ScreenCapture-icon--blink 1s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;
}
@keyframes uppy-ScreenCapture-icon--blink {
0% {
fill: #1269cf;
}
50% {
fill: #939393;
}
100% {
fill: #1269cf;
}
}
.uppy-ScreenCapture-button--video {
color: #fff;
background: #e32437;
}
.uppy-ScreenCapture-button--video:hover {
background-color: #bc1828;
}