/* Frise chronologique — mode animation. Panneau ancré en bas de l'espace de travail, visible seulement en mode animation. */ /* Masque des entrées de menu sans les retirer du DOM. Sélecteur par ID (+!important) pour battre la règle de thème display:flex !important. */ #menu-convert-dither, #menu-anim-sequence { display: none !important; } /* Géométrie : sur :root, car --anim-panel-h est piloté en ligne par le JS (setPanelHeight → documentElement.style). */ :root { --anim-panel-h: 148px; --anim-cell-w: 22px; --anim-row-h: 24px; --anim-label-w: 148px; } /* * Palette : aucune couleur figée — tout dérive des jetons de thème (--mp-*), pour que * la frise suive le thème actif (Win98, Win10, macOS Lion/Moderne, Photoshop…) et son * variant sombre sans règle dédiée. * * Déclarés sur `body` et NON sur `:root` : les thèmes redéfinissent les --mp-* sur * `body.theme-dark`. Une substitution faite sur :root figerait les valeurs claires * (la substitution a lieu là où la propriété est déclarée), et le panneau resterait * clair en mode sombre. Les valeurs de repli ne servent que si aucun thème n'est chargé. */ body { --anim-accent: var(--mp-accent, var(--mp-teal, #0d7a7a)); --anim-accent-rgb: var(--mp-accent-rgb, 13, 122, 122); --anim-on-accent: #ffffff; --anim-bg: var(--mp-dock-bg, var(--mp-surface, #f0f0f0)); --anim-bg-alt: var(--mp-surface-deep, #e4e4e4); --anim-surface: var(--mp-surface, #ffffff); --anim-border: var(--mp-dock-border, var(--mp-inset-top, #b9b9b9)); --anim-text: var(--mp-text, #1c1c1c); --anim-muted: color-mix(in srgb, var(--anim-text) 58%, var(--anim-surface)); --anim-font: var(--mp-font, "Segoe UI", system-ui, Arial, sans-serif); --anim-font-size: var(--mp-ui-font-small, 12px); --anim-radius: var(--mp-radius, 4px); /* Voiles accentués : sélection, tête de lecture, survol de menu. */ --anim-veil-soft: rgba(var(--anim-accent-rgb), 0.10); --anim-veil: rgba(var(--anim-accent-rgb), 0.16); --anim-veil-strong: rgba(var(--anim-accent-rgb), 0.30); /* Sémantiques de la frise (teintées par le texte pour rester lisibles en sombre). */ --anim-hold: color-mix(in srgb, var(--anim-accent) 55%, var(--anim-surface)); --anim-key: color-mix(in srgb, #f0a020 80%, var(--anim-text)); --anim-danger: #c94a4a; } #illu-anim-panel { position: fixed; left: 0; right: 0; bottom: 0; height: var(--anim-panel-h); display: none; flex-direction: column; background: var(--anim-bg); color: var(--anim-text); border-top: 1px solid var(--anim-border); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18); z-index: 900; font-family: var(--anim-font); font-size: var(--anim-font-size); user-select: none; -webkit-user-select: none; } /* Ancrage dans le flux : la frise est un bloc de l'application, inséré entre la zone de travail (#editor-dock-row) et la barre d'état — jamais par-dessus ni sous celle-ci. */ #illu-anim-panel.illu-anim-inflow { position: relative; left: auto; right: auto; bottom: auto; flex: 0 0 var(--anim-panel-h); height: var(--anim-panel-h); min-height: 0; box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.12); } #illu-anim-panel.illu-anim-visible { display: flex; } /* Panneau replié (croix de fermeture) : le mode animation reste actif, la frise disparaît. */ #illu-anim-panel:not(.illu-anim-visible) { display: none; } /* Repli sur l'ancrage fixe (frise posée dans faute de coquille applicative) : on réserve alors la hauteur en bas de l'application pour ne pas masquer la toile. */ body.illu-anim-active.illu-anim-floating #app-window { padding-bottom: calc(var(--anim-panel-h) + env(safe-area-inset-bottom, 0px)); } /* Palettes flottantes (Paint.NET) au-dessus du panneau d'animation. */ body.illu-anim-active .floating-window { z-index: 950; } /* ---- Icônes (FontAwesome + sprite interne) ------------------------------- */ /* Les glyphes suivent la couleur du bouton : texte normal, --anim-on-accent une fois actif. */ .illu-anim-ico { font-size: 12px; line-height: 1; color: inherit; } svg.illu-anim-ico { width: 15px; height: 15px; display: block; fill: none; flex: 0 0 auto; } /* Poignée de redimensionnement (bord haut du panneau). */ .illu-anim-resize { height: 6px; cursor: ns-resize; background: var(--anim-bg-alt); border-bottom: 1px solid var(--anim-border); flex: 0 0 auto; position: relative; } .illu-anim-resize::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 3px; border-radius: 2px; background: var(--anim-muted); opacity: 0.6; } .illu-anim-resize:hover::after { opacity: 1; background: var(--anim-accent); } /* Barre d'outils */ .illu-anim-toolbar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--anim-bg-alt); border-bottom: 1px solid var(--anim-border); flex-wrap: wrap; } .illu-anim-toolbar button { min-width: 28px; height: 24px; padding: 0 7px; border: 1px solid var(--anim-border); background: var(--anim-surface); color: var(--anim-text); border-radius: var(--anim-radius); cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .illu-anim-toolbar button:hover { border-color: var(--anim-accent); } /* * État actif des bascules (pelure d'oignon, boucle, ping-pong…). * Les thèmes habillent tous les