diff --git a/README.md b/README.md index 5992133..99acd4d 100644 --- a/README.md +++ b/README.md @@ -1434,6 +1434,20 @@ Things I chose while building, with the reasoning: (measured: 268..1280 at a 1280 window) — a flat pane floating 40px inside the scene read as "cut off next to the sidebar". +95. **Aero, second pass: a heavier shared blur, and a field that reads as a field.** Two follow-ups + on 94. The composer's input was still a flat 60% white bar (the "clean, even tile" from 91) on + a panel that had — rightly — become translucent, so it read as a white slab: "especially the + part where you enter the prompt". It is now the app's standard frosted tile plus one light + veil; measured against the same backdrop, the field sits at `178,212,157` where the panel is + `145,183,79`, so it is clearly a brighter *field* while the scene shows through. And because + translucent glass needs softness rather than opacity, the shared backdrop + (`background-blur.webp`, the pre-blurred copy every Aero surface sits on) was re-baked much + softer — a 64×36 upscale instead of the old half-res copy — so panels, cards, chips and + buttons all show the scene as an even frosted wash: nothing to read as a muddy patch, nothing + turned white. `?v=5` busts the asset. Library, chat, study and settings screens all scan at 0 + below-minimum contrast findings in all three themes; phone touch still strips the bake + entirely (flat 32% glass, as in 93). + 94. **Aero glass goes back to glass (the "even wash" read as a white pane).** The uniform wash (`background-glass.webp`) from decisions 91/93 made the rail and the chat chrome nearly opaque: "why is the sidebar so white and non-translucent on the frutiger theme now? and the diff --git a/app/globals.css b/app/globals.css index 74deede..ad7d4d4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -477,7 +477,7 @@ rgb(255 255 255 / 0.09) 100% ), linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.16)), - url("/aero/background-blur.webp?v=4"); + url("/aero/background-blur.webp?v=5"); background-size: 100% 100%, 100% 100%, cover; background-position: 0 0, 0 0, center 42%; background-attachment: scroll, scroll, fixed; @@ -572,7 +572,7 @@ border-color: rgb(255 255 255 / 0.85); background-image: linear-gradient(rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.3)), - url("/aero/background-blur.webp?v=4"); + url("/aero/background-blur.webp?v=5"); background-size: 100% 100%, cover; background-position: 0 0, center 42%; background-attachment: scroll, fixed; @@ -597,7 +597,7 @@ rgb(255 255 255 / 0.08) 53%, rgb(255 255 255 / 0.13) 100% ), - url("/aero/background-blur.webp?v=4"); + url("/aero/background-blur.webp?v=5"); background-size: 100% 100%, cover; background-position: 0 0, center 42%; background-attachment: scroll, fixed; @@ -631,13 +631,28 @@ .chat-column { padding-left: 0; } } -/* The composer's field: a clean, even glass tile — no wallpaper gradient - inside it, just a lighter veil than the panel around it. */ +/* The composer's field: the app's frosted tile plus one light veil, so it + reads as a brighter, even glass field inside the panel. Both extremes were + wrong: the field's own wallpaper gradient (a blue→green wash) and a flat + white fill (a bar on a translucent panel). The heavy blur in the shared + backdrop keeps this one clean and even. */ .aero .chat-composer-band textarea, .aero .chat-composer-band input[type="search"] { - background-image: none; - background-color: rgb(255 255 255 / 0.6); - border-color: rgb(255 255 255 / 0.9); + background-image: + linear-gradient(rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.3)), + linear-gradient( + 180deg, + rgb(255 255 255 / 0.15) 0%, + rgb(255 255 255 / 0.06) 46%, + rgb(255 255 255 / 0.05) 53%, + rgb(255 255 255 / 0.09) 100% + ), + linear-gradient(rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.16)), + url("/aero/background-blur.webp?v=5"); + background-size: 100% 100%, 100% 100%, 100% 100%, cover; + background-position: 0 0, 0 0, 0 0, center 42%; + background-attachment: scroll, scroll, scroll, fixed; + background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } /* Touch devices: flat glass, no bake and no live blur. The baked layer is @@ -715,7 +730,7 @@ rgb(255 255 255 / 0.32) 53%, rgb(255 255 255 / 0.44) 100% ), - url("/aero/background-blur.webp?v=4"); + url("/aero/background-blur.webp?v=5"); background-size: 100% 100%, cover; background-position: 0 0, center 42%; background-attachment: scroll, fixed; @@ -730,7 +745,7 @@ rgb(255 255 255 / 0.32) 53%, rgb(255 255 255 / 0.44) 100% ), - url("/aero/background-blur.webp?v=4"); + url("/aero/background-blur.webp?v=5"); background-size: 100% 100%, cover; background-position: 0 0, center 42%; background-attachment: scroll, fixed; diff --git a/package.json b/package.json index 663bc8a..4c8df4c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "freezmo", - "version": "0.6.3", + "version": "0.6.4", "private": true, "license": "GPL-3.0-only", "scripts": { diff --git a/public/aero/background-blur.webp b/public/aero/background-blur.webp index 6629495..a9992b4 100644 Binary files a/public/aero/background-blur.webp and b/public/aero/background-blur.webp differ diff --git a/public/sw.js b/public/sw.js index f8f9b0e..f86f45c 100644 --- a/public/sw.js +++ b/public/sw.js @@ -9,7 +9,7 @@ * * Bumping CACHE_VERSION is how a new deploy invalidates old assets. */ -const CACHE_VERSION = "freezmo-v85"; +const CACHE_VERSION = "freezmo-v86"; const SHELL_CACHE = `${CACHE_VERSION}-shell`; const ASSET_CACHE = `${CACHE_VERSION}-assets`;