From 938aa7b7a4deca47c7b9a4cd7d2c46e01849f233 Mon Sep 17 00:00:00 2001 From: Andrew Gormley Date: Tue, 16 Jul 2024 20:18:42 +0100 Subject: [PATCH] 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 Co-authored-by: Jeremy Stretch --- netbox/project-static/dist/netbox.css | Bin 554686 -> 556126 bytes .../img/logo_netbox_bright_teal.svg | 24 +++++++ .../img/logo_netbox_dark_teal.svg | 24 +++++++ netbox/project-static/styles/_variables.scss | 2 +- .../styles/overrides/_tabler.scss | 43 +++++------- .../styles/transitional/_navigation.scss | 66 ++++++++++++++---- .../styles/transitional/_tables.scss | 32 +++++++++ netbox/templates/base/layout.html | 7 +- .../utilities/templates/navigation/menu.html | 2 +- 9 files changed, 156 insertions(+), 44 deletions(-) create mode 100644 netbox/project-static/img/logo_netbox_bright_teal.svg create mode 100644 netbox/project-static/img/logo_netbox_dark_teal.svg diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index fc7f3ca9df0fc34314c4868995c5315fd2774a23..e7181e52f6e7d149342d77bf3fcf90e78ea6a24c 100644 GIT binary patch delta 837 zcmah{&ubG=5GHBf?u4YRR$Hw_-58U0+s(4OX|U!Z2HKNQ^x6t}yPIsbNq57#Dj^;U zhAJqCik+jq_#X%X4_d^t)>{zmkCRXodJ#k~?zXgv6zhX|hi|_5X6C)`_4nA?&)7mE z&{u`Wy7&=T6#7vN%FXoMoWVP zF6UumNdu<&PKADgubweSF{zTCF*%(UWF;d=JSQat$582rB0Q0-3N5sFklQl`xQbO}cB zYZ)FzXx6gb5m9w59%I|gnWkQWF9DpK1qENIFw{-eN`Z4r1*&`ZuG4ahY@F?I)_Gi@ yz#iLI5=52iMuDR|zNH{yO@&FHLV847ohxXr=balaNBxGUapf@^ZRRYv1AhP^FEiC76u(}z!m{?D5e8VEv{^|w`5VHa?+xAyC*rS`LM;CJ# zO&7{y71?MgwIjIVX(-jgpj5!owJmX>xJ^nG8M-OQ5I-02rGS*2tkD)f>PQ__Ljs+03`@{6o8^D1J6Re^5o{XLATLr=_JqHIkya?=mwb4=LYUBGdgar?t!j#>@?VJ2_+ diff --git a/netbox/project-static/img/logo_netbox_bright_teal.svg b/netbox/project-static/img/logo_netbox_bright_teal.svg new file mode 100644 index 000000000..958a1d401 --- /dev/null +++ b/netbox/project-static/img/logo_netbox_bright_teal.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/netbox/project-static/img/logo_netbox_dark_teal.svg b/netbox/project-static/img/logo_netbox_dark_teal.svg new file mode 100644 index 000000000..5e4d36173 --- /dev/null +++ b/netbox/project-static/img/logo_netbox_dark_teal.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/netbox/project-static/styles/_variables.scss b/netbox/project-static/styles/_variables.scss index bf73f8361..04bb37c05 100644 --- a/netbox/project-static/styles/_variables.scss +++ b/netbox/project-static/styles/_variables.scss @@ -33,4 +33,4 @@ $dark-teal: #00857D; $primary: $dark-teal; // Navbar active dropdown border color -$navbar-active-border-color: $bright-teal; +$navbar-active-border-color: $dark-teal; diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss index c84274a21..fba5e6f3c 100644 --- a/netbox/project-static/styles/overrides/_tabler.scss +++ b/netbox/project-static/styles/overrides/_tabler.scss @@ -32,16 +32,12 @@ pre { // Dropdown items .dropdown-item { // Tabler sets display: flex - display: inline-block;; -} - -table th.orderable a { - color: var(--#{$prefix}body-color); + display: inline-block; } // Override background color alpha value [data-bs-theme=dark] ::selection { - background-color: rgba(var(--tblr-primary-rgb),.48) + background-color: rgba(var(--tblr-primary-rgb),.48); } // Dark mode colors @@ -95,6 +91,21 @@ table th.orderable a { // Dark mode overrides body[data-bs-theme=dark] { + // Change content color when primary teal changes with theme + .bg-primary { + .card-title,a,i { + color: $rich-black!important; + } + } + .text-bg-primary { + color: $rich-black!important; + } + + // Altering background colors + .card { + background: $rich-black!important; + } + // Background colors to match brand colors background-color: $rich-black; .navbar, .page-header { @@ -104,26 +115,6 @@ body[data-bs-theme=dark] { background-color: $rich-black-light!important; } - // Adjust dark table link color without affecting buttons and badges - table { - a { - color: $bright-teal; - &.dropdown-item { - color: inherit; - } - } - .badge a { - color: inherit; - } - .btn { - color: var(--#{$prefix}body-color); - } - // Stops table headers from appearing as primary link color - th.orderable a { - color: var(--#{$prefix}body-color); - } - } - // Adjusting text colors .text- { &bg-primary { diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss index e7dd35507..4c16ab3de 100644 --- a/netbox/project-static/styles/transitional/_navigation.scss +++ b/netbox/project-static/styles/transitional/_navigation.scss @@ -1,26 +1,32 @@ -// Navbar styling +// Navbar and light theme styling .navbar-vertical.navbar-expand-lg { - background-color: $rich-black; - .dropdown-item { - color: white!important; - } - .text-secondary { - color: $bright-teal!important; - } + // Background Gradient + background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF; + + // Adjust hover color & style for menu items .navbar-collapse { + .nav-link-icon { + color: var(--tblr-nav-link-color)!important; + } + .text-secondary { + color: $dark-teal!important; + } + .dropdown-menu { + + // Adjust hover color & style for menu items .dropdown-item { a { - color: inherit; + color: $rich-black; } .btn-group { visibility: hidden; } - // Adjust hover color & style for menu items + // Style menu item hover state &:hover { - background-color: $gray-700; + background-color: var(--tblr-navbar-active-bg); a { text-decoration: none; } @@ -31,9 +37,9 @@ // Style active menu item &.active { - background-color: $gray-700; + background-color: var(--tblr-navbar-active-bg); a { - color: white; + color: $rich-black; } .btn-group { visibility: visible; @@ -44,3 +50,37 @@ } } } + +// Dark theme styling +body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg { + + // Background Gradient + background: linear-gradient(180deg, rgba(0, 242, 212, 0.00) 0%, rgba(0, 242, 212, 0.10) 100%), #001423; + + // Border color for active dropdown list + .nav-item.dropdown.active:after { + border-color: $bright-teal!important; + } + + // Adjust hover color & style for menu items + .dropdown-item { + a { + color: white!important; + } + &.active { + background-color: $navbar-dark-active-bg!important; + a { + color: white!important; + } + } + &:hover { + background-color: $navbar-dark-active-bg!important; + } + .nav-link-title { + color: white!important; + } + } + .text-secondary { + color: $bright-teal!important; + } +} diff --git a/netbox/project-static/styles/transitional/_tables.scss b/netbox/project-static/styles/transitional/_tables.scss index 6429fd1aa..2d90e6524 100644 --- a/netbox/project-static/styles/transitional/_tables.scss +++ b/netbox/project-static/styles/transitional/_tables.scss @@ -1,6 +1,11 @@ // Object list tables table.object-list { + // Adjust object list link color without affecting buttons + a:not(.btn) { + color: var(--#{$prefix}body-color); + } + // Hide border of last row tbody > tr:last-child > td { border-bottom-width: 0; @@ -48,3 +53,30 @@ table.attr-table { td pre { margin-bottom: 0; } + +table th.orderable a { + color: var(--#{$prefix}body-color); +} + +body[data-bs-theme=dark] { + .table thead th, .markdown>table thead th { + background: $rich-black!important; + } + + // Adjust dark table link color without affecting buttons and badges + table { + a:not(.btn,.badge a) { + color: $bright-teal; + } + // Stops table headers from appearing as primary link color + th.orderable a { + color: var(--#{$prefix}body-color); + } + } + + table.object-list { + a { + color: var(--#{$prefix}body-color)!important; + } + } +} diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index 40e371826..74062c25a 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -19,7 +19,7 @@ Blocks:
{# Sidebar #} -