dev_agent
02f1dd6491
CI / ci (push) Successful in 1m31s
Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com> Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
75 lines
1.2 KiB
CSS
75 lines
1.2 KiB
CSS
/* The button is the hit box; .face is the visible circle. A 40 px face sits in
|
|
a 44 px hit box whose negative margin keeps the 40 px layout footprint. */
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: none;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: var(--radius-pill);
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.size40 {
|
|
width: 44px;
|
|
height: 44px;
|
|
margin: -2px;
|
|
}
|
|
|
|
.size62 {
|
|
width: 62px;
|
|
height: 62px;
|
|
}
|
|
|
|
.face {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-pill);
|
|
transition: transform 100ms var(--ease-out-soft);
|
|
}
|
|
|
|
.size40 .face {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.size62 .face {
|
|
width: 62px;
|
|
height: 62px;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.button:active:not(:disabled) .face {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.surface {
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.accent {
|
|
background: var(--color-accent);
|
|
color: var(--on-accent);
|
|
}
|
|
|
|
.teal {
|
|
background: var(--color-accent-2-600);
|
|
color: var(--on-accent);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.face {
|
|
transition: none;
|
|
}
|
|
}
|