mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-09 00:09:55 +00:00
da152b8585

61 lines
967 B
SCSS
61 lines
967 B
SCSS
.btn-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
font-size: 16px;
|
|
padding: 10px 12px;
|
|
pointer-events: auto;
|
|
|
|
// TODO: Copypasta
|
|
background: var(--color-toolbar-background);
|
|
color: #FFFC;
|
|
backdrop-filter: blur(16px);
|
|
transition: {
|
|
property: background, color;
|
|
duration: 0.1s;
|
|
timing-function: linear;
|
|
}
|
|
border-radius: var(--corner-radius);
|
|
|
|
&:hover {
|
|
background: #0008;
|
|
color: #FFF;
|
|
}
|
|
|
|
&:has(:focus-visible) {
|
|
z-index: 1;
|
|
outline: 4px solid #2F83FFBF;
|
|
}
|
|
|
|
&:has(:checked) {
|
|
border-color: var(--color-accent);
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
color: #FFF;
|
|
|
|
&:hover {
|
|
background: #90363F;
|
|
}
|
|
}
|
|
|
|
&:has(:disabled) {
|
|
background: #0003 !important;
|
|
color: #FFF6 !important;
|
|
}
|
|
|
|
input {
|
|
display: block;
|
|
appearance: none;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
}
|