@uppy/webcam/dist/style.css

Uppy plugin that takes photos or records videos using the device's camera.

@keyframes fadeIn {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/**
* General Uppy styles that apply to everything inside the .Uppy container
*/
.uppy-Root {
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, BLinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important; }

.uppy-Root *, .uppy-Root *:before, .uppy-Root *:after {
  box-sizing: inherit !important; }

.uppy-Root *:focus {
  outline: 2px solid #2275D7 !important;
  outline-offset: 3px !important; }

.UppyIcon {
  max-width: 100% !important;
  max-height: 100% !important;
  fill: currentColor;
  display: inline-block !important;
  overflow: hidden !important; }

.UppyIcon--svg-baseline {
  bottom: -0.125em !important;
  position: relative !important; }

.uppy-u-reset {
  animation: none 0s ease 0s 1 normal none running;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll !important;
  border: medium none currentColor !important;
  border-collapse: separate !important;
  border-image: none !important;
  border-radius: 0 !important;
  border-spacing: 0 !important;
  bottom: auto !important;
  box-shadow: none !important;
  caption-side: top !important;
  clear: none !important;
  clip: auto !important;
  color: #000 !important;
  columns: auto !important;
  column-count: auto !important;
  column-fill: balance !important;
  column-gap: normal !important;
  column-rule: medium none currentColor !important;
  column-span: 1 !important;
  column-width: auto !important;
  content: normal !important;
  counter-increment: none !important;
  counter-reset: none !important;
  cursor: auto !important;
  display: inline !important;
  empty-cells: show !important;
  float: none !important;
  font-family: serif !important;
  font-size: medium !important;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: normal !important;
  font-stretch: normal !important;
  line-height: normal !important;
  height: auto !important;
  -webkit-hyphens: none !important;
      -ms-hyphens: none !important;
          hyphens: none !important;
  left: auto !important;
  letter-spacing: normal !important;
  list-style: disc outside none !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  opacity: 1 !important;
  orphans: 2 !important;
  outline: medium none invert !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding: 0 !important;
  page-break-after: auto !important;
  page-break-before: auto !important;
  page-break-inside: auto !important;
  perspective: none !important;
  perspective-origin: 50% 50% !important;
  position: static !important;
  right: auto !important;
  -moz-tab-size: 8 !important;
       tab-size: 8 !important;
  table-layout: auto !important;
  text-align: left !important;
  text-align-last: auto !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  text-transform: none !important;
  top: auto !important;
  transform: none !important;
  transform-origin: 50% 50% 0 !important;
  transform-style: flat !important;
  transition: none 0s ease 0s !important;
  unicode-bidi: normal !important;
  vertical-align: baseline !important;
  visibility: visible !important;
  white-space: normal !important;
  widows: 2 !important;
  width: auto !important;
  word-spacing: normal !important;
  z-index: auto !important; }

.uppy-c-textInput {
  border: 1px solid rgba(147, 147, 147, 0.5) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 6px 8px !important; }

.uppy-size--md .uppy-c-textInput {
  font-size: 15px !important;
  line-height: 1.8 !important;
  padding: 8px 12px !important; }

.uppy-c-textInput:focus {
  border-color: #2275D7 !important;
  outline: none !important;
  box-shadow: 0 0 1px 1px rgba(34, 117, 215, 0.5) !important; }

.uppy-c-btn {
  display: inline-block !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  transition: background-color 0.3s !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important; }

.uppy-c-btn:not(:disabled):not(.disabled) {
  cursor: pointer !important; }

.uppy-c-btn-primary {
  font-size: 13px !important;
  padding: 10px 18px !important;
  border-radius: 4px !important;
  background-color: #2275D7 !important;
  color: #fff !important; }

.uppy-size--md .uppy-c-btn-primary {
  font-size: 15px !important;
  padding: 13px 22px !important; }

.uppy-c-btn-primary:hover {
  background-color: #1b5dab !important; }

.uppy-c-btn-primary:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34, 117, 215, 0.5) !important; }

.uppy-c-btn-link {
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 10px 18px !important;
  border-radius: 4px !important;
  background-color: transparent !important;
  color: #000 !important; }

.uppy-size--md .uppy-c-btn-link {
  font-size: 15px !important;
  padding: 13px 28px !important; }

.uppy-c-btn-link:hover {
  text-decoration: underline !important; }

.uppy-c-btn-link:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(34, 117, 215, 0.5) !important; }

.uppy-c-btn--small {
  font-size: 0.9em !important;
  padding: 7px 16px !important;
  border-radius: 2px !important; }

.uppy-size--md .uppy-c-btn--small {
  padding: 8px 10px !important;
  border-radius: 2px !important; }

.uppy-Webcam-container {
  width: 100% !important;
  height: 100% !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-pack: center !important;
      justify-content: center !important;
  -ms-flex-align: center !important;
      align-items: center !important;
  -ms-flex-direction: column !important;
      flex-direction: column !important; }

.uppy-Webcam-videoContainer {
  width: 100% !important;
  -ms-flex: 1 !important;
      flex: 1 !important;
  -ms-flex-positive: 1 !important;
      flex-grow: 1 !important;
  overflow: hidden !important;
  background-color: #000 !important;
  text-align: center !important; }

.uppy-Webcam-video {
  max-width: 100% !important;
  max-height: 100% !important; }

.uppy-Webcam-video--mirrored {
  transform: scaleX(-1) !important; }

.uppy-Webcam-buttonContainer {
  width: 100% !important;
  height: 75px !important;
  border-top: 1px solid rgba(147, 147, 147, 0.2) !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-align: center !important;
      align-items: center !important;
  -ms-flex-pack: center !important;
      justify-content: center !important;
  padding: 0 20px !important; }

.uppy-Webcam-button {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  background-color: #D32F2F !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.3s !important; }

.uppy-Webcam-button svg {
  width: 30px !important;
  height: 30px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: inline-block !important;
  vertical-align: text-top !important;
  overflow: hidden !important;
  fill: currentColor !important; }

.uppy-size--md .uppy-Webcam-button {
  width: 60px !important;
  height: 60px !important; }

.uppy-Webcam-button:hover {
  background-color: #ab2424 !important; }

.uppy-Webcam-button:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(34, 117, 215, 0.5) !important; }

.uppy-Webcam-button--picture {
  margin-right: 12px !important; }

.uppy-Webcam-permissons {
  padding: 15px !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-align: center !important;
      align-items: center !important;
  -ms-flex-pack: center !important;
      justify-content: center !important;
  -ms-flex-flow: column wrap !important;
      flex-flow: column wrap !important;
  height: 100% !important;
  -ms-flex: 1 !important;
      flex: 1 !important; }

.uppy-Webcam-permissons p {
  max-width: 450px !important;
  line-height: 1.3 !important; }

.uppy-Webcam-title {
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  margin-bottom: 15px !important;
  padding: 0 15px !important;
  max-width: 500px !important;
  text-align: center !important;
  color: #000 !important; }

.uppy-Webcam-permissons p {
  text-align: center !important;
  line-height: 1.45 !important;
  color: #939393 !important;
  margin: 0 !important; }

.uppy-Webcam-permissonsIcon svg {
  width: 100px !important;
  height: 75px !important;
  color: #b9b9b9 !important;
  margin-bottom: 30px !important; }