finish tailwind restyle

1 files changed, 33 insertions, 35 deletions

diff --git a/public/index.html b/public/index.html
index dc140fe..bd55000 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,26 +9,28 @@
 	<header></header>
 	<main class="my-4">
 		<div id="slideshow" class="hidden!">
-			<div id="slideshow-top-controls">
-				<div id="slideshow-share">
-					<button id="share"    class="svgbtn p-3 size-12"><svg alt="Share"    class="size-6"><use href="#sprite-share"></use></svg></button>
-					<button id="download" class="svgbtn p-3 size-12"><svg alt="Download" class="size-6"><use href="#sprite-download"></use></svg></button>
+			<div class="flex justify-end pe-[10vw] w-full absolute bg-gradient-to-b from-black/40 z-20">
+				<div id="slideshow-share" class="z-10">
+					<button id="share"    class="svg-btn p-3 size-12"><svg alt="Share"    class="size-6"><use href="#sprite-share"></use></svg></button>
+					<button id="download" class="svg-btn p-3 size-12"><svg alt="Download" class="size-6"><use href="#sprite-download"></use></svg></button>
 					<!-- <button id="hide"><svg alt="Don't Show This Image"><use href="#skip_next"></use></svg></button> -->
 				</div>
 			</div>
 			<div id="slideshow-carousel" class="h-full"></div>
 			<template id="carousel-cell-template">
-				<div class="carousel-cell"><img src="" /></div>
+				<div class="carousel-cell"><img class="carousel-img" src="" /></div>
 			</template>
-			<div id="slideshow-bottom-controls" class="grid grid-cols-3 max-w-3xl">
-				<button id="prevSlide" class="svgbtn"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button>
-				<button id="playPause" class="svgbtn"><svg alt="Pause"          class="size-full"><use href="#sprite-pause"></use></svg></button>
-				<button id="nextSlide" class="svgbtn"><svg alt="Next Slide"     class="size-full"><use href="#sprite-skip_next"></use></svg></button>
+			<div class="grid grid-cols-3 w-full max-w-3xl m-auto justify-items-center py-4">
+				<button id="prevSlide" class="svg-btn size-12"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button>
+				<button id="playPause" class="svg-btn size-12"><svg alt="Pause"          class="size-full"><use href="#sprite-pause"></use></svg></button>
+				<button id="nextSlide" class="svg-btn size-12"><svg alt="Next Slide"     class="size-full"><use href="#sprite-skip_next"></use></svg></button>
 			</div>
 		</div>
-		<div id="albums" class="hidden!">
-			<input class="rounded-2xl max-w-3xl" id="album-search" placeholder="Search your albums" />
-			<div id="albums-container"></div>
+		<div id="albums" class="hidden! overflow-y-scroll"><div class="px-4 m-auto max-w-3xl">
+			<div class="p-2 sticky top-0 z-20 bg-black">
+				<input class="rounded-input mx-auto mb-4 w-full" id="album-search" placeholder="Search your albums" />
+			</div>
+			<div id="albums-container" class="m-auto z-10"></div>
 			<template id="album-template">
 				<div class="album group">
 					<svg class="opacity-0 self-center size-6 group-hover:opacity-50
@@ -50,52 +52,48 @@
 					</a>
 				</div>
 			</template>
-		</div>
-		<div id="settings" class="hidden!">
-			<form class="flex flex-col gap-4 m-auto max-w-3xl">
-				<fieldset>
-					<h2>
+		</div></div>
+		<div id="settings" class="hidden! overflow-y-scroll">
+			<form class="flex flex-col gap-4 m-auto max-w-3xl mx-auto px-4">
+				<fieldset class="rounded-fieldset">
+					<h2 class="fieldset-header">
 						<svg class="size-6 inline"><use href="#sprite-camera"></use></svg>
 						Immich Server
 					</h2>
 					<div>
-						<label>Immich URL</label>
+						<label class="settings-label">Immich URL</label>
 						<p>Complete Immich base url (e.g. <span class="font-medium">http://immich.local</span>)</p>
 					</div>
 					<input class="rounded-input" name="immich_url" type="text" />
 					<div>
-						<label>Immich API Key</label>
+						<label class="settings-label">Immich API Key</label>
 						<p>Generate an API key in User Settings</p>
 					</div>
 					<input class="rounded-input" name="immich_api_key" type="text" />
 				</fieldset>
-				<fieldset>
-					<h2>
+				<fieldset class="rounded-fieldset">
+					<h2 class="fieldset-header">
 						<svg class="size-6 inline"><use href="#sprite-photo_frame"></use></svg>
 						Display
 					</h2>
-					<div class="grid grid-cols-[16fr_9fr] gap-6">
+					<div class="grid md:grid-cols-[16fr_9fr] gap-4">
 						<div>
-							<label>Image Duration</label>
+							<label class="settings-label">Image Duration</label>
 							<p>Number of seconds each image will be displayed.</p>
 						</div>
 						<input class="my-auto rounded-input" name="image_duration" type="number" />
 						<div>
-							<label>Transition Duration</label>
+							<label class="settings-label">Transition Duration</label>
 							<p>Number of seconds each transition between images will take.<br>Set as 0 to disable.</p>
 						</div>
 						<input class="my-auto rounded-input" name="transition_duration" type="number" />
 						<div>
-							<label>Max Framerate</label>
+							<label class="settings-label">Max Framerate</label>
 							<p>Target display framerate.<br>Simple transitions look good as low as 12-15 fps.</p>
 						</div>
 						<input class="my-auto rounded-input" name="max_framerate" type="number" />
-						<!--<div>
-							<label>Auto Transition</label>
-							<input name="auto_transition" type="checkbox" />
-						</div>-->
 						<div>
-							<label>Display Size</label>
+							<label class="settings-label">Display Size</label>
 							<p>Image size to load on the display.<br>Large thumbnail size is suitable for FHD.</p>
 						</div>
 						<select class="my-auto rounded-input" name="display_size">
@@ -104,22 +102,22 @@
 							<option value="fullsize">Original Image</option>
 						</select>
 						<div>
-							<label>Max Cached Assets</label>
+							<label class="settings-label">Max Cached Assets</label>
 							<p>Number of assets that can exist at once in RAM.<br>Each additional asset will take ~2x the display size in memory.</p>
 						</div>
 						<input class="my-auto rounded-input" name="max_cache_assets" type="number" />
 					</div>
 				</fieldset>
-				<input class="rounded-button ml-auto" type="submit" value="Save Settings" />
+				<input class="rounded-btn ml-auto" type="submit" value="Save Settings" />
 			</form>
 		</div>
 	</main>
 	<footer class="w-full">
 		<div class="max-w-5xl m-auto">
 			<div id="menu" class="flex w-full p-2 gap-4 box-border border-t border-gray-500">
-				<a href="/slideshow"><svg class="size-6"><use href="#sprite-slideshow"  ></use></svg><span>Slideshow</span></a>
-				<a href="/albums"   ><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span>Albums</span></a>
-				<a href="/settings" ><svg class="size-6"><use href="#sprite-settings"   ></use></svg><span>Settings</span></a>
+				<a class="nav-btn" href="/slideshow"><svg class="size-6"><use href="#sprite-slideshow"  ></use></svg><span class="max-[425px]:hidden">Slideshow</span></a>
+				<a class="nav-btn" href="/albums"   ><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span class="max-[425px]:hidden">Albums</span></a>
+				<a class="nav-btn" href="/settings" ><svg class="size-6"><use href="#sprite-settings"   ></use></svg><span class="max-[425px]:hidden">Settings</span></a>
 			</div>
 		</div>
 	</footer>