mirror of
https://github.com/netbox-community/netbox.git
synced 2025-08-08 00:28:16 -06:00
Misc cleanup & refactoring
This commit is contained in:
Jeremy Stretch
parent
9d7147f6e9
commit
d3365122d7
BIN
netbox/project-static/dist/netbox.css
vendored
BIN
netbox/project-static/dist/netbox.css
vendored
Binary file not shown.
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -37,7 +37,7 @@ Blocks:
|
||||
<a href="{% url 'home' %}">
|
||||
<img src="{% static 'logo_netbox_dark_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-dark">
|
||||
<img src="{% static 'logo_netbox_bright_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-light">
|
||||
<div class="netbox-edition fw-semibold text-center fs-5 mt-2">{{ settings.RELEASE.edition }}</div>
|
||||
<div class="netbox-edition fw-semibold text-center fs-5 my-1">{{ settings.RELEASE.edition }}</div>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user