Redo of Fixes background of the dark-midnight theme #1961

[yubiuser]

What does this PR aim to accomplish?:

Attempt to fix CodeFactor issues in #1961 and #1963

[yubiuser]

I fixed the duplicated selectors but after merging them a lot of duplicated properties emerged. I removed the once that were identical, but a lot diverted. This is now a design choice. CodeFactor might no pick up all duplicates, but I noted them manually (hope I didn't forget one)

a {
  color: rgb(105, 166, 213);
  color: #3391ff;

fieldset {
  border-color: rgb(66, 71, 74);
  border-color: currentcolor;
}

legend {
  border-color: currentcolor;
  color: rgb(200, 195, 188);
  border-color: currentcolor currentcolor rgb(55, 60, 62);

.navbar-toggle {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  color: rgb(232, 230, 227);
  border-color: currentcolor;

.dropdown-menu {
  list-style-image: none;
  background-color: rgb(24, 26, 27);
  border-color: rgba(140, 130, 115, 0.15);
  box-shadow: rgba(0, 0, 0, 0.18) 0 6px 12px;
  box-shadow: none;
  border-color: rgb(53, 57, 59);
}

.form-control {
  color: rgb(178, 172, 162);
  background-color: rgb(24, 26, 27);
  background-image: none;
  border-color: rgb(62, 68, 70);
  box-shadow: rgba(0, 0, 0, 0.07) 0 1px 1 inset;
  box-shadow: none;
  border-color: rgb(59, 64, 66);
}

.form-control:focus {
  border-color: rgb(19, 84, 135);
  outline-color: currentcolor;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px inset, rgba(20, 85, 136, 0.6) 0 0 8px;
  border-color: rgb(44, 103, 137);
  box-shadow: none;
}

.btn-default {
  color: rgb(200, 195, 188);
  background-color: rgb(24, 26, 27);
  border-color: rgb(62, 68, 70);
  background-color: rgb(30, 33, 34);
  color: rgb(189, 183, 175);
  border-color: rgb(58, 62, 65);
}

.btn-primary {
  color: rgb(232, 230, 227);
  background-color: rgb(41, 98, 146);
  border-color: rgb(42, 100, 150);
  background-color: rgb(48, 113, 150);
  border-color: rgb(46, 107, 143);
}

.btn-success {
  color: rgb(232, 230, 227);
  background-color: rgb(77, 133, 58);
  border-color: rgb(55, 125, 55);
  background-color: rgb(0, 133, 72);
  border-color: rgb(0, 213, 115);
}
.btn-info {
  color: rgb(232, 230, 227);
  background-color: rgb(28, 115, 141);
  border-color: rgb(28, 115, 140);
  background-color: rgb(0, 154, 191);
  border-color: rgb(0, 153, 191);
}
.btn-danger {
  color: rgb(232, 230, 227);
  background-color: rgb(148, 35, 32);
  border-color: rgb(143, 35, 31);
  background-color: rgb(162, 43, 28);
  border-color: rgb(153, 41, 26);
}
.btn-warning {
  color: rgb(232, 230, 227);
  background-color: rgb(153, 95, 13);
  border-color: rgb(154, 96, 13);
  background-color: rgb(191, 121, 10);
  border-color: rgb(176, 111, 9);
}
.alert-success {
  color: rgb(139, 196, 140);
  background-color: rgb(41, 60, 23);
  border-color: rgb(60, 91, 35);
  border-color: rgb(0, 213, 115);
}
.alert-info {
  color: rgb(117, 178, 208);
  background-color: rgb(14, 48, 65);
  border-color: rgb(22, 90, 104);
  border-color: rgb(0, 153, 191);
}
.alert-warning {
  color: rgb(198, 171, 123);
  background-color: rgb(63, 54, 7);
  border-color: rgb(108, 76, 11);
  border-color: rgb(176, 111, 9);
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  border-top-color: rgb(58, 62, 65);
  border-top-color: rgb(51, 55, 57);
}
.table > thead > tr > th {
  border-bottom-color: rgb(58, 62, 65);
  border-bottom-color: rgb(51, 55, 57);
}
.table-bordered {
  border-color: rgb(58, 62, 65);
  border-color: rgb(51, 55, 57);
}
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border-color: rgb(58, 62, 65);
  border-color: rgb(51, 55, 57);
}
.label-default {
  background-color: rgb(90, 97, 101);
  background-color: rgb(46, 50, 52);
  color: rgb(189, 183, 175);
}
.modal-content {
  background-color: rgb(24, 26, 27);
  border-color: rgba(140, 130, 115, 0.2);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 9px;
  outline-color: currentcolor;
  box-shadow: rgba(0, 0, 0, 0.13) 0px 2px 3px;
  border-color: currentcolor;
}
.modal-header {
  border-bottom-color: rgb(55, 60, 62);
  border-bottom-color: rgb(51, 55, 57);
}
.modal-footer {
  border-top-color: rgb(55, 60, 62);
  border-top-color: rgb(51, 55, 57);
}
.select2-container--default .select2-selection--multiple {
  border-color: rgb(59, 64, 66);
  background-color: rgb(24, 26, 27);
  border-color: rgb(72, 78, 81);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgb(48, 113, 150);
  border-color: rgb(46, 107, 143);
  color: rgb(232, 230, 227);
  background-color: rgb(39, 43, 44);
  border-color: rgb(72, 78, 81);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(232, 230, 227, 0.7);
  color: rgb(168, 160, 149);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: rgb(232, 230, 227);
  color: rgb(200, 195, 188);
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: rgb(59, 64, 66);
  border-color: rgb(140, 130, 115);
  outline-color: currentcolor;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgb(48, 113, 150);
  color: rgb(232, 230, 227);
  background-color: rgb(4, 60, 150);
}
.progress {
  background-color: rgb(30, 32, 33);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px inset;
  background-color: rgb(34, 36, 38);
}
.text-green {
  color: rgb(88, 255, 178) !important;
  color: rgb(109, 255, 109) !important;
.text-black {
  color: rgb(221, 218, 214) !important;
  color: rgb(232, 230, 227) !important;
}
.text-orange {
  color: rgb(255, 142, 44) !important;
  color: rgb(255, 174, 26) !important;
}
.text-red {
  color: rgb(224, 89, 73) !important;
  color: rgb(255, 26, 26) !important;
}
.select2-dropdown {
  border-color: rgb(59, 64, 66);
  background-color: rgb(24, 26, 27);
  border-color: rgb(72, 78, 81);
}

[rdwebdesign]

In CSS, the last value will override the old ones.

You don't need to make a design choice.
To keep the same visual, you need to keep only the LAST declared value to each property.

The design decision was made earlier, by whoever entered the new values closer to the end of the file.

[rdwebdesign]

@yubiuser

Unexpected shorthand "background" after "background-color"

Using "background:" resets all background properties. So, the "background-color" will be ignored and can be removed.

[yubiuser]

I removed the duplicate properties.

This needs comprehensive testing - there were so many changes I fear I deleted something imported and visual bugs slipped in.

[rdwebdesign]

@yubiuser

If you're going to change the file, could you please change the grid color for the graphs?

https://github.com/pi-hole/AdminLTE/blob/99b978b5d3c624ce2271e78a834ffd79805d08ea/style/themes/default-darker.css#L5578-L5580

to:

.graphs-grid {
  background-color: rgba(232, 230, 227, 0.1);
}

or something else?

[yubiuser]

Grid and input box fixed

[yubiuser]

I tested it for a week now and did not observe any major flaws. Read for review

[DL6ER]

A quick look over the pages didn't reveal anything odd

[pralor-bot]

This pull request has been mentioned on Pi-hole Userspace. There might be relevant details there:

https://discourse.pi-hole.net/t/pi-hole-ftl-v5-12-web-v5-9-and-core-v5-7-released/51795/1