mirror of
https://github.com/ParkerTenBroeck/automata.git
synced 2026-06-07 05:28:45 -04:00
147 lines
No EOL
3 KiB
SCSS
147 lines
No EOL
3 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-yellow {
|
|
background: color-mix(in srgb, var(--warning) 14%, transparent);
|
|
border-color: color-mix(in srgb, var(--warning) 40%, transparent);
|
|
|
|
&:hover {
|
|
background: color-mix(in srgb, var(--warning) 22%, transparent);
|
|
}
|
|
}
|
|
|
|
.btn-blue {
|
|
background: color-mix(in srgb, var(--focus) 14%, transparent);
|
|
border-color: color-mix(in srgb, var(--focus) 40%, transparent);
|
|
|
|
&:hover {
|
|
background: color-mix(in srgb, var(--focus) 22%, transparent);
|
|
}
|
|
}
|
|
|
|
.btn-grey {
|
|
background: color-mix(in srgb, var(--ansi-fg-90) 12%, transparent);
|
|
border-color: color-mix(in srgb, var(--ansi-fg-90) 28%, transparent);
|
|
|
|
&:hover {
|
|
background: color-mix(in srgb, var(--ansi-fg-90) 18%, transparent);
|
|
}
|
|
}
|
|
|
|
.btn-red {
|
|
background: color-mix(in srgb, var(--error) 12%, transparent);
|
|
border-color: color-mix(in srgb, var(--error) 28%, transparent);
|
|
|
|
&:hover {
|
|
background: color-mix(in srgb, var(--error) 18%, transparent);
|
|
}
|
|
}
|
|
|
|
.btn-toggle.active {
|
|
background: color-mix(in srgb, var(--success) 14%, transparent);
|
|
border-color: color-mix(in srgb, var(--success) 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;
|
|
}
|
|
|
|
|
|
|
|
|
|
.test-input {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
|
|
align-self: center;
|
|
|
|
padding: 10px 14px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--bg-1);
|
|
background: var(--bg-2);
|
|
|
|
font: var(--font-ui);
|
|
color: var(--fg-0);
|
|
|
|
outline: none;
|
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.test-input::placeholder {
|
|
color: var(--fg-0);
|
|
}
|
|
|
|
.test-input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent);
|
|
} |