diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index fc27a79e7..9f31fd8fa 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/_variables.scss b/netbox/project-static/styles/_variables.scss index 9a4d510b7..0a1febaff 100644 --- a/netbox/project-static/styles/_variables.scss +++ b/netbox/project-static/styles/_variables.scss @@ -30,6 +30,13 @@ $rich-black-lightest: #1A2C39; $bright-teal: #00F2D4; $dark-teal: #00857D; +$cyan: #00D8FF; +$green: #5cff5c; +$orange: #ff7926; +$purple: #f540db; +$red: #ff4646; +$yellow: #ffc034; + $primary: $dark-teal; // Navbar active dropdown border color diff --git a/netbox/project-static/styles/overrides/_tabler.scss b/netbox/project-static/styles/overrides/_tabler.scss index 120f37990..553134f17 100644 --- a/netbox/project-static/styles/overrides/_tabler.scss +++ b/netbox/project-static/styles/overrides/_tabler.scss @@ -49,7 +49,13 @@ table th.orderable a { @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}; } } @@ -70,6 +76,42 @@ table th.orderable a { 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); + } +} + +// Change text color based on button color +@each $color, $value in $theme-colors { + .btn-#{$color} { + @if $color == 'primary'{ + --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg); + --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg); + --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg); + } @else { + --#{$prefix}btn-color: inherit; + --#{$prefix}btn-hover-color: $gray-800; + --#{$prefix}btn-active-color: $gray-800; + } + } +} + +// Adjust text color for new green +.text-bg-green,.text-bg-success,.progress-bar { + color: $rich-black!important; +} + // Dark mode overrides body[data-bs-theme=dark] { @@ -86,17 +128,25 @@ body[data-bs-theme=dark] { table { a { color: $bright-teal; + + &.dropdown-item { + color: inherit; + } } .badge a { color: inherit; } .btn { - color: var(--#{$prefix}body-color); + // color: var(--#{$prefix}body-color); + color: $rich-black; } } // Adjusting text colors .text- { + &bg-primary { + color: $rich-black!important; + } &muted { color: var(--#{$prefix}secondary-color) !important; }