Skip to content

Commit 938aa7b

Browse files
andrewgormleyAndrew Gormleyjeremystretch
authored
16907 web UI refresh (#16915)
* closes #16907: web ui refresh * closes #16907: changed default widget color to primary color * closes #16907: removed comma * Revert dashboard widget color changes * Rename logo images for consistency * Restore original dashboard widget config * Remove .navbar-brand-autodark from logo * Restore logo file names --------- Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local> Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>
1 parent e5691df commit 938aa7b

File tree

9 files changed

+157
-45
lines changed

9 files changed

+157
-45
lines changed

‎netbox/project-static/dist/netbox.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎netbox/project-static/img/logo_netbox_bright_teal.svg

Lines changed: 24 additions & 0 deletions
Loading

‎netbox/project-static/img/logo_netbox_dark_teal.svg

Lines changed: 24 additions & 0 deletions
Loading

‎netbox/project-static/styles/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,4 @@ $dark-teal: #00857D;
3333
$primary: $dark-teal;
3434

3535
// Navbar active dropdown border color
36-
$navbar-active-border-color: $bright-teal;
36+
$navbar-active-border-color: $dark-teal;

‎netbox/project-static/styles/overrides/_tabler.scss

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,12 @@ pre {
3232
// Dropdown items
3333
.dropdown-item {
3434
// Tabler sets display: flex
35-
display: inline-block;;
36-
}
37-
38-
table th.orderable a {
39-
color: var(--#{$prefix}body-color);
35+
display: inline-block;
4036
}
4137

4238
// Override background color alpha value
4339
[data-bs-theme=dark] ::selection {
44-
background-color: rgba(var(--tblr-primary-rgb),.48)
40+
background-color: rgba(var(--tblr-primary-rgb),.48);
4541
}
4642

4743
// Dark mode colors
@@ -95,6 +91,21 @@ table th.orderable a {
9591
// Dark mode overrides
9692
body[data-bs-theme=dark] {
9793

94+
// Change content color when primary teal changes with theme
95+
.bg-primary {
96+
.card-title,a,i {
97+
color: $rich-black!important;
98+
}
99+
}
100+
.text-bg-primary {
101+
color: $rich-black!important;
102+
}
103+
104+
// Altering background colors
105+
.card {
106+
background: $rich-black!important;
107+
}
108+
98109
// Background colors to match brand colors
99110
background-color: $rich-black;
100111
.navbar, .page-header {
@@ -104,26 +115,6 @@ body[data-bs-theme=dark] {
104115
background-color: $rich-black-light!important;
105116
}
106117

107-
// Adjust dark table link color without affecting buttons and badges
108-
table {
109-
a {
110-
color: $bright-teal;
111-
&.dropdown-item {
112-
color: inherit;
113-
}
114-
}
115-
.badge a {
116-
color: inherit;
117-
}
118-
.btn {
119-
color: var(--#{$prefix}body-color);
120-
}
121-
// Stops table headers from appearing as primary link color
122-
th.orderable a {
123-
color: var(--#{$prefix}body-color);
124-
}
125-
}
126-
127118
// Adjusting text colors
128119
.text- {
129120
&bg-primary {

‎netbox/project-static/styles/transitional/_navigation.scss

Lines changed: 53 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
1-
// Navbar styling
1+
// Navbar and light theme styling
22
.navbar-vertical.navbar-expand-lg {
3-
background-color: $rich-black;
4-
.dropdown-item {
5-
color: white!important;
6-
}
7-
.text-secondary {
8-
color: $bright-teal!important;
9-
}
103

4+
// Background Gradient
5+
background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
6+
7+
// Adjust hover color & style for menu items
118
.navbar-collapse {
9+
.nav-link-icon {
10+
color: var(--tblr-nav-link-color)!important;
11+
}
12+
.text-secondary {
13+
color: $dark-teal!important;
14+
}
15+
1216
.dropdown-menu {
17+
18+
// Adjust hover color & style for menu items
1319
.dropdown-item {
1420
a {
15-
color: inherit;
21+
color: $rich-black;
1622
}
1723
.btn-group {
1824
visibility: hidden;
1925
}
2026

21-
// Adjust hover color & style for menu items
27+
// Style menu item hover state
2228
&:hover {
23-
background-color: $gray-700;
29+
background-color: var(--tblr-navbar-active-bg);
2430
a {
2531
text-decoration: none;
2632
}
@@ -31,9 +37,9 @@
3137

3238
// Style active menu item
3339
&.active {
34-
background-color: $gray-700;
40+
background-color: var(--tblr-navbar-active-bg);
3541
a {
36-
color: white;
42+
color: $rich-black;
3743
}
3844
.btn-group {
3945
visibility: visible;
@@ -44,3 +50,37 @@
4450
}
4551
}
4652
}
53+
54+
// Dark theme styling
55+
body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
56+
57+
// Background Gradient
58+
background: linear-gradient(180deg, rgba(0, 242, 212, 0.00) 0%, rgba(0, 242, 212, 0.10) 100%), #001423;
59+
60+
// Border color for active dropdown list
61+
.nav-item.dropdown.active:after {
62+
border-color: $bright-teal!important;
63+
}
64+
65+
// Adjust hover color & style for menu items
66+
.dropdown-item {
67+
a {
68+
color: white!important;
69+
}
70+
&.active {
71+
background-color: $navbar-dark-active-bg!important;
72+
a {
73+
color: white!important;
74+
}
75+
}
76+
&:hover {
77+
background-color: $navbar-dark-active-bg!important;
78+
}
79+
.nav-link-title {
80+
color: white!important;
81+
}
82+
}
83+
.text-secondary {
84+
color: $bright-teal!important;
85+
}
86+
}

‎netbox/project-static/styles/transitional/_tables.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
// Object list tables
22
table.object-list {
33

4+
// Adjust object list link color without affecting buttons
5+
a:not(.btn) {
6+
color: var(--#{$prefix}body-color);
7+
}
8+
49
// Hide border of last row
510
tbody > tr:last-child > td {
611
border-bottom-width: 0;
@@ -48,3 +53,30 @@ table.attr-table {
4853
td pre {
4954
margin-bottom: 0;
5055
}
56+
57+
table th.orderable a {
58+
color: var(--#{$prefix}body-color);
59+
}
60+
61+
body[data-bs-theme=dark] {
62+
.table thead th, .markdown>table thead th {
63+
background: $rich-black!important;
64+
}
65+
66+
// Adjust dark table link color without affecting buttons and badges
67+
table {
68+
a:not(.btn,.badge a) {
69+
color: $bright-teal;
70+
}
71+
// Stops table headers from appearing as primary link color
72+
th.orderable a {
73+
color: var(--#{$prefix}body-color);
74+
}
75+
}
76+
77+
table.object-list {
78+
a {
79+
color: var(--#{$prefix}body-color)!important;
80+
}
81+
}
82+
}

‎netbox/templates/base/layout.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<div class="page">
2020

2121
{# Sidebar #}
22-
<aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
22+
<aside class="navbar navbar-vertical navbar-expand-lg">
2323
<div class="container-fluid">
2424

2525
{# Menu toggle (mobile view) #}
@@ -28,9 +28,10 @@
2828
</button>
2929

3030
{# Logo #}
31-
<h1 class="navbar-brand navbar-brand-autodark">
31+
<h1 class="navbar-brand">
3232
<a href="{% url 'home' %}">
33-
<img src="{% static 'netbox_logo.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image">
33+
<img src="{% static 'logo_netbox_dark_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-dark">
34+
<img src="{% static 'logo_netbox_bright_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-light">
3435
</a>
3536
</h1>
3637

‎netbox/utilities/templates/navigation/menu.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
{% if buttons %}
4646
<div class="btn-group ms-1">
4747
{% for button in buttons %}
48-
<a href="{% url button.link %}" class="btn btn-sm btn-{{ button.color|default:"outline-dark" }} lh-2 px-2" title="{{ button.title }}">
48+
<a href="{% url button.link %}" class="btn btn-sm btn-{{ button.color|default:"outline" }} lh-2 px-2" title="{{ button.title }}">
4949
<i class="{{ button.icon_class }}"></i>
5050
</a>
5151
{% endfor %}

0 commit comments

Comments
 (0)