NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-17 20:46:30 -06:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Move interface colour logic into SCSS where it belongs

Browse Source
This commit is contained in:
Per von Zweigbergk 2024-01-23 21:33:09 +01:00
parent bf362f4679
commit c93413dc9c
5 changed files with 38 additions and 40 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.

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

Binary file not shown.

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

Binary file not shown.

48
netbox/project-static/styles/netbox.scss
View File

@ -835,15 +835,6 @@ table tbody {
}
}
// Expose theme colors as variables. (Useful for dynamic styling of choices etc.)
// Both as opaque colour and translucent (alpha 15%)
:root {
@each $color, $value in $theme-colors {
--nbx-color-#{$color}: #{$value};
--nbx-color-#{$color}-a15: #{rgba($value, 0.15)};
}
}
// Style objects with statuses/roles within a table. As of implementation, used for IP addresses
// assigned to interfaces.
table .table-badge-group {
@ -1078,4 +1069,41 @@ html {
display: none;
}
}
}
// Apply row colours to interface lists
&[data-netbox-url-name='device_interfaces'] {
tr[data-cable-status=connected] {
background-color: rgba(map.get($theme-colors, "green"), 0.15);
}
tr[data-cable-status=planned] {
background-color: rgba(map.get($theme-colors, "blue"), 0.15);
}
tr[data-cable-status=decommissioning] {
background-color: rgba(map.get($theme-colors, "yellow"), 0.15);
}
tr[data-mark-connected=true] {
background-color: rgba(map.get($theme-colors, "success"), 0.15);
}
tr[data-virtual=true] {
background-color: rgba(map.get($theme-colors, "primary"), 0.15);
}
tr[data-enabled=disabled] {
background-color: rgba(map.get($theme-colors, "danger"), 0.15);
}
// Only show the correct button depending on the cable status
tr[data-cable-status=connected] button.mark-installed {
display: none;
}
tr:not([data-cable-status=connected]) button.mark-planned {
display: none;
}
}
}

30
netbox/templates/dcim/device/interfaces.html
View File

@ -30,33 +30,3 @@
</div>
{% endif %}
{% endblock bulk_extra_controls %}
{% block head %}
{{ block.super }}
<style>
tr[data-cable-status=connected] {
background-color: var(--nbx-color-green-a15);
}
tr[data-cable-status=planned] {
background-color: var(--nbx-color-blue-a15);
}
tr[data-cable-status=decommissioning] {
background-color: var(--nbx-color-yellow-a15);
}
tr[data-mark-connected=true] {
background-color: var(--nbx-color-success-a15);
}
tr[data-virtual=true] {
background-color: var(--nbx-color-primary-a15);
}
tr[data-enabled=disabled] {
background-color: var(--nbx-color-danger-a15);
}
tr[data-cable-status=connected] button.mark-installed {
display: none;
}
tr:not([data-cable-status=connected]) button.mark-planned {
display: none;
}
</style>
{% endblock %}