parent
c20e6dd2ee
commit
c45482c4af
File diff suppressed because one or more lines are too long
|
|
@ -1,23 +1,41 @@
|
|||
@use 'sass:map';
|
||||
|
||||
// Interface row coloring
|
||||
// Use --tblr-table-bg-state so type highlights take precedence over striping
|
||||
// (which sets --tblr-table-bg-type via the box-shadow cascade).
|
||||
tr[data-cable-status=connected] {
|
||||
background-color: rgba(map.get($theme-colors, "green"), 0.15);
|
||||
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "green"), 0.15)};
|
||||
}
|
||||
tr[data-cable-status=planned] {
|
||||
background-color: rgba(map.get($theme-colors, "blue"), 0.15);
|
||||
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "blue"), 0.15)};
|
||||
}
|
||||
tr[data-cable-status=decommissioning] {
|
||||
background-color: rgba(map.get($theme-colors, "yellow"), 0.15);
|
||||
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "yellow"), 0.15)};
|
||||
}
|
||||
tr[data-mark-connected=true] {
|
||||
background-color: rgba(map.get($theme-colors, "success"), 0.15);
|
||||
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "success"), 0.15)};
|
||||
}
|
||||
tr[data-virtual=true] {
|
||||
background-color: rgba(map.get($theme-colors, "primary"), 0.15);
|
||||
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "primary"), 0.15)};
|
||||
}
|
||||
tr[data-enabled=disabled] {
|
||||
background-color: rgba($gray-400, 0.15);
|
||||
--tblr-table-bg-state: #{rgba($gray-400, 0.15)};
|
||||
}
|
||||
|
||||
// Bootstrap paints --tblr-table-bg-state via an inset box-shadow on each cell.
|
||||
// In Chrome with border-collapse: collapse, that shadow covers the cell's
|
||||
// bottom border and the row separator vanishes (Safari paints them in a
|
||||
// different order, which is why it's not visible there). Repaint the highlight
|
||||
// via background-color and clear the inset shadow so the border stays on top.
|
||||
// Also use the opaque border color, since the default translucent value blends
|
||||
// nearly invisibly against a tinted background.
|
||||
tr[data-cable-status] > *,
|
||||
tr[data-mark-connected=true] > *,
|
||||
tr[data-virtual=true] > *,
|
||||
tr[data-enabled=disabled] > * {
|
||||
background-color: var(--tblr-table-bg-state);
|
||||
border-bottom-color: var(--tblr-gray-300);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Only show the correct button depending on the cable status
|
||||
|
|
|
|||
Loading…
Reference in New Issue