finish tailwind restyle

1 files changed, 19 insertions, 74 deletions

diff --git a/src/style.css b/src/style.css
index f4bf0a0..4760434 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,13 +3,6 @@
 
 :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);
-	--selected-bg: rgb(172 203 250 / .1);
-	--selected-border: rgb(172 203 250 / .1);
-	--immich-dark-hover-bg: rgb(17 24 39);
-	--immich-dark-hover-border: rgb(31 41 55);
 	@apply scheme-dark;
 }
 
@@ -20,93 +13,45 @@ main, #slideshow {
 	overflow: hidden;
 }
 
-.svgbtn {
+.svg-btn {
 	@apply bg-none border-0 p-0 cursor-pointer;
 }
 
-/* slideshow */
-.carousel-cell {
-	@apply h-full w-[70vw] m-3 md:w-[80vw] md:m-6;
-
-	img {
-		@apply align-middle h-full max-w-full object-contain;
-	}
-}
-
-#slideshow-share,
-#slideshow-bottom-controls {
-	display: flex;
-	width: 80vw;
-	margin: auto;
-	justify-content: right;
-}
-
-
-#slideshow-bottom-controls {
-	margin: 48px auto;
-	button {
-		width: 48px;
-		height: 48px;
-		margin: auto;
-	}
-}
-
-/* albums */
-#albums {
-	height: 100%;
-	overflow: scroll;
-	margin-inline: 1rem;
+.nav-btn {
+	@apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full
+	       hover:text-blue-300 hover:fill-blue-300
+	       data-selected:text-blue-300 data-selected:fill-blue-300
+	       data-selected:bg-gray-900
+	;
 }
-#album-search {
-	display: block;
-	padding: 1rem;
-	border: 0;
-	margin: 1rem auto;
-	width: 100%;
-	max-width: 768px;
-	background-color: var(--immich-dark-secondary);
 
-	&:focus { outline: 2px solid rgb(55, 65, 81) }
+.carousel-cell {
+	@apply h-full w-[70vw] mx-3 md:w-[80vw] md:mx-6;
 }
-#albums-container {
-	grid-template-columns: repeat(auto-fill, minmax(var(--breakpoint-md), 1fr));
-	@apply grid w-max m-auto p-8;
+.carousel-img {
+	@apply align-middle h-full max-w-full object-contain;
 }
 
-#albums-container .album {
-	border: 1px solid transparent;
-	border-bottom: 1px solid var(--selected-border);
-	border-top:    1px solid var(--selected-border);
+.album {
 	@apply flex relative h-40 gap-6 p-3 cursor-pointer
+	       border-y border-slate-800
 	       data-selected:bg-slate-950 data-selected:hover:bg-slate-900
 	       hover:bg-gray-900
 	;
 }
 
-/* settings */
-fieldset {
+.rounded-fieldset {
 	@apply border rounded-2xl p-6 border-gray-500 flex flex-col gap-4;
 }
-
-fieldset h2 {
+.fieldset-header {
 	@apply font-bold text-blue-300 fill-blue-300 text-xl;
 }
-fieldset label {
-	@apply font-medium text-blue-200
+.settings-label {
+	@apply font-medium text-blue-200;
 }
-
 .rounded-input {
-	@apply rounded-2xl bg-zinc-800 p-4
+	@apply rounded-2xl bg-zinc-800 p-4;
 }
-
-.rounded-button {
+.rounded-btn {
 	@apply rounded-full w-fit bg-blue-200 px-4 py-2 text-black font-medium;
 }
-
-#menu a {
-	@apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full
-	       hover:text-blue-300 hover:fill-blue-300
-	       data-selected:text-blue-300 data-selected:fill-blue-300
-	       data-selected:bg-gray-900
-	;
-}