clawbot
806c95e305
check / check (push) Waiting to run
Many controls were plain coloured text with no sign they could be clicked: Edit, Activate, Deactivate, Delete, Replay, Resubmit, both Add controls and the copy control beside each entrypoint URL. Every clickable control is now a real button or link in one of two shared styles: the buttons in input.css, now with a pointer cursor, and btn-small, a small bordered secondary action in style.css, which the layout now loads. The site name, the footer links and each webhook list card show at rest that they open something, with focus states. The copy control shows "Copied" after a click. Rows on the webhook page and in the event log wrap at phone width. The browser test covers the copy control. Model: opus-5-5
49 lines
1.5 KiB
CSS
49 lines
1.5 KiB
CSS
/*
|
|
* 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;
|
|
}
|
|
}
|