Kaynağa Gözat

Airy: retune dialog glide-in to the exact Win7 DWM Aero spec

Windows now open the way DWM did on Windows 7: scale 0.92 to 1 and
opacity 0 to 1 over T=180ms on the cubic ease-out f(t) = 1-(1-t)^3
(fast start, soft landing, f(0.5)=0.875). The open easing is
cubic-bezier(0.3333, 1, 0.6667, 1), which IS that curve exactly (with
P1=(1/3,1) and P2=(2/3,1) the x polynomial collapses to x(s)=s, so
y = 1-(1-s)^3). Closing mirrors it on the true cubic ease-in t^3 -
cubic-bezier(0.3333, 0, 0.6667, 0), exactly - at a faster 150ms,
replacing the previous approximation. Anchored popovers additionally
emerge toward their trigger: a new scoped rule gives .popover-anchor
--spry-dialog-in: translateY(-0.4rem) scale(0.92), mirroring DWM
anchoring the scale origin to the launching taskbar icon; dialogs
scale centered. Transform + opacity only, so the flight stays
compositor-driven (the CSS analogue of DWM's GPU quads, VSYNC-smooth).
Drawers keep the core's translateX slide: docked panels, not windows.

Verified: ninja rebuild regenerates the embedded resource (sha512 of
the css matches the generated Vala file_hash); all 88 spry-tests pass;
bezier sampled numerically against the closed forms (exact with thirds,
<=1.8e-5 with the shipped 4-decimal literals); headless Chromium
computed styles confirm the tokens on modal, popover window, anchored
menu (translateY resolves to -6.4px) and drawer, with a mid-flight
sample at opacity 0 / scale 0.92 proving the transition fires.
saddle-ClankerSaddle 5 saat önce
ebeveyn
işleme
a8f177ef47
1 değiştirilmiş dosya ile 25 ekleme ve 7 silme
  1. 25 7
      css/themes/spry-theme-airy.css

+ 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; }