diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index 24ebd7b7a..42639c31d 100644 Binary files a/netbox/project-static/dist/netbox.css and b/netbox/project-static/dist/netbox.css differ diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss index e6432558b..a17a800f5 100644 --- a/netbox/project-static/styles/overrides/_tabler.scss +++ b/netbox/project-static/styles/overrides/_tabler.scss @@ -11,16 +11,38 @@ pre { color: inherit; } -// Buttons +// Slightly increase alert contrast between bg and text +.alert { + background: var(--#{$prefix}bg-surface); +} + +// Button adjustments .btn { // Tabler sets display: flex display: inline-block; + + &:focus { + // Add button focus state + border: 1px solid var(--tblr-primary-fg); + outline: 2px solid var(--tblr-primary) !important; + } } .btn-sm { // $border-radius-sm (2px) is too small border-radius: $border-radius; } +// Dropdown items +.dropdown-item { + // Tabler sets display: flex + display: inline-block; +} + +// Set footer icon color +.footer .text-primary { + color: $rich-black !important; +} + // Tabs .nav-tabs { .nav-link { @@ -29,15 +51,12 @@ pre { } } -// Dropdown items -.dropdown-item { - // Tabler sets display: flex - display: inline-block; +// Altering background colors +.page, .page-tabs .nav-tabs .nav-link.active { + background-color: var(--#{$prefix}bg-surface-tertiary) !important; } - -// Override background color alpha value -[data-bs-theme=dark] ::selection { - background-color: rgba(var(--tblr-primary-rgb),.48); +.page-body .card .card-header { + background: var(--tblr-bg-surface-secondary) !important; } // Dark mode colors @@ -55,59 +74,30 @@ pre { } } -// Slightly increase alert contrast between bg and text -.alert { - background: var(--#{$prefix}bg-surface); -} - -// Altering background colors -.page, .page-tabs .nav-tabs .nav-link.active { - background-color: var(--#{$prefix}bg-surface-tertiary)!important; -} -.page-body .card .card-header { - background: var(--tblr-bg-surface-secondary)!important; -} - -.footer .text-primary { - color: $rich-black!important; -} - -// Add button focus state -.btn:focus { - border: 1px solid var(--tblr-primary-fg); - outline: 2px solid var(--tblr-primary)!important; -} - -// Fix secondary combo button contrast -.btn-outline-secondary { - &.active { - color: var(--tblr-primary-fg); - } - &:hover { - color: var(--tblr-primary-fg); - } -} - // Dark mode overrides body[data-bs-theme=dark] { + // Override background color alpha value + ::selection { + background-color: rgba(var(--tblr-primary-rgb),.48); + } .btn-primary { - color: $rich-black!important; + color: $rich-black !important; } // Change content color when primary teal changes with theme .bg-primary { .card-title,a,i { - color: $rich-black!important; + color: $rich-black !important; } } .text-bg-primary { - color: $rich-black!important; + color: $rich-black !important; } // Altering background colors .card { - background: $rich-black!important; + background: $rich-black !important; } // Background colors to match brand colors @@ -116,7 +106,7 @@ body[data-bs-theme=dark] { background-color: $rich-black; } .page, .page-tabs .nav-tabs .nav-link.active { - background-color: $rich-black-light!important; + background-color: $rich-black-light !important; } .page-link.active, .active>.page-link { @@ -126,16 +116,16 @@ body[data-bs-theme=dark] { // Adjusting text colors .text- { &bg-primary { - color: $rich-black!important; + color: $rich-black !important; } &muted { color: var(--#{$prefix}secondary-color) !important; } &secondary { - color: $gray-400!important; + color: $gray-400 !important; } } .footer .text-primary { - color: white!important; + color: white !important; } } diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss index 63adb8467..67aa19935 100644 --- a/netbox/project-static/styles/transitional/_navigation.scss +++ b/netbox/project-static/styles/transitional/_navigation.scss @@ -9,10 +9,10 @@ // Adjust hover color & style for menu items .navbar-collapse { .nav-link-icon { - color: var(--tblr-nav-link-color)!important; + color: var(--tblr-nav-link-color) !important; } .text-secondary { - color: $dark-teal!important; + color: $dark-teal !important; } .dropdown-menu { @@ -94,6 +94,7 @@ // Light theme styling body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg { + // Background Gradient background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF; } @@ -105,29 +106,29 @@ body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg { // Border color for active dropdown list .nav-item.dropdown.active:after { - border-color: $bright-teal!important; + border-color: $bright-teal !important; } // Adjust hover color & style for menu items .dropdown-item { a { - color: white!important; + color: white !important; } &.active { - background-color: $navbar-dark-active-bg!important; + background-color: $navbar-dark-active-bg !important; a { - color: white!important; + color: white !important; } } &:hover { - background-color: $navbar-dark-active-bg!important; + background-color: $navbar-dark-active-bg !important; } .nav-link-title { - color: white!important; + color: white !important; } } .text-secondary { - color: $bright-teal!important; + color: $bright-teal !important; } img.motif { diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index 280406e0b..693a1a017 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -37,7 +37,7 @@ Blocks: {% trans {% trans -
{{ settings.RELEASE.edition }}
+
{{ settings.RELEASE.edition }}