mirror of
https://github.com/ntop/ntopng.git
synced 2026-05-01 00:19:33 +00:00
1243 lines
23 KiB
CSS
1243 lines
23 KiB
CSS
:root {
|
|
--sidebar-width: 4.5rem;
|
|
}
|
|
|
|
/*
|
|
NOTE NOTE NOTE NOTE NOTE NOTE NOTE
|
|
|
|
DO NOT TRY TO OVERRIDE BOOTSTRAP HERE
|
|
IF YOU NEED TO EDIT STYLES, CREATE NEW CSS
|
|
ONE FOR EACH FUNCTION YOU NEED TO OVERRIDE
|
|
AS OTHERWISE IT WOULD BE A PAIN TO UPDATE
|
|
BOOTSTRAP AND UNDERSTAND WHY IT DOESN'T WORK
|
|
|
|
NOTE NOTE NOTE NOTE NOTE NOTE NOTE
|
|
*/
|
|
|
|
/* // Media queries breakpoints */
|
|
/* // -------------------------------------------------- */
|
|
|
|
/* // Extra small screen / phone */
|
|
/* @screen-xsmall: 480px; */
|
|
/* @screen-phone: @screen-xsmall; */
|
|
|
|
/* // Small screen / tablet */
|
|
/* @screen-small: 768px; */
|
|
/* @screen-tablet: @screen-small; */
|
|
|
|
/* // Medium screen / desktop */
|
|
/* @screen-medium: 992px; */
|
|
/* @screen-desktop: @screen-medium; */
|
|
|
|
/* // Large screen / wide desktop */
|
|
/* @screen-large: 1200px; */
|
|
/* @screen-large-desktop: @screen-large; */
|
|
|
|
/* // So media queries don't overlap when required, provide a maximum */
|
|
/* @screen-small-max: (@screen-medium - 1); */
|
|
/* @screen-tablet-max: (@screen-desktop - 1); */
|
|
/* @screen-desktop-max: (@screen-large-desktop - 1); */
|
|
|
|
/* // Grid system */
|
|
/* // -------------------------------------------------- */
|
|
|
|
/* // Number of columns in the grid system */
|
|
/* @grid-columns: 12; */
|
|
/* // Padding, to be divided by two and applied to the left and right of all columns */
|
|
/* @grid-gutter-width: 30px; */
|
|
/* // Point at which the navbar stops collapsing */
|
|
/* @grid-float-breakpoint: @screen-tablet; */
|
|
|
|
/* body { */
|
|
/* padding-top: 0px; */
|
|
/* padding-bottom: 20px; */
|
|
/* } */
|
|
|
|
/* .logo-brand { */
|
|
/* width: 103px; */
|
|
/* height: 50px; */
|
|
/* } */
|
|
|
|
/* /\* Custom container *\/ */
|
|
/* .container-narrow { */
|
|
/* margin-left: 20px; */
|
|
/* margin-right: 20px; */
|
|
/* /\* max-width: 1024px; *\/ */
|
|
/* } */
|
|
|
|
/* /\* Smaller table row padding *\/ */
|
|
/* .table th, .table td { */
|
|
/* padding: 6px; */
|
|
/* } */
|
|
|
|
/* /\* Smaller and smaller table row padding *\/ */
|
|
/* .table-smaller tbody tr td { */
|
|
/* padding: 2px; */
|
|
/* } */
|
|
|
|
/* /\* useful in dropdowns *\/ */
|
|
/* .scrollable-menu { */
|
|
/* height: auto; */
|
|
/* max-height: 30em; */
|
|
/* overflow-x: hidden; */
|
|
/* } */
|
|
|
|
/* /\* Custom container *\/ */
|
|
/* .progress { */
|
|
/* margin-bottom: 0px; */
|
|
/* } */
|
|
/* .container-narrow > hr { */
|
|
/* margin: 30px 0; */
|
|
/* } */
|
|
|
|
/* /\* Main marketing message and sign up button *\/ */
|
|
/* .jumbotron { */
|
|
/* margin: 20px 0; */
|
|
/* text-align: center; */
|
|
/* } */
|
|
/* .jumbotron h1 { */
|
|
/* font-size: 22px; */
|
|
/* line-height: 1; */
|
|
/* } */
|
|
/* .jumbotron .btn { */
|
|
/* font-size: 21px; */
|
|
/* padding: 14px 24px; */
|
|
/* } */
|
|
|
|
/* /\* Supporting marketing content *\/ */
|
|
/* .marketing { */
|
|
/* margin: 20px 0; */
|
|
/* } */
|
|
/* .marketing p + h4 { */
|
|
/* margin-top: 28px; */
|
|
/* } */
|
|
|
|
/* .table th.text-right, */
|
|
/* .table td.text-right { */
|
|
/* text-align: right; */
|
|
/* } */
|
|
|
|
/* .navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;} */
|
|
/* .navbar {min-height:42px !important} */
|
|
/* .nav-pills {min-height:42px !important} */
|
|
|
|
/* /\* Fix for Google Maps and Twitter Bootstrap */
|
|
/* https://github.com/twbs/bootstrap/issues/1552 */
|
|
/* *\/ */
|
|
/* img { */
|
|
/* max-width: none; */
|
|
/* } */
|
|
|
|
/* /\*Custom tooltip dimension*\/ */
|
|
/* .tooltip-inner { */
|
|
/* max-width: 350px; */
|
|
/* } */
|
|
|
|
/* /\*Flow dropdown resize*\/ */
|
|
/* #flow_dropdown { */
|
|
/* min-width: 110px; */
|
|
/* } */
|
|
|
|
/* /\*Host dropdown resize*\/ */
|
|
/* #host_dropdown { */
|
|
/* min-width: 100px; */
|
|
/* } */
|
|
|
|
/* /\*Footer sticky*\/ */
|
|
/* #footer { */
|
|
/* /\*position: absolute;*\/ */
|
|
/* /\*bottom: 10px;*\/ */
|
|
/* width: 100%; */
|
|
/* /\* Set the fixed height of the footer here *\/ */
|
|
/* height: 120px; */
|
|
/* /\*background-color: #f5f5f5;*\/ */
|
|
/* } */
|
|
|
|
/* /\* For shaper id selection, should also inherit from form-control *\/ */
|
|
/* .shaper-selector { */
|
|
/* width: 11em; */
|
|
/* margin: 0 auto; */
|
|
/* } */
|
|
|
|
/* /\* Pool name selector *\/ */
|
|
/* .pool-selector { */
|
|
/* margin-right: 1em; */
|
|
/* width: 23em; */
|
|
/* margin-left: 1em; */
|
|
/* } */
|
|
|
|
/* .well-wizard { */
|
|
/* background: rgb(249, 249, 249); */
|
|
/* } */
|
|
|
|
/* nav-wizard a:active, a:focus { */
|
|
/* outline:0; */
|
|
/* border:none; */
|
|
/* -moz-outline-style: none; */
|
|
/* } */
|
|
|
|
/* .text-middle, .table > tbody > tr > td.text-middle { */
|
|
/* vertical-align: middle; */
|
|
/* } */
|
|
|
|
/* /\*Hide numeric input box spinners for 'no-spinner' class *\/ */
|
|
/* input.no-spinner[type=number]::-webkit-inner-spin-button, */
|
|
/* input.no-spinner[type=number]::-webkit-outer-spin-button { */
|
|
/* -moz-appearance: none; */
|
|
/* -webkit-appearance: none; */
|
|
/* appearance: none; */
|
|
/* margin: 0; */
|
|
/* } */
|
|
/* input.no-spinner[type=number] { */
|
|
/* -moz-appearance:textfield; */
|
|
/* } */
|
|
|
|
.masthead > .nav > .nav-item {
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
/* sprobe ****************************** */
|
|
|
|
.circle {
|
|
border-radius: 50%/50%;
|
|
width: 9px;
|
|
height: 9px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.node circle {
|
|
cursor: pointer;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.node text {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.report-icon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
path.link {
|
|
fill: none;
|
|
stroke: #ccc;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
/* ****************************** */
|
|
|
|
/* /\* http://stackoverflow.com/questions/13516534/how-to-avoid-page-break-inside-table-row-for-wkhtmltopdf *\/ */
|
|
/* table, tr, td, th, tbody, thead, tfoot { */
|
|
/* page-break-inside: avoid !important; */
|
|
/* } */
|
|
|
|
/* .badge-error { */
|
|
/* background-color: #b94a48; */
|
|
/* } */
|
|
/* .badge-error:hover { */
|
|
/* background-color: #953b39; */
|
|
/* } */
|
|
/* .badge-warning { */
|
|
/* background-color: #f89406; */
|
|
/* } */
|
|
/* .badge-warning:hover { */
|
|
/* background-color: #c67605; */
|
|
/* } */
|
|
/* .badge-success { */
|
|
/* background-color: #468847; */
|
|
/* } */
|
|
/* .badge-success:hover { */
|
|
/* background-color: #356635; */
|
|
/* } */
|
|
/* .badge-info { */
|
|
/* background-color: #3a87ad; */
|
|
/* } */
|
|
/* .badge-info:hover { */
|
|
/* background-color: #2d6987; */
|
|
/* } */
|
|
/* .badge-inverse { */
|
|
/* background-color: #333333; */
|
|
/* } */
|
|
/* .badge-inverse:hover { */
|
|
/* background-color: #1a1a1a; */
|
|
/* } */
|
|
/* .badge-top-right { */
|
|
/* position: relative; */
|
|
/* top: -8px; */
|
|
/* right: 2px; */
|
|
/* } */
|
|
/* .menu-item { */
|
|
/* border: 1px solid #ddd !important; */
|
|
/* } */
|
|
|
|
/* tr.quotas > td { */
|
|
/* padding: 0px; */
|
|
/* } */
|
|
|
|
/* .overall_quota { */
|
|
/* width: 400px; */
|
|
/* text-align: left; */
|
|
/* margin-left: 1px; */
|
|
/* } */
|
|
|
|
/* .overall_quota label.btn { */
|
|
/* width: 55px; */
|
|
/* } */
|
|
|
|
/* .table-borderless tbody tr td, */
|
|
/* .table-borderless tbody tr th, */
|
|
/* .table-borderless thead tr th, */
|
|
/* .table-borderless thead tr td, */
|
|
/* .table-borderless tfoot tr th, */
|
|
/* .table-borderless tfoot tr td { */
|
|
/* border: none; */
|
|
/* } */
|
|
|
|
/* /\* Avoids popup data-original-title flickering *\/ */
|
|
/* .fade { */
|
|
/* opacity: 0; */
|
|
/* -webkit-transition: opacity 0s linear; */
|
|
/* -moz-transition: opacity 0s linear; */
|
|
/* -ms-transition: opacity 0s linear; */
|
|
/* -o-transition: opacity 0s linear; */
|
|
/* transition: opacity 0s linear; */
|
|
/* } */
|
|
|
|
/* .local-ip-selector input { */
|
|
/* width: 5em; */
|
|
/* display: inline-block; */
|
|
/* text-align: right; */
|
|
/* } */
|
|
|
|
/* .local-ip-selector select { */
|
|
/* width: 7em; */
|
|
/* display: inline-block; */
|
|
/* } */
|
|
|
|
/* .local-ip-selector { */
|
|
/* min-width: 22em; */
|
|
/* text-align: right; */
|
|
/* } */
|
|
|
|
/* /\* Fix icons width in header *\/ */
|
|
/* .masthead > ul.nav > li > ul > li > a > i { */
|
|
/* width: 15px; */
|
|
/* text-align: center; */
|
|
/* margin-right: 2px; */
|
|
/* } */
|
|
|
|
/* .list-group > a.disabled { */
|
|
/* color: #999999; */
|
|
/* } */
|
|
/* .list-group > a.disabled:hover, */
|
|
/* .list-group > a.disabled:focus { */
|
|
/* color: #999999; */
|
|
/* text-decoration: none; */
|
|
/* background-color: transparent; */
|
|
/* cursor: not-allowed; */
|
|
/* } */
|
|
|
|
.line-dashed .nv-line {
|
|
stroke-dasharray: 5, 5;
|
|
}
|
|
|
|
.chart-loading-spinner {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
font-size: 50px;
|
|
}
|
|
|
|
/* .timeseries-dropdown { */
|
|
/* padding-left: 5px; */
|
|
/* padding-right: 10px; */
|
|
/* min-width: 7em; */
|
|
/* } */
|
|
|
|
/* #chart1-flows td:last-child a:not(:first-child) { */
|
|
/* margin-left: 5px; */
|
|
/* } */
|
|
|
|
/* NOTE: this is commented to avoid highliting overlapping line issues due to
|
|
* curves interpolation. */
|
|
#historical-tab-chart .nv-area-stroke-hint {
|
|
animation-name: line-stroke-appear;
|
|
animation-duration: 1.5s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
@keyframes line-stroke-appear {
|
|
from {
|
|
stroke-opacity: 0;
|
|
stroke-width: 0;
|
|
}
|
|
to {
|
|
stroke-opacity: 1;
|
|
stroke-width: 1.2;
|
|
}
|
|
}
|
|
|
|
.line-animated .nv-line {
|
|
animation-name: line-appear;
|
|
animation-delay: 0.25s;
|
|
animation-duration: 1.25s;
|
|
animation-fill-mode: backwards;
|
|
}
|
|
|
|
@keyframes line-appear {
|
|
from {
|
|
-webkit-clip-path: polygon(
|
|
0px -1000px,
|
|
0px -1000px,
|
|
0px 1000px,
|
|
0px 1000px
|
|
);
|
|
}
|
|
to {
|
|
-webkit-clip-path: polygon(
|
|
0px -1000px,
|
|
100% -1000px,
|
|
100% 1000px,
|
|
0px 1000px
|
|
);
|
|
}
|
|
}
|
|
|
|
/* .zoom-reset { */
|
|
/* margin-right: 8px; */
|
|
/* font-size: 0.75em; */
|
|
/* } */
|
|
|
|
/* .zoom-reset:hover, .zoom-reset:focus { */
|
|
/* outline:0 !important; */
|
|
/* } */
|
|
|
|
/* .chart-action-buttons button:not(:first-child) { */
|
|
/* margin-left: 5px; */
|
|
/* } */
|
|
|
|
/* .chart-action-buttons button { */
|
|
/* /\* margin-top: 2px; *\/ */
|
|
/* } */
|
|
|
|
.ntop-progress-stacked {
|
|
width: 400px;
|
|
}
|
|
|
|
.ntop-progress-stacked-legend {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ntop-progress-stacked-legend > span > span:last-child {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.ntop-progress-stacked-legend > span:not(:first-child) {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.form-inline {
|
|
display: inline;
|
|
}
|
|
|
|
/* /\* ntop fix: Keep old behaviour after commit https://github.com/twbs/bootstrap/commit/a15c24410be8b94671dcfc3b154e0034a3aaf35f *\/ */
|
|
/* .form-inline .input-group .input-group-addon { */
|
|
/* width: 1% !important; */
|
|
/* } */
|
|
|
|
/* /\* Hide second axis completely *\/ */
|
|
/* /\* #historical-tab-chart .nv-y2 { *\/ */
|
|
|
|
/* /\* Hide second axis lines *\/ */
|
|
/* #historical-tab-chart .nv-y2 .tick line { */
|
|
/* display: none; */
|
|
/* } */
|
|
|
|
/* #chart1-flows table { */
|
|
/* margin-top: 10px; */
|
|
/* font-size: 14px; */
|
|
/* } */
|
|
|
|
/* .typeahead-dropdown-right .dropdown-menu { */
|
|
/* left: auto !important; */
|
|
/* right: 0; */
|
|
/* } */
|
|
|
|
/* .dialog-body-full-height { */
|
|
/* padding: 15px; */
|
|
/* padding-bottom: 0; */
|
|
/* } */
|
|
|
|
/* .label-empty { */
|
|
/* background-color: #EFEFEF !important; */
|
|
/* } */
|
|
|
|
/* CSS for eBPF process charts */
|
|
.link {
|
|
fill: none;
|
|
stroke: #666;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.link.proc2host {
|
|
stroke-dasharray: 0, 2 1;
|
|
}
|
|
|
|
.ebpf_circle {
|
|
fill: #ccc;
|
|
stroke: #333;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.ebpf_text {
|
|
font: 10px sans-serif;
|
|
pointer-events: none;
|
|
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
|
|
}
|
|
|
|
.drilldown-icon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Fix for fa-share blocked by adblock */
|
|
.fa-topology-alt:before {
|
|
content: "\f1e0";
|
|
}
|
|
|
|
/* end of CSS for EBPF charts */
|
|
|
|
.mt-6 {
|
|
margin-top: 6rem !important;
|
|
}
|
|
|
|
.navbar-shadow {
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.01), 0 3px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.table td,
|
|
.table th {
|
|
padding: 0.45rem !important;
|
|
}
|
|
|
|
.traffic-report-table {
|
|
height: auto !important;
|
|
}
|
|
|
|
.filter-scripts-button {
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
color: #007bff;
|
|
padding: .5rem 1rem;
|
|
}
|
|
|
|
.filter-scripts-button.active {
|
|
color: #ffffff;
|
|
background-color: #007bff;
|
|
border-radius: 0.35rem;
|
|
}
|
|
|
|
.filter-scripts-button.active:hover {
|
|
background-color: #007bff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.filter-scripts-button:hover {
|
|
color: #0050a5;
|
|
background: none;
|
|
}
|
|
|
|
.square-btn {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
.scrollable-dropdown {
|
|
max-height: 20rem;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dark-gray {
|
|
color:#363943;
|
|
}
|
|
|
|
.ntop-color {
|
|
color: #ff7500;
|
|
}
|
|
|
|
/* increase switches size */
|
|
.custom-control-label-lg {
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
|
|
/* New Sidebar and container */
|
|
|
|
#wrapper {
|
|
height: 100vh;
|
|
max-height: 100vh;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
#n-sidebar #sidebar li {
|
|
position: relative;
|
|
}
|
|
|
|
#n-sidebar.bg-light #sidebar li:hover {
|
|
background-color: #dedede;
|
|
}
|
|
|
|
#n-container {
|
|
margin-left: 13.5rem;
|
|
height: calc(100% - 56px);
|
|
overflow-y: auto;
|
|
max-height: fit-content;
|
|
}
|
|
|
|
#n-sidebar {
|
|
position: fixed;
|
|
width: var(--sidebar-width);
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: white;
|
|
transition: width .5s;
|
|
z-index: 1050;
|
|
box-shadow: 0px 0px 6px #2f2f2f52;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.nav-side {
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
#n-sidebar.active {
|
|
width: 13.5rem;
|
|
}
|
|
|
|
|
|
#n-sidebar .sidebar-info,
|
|
#n-sidebar.active .sidebar-info {
|
|
background-color: #ececec;
|
|
color: #363943;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: inherit;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#n-sidebar .sidebar-info a {
|
|
background-color: #ececec;
|
|
color: #363943;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#collapse-sidebar {
|
|
position: relative;
|
|
}
|
|
|
|
#collapse-sidebar span{
|
|
position: absolute;
|
|
margin-left: 0.5rem;
|
|
color: #363943;
|
|
}
|
|
|
|
/** Dark theme for sidebar **/
|
|
|
|
#n-sidebar.bg-dark .sidebar-info {
|
|
background-color: #353535;
|
|
color: #e2e2e2;
|
|
}
|
|
#n-sidebar.bg-dark .sidebar-info a {
|
|
background-color: #353535;
|
|
color: #e2e2e2;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#n-sidebar.bg-dark {
|
|
background-color: #1f1f1f !important;
|
|
color: #e2e2e2;
|
|
}
|
|
|
|
#n-sidebar.bg-dark #toggle-theme {
|
|
color: #ccc;
|
|
}
|
|
|
|
#n-sidebar.active.bg-dark .sidebar-info {
|
|
color: #e2e2e2 !important;
|
|
}
|
|
|
|
#n-sidebar.bg-dark ul>li.nav-item div.collapse,
|
|
#n-sidebar.bg-dark ul>li.nav-item div.collapsing {
|
|
background-color: #353535;
|
|
color: #e2e2e2;
|
|
}
|
|
|
|
#n-sidebar.bg-dark .dropdown-divider {
|
|
border-top: 1px solid #1f1f1f;
|
|
}
|
|
|
|
#n-sidebar.bg-dark ul>li.nav-item div.collapse>ul li>a:hover,
|
|
#n-sidebar.bg-dark ul>li.nav-item div.collapsing>ul li>a:hover {
|
|
background-color: #272727;
|
|
}
|
|
|
|
#n-sidebar.bg-dark li,
|
|
#n-sidebar.bg-dark ul>li.nav-item>a,
|
|
#n-sidebar.bg-dark ul>li.nav-item div.collapse>ul li>a,
|
|
#n-sidebar.bg-dark ul>li.nav-item div.collapsing>ul li>a {
|
|
color: #e2e2e2;
|
|
}
|
|
|
|
#n-sidebar.bg-dark li:hover, #n-sidebar.bg-dark ul>li.nav-item>a:hover
|
|
{
|
|
background-color: #353535;
|
|
}
|
|
#n-sidebar.bg-dark ul>li.nav-item>a:focus {
|
|
background-color: #1f1f1f;
|
|
}
|
|
|
|
#n-sidebar.bg-dark ul>li.nav-item>a[aria-expanded="true"] {
|
|
background-color: #353535 !important;
|
|
}
|
|
|
|
#n-sidebar.bg-dark.active #sidebar li::after {
|
|
display: none;
|
|
}
|
|
|
|
#n-sidebar.bg-dark #sidebar li::after {
|
|
background-color: #42424236;
|
|
content: '';
|
|
display: block;
|
|
height: 1px;
|
|
width: 3rem;
|
|
right: calc(50% - 1.5rem);
|
|
position: absolute;
|
|
}
|
|
|
|
#n-sidebar.bg-dark #sidebar li:last-child::after {
|
|
display: none;
|
|
}
|
|
|
|
/** end dark theme **/
|
|
|
|
#n-sidebar .dropdown-divider {
|
|
border-top: 1px solid #c5c5c5;
|
|
}
|
|
|
|
#n-sidebar h3.muted {
|
|
padding: 0.1rem 0.5rem;
|
|
margin-bottom: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
#n-sidebar h3.muted div>a, #n-sidebar h3.muted div>button {
|
|
display: inline-block;
|
|
}
|
|
#n-sidebar.bg-dark button[data-toggle='sidebar']>i {
|
|
color: white;
|
|
}
|
|
|
|
#n-sidebar.active ul {
|
|
width: 100%;
|
|
}
|
|
|
|
#n-sidebar.active ul li {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
#n-sidebar ul li {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
#n-sidebar.active ul li span.title {
|
|
display: inline-block;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#n-sidebar ul li span.title {
|
|
font-size: 0.75rem;
|
|
display: block;
|
|
}
|
|
|
|
#n-sidebar.bg-light ul>li.nav-item div.collapse>ul li>a:hover,
|
|
#n-sidebar.bg-light ul>li.nav-item div.collapsing>ul li>a:hover {
|
|
background-color: #dedede;
|
|
}
|
|
|
|
#n-sidebar ul>li.nav-item>a {
|
|
display: block;
|
|
padding: 0.8rem 0rem;
|
|
text-decoration: none;
|
|
transition: background 0.5s;
|
|
color:#363943;
|
|
white-space: nowrap;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
#n-sidebar.bg-dark ul>li.nav-item>a.submenu::before {
|
|
border-left: 4px solid #fff;
|
|
}
|
|
|
|
#n-sidebar ul>li.nav-item>a.submenu::before {
|
|
display: block;
|
|
content: " ";
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
border-left: 4px solid #333;
|
|
right: 4px;
|
|
}
|
|
|
|
#n-sidebar ul>li.nav-item>a>span {
|
|
display: block;
|
|
margin-bottom: 0.2rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#n-sidebar.active ul>li.nav-item>a {
|
|
padding: 0.8rem;
|
|
font-size: 1rem;
|
|
}
|
|
#n-sidebar.active ul>li.nav-item>a>span {
|
|
display: inline;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#n-sidebar.active .submenu::after {
|
|
display: inline-block;
|
|
margin-left: auto;
|
|
margin-right: 0px;
|
|
vertical-align: .260em;
|
|
content: "";
|
|
border-top: .3em solid;
|
|
border-right: .3em solid transparent;
|
|
border-bottom: 0;
|
|
border-left: .3em solid transparent;
|
|
}
|
|
|
|
#n-sidebar.active .sidebar-info {
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
#n-sidebar ul>li.nav-item a.active {
|
|
color: #ffffff;
|
|
background-color: #ff7500;
|
|
border-radius: 0;
|
|
}
|
|
|
|
#n-sidebar ul>li.nav-item div.collapse, #n-sidebar ul>li.nav-item div.collapsing {
|
|
background-color:rgb(237, 237, 237);
|
|
color:rgb(56, 59, 69);
|
|
min-height: 40px;
|
|
}
|
|
|
|
#n-sidebar ul>li.nav-item div.collapse>ul li>a.active,
|
|
#n-sidebar ul>li.nav-item div.collapsing>ul li>a.active {
|
|
background-color: #f57f17
|
|
}
|
|
|
|
#n-sidebar ul>li.nav-item div.collapse>ul li>a, #n-sidebar ul>li.nav-item div.collapsing>ul li>a {
|
|
padding: 0.5rem;
|
|
transition: all 0.5s;
|
|
display: block;
|
|
font-size: 0.95rem;
|
|
color:#363943;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#n-container.extended {
|
|
margin-left: var(--sidebar-width);
|
|
}
|
|
|
|
#ntop-logo {
|
|
height: 3.2rem;
|
|
width: 100%;
|
|
}
|
|
#ntop-logo>svg {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.squared-logo {
|
|
display: none;
|
|
}
|
|
|
|
.side-collapse {
|
|
animation: none;
|
|
transition: none;
|
|
left: var(--sidebar-width);
|
|
z-index: 1050;
|
|
width: 16rem;
|
|
top: 0;
|
|
position: absolute;
|
|
overflow-y: auto;
|
|
box-shadow:rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
|
|
}
|
|
|
|
.side-collapse a {
|
|
text-align: left;
|
|
}
|
|
.info-stats div.down, .info-stats div.up{
|
|
min-width: 12rem;
|
|
}
|
|
.info-stats div.down {
|
|
margin-top: -.55rem;
|
|
}
|
|
.info-stats {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
}
|
|
.info-stats a {
|
|
color:rgb(56, 59, 69);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#network-load {
|
|
display: contents;
|
|
}
|
|
#network-load > li.nav-item {
|
|
max-width: 60rem;
|
|
}
|
|
#network-load div.d-flex {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
height: 100%;
|
|
align-items: center;
|
|
}
|
|
#network-load div.d-flex a {
|
|
margin: 0 0.1em;
|
|
}
|
|
|
|
.w-10 {
|
|
max-width: 12rem;
|
|
}
|
|
|
|
|
|
#n-navbar {
|
|
left: 13.5rem;
|
|
z-index: 1020;
|
|
transition: 0.5s left;
|
|
box-shadow: 8px 1px 3px rgba(0,0,0,0.10), 2px 1px 2px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
#n-navbar.extended {
|
|
left: var(--sidebar-width);
|
|
}
|
|
|
|
/* scrollbar theme */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 4px;
|
|
}
|
|
::-webkit-scrollbar-button {
|
|
width: 0px;
|
|
height: 0px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #f67504;
|
|
border: 0px none #ffffff;
|
|
border-radius: 50px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #f5811b; /* orange */
|
|
}
|
|
::-webkit-scrollbar-thumb:active {
|
|
background: #ea6f02;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
border: 0px none #ffffff;
|
|
border-radius: 50px;
|
|
}
|
|
::-webkit-scrollbar-track:hover {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-track:active {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
.no-scroll {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
@media (min-width: 480px) and (max-width: 800px) {
|
|
#n-container {
|
|
padding-top: 9.8% !important;
|
|
}
|
|
}
|
|
@media (min-width: 800px) and (max-width: 992px) {
|
|
#n-container {
|
|
padding-top: 10% !important;
|
|
}
|
|
}
|
|
@media (min-width: 992px) and (max-width: 1500px) {
|
|
#n-container {
|
|
padding-top: 2.4% !important;
|
|
}
|
|
}
|
|
|
|
|
|
@media (min-width: 320px) and (max-width: 480px) {
|
|
|
|
#n-sidebar.bg-dark #sidebar li::after {
|
|
display: none;
|
|
}
|
|
|
|
#n-sidebar.active .submenu::after {
|
|
display: none;
|
|
}
|
|
|
|
#n-navbar {
|
|
left: 0rem;
|
|
}
|
|
|
|
#n-navbar.extended {
|
|
left: 0rem;
|
|
z-index: 0;
|
|
}
|
|
|
|
#n-container {
|
|
margin-left: 0;
|
|
padding: 0rem 0.2rem;
|
|
padding-top: 14rem !important;
|
|
|
|
}
|
|
#n-container.extended { margin-left: 0; }
|
|
|
|
#n-sidebar.active { width: 0; }
|
|
#n-sidebar {
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
#n-sidebar > h3.muted {
|
|
display: none;
|
|
}
|
|
|
|
#n-sidebar > ul.nav.flex-column {
|
|
width: 100%;
|
|
}
|
|
|
|
button[data-toggle='sidebar'] {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
#n-sidebar ul li {
|
|
width: 100%;
|
|
font-size: 1.05rem;
|
|
text-align: left;
|
|
transition: background 0.5s;
|
|
}
|
|
|
|
#n-sidebar ul li:hover>a, #n-sidebar ul li:active>a {
|
|
background: none;
|
|
}
|
|
#n-sidebar ul li:hover, #n-sidebar ul li:active {
|
|
background-color: rgb(216, 216, 216);
|
|
}
|
|
#n-sidebar.bg-dark ul li:hover, #n-sidebar.bg-dark ul li:active,
|
|
#n-sidebar.bg-dark ul li.nav-item:hover, #n-sidebar.bg-dark ul li.nav-item:focus {
|
|
background-color: #353535;
|
|
}
|
|
|
|
#n-sidebar ul>li.nav-item>a {
|
|
font-size: inherit;
|
|
}
|
|
#n-sidebar ul>li.nav-item>a>span {
|
|
display: inline;
|
|
font-size: inherit;
|
|
}
|
|
|
|
#n-sidebar ul>li.nav-item>a {
|
|
padding: 1.2rem;
|
|
}
|
|
#n-sidebar ul>li.nav-item div.collapse>ul li>a {
|
|
padding: 1.2rem 1.2rem 1.2rem 1.8rem;
|
|
}
|
|
|
|
#n-sidebar ul li.nav-item.active {
|
|
background-color: #ff7500;
|
|
}
|
|
|
|
#n-sidebar ul li.nav-item:hover,
|
|
#n-sidebar ul li.nav-item:focus {
|
|
background-color: #ededed;
|
|
}
|
|
|
|
#n-sidebar ul li.nav-item:hover > a,
|
|
#n-sidebar ul li.nav-item:focus > a {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
|
|
.chips-container {
|
|
display: block;
|
|
width: 100%;
|
|
padding: .375rem .75rem;
|
|
font-size: 1rem;
|
|
color: #495057;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
border: 1px solid #ced4da;
|
|
border-radius: .25rem;
|
|
}
|
|
.chips-container > input[type='text'] {
|
|
border: none;
|
|
outline: none;
|
|
display: inline-block;
|
|
width: auto;
|
|
min-width: 100%;
|
|
}
|
|
.chips-container > input[type='text']:focus {
|
|
border: none !important;
|
|
outline: none !important;
|
|
}
|
|
.input-group.template input.form-control {
|
|
border-top-right-radius: .25rem !important;
|
|
border-bottom-right-radius: .25rem !important;
|
|
}
|
|
|
|
#multiple-select {
|
|
height: 12rem;
|
|
max-height: 20rem;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.p-btn {
|
|
padding: .375rem 0rem;
|
|
}
|
|
|
|
.scroll-x {
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
details#dt-top-summary {
|
|
margin: 1.25rem 0;
|
|
}
|
|
details div.progress {
|
|
height: 0.55rem;
|
|
}
|
|
details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
|
|
details div.details {
|
|
padding: 1rem;
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
details ul {
|
|
margin: 0;
|
|
width: 100%;
|
|
padding: 0;
|
|
display: table;
|
|
}
|
|
|
|
details ul li {
|
|
display: table-cell;
|
|
margin: 0.5rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
width: 1%;
|
|
}
|
|
|
|
details ul li:only-child {
|
|
border: none;
|
|
}
|
|
details ul li:first-child {
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
details ul li {
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
details ul li:last-child {
|
|
border: none;
|
|
}
|
|
|
|
details ul li i.dot {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
details ul li>span {
|
|
color: #8e8e8e;
|
|
}
|
|
|
|
.switches-list-container {
|
|
width: 100%;
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
padding: 0.5rem;
|
|
background-color: #fbfbfb;
|
|
}
|
|
|
|
.switches-list-container > ul {
|
|
list-style-type: none;
|
|
padding-left:0;
|
|
}
|
|
|
|
#updates-install-li {
|
|
font-size: .875rem;
|
|
}
|
|
|
|
div.help-block.with-errors .list-unstyled {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
div.dataTables_wrapper div.dt-buttons {
|
|
float: right !important;
|
|
}
|
|
|
|
th.dt-head-center {
|
|
text-align: center;
|
|
}
|
|
|
|
td.dt-body-right {
|
|
text-align: right;
|
|
}
|
|
|
|
#alertsActionsPanel {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.notification-bell {
|
|
font-size: 0.5rem;
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 0.2rem;
|
|
}
|
|
|
|
.bigger-icon {
|
|
font-size: 12rem;
|
|
}
|