GameCult/Ratatoskr
Watch
9
0
Fork
You've already forked Ratatoskr
 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

auth: login card fill 50% with 18px blur and a faint edge

Browse source 
The blur flattens the sky and ridges behind the text, so the fill can be
half as opaque and let the scene show through. Text over the unblurred
horizon glow is 4.15:1 (4.5 needs 54%); measured over the real blurred
backdrop at 390x844 it is >= 4.94:1.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Nibu 2026-11-07 18:22:19 +00:00
commit b8f2bb462e
1 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/app/pages/auth/styles.css.ts
View file

@ -56,7 +56,9 @@ export const AuthFooter = style({
// signed-out ground is clear and the card is a translucent, blurred pane shaped like a message
// bubble (BubbleContent: radius R500, no border), filled with the sky's bubble colour. The
// --sky-bubble variables come from the sky theme (PR #22); the plain colours are the fallback
// until it lands. 85% fill keeps text >= 4.5:1 over the scene's brightest and darkest backdrops.
// until it lands. The fill is 50%: the 18px blur carries the readability, flattening the sky and
// ridges behind the text. Without the blur, text is 4.15:1 over the brightest backdrop (the horizon
// glow; 4.5:1 needs 54%) and >= 7.3:1 elsewhere in the scene.
// The card is also made shorter so it leaves more of the scene visible on a phone.
const scene = ':root[data-scene]';
globalStyle(`${scene} ${AuthLayout}`, {
@ -65,13 +67,14 @@ globalStyle(`${scene} ${AuthLayout}`, {
});
globalStyle(`${scene} ${AuthCard}`, {
backgroundColor: [
'rgba(13, 26, 38, 0.85)',
'color-mix(in srgb, var(--sky-bubble, #0d1a26) 85%, transparent)',
'rgba(13, 26, 38, 0.5)',
'color-mix(in srgb, var(--sky-bubble, #0d1a26) 50%, transparent)',
],
color: 'var(--sky-bubble-text, #b7c7d9)',
borderRadius: config.radii.R500,
borderColor: 'transparent',
backdropFilter: 'blur(12px)',
// A faint inner edge, so a pane this clear still reads as a surface.
borderColor: 'rgba(183, 199, 217, 0.14)',
backdropFilter: 'blur(18px)',
});
globalStyle(`${scene} ${AuthHeader}`, {
backgroundColor: 'transparent',