diff --git a/netbox/project-static/bundle.js b/netbox/project-static/bundle.js index 3abdb0e48..8b645a9b8 100644 --- a/netbox/project-static/bundle.js +++ b/netbox/project-static/bundle.js @@ -79,6 +79,7 @@ async function bundleStyles() { 'netbox-external': 'styles/_external.scss', 'netbox-light': 'styles/_light.scss', 'netbox-dark': 'styles/_dark.scss', + 'netbox-print': 'styles/_print.scss', rack_elevation: 'styles/_rack_elevation.scss', cable_trace: 'styles/_cable_trace.scss', graphiql: 'netbox-graphiql/graphiql.scss', diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 325324766..749b9bd48 100644 Binary files a/netbox/project-static/dist/netbox-dark.css and b/netbox/project-static/dist/netbox-dark.css differ diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index 2be950000..947e9932d 100644 Binary files a/netbox/project-static/dist/netbox-light.css and b/netbox/project-static/dist/netbox-light.css differ diff --git a/netbox/project-static/dist/netbox-print.css b/netbox/project-static/dist/netbox-print.css new file mode 100644 index 000000000..793edcd2c Binary files /dev/null and b/netbox/project-static/dist/netbox-print.css differ diff --git a/netbox/project-static/styles/_print.scss b/netbox/project-static/styles/_print.scss new file mode 100644 index 000000000..735f591d8 --- /dev/null +++ b/netbox/project-static/styles/_print.scss @@ -0,0 +1,18 @@ +// Entry for netbox-print.css. Force light-mode theming when printing. + +@media print { + // Force black and white background/foreground colors when printing. + :root { + --nbx-body-bg: #fff !important; + --nbx-body-color: #000 !important; + } + + html, + html[data-netbox-color-mode='dark'], + html[data-netbox-color-mode='light'] { + @import './theme-light'; + @import './bootstrap'; + @import './select'; + @import './netbox'; + } +} diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss index d100e9111..a2a108e7e 100644 --- a/netbox/project-static/styles/netbox.scss +++ b/netbox/project-static/styles/netbox.scss @@ -274,6 +274,12 @@ div.title-container { .controls { margin-bottom: map.get($spacers, 2); + @media print { + // Never print controls. Use this over the .noprint utility so plugin authors don't need to + // remember to add the class. + display: none !important; + } + // Each group of buttons. .control-group { display: flex; @@ -400,6 +406,15 @@ main.layout { max-height: 100vh; overflow-x: auto; overflow-y: hidden; + + // Override styles when printing. Fixes issue where only the first page is visible when printing. + @media print { + position: static !important; + display: block !important; + height: 100%; + overflow-x: visible !important; + overflow-y: visible !important; + } } main.login-container { @@ -521,6 +536,12 @@ div.content-container { div.content { flex: 1; } + + // Make the content full-width when printing. + @media print { + width: 100% !important; + margin-left: 0 !important; + } } // Prevent scrolling of body content when nav menu is open on mobile. @@ -556,7 +577,7 @@ span.color-label { .card-header { padding: $card-cap-padding-x; - color: $body-color; + color: var(--nbx-body-color); border-bottom: none; } @@ -576,6 +597,11 @@ span.color-label { border-top: 1px solid $card-border-color; opacity: $hr-opacity; } + + // Remove shadow when printing. + @media print { + box-shadow: unset !important; + } } .form-floating { @@ -864,6 +890,29 @@ div.card > div.card-header > div.table-controls { padding: $spacer; background-color: $tab-content-bg; border-bottom: 1px solid $nav-tabs-border-color; + + // Remove background and border when printing. + @media print { + background-color: var(--nbx-body-bg) !important; + border-bottom: none !important; + } +} + +// Override masonry-layout styles when printing. +.masonry { + @media print { + position: static !important; + display: block !important; + height: unset !important; + } + .masonry-item { + @media print { + position: static !important; + top: unset !important; + left: unset !important; + display: block !important; + } + } } // Object hierarchy indicators. diff --git a/netbox/project-static/styles/utilities.scss b/netbox/project-static/styles/utilities.scss index 3330b4430..cd8ccc46b 100644 --- a/netbox/project-static/styles/utilities.scss +++ b/netbox/project-static/styles/utilities.scss @@ -23,3 +23,22 @@ table td { vertical-align: middle; } } + +// Hide element when printing. +.noprint { + @media print { + display: none !important; + visibility: hidden !important; + } +} + +// Only show element when printing, otherwise hide. +.printonly { + display: none !important; + visibility: hidden !important; + + @media print { + display: block !important; + visibility: visible !important; + } +} diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html index edc18e0af..0a1f846fd 100644 --- a/netbox/templates/base/base.html +++ b/netbox/templates/base/base.html @@ -68,6 +68,12 @@ href="{% static 'netbox-dark.css'%}" onerror="window.location='{% url 'media_failure' %}?filename=netbox-dark.css'" /> + {# Javascript #} diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index 6a1f9f3dc..fbadf595d 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -15,8 +15,13 @@ {# Body #}
+ {# Netbox Logo, only visible when printing #} +
+ NetBox logo +
+ {# Top bar #} -