/* ==================================================== THE_ARMS — Menu contextuel custom (clic droit) Style aligné sur le design system du site (tokens.css) plutôt que sur la carte "Uiverse.io by Na3ar-17" d'origine (fond dégradé, hover plein rouge) : même langage visuel que .user-menu-dropdown (header, voir layout.css) — surface plate var(--c-surface), bordure var(--c-border-strong), coins 12px, ombre douce, survol en léger voile blanc plutôt qu'un aplat rouge. z-index volontairement très haut (99999) : ce menu doit toujours passer au-dessus de tout le reste, y compris les modales/panneaux qui ont leur propre z-index élevé (recherche, panneau de debug...). Sous-menus (.context-menu-submenu) : un item peut désormais avoir des enfants (voir context-menu.js, item.children) — il se rend alors comme un bouton avec un chevron plutôt qu'une action directe, et ouvre un second panneau (même classes .context-menu-item/-icon/-sep réutilisées à l'intérieur) positionné à côté de lui, en JS (voir openSubmenu()). ==================================================== */ .context-menu { position: fixed; z-index: 99999; min-width: 220px; background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); padding: 6px; font-family: var(--f-body); } .context-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: transparent; color: var(--c-text-muted); font-size: 13.5px; font-family: var(--f-body); text-align: left; border-radius: 8px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .context-menu-item:hover, .context-menu-item.context-menu-submenu-open { background: rgba(255, 255, 255, 0.04); color: var(--c-text); } .context-menu-item.context-menu-disabled { opacity: 0.4; cursor: not-allowed; } .context-menu-item.context-menu-disabled:hover { background: transparent; color: var(--c-text-muted); } .context-menu-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: inherit; } .context-menu-icon svg { width: 16px; height: 16px; } .context-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .context-menu-sep { border-top: 1px solid var(--c-border); margin: 6px 8px; } /* Chevron affiché à droite d'un item qui ouvre un sous-menu (voir item.children dans context-menu.js) plutôt qu'exécuter une action. */ .context-menu-chevron { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--c-text-dim); } .context-menu-chevron svg { width: 14px; height: 14px; } /* Panneau de sous-menu : rendu (masqué/positionné) entièrement en JS via openSubmenu()/closeAllSubmenus() — display géré en inline-style plutôt qu'une classe .open, même logique que le menu principal (openMenu()/closeMenu()) qui bascule "hidden" + un calcul de position borné au viewport. Enfant DOM de .context-menu (pas un sibling ajouté à ) : en position:fixed la position dans le DOM n'affecte pas son placement à l'écran, mais ça simplifie la détection "clic en dehors du menu" (menu.contains(e.target) reste vrai pour un clic dans le sous-menu). */ .context-menu-submenu { display: none; position: fixed; z-index: 99999; min-width: 200px; background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); padding: 6px; font-family: var(--f-body); } /* Entrée "Debug" : rendue comme une checkbox (état persisté entre les pages — voir debug-bar.js) plutôt qu'une simple action ponctuelle. Même palette que les checkbox natives du site (tokens.css) : coché = fond var(--c-red) avec un coche blanc, plutôt que l'inverse (fond blanc / coche rouge) de l'ancien design Uiverse. */ .context-menu-checkbox { flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--c-border-strong); background: var(--c-surface-2); position: relative; transition: background-color 0.15s ease, border-color 0.15s ease; } .context-menu-item:hover .context-menu-checkbox { border-color: var(--c-red-dim); } .context-menu-checkbox.checked { background-color: var(--c-red); border-color: var(--c-red); } .context-menu-checkbox.checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (max-width: 480px) { .context-menu, .context-menu-submenu { min-width: 190px; } }