From 84a14c0f2587f02460ad78ee8cb180bc94c100a1 Mon Sep 17 00:00:00 2001
From: JonnyWong16 <9099342+JonnyWong16@users.noreply.github.com>
Date: Sun, 27 Feb 2022 16:50:29 -0800
Subject: [PATCH] Colour active filter buttons

---
 data/interfaces/default/css/tautulli.css |  7 +++++++
 data/interfaces/default/graphs.html      |  4 ++--
 data/interfaces/default/history.html     | 14 +++++++-------
 data/interfaces/default/index.html       | 14 +++++++-------
 data/interfaces/default/info.html        |  6 +++---
 data/interfaces/default/library.html     |  6 +++---
 data/interfaces/default/user.html        | 14 +++++++-------
 7 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/data/interfaces/default/css/tautulli.css b/data/interfaces/default/css/tautulli.css
index 136644e2..514975c3 100644
--- a/data/interfaces/default/css/tautulli.css
+++ b/data/interfaces/default/css/tautulli.css
@@ -680,6 +680,13 @@ textarea.form-control:focus {
 .btn-form:focus {
     color: #eee;
 }
+.btn-filter.active,
+.btn-filter.active.focus {
+  background-color: #b7800a !important;
+}
+.btn-filter.active:hover {
+  background-color: #896007 !important;
+}
 .form-control-feedback {
     color: #E5A00D;
     margin: 5px 40px 5px 0;
diff --git a/data/interfaces/default/graphs.html b/data/interfaces/default/graphs.html
index 4dea9b6f..2e71bd76 100644
--- a/data/interfaces/default/graphs.html
+++ b/data/interfaces/default/graphs.html
@@ -21,10 +21,10 @@
                 </label>
             </div>
             <div class="btn-group" style="margin-right: 2px;" data-toggle="buttons" id="yaxis-selection">
-                <label class="btn btn-dark">
+                <label class="btn btn-dark btn-filter">
                     <input type="radio" name="yaxis-options" id="yaxis-plays" value="plays" autocomplete="off"> Play Count
                 </label>
-                <label class="btn btn-dark">
+                <label class="btn btn-dark btn-filter">
                     <input type="radio" name="yaxis-options" id="yaxis-duration" value="duration" autocomplete="off"> Play Duration
                 </label>
             </div>
diff --git a/data/interfaces/default/history.html b/data/interfaces/default/history.html
index 01317027..cf15c87f 100644
--- a/data/interfaces/default/history.html
+++ b/data/interfaces/default/history.html
@@ -39,27 +39,27 @@
             </div>
             % endif
             <div class="btn-group" data-toggle="buttons" id="media_type-selection">
-                <label class="btn btn-dark">
+                <label class="btn btn-dark btn-filter">
                     <input type="checkbox" name="media_type-filter" id="history-media_type-movie" value="movie" autocomplete="off"><i class="fa fa-film"></i> Movies
                 </label>
-                <label class="btn btn-dark">
+                <label class="btn btn-dark btn-filter">
                     <input type="checkbox" name="media_type-filter" id="history-media_type-episode" value="episode" autocomplete="off"><i class="fa fa-television"></i> TV Shows
                 </label>
-                <label class="btn btn-dark">
+                <label class="btn btn-dark btn-filter">
                     <input type="checkbox" name="media_type-filter" id="history-media_type-track" value="track" autocomplete="off"><i class="fa fa-music"></i> Music
                 </label>
-                <label class="btn btn-dark">
+                <label class="btn btn-dark btn-filter">
                     <input type="checkbox" name="media_type-filter" id="history-media_type-live" value="live" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Live TV
                 </label>
             </div>
             <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
-                <label class="btn btn-dark">
+                <label class="btn btn-dark btn-filter">
                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
                 </label>
-                <label class="btn btn-dark">
+                <label class="btn btn-dark btn-filter">
                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-copy" value="copy" autocomplete="off"><i class="fa fa-stream"></i> Direct Stream
                 </label>
-                <label class="btn btn-dark">
+                <label class="btn btn-dark btn-filter">
                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-transcode" value="transcode" autocomplete="off"><i class="fa fa-server"></i> Transcode
                 </label>
             </div>
diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index 652af7c6..47b0d87d 100644
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -42,10 +42,10 @@
                 <h3 class="pull-left">Watch Statistics</h3>
                 <div class="button-bar">
                     <div class="btn-group pull-left" data-toggle="buttons" id="watch-stats-toggles" style="margin-right: 3px">
-                        <label class="btn btn-dark">
+                        <label class="btn btn-dark btn-filter">
                             <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-plays" value="plays" autocomplete="off"> Play Count
                         </label>
-                        <label class="btn btn-dark">
+                        <label class="btn btn-dark btn-filter">
                             <input type="radio" class="watched-stats-toggle" name="watched-stats-type" id="watched-stats-duration" value="duration" autocomplete="off"> Play Duration
                         </label>
                     </div>
@@ -100,19 +100,19 @@
                 </ul>
                 <div class="button-bar">
                     <div class="btn-group pull-left" data-toggle="buttons" id="recently-added-toggles" style="margin-right: 3px">
-                        <label class="btn btn-dark" id="recently-added-label-all">
+                        <label class="btn btn-dark btn-filter" id="recently-added-label-all">
                             <input type="radio" name="recently-added-toggle" id="recently-added-toggle-all" value="all" autocomplete="off"> All
                         </label>
-                        <label class="btn btn-dark" id="recently-added-label-movies">
+                        <label class="btn btn-dark btn-filter" id="recently-added-label-movies">
                             <input type="radio" name="recently-added-toggle" id="recently-added-toggle-movie" value="movie" autocomplete="off"> Movies
                         </label>
-                        <label class="btn btn-dark" id="recently-added-label-tv">
+                        <label class="btn btn-dark btn-filter" id="recently-added-label-tv">
                             <input type="radio" name="recently-added-toggle" id="recently-added-toggle-show" value="show" autocomplete="off"> TV Shows
                         </label>
-                        <label class="btn btn-dark" id="recently-added-label-music">
+                        <label class="btn btn-dark btn-filter" id="recently-added-label-music">
                             <input type="radio" name="recently-added-toggle" id="recently-added-toggle-artist" value="artist" autocomplete="off"> Music
                         </label>
-                        <label class="btn btn-dark" id="recently-added-label-other_video">
+                        <label class="btn btn-dark btn-filter" id="recently-added-label-other_video">
                             <input type="radio" name="recently-added-toggle" id="recently-added-toggle-other_video" value="other_video" autocomplete="off"> Videos
                         </label>
                     </div>
diff --git a/data/interfaces/default/info.html b/data/interfaces/default/info.html
index 80ae1dfb..0b69d508 100644
--- a/data/interfaces/default/info.html
+++ b/data/interfaces/default/info.html
@@ -649,13 +649,13 @@ DOCUMENTATION :: END
                                             </div>
                                             % endif
                                             <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
                                                 </label>
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_stream" value="copy" autocomplete="off"><i class="fa fa-stream"></i> Direct Stream
                                                 </label>
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-transcode" value="transcode" autocomplete="off"><i class="fa fa-server"></i> Transcode
                                                 </label>
                                             </div>
diff --git a/data/interfaces/default/library.html b/data/interfaces/default/library.html
index b1ce22c4..59de6497 100644
--- a/data/interfaces/default/library.html
+++ b/data/interfaces/default/library.html
@@ -217,13 +217,13 @@ DOCUMENTATION :: END
                                             </div>
                                             % endif
                                             <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
                                                 </label>
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_stream" value="copy" autocomplete="off"><i class="fa fa-stream"></i> Direct Stream
                                                 </label>
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-transcode" value="transcode" autocomplete="off"><i class="fa fa-server"></i> Transcode
                                                 </label>
                                             </div>
diff --git a/data/interfaces/default/user.html b/data/interfaces/default/user.html
index 36beca13..501c68ca 100644
--- a/data/interfaces/default/user.html
+++ b/data/interfaces/default/user.html
@@ -167,27 +167,27 @@ DOCUMENTATION :: END
                                             </div>
                                             % endif
                                             <div class="btn-group" data-toggle="buttons" id="media_type-selection">
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="media_type-filter" id="history-media_type-movie" value="movie" autocomplete="off"><i class="fa fa-film"></i> Movies
                                                 </label>
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="media_type-filter" id="history-media_type-episode" value="episode" autocomplete="off"><i class="fa fa-television"></i> TV Shows
                                                 </label>
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="media_type-filter" id="history-media_type-track" value="track" autocomplete="off"><i class="fa fa-music"></i> Music
                                                 </label>
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="media_type-filter" id="history-media_type-live" value="live" autocomplete="off"><i class="fa fa-broadcast-tower"></i> Live TV
                                                 </label>
                                             </div>
                                             <div class="btn-group" data-toggle="buttons" id="transcode_decision-selection">
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_play" value="direct play" autocomplete="off"><i class="fa fa-play-circle"></i> Direct Play
                                                 </label>
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-direct_stream" value="copy" autocomplete="off"><i class="fa fa-stream"></i> Direct Stream
                                                 </label>
-                                                <label class="btn btn-dark">
+                                                <label class="btn btn-dark btn-filter">
                                                     <input type="checkbox" name="transcode_decision-filter" id="history-transcode_decision-transcode" value="transcode" autocomplete="off"><i class="fa fa-server"></i> Transcode
                                                 </label>
                                             </div>