59 lines
1.0 KiB
CSS
Executable File
59 lines
1.0 KiB
CSS
Executable File
.button {
|
|
border: var(--border);
|
|
padding: 12px 18px;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
box-shadow: 4px 4px 0 var(--color-dim);
|
|
}
|
|
|
|
.button:active:not(:disabled) {
|
|
transform: translate(2px, 2px);
|
|
box-shadow: 2px 2px 0 var(--color-dim);
|
|
}
|
|
|
|
.button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.button:focus-visible {
|
|
outline: 3px solid var(--color-accent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.primary {
|
|
background: var(--color-fg);
|
|
color: var(--color-bg);
|
|
}
|
|
|
|
.primary:hover:not(:disabled) {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.secondary {
|
|
background: var(--color-bg);
|
|
color: var(--color-fg);
|
|
}
|
|
|
|
.secondary:hover:not(:disabled) {
|
|
color: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.danger {
|
|
background: var(--color-danger);
|
|
border-color: var(--color-danger);
|
|
color: var(--color-fg);
|
|
}
|
|
|
|
.small {
|
|
padding: 6px 10px;
|
|
font-size: 8px;
|
|
box-shadow: 2px 2px 0 var(--color-dim);
|
|
}
|
|
|
|
.small:active:not(:disabled) {
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 1px 1px 0 var(--color-dim);
|
|
}
|