@jaak.ai/stamps 2.0.0-beta.3 → 2.0.0-dev.17

package/dist/collection/components/my-component/my-component.css

@@ -1,7 +1,5 @@
 :host {
   display: block;
-  width: 100%;
-  height: 100%;
   font-family: system-ui, -apple-system, sans-serif;
   color: #1a1a1a;
 }
@@ -10,8 +8,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 
 h1 {
@@ -24,8 +20,9 @@ h1 {
 .video-container {
   position: relative;
   width: 100%;
-  height: 100%;
-  background: #333;
+  max-width: 640px;
+  aspect-ratio: 1;
+  background: #fff;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   overflow: hidden;
@@ -71,11 +68,11 @@ video {
 
 .card-outline {
   position: absolute;
-  top: var(--mask-center-y, 50%);
-  left: var(--mask-center-x, 50%);
+  top: 50%;
+  left: 50%;
   transform: translate(-50%, -50%);
-  width: var(--mask-width, 88%);
-  height: var(--mask-height, 55%);
+  width: 88%;
+  height: 55%;
   border: none;
   border-radius: 4px;
   background: transparent;
@@ -470,233 +467,6 @@ video {
   transform: translateX(-50%) translateY(0);
 }
 
-/* Camera controls */
-.camera-controls {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 25;
-  display: flex;
-  gap: 8px;
-  pointer-events: auto;
-}
-
-.flip-camera-button {
-  height: 40px;
-  padding: 0 16px;
-  border: none;
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(12px);
-  color: #ffffff;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  white-space: nowrap;
-  min-width: fit-content;
-}
-
-.camera-selector-button {
-  height: 40px;
-  padding: 0 16px;
-  border: none;
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(12px);
-  color: #ffffff;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  white-space: nowrap;
-  min-width: fit-content;
-}
-
-.flip-camera-button:hover,
-.camera-selector-button:hover {
-  background: rgba(0, 0, 0, 0.8);
-  border-color: rgba(255, 255, 255, 0.2);
-  transform: translateY(-1px);
-}
-
-.flip-camera-button:active,
-.camera-selector-button:active {
-  transform: translateY(0);
-  background: rgba(0, 0, 0, 0.9);
-}
-
-/* Camera selector dropdown */
-.camera-selector-dropdown {
-  position: absolute;
-  top: 56px;
-  right: 16px;
-  z-index: 30;
-  background: rgba(0, 0, 0, 0.85);
-  backdrop-filter: blur(20px);
-  border-radius: 12px;
-  min-width: 260px;
-  max-width: 300px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  overflow: hidden;
-  pointer-events: auto;
-  animation: slideInFromTop 0.3s ease-out;
-}
-
-@keyframes slideInFromTop {
-  0% {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.95);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.camera-selector-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.camera-selector-header span {
-  font-weight: 500;
-  color: #ffffff;
-  font-size: 13px;
-  opacity: 0.9;
-}
-
-.close-selector {
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: none;
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 16px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  transition: all 0.2s ease;
-}
-
-.close-selector:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
-}
-
-.camera-list {
-  padding: 4px 0;
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.camera-option {
-  width: 100%;
-  padding: 10px 16px;
-  border: none;
-  background: none;
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.camera-option:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.camera-option.selected {
-  background: rgba(255, 255, 255, 0.12);
-  color: #ffffff;
-}
-
-.camera-label {
-  font-size: 13px;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-right: 8px;
-  font-weight: 400;
-}
-
-.selected-indicator {
-  font-size: 14px;
-  color: #ffffff;
-  opacity: 0.9;
-}
-
-.device-info {
-  padding: 8px 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.device-info small {
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 11px;
-  text-transform: capitalize;
-  font-weight: 400;
-}
-
-/* Responsive design for camera controls */
-@media (max-width: 480px) {
-  .camera-controls {
-    top: 12px;
-    right: 12px;
-    gap: 6px;
-  }
-  
-  .flip-camera-button {
-    height: 36px;
-    padding: 0 12px;
-    font-size: 11px;
-    border-radius: 6px;
-  }
-  
-  .camera-selector-button {
-    height: 36px;
-    padding: 0 12px;
-    font-size: 11px;
-    border-radius: 6px;
-  }
-  
-  .camera-selector-dropdown {
-    right: 12px;
-    top: 48px;
-    min-width: 240px;
-    max-width: calc(100vw - 24px);
-  }
-  
-  .camera-selector-header {
-    padding: 10px 14px;
-  }
-  
-  .camera-option {
-    padding: 8px 14px;
-  }
-  
-  .device-info {
-    padding: 6px 14px;
-  }
-}
-
 /* Marca de agua */
 .watermark {
   position: absolute;