@3deye-toolkit/react-camera 0.0.1-alpha.7 → 0.0.1

package/dist/camera.css

@@ -1,467 +0,0 @@
-.player {
-  flex: 1;
-  position: relative;
-  background-color: black;
-  overflow: hidden;
-}
-
-.player .zoomable {
-  width: 100%;
-  height: 100%;
-}
-
-.player video {
-  /* object-fit: fill; */
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.player-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  color: white;
-}
-
-.player-overlay .playback-indicator {
-  pointer-events: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: playback-indicator-fade-out 0.5s linear forwards;
-  display: none;
-  background-color: rgba(0, 0, 0, 0.5);
-  width: 48px;
-  height: 48px;
-  padding: 8px;
-  border-radius: 48px;
-}
-
-@keyframes playback-indicator-fade-out {
-  0% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(2);
-  }
-}
-
-.player-overlay .controls {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: 54px;
-  opacity: 0;
-  display: flex;
-  pointer-events: none;
-}
-
-.player-overlay .controls > * {
-  pointer-events: auto;
-}
-
-.player-overlay:hover .controls, .player-overlay .controls:focus-within, .player.paused .controls {
-  opacity: 1;
-}
-
-.player-overlay .indicators {
-  display: flex;
-  pointer-events: none;
-  align-items: center;
-}
-
-.player-overlay .indicators > * {
-  margin: 5px;
-}
-
-.player-overlay .live-indicator {
-  user-select: none;
-  padding: 0 5px;
-  color: rgba(0, 0, 0, 0.7);
-  background-color: white;
-  font-weight: bold;
-  text-transform: uppercase;
-  opacity: 0.8;
-}
-
-.player-overlay .camera-name {
-  pointer-events: auto;
-  background-color: rgba(0, 0, 0, 0.25);
-  text-shadow: 1px 1px 1px black;
-  opacity: 0.8;
-  padding: 2px 16px;
-  border-radius: 16px;
-  line-height: 16px;
-  cursor: pointer;
-}
-
-.player-overlay .camera-name:hover {
-  text-decoration: underline;
-}
-
-.player-overlay .button-go-live {
-  height: 24px;
-  padding: 0 12px;
-  background-color: rgba(0, 0, 0, 0.25);
-  border-radius: 15px;
-  margin: 0;
-  opacity: 0;
-  color: orange;
-  text-shadow: 1px 1px 1px black;
-}
-
-.player-overlay .button-go-live:focus {
-  box-shadow: 0 0 2px orange;
-}
-
-.player-overlay:hover .button-go-live, .button-go-live:focus {
-  opacity: 1;
-}
-
-.camera-name-popover.popover-body {
-  border-radius: 2px;
-  background-color: rgba(15, 15, 20, 0.8);
-  box-shadow: none;
-  color: white;
-  white-space: nowrap;
-}
-
-.camera-name-popover.popover-body svg {
-  fill: rgba(15, 15, 20, 0.8);
-}
-
-.camera-name-popover.popover-body button.button {
-  pointer-events: auto;
-  font-size: inherit;
-}
-
-.camera-name-popover.popover-body button.button:hover {
-  text-decoration: underline;
-}
-
-.player-overlay .current-time {
-  line-height: 16px;
-  font-size: 11px;
-  text-shadow: 1px 1px 1px black;
-  background-color: rgba(0, 0, 0, 0.25);
-  padding: 2px 16px;
-  border-radius: 16px;
-}
-
-.player-overlay .current-time.synced {
-  background-color: rgb(147, 221, 30, 0.6);
-}
-
-.zoom-preview {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  right: 40px;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: rgba(0, 0, 0, 0.7);
-  border: 1px solid white;
-}
-
-.zoom-preview .zoom-value {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: monospace;
-  font-size: 32px;
-  font-weight: bold;
-  color: white;
-  text-shadow: 0 1px 1px black;
-}
-
-.zoom-preview .zoomable {
-  position: relative;
-  flex: 1;
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-.zoom-slider {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 30px;
-  padding: 10px 5px;
-  background-color: rgba(0, 0, 0, 0.5);
-  border-radius: 4px;
-}
-
-.zoom-slider .tick {
-  margin-left: 4px;
-  width: 12px;
-  height: 10px;
-  border-top: 1px solid rgba(255, 255, 255, 0.4);
-}
-
-.zoom-slider .tick:nth-child(5n + 1) {
-  margin-left: 0px;
-  width: 20px;
-  border-top-width: 2px;
-}
-
-.zoom-slider .tick:last-child {
-  height: 0;
-}
-
-.zoom-slider .rotation-button {
-  margin-left: -4px;
-  margin-bottom: -4px;
-  width: 28px;
-  text-align: right;
-  color: white;
-}
-
-.zoom-preview {
-  display: none;
-}
-
-.zoom-slider:hover + .zoom-preview,
-.zoom-slider + .zoom-preview:focus,
-.zoom-preview:hover,
-.zoom-preview:focus {
-  display: block;
-}
-.button {
-  color: inherit;
-  background: none;
-  border: none;
-  position: relative;
-  padding: 4px;
-  text-transform: uppercase;
-  user-select: none;
-  font-family: 'Roboto', sans-serif;
-  text-align: center;
-  align-items: flex-start;
-}
-
-.button.fullwidth {
-  width: 100%;
-}
-
-.button:focus {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.button-icon {
-  border-radius: 16px;
-  width: 32px;
-  height: 32px;
-}
-
-.button:disabled {
-  opacity: 0.6;
-}
-
-.button.button-save, .button.button-cancel {
-  color: white;
-  border-radius: 4px;
-  text-transform: none;
-  margin: 4px;
-  min-width: 80px;
-}
-
-.button.button-save.fullwidth, .button.button-cancel.fullwidth {
-  width: calc(100% - 8px);
-}
-
-.button:not(:disabled) {
-  cursor: pointer;
-}
-
-.button.button-save {
-  background-color: #27B9A1;
-}
-
-.button.button-cancel {
-  background-color: #7758B2;
-}
-.popover {
-  position: relative;
-}
-
-.popover-body {
-  background-color: white;
-  padding: 8px;
-  border-radius: 8px;
-  box-shadow: 0 0 8px 0px black;
-}
-.spinner {
-	animation: spinner-rotation 1.5s linear infinite;
-	width: 65px;
-	height: 65px;
-}
-
-.spinner circle {
-	stroke-dasharray: 207.34;
-	stroke-dashoffset: 0;
-	transform-origin: center;
-	animation: spinner-dash 1.5s ease-in-out infinite;
-}
-
-@keyframes spinner-rotation {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(270deg);
-	}
-}
-
-@keyframes spinner-dash {
-	0% {
-		stroke-dashoffset: 207.34;
-	}
-	50% {
-		stroke-dashoffset: 51.835; /*  offset / 4 */
-		transform: rotate(135deg);
-	}
-	100% {
-		stroke-dashoffset: 207.34;
-		transform: rotate(450deg);
-	}
-}
-.controls {
-  display: flex;
-  padding: 8px;
-}
-
-.control-group {
-  display: flex;
-  position: relative;
-  margin: 8px;
-}
-
-.controls.compact .control-group {
-  margin: 0;
-}
-
-.controls .spacer {
-  pointer-events: none;
-  flex: 1;
-}
-
-.control {
-  width: 38px;
-  height: 38px;
-  background-color: rgb(26,30,29, 0.8);
-  color: rgba(255, 255, 255, 0.6);
-}
-
-.control.close {
-  background-color: rgba(156, 51, 49, 0.8);
-}
-
-.player.paused .control.playpause {
-  background-color: rgba(49, 106, 156, 0.8);
-}
-
-.controls.compact .control {
-  padding: 0;
-}
-
-.controls.compact .control.reflowed {
-  width: 20px;
-}
-
-.control + .control {
-  border-left: 1px solid rgb(26,30,29);
-}
-
-.control:hover {
-	background-color: #2a2e2d;
-	color: white;
-}
-
-.control.close:hover {
-  background-color: rgba(156, 51, 49);
-}
-
-.player.paused .control.playpause:hover {
-  background-color: rgba(49, 106, 156);
-}
-
-.control:focus {
-  box-shadow: 0 0 0 0.2rem rgba(52,58,64,.5);
-  background-color: rgb(26,30,29, 0.8);
-  z-index: 1;
-}
-
-.control.close:focus {
-  background-color: rgba(156, 51, 49, 0.8);
-  box-shadow: 0 0 0 0.2rem rgba(101, 20, 46, 0.5);
-}
-
-.player.paused .control.playpause:focus {
-  background-color: rgba(49, 106, 156, 0.8);
-  box-shadow: 0 0 0 0.2rem rgba(20, 69, 101, 0.5);
-}
-
-.controls > .control:first-child {
-	border-top-left-radius: 4px;
-	border-bottom-left-radius: 4px;
-}
-
-.controls > .control:last-child {
-  border-top-right-radius: 4px;
-	border-bottom-right-radius: 4px;
-}
-
-.controls .control-group .control.control-playbackrate {
-  text-transform: none;
-  font-weight: bold;
-}
-.volume-control:hover .volume-range, .volume-control:focus .volume-range {
-  visibility: visible;  
-  transition: visibility 0s;
-}
-
-.volume-range {
-  background-color: rgba(26,30,29, 0.5);
-  padding: 4px;
-  border-radius: 4px;
-  position: absolute;
-  height: 32px;
-  top: -28px;
-  left: 0;
-  visibility: hidden;
-  transition: visibility 0s 0.5s;
-  transform-origin: 16px 12px;
-  transform: rotate(270deg);
-}
-
-.box-selector {
-  border: 2px solid deepskyblue;
-  background-color: rgba(0, 191, 255, 0.5);
-}
-
-.box-selector-close {
-  background-color: skyblue;
-  transition: 0.2s ease-in;
-  color: #026282;
-}
-
-.box-selector-close:hover {
-  color: white;
-}