Phone Aero glass + a timed run you can see
The phone (touch) chat chrome carried a 55% flat white veil while every other Aero surface uses the thin 32% Ask-pill tint, so the header, welcome card and composer read as plain white on a bright sky. They now use the same flat glass as the cards, the answer/user bubbles keep 42% for long reading, and the composer's field is a lighter 42% tile. The shared Aero wash block moved above the touch media query so its background-image can no longer resurrect the bake on phones. The timed run worked but was invisible: the only cue was a small chip among the streak/XP counters. The chrome pill now draws the countdown along its lower edge, the chip is bordered (a control, not a stat), turns rose with the bar in the last ten seconds, and fires one soft haptic tick at ten seconds. Contrast scan clean on the phone chat in all three themes; activities suite pins the countdown bar (25 checks). Version 0.6.2, SW v84.
This commit is contained in:
parent
796e2e9fe9
commit
a8b3dfd0e3
6 changed files with 129 additions and 75 deletions
197
app/globals.css
197
app/globals.css
|
|
@ -604,104 +604,6 @@
|
|||
background-repeat: no-repeat, no-repeat;
|
||||
}
|
||||
|
||||
/* Touch devices: flat glass, no bake and no live blur. The baked layer is
|
||||
`background-attachment: fixed`, which mobile engines repaint late (iOS
|
||||
treats it as scroll) — panes showed a stale crop until a tap forced a
|
||||
repaint. The honest alternative (a real backdrop-filter) is worse: every
|
||||
pane re-blurs on every frame while the bubbles animate, and phones choke —
|
||||
measured as input lag, "buttons take ages to respond". So on touch the
|
||||
panes keep the thin Ask-pill tint over the sharp scene: transparent glass
|
||||
at zero per-frame cost. Desktop keeps the baked blur. */
|
||||
@media (max-width: 639px), (pointer: coarse) {
|
||||
.aero .card,
|
||||
.aero .glass-solid,
|
||||
.aero .sidebar-surface,
|
||||
.aero .gate-card,
|
||||
.aero .list-group,
|
||||
.aero .nav-action,
|
||||
.aero .nav-row[aria-current="page"],
|
||||
.aero .nav-row[aria-pressed="true"],
|
||||
.aero .nav-row[data-active="true"],
|
||||
.aero .glass-chip,
|
||||
.aero .glass-pill,
|
||||
.aero .btn-secondary,
|
||||
.aero .btn-ghost,
|
||||
.aero .chat-header,
|
||||
.aero .chat-empty,
|
||||
.aero .segmented {
|
||||
background-image: none;
|
||||
background-color: rgb(255 255 255 / 0.32);
|
||||
}
|
||||
.aero .chat-bubble,
|
||||
.aero .chat-answer {
|
||||
background-image: none;
|
||||
background-color: rgb(255 255 255 / 0.55);
|
||||
}
|
||||
/* The chat chrome and the rail keep one even, a little stronger tint on
|
||||
touch: without the baked blur the flat fill has to carry the surface on
|
||||
its own, or the photo underneath tints it unevenly again. */
|
||||
.aero .chat-header,
|
||||
.aero .chat-empty,
|
||||
.aero .chat-composer-band {
|
||||
background-image: none;
|
||||
background-color: rgb(255 255 255 / 0.55);
|
||||
}
|
||||
.aero .tabbar {
|
||||
background-image: none;
|
||||
}
|
||||
/* The hand-rolled frost fills drop the bake too and keep their own tints. */
|
||||
.aero [class*="bg-white/35"],
|
||||
.aero [class*="bg-white/40"],
|
||||
.aero [class*="bg-white/45"],
|
||||
.aero [class*="bg-white/50"],
|
||||
.aero [class*="bg-white/55"],
|
||||
.aero [class*="bg-white/60"],
|
||||
.aero [class*="bg-white/70"],
|
||||
.aero [class*="bg-[var(--surface)]"],
|
||||
.aero [class*="bg-[var(--surface-strong)]"],
|
||||
.aero [class*="bg-[var(--surface-sunken)]"],
|
||||
.aero [class*="bg-frost-50"] {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons need more presence than the cards: a stronger veil so a button reads
|
||||
as pale glass over grass, sky or water — the "Ask pill" look — instead of
|
||||
blending into the blurred scene. */
|
||||
.aero .btn-secondary,
|
||||
.aero .glass-pill {
|
||||
background-image:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgb(255 255 255 / 0.52) 0%,
|
||||
rgb(255 255 255 / 0.36) 46%,
|
||||
rgb(255 255 255 / 0.32) 53%,
|
||||
rgb(255 255 255 / 0.44) 100%
|
||||
),
|
||||
url("/aero/background-blur.webp?v=4");
|
||||
background-size: 100% 100%, cover;
|
||||
background-position: 0 0, center 42%;
|
||||
background-attachment: scroll, fixed;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
}
|
||||
.aero .btn-ghost {
|
||||
background-image:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgb(255 255 255 / 0.52) 0%,
|
||||
rgb(255 255 255 / 0.36) 46%,
|
||||
rgb(255 255 255 / 0.32) 53%,
|
||||
rgb(255 255 255 / 0.44) 100%
|
||||
),
|
||||
url("/aero/background-blur.webp?v=4");
|
||||
background-size: 100% 100%, cover;
|
||||
background-position: 0 0, center 42%;
|
||||
background-attachment: scroll, fixed;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
border: 1px solid rgb(255 255 255 / 0.6);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Chat chrome and the rail: one even frosted recipe. The pre-blurred,
|
||||
extra-soft wash of the wallpaper (background-glass) sits under a uniform
|
||||
white veil, so the surface colour cannot drift with the photo behind it —
|
||||
|
|
@ -763,6 +665,105 @@
|
|||
border-color: rgb(255 255 255 / 0.9);
|
||||
}
|
||||
|
||||
/* Touch devices: flat glass, no bake and no live blur. The baked layer is
|
||||
`background-attachment: fixed`, which mobile engines repaint late (iOS
|
||||
treats it as scroll) — panes showed a stale crop until a tap forced a
|
||||
repaint. The honest alternative (a real backdrop-filter) is worse: every
|
||||
pane re-blurs on every frame while the bubbles animate, and phones choke —
|
||||
measured as input lag, "buttons take ages to respond". So on touch the
|
||||
panes keep the thin Ask-pill tint over the sharp scene: transparent glass
|
||||
at zero per-frame cost. Desktop keeps the baked blur. */
|
||||
@media (max-width: 639px), (pointer: coarse) {
|
||||
.aero .card,
|
||||
.aero .glass-solid,
|
||||
.aero .sidebar-surface,
|
||||
.aero .gate-card,
|
||||
.aero .list-group,
|
||||
.aero .nav-action,
|
||||
.aero .nav-row[aria-current="page"],
|
||||
.aero .nav-row[aria-pressed="true"],
|
||||
.aero .nav-row[data-active="true"],
|
||||
.aero .glass-chip,
|
||||
.aero .glass-pill,
|
||||
.aero .btn-secondary,
|
||||
.aero .btn-ghost,
|
||||
.aero .chat-header,
|
||||
.aero .chat-empty,
|
||||
.aero .chat-composer-band,
|
||||
.aero .segmented {
|
||||
background-image: none;
|
||||
background-color: rgb(255 255 255 / 0.32);
|
||||
}
|
||||
/* Reading surfaces keep a touch more body than the chrome — long answers
|
||||
have to stay comfortable over grass and water — but they are still glass,
|
||||
not white panes. */
|
||||
.aero .chat-bubble,
|
||||
.aero .chat-answer {
|
||||
background-image: none;
|
||||
background-color: rgb(255 255 255 / 0.42);
|
||||
}
|
||||
/* The composer's field: a lighter, even tile inside the panel. */
|
||||
.aero .chat-composer-band textarea,
|
||||
.aero .chat-composer-band input[type="search"] {
|
||||
background-image: none;
|
||||
background-color: rgb(255 255 255 / 0.42);
|
||||
}
|
||||
.aero .tabbar {
|
||||
background-image: none;
|
||||
}
|
||||
/* The hand-rolled frost fills drop the bake too and keep their own tints. */
|
||||
.aero [class*="bg-white/35"],
|
||||
.aero [class*="bg-white/40"],
|
||||
.aero [class*="bg-white/45"],
|
||||
.aero [class*="bg-white/50"],
|
||||
.aero [class*="bg-white/55"],
|
||||
.aero [class*="bg-white/60"],
|
||||
.aero [class*="bg-white/70"],
|
||||
.aero [class*="bg-[var(--surface)]"],
|
||||
.aero [class*="bg-[var(--surface-strong)]"],
|
||||
.aero [class*="bg-[var(--surface-sunken)]"],
|
||||
.aero [class*="bg-frost-50"] {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons need more presence than the cards: a stronger veil so a button reads
|
||||
as pale glass over grass, sky or water — the "Ask pill" look — instead of
|
||||
blending into the blurred scene. */
|
||||
.aero .btn-secondary,
|
||||
.aero .glass-pill {
|
||||
background-image:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgb(255 255 255 / 0.52) 0%,
|
||||
rgb(255 255 255 / 0.36) 46%,
|
||||
rgb(255 255 255 / 0.32) 53%,
|
||||
rgb(255 255 255 / 0.44) 100%
|
||||
),
|
||||
url("/aero/background-blur.webp?v=4");
|
||||
background-size: 100% 100%, cover;
|
||||
background-position: 0 0, center 42%;
|
||||
background-attachment: scroll, fixed;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
}
|
||||
.aero .btn-ghost {
|
||||
background-image:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgb(255 255 255 / 0.52) 0%,
|
||||
rgb(255 255 255 / 0.36) 46%,
|
||||
rgb(255 255 255 / 0.32) 53%,
|
||||
rgb(255 255 255 / 0.44) 100%
|
||||
),
|
||||
url("/aero/background-blur.webp?v=4");
|
||||
background-size: 100% 100%, cover;
|
||||
background-position: 0 0, center 42%;
|
||||
background-attachment: scroll, fixed;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
border: 1px solid rgb(255 255 255 / 0.6);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Page headings that sit straight on the wallpaper. */
|
||||
.aero .page-heading {
|
||||
display: inline-block;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue