New UI layout and UI improvements. Fixes #50

docroot/css/lms.css

@@ -4,25 +4,15 @@ a, a:link, a:active, a:visited {
 	cursor: pointer;
 }
 
+body {
+	padding-bottom: 78px;
+}
+
 .Lms-vertical-align {
 	display: flex;
 	align-items: center;
 }
 
-.Lms-horizontal-center {
-	display: flex;
-	justify-content: center;
-}
-
-.Lms-contents {
-	margin-bottom: 78px;
-}
-
-.Lms-show-more {
-	margin-top: 8px;
-	margin-bottom: 8px;
-}
-
 .Lms-admin-users-entry {
 	min-height: 48px;
 	padding-top: 8px;
@@ -63,6 +53,10 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	filter: brightness(130%);
 }
 
+.Lms-clusters-control {
+	margin-top: 4px;
+}
+
 .Lms-control-btn:hover {
 	color: var(--hover-color);
 	cursor: pointer;
@@ -72,18 +66,27 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	filter: brightness(130%);
 }
 
+.Lms-cover-container-smaller {
+}
+
 .Lms-cover-smaller {
-	width: 64px; /* some cover may not be square */
+	width: 64px;
 	border-radius: 3px;
 	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
 }
 
+.Lms-cover-container-small {
+}
+
 .Lms-cover-small {
-	width: 96px; /* some cover may not be square */
+	width: 96px;
 	border-radius: 3px;
 	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
 }
 
+.Lms-cover-container-medium {
+}
+
 .Lms-cover-medium {
 	width: 128px;
 	border-radius: 3px;
@@ -107,6 +110,10 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	width: 28px;
 }
 
+.Lms-explore-clusters {
+	display: inline-block;
+}
+
 .Lms-explore-contents {
 	margin-bottom: 24px;
 }
@@ -120,6 +127,10 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	max-width: 100%;
 }
 
+.Lms-explore-release-entries-container {
+	margin-bottom: 15px;
+}
+
 .Lms-explore-release-entry-tracknumber {
 	text-align: right;
 	white-space: nowrap;
@@ -160,12 +171,9 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	padding-bottom: 4px;
 }
 
-.Lms-explore-artists-entry {
-	min-height: 48px;
-}
-
-.Lms-explore-artists-entry-name {
-	font-style: normal;
+.Lms-explore-artists-entry-small {
+	min-height: 28px;
+	margin: 0;
 }
 
 .Lms-explore-artists-input {
@@ -177,9 +185,12 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	padding-bottom: 8px;
 }
 
-.Lms-explore-artistlink {
-	min-height: 28px;
-	margin: 0;
+.Lms-explore-artist-entries-container {
+	margin-bottom: 15px;
+}
+
+.Lms-explore-mode-container {
+	margin-bottom: 8px;
 }
 
 .Lms-explore-tracks-entry {
@@ -215,8 +226,21 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	margin: 0;
 }
 
-.Lms-navbar {
-	border-radius: 0;
+.Lms-header {
+	padding-bottom: 9px;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+.Lms-horizontal-center {
+	display: flex;
+	justify-content: center;
+}
+
+.Lms-navbar-search {
+	max-width: 175px;
+	padding-top: 7.5px;
+	padding-bottom: 7.5px;
 }
 
 .Lms-playqueue-btn {
@@ -426,3 +450,9 @@ a.Lms-releasename:hover, a.Lms-releasename:focus {
 	color: var(--hover-color);
 }
 
+.Lms-show-more {
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
+