Use classes for highlighting to ensure the alternate row colors are not lost when removing a column from the selection.

Signed-off-by: DL6ER <dl6er@dl6er.de>

queries.php

@@ -155,8 +155,11 @@ if(strlen($showing) > 0)
                     </tr>
                 </tfoot>
             </table>
-            <label>Apply filtering on click on Query type, Domain, and Clients (use <kbd>Ctrl</kbd> or <kbd>&#8984;</kbd> + <i class="fas fa-mouse-pointer"></i> to add elements to the current selection)</label><br/>
-            <button type="button" id="resetButton" hidden="true"></button>
+            <label>Filtering options:</label>
+            <ul>
+                <li>Use <kbd>Ctrl</kbd> or <kbd>&#8984;</kbd> + <i class="fas fa-mouse-pointer"></i> to add columns to the current filter</li>
+                <li>Use <kbd>Shift</kbd> + <i class="fas fa-mouse-pointer"></i> to remove columns to the current filter</li>
+            </ul><br/><button type="button" id="resetButton" hidden="true"></button>
         </div>
         <!-- /.box-body -->
       </div>

scripts/pi-hole/js/queries.js

@@ -8,7 +8,6 @@
 /* global moment:false */
 
 var tableApi;
-var colHighlightColor = "#ffefad";
 var tableFilters = [];
 
 var replyTypes = [
@@ -494,13 +493,13 @@ function applyColumnFiltering() {
       regex = "^" + value + "$";
 
       // Add background color
-      tableApi.$("td:eq(" + index + ")").css("background-color", colHighlightColor);
+      tableApi.$("td:eq(" + index + ")").addClass("filter-highlight");
 
       // Remember to show reset button
       showReset = true;
     } else {
       // Clear background color
-      tableApi.$("td:eq(" + index + ")").css("background-color", "#fff");
+      tableApi.$("td:eq(" + index + ")").removeClass("filter-highlight");
     }
 
     // Apply filtering on this column (regex may be empty -> no filtering)

style/pi-hole.css

@@ -265,4 +265,8 @@ code.breakall
 .bootstrap-select.bs-container.align-right {
     left: unset !important;
     right: 10px;
-}
+}
+
+.filter-highlight {
+    background-color: #ffcc0050;
+}