Просмотр исходного кода

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.
Lasse Haugen 4 дней назад
Родитель
Сommit
9189067f3e
2 измененных файлов с 12 добавлено и 0 удалено
  1. 0 0
      netbox/project-static/dist/netbox.css
  2. 12 0
      netbox/project-static/styles/custom/_interfaces.scss

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
netbox/project-static/dist/netbox.css


+ 12 - 0
netbox/project-static/styles/custom/_interfaces.scss

@@ -38,6 +38,18 @@ tr[data-enabled='disabled'] > * {
   box-shadow: none;
   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
 // Only show the correct button depending on the cable status
 tr[data-cable-status='connected'] button.mark-installed {
 tr[data-cable-status='connected'] button.mark-installed {
   display: none;
   display: none;

Некоторые файлы не были показаны из-за большого количества измененных файлов