Pi-hole domains type highlight

Edit: I accidently used a turqoise color instead of a green color.

The green color is: #00ff00

I created a tiny css code that makes the domain settings of Pi-hole web ui like this:

Here is the css code:

select:has(option[selected][value*="allow"]) {
    /*background: #00a65a57!important;
    color:#fff;*/
    outline: 2px solid #00ffff;
    outline-offset: 2px;
}

select:has(option[selected][value*="deny"]) {
    /*background: #dd4b3957!important;
    color:#fff;*/
    outline: 2px solid #ff0000;
    outline-offset: 2px;
}

Pretty cool :grimacing:

Not sure if I am going to use it, but it's nice to known that it can be done! :+1::+1:

And it only uses css, so it probably is very lightweight too.
And it even shouldn't rely on a specific version of Pi-hole, so hopefully no update breaks this.

You can also use a different CSS selector to match the table row or cells, then style the background (or anything else).

Untested example:

table.dataTable > tbody > tr[data-id*='deny'] > td {
  background-color: rgba(148,0,0,0.07);
}

table.dataTable > tbody > tr[data-id*='allow'] > td {
  background-color: rgba(0,127,0,0.07);
}

This should add semi-transparent colors to the table rows without breaking the "zebra-striping" pattern.