Make every clickable control look clickable, in two shared styles (closes #375)
check / check (push) Successful in 3m20s
check / check (push) Successful in 3m20s
Buttons keep btn-primary, btn-secondary and btn-danger and gain a pointer cursor; the site name and the navigation links become btn-secondary buttons. Every control that was plain coloured text (Copy, both Add, the row actions, Resubmit, Replay, the back, footer and download links) now uses btn-small, bordered at rest with hover and focus states. Each card on the webhook list shows an Open label in btn-small and takes its focus outline. Both styles are in static/css/style.css, which the layout now loads. The event log's clickable rows become buttons, so they work by keyboard; Replay moves beside its delivery's row. Rows on the webhook page and in the event log wrap at phone width. The browser test now checks that Copy reads "Copied". Model: opus-5-5
This commit is contained in:
+48
-1
@@ -1 +1,48 @@
|
||||
/* Webhooker custom styles — see input.css for Tailwind theme */
|
||||
/*
|
||||
* The two shared styles for the controls a user clicks. Every page loads
|
||||
* this file after tailwind.css. It is plain CSS: make css does not build
|
||||
* it.
|
||||
*
|
||||
* A button is btn-primary, btn-secondary or btn-danger, from input.css.
|
||||
* A secondary or inline action, such as Copy beside an entrypoint URL or
|
||||
* Edit beside a target, is btn-small.
|
||||
*
|
||||
* Each card on the webhook list is a card-elevated link as a whole. It
|
||||
* shows an Open label in btn-small and takes btn-small's focus outline.
|
||||
*
|
||||
* The rules join tailwind.css's components layer, where input.css puts
|
||||
* its own, so a utility class on an element still overrides them.
|
||||
*/
|
||||
@layer components {
|
||||
/* input.css gives its buttons no pointer cursor. */
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-danger {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border: 1px solid var(--color-gray-300);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-primary-700);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-small:hover {
|
||||
border-color: var(--color-primary-500);
|
||||
background-color: var(--color-primary-50);
|
||||
}
|
||||
|
||||
.btn-small:focus-visible,
|
||||
.card-elevated:focus-visible {
|
||||
outline: 2px solid var(--color-primary-500);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user