RomanNum3ral
/
netbox
mirror of https://github.com/netbox-community/netbox.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix harsh interface row separators in dark mode 

#22018 switched the row separator on highlighted interface rows to an
opaque colour so it stays visible against tinted backgrounds, but
hardcoded $gray-300 (--tblr-gray-300), a light-theme grey. Because
tr[data-cable-status] matches every interface row, in dark mode this
paints a harsh bright line on every row. Override the separator colour
in dark mode with the theme-aware --tblr-border-color so it stays
visible on tinted rows without being jarring. Light mode is unchanged.
This commit is contained in:
Lasse Haugen 2026-07-01 12:52:11 +02:00 committed by Jeremy Stretch
parent a835fe216e
commit 9189067f3e
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
netbox/project-static/dist/netbox.css vendored
View File

File diff suppressed because one or more lines are too long

12
netbox/project-static/styles/custom/_interfaces.scss
View File

@ -38,6 +38,18 @@ tr[data-enabled='disabled'] > * {
box-shadow: none;
}
// --tblr-gray-300 is a fixed light-theme grey; in dark mode it renders as a
// harsh bright line on every highlighted row. Use the theme-aware border color
// so the separator stays visible against tinted rows without being jarring.
html[data-bs-theme='dark'] {
tr[data-cable-status] > *,
tr[data-mark-connected='true'] > *,
tr[data-virtual='true'] > *,
tr[data-enabled='disabled'] > * {
border-bottom-color: var(--tblr-border-color);
}
}
// Only show the correct button depending on the cable status
tr[data-cable-status='connected'] button.mark-installed {
display: none;