@visns-studio/visns-components 5.11.3 → 5.11.5

package/src/components/crm/styles/BusinessCardOcr.module.scss

@@ -126,6 +126,9 @@
     border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     margin-bottom: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 
     p {
         margin: 0;
@@ -135,62 +138,91 @@
     }
 }
 
+.autoCaptureToggle {
+    background: rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.05);
+    color: var(--paragraph-color, #333);
+    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.2);
+    border-radius: var(--br, 6px);
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    
+    &:hover {
+        background: rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.1);
+        border-color: var(--primary-color, #007bff);
+    }
+    
+    &.active {
+        background: var(--primary-color, #007bff);
+        color: white;
+        border-color: var(--primary-color, #007bff);
+        
+        &:hover {
+            background: var(--primary-hover, #0056b3);
+        }
+    }
+}
+
 .cameraControls {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-    padding: 1rem;
+    gap: 1.5rem;
+    padding: 1.5rem;
 }
 
 .captureButton {
     background: var(--primary-color, #007bff);
     color: white;
     border: none;
-    border-radius: 50%;
-    width: 80px;
-    height: 80px;
+    border-radius: 12px;
+    padding: 1rem 1.5rem;
+    min-width: 120px;
+    height: 56px;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 0.25rem;
-    font-size: 0.8rem;
+    gap: 0.5rem;
+    font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
-    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 0, 123, 255), 0.3);
+    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 0, 123, 255), 0.25);
+    position: relative;
     
     &:hover:not(:disabled) {
         background: var(--primary-hover, #0056b3);
-        transform: scale(1.05);
-        box-shadow: 0 6px 16px rgba(var(--primary-color-rgb, 0, 123, 255), 0.4);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(var(--primary-color-rgb, 0, 123, 255), 0.35);
+    }
+    
+    &:active {
+        transform: translateY(0);
+        transition: transform 0.1s ease;
     }
     
     &:disabled {
         opacity: 0.6;
         cursor: not-allowed;
+        transform: none;
+        box-shadow: 0 2px 8px rgba(var(--primary-color-rgb, 0, 123, 255), 0.15);
     }
     
     &.focusing {
-        animation: pulse 1s infinite;
-    }
-    padding: 0.5rem 1.25rem;
-    font-size: 0.9rem;
-    font-weight: var(--h-weight, 600);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1);
-
-    &:hover {
-        background: var(--primary-color-dark, #0056b3);
-        transform: translateY(-1px);
-        box-shadow: 0 2px 8px rgba(var(--primary-color-rgb, 0, 123, 255), 0.25);
-    }
-
-    &:active {
-        transform: translateY(0);
+        background: var(--primary-hover, #0056b3);
+        
+        &::after {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            border: 2px solid var(--primary-color, #007bff);
+            border-radius: 14px;
+            animation: focusPulse 1.5s ease-in-out infinite;
+        }
     }
 }
 
@@ -570,23 +602,35 @@
 }
 
 .secondaryButton {
-    background: var(--highlight-color, #f8f9fa);
+    background: rgba(255, 255, 255, 0.95);
     color: var(--paragraph-color, #333);
-    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.2);
-    border-radius: var(--br, 8px);
-    padding: 0.5rem 1rem;
-    font-size: 0.9rem;
-    font-weight: var(--h-weight, 500);
-    cursor: pointer;
+    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.15);
+    border-radius: 12px;
+    padding: 0.75rem 1rem;
+    min-width: 100px;
+    height: 56px;
     display: flex;
     align-items: center;
-    gap: 0.375rem;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1);
-
+    justify-content: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(12px);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+    
     &:hover {
-        background: var(--bg-color, white);
+        background: rgba(255, 255, 255, 1);
         border-color: var(--primary-color, #007bff);
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+        color: var(--primary-color, #007bff);
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+    }
+    
+    &:active {
+        transform: translateY(0);
+        transition: transform 0.1s ease;
     }
 }
 
@@ -605,16 +649,68 @@
     .cameraControls {
         flex-direction: column;
         width: 100%;
-
-        button {
-            width: 100%;
-            justify-content: center;
-        }
+        gap: 1.5rem;
+    }
+    
+    .controlsTop {
+        padding: 0 0.5rem;
     }
 
     .captureButton {
-        padding: 0.6rem 1.5rem;
-        font-size: 1rem;
+        min-width: 100px;
+        height: 48px;
+        font-size: 0.8rem;
+        padding: 0.75rem 1rem;
+    }
+    
+    .controlButton {
+        min-width: 44px;
+        height: 44px;
+        padding: 0.625rem;
+    }
+    
+    .secondaryButton {
+        min-width: 90px;
+        height: 48px;
+        font-size: 0.8rem;
+        padding: 0.75rem 0.875rem;
+    }
+    
+    .controlsBottom {
+        gap: 0.75rem;
+        padding: 0.75rem;
+    }
+    
+    .countdownDisplay {
+        padding: 1rem;
+        
+        .countdownNumber {
+            font-size: 2rem;
+        }
+        
+        .countdownText {
+            font-size: 0.7rem;
+        }
+    }
+    
+    .focusStatus {
+        min-width: 160px;
+        padding: 0.5rem 0.75rem;
+        bottom: -35px;
+        
+        .focusText {
+            font-size: 0.65rem;
+        }
+    }
+    
+    .autoCaptureToggle {
+        font-size: 0.75rem;
+        padding: 0.375rem 0.75rem;
+    }
+    
+    .cameraControls {
+        gap: 1rem;
+        padding: 1rem;
     }
 
     .previewControls,
@@ -938,68 +1034,76 @@
 // Enhanced Camera UI Styles
 .focusFrame {
     position: relative;
-    width: 90%;
-    max-width: 500px;
+    width: 85%;
+    max-width: 400px;
     aspect-ratio: 1.6; // Business card ratio
-    border: 2px solid rgba(255, 255, 255, 0.8);
-    border-radius: 12px;
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    border-radius: 16px;
     background: rgba(0, 0, 0, 0.05);
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: all 0.3s ease;
     
-    &::before {
-        content: '';
-        position: absolute;
-        top: -2px;
-        left: -2px;
-        right: -2px;
-        bottom: -2px;
-        border: 1px solid rgba(255, 255, 255, 0.4);
-        border-radius: 14px;
-        opacity: 0;
-        animation: pulse 2s infinite;
+    &.focused {
+        border-color: #22c55e;
+        background: rgba(34, 197, 94, 0.1);
+        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
+        
+        .focusCorner {
+            border-color: #22c55e;
+        }
+    }
+    
+    &.countingDown {
+        border-color: #f59e0b;
+        background: rgba(245, 158, 11, 0.1);
+        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
+        
+        .focusCorner {
+            border-color: #f59e0b;
+        }
     }
 }
 
 .focusCorner {
     position: absolute;
-    width: 50px;
-    height: 50px;
-    border: 4px solid rgba(255, 255, 255, 0.9);
+    width: 24px;
+    height: 24px;
+    border: 2px solid rgba(255, 255, 255, 0.6);
     background: transparent;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
     
     &.topLeft {
-        top: -25px;
-        left: -25px;
+        top: -12px;
+        left: -12px;
         border-right: none;
         border-bottom: none;
-        border-radius: 16px 0 0 0;
+        border-radius: 8px 0 0 0;
     }
     
     &.topRight {
-        top: -25px;
-        right: -25px;
+        top: -12px;
+        right: -12px;
         border-left: none;
         border-bottom: none;
-        border-radius: 0 16px 0 0;
+        border-radius: 0 8px 0 0;
     }
     
     &.bottomLeft {
-        bottom: -25px;
-        left: -25px;
+        bottom: -12px;
+        left: -12px;
         border-right: none;
         border-top: none;
-        border-radius: 0 0 0 16px;
+        border-radius: 0 0 0 8px;
     }
     
     &.bottomRight {
-        bottom: -25px;
-        right: -25px;
+        bottom: -12px;
+        right: -12px;
         border-left: none;
         border-top: none;
-        border-radius: 0 0 16px 0;
+        border-radius: 0 0 8px 0;
     }
 }
 
@@ -1046,57 +1150,221 @@
 
 .controlsTop {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
-    padding: 0 1rem;
+    gap: 1rem;
+    padding: 0;
 }
 
 .controlsBottom {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     gap: 1rem;
+    padding: 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 16px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .controlButton {
-    background: rgba(0, 0, 0, 0.6);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 48px;
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--paragraph-color, #333);
+    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.15);
+    border-radius: 8px;
+    padding: 0.75rem;
+    min-width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s ease;
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(12px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     
     &:hover {
-        background: rgba(0, 0, 0, 0.8);
-        transform: scale(1.05);
+        background: rgba(255, 255, 255, 1);
+        border-color: var(--primary-color, #007bff);
+        color: var(--primary-color, #007bff);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+    
+    &:active {
+        transform: translateY(0);
+        transition: transform 0.1s ease;
     }
     
     &.active {
         background: var(--primary-color, #007bff);
+        border-color: var(--primary-color, #007bff);
         color: white;
+        box-shadow: 0 3px 10px rgba(var(--primary-color-rgb, 0, 123, 255), 0.3);
         
         &:hover {
             background: var(--primary-hover, #0056b3);
+            border-color: var(--primary-hover, #0056b3);
+            color: white;
+            box-shadow: 0 4px 14px rgba(var(--primary-color-rgb, 0, 123, 255), 0.4);
         }
     }
 }
 
-.placeholder {
-    width: 48px; // Same as controlButton for balance
-}
+// Remove placeholder - not needed with centered layout
 
 @keyframes pulse {
     0%, 100% { opacity: 0; transform: scale(1); }
     50% { opacity: 0.3; transform: scale(1.02); }
 }
 
+@keyframes focusPulse {
+    0%, 100% { 
+        transform: scale(1);
+        box-shadow: 0 4px 20px rgba(var(--primary-color-rgb, 0, 123, 255), 0.4);
+    }
+    50% { 
+        transform: scale(1.02);
+        box-shadow: 0 6px 25px rgba(var(--primary-color-rgb, 0, 123, 255), 0.6);
+    }
+}
+
+@keyframes ringPulse {
+    0%, 100% { 
+        opacity: 0.3;
+        transform: scale(1);
+    }
+    50% { 
+        opacity: 0.8;
+        transform: scale(1.1);
+    }
+}
+
 @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
 }
+
+@keyframes focusedPulse {
+    0%, 100% { 
+        opacity: 0.8;
+        transform: scale(1);
+    }
+    50% { 
+        opacity: 1;
+        transform: scale(1.02);
+    }
+}
+
+@keyframes countdownPulse {
+    0%, 100% { 
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
+    }
+    50% { 
+        transform: scale(1.02);
+        box-shadow: 0 0 0 10px rgba(255, 152, 0, 0);
+    }
+}
+
+// Countdown Display
+.countdownDisplay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(0, 0, 0, 0.9);
+    color: white;
+    border-radius: 16px;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(10px);
+    border: 2px solid #f59e0b;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    z-index: 10;
+}
+
+.countdownNumber {
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 0.5rem;
+}
+
+.countdownText {
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    opacity: 0.8;
+}
+
+@keyframes countdownScale {
+    0%, 100% { transform: translate(-50%, -50%) scale(1); }
+    50% { transform: translate(-50%, -50%) scale(1.05); }
+}
+
+// Focus Status
+.focusStatus {
+    position: absolute;
+    bottom: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(0, 0, 0, 0.9);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    min-width: 180px;
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.focusBar {
+    width: 100%;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+    overflow: hidden;
+    
+    &.good {
+        background: rgba(34, 197, 94, 0.3);
+    }
+    
+    &.poor {
+        background: rgba(239, 68, 68, 0.3);
+    }
+}
+
+.focusBarFill {
+    height: 100%;
+    background: #22c55e;
+    border-radius: 2px;
+    transition: width 0.3s ease;
+    
+    .focusBar.poor & {
+        background: #ef4444;
+    }
+}
+
+.focusText {
+    font-size: 0.7rem;
+    font-weight: 500;
+    
+    .focusBar.good ~ & {
+        color: #22c55e;
+    }
+    
+    .focusBar.poor ~ & {
+        color: #f59e0b;
+    }
+}