mirror of
https://github.com/ParkerTenBroeck/automata.git
synced 2026-06-06 21:24:06 -04:00
99 lines
2.1 KiB
SCSS
99 lines
2.1 KiB
SCSS
.controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2);
|
|
user-select: none;
|
|
}
|
|
|
|
.controls .spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.btn {
|
|
appearance: none;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: var(--fg-0);
|
|
padding: 8px 12px;
|
|
border-radius: var(--radius-md);
|
|
font:
|
|
600 13px/1.1
|
|
var(--font-ui);
|
|
cursor: pointer;
|
|
|
|
transition:
|
|
transform 0.04s ease,
|
|
background var(--dur-med) var(--ease-standard),
|
|
border-color var(--dur-med) var(--ease-standard),
|
|
opacity var(--dur-med) var(--ease-standard);
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.10);
|
|
border-color: rgba(255, 255, 255, 0.20);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.btn-green {
|
|
background: color-mix(in srgb, var(--success) 18%, transparent);
|
|
border-color: color-mix(in srgb, var(--success) 35%, transparent);
|
|
|
|
&:hover {
|
|
background: color-mix(in srgb, var(--success) 26%, transparent);
|
|
}
|
|
}
|
|
|
|
.btn-blue {
|
|
background: color-mix(in srgb, var(--accent) 14%, transparent);
|
|
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
|
|
|
|
&:hover {
|
|
background: color-mix(in srgb, var(--accent) 22%, transparent);
|
|
}
|
|
}
|
|
|
|
.btn-grey {
|
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
border-color: color-mix(in srgb, var(--accent) 28%, transparent);
|
|
|
|
&:hover {
|
|
background: color-mix(in srgb, var(--accent) 18%, transparent);
|
|
}
|
|
}
|
|
|
|
.btn-toggle.active {
|
|
background: color-mix(in srgb, var(--warning) 14%, transparent);
|
|
border-color: color-mix(in srgb, var(--warning) 30%, transparent);
|
|
}
|
|
|
|
|
|
.speed {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: 6px 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-radius: var(--radius-md);
|
|
font: 600 12.5px var(--font-ui);
|
|
color: var(--fg-0);
|
|
}
|
|
|
|
.speed input[type="range"] {
|
|
width: 160px;
|
|
}
|
|
|
|
.speed #speedLabel {
|
|
min-width: 40px;
|
|
text-align: right;
|
|
opacity: 0.9;
|
|
}
|