/* File: ergo_button.css - Système de boutons ergonomiques réutilisables * Desc: Styles CSS pour des boutons circulaires avec états checked/selected/unselected * Version 1.1.0 * Copyright 2025 DNAvatar.org - Arnaud Maignan * Licensed under Apache License 2.0 with Commons Clause. * See LICENSE_HEADER.txt for full terms. * Date: [June 08, 2025] [HH:MM UTC+1] * Logs: * - Initial version: extraction du système de boutons du diagramme de flux * - Externalisation des couleurs de l'animation event-logo-pulse-img */ /* ========================================================================== Variables CSS pour les animations ========================================================================== */ :root { /* Couleurs pour l'animation event-logo-pulse-img (météorite / boutons SCENARIO) — glow rouge */ --event-pulse-in: rgba(0, 0, 0, 1); --event-pulse-out-min: rgba(80, 255, 226, 0.6); --event-pulse-out-mid: rgba(255, 255, 0, 0.95); --event-pulse-out-shadow-min: rgba(60, 248, 255, 0.4); --event-pulse-out-shadow-max: rgba(251, 255, 0, 0.85); } /* ========================================================================== Conteneur du bouton ========================================================================== */ .ergo-button-cell { pointer-events: none; } /* Désactiver les pointer-events sur les éléments enfants pour qu'ils ne bloquent pas le hover */ .ergo-button-cell > *:not(.ergo-button-circle) { pointer-events: none; } /* ========================================================================== Cercle cliquable du bouton ========================================================================== */ .ergo-button-cell .ergo-button-circle { pointer-events: auto; transition: filter 0.3s ease, text-shadow 0.3s ease; /* Désactiver les effets visuels du cercle pour les boutons */ box-shadow: none !important; backdrop-filter: none !important; border: none !important; background: transparent !important; /* Par défaut : gris */ filter: grayscale(100%); /* Contour blanc autour du logo (emoji) - ne change pas au rollover */ text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.7), 0 0 6px rgba(255, 255, 255, 0.5); /* Curseur pointer uniquement sur le cercle */ cursor: pointer !important; /* Limiter la zone cliquable à la taille exacte du cercle */ border-radius: 50%; /* S'assurer que la zone cliquable ne dépasse pas */ overflow: hidden; /* Forcer la taille à être exactement celle définie */ box-sizing: border-box; /* S'assurer que le cercle est positionné de manière absolue */ position: absolute; /* Limiter la zone cliquable aux enfants aussi */ isolation: isolate; } /* Désactiver les pointer-events sur les enfants du cercle pour limiter la zone */ .ergo-button-cell .ergo-button-circle > * { pointer-events: none; } /* ========================================================================== États et interactions ========================================================================== */ /* Rollover par défaut : swap vers couleur, contour reste blanc */ .ergo-button-cell .ergo-button-circle:hover { filter: grayscale(0%); } /* État unselected : gris (par défaut) */ .ergo-button-cell.unselected .ergo-button-circle { filter: grayscale(100%); text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.7), 0 0 6px rgba(255, 255, 255, 0.5); } /* Rollover spécifique pour unselected : forcer la couleur */ .ergo-button-cell.unselected .ergo-button-circle:hover { filter: grayscale(0%) !important; } /* Bouton checked : couleur avec contour vert */ .ergo-button-cell.checked .ergo-button-circle { filter: grayscale(0%) drop-shadow(0 0 3px rgba(0, 255, 0, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 0, 0.5)) !important; /* Contour vert autour du logo - ne change pas au rollover */ text-shadow: 0 0 2px rgba(0, 255, 0, 0.9), 0 0 4px rgba(0, 255, 0, 0.7), 0 0 6px rgba(0, 255, 0, 0.5), 0 0 8px rgba(0, 255, 0, 0.3) !important; } /* Rollover sur checked : swap vers noir et blanc, contour reste vert */ .ergo-button-cell.checked .ergo-button-circle:hover { filter: grayscale(100%) drop-shadow(0 0 3px rgba(0, 255, 0, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 0, 0.5)) !important; text-shadow: 0 0 2px rgba(0, 255, 0, 0.9), 0 0 4px rgba(0, 255, 0, 0.7), 0 0 6px rgba(0, 255, 0, 0.5), 0 0 8px rgba(0, 255, 0, 0.3) !important; } /* État selected : couleur avec contour vert (identique à checked) */ .ergo-button-cell.selected .ergo-button-circle { filter: grayscale(0%) drop-shadow(0 0 3px rgba(0, 255, 0, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 0, 0.5)) !important; text-shadow: 0 0 2px rgba(0, 255, 0, 0.9), 0 0 4px rgba(0, 255, 0, 0.7), 0 0 6px rgba(0, 255, 0, 0.5), 0 0 8px rgba(0, 255, 0, 0.3) !important; } /* Rollover sur selected : swap vers noir et blanc, contour reste vert */ .ergo-button-cell.selected .ergo-button-circle:hover { filter: grayscale(100%) drop-shadow(0 0 3px rgba(0, 255, 0, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 0, 0.5)) !important; text-shadow: 0 0 2px rgba(0, 255, 0, 0.9), 0 0 4px rgba(0, 255, 0, 0.7), 0 0 6px rgba(0, 255, 0, 0.5), 0 0 8px rgba(0, 255, 0, 0.3) !important; } /* ========================================================================== Boutons événements (timeline events) - contour noir 1px + glow blanc pulsant ========================================================================== */ /* Classe pour les boutons événements avec contour blur blanc pulsant */ .timeline-event-logo.btn-events { /* Contour blur blanc pulsant — pages scie_* / hysteresis (classe .timeline-event-logo). Bilan radiatif : .organigram-logo sous #flux-diagram → organigramme.css uniquement (pas ici, évite !important vs hover vert). */ animation: event-logo-pulse-img 1.6s ease-in-out infinite !important; } /* Pour les boutons texte/emoji uniquement */ .timeline-event-logo.btn-events:not(img) { text-shadow: 0 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 3px rgba(255, 255, 255, 0.2) !important; } /* Pour les images enfants (si le bouton contient une image) */ .timeline-event-logo.btn-events img { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.3)) !important; animation: event-logo-pulse-img 1.6s ease-in-out infinite !important; } .timeline-event-logo.btn-events:hover { /* Légèrement plus intense au rollover, mais toujours subtil - contour noir 1px + glow blanc 3px */ filter: drop-shadow(0 0 0px rgba(0, 0, 0, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)) !important; } .timeline-event-logo.btn-events:hover:not(img) { text-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 0 3px rgba(255, 255, 255, 0.4) !important; } .timeline-event-logo.btn-events:hover img { filter: drop-shadow(0 0 0px rgba(0, 0, 0, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)) !important; } /* Animation de pulse pour les boutons événements (texte/emoji) - contour noir 1px + glow blanc 3px = 4px total */ @keyframes event-logo-pulse { 0%, 100% { filter: drop-shadow(0 0 0px rgba(0, 0, 0, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); text-shadow: 0 0 0px rgba(0, 0, 0, 1), 0 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 3px rgba(255, 255, 255, 0.2); } 50% { filter: drop-shadow(0 0 0px rgba(0, 0, 0, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.4)); text-shadow: 0 0 0px rgba(0, 0, 0, 1), 0 0 2px rgba(255, 255, 255, 0.6), 0 0 3px rgba(255, 255, 255, 0.4); } } /* Animation de pulse pour les images dans les boutons événements (météorite etc.) - glow rouge */ @keyframes event-logo-pulse-img { 0%, 100% { filter: drop-shadow(0 0 0px var(--event-pulse-in)) drop-shadow(0 0 3px var(--event-pulse-out-min)) drop-shadow(0 0 5px var(--event-pulse-out-shadow-min)); } 50% { filter: drop-shadow(0 0 0px var(--event-pulse-in)) drop-shadow(0 0 6px var(--event-pulse-out-mid)) drop-shadow(0 0 10px var(--event-pulse-out-shadow-max)); } }