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

package/dist/react-camera.css

@@ -5,6 +5,11 @@
 .x-3deye-player {
   position: relative;
   background-color: black;
+}
+
+.x-3deye-player__zoomable-wrapper {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -35,12 +40,21 @@
 	   -moz-user-select: none;
 	    -ms-user-select: none;
 	        user-select: none;
-	text-align: center;
-	align-items: flex-start;
+  display: inline-flex;
+	justify-content: center;
+	align-items: center;
   border-radius: 4px;
+  letter-spacing: .0107142857em;
+  font-weight: 500;
 }
 
-.x-3deye-button.fullwidth {
+.x-3deye-button sup {
+  position: relative;
+  top: -0.5em;
+  left: 0.25em;
+}
+
+.x-3deye-button.x-3deye-button--fullwidth {
 	width: 100%;
 }
 
@@ -63,50 +77,49 @@
 	opacity: 0.4;
 }
 
-.x-3deye-button.x-3deye-button--ok,
-.x-3deye-button.x-3deye-button--cancel {
-	color: white;
-	text-transform: none;
-	min-width: 80px;
-}
-
-.x-3deye-button.x-3deye-button--ok.fullwidth,
-.x-3deye-button.x-3deye-button--cancel.fullwidth {
-	width: calc(100% - 8px);
-}
-
 .x-3deye-button:not(:disabled) {
 	cursor: pointer;
 }
 
