mirror of
https://github.com/ntop/ntopng.git
synced 2026-04-30 07:59:35 +00:00
484 lines
11 KiB
CSS
484 lines
11 KiB
CSS
/*
|
|
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:not(:first-child) {
|
|
/* font-size: 0.8em; */
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.ntop-progress-stacked-legend > span:not(:first-child) {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
/* /\* 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 */
|