From e7e538c26be12946f63b33ee5e5af5816ff4e263 Mon Sep 17 00:00:00 2001 From: Andrew Gormley Date: Mon, 15 Jul 2024 13:20:47 +0100 Subject: [PATCH] closes #16907: web ui refresh --- netbox/project-static/dist/netbox.css | Bin 553528 -> 555038 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 | 30 ++----- .../styles/transitional/_navigation.scss | 76 +++++++++++++++--- .../styles/transitional/_tables.scss | 35 ++++++++ netbox/templates/base/layout.html | 5 +- .../utilities/templates/navigation/menu.html | 2 +- 9 files changed, 158 insertions(+), 40 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 55c93ba2ce834deb3e654590e85b4026972c414a..253391bb65dab22740e9ceb0eaf49f081f0d7b77 100644 GIT binary patch delta 855 zcmZ`%O-~bH5YE>9m|6=(z>ii-X;Vv~ZFaY95Q2$bxOvbc*_OQB-F`^fg=LE$HHt|= zjw;0Qq9^ZSVp0ztG@gVX(8L%d#G59CL@&e`x01F2^-X3DGtWFT^UVADOaHT-{)Gxv zu~m+|qCeMGJg#H-+?O+jC$Obn%* zA@Wqt&`X+vvIIlul_V5RXR$F&W{*K0X*Rav3tf zN1DNy5cUZ?9}GtVL7R$V{Tz1!T?vZDu`uPpr!vIwL7nb8W2!gI z=$tC+nnH}5Wmzxk#%O@&&nJhKec0A86LtAWJ0&E4Qpfvn=g%o{Rl7}e;j)utimK1dt3h1_RR((=*pp*|h%VoarNtE`8NE1-K2r0Y1(eB>(^b delta 270 zcmbRDL2<_u#fBEf7N!>FEiCu1v$`3%m{?Dr_?ktm{nvFCAZ7((w(Y;Jv;S$FE|AAz zG+il^Rb)F?6h|x5^amNN($f`U7}=(?#&X=6UXahhIz1$xLuPte42L9#LP=s$PO3uU z^e1^7DJ*(PC3zqXQV?bC`5gSyRq{A2w?B;KXk(fFXA%?Fbca}=0rS&1l&5!Ra_~-H zn8_hFy($^Vy`IIP4q`=4KjzG;KK()}hv9VX6pl7_W#dE>3scMKiI%Ls(>Hu%VVy3Y r%JCaj_`xq0?&@?&mLlw 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 9a4d510b7..01dcd8062 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 20ebabab0..2e195cfc2 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 @@ -73,6 +69,11 @@ table th.orderable a { // Dark mode overrides body[data-bs-theme=dark] { + // Altering background colors + .card { + background: $rich-black!important; + } + // Background colors to match brand colors background-color: $rich-black; .navbar, .page-header { @@ -82,23 +83,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; - } - .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- { &muted { diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss index e7dd35507..dc80af761 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,47 @@ } } } + +// Fixes bug where user loads page on dark mode, switches to light mode but filter is not removed +[data-bs-theme=dark] .navbar-brand-autodark .navbar-brand-image { + filter: none!important; +} + +// 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; + } + + // Override svg logo fill + .navbar-brand-autodark .navbar-brand-image { + filter: none!important; + } +} diff --git a/netbox/project-static/styles/transitional/_tables.scss b/netbox/project-static/styles/transitional/_tables.scss index 6429fd1aa..c43755d77 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,33 @@ 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) { + color: $bright-teal; + } + .badge a { + color: inherit; + } + // 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); + } + } +} diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index 40e371826..c337d2441 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -19,7 +19,7 @@ Blocks:
{# Sidebar #} -