sneak
537374e4cc
check / check (push) Waiting to run
Replaces #559, which conflicted. Model: opus-5-5
57 lines
1.7 KiB
CSS
57 lines
1.7 KiB
CSS
/*
|
|
* The two shared styles for the controls a user clicks, and the rule that
|
|
* hides an element marked x-cloak. 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;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Alpine.js removes x-cloak from an element once it has started, so
|
|
* something Alpine hides is not seen on the page while it loads.
|
|
*/
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|