Some more polish both flatly and darkly themes

approot/templates.xml

@@ -2,7 +2,7 @@
 <messages xmlns:if="Wt.WTemplate.conditions">
 
 <message id="Lms.template">
-	${navbar-top class="main-nav"}
+	${navbar-top class="Lms-navbar"}
 	<div class="container">
 		${contents class="Lms-contents"}
 	</div>

docroot/css/lms-darkly.css

@@ -0,0 +1,37 @@
+:root {
+  --hover-color: #00bc8c;
+  --body-color: #cacaca;
+  --slider-background-color: #5a5a5a;
+}
+
+.Lms-artistname.text-muted {
+	font-style: italic;
+	color: #7e7e7e;
+}
+
+.Lms-player-btn {
+	color: var(--body-color)
+}
+
+.Lms-releasename.text-primary, .Lms-releasename.text-primary:hover {
+	color: var(--body-color)
+}
+
+a.Lms-releasename.text-primary:hover {
+	color: var(--hover-color)
+}
+
+.Lms-trackname.text-primary, .Lms-trackname.text-primary:hover {
+	color: var(--body-color)
+}
+
+/*
+.Lms-entry-hoverable:hover {
+	filter: drop-shadow(0 0 0.2rem darkgrey);
+}
+*/
+
+.media, .media-body {
+	overflow: visible;
+}
+

docroot/css/lms-flatly.css

@@ -0,0 +1,21 @@
+:root {
+  --hover-color: #18bc9c;
+  --body-color: #2c3e50;
+  --slider-background-color: #c0cfde;
+}
+
+.Lms-artistname.text-muted {
+	font-style: italic;
+	color: #7e8f9e;
+}
+
+/*
+.Lms-entry-hoverable:hover {
+	filter: drop-shadow(0 0 0.2rem darkgrey);
+}
+*/
+
+.media, .media-body {
+	overflow: visible;
+}
+

docroot/css/lms.css

@@ -17,32 +17,6 @@ a, a:link, a:active, a:visited {
 	margin-bottom: 78px;
 }
 
