144 lines
3 KiB
CSS
Executable file
144 lines
3 KiB
CSS
Executable file
button, .button {
|
|
min-height: 44px;
|
|
min-width: 120px;
|
|
max-width: 20ch;
|
|
box-shadow:var(--text) 0 0 0 2px;
|
|
background-color: black;
|
|
background-color: var(--text);
|
|
border:none;
|
|
border-radius: var(--radius-sm);
|
|
line-height: 1.5;
|
|
font-weight: 600;
|
|
padding:5px 19px;
|
|
color: white;
|
|
color:var(--accent);
|
|
text-decoration:none;
|
|
}
|
|
|
|
button:hover, .button:hover {
|
|
color:var(--text);
|
|
box-shadow:var(--text) 0 0 0 2px;
|
|
background-color: var(--background);
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled, .button:disabled {
|
|
color:var(--text);
|
|
box-shadow:var(--grey-dark) 0 0 0 2px;
|
|
background-color: var(--grey);
|
|
pointer-events: none;
|
|
}
|
|
|
|
button:active, .button:active {
|
|
color:var(--text);
|
|
box-shadow:var(--text) 0 0 0 2px;
|
|
background-color: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
button svg, .button svg {
|
|
fill:var(--text);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
[theme="light"] button, [theme="light"] .button {
|
|
color:var(--background);
|
|
box-shadow:var(--text) 0 0 0 2px;
|
|
border:none;
|
|
}
|
|
|
|
|
|
[theme="light"] button:hover, [theme="light"] .button:hover {
|
|
color:var(--text);
|
|
box-shadow:var(--text) 0 0 0 2px;
|
|
background-color: var(--background);
|
|
cursor: pointer;
|
|
}
|
|
|
|
[theme="light"] button:active, [theme="light"] .button:active {
|
|
color:var(--text);
|
|
background-color: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
[theme="dark"] button, [theme="dark"] .button {
|
|
color:var(--background);
|
|
box-shadow:var(--text) 0 0 0 2px;
|
|
border:none;
|
|
}
|
|
|
|
[theme="dark"] button:hover, [theme="dark"] .button:hover {
|
|
color:var(--text);
|
|
box-shadow:var(--text) 0 0 0 2px;
|
|
background-color: var(--background);
|
|
cursor: pointer;
|
|
}
|
|
|
|
[theme="dark"] button:active, [theme="dark"] .button:active {
|
|
color:var(--background);
|
|
background-color: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
button[data-secondary] {
|
|
box-shadow:var(--text) 0 0 0 2px;
|
|
background-color: var(--background);
|
|
color:var(--text);
|
|
}
|
|
|
|
button[data-small] {
|
|
min-height: 24px;
|
|
min-width:unset;
|
|
padding:3px 10px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
button[data-naked] {
|
|
outline: none;
|
|
border: none;
|
|
background:transparent;
|
|
box-shadow:none;
|
|
color:unset;
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
padding:0;
|
|
margin:0;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
button[data-naked]:hover {
|
|
outline: none;
|
|
border: none;
|
|
background:transparent;
|
|
box-shadow:none;
|
|
color:unset;
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
padding:0;
|
|
margin:0;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
button[data-warning] {
|
|
box-shadow:var(--red-darker) 0 0 0 2px;
|
|
background-color: var(--red-dark);
|
|
color:var(--white);
|
|
}
|
|
|
|
button[data-warning]:hover {
|
|
box-shadow:var(--black) 0 0 0 2px;
|
|
background-color: var(--red-darker);
|
|
color:var(--white);
|
|
}
|
|
|
|
button:focus-visible {
|
|
background-color: var(--focus);
|
|
color: var(--accent);
|
|
box-shadow:var(--text) 0 0 0 2px;
|
|
fill:var(--background);
|
|
}
|