callmekass / pfsense-palenight Goto Github PK

Not sure if this is a 'bug' or 'working as intended', but the border-bottom attribute of inactive navigation tabs might need to be changed from --foreground to --contrast at line 251.

In the official themes, inactive tabs don't have a visible bottom border, which improves contrast when determining which tab is 'active' at a glance. With the current settings, it feels like there may not be enough contrast here:

The OpenVPN dashboard sub-headers appear to be unchanged from the base pfSense theme and don't really blend well with the Palenight color scheme:

If we change this directive at line 601:

.widget .panel-heading {
  background-color: #757575;
}

to something like:

.widget .panel-heading {
  background-color: var(--active);
}

it ends up looking much nicer:

Specifically in pfBlockerNG, the feed alias groups listed in tables can be completely unreadable.

Here's an alternate command to drop into the Diagnostics > Command Prompt page that bypasses the install.php process entirely:

curl -O --output-dir /usr/local/www/css https://raw.githubusercontent.com/callmekass/pfSense-palenight/main/callmekass-palenight.css

I was unsure if I should say anything or not since this could lead to a rabbit hole as BandwidthD is an optional installable package. But i installed it and it looks terrible (most likely since the css doesn't cover it, I'm sure).

Anyway, pointing it out just in case! :)

Replication steps: go to the dashboard and shrink the window width until white table borders appear.

Looks like the CSS theme file in pfSense+ 23.01 is ever so slightly different than the one in CE. There are a couple directives to fix the logo colors and positioning in the header.

Currently, this is how the header appears on pfSense+:

Lines 226-241:

.logo-st0 {
  fill: var(--foreground);
}

.logo-st1 {
  fill: var(--foreground);
}

.logo-st2 {
  fill: var(--foreground);
}

.navbar-brand {
  padding: 5px 10px 0 10px;
  line-height: 0.3em;
}

Can be replaced with:

.logo-st0, .logo-st1, .logo-st2, .logo-st3, .logo-st4, .logo-st5 {
    fill: var(--foreground);
}

.navbar-brand {
    padding: 5px 10px 0 10px;
    line-height: .3em;
}

.factory.navbar-brand {
    padding-top: 10px;
}

This fixes the display problems: