mirror/netbox-community-netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Code Activity

Fixes #15617: Fix rack elevation styling under dark mode

Browse Source
This commit is contained in:
Jeremy Stretch
2024-04-05 13:52:53 -04:00
parent 25c39ce480
commit 99fe63569d
5 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
netbox/project-static/dist/netbox.js vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox.js.map vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -1 +1 @@
svg{--nbx-rack-bg: #e9ecef;--nbx-rack-border: #000;--nbx-rack-slot-bg: #e9ecef;--nbx-rack-slot-border: #adb5bd;--nbx-rack-slot-hover-bg: #ced4da;--nbx-rack-link-color: #0d6efd;--nbx-rack-unit-color: var(--bs-secondary-color)}svg[data-bs-theme=dark]{--nbx-rack-bg: #343a40;--nbx-rack-border: #6c757d;--nbx-rack-slot-bg: #343a40;--nbx-rack-slot-border: #495057;--nbx-rack-slot-hover-bg: #212529;--nbx-rack-link-color: #9ec5fe;--nbx-rack-unit-color: var(--bs-secondary-color)}*{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-size:.875rem}rect{box-sizing:border-box}text{text-anchor:middle;dominant-baseline:middle}svg .unit{margin:0;padding:5px 0;fill:var(--nbx-rack-unit-color)}svg .hidden{visibility:hidden}svg rect.shaded,svg image.shaded{opacity:25%}svg text.shaded{opacity:50%}svg .rack{fill:none;stroke-width:2px;stroke:var(--nbx-rack-border);background-color:var(--nbx-rack-bg)}svg .slot{fill:var(--nbx-rack-slot-bg);stroke:var(--nbx-rack-slot-border)}svg .slot:hover{fill:var(--nbx-rack-slot-hover-bg)}svg .slot+.add-device{fill:var(--nbx-rack-link-color);opacity:0;pointer-events:none}svg .slot:hover+.add-device{opacity:1}svg .slot.occupied[class],svg .slot.occupied:hover[class]{fill:url(#occupied)}svg .slot.blocked[class],svg .slot.blocked:hover[class]{fill:url(#blocked)}svg .slot.blocked:hover+.add-device{opacity:0}svg .reservation[class]{fill:url(#reserved)}
svg{--nbx-rack-bg: var(--tblr-bg-surface-secondary);--nbx-rack-border: #000;--nbx-rack-slot-bg: #e9ecef;--nbx-rack-slot-border: #adb5bd;--nbx-rack-slot-hover-bg: #ced4da;--nbx-rack-link-color: #0d6efd;--nbx-rack-unit-color: #6c757d}svg[data-bs-theme=dark]{--nbx-rack-bg: rgb(27, 41, 58);--nbx-rack-border: #6c757d;--nbx-rack-slot-bg: #343a40;--nbx-rack-slot-border: #495057;--nbx-rack-slot-hover-bg: #212529;--nbx-rack-link-color: #9ec5fe;--nbx-rack-unit-color: #adb5bd}*{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-size:.875rem}rect{box-sizing:border-box}text{text-anchor:middle;dominant-baseline:middle}svg{background-color:var(--nbx-rack-bg)}svg .unit{margin:0;padding:5px 0;fill:var(--nbx-rack-unit-color)}svg .hidden{visibility:hidden}svg rect.shaded,svg image.shaded{opacity:25%}svg text.shaded{opacity:50%}svg .rack{fill:none;stroke-width:2px;stroke:var(--nbx-rack-border)}svg .slot{fill:var(--nbx-rack-slot-bg);stroke:var(--nbx-rack-slot-border)}svg .slot:hover{fill:var(--nbx-rack-slot-hover-bg)}svg .slot+.add-device{fill:var(--nbx-rack-link-color);opacity:0;pointer-events:none}svg .slot:hover+.add-device{opacity:1}svg .slot.occupied[class],svg .slot.occupied:hover[class]{fill:url(#occupied)}svg .slot.blocked[class],svg .slot.blocked:hover[class]{fill:url(#blocked)}svg .slot.blocked:hover+.add-device{opacity:0}svg .reservation[class]{fill:url(#reserved)}

2
netbox/project-static/src/colorMode.ts
View File

@@ -30,7 +30,7 @@ function updateElements(targetMode: ColorMode): void {
for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
const svg = elevation.contentDocument?.querySelector('svg') ?? null;
if (svg !== null) {
svg.setAttribute(`data-${COLOR_MODE_KEY}`, targetMode);
svg.setAttribute(`data-bs-theme`, targetMode);
}
}
}

11
netbox/project-static/styles/svg/rack_elevation.scss
View File

@@ -8,23 +8,23 @@
svg {
// Light mode values
--nbx-rack-bg: #{$gray-200};
--nbx-rack-bg: var(--tblr-bg-surface-secondary);
--nbx-rack-border: #{$black};
--nbx-rack-slot-bg: #{$gray-200};
--nbx-rack-slot-border: #{$gray-500};
--nbx-rack-slot-hover-bg: #{$gray-400};
--nbx-rack-link-color: #{$blue};
--nbx-rack-unit-color: #{$text-muted};
--nbx-rack-unit-color: #{$gray-600};
&[data-bs-theme='dark'] {
// Dark mode values
--nbx-rack-bg: #{$gray-800};
--nbx-rack-bg: rgb(27, 41, 58);
--nbx-rack-border: #{$gray-600};
--nbx-rack-slot-bg: #{$gray-800};
--nbx-rack-slot-border: #{$gray-700};
--nbx-rack-slot-hover-bg: #{$gray-900};
--nbx-rack-link-color: #{$blue-200};
--nbx-rack-unit-color: #{$text-muted};
--nbx-rack-unit-color: #{$gray-500};
}
}
@@ -41,6 +41,8 @@ text {
}
svg {
background-color: var(--nbx-rack-bg);
// Rack unit numbers along left side of rack elevation.
.unit {
margin: 0;
@@ -65,7 +67,6 @@ svg {
fill: none;
stroke-width: 2px;
stroke: var(--nbx-rack-border);
background-color: var(--nbx-rack-bg);
}
// Rack unit slot.