/* public/assets/css/video-capture.css */ /* ========================================================================= Feuille de style DÉDIÉE à la page de capture vidéo (video-upload.php). Activée uniquement quand porte la classe .video-capture-page. v0.3.6 — Layout robuste (corrige Firefox Android) : - Plus de hauteur 100dvh rigide qui laissait un grand espace noir. - Logo collé en haut, pleine largeur de l'écran. - Webcam 4:3 pleine largeur, sans espace noir résiduel. - Boutons empilés, stylés de façon autonome (indépendants de main.css). ========================================================================= */ /* --------------------------------------------------------------------------- 1. Masquage header / footer du site + suppression du scroll horizontal. --------------------------------------------------------------------------- */ .video-capture-page .site-header, .video-capture-page .site-footer { display: none !important; } .video-capture-page .main-content { margin: 0 !important; padding: 0 !important; max-width: none !important; } .video-capture-page { margin: 0; padding: 0; background: #fff; overflow-x: hidden; } /* --------------------------------------------------------------------------- 2. Conteneur : colonne verticale simple, en flux normal (pas de 100dvh). --------------------------------------------------------------------------- */ .vu-wrap { box-sizing: border-box; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 0 16px; display: flex; flex-direction: column; gap: 10px; } .vu-step { display: flex; flex-direction: column; gap: 10px; } /* --------------------------------------------------------------------------- 3. Logo : pleine largeur de l'écran, collé en haut. --------------------------------------------------------------------------- */ .vu-logo { width: 100%; margin: 0; line-height: 0; text-align: center; } .vu-logo img { width: 100%; height: auto; display: block; } .vu-help { text-align: center; color: #666; font-size: 14px; margin: 4px 12px 0; } /* --------------------------------------------------------------------------- 4. Scène vidéo 4:3, pleine largeur. aspect-ratio + fallback padding-top (Firefox Android applique mal aspect-ratio dans certains flex). --------------------------------------------------------------------------- */ .vc-stage { position: relative; width: 100%; background: #000; overflow: hidden; /* Fallback universel : padding-top 75% = ratio 4:3 */ height: 0; padding-top: 75%; } .vc-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .vc-timer { position: absolute; top: 10px; right: 12px; background: rgba(0, 0, 0, .6); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 14px; font-variant-numeric: tabular-nums; z-index: 3; } /* --------------------------------------------------------------------------- 5. Boutons empilés, autonomes. --------------------------------------------------------------------------- */ .vc-bar { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; } .vc-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 15px 18px; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; color: #fff; -webkit-appearance: none; appearance: none; transition: filter .15s; } .vc-btn:hover { filter: brightness(.93); } .vc-btn:active { filter: brightness(.85); } .vc-btn:disabled { opacity: .55; cursor: default; } .vc-btn--record { background: #E30713; } .vc-btn--stop { background: #b01030; } .vc-btn--retake { background: #6c757d; } .vc-btn--validate{ background: #28a745; } .vc-btn--home { background: #495057; } .vc-btn--send { background: #dc143c; } .vc-btn-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; flex: 0 0 auto; } .vc-btn-sq { width: 14px; height: 14px; border-radius: 3px; background: #fff; flex: 0 0 auto; } .vc-status, #vc-status2 { text-align: center; margin: 0 12px; color: #333; min-height: 18px; font-size: 14px; } .vc-status--error { color: #E30713; font-weight: 600; } /* --------------------------------------------------------------------------- 6. Étape 2 : publication. --------------------------------------------------------------------------- */ .vu-publish-video { position: relative; width: 100%; background: #000; overflow: hidden; height: 0; padding-top: 75%; } .vu-publish-video .vc-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .vu-form { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; } .form-group { margin-bottom: 10px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 14px; } .form-group input { width: 100%; padding: 11px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; box-sizing: border-box; } .form-hint { color: #888; font-size: 12px; } .opt { color: #999; font-weight: 400; font-size: 13px; } .vu-publish-bar { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 0 12px; }