Skip to content

Keep all component CSS in its layer; full-width pending sign-in #1002

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
enaboapps merged 3 commits into from
Oct 9, 2026
Merged

Keep all component CSS in its layer; full-width pending sign-in #1002

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
34edc98
Keep all component CSS in its layer; full-width pending sign-in
OwenMcGirr Oct 7, 2026
ac9f8b8
Keep unavailable buttons disabled-looking on hover
OwenMcGirr Oct 7, 2026
1b20bcd
Keep unavailable buttons GrayText on hover in High Contrast
OwenMcGirr Oct 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions src/ui/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down Expand Up @@ -671,12 +669,18 @@ 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); }
/* 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) {
.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
whose email shortens with an ellipsis rather than widening the sidebar. */
Expand Down Expand Up @@ -731,5 +735,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 */
Loading