slightly better CSS
This commit is contained in:
24
index.html
24
index.html
@ -211,7 +211,7 @@
|
||||
<div class="flex lg:flex-row flex-col mr-4 ml-4">
|
||||
<!-- Font Size Selection -->
|
||||
<div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-3/4 pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Font Settings</p>
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4">Font Settings</p>
|
||||
<div class="mb-6 mx-4 font-semibold">
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label>
|
||||
<input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900
|
||||
@ -219,7 +219,7 @@
|
||||
dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||
</div>
|
||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm">Font:</label>
|
||||
<select id="font-family" class="bg-gray-50 w-2/3 ml-4 border border-gray-300 w-full
|
||||
<select id="font-family" class="bg-gray-50 ml-4 border border-gray-300 mb-2
|
||||
text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
|
||||
<option selected>Choose a font</option>
|
||||
<option value="US">IBM Plex Mono</option>
|
||||
@ -256,17 +256,17 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-3/4 pt-2 pb-1 mb-2">
|
||||
<p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">File Management</p>
|
||||
<div class="flex flex-col space-y-2">
|
||||
<button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded-lg inline-flex items-center mx-4">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p>
|
||||
<div class="flex flex-col space-y-2 pb-2">
|
||||
<button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Download universes</span>
|
||||
</button>
|
||||
<button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Upload universes</span>
|
||||
</button>
|
||||
<button id="destroy-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold py-2 px-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="destroy-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
@ -277,9 +277,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Midi settings -->
|
||||
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-row mx-4 my-4 pt-4">
|
||||
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4">
|
||||
<div class="lg:flex lg:flex-row w-fit">
|
||||
<p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
|
||||
<div class="flex items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI Clock: </label>
|
||||
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
@ -294,7 +294,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="send-midi-clock" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Send MIDI Clock</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -306,7 +306,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="midi-channels-scripts" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Route channels to scripts</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -314,7 +314,7 @@
|
||||
|
||||
<!-- Audio nudge slider -->
|
||||
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2">
|
||||
<p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p>
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p>
|
||||
<div class="flex flex-column pb-2">
|
||||
<p class="pt-0.5 ml-4">Clock:</p>
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user