NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-19 05:21:55 -06:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

#6372: Fix badge & progress-bar foreground color in dark mode

Browse Source
This commit is contained in:
checktheroads 2021-05-07 16:40:24 -07:00
parent 32e1d7e879
commit 1a843f95b7
7 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox-dark.css vendored
View File

Binary file not shown.

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

File diff suppressed because one or more lines are too long

BIN
netbox/project-static/dist/netbox-light.css vendored
View File

Binary file not shown.

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

16
netbox/project-static/netbox.scss
View File

@ -62,6 +62,16 @@
margin-bottom: $spacer; margin-bottom: $spacer;
} }
// Use proper contrasting color for badge & progress-bar foreground color.
@each $color, $value in $theme-colors {
.badge,
.progress-bar {
&.bg-#{$color} {
color: color-contrast($value);
}
}
}
body { body {
background-color: var(--nbx-body-bg); background-color: var(--nbx-body-bg);
color: var(--nbx-body-color); color: var(--nbx-body-color);
@ -80,8 +90,10 @@ body {
} }
&[data-netbox-color-mode='light'] { &[data-netbox-color-mode='light'] {
.btn.btn-primary { .btn.btn-primary,
color: $white; .progress-bar.bg-primary,
.badge.bg-primary {
color: $gray-50;
} }
} }
&[data-netbox-color-mode='dark'] { &[data-netbox-color-mode='dark'] {

2
netbox/templates/utilities/templatetags/utilization_graph.html
View File

@ -22,7 +22,7 @@
aria-valuemax="100" aria-valuemax="100"
aria-valuenow="{{ utilization }}" aria-valuenow="{{ utilization }}"
style="width: {{ utilization }}%;" style="width: {{ utilization }}%;"
class="progress-bar bg-warning text-dark" class="progress-bar bg-warning"
> >
{{ utilization }}% {{ utilization }}%
</div> </div>