mirror of
https://github.com/netbox-community/netbox.git
synced 2024-05-10 07:54:54 +00:00
Merge branch 'feature' into 6000-cable-trace-svg
This commit is contained in:
jeremystretch
39
netbox/project-static/styles/_cable_trace.scss
Normal file
39
netbox/project-static/styles/_cable_trace.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
text {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
text.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
svg {
|
||||
/* Boxes */
|
||||
rect {
|
||||
fill: #e0e0e0;
|
||||
stroke: #606060;
|
||||
stroke-width: 1;
|
||||
.termination {
|
||||
fill: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Connectors */
|
||||
.connector text {
|
||||
text-anchor: start;
|
||||
}
|
||||
line {
|
||||
stroke-width: 5px;
|
||||
}
|
||||
line.cable-shadow {
|
||||
stroke: #303030;
|
||||
stroke-width: 7px;
|
||||
}
|
||||
line.attachment {
|
||||
stroke: #c0c0c0;
|
||||
stroke-dasharray: 5px,5px;
|
||||
}
|
||||
}
|
||||
10
netbox/project-static/styles/_dark.scss
Normal file
10
netbox/project-static/styles/_dark.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
// Entry for netbox-dark.css stylesheet.
|
||||
|
||||
body[data-netbox-color-mode='dark'] {
|
||||
// Imports are scoped under the body when its data-netbox-color-mode attribute is set to 'dark'.
|
||||
@import './theme-dark.scss';
|
||||
@import './bootstrap.scss';
|
||||
@import './select.scss';
|
||||
@import './flatpickr-dark.scss';
|
||||
@import './netbox.scss';
|
||||
}
|
||||
104
netbox/project-static/styles/_elevations.scss
Normal file
104
netbox/project-static/styles/_elevations.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
// Entry for rack_elevation.css stylesheet.
|
||||
|
||||
@import './theme-light.scss';
|
||||
|
||||
* {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
rect {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
text {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
|
||||
svg {
|
||||
.rack {
|
||||
background-color: $gray-100;
|
||||
fill: none;
|
||||
stroke: $body-color;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.slot {
|
||||
fill: $gray-100;
|
||||
stroke: $gray-500;
|
||||
&:hover {
|
||||
fill: $gray-50;
|
||||
}
|
||||
& + .add-device {
|
||||
fill: none;
|
||||
}
|
||||
&:hover + .add-device {
|
||||
fill: $blue;
|
||||
}
|
||||
& .add-device {
|
||||
&:hover {
|
||||
fill: $blue;
|
||||
}
|
||||
&:hover + .slot {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
&.reserved[class] {
|
||||
fill: url(#reserved);
|
||||
}
|
||||
&.reserved:hover[class] {
|
||||
fill: url(#reserved);
|
||||
}
|
||||
&.occupied[class] {
|
||||
fill: url(#occupied);
|
||||
}
|
||||
&.occupied:hover[class] {
|
||||
fill: url(#occupied);
|
||||
}
|
||||
&.blocked[class] {
|
||||
fill: url(#blocked);
|
||||
}
|
||||
&.blocked:hover[class] {
|
||||
fill: url(#blocked);
|
||||
}
|
||||
&.blocked:hover + .add-device {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin: 0;
|
||||
padding: 5px 0px;
|
||||
fill: $gray-400;
|
||||
font-size: $font-size-sm;
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&[data-netbox-color-mode='dark'] {
|
||||
.rack {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
.slot {
|
||||
fill: $gray-700;
|
||||
stroke: $gray-400;
|
||||
&:hover {
|
||||
fill: $gray-600;
|
||||
}
|
||||
& + .add-device {
|
||||
fill: none;
|
||||
}
|
||||
&:hover + .add-device {
|
||||
fill: $blue-300;
|
||||
}
|
||||
}
|
||||
.add-device {
|
||||
&:hover {
|
||||
fill: $blue-300;
|
||||
}
|
||||
&:hover + .slot {
|
||||
fill: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
netbox/project-static/styles/_external.scss
Normal file
4
netbox/project-static/styles/_external.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
// Entry for all 3rd party library imports that do not rely on Bootstrap or NetBox styles.
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
@import '@mdi/font/css/materialdesignicons.min.css';
|
||||
@import 'flatpickr/dist/flatpickr.css';
|
||||
6
netbox/project-static/styles/_light.scss
Normal file
6
netbox/project-static/styles/_light.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
// Entry for netbox-light.css stylesheet.
|
||||
|
||||
@import './theme-light.scss';
|
||||
@import './bootstrap.scss';
|
||||
@import './select.scss';
|
||||
@import './netbox.scss';
|
||||
34
netbox/project-static/styles/bootstrap.scss
vendored
Normal file
34
netbox/project-static/styles/bootstrap.scss
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
// Import the rest of bootstrap.
|
||||
@import 'bootstrap/scss/utilities';
|
||||
@import 'bootstrap/scss/mixins';
|
||||
@import 'bootstrap/scss/root';
|
||||
@import 'bootstrap/scss/reboot';
|
||||
@import 'bootstrap/scss/type';
|
||||
@import 'bootstrap/scss/images';
|
||||
@import 'bootstrap/scss/containers';
|
||||
@import 'bootstrap/scss/grid';
|
||||
@import 'bootstrap/scss/tables';
|
||||
@import 'bootstrap/scss/forms';
|
||||
@import 'bootstrap/scss/buttons';
|
||||
@import 'bootstrap/scss/transitions';
|
||||
@import 'bootstrap/scss/dropdown';
|
||||
@import 'bootstrap/scss/button-group';
|
||||
@import 'bootstrap/scss/nav';
|
||||
@import 'bootstrap/scss/navbar';
|
||||
@import 'bootstrap/scss/card';
|
||||
@import 'bootstrap/scss/accordion';
|
||||
@import 'bootstrap/scss/breadcrumb';
|
||||
@import 'bootstrap/scss/pagination';
|
||||
@import 'bootstrap/scss/badge';
|
||||
@import 'bootstrap/scss/alert';
|
||||
@import 'bootstrap/scss/progress';
|
||||
@import 'bootstrap/scss/list-group';
|
||||
@import 'bootstrap/scss/close';
|
||||
@import 'bootstrap/scss/toasts';
|
||||
@import 'bootstrap/scss/modal';
|
||||
@import 'bootstrap/scss/tooltip';
|
||||
@import 'bootstrap/scss/popover';
|
||||
@import 'bootstrap/scss/carousel';
|
||||
@import 'bootstrap/scss/spinners';
|
||||
@import 'bootstrap/scss/helpers';
|
||||
@import 'bootstrap/scss/utilities/api';
|
||||
72
netbox/project-static/styles/flatpickr-dark.scss
Normal file
72
netbox/project-static/styles/flatpickr-dark.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
// Dark Mode Styles for Flatpickr.
|
||||
|
||||
.flatpickr-calendar {
|
||||
background: $gray-700;
|
||||
color: $body-color;
|
||||
box-shadow: 1px 0 0 $gray-600, -1px 0 0 $gray-600, 0 1px 0 $gray-600, 0 -1px 0 $gray-600,
|
||||
0 3px 13px rgb(0 0 0 / 8%);
|
||||
border-radius: $border-radius;
|
||||
& span.flatpickr-weekday {
|
||||
color: $gray-400;
|
||||
}
|
||||
&.arrowTop:before,
|
||||
&.arrowTop:after {
|
||||
border-bottom-color: $gray-700;
|
||||
}
|
||||
.flatpickr-months {
|
||||
& .flatpickr-month {
|
||||
color: $body-color;
|
||||
fill: $body-color;
|
||||
}
|
||||
& .flatpickr-next-month,
|
||||
& .flatpickr-prev-month {
|
||||
color: $body-color;
|
||||
fill: $body-color;
|
||||
}
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months {
|
||||
background: $gray-700;
|
||||
}
|
||||
}
|
||||
.flatpickr-day {
|
||||
color: $body-color;
|
||||
&.today {
|
||||
border-color: $gray-200;
|
||||
}
|
||||
&.selected,
|
||||
&.startRange,
|
||||
&.endRange,
|
||||
&.selected.inRange,
|
||||
&.startRange.inRange,
|
||||
&.endRange.inRange,
|
||||
&.selected:focus,
|
||||
&.startRange:focus,
|
||||
&.endRange:focus,
|
||||
&.selected:hover,
|
||||
&.startRange:hover,
|
||||
&.endRange:hover,
|
||||
&.selected.prevMonthDay,
|
||||
&.startRange.prevMonthDay,
|
||||
&.endRange.prevMonthDay,
|
||||
&.selected.nextMonthDay,
|
||||
&.startRange.nextMonthDay,
|
||||
&.endRange.nextMonthDay {
|
||||
background: $blue-300;
|
||||
border-color: $blue-300;
|
||||
color: color-contrast($blue-300);
|
||||
}
|
||||
&:hover {
|
||||
border-color: $gray-200;
|
||||
background: $gray-200;
|
||||
color: color-contrast($gray-200);
|
||||
}
|
||||
&.flatpickr-disabled,
|
||||
&.flatpickr-disabled:hover,
|
||||
&.prevMonthDay,
|
||||
&.nextMonthDay,
|
||||
&.notAllowed,
|
||||
&.notAllowed.prevMonthDay,
|
||||
&.notAllowed.nextMonthDay {
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
878
netbox/project-static/styles/netbox.scss
Normal file
878
netbox/project-static/styles/netbox.scss
Normal file
@@ -0,0 +1,878 @@
|
||||
// Netbox-specific Styles and Overrides.
|
||||
|
||||
@use 'sass:map';
|
||||
|
||||
:root {
|
||||
--nbx-logo-color-1: #9cc8f8;
|
||||
--nbx-logo-color-2: #1685fc;
|
||||
--nbx-sidebar-bg: #{$gray-100};
|
||||
--nbx-sidebar-link-color: #{$gray-800};
|
||||
--nbx-sidebar-link-hover-bg: #{$blue-100};
|
||||
--nbx-sidebar-title-color: #{$text-muted};
|
||||
--nbx-breadcrumb-bg: #{$light};
|
||||
--nbx-body-bg: #{$white};
|
||||
--nbx-body-color: #{$gray-800};
|
||||
--nbx-pre-bg: #{$gray-100};
|
||||
--nbx-pre-border-color: #{$gray-600};
|
||||
--nbx-change-added: #{rgba($green, 0.4)};
|
||||
--nbx-change-removed: #{rgba($red, 0.4)};
|
||||
--nbx-cable-node-bg: #{$gray-100};
|
||||
--nbx-cable-node-border-color: #{$gray-200};
|
||||
--nbx-cable-termination-bg: #{$gray-200};
|
||||
--nbx-cable-termination-border-color: #{$gray-300};
|
||||
--nbx-search-filter-border-left-color: #{$gray-300};
|
||||
--nbx-color-mode-toggle-color: #{$primary};
|
||||
--nbx-stat-badge-bg: #{$gray-600};
|
||||
|
||||
body[data-netbox-color-mode='dark'] {
|
||||
--nbx-logo-color-1: #{$white};
|
||||
--nbx-logo-color-2: #{$gray-200};
|
||||
--nbx-sidebar-bg: #{$gray-800};
|
||||
--nbx-sidebar-link-color: #{$gray-200};
|
||||
--nbx-sidebar-link-hover-bg: #{rgba($blue-300, 0.15)};
|
||||
--nbx-sidebar-title-color: #{$gray-300};
|
||||
--nbx-breadcrumb-bg: #{$gray-800};
|
||||
--nbx-body-bg: #{$gray-900};
|
||||
--nbx-body-color: #{$gray-50};
|
||||
--nbx-pre-bg: #{$gray-700};
|
||||
--nbx-pre-border-color: #{$gray-600};
|
||||
--nbx-change-added: #{rgba($green-300, 0.4)};
|
||||
--nbx-change-removed: #{rgba($red-300, 0.4)};
|
||||
--nbx-cable-node-bg: #{$gray-700};
|
||||
--nbx-cable-node-border-color: #{$gray-600};
|
||||
--nbx-cable-termination-bg: #{$gray-800};
|
||||
--nbx-cable-termination-border-color: #{$gray-700};
|
||||
--nbx-search-filter-border-left-color: #{$gray-600};
|
||||
--nbx-color-mode-toggle-color: #{$yellow-300};
|
||||
--nbx-stat-badge-bg: #{$gray-600};
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
transition: background-color, color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.mw-25 {
|
||||
max-width: 25% !important;
|
||||
}
|
||||
|
||||
.mw-33 {
|
||||
max-width: 33.33% !important;
|
||||
}
|
||||
|
||||
.mw-50 {
|
||||
max-width: 50% !important;
|
||||
}
|
||||
|
||||
.mw-66 {
|
||||
max-width: 66.66% !important;
|
||||
}
|
||||
|
||||
.mw-75 {
|
||||
max-width: 75% !important;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: $font-size-xs;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.opacity-25 {
|
||||
opacity: 0.25 !important;
|
||||
}
|
||||
.opacity-50 {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
.opacity-75 {
|
||||
opacity: 0.75 !important;
|
||||
}
|
||||
.opacity-100 {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
// Automatically space out adjacent columns.
|
||||
.col:not(:last-child):not(:only-child) {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
*[data-href] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Use proper contrasting color foreground color for special components.
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge,
|
||||
.toast,
|
||||
.progress-bar {
|
||||
&.bg-#{$color} {
|
||||
color: color-contrast($value);
|
||||
}
|
||||
}
|
||||
// Use proper foreground color in the alert body. Note: this is applied to a, p, & small because
|
||||
// we *don't* want to override the h1-h6 colors for alerts, since those are set to a color
|
||||
// similar to the alert color.
|
||||
.alert.alert-#{$color} {
|
||||
a,
|
||||
p,
|
||||
small {
|
||||
color: color-contrast($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure progress bars (utilization graph) in tables aren't too narrow to display the percentage.
|
||||
table td > .progress {
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.card > .table.table-flush {
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
thead th[scope='col'] {
|
||||
background-color: $table-flush-header-bg;
|
||||
vertical-align: middle;
|
||||
text-transform: uppercase;
|
||||
padding-top: map.get($spacers, 3);
|
||||
padding-bottom: map.get($spacers, 3);
|
||||
border-bottom-color: $card-border-color;
|
||||
border-top: 1px solid $card-border-color;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding-left: map.get($spacers, 4) !important;
|
||||
padding-right: map.get($spacers, 4) !important;
|
||||
}
|
||||
tr[class] {
|
||||
border-color: $card-border-color !important;
|
||||
&:last-of-type {
|
||||
border-bottom-color: transparent !important;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Primarily used for the new release notification, but could be used for other alerts as needed.
|
||||
// Wrap any alerts in .header-alert-container to ensure the layout is consistent.
|
||||
.header-alert-container {
|
||||
// Center-align the alert(s).
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// Apply the same spacing that's applied to the #content div's first child (.px-3).
|
||||
padding: 0 $spacer;
|
||||
|
||||
// By default, alerts inside .header-alert-container should take up the full width.
|
||||
.alert {
|
||||
width: 100%;
|
||||
|
||||
// Adjust the max-width for larger screens so there's not a big ugly blue blob taking up the
|
||||
// entire screen.
|
||||
@include media-breakpoint-up(md) {
|
||||
max-width: 75%;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.profile-button .dropdown-menu {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
display: block !important;
|
||||
right: 0;
|
||||
left: auto;
|
||||
margin-top: 0.5rem;
|
||||
box-shadow: $box-shadow;
|
||||
&:not(.show) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
div#advanced-search-content div.card div.card-body div.col:not(:last-child) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--nbx-body-bg);
|
||||
color: var(--nbx-body-color);
|
||||
g#netbox-logo-1 {
|
||||
fill: #9cc8f8;
|
||||
stroke: #9cc8f8;
|
||||
}
|
||||
|
||||
g#netbox-logo-2 {
|
||||
fill: #1685fc;
|
||||
stroke: #1685fc;
|
||||
}
|
||||
span.badge.stat-badge {
|
||||
margin-left: map.get($spacers, 2);
|
||||
background-color: var(--nbx-stat-badge-bg);
|
||||
}
|
||||
|
||||
&[data-netbox-color-mode='light'] {
|
||||
.btn.btn-primary,
|
||||
.progress-bar.bg-primary,
|
||||
.badge.bg-primary,
|
||||
.nav.nav-pills .nav-item.nav-link.active,
|
||||
.nav.nav-pills .nav-item .nav-link.active,
|
||||
.nav.nav-pills .nav-item .show > .nav-link {
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
&[data-netbox-color-mode='dark'] {
|
||||
& {
|
||||
.btn.btn-primary,
|
||||
.progress-bar.bg-primary,
|
||||
.badge.bg-primary,
|
||||
.nav.nav-pills .nav-item.nav-link.active,
|
||||
.nav.nav-pills .nav-item .nav-link.active,
|
||||
.nav.nav-pills .nav-item .show > .nav-link {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
.card table caption {
|
||||
color: $gray-300;
|
||||
}
|
||||
a:not(.btn) {
|
||||
color: $blue-300;
|
||||
}
|
||||
.breadcrumb .breadcrumb-item > a {
|
||||
color: $blue-300;
|
||||
}
|
||||
.badge {
|
||||
color: $black;
|
||||
}
|
||||
.card,
|
||||
.sidebar {
|
||||
.text-muted {
|
||||
color: $gray-400 !important;
|
||||
}
|
||||
}
|
||||
.text-body[class] {
|
||||
color: var(--nbx-body-color) !important;
|
||||
}
|
||||
g#netbox-logo-1 {
|
||||
fill: $white;
|
||||
stroke: $white;
|
||||
}
|
||||
|
||||
g#netbox-logo-2 {
|
||||
fill: $gray-200;
|
||||
stroke: $gray-200;
|
||||
}
|
||||
}
|
||||
& table,
|
||||
&[data-netbox-color-mode] table {
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&.table > :not(caption) > * > * {
|
||||
padding-left: $table-cell-padding-x-sm !important;
|
||||
padding-right: $table-cell-padding-x-sm !important;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
font-size: $font-size-xs;
|
||||
line-height: $line-height-sm;
|
||||
vertical-align: middle;
|
||||
& input.form-check-input {
|
||||
// Ensure checkboxes aren't too small inside object tables.
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
& .btn-sm {
|
||||
line-height: $line-height-xs;
|
||||
}
|
||||
}
|
||||
&.attr-table {
|
||||
td,
|
||||
th {
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.title-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
div#content-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
padding-bottom: map.get($spacers, 2);
|
||||
}
|
||||
}
|
||||
|
||||
nav.search {
|
||||
background-color: var(--nbx-body-bg);
|
||||
form button.dropdown-toggle {
|
||||
border-color: $input-border-color;
|
||||
font-weight: $input-group-addon-font-weight;
|
||||
line-height: $input-line-height;
|
||||
color: $input-group-addon-color;
|
||||
background-color: $input-group-addon-bg;
|
||||
border: $input-border-width solid $input-group-addon-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
border-left: 1px solid var(--nbx-search-filter-border-left-color);
|
||||
&:focus {
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main.login-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 4rem);
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
& + footer.footer button.color-mode-toggle {
|
||||
color: var(--nbx-color-mode-toggle-color);
|
||||
}
|
||||
}
|
||||
|
||||
footer.login-footer {
|
||||
height: 4rem;
|
||||
margin-top: auto;
|
||||
|
||||
.container-fluid {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: $container-padding-x $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
h1.accordion-item-title,
|
||||
h2.accordion-item-title,
|
||||
h3.accordion-item-title,
|
||||
h4.accordion-item-title,
|
||||
h5.accordion-item-title,
|
||||
h6.accordion-item-title {
|
||||
// padding: 0 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
color: var(--nbx-sidebar-title-color);
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.form-login {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
& input:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-login input[type='text'] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.form-login input[type='password'] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.form-login .form-control {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
li.dropdown-item.dropdown-item-btns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-sticky {
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: calc(100vh - 48px);
|
||||
padding-top: 0.5rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
nav.nav.nav-pills {
|
||||
.nav-item.nav-link {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $font-size-sm;
|
||||
border-radius: $border-radius;
|
||||
&:hover {
|
||||
background-color: $accordion-button-active-bg;
|
||||
color: $accordion-button-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure the content container is full-height, and that the content block is also full height so
|
||||
// that the footer is always at the bottom.
|
||||
div.content-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
div.content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent scrolling of body content when nav menu is open on mobile.
|
||||
.sidebar.collapse.show ~ .content-container > .content {
|
||||
@media (max-width: map.get($grid-breakpoints, 'md')) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100; /* Behind the navbar */
|
||||
border-right: 1px solid $border-color;
|
||||
background-color: var(--nbx-sidebar-bg);
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 100%;
|
||||
max-width: $sidebar-width;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
top: 8.125rem;
|
||||
background-color: var(--nbx-body-bg);
|
||||
}
|
||||
|
||||
div.accordion-item {
|
||||
border: unset;
|
||||
padding: 0 $spacer / 2;
|
||||
|
||||
// When an sidenav section is open, apply a shadow to provide a visual border.
|
||||
&.is-open {
|
||||
box-shadow: inset 0px -25px 20px -25px rgba($black, 0.25);
|
||||
}
|
||||
|
||||
& > a.accordion-button {
|
||||
&:not(.collapsed) {
|
||||
box-shadow: unset;
|
||||
}
|
||||
&.nav-link {
|
||||
border-radius: $border-radius;
|
||||
&:hover {
|
||||
color: $accordion-button-active-color;
|
||||
background-color: $accordion-button-active-bg;
|
||||
}
|
||||
&:focus {
|
||||
border-color: unset;
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
max-height: calc(100vh - 24rem);
|
||||
overflow-y: auto;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: $font-size-sm;
|
||||
border-radius: $border-radius;
|
||||
&:hover {
|
||||
color: $accordion-button-active-color;
|
||||
background-color: $accordion-button-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Ensure navigation accounts for the height of the header on mobile when nav is expanded.
|
||||
&.collapse.show div.position-sticky {
|
||||
@media (max-width: map.get($grid-breakpoints, 'md')) {
|
||||
height: calc(100vh - 16.125rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
div.position-sticky {
|
||||
height: calc(100vh - #{$sidebar-bottom-height});
|
||||
}
|
||||
div.sidebar-bottom {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: sticky;
|
||||
height: $sidebar-bottom-height;
|
||||
background-color: var(--nbx-sidebar-bg);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
background-color: var(--nbx-body-bg);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
}
|
||||
a.sidebar-logo {
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ws-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
#object-type-selector {
|
||||
button.dropdown-item,
|
||||
h6.dropdown-header {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
span.color-label {
|
||||
width: 5rem;
|
||||
height: 1rem;
|
||||
display: block;
|
||||
box-shadow: $box-shadow-sm;
|
||||
border-radius: $border-radius;
|
||||
padding: $badge-padding-y $badge-padding-x;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid var(--nbx-pre-border-color);
|
||||
background-color: var(--nbx-pre-bg);
|
||||
padding: $spacer;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: $box-shadow-sm;
|
||||
.card-header {
|
||||
color: $body-color;
|
||||
border-bottom: none;
|
||||
padding: $card-cap-padding-x;
|
||||
}
|
||||
.card-header + .card-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
.card-body {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.form-floating {
|
||||
position: relative;
|
||||
|
||||
> .input-group > .form-control,
|
||||
> .input-group > .form-select {
|
||||
height: $form-floating-height;
|
||||
padding: $form-floating-padding-y $form-floating-padding-x;
|
||||
}
|
||||
|
||||
> .input-group > label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%; // allow textareas
|
||||
padding: $form-floating-padding-y $form-floating-padding-x;
|
||||
pointer-events: none;
|
||||
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
|
||||
transform-origin: 0 0;
|
||||
@include transition($form-floating-transition);
|
||||
}
|
||||
|
||||
> .input-group > .form-control {
|
||||
&::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:not(:placeholder-shown) {
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
}
|
||||
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
||||
&:-webkit-autofill {
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
}
|
||||
}
|
||||
|
||||
> .input-group > .form-select,
|
||||
> .choices > .choices__inner,
|
||||
> .ss-main span.placeholder, // SlimSelect Single
|
||||
> .ss-main div.ss-values // SlimSelect Multiple
|
||||
{
|
||||
padding-top: $form-floating-input-padding-t;
|
||||
padding-bottom: $form-floating-input-padding-b;
|
||||
}
|
||||
|
||||
> .input-group > .form-control:focus,
|
||||
> .input-group > .form-control:not(:placeholder-shown),
|
||||
> .input-group > .form-select,
|
||||
> .choices,
|
||||
> .ss-main {
|
||||
~ label {
|
||||
opacity: $form-floating-label-opacity;
|
||||
transform: $form-floating-label-transform;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
||||
> .input-group > .form-control:-webkit-autofill {
|
||||
~ label {
|
||||
opacity: $form-floating-label-opacity;
|
||||
transform: $form-floating-label-transform;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea.form-control[rows='10'] {
|
||||
height: 18rem;
|
||||
}
|
||||
|
||||
textarea#id_local_context_data,
|
||||
textarea.markdown,
|
||||
textarea#id_public_key,
|
||||
textarea.form-control[name='csv'],
|
||||
textarea.form-control[name='data'] {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
table tr.vertical-align {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.card:not(:only-of-type) {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.stat-btn {
|
||||
min-width: $spacer * 3;
|
||||
}
|
||||
|
||||
nav.breadcrumb-container {
|
||||
padding: $badge-padding-y $badge-padding-x;
|
||||
font-size: $font-size-sm;
|
||||
width: fit-content;
|
||||
|
||||
ol.breadcrumb {
|
||||
margin-bottom: 0;
|
||||
li.breadcrumb-item > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
li.breadcrumb-item > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.paginator > form > div.input-group {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
div.field-group:not(:first-of-type) {
|
||||
margin-top: $spacer * 3;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
label.required {
|
||||
font-weight: $font-weight-bold;
|
||||
&::after {
|
||||
font-family: 'Material Design Icons';
|
||||
content: '\f06C4';
|
||||
font-weight: normal;
|
||||
font-size: 8px;
|
||||
font-style: normal;
|
||||
margin: 0 0 0 2px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
// Applied to containing element around table bulk-action buttons (bulk-edit, bulk-disconnect
|
||||
// bulk-delete, etc). Each usage of .bulk-buttons needs to have groups of buttons wrapped with
|
||||
// .bulk-button-group so that proper spacing is applied (even if there is only one group).
|
||||
div.bulk-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: $spacer / 2 0;
|
||||
// Each group of buttons needs to be contained separately for alignment purposes. This way, you
|
||||
// can put some buttons in a group that aligns left, and other buttons in a group that aligns
|
||||
// right.
|
||||
& > div.bulk-button-group {
|
||||
display: flex;
|
||||
&:first-of-type:not(:last-of-type) {
|
||||
// If there are multiple bulk button groups and this is the first, the first button in the
|
||||
// group should *not* have left spacing applied, so the button group aligns with the rest
|
||||
// of the page elements.
|
||||
& > *:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&:last-of-type:not(:first-of-type) {
|
||||
// If there are multiple bulk button groups and this is the last, the last button in the
|
||||
// group should *not* have right spacing applied, so the button group aligns with the rest
|
||||
// of the page elements.
|
||||
& > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
// However, the rest of the buttons should have spacing applied in all directions.
|
||||
& > * {
|
||||
margin: $spacer / 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i.bi-plus:before,
|
||||
span.bi-plus:before {
|
||||
font-weight: $font-weight-bold !important;
|
||||
}
|
||||
|
||||
table tbody {
|
||||
@each $color, $value in $theme-colors {
|
||||
tr.#{$color} {
|
||||
background-color: rgba($value, 0.15);
|
||||
border-color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre.change-data {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
& > span {
|
||||
display: block;
|
||||
padding-left: $spacer;
|
||||
padding-right: $spacer;
|
||||
&.added {
|
||||
background-color: var(--nbx-change-added);
|
||||
}
|
||||
&.removed {
|
||||
background-color: var(--nbx-change-removed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre.change-diff {
|
||||
border-color: transparent;
|
||||
&.change-removed {
|
||||
background-color: var(--nbx-change-removed);
|
||||
}
|
||||
&.change-added {
|
||||
background-color: var(--nbx-change-added);
|
||||
}
|
||||
}
|
||||
|
||||
div.card-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($white, 0.75);
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > div.spinner-border {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
div.card > div.card-header > div.table-controls {
|
||||
max-width: 25%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& .form-switch.form-check-inline {
|
||||
flex: 1 0 auto;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
146
netbox/project-static/styles/select.scss
Normal file
146
netbox/project-static/styles/select.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
// SlimSelect Style Overrides.
|
||||
|
||||
$height: $input-height;
|
||||
$white: $white;
|
||||
$font-color: $input-color;
|
||||
$font-placeholder-color: $input-placeholder-color;
|
||||
$font-disabled-color: $form-select-disabled-color;
|
||||
$primary-color: $primary;
|
||||
$border-color: $form-select-border-color;
|
||||
$search-highlight-color: $yellow;
|
||||
$border-radius: $form-select-border-radius;
|
||||
$spacing-l: $input-padding-x;
|
||||
$spacing-m: $input-padding-x;
|
||||
$spacing-s: $input-padding-x;
|
||||
|
||||
:root {
|
||||
--nbx-select-content-bg: #{$form-select-bg};
|
||||
--nbx-select-option-selected-bg: #{$gray-300};
|
||||
--nbx-select-option-hover-bg: #{$blue};
|
||||
--nbx-select-option-hover-color: #{$white};
|
||||
--nbx-select-placeholder-color: #{$gray-500};
|
||||
--nbx-select-value-color: #{$white};
|
||||
& body[data-netbox-color-mode='dark'] {
|
||||
--nbx-select-content-bg: #{$gray-900};
|
||||
--nbx-select-option-selected-bg: #{$gray-500};
|
||||
--nbx-select-option-hover-bg: #{$blue-200};
|
||||
--nbx-select-option-hover-color: #{color-contrast($blue-200)};
|
||||
--nbx-select-placeholder-color: #{$gray-500};
|
||||
--nbx-select-value-color: #{$black};
|
||||
}
|
||||
}
|
||||
|
||||
div.form-floating div.ss-main div.ss-single-selected,
|
||||
div.form-floating div.ss-main div.ss-multi-selected {
|
||||
min-height: $form-floating-height;
|
||||
}
|
||||
|
||||
@import './node_modules/slim-select/src/slim-select/slimselect.scss';
|
||||
|
||||
.ss-main {
|
||||
color: $form-select-color;
|
||||
|
||||
&.is-invalid .ss-single-selected,
|
||||
&.is-invalid .ss-multi-selected {
|
||||
border-color: $form-feedback-icon-invalid-color;
|
||||
}
|
||||
|
||||
&.is-valid .ss-single-selected,
|
||||
&.is-valid .ss-multi-selected {
|
||||
border-color: $form-feedback-icon-valid-color;
|
||||
}
|
||||
|
||||
.ss-single-selected,
|
||||
.ss-multi-selected {
|
||||
&[disabled] {
|
||||
color: $form-select-disabled-color;
|
||||
background-color: $form-select-disabled-bg;
|
||||
border-color: $form-select-disabled-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.ss-multi-selected .ss-values .ss-disabled,
|
||||
div.ss-single-selected span.placeholder .ss-disabled {
|
||||
color: var(--nbx-select-placeholder-color);
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
|
||||
.ss-single-selected {
|
||||
background-color: $form-select-bg;
|
||||
span.ss-arrow {
|
||||
// Inherit the arrow color from the parent (see color selector).
|
||||
span.arrow-down,
|
||||
span.arrow-up {
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
span.placeholder > *,
|
||||
span.placeholder {
|
||||
line-height: $input-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
.ss-multi-selected {
|
||||
align-items: center;
|
||||
padding-left: $input-padding-x;
|
||||
padding-right: $input-padding-x;
|
||||
background-color: $form-select-bg;
|
||||
|
||||
.ss-values {
|
||||
padding-top: $spacer * 2 !important;
|
||||
.ss-disabled {
|
||||
padding: 4px 0px;
|
||||
}
|
||||
.ss-value {
|
||||
border-radius: $badge-border-radius;
|
||||
color: var(--nbx-select-value-color);
|
||||
}
|
||||
}
|
||||
.ss-add {
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ss-content {
|
||||
background-color: var(--nbx-select-content-bg);
|
||||
.ss-list {
|
||||
.ss-option.ss-option-selected {
|
||||
background-color: var(--nbx-select-option-selected-bg);
|
||||
color: $body-color;
|
||||
}
|
||||
.ss-option:hover {
|
||||
background-color: var(--nbx-select-option-hover-bg);
|
||||
color: var(--nbx-select-option-hover-color);
|
||||
}
|
||||
.ss-option:last-child {
|
||||
border-bottom-left-radius: $form-select-border-radius;
|
||||
border-bottom-right-radius: $form-select-border-radius;
|
||||
}
|
||||
.ss-option.ss-disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
.ss-option.ss-disabled:hover {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
border-bottom-left-radius: $form-select-border-radius;
|
||||
border-bottom-right-radius: $form-select-border-radius;
|
||||
.ss-search {
|
||||
input[type='search'] {
|
||||
background-color: $form-select-bg;
|
||||
color: $input-color;
|
||||
border: $form-select-border-width solid $form-select-border-color;
|
||||
&:focus {
|
||||
border-color: $form-select-focus-border-color;
|
||||
outline: 0;
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $form-select-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
248
netbox/project-static/styles/theme-base.scss
Normal file
248
netbox/project-static/styles/theme-base.scss
Normal file
@@ -0,0 +1,248 @@
|
||||
// Base NetBox Theme Overrides and Settings - color mode agnostic.
|
||||
|
||||
@import 'bootstrap/scss/functions';
|
||||
|
||||
$alt: #13293d;
|
||||
$darker: #010101;
|
||||
|
||||
$gray: #6b7280;
|
||||
$red: #ef4444;
|
||||
$yellow: #f59e0b;
|
||||
$green: #10b981;
|
||||
$blue: #3b82f6;
|
||||
$purple: #8b5cf6;
|
||||
$pink: #ec4899;
|
||||
$cyan: #06b6d4;
|
||||
|
||||
$gray-50: #f9fafb;
|
||||
$gray-100: #f3f4f6;
|
||||
$gray-200: #e5e7eb;
|
||||
$gray-300: #d1d5db;
|
||||
$gray-400: #9ca3af;
|
||||
$gray-500: #6b7280;
|
||||
$gray-600: #4b5563;
|
||||
$gray-700: #374151;
|
||||
$gray-800: #1f2937;
|
||||
$gray-900: #111827;
|
||||
|
||||
$red-50: #fef2f2;
|
||||
$red-100: #fee2e2;
|
||||
$red-200: #fecaca;
|
||||
$red-300: #fca5a5;
|
||||
$red-400: #f87171;
|
||||
$red-500: #ef4444;
|
||||
$red-600: #dc2626;
|
||||
$red-700: #b91c1c;
|
||||
$red-800: #991b1b;
|
||||
$red-900: #7f1d1d;
|
||||
|
||||
$yellow-50: #fffbeb;
|
||||
$yellow-100: #fef3c7;
|
||||
$yellow-200: #fde68a;
|
||||
$yellow-300: #fcd34d;
|
||||
$yellow-400: #fbbf24;
|
||||
$yellow-500: #f59e0b;
|
||||
$yellow-600: #d97706;
|
||||
$yellow-700: #b45309;
|
||||
$yellow-800: #92400e;
|
||||
$yellow-900: #78350f;
|
||||
|
||||
$green-50: #ecfdf5;
|
||||
$green-100: #d1fae5;
|
||||
$green-200: #a7f3d0;
|
||||
$green-300: #6ee7b7;
|
||||
$green-400: #34d399;
|
||||
$green-500: #10b981;
|
||||
$green-600: #059669;
|
||||
$green-700: #047857;
|
||||
$green-800: #065f46;
|
||||
$green-900: #064e3b;
|
||||
|
||||
$blue-50: #eff6ff;
|
||||
$blue-100: #dbeafe;
|
||||
$blue-200: #bfdbfe;
|
||||
$blue-300: #93c5fd;
|
||||
$blue-400: #60a5fa;
|
||||
$blue-500: #3b82f6;
|
||||
$blue-600: #2563eb;
|
||||
$blue-700: #1d4ed8;
|
||||
$blue-800: #1e40af;
|
||||
$blue-900: #1e3a8a;
|
||||
|
||||
$cyan-50: #ecfeff;
|
||||
$cyan-100: #cffafe;
|
||||
$cyan-200: #a5f3fc;
|
||||
$cyan-300: #67e8f9;
|
||||
$cyan-400: #22d3ee;
|
||||
$cyan-500: #06b6d4;
|
||||
$cyan-600: #0891b2;
|
||||
$cyan-700: #0e7490;
|
||||
$cyan-800: #155e75;
|
||||
$cyan-900: #164e63;
|
||||
|
||||
$indigo-50: #eef2ff;
|
||||
$indigo-100: #e0e7ff;
|
||||
$indigo-200: #c7d2fe;
|
||||
$indigo-300: #a5b4fc;
|
||||
$indigo-400: #818cf8;
|
||||
$indigo-500: #6366f1;
|
||||
$indigo-600: #4f46e5;
|
||||
$indigo-700: #4338ca;
|
||||
$indigo-800: #3730a3;
|
||||
$indigo-900: #312e81;
|
||||
|
||||
$purple-50: #f5f3ff;
|
||||
$purple-100: #ede9fe;
|
||||
$purple-200: #ddd6fe;
|
||||
$purple-300: #c4b5fd;
|
||||
$purple-400: #a78bfa;
|
||||
$purple-500: #8b5cf6;
|
||||
$purple-600: #7c3aed;
|
||||
$purple-700: #6d28d9;
|
||||
$purple-800: #5b21b6;
|
||||
$purple-900: #4c1d95;
|
||||
|
||||
$pink-50: #fdf2f8;
|
||||
$pink-100: #fce7f3;
|
||||
$pink-200: #fbcfe8;
|
||||
$pink-300: #f9a8d4;
|
||||
$pink-400: #f472b6;
|
||||
$pink-500: #ec4899;
|
||||
$pink-600: #db2777;
|
||||
$pink-700: #be185d;
|
||||
$pink-800: #9d174d;
|
||||
$pink-900: #831843;
|
||||
|
||||
$card-cap-bg: 'unset';
|
||||
|
||||
$border-radius-md: 0.375rem;
|
||||
$border-radius-lg: 0.5rem;
|
||||
$border-radius-xl: 0.75rem;
|
||||
$border-radius-2xl: 1.5rem;
|
||||
|
||||
$border-radius: $border-radius-lg;
|
||||
|
||||
$border-radius-sm: $border-radius;
|
||||
$border-radius-lg: $border-radius-xl;
|
||||
|
||||
$badge-border-radius: $border-radius-md;
|
||||
$progress-border-radius: $border-radius-md;
|
||||
|
||||
$font-weight-lighter: 200;
|
||||
$font-weight-medium: 600;
|
||||
$font-weight-bolder: 800;
|
||||
|
||||
$font-size-xs: 0.9rem;
|
||||
|
||||
$line-height-base: 1.5;
|
||||
$line-height-xs: 1;
|
||||
$line-height-sm: 1.25;
|
||||
$line-height-lg: 1.75;
|
||||
|
||||
$theme-color-addons: (
|
||||
'alt': $alt,
|
||||
'gray': $gray-400,
|
||||
'darker': $darker,
|
||||
'gray-50': $gray-50,
|
||||
'gray-100': $gray-100,
|
||||
'gray-200': $gray-200,
|
||||
'gray-300': $gray-300,
|
||||
'gray-400': $gray-400,
|
||||
'gray-500': $gray-500,
|
||||
'gray-600': $gray-600,
|
||||
'gray-700': $gray-700,
|
||||
'gray-800': $gray-800,
|
||||
'gray-900': $gray-900,
|
||||
'red-50': $red-50,
|
||||
'red-100': $red-100,
|
||||
'red-200': $red-200,
|
||||
'red-300': $red-300,
|
||||
'red-400': $red-400,
|
||||
'red-500': $red-500,
|
||||
'red-600': $red-600,
|
||||
'red-700': $red-700,
|
||||
'red-800': $red-800,
|
||||
'red-900': $red-900,
|
||||
'yellow-50': $yellow-50,
|
||||
'yellow-100': $yellow-100,
|
||||
'yellow-200': $yellow-200,
|
||||
'yellow-300': $yellow-300,
|
||||
'yellow-400': $yellow-400,
|
||||
'yellow-500': $yellow-500,
|
||||
'yellow-600': $yellow-600,
|
||||
'yellow-700': $yellow-700,
|
||||
'yellow-800': $yellow-800,
|
||||
'yellow-900': $yellow-900,
|
||||
'green-50': $green-50,
|
||||
'green-100': $green-100,
|
||||
'green-200': $green-200,
|
||||
'green-300': $green-300,
|
||||
'green-400': $green-400,
|
||||
'green-500': $green-500,
|
||||
'green-600': $green-600,
|
||||
'green-700': $green-700,
|
||||
'green-800': $green-800,
|
||||
'green-900': $green-900,
|
||||
'blue-50': $blue-50,
|
||||
'blue-100': $blue-100,
|
||||
'blue-200': $blue-200,
|
||||
'blue-300': $blue-300,
|
||||
'blue-400': $blue-400,
|
||||
'blue-500': $blue-500,
|
||||
'blue-600': $blue-600,
|
||||
'blue-700': $blue-700,
|
||||
'blue-800': $blue-800,
|
||||
'blue-900': $blue-900,
|
||||
'cyan-50': $cyan-50,
|
||||
'cyan-100': $cyan-100,
|
||||
'cyan-200': $cyan-200,
|
||||
'cyan-300': $cyan-300,
|
||||
'cyan-400': $cyan-400,
|
||||
'cyan-500': $cyan-500,
|
||||
'cyan-600': $cyan-600,
|
||||
'cyan-700': $cyan-700,
|
||||
'cyan-800': $cyan-800,
|
||||
'cyan-900': $cyan-900,
|
||||
'indigo-50': $indigo-50,
|
||||
'indigo-100': $indigo-100,
|
||||
'indigo-200': $indigo-200,
|
||||
'indigo-300': $indigo-300,
|
||||
'indigo-400': $indigo-400,
|
||||
'indigo-500': $indigo-500,
|
||||
'indigo-600': $indigo-600,
|
||||
'indigo-700': $indigo-700,
|
||||
'indigo-800': $indigo-800,
|
||||
'indigo-900': $indigo-900,
|
||||
'purple-50': $purple-50,
|
||||
'purple-100': $purple-100,
|
||||
'purple-200': $purple-200,
|
||||
'purple-300': $purple-300,
|
||||
'purple-400': $purple-400,
|
||||
'purple-500': $purple-500,
|
||||
'purple-600': $purple-600,
|
||||
'purple-700': $purple-700,
|
||||
'purple-800': $purple-800,
|
||||
'purple-900': $purple-900,
|
||||
'pink-50': $pink-50,
|
||||
'pink-100': $pink-100,
|
||||
'pink-200': $pink-200,
|
||||
'pink-300': $pink-300,
|
||||
'pink-400': $pink-400,
|
||||
'pink-500': $pink-500,
|
||||
'pink-600': $pink-600,
|
||||
'pink-700': $pink-700,
|
||||
'pink-800': $pink-800,
|
||||
'pink-900': $pink-900,
|
||||
);
|
||||
|
||||
$font-family-sans-serif: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
$font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||
'Courier New', monospace;
|
||||
|
||||
$accordion-padding-y: 0.8125rem;
|
||||
$accordion-padding-x: 0.8125rem;
|
||||
|
||||
$sidebar-width: 280px;
|
||||
$sidebar-bottom-height: 4rem;
|
||||
280
netbox/project-static/styles/theme-dark.scss
Normal file
280
netbox/project-static/styles/theme-dark.scss
Normal file
@@ -0,0 +1,280 @@
|
||||
// Dark Mode Theme Variables and Overrides.
|
||||
|
||||
@use 'sass:map';
|
||||
@import './theme-base.scss';
|
||||
|
||||
$primary: $blue-300;
|
||||
$secondary: $gray-400;
|
||||
$success: $green-300;
|
||||
$info: $cyan-300;
|
||||
$warning: $yellow-300;
|
||||
$danger: $red-300;
|
||||
$light: $gray-300;
|
||||
$dark: $gray-400;
|
||||
|
||||
$theme-colors: (
|
||||
'primary': $primary,
|
||||
'secondary': $secondary,
|
||||
'success': $success,
|
||||
'info': $info,
|
||||
'warning': $warning,
|
||||
'danger': $danger,
|
||||
'light': $light,
|
||||
'dark': $dark,
|
||||
);
|
||||
|
||||
$theme-color-addons-dark: (
|
||||
'alt': #13293d,
|
||||
'darker': #010101,
|
||||
);
|
||||
|
||||
$theme-colors: map-merge($theme-colors, $theme-color-addons);
|
||||
$theme-color-addons: map-merge($theme-color-addons, $theme-color-addons-dark);
|
||||
|
||||
// On import, any variables marked `!default` will be overridden by the above.
|
||||
@import 'bootstrap/scss/variables';
|
||||
|
||||
// Customize the light and dark text colors for use in our color contrast function.
|
||||
|
||||
// Gradient
|
||||
$gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));
|
||||
|
||||
// Body
|
||||
$body-bg: $gray-900;
|
||||
$body-color: $white;
|
||||
$body-text-align: null;
|
||||
$border-color: $gray-700;
|
||||
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
|
||||
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
|
||||
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);
|
||||
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
|
||||
$text-muted: $gray-400;
|
||||
$blockquote-footer-color: $gray-600;
|
||||
$mark-bg: #fcf8e3;
|
||||
$link-color: $primary;
|
||||
$link-hover-color: $blue-200;
|
||||
|
||||
// Tables
|
||||
$table-color: $gray-100;
|
||||
$table-border-color: $border-color;
|
||||
$table-striped-color: $table-color;
|
||||
$table-striped-bg: rgba($white, $table-striped-bg-factor);
|
||||
$table-active-color: $table-color;
|
||||
$table-active-bg: rgba($white, $table-active-bg-factor);
|
||||
$table-hover-color: $table-color;
|
||||
$table-hover-bg: rgba($white, $table-hover-bg-factor);
|
||||
$table-flush-header-bg: $gray-700;
|
||||
|
||||
// Buttons
|
||||
$btn-box-shadow: inset 0 1px 0 rgba($black, 0.15), 0 1px 1px rgba($white, 0.075);
|
||||
$btn-active-box-shadow: inset 0 3px 5px rgba($white, 0.125);
|
||||
$btn-link-disabled-color: $gray-300;
|
||||
|
||||
// Forms
|
||||
$form-text-color: $text-muted;
|
||||
$input-bg: $gray-800;
|
||||
$input-disabled-bg: $gray-700;
|
||||
$input-color: $gray-100;
|
||||
$input-border-color: $gray-700;
|
||||
$input-focus-bg: $input-bg;
|
||||
$input-focus-border-color: tint-color($component-active-bg, 10%);
|
||||
$input-focus-color: $input-color;
|
||||
$input-placeholder-color: $gray-300;
|
||||
$input-plaintext-color: $body-color;
|
||||
|
||||
$form-check-input-active-filter: brightness(90%);
|
||||
$form-check-input-bg: $input-bg;
|
||||
$form-check-input-border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
$form-check-input-checked-color: $component-active-color;
|
||||
$form-check-input-checked-bg-color: $component-active-bg;
|
||||
$form-check-input-checked-border-color: $form-check-input-checked-bg-color;
|
||||
$form-check-input-indeterminate-color: $component-active-color;
|
||||
$form-check-input-indeterminate-bg-color: $component-active-bg;
|
||||
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;
|
||||
|
||||
$form-switch-color: rgba(255, 255, 255, 0.25);
|
||||
$form-switch-focus-color: $input-focus-border-color;
|
||||
$form-switch-checked-color: $component-active-color;
|
||||
|
||||
$input-group-addon-color: $input-color;
|
||||
$input-group-addon-bg: $gray-700;
|
||||
$input-group-addon-border-color: $input-border-color;
|
||||
|
||||
$form-select-color: $input-color;
|
||||
$form-select-disabled-color: $gray-400;
|
||||
$form-select-bg: $input-bg;
|
||||
$form-select-disabled-bg: $input-disabled-bg;
|
||||
$form-select-indicator-color: $form-select-color;
|
||||
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
|
||||
|
||||
$form-select-border-color: $input-border-color;
|
||||
$form-range-track-bg: $gray-300;
|
||||
|
||||
$form-range-thumb-bg: $component-active-bg;
|
||||
$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1);
|
||||
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow;
|
||||
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
|
||||
$form-range-thumb-disabled-bg: $gray-500;
|
||||
|
||||
$form-file-button-color: $input-color;
|
||||
$form-file-button-bg: $input-group-addon-bg;
|
||||
$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%);
|
||||
|
||||
// Navs
|
||||
$nav-link-color: $body-color;
|
||||
$nav-link-hover-color: null;
|
||||
$nav-link-disabled-color: $gray-800;
|
||||
$nav-tabs-border-color: $border-color;
|
||||
$nav-tabs-link-hover-border-color: rgba($gray-800, 0.5) rgba($gray-800, 0.5) $nav-tabs-border-color;
|
||||
$nav-tabs-link-active-color: $gray-50;
|
||||
$nav-tabs-link-active-bg: $body-bg;
|
||||
$nav-tabs-link-active-border-color: $gray-800 $gray-800 $nav-tabs-link-active-bg;
|
||||
$nav-pills-link-active-color: $component-active-color;
|
||||
$nav-pills-link-active-bg: $component-active-bg;
|
||||
|
||||
$navbar-light-color: $gray-500;
|
||||
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
|
||||
$navbar-light-toggler-border-color: $gray-700;
|
||||
|
||||
// Dropdowns
|
||||
$dropdown-color: $body-color;
|
||||
$dropdown-bg: $gray-900;
|
||||
$dropdown-border-color: rgba($white, 0.15);
|
||||
$dropdown-link-color: $gray-100;
|
||||
$dropdown-link-hover-color: shade-color($gray-50, 10%);
|
||||
$dropdown-link-hover-bg: $gray-500;
|
||||
$dropdown-link-disabled-color: $gray-800;
|
||||
$dropdown-header-color: $gray-300;
|
||||
|
||||
// Pagination
|
||||
$pagination-color: $link-color;
|
||||
$pagination-bg: $gray-800;
|
||||
$pagination-border-color: $gray-600;
|
||||
$pagination-focus-color: $link-hover-color;
|
||||
$pagination-focus-bg: $gray-400;
|
||||
$pagination-hover-color: $link-hover-color;
|
||||
$pagination-hover-bg: $gray-400;
|
||||
$pagination-hover-border-color: $gray-500;
|
||||
$pagination-active-color: $component-active-color;
|
||||
$pagination-active-bg: $component-active-bg;
|
||||
$pagination-active-border-color: $pagination-active-bg;
|
||||
$pagination-disabled-color: $gray-600;
|
||||
$pagination-disabled-bg: $gray-800;
|
||||
$pagination-disabled-border-color: $gray-600;
|
||||
|
||||
// Cards
|
||||
$card-border-color: rgba($white, 0.125);
|
||||
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
|
||||
|
||||
$card-cap-color: null;
|
||||
$card-height: null;
|
||||
$card-color: null;
|
||||
$card-bg: $gray-800;
|
||||
|
||||
// Accordion
|
||||
$accordion-color: $body-color;
|
||||
$accordion-bg: transparent;
|
||||
$accordion-border-color: $border-color;
|
||||
$accordion-button-color: $accordion-color;
|
||||
$accordion-button-bg: $accordion-bg;
|
||||
$accordion-body-active-bg: rgba($blue-300, 0.1);
|
||||
$accordion-button-active-bg: rgba($blue-300, 0.15);
|
||||
$accordion-button-active-color: $gray-300;
|
||||
$accordion-button-focus-border-color: $input-focus-border-color;
|
||||
$accordion-icon-color: $accordion-color;
|
||||
$accordion-icon-active-color: $accordion-button-active-color;
|
||||
|
||||
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
|
||||
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
|
||||
|
||||
// Tooltips
|
||||
$tooltip-color: $body-color;
|
||||
$tooltip-bg: $gray-700;
|
||||
$tooltip-arrow-color: $tooltip-bg;
|
||||
$form-feedback-tooltip-opacity: $tooltip-opacity;
|
||||
|
||||
// Popovers
|
||||
$popover-bg: $gray-700;
|
||||
$popover-border-color: rgba($white, 0.2);
|
||||
$popover-header-bg: shade-color($popover-bg, 6%);
|
||||
$popover-header-color: $headings-color;
|
||||
$popover-body-color: $body-color;
|
||||
$popover-arrow-color: $popover-bg;
|
||||
$popover-arrow-outer-color: fade-in($popover-border-color, 0.05);
|
||||
|
||||
// Toasts
|
||||
$toast-color: null;
|
||||
$toast-background-color: rgba($white, 0.85);
|
||||
$toast-border-color: rgba(0, 0, 0, 0.1);
|
||||
$toast-header-color: $gray-600;
|
||||
$toast-header-background-color: rgba($white, 0.85);
|
||||
$toast-header-border-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
// Badges
|
||||
$badge-color: $white;
|
||||
|
||||
// Modals
|
||||
$modal-content-color: null;
|
||||
$modal-content-bg: $gray-800;
|
||||
$modal-content-border-color: rgba($white, 0.2);
|
||||
$modal-backdrop-bg: $black;
|
||||
$modal-header-border-color: $border-color;
|
||||
$modal-footer-border-color: $modal-header-border-color;
|
||||
|
||||
// Progress bars
|
||||
$progress-bg: $gray-600;
|
||||
$progress-bar-color: $white;
|
||||
$progress-bar-bg: $primary;
|
||||
|
||||
// List group
|
||||
$list-group-color: null;
|
||||
$list-group-bg: $card-bg;
|
||||
$list-group-border-color: rgba($white, 0.125);
|
||||
$list-group-hover-bg: rgba($gray-50, 0.15);
|
||||
$list-group-active-color: $component-active-color;
|
||||
$list-group-active-bg: $component-active-bg;
|
||||
$list-group-active-border-color: $list-group-active-bg;
|
||||
$list-group-disabled-bg: $list-group-bg;
|
||||
$list-group-action-color: $gray-300;
|
||||
$list-group-action-hover-color: $body-color;
|
||||
$list-group-action-active-color: $body-color;
|
||||
$list-group-action-active-bg: rgba($gray-300, 0.125);
|
||||
|
||||
// Image thumbnails
|
||||
$thumbnail-bg: $body-bg;
|
||||
$thumbnail-border-color: $gray-300;
|
||||
|
||||
// Figures
|
||||
$figure-caption-color: $gray-600;
|
||||
|
||||
// Breadcrumbs
|
||||
$breadcrumb-divider-color: $gray-100;
|
||||
$breadcrumb-active-color: $body-color;
|
||||
$breadcrumb-divider-flipped: $breadcrumb-divider;
|
||||
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/%3E%3C/svg%3E");
|
||||
|
||||
// Carousel
|
||||
$carousel-control-color: $white;
|
||||
$carousel-indicator-active-bg: $white;
|
||||
$carousel-caption-color: $white;
|
||||
$carousel-dark-indicator-active-bg: $black;
|
||||
$carousel-dark-caption-color: $black;
|
||||
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
|
||||
|
||||
// Close
|
||||
$btn-close-color: $white;
|
||||
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
|
||||
|
||||
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.bg-#{$color} button.btn-close {
|
||||
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{color-contrast($value)}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
$code-color: $gray-200;
|
||||
$kbd-color: $white;
|
||||
$kbd-bg: $gray-300;
|
||||
$pre-color: null;
|
||||
32
netbox/project-static/styles/theme-light.scss
Normal file
32
netbox/project-static/styles/theme-light.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
// Light Mode Theme Variables and Overrides.
|
||||
|
||||
@import './theme-base.scss';
|
||||
|
||||
$input-border-color: $gray-200;
|
||||
|
||||
// On import, any variables marked `!default` will be overridden by the above.
|
||||
@import 'bootstrap/scss/variables';
|
||||
|
||||
// Merge/modify bootstrap variables.
|
||||
|
||||
$theme-colors: map-merge($theme-colors, $theme-color-addons);
|
||||
|
||||
$light: $gray-100;
|
||||
|
||||
$card-cap-color: $gray-800;
|
||||
|
||||
$accordion-bg: transparent;
|
||||
$accordion-button-bg: $accordion-bg;
|
||||
$accordion-body-active-bg: $gray-50;
|
||||
$accordion-border-color: $border-color;
|
||||
$accordion-button-active-bg: $blue-100;
|
||||
$accordion-button-active-color: $gray-800;
|
||||
|
||||
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
|
||||
|
||||
$code-color: $gray-900;
|
||||
|
||||
$list-group-color: $gray-700;
|
||||
$list-group-disabled-color: $gray-500;
|
||||
|
||||
$table-flush-header-bg: $gray-100;
|
||||
Reference in New Issue
Block a user