git.s-ol.nu isomorphic-kb-explorer / 0b19a8a
options styling s-ol 4 months ago
2 changed file(s) with 23 addition(s) and 6 deletion(s). Raw diff Collapse all Expand all
265265
266266 return (
267267 <div className="app">
268 <button onClick={configure}>settings</button>
269 <label>layout:{' '}
268 <button onClick={configure}>midi settings</button>
269 <div className="option">
270 <label>layout:</label>
270271 <select name="layout" onChange={this.onlayout} value={layout}>
271272 <option value="wicki_hayden">Wicki-Hayden</option>
272273 <option value="harmonic">Harmonic Table</option>
273274 <option value="gerhard">Gerhard</option>
274275 </select>
275 </label>
276 <label>scale:{' '}
276 </div>
277 <div className="option">
278 <label>scale:</label>
277279 <select name="layout" onChange={this.onscale} value={scale}>
278280 <option value="none">None</option>
279281 <option value="major">Major</option>
284286 <option value="whole">Whole-Tone</option>
285287 <option value="penta">Pentatonic</option>
286288 </select>
287 </label>
288 <button onClick={this.onoffset}>set offset</button>
289 <button onClick={this.onoffset}>set offset</button>
290 </div>
289291
290292 <div className="main">
291293 <Keyboard
5151 font-family: sans-serif;
5252 }
5353
54 button, input, select {
55 background: #363636;
56 border: 1px solid #eeeeee;
57 color: #eeeeee;
58 padding: 0.25em;
59 margin: 0.125em 0;
60 border-radius: 0.5em;
61 }
62
5463 .app, .keyboard, .chord {
5564 position: relative;
5665 }
5867 .main {
5968 display: flex;
6069 justify-content: space-evenly;
70 }
71
72 .option label {
73 display: inline-block;
74 width: 4em;
75 margin-right: 1em;
6176 }
6277
6378 .hexagon {