/* ── Reel Workshop — éditeur de timeline ─────────────────────────────────── */ .rw-wrap { padding: 12px 16px 100px; } .rw-rotate-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); font-size: 12px; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; } .rw-rotate-banner.hidden { display: none; } .rw-rotate-close { background: none; border: none; color: inherit; font-size: 14px; cursor: pointer; padding: 2px 6px; line-height: 1; } /* Largeur quasi pleine (débord sur le padding latéral de .rw-wrap) — la hauteur suit le ratio choisi (voir .format-916/.format-169) sans plafond en orientation portrait : sur un écran de téléphone, un aperçu 9:16 pleine largeur est nécessairement haut, le reste de l'écran (timeline, actions) passe en dessous de la ligne de flottaison, comme les autres écrans de l'app qui scrollent déjà (voir .screen.active). */ .rw-preview { position: relative; width: calc((100% + 28px) * 0.7); margin: 0 auto 10px; background: #000; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .rw-preview.format-916 { aspect-ratio: 9/16; } .rw-preview.format-169 { aspect-ratio: 16/9; } /* Absolu + inset:0 (plutôt que le centrage flex du parent) pour pouvoir superposer le calque flouté de fond ET le calque net de premier plan en même temps. */ .rw-preview video, .rw-preview img, .rw-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* Sélecteur à 2 classes exprès : plus spécifique que ".rw-preview video/img/canvas" ci-dessus (piège de cascade déjà rencontré dans ce fichier — un simple ".rw-preview-bg" de même poids perdrait sinon face à la règle générale et resterait object-fit:contain). */ .rw-preview .rw-preview-bg { object-fit: cover; filter: blur(18px) brightness(0.55); transform: scale(1.15); } /* Sur PC, le moniteur casse la colonne étroite façon app mobile (#main-app fait 680px de large, fixe au-delà de ce seuil — voir index.css) pour tripler sa taille. `margin:auto` ne suffit pas ici : dès que la largeur dépasse celle du conteneur, la spec CSS remet les marges auto à zéro plutôt que de centrer avec des valeurs négatives (vérifié en pratique) — d'où ces marges fixes calculées à la main : (largeur de #main-app − largeur voulue)/2 − padding de .rw-wrap, ce qui centre le moniteur sur la fenêtre quelle que soit sa taille (la dérivation ne dépend pas de la largeur de la fenêtre tant que #main-app reste fixe à 680px, voir preuve dans l'historique). */ @media (min-width: 700px) { .rw-preview { width: 355px; margin-left: 146.5px; margin-right: 146.5px; } } /* Fenêtre flottante desktop (≥1024px, voir layout-desktop.css) : #main-app n'est plus une colonne fixe à 680px mais remplit le viewport, donc les marges calculées à la main ci-dessus ne centrent plus rien correctement — un simple margin:auto suffit maintenant que le conteneur est large et flexible. Seul le format 16:9 est doublé (710px, x2 de 355px) : il restait minuscule dans la nouvelle fenêtre (~200px de haut à 355px de large) ; le 9:16 garde sa taille d'origine (déjà haut vu son ratio, x2 serait énorme). */ @media (min-width: 1024px) { .rw-preview { margin-left: auto; margin-right: auto; } .rw-preview.format-169 { width: 710px; } /* -40% : la card Paramètres prenait toute la largeur de .rw-wrap (donc de la fenêtre flottante desktop), beaucoup trop large pour un simple menu déroulant/quelques sliders. */ .rw-effect-panel { width: 60%; margin-left: auto; margin-right: auto; } } .rw-empty-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 13px; color: rgba(var(--text-rgb),0.4); } .rw-preview-playbtn { position: absolute; bottom: 10px; left: 10px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; } .rw-format-tabs { display: flex; gap: 8px; margin-bottom: 10px; } .rw-format-tab { flex: 1; padding: 7px 4px; border-radius: 8px; text-align: center; cursor: pointer; background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2); color: rgba(var(--text-rgb),0.6); font-size: 12px; font-weight: 600; } .rw-format-tab.active { background: rgba(var(--accent-rgb),0.22); border-color: var(--accent); color: var(--accent); } /* Doit rester APRÈS la définition de base ci-dessus : même spécificité (un seul sélecteur de classe), donc à égalité c'est l'ordre dans le fichier qui décide — placé avant, la règle de base regagnait la main malgré la media query qui matchait (bug déjà vécu une fois ici). */ @media (min-width: 1024px) { .rw-format-tabs { justify-content: center; } .rw-format-tab { flex: none; padding: 7px 16px; } } .rw-duration-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(var(--accent-rgb),0.12); overflow: hidden; margin-bottom: 4px; } .rw-duration-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.15s, background 0.15s; } .rw-duration-fill.rw-over { background: #e08080; } .rw-duration-label { font-size: 10px; color: rgba(var(--text-rgb),0.4); text-align: right; margin-bottom: 10px; } /* Paysage MOBILE uniquement (borné à max-width:699px, le seuil desktop utilisé ailleurs dans ce fichier) : l'aperçu redescend en priorité de hauteur pour rapprocher la timeline (qui a justement intérêt à être proche du moniteur pour un montage précis en une seule vue), et passe d'un cadre 9:16 (trop haut, inadapté à l'orientation) à un format proche d'un moniteur 16:9 — dimensionné par la hauteur (pas la largeur) pour ne pas déborder verticalement. Sans le plafond de largeur, un écran de PC (qui est "landscape" lui aussi) déclencherait cette compaction pensée pour un téléphone couché et écraserait l'agrandissement desktop ci-dessus. */ @media (orientation: landscape) and (max-width: 699px) { .rw-wrap { padding-top: 6px; } /* Le ratio (9:16 ou 16:9) vient toujours de .format-916/.format-169 — ici on ne contraint que la taille (hauteur pilote, largeur suit) pour redonner de la place à la timeline quand l'écran du téléphone est physiquement en paysage, quel que soit le format de Reel choisi. */ .rw-preview { width: auto; height: 26vh; max-height: 140px; margin: 0 auto 4px; } .rw-duration-label { margin-bottom: 4px; } } .rw-timeline { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-top: 32px; padding-bottom: 4px; touch-action: pan-x; } .rw-transitions-track { position: relative; height: 26px; display: flex; align-items: center; } /* Même cadre que .rw-audio-track plus bas (padding/border/radius identiques) — pour que la piste vidéo ait le même repère visuel de "case" que la piste musique juste en dessous. */ .rw-clips-track { display: flex; align-items: stretch; min-height: 64px; position: relative; padding: 4px; border-radius: 10px; border: 1px solid rgba(var(--accent-border-rgb),0.25); } .rw-clip { position: relative; height: 64px; border-radius: 8px; overflow: hidden; background: var(--bg-card) center/cover no-repeat; border: 2px solid transparent; flex-shrink: 0; cursor: pointer; touch-action: pan-x; /* laisse le scroll natif de la piste tant que le clip n'est pas sélectionné */ } /* Un clip sélectionné capte lui-même le geste (réordonnancement par drag) — le scroll natif reste disponible ailleurs sur la piste (clips non sélectionnés, piste transitions). */ .rw-clip.selected { border-color: var(--accent); touch-action: none; } .rw-clip-label { position: absolute; bottom: 2px; left: 4px; font-size: 9px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); pointer-events: none; } .rw-clip-handle { position: absolute; top: 0; bottom: 0; width: 14px; background: rgba(var(--accent-rgb),0.92); display: flex; align-items: center; justify-content: center; touch-action: none; z-index: 2; } .rw-clip-handle.left { left: 0; border-radius: 6px 0 0 6px; } .rw-clip-handle.right { right: 0; border-radius: 0 6px 6px 0; } .rw-clip-handle::after { content: ''; width: 3px; height: 18px; background: var(--bg-elevated); border-radius: 2px; } .rw-clip-delete { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #e08080; color: #fff; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; } .rw-add-clip { flex-shrink: 0; width: 44px; height: 64px; border-radius: 8px; border: 2px dashed rgba(var(--accent-rgb),0.4); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; } .rw-add-clip.rw-disabled { opacity: 0.3; pointer-events: none; } /* Barre de progression d'un lot d'imports en cours — remplace les vignettes individuelles le temps que tout le lot soit prêt (voir _rwPendingBatch dans reelworkshop.js). */ .rw-batch-progress { flex-shrink: 0; width: 210px; height: 64px; border-radius: 8px; padding: 8px 10px; background: rgba(var(--accent-rgb),0.08); border: 1px dashed rgba(var(--accent-rgb),0.4); display: flex; flex-direction: column; justify-content: center; gap: 6px; } .rw-batch-progress-label { font-size: 10px; font-weight: 600; color: rgba(var(--text-rgb),0.6); text-align: center; } .rw-batch-progress-bar { height: 4px; border-radius: 2px; background: rgba(var(--accent-rgb),0.15); overflow: hidden; } .rw-batch-progress-fill { height: 100%; background: var(--accent); transition: width 0.2s; } /* Indicateur passif "ce clip a du son" — sous la piste clips, au-dessus de la piste musique. Pas d'interaction (le son est déjà mixé automatiquement au rendu), juste une bande colorée pour la lisibilité de la timeline. */ .rw-clip-audio-track { display: flex; align-items: stretch; height: 6px; margin-top: 4px; } .rw-clip-audio-bar { flex-shrink: 0; height: 6px; border-radius: 3px; background: rgba(var(--accent-rgb),0.5); } /* Piste audio, sous la piste de médias — partage le même scroll horizontal (piste parente #rw-timeline) donc reste alignée avec elle sans logique de synchronisation supplémentaire. Cadre autour de la piste pour bien la distinguer sur petit écran ; le bouton de suppression est un élément de flux APRÈS le clip (pas superposé dessus, contrairement au clip vidéo) — plus facile à toucher précisément sans risquer de déclencher un drag de repositionnement. */ .rw-audio-track { margin-top: 6px; padding: 4px; border-radius: 10px; border: 1px solid rgba(var(--accent-border-rgb),0.25); display: flex; align-items: center; gap: 8px; min-height: 40px; } .rw-audio-empty { height: 32px; border-radius: 8px; border: 2px dashed rgba(var(--accent-rgb),0.3); color: rgba(var(--accent-rgb),0.8); font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .rw-audio-clip { position: relative; height: 32px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.25); cursor: grab; touch-action: none; } .rw-audio-clip svg { position: absolute; inset: 0; } .rw-audio-label { position: absolute; top: 2px; left: 6px; font-size: 9px; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,0.6); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 12px); } .rw-audio-handle { position: absolute; top: 0; bottom: 0; width: 10px; background: rgba(var(--accent-rgb),0.9); touch-action: none; z-index: 3; } .rw-audio-handle.left { left: 0; border-radius: 6px 0 0 6px; } /* Croix de suppression posée DANS le clip, contre son bord droit. En élément frère (juste après le clip dans la piste flex) elle tombait au milieu de la timeline dès que la musique était plus courte que le montage, collée à la poignée de trim : on la visait en croyant rallonger la musique, et on supprimait la piste. */ .rw-audio-remove { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); z-index: 4; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: #e08080; color: #fff; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Zone de préhension élargie (24px) centrée sur la position réelle (margin-left:-12px) — le trait visuel, lui, reste fin (::after) pour ne pas paraître épais sur la piste. */ .rw-playhead { position: absolute; top: 26px; bottom: 4px; width: 24px; margin-left: -12px; z-index: 4; pointer-events: auto; touch-action: none; left: 0; cursor: grab; } .rw-playhead::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.6); transform: translateX(-50%); } /* Timecode courant / durée totale, centré tout en haut de la piste (dans la marge réservée par padding-top de .rw-timeline) — indépendant de la position du playhead, toujours au même endroit. */ .rw-timecode { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: rgba(var(--text-rgb),0.85); background: rgba(0,0,0,0.35); padding: 2px 8px; border-radius: 6px; z-index: 6; pointer-events: none; font-variant-numeric: tabular-nums; white-space: nowrap; } .rw-playhead::before { content: ''; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translateX(-50%); } /* Repère d'aimantation — n'apparaît que pendant le glissement d'un bloc de texte accroché sur une limite de clip (voir _rwSetSnapGuide dans reelworkshop-text.js). */ .rw-snap-guide { position: absolute; top: 0; bottom: 4px; width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 4px rgba(var(--accent-rgb),0.8); z-index: 5; pointer-events: none; } .rw-snap-guide.hidden { display: none; } .rw-trans-btn, .rw-trans-token { width: 24px; height: 24px; border-radius: 50%; font-size: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0 -12px; z-index: 3; position: relative; } .rw-trans-btn { background: var(--bg-card); border: 1px solid rgba(var(--accent-rgb),0.4); color: var(--accent); } .rw-trans-token { background: var(--accent); color: var(--bg-elevated); font-size: 11px; } .rw-clip-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin: -2px 0 8px; } .rw-clip-toolbar.hidden { display: none; } .rw-clip-tool-btn { width: 32px; height: 32px; border-radius: 8px; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Piste texte, au-dessus de la piste média (clips/transitions) — mêmes conventions de largeur/défilement que la piste clips (accumulation de _rwClipWidth) pour rester visuellement synchronisée avec elle, même si le temps réel qu'elle représente peut légèrement s'écarter à cause de l'arrondi minimal de largeur des clips très courts (_rwClipWidth a un plancher de 28px). */ .rw-text-track { position: relative; min-height: 22px; margin-bottom: 6px; } .rw-text-track-row { position: relative; height: 22px; } .rw-text-track-row + .rw-text-track-row { margin-top: 4px; } .rw-text-block { position: absolute; top: 0; height: 22px; border-radius: 6px; overflow: hidden; background: rgba(var(--accent-rgb),0.25); border: 1px solid rgba(var(--accent-rgb),0.5); color: var(--accent); font-size: 9px; display: flex; align-items: center; padding: 0 6px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; touch-action: none; z-index: 2; } .rw-text-block-handle { position: absolute; top: 0; bottom: 0; width: 10px; background: rgba(var(--accent-rgb),0.9); touch-action: none; z-index: 3; } .rw-text-block-handle.left { left: 0; border-radius: 6px 0 0 6px; } .rw-text-block-handle.right { right: 0; border-radius: 0 6px 6px 0; } /* Crayon de ré-édition, posé DANS le bloc, juste a gauche de la poignée droite : .rw-text-block a overflow:hidden, tout ce qui déborde y serait rogné. */ .rw-text-block-edit { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: rgba(var(--accent-rgb),0.9); color: var(--bg-elevated); font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 4; cursor: pointer; } /* Réserve la place des deux icônes pour que le libellé s'ellipse avant de passer dessous. */ .rw-text-block > span { margin-right: 42px; } /* Croix ramenée DANS le bloc elle aussi : posée en débordement (top/right négatifs) elle était rognée aux trois quarts par le overflow:hidden du bloc. Placée à GAUCHE du crayon, donc la plus éloignée de la poignée de redimensionnement — c'est l'action irréversible des trois. */ .rw-text-block-delete { position: absolute; top: 50%; right: 33px; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: #e08080; color: #fff; font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 4; cursor: pointer; } /* Contrôles de zoom, centrés juste sous la piste de musique — remplace le pincement à deux doigts sur la timeline (retiré : peu fiable, en particulier sur trackpad/souris). */ .rw-zoom-controls { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0; } .rw-zoom-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(var(--text-rgb),0.4); } .rw-zoom-btns { display: flex; gap: 8px; } .rw-zoom-btn { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); font-size: 16px; cursor: pointer; } .rw-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; } /* Plus étroit que .btn-full générique (width:100%), centré, et recoloré dans le rose utilisé partout ailleurs dans l'interface (var(--accent), pas le magenta plus saturé de .btn-full) — l'id l'emporte sur cette classe partagée sans avoir à la toucher ailleurs dans l'app. */ #rw-finish-btn { width: auto; min-width: 220px; background: var(--accent); box-shadow: 0 0 30px -6px rgba(var(--accent-rgb),0.45); } #rw-finish-btn:hover { filter: brightness(1.12); } /* Boutons "Compris"/"J'ai compris" des modales d'info (limite de pistes de texte, avertissement d'enregistrement) — même recoloration que #rw-finish-btn ci-dessus : ce sont de simples accusés de réception, pas des CTA de publication, donc l'accent "validation" (var(--accent)), pas le magenta plus saturé de .btn-full. */ .rw-ack-btn { background: var(--accent); box-shadow: 0 0 30px -6px rgba(var(--accent-rgb),0.45); } .rw-ack-btn:hover { filter: brightness(1.12); } /* Barre de progression simulée pendant le rendu — pas de vrai flux de progression côté serveur (le rendu ffmpeg est un simple appel HTTP bloquant), juste un retour visuel crédible. */ .rw-render-progress { margin-top: 10px; } .rw-render-progress.hidden { display: none; } .rw-render-progress-bar { position: relative; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(var(--accent-rgb),0.12); } .rw-render-progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.2s linear; } .rw-render-progress-label { font-size: 11px; color: rgba(var(--text-rgb),0.5); text-align: center; margin-top: 6px; } .rw-transition-popover { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--bg-elevated); border: 1px solid rgba(var(--accent-border-rgb),0.3); border-radius: 12px; padding: 14px; z-index: 200; width: 260px; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .rw-transition-popover.hidden { display: none; } .rw-transition-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .rw-transition-options { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; max-height: 38vh; overflow-y: auto; } .rw-transition-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; padding: 5px; border-radius: 8px; background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2); color: rgba(var(--text-rgb),0.7); font-size: 9px; text-align: center; line-height: 1.2; cursor: pointer; } .rw-transition-opt video { width: 54px; height: 54px; border-radius: 6px; object-fit: cover; background: #000; pointer-events: none; } .rw-transition-opt.active { background: rgba(var(--accent-rgb),0.25); border-color: var(--accent); color: var(--accent); } .rw-transition-dur-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; color: rgba(var(--text-rgb),0.5); } .rw-transition-dur-row input[type="range"] { flex: 1; } /* Panneau de paramètres, sous les timelines (pas un popover flottant — contrairement au picker de transitions, l'utilisateur y revient pour ajuster, une zone fixe est plus confortable qu'un popover qu'il faudrait rouvrir à chaque changement de sens). Deux menus déroulants empilés : type d'animation, puis sens (le second n'apparaît que si un type est choisi). */ .rw-effect-panel { background: var(--bg-card); border: 1px solid rgba(var(--accent-border-rgb),0.2); border-radius: 10px; padding: 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .rw-effect-panel.hidden { display: none; } .rw-effect-panel-maintitle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(var(--text-rgb),0.4); margin-bottom: 2px; } .rw-effect-panel-title { font-size: 12px; font-weight: 700; color: var(--text); } .rw-effect-panel-empty { font-size: 12px; color: rgba(var(--text-rgb),0.4); line-height: 1.5; } .rw-effect-panel-empty.hidden { display: none; } .rw-effect-select { width: 100%; padding: 8px 10px; border-radius: 8px; background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.25); color: var(--text); font-size: 13px; } .rw-effect-select.hidden { display: none; } /* Le fond translucide ci-dessus ne s'applique qu'au select fermé — la liste déroulante ouverte (élément