From b3f14153d2f7288519ab6b3fb4ab16bce673e387 Mon Sep 17 00:00:00 2001
From: emeric <itmfr@yahoo.fr>
Date: Tue, 1 Sep 2020 13:42:17 +0200
Subject: [PATCH] Added some color transitions, ref #82

---
 approot/artist.xml         |  4 ++--
 approot/artists.xml        |  4 ++--
 approot/explore.xml        |  4 ++--
 approot/mediaplayer.xml    |  8 ++++----
 approot/playqueue.xml      | 16 ++++++++--------
 approot/release.xml        |  4 ++--
 approot/releases.xml       |  4 ++--
 approot/templates.xml      | 14 +++++++-------
 approot/tracks.xml         |  4 ++--
 docroot/css/lms-darkly.css |  4 ----
 docroot/css/lms.css        | 16 +++++++++++-----
 11 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/approot/artist.xml b/approot/artist.xml
index 3e7bca0a..301682b6 100644
--- a/approot/artist.xml
+++ b/approot/artist.xml
@@ -24,7 +24,7 @@
 		<div class="col-md-4">
 			<div class="well well-sm">
 				<h3>${tr:Lms.Explore.links}</h3>
-				${mbid-link class="text-muted"}
+				${mbid-link class="Lms-btn text-muted"}
 			</div>
 		</div>
 		${</if-has-mbid>}
@@ -41,7 +41,7 @@
 			</div>
 			<div class="col-xs-8 col-sm-9 col-md-10 Lms-explore-list-entry-text-container">
 					<h5>${name class="Lms-releasename text-primary"}</h5>
