Эх сурвалжийг харах

Merge task/42-293: Airy Aero glide-in animation

saddle-ClankerSaddle 5 цаг өмнө
parent
commit
8a95715ecd

+ 25 - 7
css/themes/spry-theme-airy.css

@@ -71,14 +71,22 @@ html:has(#spry-theme-airy:checked) {
   --spry-glass: blur(12px) saturate(1.7); /* topbar, cards, popovers, dialogs */
   --spry-transition: 120ms ease;
 
-  /* Windows open the DWM way: a scale-up gliding to a soft stop; closing mirrors
-     it faster on an ease-in. Motion vars only — the core's two-state rules are
-     never touched; drawers keep the core's own translateX --spry-dialog-in. */
-  --spry-dialog-duration: 220ms;
-  --spry-dialog-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  /* Windows glide in the DWM way (Windows 7 Aero, T ≈ 180ms): scale 0.92→1 and
+     alpha 0→1 on the same cubic ease-out f(t) = 1-(1-t)^3 — f(0.5) = 0.875, a
+     fast start gliding to a soft landing. cubic-bezier(1/3, 1, 2/3, 1) IS that
+     curve exactly (x(s) collapses to s). Closing mirrors it on t^3 — exactly
+     cubic-bezier(1/3, 0, 2/3, 0) — and slightly faster. Transform + opacity
+     only, so the whole flight is compositor-driven: the CSS analogue of DWM's
+     GPU quads, VSYNC-smooth. Anchored popovers add a small translate toward
+     their trigger (rule below), like DWM anchoring the scale origin to the
+     launching taskbar icon. Motion vars only — the core's two-state rules are
+     never touched; drawers keep the core's own translateX --spry-dialog-in
+     (docked panels, not windows). */
+  --spry-dialog-duration: 180ms;
+  --spry-dialog-ease: cubic-bezier(0.3333, 1, 0.6667, 1);
   --spry-dialog-close-duration: 150ms;
-  --spry-dialog-close-ease: cubic-bezier(0.32, 0, 0.67, 0);
-  --spry-dialog-in: scale(0.96);
+  --spry-dialog-close-ease: cubic-bezier(0.3333, 0, 0.6667, 0);
+  --spry-dialog-in: scale(0.92);
 
   /* ---- Controls: white wells, #abadb3 edge, blue focus halo ---- */
   --spry-control-bg: #ffffff;
@@ -382,6 +390,16 @@ html:has(#spry-theme-airy:checked) {
     margin: 0 6px 6px;
   }
 
+  /* Anchored popovers emerge toward their trigger: the core drops them below
+     the anchor (position-area: bottom), so they start 0.4rem closer to it and
+     glide down into place while scaling up — DWM anchoring the scale origin to
+     the launching point. Same specificity as the .popover-menu padding rules
+     but none of them set --spry-dialog-in, and this is the file's only setter
+     outside the tokens block, so the cascade is unambiguous. */
+  & .popover-anchor {
+    --spry-dialog-in: translateY(-0.4rem) scale(0.92);
+  }
+
   /* Drawers are docked glass bars, not framed windows: reset the frame (this
      follows the frame rule on purpose) and light the docked edge instead */
   & [popover].drawer-left, & [popover].drawer-right { border: 0; border-radius: 0; background-clip: border-box; }