ParkerTenBroeck/automata
1
0
Fork 0
mirror of https://github.com/ParkerTenBroeck/automata.git synced 2026-06-07 05:28:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

semi finalized theming

Browse source
This commit is contained in:
Parker TenBroeck 2026-01-07 16:32:28 -05:00
parent c12f7b325f
commit 620415c824
14 changed files with 728 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

99
web/root/style/controls.scss Normal file
View file

@ -0,0 +1,99 @@
.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;
}