-/* Themable items */
-
-/* Base style for artist names */
-.Lms-artistname {
-	font-style: normal;
-}
-
-/* Base style for release names */
-.Lms-releasename {
-	font-style: normal;
-}
-
-.Lms-trackname {
-	font-style: normal;
-}
-
-.Lms-entry-hoverable:hover {
-/*	filter: drop-shadow(0 0 0.2rem darkgrey); */
-}
-
-.Lms-control-btn:hover {
-	color: #337ab7;
-}
-
-/* endof Themable items */
-
 .Lms-show-more {
 	margin-top: 8px;
 	margin-bottom: 8px;
@@ -68,6 +42,14 @@ a, a:link, a:active, a:visited {
 	margin-right: 8px;
 }
 
+.Lms-artistname {
+	color: var(--body-color);
+}
+
+a.Lms-artistname:hover, a.Lms-artistname:focus {
+	color: var(--hover-color);
+}
+
 .Lms-cluster {
 	display: inline;
 	cursor: pointer;
@@ -127,10 +109,31 @@ a, a:link, a:active, a:visited {
 	margin-bottom: 4px;
 }
 
+.Lms-control-btn:hover {
+	color: var(--hover-color);
+}
+
 .Lms-cover:hover {
 	filter: brightness(130%);
 }
 
+.Lms-cover-small {
+	width: 64px; /* some cover may not be square */
+	border-radius: 10px;
+	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
+}
+
+.Lms-cover-medium {
+	width: 128px;
+	border-radius: 16px;
+	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
+}
+
+.Lms-cover-large {
+	border-radius: 16px;
+	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
+}
+
 .Lms-explore-contents {
 	margin-bottom: 24px;
 }
@@ -142,8 +145,6 @@ a, a:link, a:active, a:visited {
 
 .Lms-explore-release-cover {
 	max-width: 100%;
-	border-radius: 8px;
-	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
 }
 
 .Lms-explore-release-entry-tracknumber {
@@ -250,6 +251,9 @@ a, a:link, a:active, a:visited {
 	cursor: pointer;
 }
 
+.Lms-navbar {
+	border-radius: 0px;
+}
 
 .Lms-playqueue-entry {
 	min-height: 32px;
@@ -327,26 +331,19 @@ a, a:link, a:active, a:visited {
 	width: 0.9em;
 }
 
+.Lms-player-controls {
+	text-align: center;
+	white-space: nowrap;
+}
+
 .Lms-player-duration {
 	line-height: 40px;
 	text-align: right;
 	white-space: nowrap;
 }
 
-.Lms-player-seek-container {
+.Lms-player-progress {
-	margin-top: 8px;
+	background-color: var(--slider-background-color);
-	margin-bottom: 8px;
-	position: relative;
-	width: 100%;
-	height: 8px;
-}
-
-.Lms-player-seek-common {
-	position: absolute;
-	width:100%;
-	top: 0px;
-	left: 0px;
-	height: 8px;
 }
 
 .Lms-player-seek {
@@ -367,6 +364,23 @@ a, a:link, a:active, a:visited {
 	width: 0px;
 }
 
+.Lms-player-seek-container {
+	margin-top: 8px;
+	margin-bottom: 8px;
+	position: relative;
+	width: 100%;
+	height: 8px;
+}
+
+.Lms-player-seek-common {
+	position: absolute;
+	width:100%;
+	top: 0px;
+	left: 0px;
+	height: 8px;
+	border-radius: 4px;
+}
+
 .Lms-player-seek::-moz-range-thumb {
 	-webkit-appearance: none;
 	-moz-appearance: none;
@@ -374,11 +388,6 @@ a, a:link, a:active, a:visited {
 	width: 0px;
 }
 
-.Lms-player-controls {
-	text-align: center;
-	white-space: nowrap;
-}
-
 .Lms-player-text-center {
 	text-align: center;
 	white-space: nowrap;
@@ -397,10 +406,20 @@ a, a:link, a:active, a:visited {
 	display: flex;
 }
 
-.Lms-player-volume-slider-container {
+.Lms-player-volume-slider::-webkit-slider-thumb {
-	display: inline-block;
+	background-color: var(--body-color);
-	width: 85px;
+}
-	margin: auto;
+
+.Lms-player-volume-slider::-webkit-slider-thumb:hover {
+	background-color: var(--hover-color);
+}
+
+.Lms-player-volume-slider::-moz-range-thumb {
+	background-color: var(--body-color);
+}
+
+.Lms-player-volume-slider::-moz-range-thumb:hover {
+	background-color: var(--hover-color);
 }
 
 .Lms-player-volume-slider {
@@ -411,9 +430,9 @@ a, a:link, a:active, a:visited {
 	outline: none;
 	cursor: pointer;
 	border-radius: 4px;
-	background-color: inherit;
 	border-style: solid;
 	border-width: thin;
+	background-color: var(--slider-background-color);
 }
 
 .Lms-player-volume-slider::-webkit-slider-thumb {
@@ -422,21 +441,25 @@ a, a:link, a:active, a:visited {
 	width: 14px;
 	height: 14px;
 	border-radius: 7px;
-	background: darkgrey;
 }
 
 .Lms-player-volume-slider::-moz-range-thumb {
 	width: 14px;
 	height: 14px;
 	border-radius: 7px;
-	background: darkgrey;
 }
 
-.Lms-player-volume-slider::-webkit-slider-thumb:hover {
+.Lms-player-volume-slider-container {
-	background: #337ab7;
+	display: inline-block;
+	width: 85px;
+	margin: auto;
 }
 
-.Lms-player-volume-slider::-moz-range-thumb:hover {
+.Lms-releasename {
-	background: #337ab7;
+	color:  var(--body-color);
+}
+
+a.Lms-releasename:hover, a.Lms-releasename:focus {
+	color: var(--hover-color);
 }
 

src/lms/ui/LmsApplication.cpp

@@ -22,6 +22,7 @@
 #include <Wt/WAnchor.h>
 #include <Wt/WBootstrapTheme.h>
 #include <Wt/WEnvironment.h>
+#include <Wt/WLinkedCssStyleSheet.h>
 #include <Wt/WMenu.h>
 #include <Wt/WNavigationBar.h>
 #include <Wt/WPopupMenu.h>
@@ -115,7 +116,25 @@ LmsApplication::LmsApplication(const Wt::WEnvironment& env,
   _dbSession {db},
   _appGroups {appGroups}
 {
-	auto  bootstrapTheme = std::make_unique<Wt::WBootstrapTheme>();
+
+	class MyTheme : public Wt::WBootstrapTheme
+	{
+		private:
+			std::vector<Wt::WLinkedCssStyleSheet> styleSheets() const override
+			{
+				return
+				{
+					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-flatly.min.css"}},
+					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/lms-flatly.css"}},
+//					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-darkly.min.css"}},
+//					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/lms-darkly.css"}},
+//					Wt::WLinkedCssStyleSheet {Wt::WLink {"css/bootstrap-slate.css"}},
+					Wt::WLinkedCssStyleSheet { Wt::WLink {"resources/themes/bootstrap/3/wt.css"}},
+				};
+			}
+	};
+
+	auto  bootstrapTheme = std::make_unique<MyTheme>();
 	bootstrapTheme->setVersion(Wt::BootstrapVersion::v3);
 	bootstrapTheme->setResponsive(true);
 	setTheme(std::move(bootstrapTheme));

src/lms/ui/explore/ArtistView.cpp

@@ -132,8 +132,7 @@ Artist::refresh()
 
 			auto cover = std::make_unique<Wt::WImage>();
 			cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 128));
-			// Some images may not be square
+			cover->setStyleClass("Lms-cover-medium");
-			cover->setWidth(128);
 			anchor->setImage(std::move(cover));
 		}
 

src/lms/ui/explore/ReleaseLink.cpp

@@ -39,8 +39,8 @@ ReleaseLink::ReleaseLink(Database::Release::pointer release)
 
 	Wt::WAnchor* anchor = bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
 	auto cover = std::make_unique<Wt::WImage>();
-	cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 48));
+	cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 64));
-	cover->setWidth(48);
+	cover->setStyleClass("Lms-cover-small");
 	anchor->setImage(std::move(cover));
 
 	auto artists = release->getReleaseArtists();

src/lms/ui/explore/ReleaseView.cpp

@@ -114,7 +114,10 @@ Release::refresh()
 		}
 	}
 
-	t->bindNew<Wt::WImage>("cover", Wt::WLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 512)));
+	{
+		Wt::WImage* cover {t->bindNew<Wt::WImage>("cover", Wt::WLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 512)))};
+		cover->setStyleClass("Lms-cover-large");
+	}
 
 	Wt::WContainerWidget* clusterContainers {t->bindNew<Wt::WContainerWidget>("clusters")};
 	{

src/lms/ui/explore/ReleasesView.cpp

@@ -98,7 +98,7 @@ Releases::addSome()
 		auto cover = std::make_unique<Wt::WImage>();
 		cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 128));
 		// Some images may not be square
-		cover->setWidth(128);
+		cover->setStyleClass("Lms-cover-medium");
 		anchor->setImage(std::move(cover));
 
 		entry->bindWidget("release-name", LmsApplication::createReleaseAnchor(release));