/* ========================================================================== MM · MORPHING-MENUE (Variante 2 aus Abschnitt 17) -------------------------------------------------------------------------- Der Ausloeser wird zur Karte. Kein Abstand, keine Spitze, kein Verankerungsproblem - weil das Panel den Ausloeser enthaelt. Der Knopf federt von seiner runden Form auf die volle Kartengroesse: die Breite waechst nach links, die Hoehe nach unten, der Radius wandert von rund auf 20px. Der Avatar in der Kopfzeile blendet dabei aus, der Avatar in der Karte ein - auf derselben Hoehe, ein Stueck weiter links. Deshalb sieht es aus, als rutsche er nur zur Seite. WARUM NICHT NACH UNTEN Ein Panel, das unter dem Knopf erscheint, braucht Abstand, eine Spitze und eine Entscheidung, was passiert, wenn rechts kein Platz mehr ist. Eine Karte, die den Knopf enthaelt, braucht davon nichts. ABSCHALTEN In functions.php MM_MORPH auf false setzen. Dann klappt das Menue wieder unter dem Knopf auf. ========================================================================== */ :root{ --mm-morph-t: 420ms; --mm-morph-ease: cubic-bezier(.28,1.16,.42,1); --mm-morph-r: 20px; /* Luft ueber dem Avatar in der Karte. Die Karte beginnt um diesen Betrag hoeher als der Knopf und bringt ihn als Polster wieder mit - der Avatar bleibt damit exakt auf seiner Hoehe, die Karte bekommt oben aber Luft. Ohne das klebte Name und E-Mail direkt an der Oberkante. */ --mm-morph-luft: 12px; } /* -------------------------------------------------------------------------- 1 · Die Karte sitzt auf dem Knopf, nicht darunter -------------------------------------------------------------------------- */ .mm-morph .mma-avatar-dropdown{ /* top, right, width und height setzt mm-morph.js - nur dort sind die Masse des Knopfes und die natuerliche Kartengroesse bekannt. */ overflow:hidden; padding:0; border-radius:999px; opacity:1; transform:none; pointer-events:none; transition:width var(--mm-morph-t) var(--mm-morph-ease), height var(--mm-morph-t) var(--mm-morph-ease), border-radius var(--mm-morph-t) var(--mm-morph-ease), visibility var(--mm-morph-t); } .mm-morph[data-open] .mma-avatar-dropdown{ border-radius:var(--mm-morph-r); pointer-events:auto; } /* Keine Spitze mehr - die Karte zeigt nicht auf den Knopf, sie ist er */ .mm-morph .mma-avatar-dropdown::before{ display:none; } /* -------------------------------------------------------------------------- 2 · Der Inhalt -------------------------------------------------------------------------- Liegt in einer Huelle mit fester Breite, die mm-morph.js einzieht. Ohne die wuerde der Text bei jeder Zwischenbreite neu umbrechen - der Inhalt zappelte waehrend der ganzen Bewegung. Die Huelle selbst wird NICHT mehr weggeblendet. Deckkraft auf einem Elternteil zieht jedes Kind mit - der Avatar darin koennte dann nicht sichtbar herueberwandern. Geblendet wird deshalb einzeln: Text, Trenner, Zeilen. Das Bild bleibt sichtbar und faehrt. -------------------------------------------------------------------------- */ .mm-morph-inner{ padding:var(--mm-morph-oben,14px) 8px 8px; } .mm-morph .mma-avatar-ident-text, .mm-morph .mm-morph-inner hr, .mm-morph .mm-morph-inner > a{ opacity:0; transform:translateY(-6px); transition:opacity 200ms linear, transform 260ms var(--mm-morph-ease); } .mm-morph[data-open] .mma-avatar-ident-text, .mm-morph[data-open] .mm-morph-inner hr, .mm-morph[data-open] .mm-morph-inner > a{ opacity:1; transform:none; /* Erst ab der Haelfte der Bewegung - vorher ist die Karte zu klein dafuer */ transition-delay:150ms; } /* -------------------------------------------------------------------------- 2b · Der Avatar faehrt wirklich nach links -------------------------------------------------------------------------- Vorher war es eine Ueberblendung: der Avatar im Knopf ging aus, der in der Karte ging an. Weil beide unterschiedlich gross waren und auf unterschiedlicher Hoehe sassen, sah es nach "springt nach links UND nach unten" aus statt nach einer Bewegung. Jetzt ist es dieselbe Groesse, dieselbe Hoehe - und eine echte Fahrt: mm-morph.js misst den Abstand zwischen beiden Positionen und schreibt ihn als --mm-morph-weg. Die Karte waechst nach links, der Avatar faehrt mit. -------------------------------------------------------------------------- */ .mm-morph .mma-avatar-ident{ /* Der Avatar oben, damit seine Hoehe berechenbar bleibt: am Telefon ist er 26px hoch, der zweizeilige Text 34 - mittig sasse er 4px tiefer als im Knopf, und genau diese 4px machen aus einer Fahrt einen Sprung. */ align-items:flex-start; padding-top:0; padding-bottom:14px; } /* Der Text richtet sich fuer sich mittig aus. Am Schreibtisch ist der Avatar mit 46px hoeher als die zwei Zeilen - dort sah linksbuendig-oben unruhig aus. Auf die Lage des Avatars hat das keinen Einfluss. */ .mm-morph .mma-avatar-ident-text{ align-self:center; } .mm-morph .mma-avatar-ident-pic{ flex:none; transform:translateX(var(--mm-morph-weg,0px)); transition:transform var(--mm-morph-t) var(--mm-morph-ease); } .mm-morph[data-open] .mma-avatar-ident-pic{ transform:none; } /* Dieselbe Groesse wie im Knopf - sonst ist es kein Wandern, sondern ein Austausch. mm-morph.js misst den Knopf-Avatar und schreibt den Wert. */ .mm-morph .mma-avatar-menu .mma-avatar-ident-pic .mma-avatar-circle, .mm-morph .mma-avatar-ident-pic .mma-avatar-circle{ width:var(--mm-morph-ava,34px) !important; height:var(--mm-morph-ava,34px) !important; font-size:calc(var(--mm-morph-ava,34px) * .38) !important; } /* -------------------------------------------------------------------------- 3 · Der Avatar im Knopf blendet aus, sobald die Karte waechst -------------------------------------------------------------------------- */ .mm-morph .mma-avatar-toggle{ position:relative; z-index:1; } .mm-morph .mma-avatar-circle, .mm-morph .mma-avatar-arrow{ transition:opacity 160ms linear; } .mm-morph[data-open] .mma-avatar-toggle .mma-avatar-circle, .mm-morph[data-open] .mma-avatar-arrow{ /* Sofort, ohne Nachlauf: von hier an ist der Avatar in der Karte der sichtbare, und der faehrt. Zwei gleich aussehende Avatare gleichzeitig waeren genau das doppelte Bild, das weg sollte. */ opacity:0; transition-duration:1ms; } .mm-morph[data-open] .mma-avatar-toggle{ background-color:transparent; } /* Der Avatar in der Karte ersetzt den ausgeblendeten aus der Kopfzeile. Er bekommt hier bewusst KEIN visibility:visible - das wuerde die geschlossene Karte teilweise sichtbar machen, denn sie liegt genau ueber dem Knopf und finge dessen Klicks ab. */ /* -------------------------------------------------------------------------- 4 · Wer keine Bewegung will, bekommt keine -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .mm-morph .mma-avatar-dropdown, .mm-morph-inner, .mm-morph .mma-avatar-ident-pic, .mm-morph .mma-avatar-ident-text, .mm-morph .mm-morph-inner hr, .mm-morph .mm-morph-inner > a, .mm-morph .mma-avatar-circle, .mm-morph .mma-avatar-arrow{ transition-duration:1ms !important; transition-delay:0ms !important; } }