Spaces:
Sleeping
Sleeping
| /** | |
| * WebcamPreview Styles | |
| * | |
| * Small floating camera preview at bottom-right of avatar panel | |
| * Glass morphism design with smooth animations | |
| */ | |
| /* =================================== | |
| WEBCAM PREVIEW CONTAINER | |
| =================================== */ | |
| .webcam-preview { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 100; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: | |
| 0 8px 32px rgba(0, 0, 0, 0.3), | |
| 0 2px 8px rgba(0, 0, 0, 0.2), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| backdrop-filter: blur(8px); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Compact Size (default) */ | |
| .webcam-preview.compact { | |
| width: 120px; | |
| height: 90px; | |
| } | |
| /* Expanded Size */ | |
| .webcam-preview.expanded { | |
| width: 200px; | |
| height: 150px; | |
| } | |
| /* Hidden Mode - Just show toggle button */ | |
| .webcam-preview.hidden-mode { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background: rgba(0, 0, 0, 0.6); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Hover Effects */ | |
| .webcam-preview:hover { | |
| box-shadow: | |
| 0 12px 40px rgba(0, 0, 0, 0.4), | |
| 0 4px 12px rgba(0, 0, 0, 0.3), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.15); | |
| border-color: rgba(255, 255, 255, 0.25); | |
| } | |
| .webcam-preview:hover .webcam-controls { | |
| opacity: 1; | |
| } | |
| /* =================================== | |
| VIDEO CONTAINER | |
| =================================== */ | |
| .webcam-video-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%); | |
| } | |
| .webcam-video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transform: scaleX(-1); /* Mirror mode - natural self-view */ | |
| display: block; | |
| } | |
| /* No Camera Fallback */ | |
| .webcam-no-video { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2a 100%); | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .webcam-no-video span { | |
| font-size: 10px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| /* =================================== | |
| CONNECTION STATUS INDICATOR | |
| =================================== */ | |
| .webcam-status { | |
| position: absolute; | |
| top: 8px; | |
| left: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .webcam-status .status-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| .webcam-status.connected .status-dot { | |
| background: #22c55e; | |
| box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); | |
| } | |
| .webcam-status.disconnected .status-dot { | |
| background: #ef4444; | |
| box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); | |
| animation: none; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| transform: scale(1.1); | |
| } | |
| } | |
| /* =================================== | |
| CONTROLS OVERLAY | |
| =================================== */ | |
| .webcam-controls { | |
| position: absolute; | |
| top: 4px; | |
| right: 4px; | |
| display: flex; | |
| gap: 4px; | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .webcam-btn { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 6px; | |
| border: none; | |
| background: rgba(0, 0, 0, 0.6); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| backdrop-filter: blur(4px); | |
| } | |
| .webcam-btn:hover { | |
| background: rgba(0, 0, 0, 0.8); | |
| transform: scale(1.05); | |
| } | |
| .webcam-btn:active { | |
| transform: scale(0.95); | |
| } | |
| /* =================================== | |
| LABEL | |
| =================================== */ | |
| .webcam-label { | |
| position: absolute; | |
| bottom: 6px; | |
| left: 6px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 2px 6px; | |
| background: rgba(0, 0, 0, 0.6); | |
| border-radius: 4px; | |
| color: white; | |
| font-size: 9px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| backdrop-filter: blur(4px); | |
| } | |
| /* =================================== | |
| SHOW BUTTON (Hidden Mode) | |
| =================================== */ | |
| .webcam-show-btn { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| background: transparent; | |
| color: rgba(255, 255, 255, 0.8); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .webcam-show-btn:hover { | |
| color: white; | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| /* =================================== | |
| DARK THEME ADJUSTMENTS | |
| =================================== */ | |
| [data-theme="dark"] .webcam-preview { | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| /* =================================== | |
| RESPONSIVE ADJUSTMENTS | |
| =================================== */ | |
| @media (max-width: 768px) { | |
| .webcam-preview { | |
| bottom: 12px; | |
| right: 12px; | |
| } | |
| .webcam-preview.compact { | |
| width: 100px; | |
| height: 75px; | |
| } | |
| .webcam-preview.expanded { | |
| width: 150px; | |
| height: 112px; | |
| } | |
| } | |
| /* =================================== | |
| FULLSCREEN MODE ADJUSTMENTS | |
| =================================== */ | |
| :fullscreen .webcam-preview, | |
| :-webkit-full-screen .webcam-preview { | |
| bottom: 24px; | |
| right: 24px; | |
| } | |
| :fullscreen .webcam-preview.compact, | |
| :-webkit-full-screen .webcam-preview.compact { | |
| width: 140px; | |
| height: 105px; | |
| } | |
| :fullscreen .webcam-preview.expanded, | |
| :-webkit-full-screen .webcam-preview.expanded { | |
| width: 240px; | |
| height: 180px; | |
| } | |