ea71dc1fc660335e0aa22ac6290517718f16370c New: Use of CSS variables (w…

…ith fallback for old browsers) to be able to easily change the selected row colour

https://datatables.net/forums/discussion/75253/selected-row-color-change#latest

Requires that the SCSS variable be just the three numbers for RGB (and
the CSS variable the same, but comma seperated). This allows auto
tinting via opacity changes for things like hover and odd / even
handling.

Sync to source repo @ea71dc1fc660335e0aa22ac6290517718f16370c

css/dataTables.bootstrap4.css

@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --dt-row-selected: 2, 117, 216;
+  --dt-row-selected-text: 255, 255, 255;
+  --dt-row-selected-link: 9, 10, 11;
+}
+
 table.dataTable td.dt-control {
   text-align: center;
   cursor: pointer;
@@ -114,7 +120,7 @@ div.dataTables_processing > div:last-child > div {
   width: 13px;
   height: 13px;
   border-radius: 50%;
-  background: rgba(2, 117, 216, 0.9);
+  background: 2 117 216;
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 div.dataTables_processing > div:last-child > div:nth-child(1) {
@@ -267,23 +273,28 @@ table.dataTable > tbody > tr {
   background-color: transparent;
 }
 table.dataTable > tbody > tr.selected > * {
-  box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.9);
+  box-shadow: inset 0 0 0 9999px #0275d8;
+  box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
   color: white;
+  color: rgb(var(--dt-row-selected-text));
 }
 table.dataTable > tbody > tr.selected a {
   color: #090a0b;
+  color: rgb(var(--dt-row-selected-link));
 }
 table.dataTable.table-striped > tbody > tr.odd > * {
   box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
 }
 table.dataTable.table-striped > tbody > tr.odd.selected > * {
   box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.95);
+  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95);
 }
 table.dataTable.table-hover > tbody > tr:hover > * {
   box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.075);
 }
 table.dataTable.table-hover > tbody > tr.selected:hover > * {
   box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.975);
+  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975);
 }
 
 div.dataTables_wrapper div.dataTables_length label {