107 lines
2.8 KiB
CSS
107 lines
2.8 KiB
CSS
.btn {
|
|
padding: .5lh 1lh;
|
|
border: none;
|
|
border-radius: .5lh;
|
|
|
|
--btn-color: var(--fg-color);
|
|
/* color: var(--text-color); */
|
|
background-color: var(--btn-color);
|
|
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
|
|
--transition-duration-short: 50ms;
|
|
--transition-duration-medium: 100ms;
|
|
--transition-duration-long: 200ms;
|
|
--transition-duration-bg-color: var(--transition-duration-medium);
|
|
--transition-duration-filter: var(--transition-duration-long);
|
|
--transition-duration-outline: var(--transition-duration-medium);
|
|
transition:
|
|
background-color ease-out var(--transition-duration-bg-color),
|
|
filter ease-out var(--transition-duration-filter),
|
|
outline ease-in var(--transition-duration-outline);
|
|
|
|
--drop-shadow-opacity: .5;
|
|
--drop-shadow-offset-y: 0;
|
|
--drop-shadow-blur: .25rem;
|
|
filter: var(--filter);
|
|
--filter:
|
|
brightness(var(--brightness, 1))
|
|
grayscale(var(--grayscale, 0));
|
|
cursor: pointer;
|
|
|
|
&:not(.flat) {
|
|
--drop-shadow: drop-shadow(
|
|
rgba(0, 0, 0, var(--drop-shadow-opacity))
|
|
0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
|
|
);
|
|
|
|
@supports (color: rgb(from black r g b / 0.5)) {
|
|
--drop-shadow: drop-shadow(
|
|
rgba(from var(--bg-color) r g b / var(--drop-shadow-opacity))
|
|
0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
|
|
);
|
|
}
|
|
|
|
filter: var(--filter) var(--drop-shadow);
|
|
}
|
|
|
|
&:not(:disabled):not(.flat):hover {
|
|
background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
|
|
--drop-shadow-opacity: .8;
|
|
--drop-shadow-offset-y: .25rem;
|
|
--drop-shadow-blur: .4rem;
|
|
}
|
|
|
|
&:where(:disabled) {
|
|
--brightness: .5;
|
|
--grayscale: .5;
|
|
}
|
|
|
|
&.suggested:not(.destructive) {
|
|
--btn-color: var(--accent-color);
|
|
}
|
|
|
|
&.destructive:not(.suggested) {
|
|
--btn-color: #861c1c;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
&.icon {
|
|
--text-color: transparent;
|
|
background: var(--icon-url) no-repeat;
|
|
background-size: contain;
|
|
overflow: hidden;
|
|
width: var(--icon-size, 1rem);
|
|
height: var(--icon-size, 1rem);
|
|
}
|
|
|
|
&.flat {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
--transition-duration-filter: var(--transition-duration-short);
|
|
|
|
&:not(:disabled) {
|
|
&:hover, &:focus-visible {
|
|
--brightness: 1.5;
|
|
}
|
|
|
|
&:active {
|
|
--brightness: 1.75;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
This class is just a hint, so this is on a best-effort basis.
|
|
If it works, it works, if not, then not.
|
|
*/
|
|
&.full-width {
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
}
|
|
}
|