Fix datatables background color for selected rows

The new theme doesn't use background colors for striped tables and to show
selected rows. Instead, it adds box-shadow to table cells to simulate
background colors. The original theme uses a opaque color and white text,
breaking the Pi-hle themes.

The fix replaces the original box-shadow with a semi-transparent shadow
and uses the theme text color.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

Author: rdwebdesign

style/pi-hole.css

@@ -7,7 +7,7 @@
 
 :root {
   /* Datatables Select - bgcolor */
-  --datatable-bgcolor: #e0e8ee;
+  --datatable-selected-bg: #90b6ff;
 
   /* Used in settings save button */
   --overlay-bgcolor: rgba(212, 220, 232, 0.55);
@@ -1243,10 +1243,12 @@ table.dataTable tr.selected th.select-checkbox::after {
 }
 
 /* Datatables Select - selected row bgcolor */
-table.dataTable tbody > tr.selected,
-table.dataTable tbody > tr > .selected {
-  background: none;
-  background-image: linear-gradient(var(--datatable-bgcolor), var(--datatable-bgcolor));
+table.table.dataTable > tbody > tr.selected > * {
+  color: inherit;
+  box-shadow:inset 0 0 0 9999px color-mix(var(--datatable-selected-bg) 20%, transparent);
+}
+table.table.dataTable.table-striped > tbody > tr.selected:nth-of-type(2n+1) > * {
+  box-shadow:inset 0 0 0 9999px color-mix(var(--datatable-selected-bg) 40%, transparent);
 }
 
 #messagesTable pre {

style/themes/default-dark.css

@@ -9,8 +9,8 @@
 *  https://github.com/anvyst/adminlte-skin-midnight */
 
 :root {
-  --datatable-bgcolor: rgba(64, 76, 88, 0.8);
-  --overlay-bgcolor: var(--datatable-bgcolor);
+  --datatable-selected-bg: rgba(60, 141, 188, 0.6);
+  --overlay-bgcolor:  rgba(64, 76, 88, 0.8);
 
   /* Dashboard graphic bars */
   --allowed-color: #12b660;

style/themes/default-darker.css

@@ -115,7 +115,7 @@ embed[type="application/pdf"] {
   --darkreader-neutral-text: #d8d4cf;
   --darkreader-selection-background: #004daa;
   --darkreader-selection-text: #e8e6e3;
-  --datatable-bgcolor: rgb(35, 47, 52);
+  --datatable-selected-bg: rgb(41, 98, 146);
   --overlay-bgcolor: rgba(35, 47, 52, 0.7);
 
   /* Dashboard graphic bars */

style/themes/high-contrast-dark.css

@@ -31,7 +31,7 @@
   --cached-color: #44649c;
   --other-color: #969798;
 
-  --datatable-bgcolor: rgba(18, 44, 68, 0.3);
+  --datatable-selected-bg: rgba(13, 110, 253, 0.5);
   --overlay-bgcolor: rgba(24, 28, 32, 0.8);
 }
 

style/themes/lcars.css

@@ -10,7 +10,6 @@
   --net-recent-color: #055;
   --net-old-color: #125;
   --net-older-color: #1c2228;
-  --datatable-bgcolor: var(--net-old-color);
 
   /* Dashboard graphic bars */
   --allowed-color: #073;