integrate tailwind more and a few other minor features

1 files changed, 22 insertions, 73 deletions

diff --git a/src/style.css b/src/style.css
index 14d8ed1..39e320b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,6 +2,7 @@
 @source "../public/index.html";
 
 :root {
+	--font-sans: "Overpass", sans-serif;
 	--immich-dark-primary: rgb(172 203 250);
 	--immich-dark-secondary: rgb(33 33 33);
 	--immich-dark-secondary-border: rgb(33 33 33 / .1);
@@ -11,19 +12,6 @@
 	--immich-dark-hover-border: rgb(31 41 55);
 }
 
-body {
-	background: black;
-	color-scheme: dark;
-	color: white;
-	height: 100vh;
-	max-height: 100vh;
-	display: flex;
-	flex-direction: column;
-	margin: 0;
-	font-family: "Overpass", sans-serif;
-	overflow: hidden;
-}
-
 main, #slideshow {
 	height: 100%;
 	display: flex;
@@ -31,37 +19,17 @@ main, #slideshow {
 	overflow: hidden;
 }
 
-/* slideshow */
-#slideshow-carousel {
-	height: 100%
+.svgbtn {
+	@apply bg-none border-0 p-0 cursor-pointer;
 }
 
+/* slideshow */
 .carousel-cell {
-	height: 100%;
-	width: 80vw;
-	margin: 24px;
-}
-
-.carousel-cell img {
-	vertical-align: middle;
-/*	border-radius: 10px; */
-	height: 100%;
-	max-width: 100%;
-	object-fit: contain;
-}
-
-#slideshow-share button,
-#slideshow-bottom-controls button {
-	background: none;
-	border: none;
-	padding: 0;
-}
+	@apply h-full w-[70vw] m-3 md:w-[80vw] md:m-6;
 
-#slideshow-share svg { height: 24px; width: 24px; }
-#slideshow-share button {
-	padding: 12px;
-	width: 48px;
-	height: 48px;
+	img {
+		@apply align-middle h-full max-w-full object-contain;
+	}
 }
 
 #slideshow-share,
@@ -99,7 +67,6 @@ main, #slideshow {
 	width: 100%;
 	max-width: 768px;
 	background-color: var(--immich-dark-secondary);
-	font-family: "Overpass", sans-serif;
 
 	&:focus { outline: 2px solid rgb(55, 65, 81) }
 }
@@ -109,17 +76,16 @@ main, #slideshow {
 	width: max-content;
 	margin: auto;
 	padding: 2rem;
+}
 
-	.album {
-		position: relative;
-		display: flex;
-		height: 10rem;
-		gap: 1.5em;
-		padding: 1rem;
-		border: 1px solid transparent;
-		border-bottom: 1px solid var(--selected-border);
-		border-top:    1px solid var(--selected-border);
-	}
+#albums-container .album {
+	border: 1px solid transparent;
+	border-bottom: 1px solid var(--selected-border);
+	border-top:    1px solid var(--selected-border);
+	@apply flex relative h-40 gap-6 p-4 cursor-pointer
+	       data-selected:bg-slate-950 data-selected:hover:bg-slate-900
+	       hover:bg-gray-900
+	;
 }
 
 @media (max-width: 512px) {
@@ -130,26 +96,9 @@ main, #slideshow {
 	}
 }
 
-@media (max-width: 768px) {
-	.carousel-cell {
-		width: 70vw;
-		margin: 12px;
-	}
-}
-
-#menu {
-	a {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		text-decoration: none;
-		width: 100%;
-		gap: 1rem;
-
-		span {
-			font-size: .875rem;
-			line-height: 1.25rem;
-			font-weight: 500;
-		}
-	}
+#menu a {
+	@apply flex items-center justify-center no-underline w-full gap-4
+	       hover:text-blue-300 hover:fill-blue-300
+	       data-selected:text-blue-300 data-selected:fill-blue-300
+	;
 }