-					${<if-has-artist>}<h6>${artist class="Lms-artistname text-muted"}</h6>${</if-has-artist>}
+					${<if-has-artist>}<h6>${artist class="Lms-btn Lms-artistname text-muted"}</h6>${</if-has-artist>}
 					<h6><small><div class="text-muted">${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</div></small></h6>
 			</div>
 		</div>
diff --git a/approot/artists.xml b/approot/artists.xml
index 83d44747..70516b79 100644
--- a/approot/artists.xml
+++ b/approot/artists.xml
@@ -18,13 +18,13 @@
 
 <message id="Lms.Explore.Artists.template.entry">
 	<div class="Lms-explore-artists-entry Lms-entry-hoverable Lms-vertical-align">
-		 <h4>${name class="Lms-artistname text-primary"}</h4>
+		 <h4>${name class="Lms-btn Lms-artistname text-primary"}</h4>
 	</div>
 </message>
 
 <message id="Lms.Explore.Artists.template.entry-small">
 	<div class="Lms-explore-artists-entry-small Lms-entry-hoverable Lms-vertical-align">
-		${name class="Lms-artistname text-primary"}
+		${name class="Lms-btn Lms-artistname text-primary"}
 	</div>
 </message>
 
diff --git a/approot/explore.xml b/approot/explore.xml
index 80881197..a1a84291 100644
--- a/approot/explore.xml
+++ b/approot/explore.xml
@@ -5,8 +5,8 @@
 	${contents class="Lms-explore-contents"}
 </message>
 
-<message id="Lms.Explore.template.more-btn"><i class="fa fa-plus-circle Lms-explore-btn Lms-control-btn"></i></message>
-<message id="Lms.Explore.template.play-btn"><i class="fa fa-play-circle Lms-explore-btn Lms-control-btn"></i></message>
+<message id="Lms.Explore.template.more-btn"><i class="fa fa-plus-circle Lms-explore-btn Lms-btn"></i></message>
+<message id="Lms.Explore.template.play-btn"><i class="fa fa-play-circle Lms-explore-btn Lms-btn"></i></message>
 
 <message id="Lms.Explore.template.filters">
 	${add-filter class="btn-sm btn-info"} ${clusters class="Lms-explore-clusters"}
diff --git a/approot/mediaplayer.xml b/approot/mediaplayer.xml
index 452dfd32..1d0c8990 100644
--- a/approot/mediaplayer.xml
+++ b/approot/mediaplayer.xml
@@ -16,11 +16,11 @@
 
 		<div class="row">
 			<div class="col-xs-5 col-sm-2 Lms-player-controls">
-				<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-control-btn Lms-player-btn-controls"></i><i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-control-btn Lms-player-btn-controls"></i><i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-control-btn Lms-player-btn-controls"></i>
+				<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-btn Lms-player-btn-controls"></i>
 			</div>
 			<div class="hidden-xs col-sm-2">
 				<div class="Lms-player-volume">
-					<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-control-btn Lms-player-btn-volume"></i>
+					<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-btn Lms-player-btn-volume"></i>
 					<span class="hidden-xs Lms-player-volume-slider-container">
 						<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8" class="Lms-player-volume-slider"/>
 					</span>
@@ -31,11 +31,11 @@
 					${title class="Lms-player-text Lms-trackname text-primary"}
 				</div>
 				<div class="Lms-player-text-center">
-					<span class="hidden-xs">${release class="Lms-player-text Lms-releasename text-primary"}</span><small>${artist class="Lms-player-text Lms-artistname text-muted"}</small>
+					<span class="hidden-xs">${release class="Lms-btn Lms-player-text Lms-releasename text-primary"}</span><small>${artist class="Lms-btn Lms-player-text Lms-artistname text-muted"}</small>
 				</div>
 			</div>
 			<div class="hidden-xs col-sm-2 Lms-player-duration text-muted">
-				<a id="lms-transcoding-active" class="Lms-player-btn Lms-control-btn" data-toggle="tooltip" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></a>
+				<a id="lms-transcoding-active" class="Lms-player-btn Lms-btn" data-toggle="tooltip" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></a>
 				<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
 			</div>
 		</div>
diff --git a/approot/playqueue.xml b/approot/playqueue.xml
index 3fb28e46..2eeb3268 100644
--- a/approot/playqueue.xml
+++ b/approot/playqueue.xml
@@ -2,10 +2,10 @@
 <messages xmlns:if="Wt.WTemplate.conditions">
 <!--FORMS message blocks-->
 
-<message id="Lms.PlayQueue.template.clear-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-control-btn"></i></message>
-<message id="Lms.PlayQueue.template.shuffle-btn"><i class="fa fa-fw fa-random Lms-playqueue-btn Lms-control-btn"></i></message>
-<message id="Lms.PlayQueue.template.repeat-btn"><i class="fa fa-fw fa-repeat Lms-playqueue-btn Lms-control-btn"></i></message>
-<message id="Lms.PlayQueue.template.radio-btn"><i class="fa fa-fw fa-rss Lms-playqueue-btn Lms-control-btn"></i></message>
+<message id="Lms.PlayQueue.template.clear-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-btn"></i></message>
+<message id="Lms.PlayQueue.template.shuffle-btn"><i class="fa fa-fw fa-random Lms-playqueue-btn Lms-btn"></i></message>
+<message id="Lms.PlayQueue.template.repeat-btn"><i class="fa fa-fw fa-repeat Lms-playqueue-btn Lms-btn"></i></message>
+<message id="Lms.PlayQueue.template.radio-btn"><i class="fa fa-fw fa-rss Lms-playqueue-btn Lms-btn"></i></message>
 
 <message id="Lms.PlayQueue.template">
 	<div class="row">
@@ -21,8 +21,8 @@
 	</div>
 </message>
 
-<message id="Lms.PlayQueue.template.play-btn"><i class="fa fa-fw fa-play-circle Lms-playqueue-btn Lms-control-btn"></i></message>
-<message id="Lms.PlayQueue.template.delete-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-control-btn"></i></message>
+<message id="Lms.PlayQueue.template.play-btn"><i class="fa fa-fw fa-play-circle Lms-playqueue-btn Lms-btn"></i></message>
+<message id="Lms.PlayQueue.template.delete-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-btn"></i></message>
 
 <message id="Lms.PlayQueue.template.entry">
 	<div class="row Lms-vertical-align Lms-explore-entry-list Lms-playqueue-entry ${is-selected}">
@@ -34,7 +34,7 @@
 		<div class="col-xs-7 col-sm-8 col-md-8 Lms-explore-entry-list-text-container">
 			<div class="Lms-trackname text-primary"><h5>${name}</h5></div>
 			${<if-has-artists-or-release>}
-			${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
+			${<if-has-release>}<small>${release class="Lms-btn Lms-releasename text-primary"}</small>${</if-has-release>}
 			${<if-has-artists>}${artists}${</if-has-artists>}
 			${</if-has-artists-or-release>}
 		</div>
@@ -50,7 +50,7 @@
 </message>
 
 <message id="Lms.PlayQueue.template.entry-artist">
-	<small>${artist class="Lms-artistname text-muted"}</small>
+	<small>${artist class="Lms-btn Lms-artistname text-muted"}</small>
 </message>
 
 </messages>
diff --git a/approot/release.xml b/approot/release.xml
index cb49ffd7..78f93245 100644
--- a/approot/release.xml
+++ b/approot/release.xml
@@ -14,7 +14,7 @@
 		<div class="col-md-8">
 			<div class="Lms-header">
 				<h3><div class="Lms-releasename text-primary">${name}</div></h3>
-				${<if-has-artist>}<h4>${artist class="Lms-artistname text-muted"}</h4>${</if-has-artist>}
+				${<if-has-artist>}<h4>${artist class="Lms-btn Lms-artistname text-muted"}</h4>${</if-has-artist>}
 				<div class="text-muted"><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></div>
 				${clusters}
 				${play-btn}${more-btn}
@@ -45,7 +45,7 @@
 		<div class="col-xs-12 col-md-4">
 			<div class="well well-sm">
 				<h3>${tr:Lms.Explore.links}</h3>
-				${mbid-link class="text-muted"}
+				${mbid-link class="Lms-btn text-muted"}
 			</div>
 		</div>
 		${</if-has-mbid>}
diff --git a/approot/releases.xml b/approot/releases.xml
index 430e48dd..3d9ec83c 100644
--- a/approot/releases.xml
+++ b/approot/releases.xml
@@ -21,8 +21,8 @@
 				${cover}
 			</div>
 			<div class="Lms-explore-entry-grid-text-container">
-				<h5>${release-name class="Lms-releasename text-primary"}</h5>
-				<div class="Lms-explore-entry-separator"><h6>${<if-has-year>}<small><span class="text-muted">${year}</span></small>${</if-has-year>}${<if-has-artist>}${artist-name class="Lms-artistname text-muted"}${</if-has-artist>}</h6></div>
+				<h5>${release-name class="Lms-btn Lms-releasename text-primary"}</h5>
+				<div class="Lms-explore-entry-separator"><h6>${<if-has-year>}<small><span class="text-muted">${year}</span></small>${</if-has-year>}${<if-has-artist>}${artist-name class="Lms-btn Lms-artistname text-muted"}${</if-has-artist>}</h6></div>
 			</div>
 		</div>
 	</div>
diff --git a/approot/templates.xml b/approot/templates.xml
index 2145b7f7..5be1e07d 100644
--- a/approot/templates.xml
+++ b/approot/templates.xml
@@ -11,17 +11,17 @@
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				${title class="navbar-brand"}
+				${title class="navbar-brand Lms-btn"}
 				<div class="Lms-navbar-search pull-left">
 					${search class="form-control"}
 				</div>
 			</div>
 			<div class="collapse navbar-collapse">
 				<ul class="nav navbar-nav">
-					<li>${artists}</li>
-					<li>${releases}</li>
-					<li>${tracks}</li>
-					<li>${playqueue}</li>
+					<li>${artists class="Lms-btn"}</li>
+					<li>${releases class="Lms-btn"}</li>
+					<li>${tracks class="Lms-btn"}</li>
+					<li>${playqueue class="Lms-btn"}</li>
 				</ul>
 				<div class="navbar-form navbar-left">
 					${filters class="form-group Lms-clusters-control"}
@@ -29,7 +29,7 @@
 				<ul class="nav navbar-nav navbar-right">
 					${<if-is-admin>}
 					<li class="dropdown">
-						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" title="${tr:Lms.administration}"><i class="fa fa-cogs" aria-hidden="true"></i> <span class="caret"></span></a>
+						<a href="#" class="Lms-btn dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" title="${tr:Lms.administration}"><i class="fa fa-cogs" aria-hidden="true"></i> <span class="caret"></span></a>
 						<ul class="dropdown-menu" role="menu">
 							<li>${database}</li>
 							<li>${users}</li>
@@ -37,7 +37,7 @@
 					</li>
 					${</if-is-admin>}
 					<li class="dropdown">
-						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" title="${tr:Lms.user}"><i class="fa fa-user" aria-hidden="true"></i>
+						<a href="#" class="Lms-btn dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" title="${tr:Lms.user}"><i class="fa fa-user" aria-hidden="true"></i>
  <span class="caret"></span></a>
 						<ul class="dropdown-menu" role="menu">
 							<li class="dropdown-header">${username}</li>
diff --git a/approot/tracks.xml b/approot/tracks.xml
index 4c34bab7..81a90d2c 100644
--- a/approot/tracks.xml
+++ b/approot/tracks.xml
@@ -27,7 +27,7 @@
 			<div class="col-xs-7 col-sm-8 col-md-8 Lms-explore-entry-list-text-container">
 				<div class="Lms-trackname text-primary"><h5>${name}</h5></div>
 				${<if-has-artists-or-release>}
-				${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
+				${<if-has-release>}<small>${release class="Lms-btn Lms-releasename text-primary"}</small>${</if-has-release>}
 				${<if-has-artists>}${artists}${</if-has-artists>}
 				${</if-has-artists-or-release>}
 			</div>
@@ -43,7 +43,7 @@
 </message>
 
 <message id="Lms.Explore.Tracks.template.entry-artist">
-	<small>${artist class="Lms-artistname text-muted"}</small>
+	<small>${artist class="Lms-btn Lms-artistname text-muted"}</small>
 </message>
 
 </messages>
diff --git a/docroot/css/lms-darkly.css b/docroot/css/lms-darkly.css
index 904cc8c1..9ae9f228 100644
--- a/docroot/css/lms-darkly.css
+++ b/docroot/css/lms-darkly.css
@@ -19,10 +19,6 @@ a.Lms-artistname.text-primary:hover {
 	color: var(--hover-color)
 }
 
-.Lms-control-btn {
-	color: var(--body-color)
-}
-
 .Lms-releasename.text-primary, .Lms-releasename.text-primary:hover {
 	color: var(--body-color)
 }
diff --git a/docroot/css/lms.css b/docroot/css/lms.css
index 17af16e4..44c88174 100644
--- a/docroot/css/lms.css
+++ b/docroot/css/lms.css
@@ -41,6 +41,15 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 	color: var(--hover-color);
 }
 
+.Lms-btn {
+	cursor: pointer;
+}
+
+.Lms-btn:hover {
+	color: var(--hover-color);
+	transition: color .20s cubic-bezier(.43,-.1,.16,1.1);
+}
+
 .Lms-cluster {
 	display: inline-block;
 	cursor: pointer;
@@ -51,17 +60,13 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 
 .Lms-cluster:hover {
 	filter: brightness(130%);
+	transition: filter .20s cubic-bezier(.43,-.1,.16,1.1);
 }
 
 .Lms-clusters-control {
 	margin-top: 4px;
 }
 
-.Lms-control-btn:hover {
-	color: var(--hover-color);
-	cursor: pointer;
-}
-
 .Lms-cover {
 	max-height: 100%;
 	max-width: 100%;
@@ -84,6 +89,7 @@ a.Lms-artistname:hover, a.Lms-artistname:focus {
 
 .Lms-cover:hover {
 	filter: brightness(130%);
+	transition: filter .20s cubic-bezier(.43,-.1,.16,1.1);
 }
 
 .Lms-cover-container {