/* ============================================================================= Correctif Safari / WebKit - animations du menu admin ============================================================================= Chargé APRÈS materio/assets/vendor/css/core.css (via loadAssets dans admin_html_header.inc.php), donc à spécificité égale ces règles gagnent la cascade : pas besoin de !important (sauf quand core.css lui-même en utilise un, cf. section « bordure et paddings des liens »). Pourquoi : le thème Materio déclare les transitions du menu sur des propriétés CSS *logiques* (block-size, inline-size, margin-inline-*, padding-inline-*, inset-inline-*, border-inline-start). Chrome et Firefox arment la transition sur la propriété physique correspondante ; WebKit / Safari ne le fait pas, et l'animation « claque » au lieu de glisser. Cas particulier de l'accordéon : le JavaScript du menu (materio/js/menu.js) anime en plus la propriété *physique* `height` alors que core.css ne transitionne que `block-size`. Correctif : on redéclare les transitions sur les propriétés *physiques* (on conserve les logiques pour le RTL). Neutre sur Chrome/Firefox. Ne PAS reporter dans core.css (régénéré par gulp) ni dans le SCSS source. ========================================================================== */ /* Accordéon des sous-menus : le JS écrit item.style.height (propriété physique), mais core.css ne transitionne que block-size (logique) => snap sur Safari. */ .menu-item.menu-item-animating { -webkit-transition: height .3s ease-in-out, block-size .3s ease-in-out; transition: height .3s ease-in-out, block-size .3s ease-in-out; } /* Repli / déploiement de la sidebar (largeur pilotée par swap de variable CSS). */ .menu-vertical:not(.menu-no-animation) { -webkit-transition: width .3s, inline-size .3s; transition: width .3s, inline-size .3s; } /* Marge de l'icône pendant le collapse (core transitionne margin-inline-end). */ .menu:not(.menu-no-animation) .menu-icon { -webkit-transition: margin-right .3s ease, margin-inline-end .3s ease; transition: margin-right .3s ease, margin-inline-end .3s ease; } /* ----------------------------------------------------------------------------- Bordure et paddings des liens de menu. Le SCSS du projet anime border-inline-start (barre de couleur de l'item ouvert / actif) et padding-inline-start/end (décalage du libellé quand le menu se replie), en !important : la surcharge doit donc l'être aussi. -------------------------------------------------------------------------- */ .menu-item > .menu-link { -webkit-transition: border-left .3s, padding-left .3s, padding-right .3s, border-inline-start .3s, padding-inline-start .3s, padding-inline-end .3s !important; transition: border-left .3s, padding-left .3s, padding-right .3s, border-inline-start .3s, padding-inline-start .3s, padding-inline-end .3s !important; } /* ----------------------------------------------------------------------------- Transitions du layout pendant le repli du menu. Materio pose .layout-transitioning sur le temps de l'animation et n'arme les transitions que dans ce laps de temps : les sélecteurs et le media query ci-dessous sont donc repris à l'identique de core.css, seules les propriétés physiques sont ajoutées. -------------------------------------------------------------------------- */ @media (min-width: 992px) { /* Largeur du menu fixe (layout utilisé par l'admin : layout-menu-fixed). */ .layout-transitioning.layout-menu-fixed .layout-menu { -webkit-transition: width .3s, inline-size .3s; transition: width .3s, inline-size .3s; } /* Décalage du contenu, qui suit la largeur du menu. */ .layout-transitioning.layout-menu-fixed .layout-page, .layout-transitioning.layout-menu-fixed-offcanvas .layout-page { -webkit-transition: padding-left .3s, padding-right .3s, padding-inline-start .3s, padding-inline-end .3s; transition: padding-left .3s, padding-right .3s, padding-inline-start .3s, padding-inline-end .3s; } /* Navbar et pied de page fixes, calés sur le bord du menu. */ .layout-transitioning.layout-navbar-fixed .layout-content-navbar .layout-navbar, .layout-transitioning.layout-footer-fixed .content-footer { -webkit-transition: left .3s, right .3s, inset-inline-start .3s, inset-inline-end .3s; transition: left .3s, right .3s, inset-inline-start .3s, inset-inline-end .3s; } /* Menu non fixe (autres layouts Materio) : largeur + marges. */ .layout-menu-collapsed:not(.layout-transitioning, .layout-menu-offcanvas, .layout-menu-fixed, .layout-menu-fixed-offcanvas) .layout-menu, .layout-transitioning:not(.layout-menu-offcanvas, .layout-menu-fixed, .layout-menu-fixed-offcanvas) .layout-menu { -webkit-transition: margin-left .3s, margin-right .3s, width .3s, margin-inline-start .3s, margin-inline-end .3s, inline-size .3s; transition: margin-left .3s, margin-right .3s, width .3s, margin-inline-start .3s, margin-inline-end .3s, inline-size .3s; } /* Menu en tiroir (offcanvas) : marges + translation. */ .layout-transitioning.layout-menu-offcanvas .layout-menu { -webkit-transition: margin-left .3s, margin-right .3s, margin-inline-start .3s, margin-inline-end .3s, -webkit-transform .3s; transition: margin-left .3s, margin-right .3s, margin-inline-start .3s, margin-inline-end .3s, transform .3s; } } /* ----------------------------------------------------------------------------- Bonus (rendu, pas animation) : sur Safari < 16.2, color-mix() n'est pas supporté. Le fond dégradé de l'item de menu ACTIF (défini avec color-mix dans core.css, fallback -webkit-gradient compris) devient invalide et l'item perd tout son fond. On ne pose un fond plein QUE si color-mix() est absent, via @supports : les navigateurs récents conservent le dégradé d'origine. -------------------------------------------------------------------------- */ @supports not (background: color-mix(in srgb, red, blue)) { .menu-item.active > .menu-link:not(.menu-toggle), .menu.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle { background: var(--bs-primary); } }