Signalsmith-Audio/signalsmith-stretch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI tweaks for demo

Browse Source
This commit is contained in:
Geraint 2025-02-09 12:24:43 +00:00
parent e043358a4a
commit eaf484a9f7
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/demo/index.html
View File

@ -20,6 +20,10 @@
flex-grow: 1;
font: inherit;
}
:root {
font-size: calc(min(12pt, 5vh));
}
body {
margin: 0;
@ -31,11 +35,8 @@
max-width: 100vw;
display: grid;
grid-template-areas: "playstop playback upload" "controls controls controls" "scope scope scope";
grid-template-columns: 3rem 1fr max-content;
grid-template-rows: 2.5rem 1fr 8rem;
font-size: 12pt;
font-family: Arial, sans-serif;
grid-template-columns: 3.5rem 1fr 6rem;
grid-template-rows: max-content 2fr 6rem;
}
#controls {
@ -53,14 +54,18 @@
}
#controls input[type=range], #controls input[type=checkbox] {
grid-column: 2;
font: inherit;
}
#controls .input[type=number] {
#controls input[type=number] {
grid-column: 3;
font: inherit;
}
#scope {
grid-area: scope;
width: 100%;
height: 6rem;
max-height: 100%;
border: none;
}
#playstop {
@ -84,7 +89,7 @@
height: 100%;
z-index: -1;
}
#upload {
#upload, #upload-file {
grid-area: upload;
}
</style>
@ -101,7 +106,6 @@
<label>semitones</label>
<input type="range" min="-12" max="12" step="1" data-key="semitones" class="diagram-red">
<input type="number" min="-12" max="12" step="1" data-key="semitones" class="diagram-red">
<!--
<label>tonality limit</label>
<input type="range" min="2000" max="20000" step="100" data-key="tonalityHz" class="diagram-red">
<input type="number" min="2000" max="20000" step="1" data-key="tonalityHz" class="diagram-red">
@ -111,7 +115,6 @@
<label>shelf dB</label>
<input type="range" min="-24" max="12" step="0.1" data-key="shelfDb">
<input type="number" min="-24" max="12" step="0.1" data-key="shelfDb">
-->
</div>
<script type="module">
import SignalsmithStretch from "../release/SignalsmithStretch.mjs";