diff --git a/netbox/netbox/tables/columns.py b/netbox/netbox/tables/columns.py index 32eaf3515..8489648f3 100644 --- a/netbox/netbox/tables/columns.py +++ b/netbox/netbox/tables/columns.py @@ -173,6 +173,7 @@ class ToggleColumn(tables.CheckBoxColumn): kwargs['attrs'] = { 'th': { 'class': 'w-1', + 'aria-label': _('Select all'), }, 'td': { 'class': 'w-1', @@ -284,7 +285,7 @@ class ActionsColumn(tables.Column): if len(self.actions) == 1 or (self.split_actions and idx == 0): dropdown_class = attrs.css_class button = ( - f'' + f'' f'' ) diff --git a/netbox/project-static/dist/netbox-external.css b/netbox/project-static/dist/netbox-external.css index 05e350aa8..603bc14c7 100644 Binary files a/netbox/project-static/dist/netbox-external.css and b/netbox/project-static/dist/netbox-external.css differ diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index 755e51f17..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/dist/plus-jakarta-sans-cyrillic-ext-wght-normal-3FNWYSHQ.woff2 b/netbox/project-static/dist/plus-jakarta-sans-cyrillic-ext-wght-normal-3FNWYSHQ.woff2 new file mode 100644 index 000000000..c456409f0 Binary files /dev/null and b/netbox/project-static/dist/plus-jakarta-sans-cyrillic-ext-wght-normal-3FNWYSHQ.woff2 differ diff --git a/netbox/project-static/dist/plus-jakarta-sans-latin-ext-wght-normal-WWG75Y4U.woff2 b/netbox/project-static/dist/plus-jakarta-sans-latin-ext-wght-normal-WWG75Y4U.woff2 new file mode 100644 index 000000000..bdb7edfd4 Binary files /dev/null and b/netbox/project-static/dist/plus-jakarta-sans-latin-ext-wght-normal-WWG75Y4U.woff2 differ diff --git a/netbox/project-static/dist/plus-jakarta-sans-latin-wght-normal-S6EFCQOU.woff2 b/netbox/project-static/dist/plus-jakarta-sans-latin-wght-normal-S6EFCQOU.woff2 new file mode 100644 index 000000000..8c4a84afe Binary files /dev/null and b/netbox/project-static/dist/plus-jakarta-sans-latin-wght-normal-S6EFCQOU.woff2 differ diff --git a/netbox/project-static/dist/plus-jakarta-sans-vietnamese-wght-normal-NNXUV3SN.woff2 b/netbox/project-static/dist/plus-jakarta-sans-vietnamese-wght-normal-NNXUV3SN.woff2 new file mode 100644 index 000000000..57866b15f Binary files /dev/null and b/netbox/project-static/dist/plus-jakarta-sans-vietnamese-wght-normal-NNXUV3SN.woff2 differ 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/img/motif.svg b/netbox/project-static/img/motif.svg new file mode 100644 index 000000000..11a49f454 --- /dev/null +++ b/netbox/project-static/img/motif.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/netbox/project-static/package.json b/netbox/project-static/package.json index 8079e8dd3..201b3c541 100644 --- a/netbox/project-static/package.json +++ b/netbox/project-static/package.json @@ -22,6 +22,7 @@ "validate:formatting:scripts": "prettier -c src/**/*.ts" }, "dependencies": { + "@fontsource-variable/plus-jakarta-sans": "^5.0.21", "@mdi/font": "7.4.47", "@tabler/core": "1.0.0-beta20", "bootstrap": "5.3.3", @@ -32,7 +33,6 @@ "query-string": "9.1.0", "sass": "1.77.8", "tom-select": "2.3.1", - "typeface-inter": "3.18.1", "typeface-roboto-mono": "1.1.13" }, "devDependencies": { diff --git a/netbox/project-static/styles/_variables.scss b/netbox/project-static/styles/_variables.scss index afd4bc6bd..749f0ba57 100644 --- a/netbox/project-static/styles/_variables.scss +++ b/netbox/project-static/styles/_variables.scss @@ -1,9 +1,10 @@ // Global variables // Set base fonts -$font-family-sans-serif: 'Inter'; +$font-family-sans-serif: 'Plus Jakarta Sans Variable', system-ui, sans-serif; // See https://github.com/tabler/tabler/issues/1812 $font-family-monospace: 'Roboto Mono'; +$font-weight-base: 500; // Set the navigation sidebar width $sidebar-width: 18rem; @@ -21,3 +22,16 @@ $hover-bg: rgba(var(--tblr-secondary-rgb), 0.08); // Ensure active nav-pill has a background color in dark mode $nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15); + +// Brand colors +$rich-black: #001423; +$rich-black-light: #081B2A; +$rich-black-lighter: #0D202E; +$rich-black-lightest: #1A2C39; +$bright-teal: #00F2D4; +$dark-teal: #00857D; + +$primary: $dark-teal; + +// Navbar active dropdown border color +$navbar-active-border-color: $dark-teal; diff --git a/netbox/project-static/styles/custom/_dashboard.scss b/netbox/project-static/styles/custom/_dashboard.scss new file mode 100644 index 000000000..a1c0e13ec --- /dev/null +++ b/netbox/project-static/styles/custom/_dashboard.scss @@ -0,0 +1,12 @@ +// Alter default color for dashboard widget headings +.grid-stack { + .card-header { + // Default color of card header changes depending on theme + &.bg-default { + background: var(--tblr-bg-surface-secondary) !important; + } + a { + color: inherit !important; + } + } +} diff --git a/netbox/project-static/styles/custom/_misc.scss b/netbox/project-static/styles/custom/_misc.scss index 9779bf583..08125e8d3 100644 --- a/netbox/project-static/styles/custom/_misc.scss +++ b/netbox/project-static/styles/custom/_misc.scss @@ -28,3 +28,8 @@ span.color-label { visibility: hidden; opacity: 0; } + +// NetBox edition text +.netbox-edition { + letter-spacing: .15rem; +} diff --git a/netbox/project-static/styles/external.scss b/netbox/project-static/styles/external.scss index b3c83aa87..1e09d1803 100644 --- a/netbox/project-static/styles/external.scss +++ b/netbox/project-static/styles/external.scss @@ -4,5 +4,5 @@ @import 'gridstack/dist/gridstack.min.css'; // Fonts -@import url("../node_modules/typeface-inter/inter.css"); @import url("../node_modules/typeface-roboto-mono/index.css"); +@import url("../node_modules/@fontsource-variable/plus-jakarta-sans/index.css"); diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss index 0e1b44d59..effc90dec 100644 --- a/netbox/project-static/styles/netbox.scss +++ b/netbox/project-static/styles/netbox.scss @@ -21,6 +21,7 @@ // Custom styling @import 'custom/code'; +@import 'custom/dashboard'; @import 'custom/interfaces'; @import 'custom/markdown'; @import 'custom/misc'; diff --git a/netbox/project-static/styles/overrides/_bootstrap.scss b/netbox/project-static/styles/overrides/_bootstrap.scss index 59c248541..d443da6f5 100644 --- a/netbox/project-static/styles/overrides/_bootstrap.scss +++ b/netbox/project-static/styles/overrides/_bootstrap.scss @@ -20,3 +20,8 @@ hr.dropdown-divider { margin-bottom: 0.25rem; margin-top: 0.25rem; } + +// Bootstrap forces the font weight for dropdown items to $font-weight-normal +.dropdown-item { + font-weight: $font-weight-base; +} diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss index 97f1298df..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,18 +51,81 @@ 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; +} +.page-body .card .card-header { + background: var(--tblr-bg-surface-secondary) !important; } -table a { - // Adjust table anchor link contrast as not enough contrast in dark mode - filter: brightness(110%); +// Dark mode colors +@if $enable-dark-mode { + @include color-mode(dark, true) { + --#{$prefix}alert-color: darken(var(--#{$prefix}warning),10%); + --#{$prefix}link-color: #{$bright-teal}; + --#{$prefix}link-color-rgb: 0,242,212; + --#{$prefix}link-hover-color-rgb: 0,242,212; + --#{$prefix}secondary: #{$gray-400}; + --#{$prefix}primary: #{$bright-teal}; + --#{$prefix}primary-fg: #{$rich-black}; + --#{$prefix}primary-rgb: 0,242,212; + --#{$prefix}btn-active-color: #{$rich-black}; + } } -// Override background color alpha value -[data-bs-theme=dark] ::selection { - background-color: rgba(var(--tblr-primary-rgb),.48) +// 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; + } + + // 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 { + background-color: $rich-black; + } + .page, .page-tabs .nav-tabs .nav-link.active { + background-color: $rich-black-light !important; + } + + .page-link.active, .active>.page-link { + color: $rich-black; + } + + // Adjusting text colors + .text- { + &bg-primary { + color: $rich-black !important; + } + &muted { + color: var(--#{$prefix}secondary-color) !important; + } + &secondary { + color: $gray-400 !important; + } + } + .footer .text-primary { + color: white !important; + } } diff --git a/netbox/project-static/styles/transitional/_cards.scss b/netbox/project-static/styles/transitional/_cards.scss index 6a7666524..1b619ab9b 100644 --- a/netbox/project-static/styles/transitional/_cards.scss +++ b/netbox/project-static/styles/transitional/_cards.scss @@ -16,6 +16,12 @@ background: var(--#{$prefix}bg-surface-tertiary); } + // Use
font size for card headers + h2.card-header { + @extend h5; + margin-bottom: 0; + } + // Reduce padding .list-group-item { padding: 0.5rem 0.75rem; diff --git a/netbox/project-static/styles/transitional/_forms.scss b/netbox/project-static/styles/transitional/_forms.scss index a489d87de..147b11b97 100644 --- a/netbox/project-static/styles/transitional/_forms.scss +++ b/netbox/project-static/styles/transitional/_forms.scss @@ -4,6 +4,13 @@ form.object-edit { max-width: 800px; } +// Use

style for field group headings +.field-group { + h2 { + @extend h3; + } +} + // Set bond font & append an asterisk to labels for required fields .col-form-label.required { font-weight: bold; diff --git a/netbox/project-static/styles/transitional/_navigation.scss b/netbox/project-static/styles/transitional/_navigation.scss index fe7b8e75a..67aa19935 100644 --- a/netbox/project-static/styles/transitional/_navigation.scss +++ b/netbox/project-static/styles/transitional/_navigation.scss @@ -1,18 +1,34 @@ -// Navbar styling +// Navbar and light theme styling .navbar-vertical.navbar-expand-lg { + + // Adds spacing to the bottom of the side navigation to avoid hidden nav items + @include media-breakpoint-up(lg) { + padding-bottom: 2rem; + } + + // 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; } @@ -23,9 +39,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; @@ -35,4 +51,87 @@ } } } + + // Ensures theme toggle appears above background image + .navbar-nav { + z-index: 1; + } + + // Logo text for non-community editions + .navbar-brand { + + // Reduce logo padding on mobile view + @include media-breakpoint-down(lg) { + padding: 0.2rem 0; + } + + a:hover { + text-decoration: none; + } + } + + // Navigation geometric graphic for non-community editions + img.motif { + bottom: 0; + display: none; + left:0; + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%); + opacity: .5; + position: fixed; + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; + width:18rem; + + @include media-breakpoint-up(lg) { + display: block; + } + } +} + +// 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; +} + +// 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; + } + + img.motif { + opacity: .25; + } } diff --git a/netbox/project-static/styles/transitional/_tables.scss b/netbox/project-static/styles/transitional/_tables.scss index 6429fd1aa..4094631ca 100644 --- a/netbox/project-static/styles/transitional/_tables.scss +++ b/netbox/project-static/styles/transitional/_tables.scss @@ -23,7 +23,7 @@ table.attr-table { // Restyle row header th { - font-weight: normal; + font-weight: $font-weight-base; width: min-content; } @@ -48,3 +48,15 @@ table.attr-table { td pre { margin-bottom: 0; } + +// Use base text color for table header links +table th.orderable a { + color: var(--#{$prefix}body-color); +} + +body[data-bs-theme=dark] { + // Adjust table header background color + .table thead th, .markdown>table thead th { + background: $rich-black !important; + } +} diff --git a/netbox/project-static/yarn.lock b/netbox/project-static/yarn.lock index bb0bea154..f87ed8925 100644 --- a/netbox/project-static/yarn.lock +++ b/netbox/project-static/yarn.lock @@ -80,6 +80,11 @@ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5" integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw== +"@fontsource-variable/plus-jakarta-sans@^5.0.21": + version "5.0.21" + resolved "https://registry.yarnpkg.com/@fontsource-variable/plus-jakarta-sans/-/plus-jakarta-sans-5.0.21.tgz#3bb6e0d16add99f0b93981443d4d763ea85ad13b" + integrity sha512-VTQB+MnaYbjLNmfxQJ/Fc2rayLGlqTiZa6nZTpplS0lJF3XKcWPPItilGFMZW4lfwIiroo+FIfBewBOF3MrMPQ== + "@graphiql/plugin-explorer@2.0.0": version "2.0.0" resolved "https://registry.yarnpkg.com/@graphiql/plugin-explorer/-/plugin-explorer-2.0.0.tgz#d6869cba019ae6fac006ce61ae3470d8c8a83938" @@ -2781,11 +2786,6 @@ typed-array-length@^1.0.6: is-typed-array "^1.1.13" possible-typed-array-names "^1.0.0" -typeface-inter@3.18.1: - version "3.18.1" - resolved "https://registry.yarnpkg.com/typeface-inter/-/typeface-inter-3.18.1.tgz#24cccdf29923f318589783997be20a662cd3ab9c" - integrity sha512-c+TBanYFCvmg3j5vPk+zxK4ocMZbPxMEmjnwG7rPQoV87xvQ6b07VbAOC0Va0XBbbZCGw6cWNeFuLeg1YQru3Q== - typeface-roboto-mono@1.1.13: version "1.1.13" resolved "https://registry.yarnpkg.com/typeface-roboto-mono/-/typeface-roboto-mono-1.1.13.tgz#2af8662db8f9119c00efd55d6ed8877d2a69ec94" diff --git a/netbox/templates/500.html b/netbox/templates/500.html index b26b61973..4805e9240 100644 --- a/netbox/templates/500.html +++ b/netbox/templates/500.html @@ -14,9 +14,9 @@
-
+

{% trans "Server Error" %} -

+

{% block message %}

diff --git a/netbox/templates/account/base.html b/netbox/templates/account/base.html index 41fe4665e..01d288ea6 100644 --- a/netbox/templates/account/base.html +++ b/netbox/templates/account/base.html @@ -2,30 +2,29 @@ {% load i18n %} {% block tabs %} -