// Critical CSS injected at SDK init (see ZenidWebController.loadEssentialCss). // Inlined so the SDK works under bundlers without a runtime fetch — edit here directly. export const zenidSdkCss = `/* Essential styles required for proper SDK functionality. */ /* MsLiveness wrapper - handles iOS safe area and full-screen positioning */ azure-ai-vision-face-ui-wrapper { position: fixed; top: 0; left: 0; width: 100vw; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; bottom: env(safe-area-inset-bottom); z-index: 999; background: white; } [data-zenid-camera-feed] { z-index: 1; position: fixed; top: 0; left: 0; width: 100dvw; height: 100dvh; touch-action: pan-y; } [data-zenid-camera-feed] video, [data-zenid-camera-feed] canvas { position: absolute; inset: 0; width: 100%; height: 100%; } [data-zenid-camera-feed] video { object-fit: cover; z-index: 1; touch-action: pan-y; } [data-zenid-camera-feed] canvas { pointer-events: none; z-index: 2; } [data-zenid-roi] { position: absolute; z-index: 3; left: 0; width: 100%; } /* Web camera video element styles */ .zenid-camera-video { width: 100%; height: 100%; object-fit: cover; } .zenid-camera-video-mirrored { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } /* iOS native camera modal styles */ .zenid-ios-camera-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 10000; } .zenid-ios-camera-wrapper { display: flex; flex-direction: column; align-items: center; } .zenid-ios-camera-label { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 40px; background: white; border-radius: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .zenid-ios-camera-text { margin-top: 20px; font-size: 18px; color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .zenid-ios-camera-cancel { margin-top: 30px; padding: 10px 30px; color: black; background: #f0f0f0; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; } /* === iOS Scroll Momentum Fix === */ /* Fix for iOS where scrolling "doesn't hold" - ensures proper momentum scrolling */ @supports (-webkit-touch-callout: none) { azure-ai-vision-face-ui-wrapper { scroll-behavior: auto; overscroll-behavior: contain; } }`;