-.x-3deye-button.x-3deye-button--ok {
-	background-color: #27b9a1;
+.x-3deye-button.x-3deye-button--filled,
+.x-3deye-button.x-3deye-button--text {
+  min-width: 80px;
+  text-transform: capitalize;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+  padding: 0 1rem;
 }
 
-.x-3deye-button.x-3deye-button--ok:not(:disabled):hover {
+.x-3deye-button.x-3deye-button--filled {
+  background-color: #27b9a1;
+  color: white;
+}
+
+.x-3deye-button.x-3deye-button--filled:not(:disabled):hover {
 	background-color: #61beaf;
 }
 
-.x-3deye-button.x-3deye-button--ok:focus {
+.x-3deye-button.x-3deye-button--filled:focus {
 	transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
 	box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
 }
 
-.x-3deye-button.x-3deye-button--cancel {
-	background-color: rgb(119, 87, 178);
-}
-
-.x-3deye-button.x-3deye-button--cancel:not(:disabled):hover {
-	background-color: rgb(142, 122, 180);
+.x-3deye-button canvas {
+	color: rgb(var(--surface-highlight-rgb));
 }
 
-.x-3deye-button.x-3deye-button--cancel:focus {
-	transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
-	box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
+.x-3deye-button--overlay {
+	pointer-events: auto;
+	background: rgba(0, 0, 0, 0.5);
+	border: 2px solid rgba(255, 255, 255, 0.25);
+	color: white;
 }
 
-.x-3deye-button canvas {
-	color: rgb(var(--surface-highlight-rgb));
+.x-3deye-button.x-3deye-button--overlay:focus, .x-3deye-button.x-3deye-button--overlay:not(:disabled):hover {
+  background: rgba(0, 0, 0, 0.5);
+	border: 2px solid rgba(255, 255, 255, 0.5);
 }
 
 :root {
@@ -508,6 +521,10 @@
   padding: 0;
 }
 
+.x-3deye-player__controls--compact .x-3deye-player__control .icon {
+  width: 20px;
+}
+
 .x-3deye-player__control--reflowed {
   width: 20px;
 }
@@ -547,7 +564,7 @@
 	border-bottom-right-radius: 4px;
 }
 
-.x-3deye-player__control-close {
+.x-3deye-button.x-3deye-player__control-close {
   background-color: rgba(156, 51, 49, 0.8);
 }
 
@@ -573,133 +590,184 @@
   box-shadow: 0 0 0 0.2rem rgba(20, 69, 101, 0.5);
 }
 
-.volume-control:hover .volume-range, .volume-control:focus .volume-range {
-  visibility: visible;  
-  transition: visibility 0s;
+.volume-control:hover .volume-range,
+.volume-control:focus .volume-range,
+.volume-control:focus-within .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);
+  --surface-inverse: rgba(255, 255, 255, 0.15);
+	--surface-highlight-rgb: 255, 255, 255;
+	--primary-color: #0067ac;
+	--on-primary-color: white;
+	background-color: rgba(26, 30, 29, 0.5);
+	padding: 16px 4px;
+	border-radius: 4px;
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	width: 32px;
+	height: 140px;
+	bottom: 100%;
+	left: 0;
+	visibility: hidden;
+	transition: visibility 0s 0.5s;
+	transform-origin: 16px 12px;
 }
 
+.x-3deye-slider {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
 
-.box-selector {
-	border: 2px solid deepskyblue;
-	background-color: rgba(0, 191, 255, 0.5);
+.x-3deye-slider:focus-visible {
+	outline: none;
 }
 
-.box-selector-close {
-	background-color: skyblue;
-	transition: 0.2s ease-in;
-	color: #026282;
+.x-3deye-slider.horizontal {
+	width: 100%;
+	height: 20px;
 }
 
-.box-selector-close:hover {
-	color: white;
+.x-3deye-slider.vertical {
+	width: 20px;
+	height: 100%;
+	flex-direction: column;
 }
 
-.box-selector-preview {
-  width: 40px;
-  height: 40px;
-  position: relative;
-  margin: 20px 20px 0px 10px;
+.x-3deye-slider__track {
+	background: var(--surface-inverse, gainsboro);
+	position: relative;
+	flex: 1;
 }
 
-@-webkit-keyframes expand-box-selector-preview {
-  from {
-    width: 20px;
-    height: 16px;
-  }
+.x-3deye-slider__bar {
+	background-color: var(--primary-color, #0067ac);
+	position: absolute;
+}
 
-  to {
-    width: 50px;
-    height: 30px;
-  }
+.x-3deye-slider.disabled .x-3deye-slider__bar {
+	background-color: rgb(165, 165, 165);
 }
 
-@keyframes expand-box-selector-preview {
-  from {
-    width: 20px;
-    height: 16px;
-  }
+.x-3deye-slider.horizontal .x-3deye-slider__bar {
+	top: 0;
+	bottom: 0;
+	left: 0;
+}
 
-  to {
-    width: 50px;
-    height: 30px;
-  }
+.x-3deye-slider.vertical .x-3deye-slider__bar {
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
-.box-selector-preview .box-selector {
-  /* width: 20px;
-  height: 16px; */
-  width: 50px;
-  height: 30px;
-  position: relative;
-  will-change: width, height;
+.x-3deye-slider.horizontal .x-3deye-slider__track {
+	height: 3px;
+}
 
-  -webkit-animation-duration: 0.5s;
+.x-3deye-slider.vertical .x-3deye-slider__track {
+	width: 3px;
+}
 
-          animation-duration: 0.5s;
-  -webkit-animation-name: expand-box-selector-preview;
-          animation-name: expand-box-selector-preview;
+.x-3deye-slider__thumb {
+	will-change: transform box-shadow;
+	background: white;
+	box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	transition: box-shadow 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
 }
 
-.box-selector-preview .icon {
-  position: absolute;
-  bottom: -7px;
-  right: -7px;
+.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
+.x-3deye-slider:focus .x-3deye-slider__thumb {
+	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
+		1px 1px 2px 0 rgba(0, 0, 0, 0.25);
 }
 
-/* .box-selector-select:hover .box-selector {
-  width: 50px;
-  height: 30px;
-} */
+.x-3deye-slider:focus .x-3deye-slider__thumb.active {
+	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
+		1px 1px 2px 0 rgba(0, 0, 0, 0.25);
+}
 
-.box-selector-select {
-	color: rgba(255, 255, 255, 0.8);
-  background-color: rgba(0, 0, 0, 0.5);
-  -webkit-backdrop-filter: blur(2px);
-          backdrop-filter: blur(2px);
-	text-transform: uppercase;
-  font-weight: bold;
-  text-align: center;
+.x-3deye-slider.horizontal .x-3deye-slider__thumb {
+	margin-left: -10px;
+}
+
+.x-3deye-slider.vertical .x-3deye-slider__thumb {
+	margin-bottom: -10px;
+}
+
+.x-3deye-slider__label {
+	pointer-events: none;
+	touch-action: none;
+	will-change: transform;
+	transform: translate(-50%, -100%) scale(0);
+	background: var(--primary-color, #0067ac);
+	bottom: 50%;
+	left: 50%;
+	color: var(--on-primary-color, white);
+	font-size: 0.75rem;
 	border-radius: 4px;
-	padding: 8px;
-	width: content-width;
+	width: -webkit-fit-content;
+	width: -moz-fit-content;
+	width: fit-content;
+	min-width: 24px;
+	padding: 4px 8px;
+	position: relative;
+	transition: transform 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
+	transform-origin: center bottom;
 }
 
-.box-selector-cancel {
-  pointer-events: auto;
+.x-3deye-slider__label.open,
+.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover .x-3deye-slider__label,
+.x-3deye-slider:focus .x-3deye-slider__label {
+	transform: translate(-50%, -100%) scale(1);
+}
+
+.x-3deye-slider__label::before {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 100%;
+	left: calc(50% - 5px);
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 5px solid var(--primary-color, #0067ac);
 }
 
 .ptz-popover.x-3deye-popover-body {
-  border-radius: 6px;
-  background-color: rgba(15, 15, 20, 0.7);
-  box-shadow: none;
-  color: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  -webkit-backdrop-filter: blur(1px);
-          backdrop-filter: blur(1px);
+	border-radius: 6px;
+	background-color: rgba(15, 15, 20, 0.7);
+	box-shadow: none;
+	color: rgba(255, 255, 255, 0.8);
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	-webkit-backdrop-filter: blur(1px);
+	        backdrop-filter: blur(1px);
 }
 
 .ptz-popover .tip {
-  fill: rgba(15, 15, 20, 0.5);
+	fill: rgba(15, 15, 20, 0.5);
+}
+
+.ptz-popover {
+  --surface-inverse: rgba(255, 255, 255, 0.15);
+	--surface-highlight-rgb: 255, 255, 255;
+	--primary-color: #0067ac;
+	--on-primary-color: white;
 }
 
 .segmented-control-wrapper {
 	display: inline-grid;
 	border-radius: 6px;
-	background: rgba(0, 0, 0, 0.065);
+	/* background: rgba(0, 0, 0, 0.065); */
+  background-color: var(--surface-inverse);
 }
 
 .segmented-control {
@@ -756,3 +824,92 @@
 .segmented-control-button.current {
 	color: black;
 }
+
+.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;
+}
+
+.box-selector-preview {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  margin: 20px 20px 0px 10px;
+}
+
+@-webkit-keyframes expand-box-selector-preview {
+  from {
+    width: 20px;
+    height: 16px;
+  }
+
+  to {
+    width: 50px;
+    height: 30px;
+  }
+}
+
+@keyframes expand-box-selector-preview {
+  from {
+    width: 20px;
+    height: 16px;
+  }
+
+  to {
+    width: 50px;
+    height: 30px;
+  }
+}
+
+.box-selector-preview .box-selector {
+  /* width: 20px;
+  height: 16px; */
+  width: 50px;
+  height: 30px;
+  position: relative;
+  will-change: width, height;
+
+  -webkit-animation-duration: 0.5s;
+
+          animation-duration: 0.5s;
+  -webkit-animation-name: expand-box-selector-preview;
+          animation-name: expand-box-selector-preview;
+}
+
+.box-selector-preview .icon {
+  position: absolute;
+  bottom: -7px;
+  right: -7px;
+}
+
+/* .box-selector-select:hover .box-selector {
+  width: 50px;
+  height: 30px;
+} */
+
+.box-selector-select {
+	color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.5);
+  -webkit-backdrop-filter: blur(2px);
+          backdrop-filter: blur(2px);
+	text-transform: uppercase;
+  font-weight: bold;
+  text-align: center;
+	border-radius: 4px;
+	padding: 8px;
+	width: content-width;
+}
+
+.box-selector-cancel {
+  pointer-events: auto;
+}