@uppy/screen-capture/dist/style.css

Uppy plugin that captures video from display or application.

.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;
}