0ad1ec1midiboot: in-browser MIDI workstation with pluggable instrumentsJeremy Magland 1* { box-sizing: border-box; }
2html, body, #root { height: 100%; margin: 0; }
3body {
4 background: #0f1115;
5 color: #d7dae0;
6 font: 13px/1.4 system-ui, sans-serif;
7 overflow: hidden;
8}
9.app { display: flex; flex-direction: column; height: 100%; }
10.loading { padding: 2rem; color: #888; }
12header, .transport {
13 display: flex;
14 align-items: center;
f67f407Time selections, loop playback, and further DAW-standard editingJeremy Magland 15 flex-wrap: wrap;
17 padding: 6px 10px;
18 background: #191c22;
19 border-bottom: 1px solid #262a33;
20 flex: none;
21}
22.brand { font-weight: 700; color: #5aa9e6; letter-spacing: 0.5px; }
23.spacer { flex: 1; }
25button {
26 background: #262b35;
27 color: #d7dae0;
28 border: 1px solid #333a47;
29 border-radius: 4px;
30 padding: 4px 10px;
31 cursor: pointer;
32 font: inherit;
33}
34button:hover { background: #303747; }
35button:disabled { opacity: 0.5; cursor: default; }
36button.toggled { background: #3a5b82; border-color: #5aa9e6; }
37button.rec { color: #ff5252; }
38button.rec.toggled { background: #6e2424; border-color: #ff5252; }
39button.mini { padding: 1px 6px; font-size: 11px; }
40button.danger:hover { background: #6e2424; border-color: #ff5252; }
42input, select {
43 background: #10131a;
44 color: #d7dae0;
45 border: 1px solid #333a47;
46 border-radius: 4px;
47 padding: 3px 6px;
48 font: inherit;
49}
50input[type='number'] { width: 56px; }
51input[type='checkbox'] { accent-color: #5aa9e6; }
52input[type='range'] { padding: 0; flex: 1; accent-color: #5aa9e6; }
53label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
55.songname { width: 200px; }
56.devicebar { display: flex; align-items: center; gap: 8px; }
57.dot { width: 9px; height: 9px; border-radius: 50%; background: #555; display: inline-block; }
58.dot.ok { background: #4cd964; }
59.err { color: #e07a7a; }
61.transport .pos {
62 font-variant-numeric: tabular-nums;
63 background: #10131a;
64 border: 1px solid #333a47;
65 border-radius: 4px;
66 padding: 3px 8px;
67 min-width: 52px;
68 text-align: center;
69}
70.transport .status { color: #aaa; }
f67f407Time selections, loop playback, and further DAW-standard editingJeremy Magland 71.rangeops { display: flex; align-items: center; gap: 6px; }
73.main { display: flex; flex: 1; min-height: 0; }
75.tracklist {
76 width: 250px;
77 flex: none;
78 overflow-y: auto;
79 background: #14161c;
80 border-right: 1px solid #262a33;
81 padding: 6px;
82 display: flex;
83 flex-direction: column;
84 gap: 6px;
85}
86.trackrow {
87 background: #1b1f27;
88 border: 1px solid #262a33;
89 border-radius: 6px;
90 padding: 6px;
91 cursor: pointer;
92 display: flex;
93 flex-direction: column;
94 gap: 5px;
95}
96.trackrow.active { border-color: #5aa9e6; background: #1e2530; }
97.trackrow-top, .trackrow-bottom, .trackrow-vol { display: flex; align-items: center; gap: 5px; }
98.trackrow .chip { width: 10px; height: 10px; border-radius: 3px; flex: none; }
99.trackrow .trackname { flex: 1; min-width: 0; background: transparent; border-color: transparent; }
100.trackrow .trackname:hover, .trackrow .trackname:focus { border-color: #333a47; background: #10131a; }
101.trackrow select { flex: 1; min-width: 0; }
102.trackrow .notecount { color: #777; font-size: 11px; white-space: nowrap; }
78851f6Replace instrawave with simulated instruments driven by manifestsJeremy Magland 103.trackrow-knobs { display: flex; flex-direction: column; gap: 2px; }
104.knob { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #9aa0ab; }
105.knob .knoblabel { flex: none; width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
106.knob input[type='range'] { flex: 1; }
107.knob .knobvalue { flex: none; width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
0ad1ec1midiboot: in-browser MIDI workstation with pluggable instrumentsJeremy Magland 109.addtrack { margin-top: 2px; }
111.pianoroll { flex: 1; min-width: 0; position: relative; }
112.pianoroll canvas { position: absolute; inset: 0; display: block; touch-action: none; }
114.statusbar {
115 flex: none;
116 padding: 3px 10px;
117 background: #191c22;
118 border-top: 1px solid #262a33;
119 color: #8a8f99;
120 font-size: 12px;
121 white-space: nowrap;
122 overflow: hidden;
123 text-overflow: ellipsis;
124}
126.modal-backdrop {
127 position: fixed;
128 inset: 0;
129 background: rgba(0, 0, 0, 0.55);
130 display: flex;
131 align-items: center;
132 justify-content: center;
133 z-index: 10;
134}
135.modal {
136 background: #191c22;
137 border: 1px solid #333a47;
138 border-radius: 8px;
139 width: min(560px, 92vw);
140 max-height: 80vh;
141 display: flex;
142 flex-direction: column;
143 padding: 14px;
144 gap: 10px;
145}
146.modal-head { display: flex; align-items: center; gap: 8px; }
147.modal-head h2 { margin: 0; font-size: 16px; flex: none; }
148.songlist { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
149.songrow { display: flex; align-items: center; gap: 6px; }
150.songrow.active .songname { color: #5aa9e6; }
151.songopen {
152 flex: 1;
153 display: flex;
154 flex-direction: column;
155 align-items: flex-start;
156 gap: 2px;
157 text-align: left;
158}
159.dim { color: #777; font-size: 11px; }