diff --git a/CHANGELOG.md b/CHANGELOG.md index e14a92d3..eb3955bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/Pollora/framework/compare/v13.35.1...develop) +### Fixed +- Login screen: the language switcher's label ("Language" and its icon, shown when a second language is installed) sat at the left edge of the window, far from its dropdown. The card style given to the login form also reached the switcher's form and made it a full-width block; it is an inline block again, as in WordPress's own sheet +- Login screen: the rules for the buttons were written `.pollora-login .wp-core-ui …`, but both classes are on ``, so they never matched. The language switcher's button kept wp-admin's blue instead of the theme's primary colour, and the submit button kept WordPress's `button-large` padding + ## [v13.35.1](https://github.com/Pollora/framework/compare/v13.35.0...v13.35.1) - 2026-10-07 ### Security diff --git a/resources/css/login.css b/resources/css/login.css index c3e9e775..79b52b60 100644 --- a/resources/css/login.css +++ b/resources/css/login.css @@ -74,6 +74,15 @@ body.login.pollora-login::before { display: flow-root; } +/* The language switcher is a form too, but not a card: WordPress's + #language-switcher rule already strips the surface above, and this gives + back the inline-block its own sheet sets. As a block the form spanned the + page, and its left-aligned label ("Language" and its icon) sat at the + window's edge, far from the dropdown. */ +.pollora-login .language-switcher form { + display: inline-block; +} + .pollora-login form label { color: var(--pollora-login-foreground); font-size: .875rem; @@ -132,7 +141,7 @@ body.login.pollora-login::before { of the primary's family the sweep goes muddy — measured on apiary, slate #1f2937 into amber #fbbf24. Two shades of one role read as one button on every palette, and on theme-default they are Pollora's coral and pink. */ -.pollora-login .wp-core-ui .button-primary, +.pollora-login.wp-core-ui .button-primary, .pollora-login .button-primary { background: linear-gradient(135deg, var(--pollora-login-primary), var(--pollora-login-primary-hover)); border: 0; @@ -146,32 +155,32 @@ body.login.pollora-login::before { transition: filter .15s ease, box-shadow .15s ease, transform .15s ease; } -.pollora-login .wp-core-ui .button-primary:hover, +.pollora-login.wp-core-ui .button-primary:hover, .pollora-login .button-primary:hover { filter: saturate(1.1) brightness(1.03); box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--pollora-login-primary) 45%, transparent); transform: translateY(-1px); } -.pollora-login .wp-core-ui .button-primary:focus, +.pollora-login.wp-core-ui .button-primary:focus, .pollora-login .button-primary:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pollora-login-primary) 35%, transparent); transform: none; } -.pollora-login .wp-core-ui .button-primary:active, +.pollora-login.wp-core-ui .button-primary:active, .pollora-login .button-primary:active { transform: none; filter: brightness(.97); } @media (prefers-reduced-motion: reduce) { - .pollora-login .wp-core-ui .button-primary, + .pollora-login.wp-core-ui .button-primary, .pollora-login .button-primary { transition: none; } - .pollora-login .wp-core-ui .button-primary:hover, + .pollora-login.wp-core-ui .button-primary:hover, .pollora-login .button-primary:hover { transform: none; } @@ -183,7 +192,7 @@ body.login.pollora-login::before { `.button`, and left alone it kept wp-admin's blue next to a palette that has none. The password-reveal toggle is a `.button` too, and is styled above as the icon it is, so it stays out of this. */ -.pollora-login .wp-core-ui .button:not(.button-primary):not(.wp-hide-pw) { +.pollora-login.wp-core-ui .button:not(.button-primary):not(.wp-hide-pw) { color: var(--pollora-login-primary); border-color: var(--pollora-login-outline); background: var(--pollora-login-surface); @@ -191,7 +200,7 @@ body.login.pollora-login::before { min-height: 2.25rem; } -.pollora-login .wp-core-ui .button:not(.button-primary):not(.wp-hide-pw):hover { +.pollora-login.wp-core-ui .button:not(.button-primary):not(.wp-hide-pw):hover { color: var(--pollora-login-primary-hover); border-color: var(--pollora-login-primary); background: var(--pollora-login-surface); diff --git a/tests/e2e/specs/features.spec.ts b/tests/e2e/specs/features.spec.ts index 5e9ebda5..e8701783 100644 --- a/tests/e2e/specs/features.spec.ts +++ b/tests/e2e/specs/features.spec.ts @@ -204,6 +204,15 @@ test.describe('The active theme', () => { if (dressed) { await expect(page.locator('body')).toHaveClass(/pollora-login/); expect(await page.locator('style#pollora-login').textContent()).toMatch(/--pollora-login-primary:\s*[^;]+;/); + + // WordPress shows the language switcher only when a second language is installed. + // Its label sits above the dropdown, not at the window's edge. + const switcher = page.locator('#language-switcher'); + if (await switcher.count()) { + const label = await switcher.locator('label').boundingBox(); + const select = await switcher.locator('select').boundingBox(); + expect(Math.abs(label!.x - select!.x)).toBeLessThan(2); + } } await context.close();