orchestrator-agent
4b592fdbbb
CI / ci (push) Successful in 6m44s
Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>
104 lines
1.7 KiB
CSS
104 lines
1.7 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;
|
|
}
|
|
|
|
.size52 {
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
|
|
.size62 {
|
|
width: 62px;
|
|
height: 62px;
|
|
}
|
|
|
|
/* A shown label sits 6 px under the circle, and the button grows to hold it. */
|
|
.labelled {
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
width: auto;
|
|
min-width: 62px;
|
|
height: auto;
|
|
min-height: 62px;
|
|
color: var(--color-neutral-700);
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.size52 .face {
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.neutral {
|
|
background: var(--color-neutral-100);
|
|
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;
|
|
}
|
|
}
|