From 34edc985d862bed55839a5c28681308758feff47 Mon Sep 17 00:00:00 2001 From: Owen McGirr Date: Wed, 7 Oct 2026 13:11:24 +0100 Subject: [PATCH 1/3] Keep all component CSS in its layer; full-width pending sign-in The brace closing @layer components sat mid-file, so every rule after it was unlayered and outranked layered rules regardless of specificity. As a result the forced-colours rule greying aria-disabled buttons never applied (they rendered as ButtonText in High Contrast). Close the layer at the end of the file, labelled, and place the forced-colours aria-disabled rule after the rule it overrides with a matching selector. Normal rendering is unchanged. On wide windows the pending sign-in step (band and code form only) now uses a single full-width column instead of leaving the right half empty. Fixes #1001 Co-Authored-By: Claude Opus 5.5 (1M context) --- src/ui/app.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/ui/app.css b/src/ui/app.css index 3a616107..a25f12a4 100644 --- a/src/ui/app.css +++ b/src/ui/app.css @@ -624,8 +624,6 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che .toggle-row[data-disabled="true"] input:checked + .toggle::after { background: Canvas; } /* Opting out of forced colours would also keep the page's focus blue. */ .toggle-row input:focus-visible + .toggle { outline-color: CanvasText; } - /* Native :disabled is greyed by the system; aria-disabled is not. */ - .btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; } .color-swatch, .scanner-sample { forced-color-adjust: none; } /* A white or yellow swatch would vanish on a light Canvas without an edge. */ .color-swatch, .color-swatch.white { border: 2px solid CanvasText; } @@ -671,12 +669,15 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che .setup-dialog .setup-content { overflow: visible; } } -} - /* Buttons that stay focusable while unavailable (aria-disabled) look the same as disabled ones. */ .btn[aria-disabled="true"] { cursor: default; } .btn[aria-disabled="true"]:not(fieldset:disabled *) { border-color: var(--border); color: var(--ink-disabled); background: var(--surface-disabled); } +/* Native :disabled is greyed by the system in forced colours; aria-disabled + is not, so match the rule above and come after it. */ +@media (forced-colors: active) { + .btn[aria-disabled="true"]:not(fieldset:disabled *) { color: GrayText; border-color: GrayText; } +} /* The sidebar account entry replaces the version label: a full-size control whose email shortens with an ellipsis rather than widening the sidebar. */ @@ -731,5 +732,9 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che .account-page > .connection-band + .status-list { margin-top: 0; } .account-page > .what-syncs { grid-column: 2; grid-row: 2; } .account-page:has(> .status-list:nth-child(4)) > .what-syncs { grid-row: 2 / span 2; } + /* Waiting for a code there is only the form, so it gets the full width. */ + .account-page:not(:has(> .what-syncs)) { grid-template-columns: minmax(0, 1fr); } .scanner-panel-heading > p { max-width: 80ch; } } + +} /* end @layer components */ From ac9f8b87b8c04a0ebd8a8a45229fd286819d4bbe Mon Sep 17 00:00:00 2001 From: Owen McGirr Date: Wed, 7 Oct 2026 13:16:02 +0100 Subject: [PATCH 2/3] Keep unavailable buttons disabled-looking on hover Address review: now that the aria-disabled rule is layered, the more specific .btn.secondary.danger:hover won while hovering a busy Delete account button. Add a :hover form of the aria-disabled rule so it outranks variant hover rules. Co-Authored-By: Claude Opus 5.5 (1M context) --- src/ui/app.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ui/app.css b/src/ui/app.css index a25f12a4..53cce806 100644 --- a/src/ui/app.css +++ b/src/ui/app.css @@ -672,7 +672,9 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che /* Buttons that stay focusable while unavailable (aria-disabled) look the same as disabled ones. */ .btn[aria-disabled="true"] { cursor: default; } -.btn[aria-disabled="true"]:not(fieldset:disabled *) { border-color: var(--border); color: var(--ink-disabled); background: var(--surface-disabled); } +/* The :hover form outranks variant hover rules such as .btn.secondary.danger:hover. */ +.btn[aria-disabled="true"]:not(fieldset:disabled *), +.btn[aria-disabled="true"]:not(fieldset:disabled *):hover { border-color: var(--border); color: var(--ink-disabled); background: var(--surface-disabled); } /* Native :disabled is greyed by the system in forced colours; aria-disabled is not, so match the rule above and come after it. */ @media (forced-colors: active) { From 1b20bcd21eb3084779fd7ac45b5e5d26f68010f4 Mon Sep 17 00:00:00 2001 From: Owen McGirr Date: Wed, 7 Oct 2026 13:18:47 +0100 Subject: [PATCH 3/3] Keep unavailable buttons GrayText on hover in High Contrast Address re-review: the :hover form of the aria-disabled rule outranked the forced-colours GrayText rule while hovering. Give the forced-colours rule a matching :hover form so it ties and wins by order in both states. Co-Authored-By: Claude Opus 5.5 (1M context) --- src/ui/app.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/app.css b/src/ui/app.css index 53cce806..70291656 100644 --- a/src/ui/app.css +++ b/src/ui/app.css @@ -678,7 +678,8 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che /* Native :disabled is greyed by the system in forced colours; aria-disabled is not, so match the rule above and come after it. */ @media (forced-colors: active) { - .btn[aria-disabled="true"]:not(fieldset:disabled *) { color: GrayText; border-color: GrayText; } + .btn[aria-disabled="true"]:not(fieldset:disabled *), + .btn[aria-disabled="true"]:not(fieldset:disabled *):hover { color: GrayText; border-color: GrayText; } } /* The sidebar account entry replaces the version label: a full-size control