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

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