BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better styling for settings window

Browse Source
This commit is contained in:
Raphaël Forment
2023-10-21 15:14:19 +02:00
parent 1f96799a9c
commit d1465ef913
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -199,18 +199,20 @@
</div> </div>
<!-- This modal is used for settings --> <!-- This modal is used for settings -->
<div id="modal-settings" class="invisible bg-neutral-900 bg-opacity-50 flex <div id="modal-settings" class="invisible flex
absolute lg:justify-center lg:items-center overflow-y-scroll owerflow-x-scroll absolute lg:justify-center lg:items-center
md:top-0 md:bottom-0 md:w-auto md:h-auto h-screen w-screen" lg:overflow-y-auto lg:overflow-x-auto
overflow-y-scroll owerflow-x-scroll
md:top-0 md:bottom-0 h-screen w-full"
> >
<div class="grid grid-col-3"> <div class="grid w-full grid-col-3">
<div class="bg-white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8"> <div class="bg-white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8">
<h1 class="lg:mt-12 mt-0 font-semibold rounded-lg <h1 class="lg:mt-12 mt-6 font-semibold rounded-lg
bg-gray-800 justify-center lg:text-center lg:pl-0 pl-8 text-white mx-4 bg-gray-800 justify-center lg:text-center lg:pl-0 pl-8 text-white mx-4
text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1> text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
<div class="flex lg:flex-row flex-col mr-4 ml-4"> <div class="flex lg:flex-row flex-col mr-4 ml-4">
<!-- Font Size Selection --> <!-- 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"> <div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 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"> <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> <label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label>
@ -228,7 +230,7 @@
</select> </select>
</div> </div>
<!-- Editor mode selection --> <!-- Editor mode selection -->
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-3/4 pt-2 pb-1 mb-2"> <div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p> <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p>
<!-- Checkboxes --> <!-- Checkboxes -->
<div class="pr-4"> <div class="pr-4">
@ -255,7 +257,7 @@
</div> </div>
</div> </div>
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-3/4 pt-2 pb-1 mb-2"> <div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p> <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"> <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"> <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">
@ -354,7 +356,7 @@
</div> </div>
<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-14 lg:pb-0"> <div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-24 lg:pb-0">
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class=" <button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4 hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4
font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button> font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>