aparato

skeuomorphic design system in css: a precision appliance. every control works, and each row shows its state live.

keys

KeyBank

press a key or use the arrow keys. only one stays selected, with the orange dot.

band: am

buttons

PushButton · cream, olive, signal and momentary

each push presses the button in or releases it, and the led follows. pressed, it loses its long shadow. seek is momentary: it comes back on release and has no led.

pressed: radio
radio
auto
mono
seek
power

knobs

Knob · selector and knurled

selector: click or arrow keys, three positions. knurled: drag in a circle, use the wheel or the arrow keys.

lamp: off · 0° volume: 40 · −27°
uv 0 ir
lamp
volume

channel

ChannelSwitch

press a number or its line, or use the arrow keys. the arrow turns to that position and the light does not turn with it.

channel: 4
channel

levers

Lever · flat and cylinder

click or space to go from 0 to 1. down is on.

filter: 1 · speaker: 1 · bass: 0
01
filter
01
speaker
01
bass

rockers

Rocker

click or space to turn on. the led lights with it.

mains: 1 · light: 0
mains
light

loose parts

led, pointer, scale and label

the parts the controls are built from, with their class, in case you need them on their own.

ap-led
ap-led--on
ap-pointer
0 1 16 33 45ap-scale
uv · irap-scale--accent
powerap-cap