vrr/ntopng
2
0
Fork 0
mirror of https://github.com/ntop/ntopng.git synced 2026-04-30 16:09:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3
ntopng/httpdocs/css/ntopng.css
Vasilis Tako 72cd143267 White Mode UI Fixes
2021-09-08 17:32:23 +02:00

1080 lines
No EOL
20 KiB
CSS
Raw Blame History

:root {
--sidebar-width: 4.5rem;
--footer-height: 4rem;
--padding-md-four: 1.5rem;
--scrollable-dropdown-height: 20rem;
--ntop-orange: #ff8f00;
--ntop-orange-light: #ffc046;
--ntop-orange-dark: #c56000;
--ntop-blue: #37474f;
--ntop-blue-light: #62717b;
--ntop-blue-dark: #101f27;
}
a, .btn-link {
text-decoration: none;
}
summary > span {
border-bottom: 1px dotted gray;
font-weight: bolder;
color: initial;
}
code {
color: #393d44;
}
/*
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 {
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);
}
/* Align search to the top */
.navbar-main-top {
align-items: flex-start;
}
/* Control main navbard badges display based on window size */
@media (max-width: 1280px) {
.navbar-main-badges {
width: 360px;
}
}
@media (max-width: 1200px) {
.navbar-main-badges {
width: 300px;
}
}
@media (max-width: 1080px) {
.navbar-main-badges {
width: 200px;
}
}
.table:not(.dataTable) td,
.table:not(.dataTable) th {
padding: 0.50rem !important;
}
.traffic-report-table {
height: auto !important;
}
.square-btn {
width: 2rem;
height: 2rem;
}
/*
Class to apply to dropdown that must scroll elements.
When the dropdown height is greater than 20 rem then crop it and enable
scroll on y-axis
*/
.scrollable-dropdown {
max-height: var(--scrollable-dropdown-height);
height: auto;
overflow-y: auto;
overflow-x: hidden;
}
.dark-gray {
color: #363943;
}
.ntop-color {
color: #ff7500;
}
.bg-ntop {
background-color: #ff7500;
}
/* increase switches size */
.custom-control-label-lg {
transform: scale(1.5);
}
.dt-search {
display: inline-block;
}
.dt-search label {
margin-right: 0.5rem;
margin-top: 0.25rem;
}
/* Container */
main#n-container {
height: 100%;
display: flex;
flex-flow: column;
display: inline-block;
width: 100%;
padding-left: calc(var(--sidebar-width) + 1rem) !important;
}
.info-stats div.down,
.downup-charts div.down,
.info-stats div.up,
.downup-charts div.up {
min-width: 12rem;
}
.info-stats div.down,
.downup-charts div.down {
margin-top: -.55rem;
}
.info-stats, .downup-charts {
display: flex;
align-items: center;
}
.info-stats a {
color: rgb(56, 59, 69);
text-decoration: none;
}
.network-load a {
margin: 0 0.1em;
}
.w-10 {
max-width: 12rem;
}
.navbar-shadow {
box-shadow: var(0, 0, transparent, 0 0 #0000), var(0, 0, transparent, 0 0 #0000), var(0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06));
border-radius: .25rem;
}
#n-navbar {
left: var(--sidebar-width);
z-index: 1000;
transition: 0.2s ease-out all;
background-color: transparent;
box-shadow: none;
}
#n-navbar.scrolled {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(88, 49, 49, 0.06) !important;
background-color: initial;
}
.no-scroll {
overflow-y: hidden;
}
.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 !important;
overflow-y: auto;
max-height: 20rem;
}
.multiple-select-small {
height: 8rem !important;
overflow-y: auto;
max-height: 12rem;
}
.pointer {
cursor: pointer;
}
.p-btn {
padding: .375rem 0rem;
}
.scroll-x {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.dt-table-wrapper table.table tbody td {
vertical-align: middle;
}
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;
}
th.dt-head-center {
text-align: center;
}
td.dt-body-right {
text-align: right;
}
.notification-bell {
font-size: 0.5rem;
position: absolute;
right: 1rem;
top: 0.2rem;
}
.bigger-icon {
font-size: 12rem;
}
.scrollable-log {
height: 16rem;
overflow-y: scroll;
}
.scrollable-log > code {
word-break: break-all;
}
.toast {
width: 350px;
}
.toast p {
word-break: break-all;
}
.toast:not(:last-child) {
margin-bottom: .2rem;
}
.toast-container {
position: fixed;
top: 0.5rem;
right: 0.5rem;
z-index: 1050;
}
.blog-section {
width: 30rem;
}
#lldp_network {
height: 600px;
}
.pre-wrap {
white-space: pre;
}
.toast-body.bg-info a {
font-weight: 600;
}
.body {
padding-top: 4.5rem;
}
.notes {
margin-top: 1rem;
padding: 1rem;
border-radius: 3px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.notes b {
margin-bottom: 0.2rem;
}
.card-shadow {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.extrainfo {
position: absolute;
z-index: 1;
border-radius: 4px;
left: 8px;
top: 8px;
padding: 8px;
background: rgb(222, 226, 230);
}
footer {
width: 100%;
height: var(--footer-height);
}
.form-control-with-spinner {
position: relative;
}
.form-control-with-spinner .spinner-border {
position: absolute;
right: 0.5rem;
top: calc(50% - .5rem);
}
.btn[role='combobox'] {
border-color: #ced4d9;
background-color: #fff;
}
.btn-gray {
background-color: #f0f0f0;
}
.px-25 {
padding: 0 25%!important;
}
.actions-group {
min-width: 120px;
}
.scrollable-list {
max-height: 16rem;
overflow-y: auto;
}
.largegroup {
width:500px
}
.dtr-details {
width: 100%;
}
.ntop-widget-container > .error-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.no-wrap {
white-space: nowrap;
}
.resizable-y-container {
resize: vertical;
overflow: auto;
}
.overlay {
display: flex;
background-color: rgba(16, 16, 16, 0.1);
z-index: 1000;
}
.tagify-non-editable .tagify__input{
display: none !important;
}
.dashboard-widget-container {
--tw-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
--tw-ring-offset-shadow: 0 0 transparent;
height: auto;
border: 1px solid #e5e7eb;
border-radius: .375rem;
display: flex;
flex-direction: column;
box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);
}
.dashboard-widget-header {
padding: .45rem 1rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.02);
border-bottom: 1px solid rgba(0,0,0,.125);
font-size: 0.85rem;
color: rgba(107,114,128,1);
}
.dashboard-widget-body {
height: 100%;
}
.percentage-widget {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.percentage-widget .value {
font-size: 4rem;
font-weight: 600;
}
.percentage-widget .percentage {
font-size: 1.5rem;
margin-top: -0.50rem;
}
.percentage-widget .percentage.positive {
color: #2ca61c;
}
.percentage-widget .percentage.negative {
color: #e93d3d;
}
.fit-content {
width: fit-content;
width: -moz-fit-content;
}
.time-input {
width: 18ch;
}
.h-auto {
height: auto;
}
.f-1 {
font-size: 1rem;
}
td.dashboard-counter {
font-size: 2rem;
padding-top: 0!important;
padding-bottom: 0!important;
}
.fa-ntopng-warning {
color: #B94A48;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #f5f5f5;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
} /* ---- stats.js ---- */
.fa-external-link-alt{
color: #0d6efd;
cursor: pointer;
}
.leaflet-top.leaflet-left{
z-index: auto;
}
.btn{
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
.alert-warning{
color: #5f4702;
background-color: #fff0a5;
border-color: #f7e694;
}
li > a > .fa-external-link-alt{
color: #0091EA;
}
Reference in a new issue View git blame Copy permalink