/* =========================================================================== Aurora — polish.css · couche de FINITIONS (chargee EN DERNIER) --------------------------------------------------------------------------- Elle surcharge style.css / themes.css / anim.css sans jamais les modifier. Trois chantiers : 1. .msg-actions — la barre d'actions au survol d'un message 2. .control — le dock d'appel, et surtout RACCROCHER 3. #profile-modal — la modale profil telle qu'elle existe dans index.html Regles suivies partout : • aucune couleur en dur hormis --pol-ink (voir plus bas) : uniquement les jetons de theme (--text, --bg-1, --accent, --danger, --sur-accent, --degrade-txt…) et des color-mix() derives ; • seuls transform et opacity sont animes en continu, et AUCUNE animation n'est infinie ; • tout ce qui bouge est neutralise sous prefers-reduced-motion (fin de fichier) ; • rien qui coute a chaque frame : la conversation depasse 100 messages. --------------------------------------------------------------------------- PERIMETRE — a lire avant d'ajouter quoi que ce soit ici --------------------------------------------------------------------------- Ce fichier est charge APRES la feuille de repli que js/settings.js injecte (celle-ci s'insere en TETE de , volontairement, pour perdre les egalites de specificite). Autrement dit : TOUTE regle ecrite ici sur une classe `.set-*` gagne sur le centre de parametres et le casse en silence. Le vocabulaire de settings.js est d'ailleurs different de ce qu'on pourrait supposer (`.set-card` = la carte entiere de la modale, `.set-hero` = un conteneur qui englobe la banniere ET la ligne d'identite, `.set-field` = l' lui-meme, la navigation est `.set-nav button` et non `.set-nav-item`). => on ne style AUCUN `.set-*` depuis ce fichier ; settings.js embarque deja sa propre feuille complete. =========================================================================== */ /* =========================================================================== 0. JETONS LOCAUX --------------------------------------------------------------------------- Prefixe --pol- pour ne jamais entrer en collision avec style.css. Ils sont redefinis pour le theme CLAIR plus bas : les deux systemes de theme cohabitent (bouton lune/soleil = [data-theme], palette = [data-atheme]), il faut donc cibler les deux, exactement comme le fait style.css (l.993). =========================================================================== */ :root { /* Courbe d'assouplissement commune (identique a celle de style.css v5.1). */ --pol-ease: cubic-bezier(.22, 1, .36, 1); /* SEULE valeur litterale du fichier : le noir profond de reference, deja utilise tel quel par l'audit de contraste de style.css (--accent-txt). Ce n'est pas une couleur de theme mais un OUTIL D'ASSOMBRISSEMENT : il doit rester sombre y compris en theme clair (ombres portees, voile pose sur une image televersee). Aucun jeton du projet ne remplit ce role. */ --pol-ink: #05050c; /* Surface OPAQUE et NEUTRE : elle ne doit rien devoir a la couleur de la bulle sur laquelle elle flotte, sinon la pilule d'actions se fond dedans. Deux couleurs opaques melangees restent opaques. */ --pol-surface: color-mix(in srgb, var(--bg-1) 84%, var(--sur-accent) 16%); /* Filet lumineux : un lisere clair qui detache la pilule du fond sombre. */ --pol-hairline: color-mix(in srgb, var(--sur-accent) 24%, transparent); /* Ombre portee franche : un seul plan suffit ici (pilule + avatar). */ --pol-shadow-sm: 0 8px 20px color-mix(in srgb, var(--pol-ink) 60%, transparent); /* Etat de survol / d'appui d'un bouton pose sur une surface neutre. */ --pol-hover: color-mix(in srgb, var(--text) 12%, transparent); --pol-press: color-mix(in srgb, var(--text) 20%, transparent); /* Rouge profond du bouton raccrocher : la teinte reste reconnaissable, le blanc pose dessus repasse largement au-dessus de 4,5:1. */ --pol-danger-1: color-mix(in srgb, var(--danger) 76%, var(--pol-ink)); --pol-danger-2: color-mix(in srgb, var(--danger) 46%, var(--pol-ink)); --pol-danger-halo: color-mix(in srgb, var(--danger) 46%, transparent); /* Boutons du dock d'appel : le dock est peint en dur en sombre par style.css (l.813 : rgba(10,10,22,.55)) QUEL QUE SOIT le theme, parce qu'il flotte au-dessus de la video. On travaille donc en voiles blancs — verifie : le blanc reste au-dessus de 4,5:1 sur ce fond en clair comme en sombre. */ --pol-ctl: color-mix(in srgb, var(--sur-accent) 14%, transparent); --pol-ctl-hover: color-mix(in srgb, var(--sur-accent) 26%, transparent); --pol-ctl-border: color-mix(in srgb, var(--sur-accent) 20%, transparent); } /* Theme clair (les DEUX systemes, cf. style.css l.993). */ [data-theme="light"], html[data-atheme="light"] { --pol-surface: color-mix(in srgb, var(--sur-accent) 88%, var(--bg-0)); --pol-hairline: color-mix(in srgb, var(--text) 14%, transparent); --pol-shadow-sm: 0 8px 20px color-mix(in srgb, var(--text) 16%, transparent); --pol-hover: color-mix(in srgb, var(--text) 9%, transparent); --pol-press: color-mix(in srgb, var(--text) 16%, transparent); } /* =========================================================================== 1. BARRE D'ACTIONS D'UN MESSAGE — .msg-actions --------------------------------------------------------------------------- DOM reel (app.js l.547) : `.msg-actions` est un enfant DIRECT de `.msg.mine|.theirs`, lui-meme `position:relative` (style.css l.291). Les selecteurs `>` ci-dessous sont donc valides. Avant : voile translucide (--glass-3) pose sur une bulle deja coloree, donc illisible ; apparition seche par bascule de `display`. Apres : une VRAIE pilule flottante, opaque, detachee de la bulle par une ombre franche, qui entre en scene (translation + echelle + opacite). Perf : 100+ messages existent en meme temps. On garde donc l'element NON peint (visibility:hidden) et surtout on n'active le flou d'arriere-plan qu'au moment ou la pilule devient visible — un backdrop-filter x100 serait ruineux a chaque frame. =========================================================================== */ .msg-actions { position: absolute; /* Assez haut pour ne mordre que le lisere de la bulle (la pilule fait 37 px : elle deborde donc de 15 px sur le haut du message, comme avant). */ top: -22px; z-index: 4; /* Toujours en `flex` : c'est l'opacite qui pilote l'affichage, pas `display` (une bascule de display ne peut pas etre animee). `.app.select-mode` conserve son `display:none !important` (style.css l.763) : le mode selection reste donc bien exempt de pilule. */ display: flex; align-items: center; gap: 2px; padding: 3px; /* Pilule : rayon plein, fond opaque neutre, filet lumineux, ombre franche. */ border-radius: 999px; background: var(--pol-surface); border: 1px solid var(--pol-hairline); box-shadow: var(--pol-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--sur-accent) 16%, transparent); color: var(--text); /* Le flou n'est branche qu'a l'etat visible (voir plus bas). */ backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(5px) scale(.9); transition: opacity .16s ease, transform .2s var(--pol-ease), visibility 0s linear .16s; /* Petite temporisation avant la disparition : la pilule ne s'evapore pas au premier tremblement de souris. */ transition-delay: .09s, .09s, .25s; } /* Ancrage + origine de l'echelle. DEUX classes obligatoires : anim.css impose sinon son propre transform-origin (`.msg.mine .msg-actions`, l.392) et la pilule grandirait depuis le mauvais coin. */ .msg.mine .msg-actions { right: 2px; left: auto; transform-origin: 100% 100%; } .msg.theirs .msg-actions { left: 2px; right: auto; transform-origin: 0 100%; } /* Zone de survol tolerante. Elle ne deborde presque PAS vers le haut : la pilule chevauche deja la bulle de 15 px (aucun trou a combler), et tout debordement vertical viendrait recouvrir le message PRECEDENT — la pilule etant `pointer-events:auto` une fois visible, elle lui volerait ses clics. Seule la tolerance laterale est utile. */ .msg-actions::before { content: ""; position: absolute; inset: -3px -12px -2px; border-radius: inherit; } /* Etat visible : survol du message, focus clavier, ou pilule elle-meme survolee. */ .msg:hover > .msg-actions, .msg:focus-within > .msg-actions, .msg-actions:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .18s ease, transform .24s var(--pol-ease), visibility 0s; /* Flou d'arriere-plan uniquement ici : cout paye une seule fois, sur la pilule reellement affichee. */ backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } /* Boutons ronds 29 px, icone centree, etats de survol et d'appui nets. */ .msg-actions button { width: 29px; height: 29px; padding: 0; display: grid; place-items: center; border: none; border-radius: 50%; background: transparent; /* Un poil plus contraste que --muted : l'icone doit rester lisible sur la pilule sans hurler avant le survol. */ color: color-mix(in srgb, var(--muted) 55%, var(--text)); cursor: pointer; font-size: .95rem; line-height: 1; transition: background .14s ease, color .14s ease, transform .12s var(--pol-ease); } .msg-actions button:hover { background: var(--pol-hover); color: var(--text); transform: scale(1.08); } .msg-actions button:active { background: var(--pol-press); transform: scale(.9); transition-duration: .06s; } .msg-actions button:focus-visible { outline: none; background: var(--pol-hover); color: var(--text); box-shadow: 0 0 0 2px var(--accent); } .msg-actions .ic { width: 17px; height: 17px; } /* Sur mobile (pas de survol reel), la pilule reste plus grande et plus lisible : un tap doit rester sur. */ @media (hover: none) { .msg-actions button { width: 32px; height: 32px; } .msg-actions button:hover { transform: none; background: transparent; color: color-mix(in srgb, var(--muted) 55%, var(--text)); } } /* =========================================================================== 2. CONTROLES D'APPEL — .control, et surtout RACCROCHER --------------------------------------------------------------------------- Le dock (`.call-controls`, style.css l.813) flotte au-dessus de la video et possede un fond sombre EN DUR, identique dans les deux themes : les controles peuvent donc travailler en voiles blancs sans risque en clair. Objectif : une FAMILLE coherente (repos / actif / coupe / danger) dont RACCROCHER est sans ambiguite le membre le plus visible. =========================================================================== */ /* Le bouton RACCROCHER est plus HAUT que ses voisins : on recentre le dock. */ .call-controls { align-items: center; } /* --- Etat de repos --------------------------------------------------------- */ .call-controls .control { border-radius: 50%; border: 1px solid var(--pol-ctl-border); background: var(--pol-ctl); color: var(--sur-accent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sur-accent) 18%, transparent); transition: transform .16s var(--pol-ease), background .18s ease, border-color .18s ease, box-shadow .18s ease; } .call-controls .control:hover { transform: translateY(-3px); background: var(--pol-ctl-hover); border-color: color-mix(in srgb, var(--sur-accent) 34%, transparent); } .call-controls .control:active { transform: translateY(0) scale(.92); transition-duration: .06s; } /* Anneau de mise au point clavier : blanc au contact + accent a l'exterieur, visible aussi bien sur le dock sombre que sur une pastille coloree. */ .call-controls .control:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sur-accent), 0 0 0 5px color-mix(in srgb, var(--accent) 85%, transparent); } /* --- Etat ACTIF (camera, partage d'ecran, annotation) ---------------------- */ /* --degrade-txt est la version assombrie de l'accent (un linear-gradient, cf. style.css l.942) : la seule qui laisse une icone blanche au-dessus de 4,5:1 sur les 7 palettes. */ .call-controls .control.active { background: var(--degrade-txt); border-color: color-mix(in srgb, var(--sur-accent) 30%, transparent); color: var(--sur-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--sur-accent) 26%, transparent); } .call-controls .control.active:hover { background: var(--degrade-txt); border-color: color-mix(in srgb, var(--sur-accent) 45%, transparent); } /* --- Etat COUPE (micro coupe) ---------------------------------------------- */ /* L'ancien `opacity:.5` rendait l'icone illisible ET ambigu (desactive ?). On passe a une pastille TEINTEE : opaque, lisible, et clairement « coupe ». */ .call-controls .control.off { opacity: 1; background: color-mix(in srgb, var(--danger) 46%, var(--pol-ctl)); border-color: color-mix(in srgb, var(--danger) 70%, transparent); color: var(--sur-accent); } .call-controls .control.off:hover { background: color-mix(in srgb, var(--danger) 60%, var(--pol-ctl)); border-color: color-mix(in srgb, var(--danger) 85%, transparent); } /* --- RACCROCHER : le bouton le plus evident de l'ecran --------------------- */ .call-controls .control.danger { width: 84px; height: 56px; border-radius: 999px; margin-left: 10px; border: 1px solid color-mix(in srgb, var(--sur-accent) 26%, transparent); background: linear-gradient(160deg, var(--pol-danger-1), var(--pol-danger-2)); color: var(--sur-accent); /* Halo colore : la pastille se detache sans aucune animation permanente. */ box-shadow: 0 12px 30px var(--pol-danger-halo), 0 3px 10px color-mix(in srgb, var(--pol-ink) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--sur-accent) 30%, transparent); } .call-controls .control.danger:hover { transform: translateY(-3px); background: linear-gradient(160deg, var(--danger), var(--pol-danger-1)); border-color: color-mix(in srgb, var(--sur-accent) 42%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--danger) 60%, transparent), 0 4px 12px color-mix(in srgb, var(--pol-ink) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--sur-accent) 34%, transparent); } /* Reaction franche a l'appui : la pastille s'ecrase et le halo se retracte. */ .call-controls .control.danger:active { transform: translateY(1px) scale(.93); transition-duration: .06s; box-shadow: 0 4px 12px var(--pol-danger-halo), inset 0 2px 8px color-mix(in srgb, var(--pol-ink) 45%, transparent); } .call-controls .control.danger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sur-accent), 0 0 0 5px color-mix(in srgb, var(--danger) 90%, transparent), 0 12px 30px var(--pol-danger-halo); } /* Combine legerement inclinee : le geste « on raccroche » se lit d'un coup. */ .call-controls .control.danger .ic { width: 26px; height: 26px; transform: rotate(-12deg); transition: transform .18s var(--pol-ease); } .call-controls .control.danger:hover .ic { transform: rotate(-20deg); } /* Le dock est plus HAUT qu'avant (RACCROCHER fait 56 px au lieu de 50) : sans ce recalage, il recouvrirait les vignettes camera (`.tiles`, calees a 78 px par style.css l.823) et masquerait leurs etiquettes. */ .call-window:not(.mini) .tiles { bottom: 96px; } /* --- Version reduite (.call-window.mini) ----------------------------------- */ .call-window.mini .call-controls { gap: 6px; padding: 6px 10px; } .call-window.mini .call-controls .control { width: 40px; height: 40px; } .call-window.mini .call-controls .control .ic { width: 19px; height: 19px; } .call-window.mini .call-controls .control.danger { width: 62px; height: 40px; margin-left: 6px; box-shadow: 0 8px 20px var(--pol-danger-halo), inset 0 1px 0 color-mix(in srgb, var(--sur-accent) 28%, transparent); } .call-window.mini .call-controls .control.danger .ic { width: 20px; height: 20px; } /* --- Plein ecran : dock un peu plus genereux ------------------------------- */ .call-window.fullscreen .call-controls { bottom: 26px; gap: 14px; padding: 11px 16px; } .call-window.fullscreen .call-controls .control.danger { width: 96px; height: 60px; } .call-window.fullscreen .tiles { bottom: 118px; } /* Ecrans etroits : le dock ne doit jamais deborder. */ @media (max-width: 560px) { .call-window:not(.mini) .call-controls { gap: 7px; padding: 8px 10px; } .call-window:not(.mini) .call-controls .control { width: 44px; height: 44px; } .call-window:not(.mini) .call-controls .control .ic { width: 21px; height: 21px; } .call-window:not(.mini) .call-controls .control.danger { width: 68px; height: 48px; margin-left: 6px; } .call-window:not(.mini) .call-controls .control.danger .ic { width: 23px; height: 23px; } .call-window:not(.mini) .tiles { bottom: 86px; } } /* Sur un ecran tactile, :hover reste « colle » apres un tap : on neutralise. */ @media (hover: none) { .call-controls .control:hover { transform: none; } .call-controls .control.danger:hover { transform: none; } .call-controls .control.danger:hover .ic { transform: rotate(-12deg); } } /* =========================================================================== 3. MODALE PROFIL — #profile-modal (balisage reel d'index.html l.267-305) --------------------------------------------------------------------------- Tout est prefixe #profile-modal : aucune autre modale (groupe, sondage, transfert, statut) ne doit bouger, et le centre de parametres de settings.js (`.set-modal`) n'est pas concerne du tout — cf. PERIMETRE en tete de fichier. =========================================================================== */ /* --- 3.1 Banniere ---------------------------------------------------------- */ /* app.js pose l'image televersee en `background-image` inline. Si elle est invalide ou absente, le degrade de style.css (l.378) reste visible : aucun trou. Le voile ci-dessous garantit que le bouton reste lisible QUELLE QUE SOIT l'image choisie. */ #profile-modal .profile-banner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 180deg, transparent 38%, color-mix(in srgb, var(--pol-ink) 52%, transparent) 100% ); pointer-events: none; } /* Le bouton passe AU-DESSUS du voile (sans quoi il serait assombri lui aussi). */ #profile-modal .banner-edit { position: relative; z-index: 1; border-radius: 999px; padding: 8px 14px; font-weight: 650; /* Remplace le rgba(0,0,0,.45) + #fff en dur de style.css par des jetons. */ background: color-mix(in srgb, var(--pol-ink) 55%, transparent); border: 1px solid color-mix(in srgb, var(--sur-accent) 30%, transparent); color: var(--sur-accent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .18s ease, transform .12s var(--pol-ease); } #profile-modal .banner-edit:hover { background: color-mix(in srgb, var(--pol-ink) 74%, transparent); transform: translateY(-2px); } #profile-modal .banner-edit:active { transform: scale(.95); transition-duration: .06s; } #profile-modal .banner-edit:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sur-accent), 0 0 0 4px var(--accent); } /* --- 3.2 Avatar ------------------------------------------------------------ */ /* Deux niveaux de classe pour l'emporter sur `.avatar.big` (style.css l.107) sans toucher a sa taille : on n'ajoute qu'un cadre et un retour au survol. */ #profile-modal .avatar.big { border: 3px solid var(--pol-surface); box-shadow: var(--pol-shadow-sm); transition: transform .16s var(--pol-ease); } #profile-modal .avatar.big:hover { transform: scale(1.04); } #profile-modal .avatar.big:active { transform: scale(.97); transition-duration: .06s; } #profile-modal .avatar.big:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent); } /* --- 3.3 Rythme vertical --------------------------------------------------- */ /* La modale enchaine 6 blocs « intitule + champ » : on les separe un peu plus franchement pour qu'ils se lisent comme des groupes. */ #profile-modal .field-label { margin-top: 14px; } #profile-modal .profile-banner + .profile-avatar-row .field-label { margin-top: 0; } /* La derniere rangee de boutons (Annuler / Enregistrer) est detachee par un filet : c'est la sortie de la modale, elle ne doit pas se confondre avec les reglages qui la precedent. `:last-child` et non `position:sticky` : la carte a 24 px de rembourrage, une barre collante y laisserait une bande morte sous elle. */ #profile-modal .modal-actions:last-child { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } /* --- 3.4 Petites finitions communes a TOUTES les modales ------------------- */ .field-label { font-weight: 650; letter-spacing: .2px; } .modal-card::-webkit-scrollbar { width: 10px; } .modal-card::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } /* =========================================================================== 4. ACCESSIBILITE — mouvement reduit --------------------------------------------------------------------------- Tout ce que ce fichier anime est neutralise ici, y compris l'animation `an-pop` qu'anim.css (l.388) pose sur `.msg:hover .msg-actions` et que son propre bloc `prefers-reduced-motion` ne couvre pas : le `!important` sur `.msg-actions` l'emporte quelle que soit la specificite. La pilule d'actions reste PARFAITEMENT fonctionnelle : elle apparait et disparait, simplement sans translation ni changement d'echelle. =========================================================================== */ @media (prefers-reduced-motion: reduce) { .msg-actions, .msg:hover > .msg-actions, .msg:focus-within > .msg-actions, .msg-actions:hover, .msg-actions button, .call-controls .control, .call-controls .control.danger .ic, #profile-modal .banner-edit, #profile-modal .avatar.big { transition: none !important; animation: none !important; } .msg-actions { transform: none; } .msg-actions button:hover, .msg-actions button:active { transform: none; } .call-controls .control:hover, .call-controls .control:active, .call-controls .control.danger:hover, .call-controls .control.danger:active { transform: none; } .call-controls .control.danger .ic, .call-controls .control.danger:hover .ic { transform: rotate(-12deg); } #profile-modal .banner-edit:hover, #profile-modal .banner-edit:active, #profile-modal .avatar.big:hover, #profile-modal .avatar.big:active { transform: none; } } /* ========================================================================= FINITIONS DU PANNEAU DE REGLAGES Le verre translucide convient a une petite modale posee sur une video, pas a un panneau de reglages dense : le contenu de l'application transparaissait au travers et rendait les libelles difficiles a lire. ========================================================================= */ #settings-modal .set-card, #profile-modal .modal-card.set-shell { background: var(--bg-1); border: 1px solid var(--border); box-shadow: 0 40px 110px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07); } [data-theme="light"] #settings-modal .set-card, html[data-atheme="light"] #settings-modal .set-card { background: #fff; box-shadow: 0 30px 80px rgba(40, 55, 120, .22); } /* La colonne de navigation se detache du contenu. */ #settings-modal .set-nav { background: var(--sunken); border-right: 1px solid var(--border); } /* La grille de themes se deployait en UNE colonne dans le panneau (elle est prevue pour une barre large) : on la remet en grille souple. */ /* `.set-row-ctl` est une boite flex : son enfant `.set-box` se reduisait a la largeur de son contenu (104 px) au lieu d'occuper la ligne. */ #settings-modal .set-row.wide .set-row-ctl { width: 100%; } #settings-modal .set-row.wide .set-box { flex: 1 1 auto; width: 100%; min-width: 0; } #settings-modal .theme-picker, #settings-modal .theme-row { display: grid !important; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; width: 100%; } #settings-modal .theme-picker > *, #settings-modal .theme-row > * { width: auto; } /* ========================================================================= MENU « + » (joindre) — il etait CASSE : 13 options pour 716 px de contenu enfermes dans 287 px avec `overflow: hidden`. Six options etaient simplement inatteignables (le menu se coupait apres « Morpion »). ========================================================================= */ #attach-menu { overflow-y: auto; /* la liste defile au lieu d'etre tronquee */ overscroll-behavior: contain; /* le defilement ne se propage pas a la page */ scrollbar-width: thin; /* Un peu plus haut que les autres panneaux : c'est une LISTE, pas une grille. */ max-height: min(68vh, 520px); padding-right: 6px; } #attach-menu::-webkit-scrollbar { width: 8px; } #attach-menu::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 26%, transparent); border-radius: 999px; } #attach-menu::-webkit-scrollbar-track { background: transparent; } /* Les options ne doivent jamais s'ecraser quand la liste est longue. */ #attach-menu .attach-opt { flex: 0 0 auto; } /* Indice visuel qu'il reste des options en dessous. */ #attach-menu { -webkit-mask-image: none; } @media (max-height: 620px) { #attach-menu { max-height: calc(100dvh - 128px); } } /* ========================================================================= PANNEAU DE REGLAGES — la fenetre changeait de TAILLE a chaque section (« Apparence » est longue, « A propos » tient en trois lignes) : tout sautait sous le curseur. On fige la geometrie, seul le contenu defile. ========================================================================= */ #settings-modal .set-card { height: min(88vh, 760px); /* hauteur STABLE, quelle que soit la section */ max-height: min(88vh, 760px); } #settings-modal .set-main, #settings-modal .set-body { flex: 1 1 auto; min-height: 0; /* sans ca, un enfant flex refuse de retrecir */ overflow-y: auto; overscroll-behavior: contain; } #settings-modal .set-nav { flex: 0 0 auto; overflow-y: auto; } #settings-modal .set-foot, #settings-modal .set-actions { flex: 0 0 auto; } /* En dessous de 720 px de large la navigation passe au-dessus en onglets : la hauteur reste figee, c'est la zone de contenu qui absorbe. */ @media (max-width: 720px) { #settings-modal .set-card { height: 100dvh; max-height: 100dvh; } } /* La scene locale (notre ecran / notre camera en grand) : meme traitement que les scenes distantes, avec un miroir pour la camera — on se voit comme dans une glace, c'est la convention de toutes les applications d'appel. */ #local-stage { width: 100%; height: 100%; object-fit: contain; } #local-stage.cover { object-fit: cover; } #local-stage.mirror { transform: scaleX(-1); } /* Un bouton de controle sans effet doit se VOIR indisponible — mais GRIS, pas rouge : `.off` est le style du micro coupe, l'utiliser pour « indisponible » faisait passer un bouton inerte pour une alerte. */ .control:disabled, .control.indispo { opacity: .32; cursor: default; background: var(--glass-2) !important; background-image: none !important; box-shadow: none !important; filter: grayscale(1); } .control:disabled:hover, .control.indispo:hover { transform: none; }