1 files changed, 88 insertions, 9 deletions

diff --git a/src/style.css b/src/style.css
index e84921e..f370f2c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,11 +1,21 @@
+@import "tailwindcss" source(none);
+@source "../public/*.html";
+
 :root {
 	--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);
 }
 
 .font-bold { font-weight: 700 }
 
 body {
 	background: black;
+	color-scheme: dark;
 	color: white;
 	height: 100vh;
 	max-height: 100vh;
@@ -13,18 +23,25 @@ body {
 	flex-direction: column;
 	margin: 0;
 	font-family: "Overpass", sans-serif;
+	overflow: hidden;
 }
 
 main, #slideshow {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
+	overflow: hidden;
 }
 
 svg {
 	fill: white;
 	width: 100%;
 	height: 100%;
+
+	&.p24 {
+		width: 24px;
+		height: 24px;
+	}
 }
 
 /* slideshow */
@@ -35,10 +52,7 @@ svg {
 .carousel-cell {
 	height: 100%;
 	width: 80vw;
-
 	margin: 24px;
-
-
 }
 
 .carousel-cell img {
@@ -86,26 +100,91 @@ svg {
 
 /* albums */
 #albums {
-	width: 100%;
 	height: 100%;
 	overflow: scroll;
+	margin-inline: 1rem;
+}
+#album-search {
+	display: block;
+	padding: 1rem;
+	border-radius: 1rem;
+	border: 0;
+	margin: 1rem auto;
+	width: 100%;
+	max-width: 768px;
+	background-color: var(--immich-dark-secondary);
+	font-family: "Overpass", sans-serif;
+
+	&:focus { outline: 2px solid rgb(55, 65, 81) }
 }
 #albums-container {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	gap: 2.5rem;
-	max-width: 1366px;
+	grid-template-columns: repeat(auto-fill, minmax(768px, 1fr));
+	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);
+		/*border-bottom: 1px solid var(--immich-dark-hover-border);*/
+
+		.album-selector {
+			opacity: 0;
+			border-radius: 50%;
+			align-self: center
+		}
+
+		&.selected {
+			background: var(--selected-bg);
+		}
+
+		&:hover {
+			cursor: pointer;
+			background: var(--immich-dark-hover-bg);
+			border: 1px solid var(--immich-dark-hover-border);
+
+			.album-selector { opacity: .5 }
+			.album-thumb {
+				box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
+			}
+			.album-name { color: var(--immich-dark-primary) }
+			.album-open { opacity: 1 }
+		}
+
+
+		&.selected .album-selector {
+			opacity: 1;
+			fill: var(--immich-dark-primary);
+			background: black;
+		}
+	}
+
 	.album-thumb {
-		width: 100%;
 		aspect-ratio: 1/1;
 		object-fit: cover;
 		border-radius: 1rem;
-		margin-bottom: 1rem;
 	}
 
+	.album-desc-grid {
+		display: flex;
+		justify-content: space-between;
+		align-self: center;
+		font-size: 18px;
+	}
+
+	.album-open {
+		position: absolute;
+		bottom: 1rem;
+		right: 1rem;
+		opacity: 0;
+	}
 }
 
 @media (max-width: 512px) {