diff --git a/html/css/custom/styles.css b/html/css/custom/styles.css
index d1f1568b5788c4b2a7c3fbc10312c0dce340a3e8..59a49c97cfc5a11bb1edc76d33c11aaa533d816a 100644
--- a/html/css/custom/styles.css
+++ b/html/css/custom/styles.css
@@ -1,38 +1,38 @@
/* Not finished */
-/*--------------------------------------------------
-# Create by ckforum
-# june 2019
-# release 2.1
-# thanks to yoyo and librenms teams
-# warning ! for backgroud of overlib
-# see https://github.com/librenms/librenms/pull/10300
-----------------------------------------------------*/
-
-/* INSTALLATION ADD THIS BELOW TO YOUR CONFIG.PHP and delete this config add on comment */
-
-/* SEE MORE @ https://github.com/librenms/librenms/blob/master/includes/defaults.inc.php */
-/*
-
-### DARK MODE
-// text color graph
-$config['rrdgraph_def_text_color'] = 'ffffff';
-
-// Set to TRUE if you want to display the 95% based on the highest value. (aka real 95%)
-// can't see the difference ...
-$config['overlib_defaults'] = ",FGCOLOR,'#fff', BGCOLOR, '#000', BORDER, 5, CELLPAD, 4, CAPCOLOR, '#555555', TEXTCOLOR, '#ffffff'";
-
-// Set this to false if you want to disable the mouseover popup graphs
-$config['web_mouseover'] = true;
-
-### custom style
-# uncomment line below and replace the logo with yours
-# $config['title_image'] = "images/custom/librenms_logo_light_ck.png";
-# Create a sub dir in html/css folder and create a css files
-$config['webui']['custom_css'][] = "css/custom/styles.css";
-
-### https://docs.librenms.org/Support/Configuration/#webui-settings
-## this add style is based on mono theme
-$config['site_style'] = "mono";
+ /*--------------------------------------------------
+ # Create by ckforum
+ # june 2019
+ # release 2.2
+ # thanks to yoyo and librenms teams
+ # warning ! for backgroud of overlib
+ # see https://github.com/librenms/librenms/pull/10300
+ ----------------------------------------------------*/
+
+ /* INSTALLATION ADD THIS BELOW TO YOUR CONFIG.PHP and delete this config add on comment */
+
+ /* SEE MORE @ https://github.com/librenms/librenms/blob/master/includes/defaults.inc.php */
+ /*
+
+ ### DARK MODE
+ // text color graph
+ $config['rrdgraph_def_text_color'] = 'ffffff';
+
+ // Set to TRUE if you want to display the 95% based on the highest value. (aka real 95%)
+ // can't see the difference ...
+ $config['overlib_defaults'] = ",FGCOLOR,'#fff', BGCOLOR, '#000', BORDER, 5, CELLPAD, 4, CAPCOLOR, '#555555', TEXTCOLOR, '#ffffff'";
+
+ // Set this to false if you want to disable the mouseover popup graphs
+ $config['web_mouseover'] = true;
+
+ ### custom style
+ # uncomment line below and replace the logo with yours
+ # $config['title_image'] = "images/custom/librenms_logo_light_ck.png";
+ # Create a sub dir in html/css folder and create a css files
+ $config['webui']['custom_css'][] = "css/custom/styles.css";
+
+ ### https://docs.librenms.org/Support/Configuration/#webui-settings
+ ## this add style is based on mono theme
+ $config['site_style'] = "mono";
*/
:root {
@@ -84,57 +84,54 @@ html[data-theme='dark'] {
/* SCROLL BAR*/
::-webkit-scrollbar {
- width: 8px;
+ width: 8px;
}
::-moz-scrollbar {
- width: 8px;
+ width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- -webkit-border-radius: 10px;
- border-radius: 10px;
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
}
::-moz-scrollbar-track {
- -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- -moz-border-radius: 10px;
- border-radius: 10px;
+ -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ -moz-border-radius: 10px;
+ border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
- -webkit-border-radius: 10px;
- border-radius: 10px;
- background: rgba(97, 94, 94, 0.8);
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ background: rgba(97, 94, 94, 0.8);
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb {
- -moz-border-radius: 10px;
- border-radius: 10px;
- background: rgba(97, 94, 94, 0.8);
- -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ background: rgba(97, 94, 94, 0.8);
+ -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
- background: rgba(255,0,0,0.4);
+ background: rgba(255,0,0,0.4);
}
::-moz-scrollbar-thumb:window-inactive {
- background: rgba(255,0,0,0.4);
+ background: rgba(255,0,0,0.4);
}
/* end Scroll */
-
-
-
body {
background-color: #070707;
color: white;
@@ -153,545 +150,511 @@ a:hover {
.gridster {
- background-color: black;
+ background-color: black;
}
.devices-headers-table-menu {
- background-color:#000;
+ background-color:#000;
}
.panel {
- background-color:#333;
-
+ background-color:#333;
}
.panel>.panel-collapse>.table, .panel>.table, .panel>.table-responsive>.table {
- background-color: black;
- color: yellow;
+ background-color: black;
+ color: yellow;
}
.panel-default {
- border-color: #333;
+ border-color: #333;
}
.panel-default>.panel-heading {
- border-color: #777777;
+ border-color: #777777;
}
.panel-default>.panel-heading {
-background-color: #777777;
+ background-color: #777777;
}
A.grey:visited, A.grey, .grey {
- color: #8aaad6;
+ color: #8aaad6;
}
.navbar-inverse {
- background-color: #2a2a2a;
+ background-color: #2a2a2a;
}
.table-responsive .bootgrid-table td, .table-responsive .bootgrid-table th>.column-header-anchor>.text {
- color: yellow;
+ color: yellow;
}
/* sort chevron */
.bootgrid-table th > .column-header-anchor {
- background: #3330; /* transp*/
- color : white;
+ background: #3330; /* transp*/
+ color : white;
}
-
-
-
.table-striped>tbody>tr:nth-of-type(odd) {
- background-color: #2b2626;
+ background-color: #2b2626;
}
-
.form-control {
- background-color: #000;
+ background-color: #000;
}
.nav-tabs {
- border-bottom: 1px solid #333;
+ border-bottom: 1px solid #333;
}
.edit-widget, .close-widget { cursor: pointer; }
.widget_body {
- background-color: #333333;
- color: wheat;
+ background-color: #333333;
+ color: wheat;
}
.widget_header {
- background-color: #777777;
+ background-color: #777777;
}
.icon-theme {
- color: #f3f3f3;
+ color: #f3f3f3;
}
-
.device-overview>.panel-body>.row:nth-child(odd) {
- background-color: #333333;
+ background-color: #333333;
}
.device-overview>.panel-body>.row:nth-child(odd) {
- background-color: #333333;
+ background-color: #333333;
}
.devices-graphs-select {
- background-color: black;
+ background-color: black;
}
.device-head, a.list-device {
- color: #77a7d2;
+ color: #77a7d2;
}
/* hover device */
.device-overview > .panel-body > .row:hover {
- background-color: #777;
+ background-color: #777;
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
- background-color: black;
+ background-color: black;
}
-
-
.dropdown-menu {
- color : white;
- background-color: #6b6666;
-
+ color : white;
+ background-color: #6b6666;
}
.dropdown-menu>li>a {
-
- color: #fffefe;
+ color: #fffefe;
}
/* SELECT */
.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder {
- color: #999;
+ color: #999;
background-color: black;
}
.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn {
- background-color: black;
- color: wheat;
+ background-color: black;
+ color: wheat;
}
.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
- background-color: black;
+ background-color: black;
}
.select2-container--bootstrap .select2-selection--single {
- background-color: black;
- border-style: solid;
- border-color: #333;
+ background-color: black;
+ border-style: solid;
+ border-color: #333;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
- background-color: black;
+ background-color: black;
}
-
.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
- box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
- background-color: #000;
- border: 1px solid #ccc;
- border-radius: 4px;
- color: #fff;
- font-size: 14px;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+ background-color: #000;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ color: #fff;
+ font-size: 14px;
}
select2-container--default .select2-results>.select2-results__options {
-
- background-color: #333;
- border: 1px;
- border-color: #333;
+ background-color: #333;
+ border: 1px;
+ border-color: #333;
}
.select2-search--dropdown {
-
- background-color: #333;
+
+ background-color: #333;
}
.select2-results {
-
- background-color: #333;
+
+ background-color: #333;
}
.select2-container--default .select2-selection--single {
- background-color: #333;
- border: 1px solid #333;
- border-radius: 4px;
+ background-color: #333;
+ border: 1px solid #333;
+ border-radius: 4px;
}
.select2-container--bootstrap .select2-selection {
- background-color: #000;
+ background-color: #000;
}
-
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
- background-color: #000;
- color: white;
+ background-color: #000;
+ color: white;
}
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
- background-color: #337ab7;
- color: #fff;
+ background-color: #337ab7;
+ color: #fff;
}
/* device dependencies */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
- background-color: black;
+ background-color: black;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
- border: solid #333 1px;
+ border: solid #333 1px;
}
.select2-container--default .select2-selection--multiple {
- background-color: #000;
- border: 1px solid #020202;
- border-radius: 4px;
- cursor: text;
+ background-color: #000;
+ border: 1px solid #020202;
+ border-radius: 4px;
+ cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
- background-color: #000000;
- border: 1px solid #333;
- }
+ background-color: #000000;
+ border: 1px solid #333;
+}
.select2-container--default .select2-results__option[aria-selected=true] {
- background-color: #212020;
+ background-color: #212020;
}
/* buttons ETC..*/
button, input, optgroup, select, textarea {
- background-color: black;
- border-color: #333;
- border: 1px;
+ background-color: black;
+ border-color: #333;
+ border: 1px;
}
.gridster .gs-w {
- background: #202020;
+ background: #202020;
}
A.black:visited, A.black, .black {
- color: #fff1f1;
+ color: #fff1f1;
}
.interface-upup, a.interface-upup {
- color: #9dfd8e;
+ color: #9dfd8e;
}
.bootgrid-footer .search .glyphicon, .bootgrid-header .search .glyphicon {
-
- background-color: black;
+ background-color: black;
}
/* Table */
.table>tbody>tr.success>td, .table>tbody>tr.success>th, .table>tbody>tr>td.success, .table>tbody>tr>th.success, .table>tfoot>tr.success>td, .table>tfoot>tr.success>th, .table>tfoot>tr>td.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>thead>tr.success>th, .table>thead>tr>td.success, .table>thead>tr>th.success {
- background-color: #212121;
+ background-color: #212121;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
-
- background-color: #212121;
+ background-color: #212121;
}
.table>thead>tr>th {
-
- border-bottom: 2px solid #3e3939;
+ border-bottom: 2px solid #3e3939;
}
.table-responsive .bootgrid-table td, .table-responsive .bootgrid-table th>.column-header-anchor>.text {
- color: white;
- background-color: #333333;
+ color: white;
+ background-color: #333333;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
-
- border: 0px solid #212121;
- background-color: #333333;
+ border: 0px solid #212121;
+ background-color: #333333;
}
.table-bordered {
- border: 0px solid #ddd;
+ border: 0px solid #ddd;
}
.table>tbody>tr.danger>td, .table>tbody>tr.danger>th, .table>tbody>tr>td.danger, .table>tbody>tr>th.danger, .table>tfoot>tr.danger>td, .table>tfoot>tr.danger>th, .table>tfoot>tr>td.danger, .table>tfoot>tr>th.danger, .table>thead>tr.danger>td, .table>thead>tr.danger>th, .table>thead>tr>td.danger, .table>thead>tr>th.danger {
- background-color: #333;
+ background-color: #333;
}
.table>tbody>tr.success>td, .table>tbody>tr.success>th, .table>tbody>tr>td.success, .table>tbody>tr>th.success, .table>tfoot>tr.success>td, .table>tfoot>tr.success>th, .table>tfoot>tr>td.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>thead>tr.success>th, .table>thead>tr>td.success, .table>thead>tr>th.success {
- background-color: #333;
+ background-color: #333;
}
.bootgrid-table th>.column-header-anchor>.text {
-
- color: white;
+ color: white;
}
/* hover th */
.bootgrid-table th:active, .bootgrid-table th:hover, .bootgrid-table th:hover > .column-header-anchor > .text {
- background: #777;
+ background: #777;
}
/* attention bootstrap message alert*/
.text-left {
-/* background-color : #777777; */
+ /* background-color : #777777; */
}
-
/* PAGINATION */
-
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
- color: #777;
- cursor: not-allowed;
- background-color: #000;
- border-color: #0a0a0a;
+ color: #777;
+ cursor: not-allowed;
+ background-color: #000;
+ border-color: #0a0a0a;
}
.pagination>li>a, .pagination>li>span {
- position: relative;
- float: left;
- padding: 6px 12px;
- margin-left: -1px;
- line-height: 1.42857143;
- color: #337ab7;
- text-decoration: none;
- background-color: #000;
- border: 1px solid #333;
+ position: relative;
+ float: left;
+ padding: 6px 12px;
+ margin-left: -1px;
+ line-height: 1.42857143;
+ color: #337ab7;
+ text-decoration: none;
+ background-color: #000;
+ border: 1px solid #333;
}
-
-
.device-table-metrics span {
- color: white;
+ color: white;
}
/* BTN INPUT*/
.btn-default {
- color: #ada5a5;
- background-color: #000;
- border-color: #313131;
+ color: #ada5a5;
+ background-color: #000;
+ border-color: #313131;
}
.input-group-addon:first-child {
- color: #ada5a5;
- background-color: #000;
- border-color: #313131;
+ color: #ada5a5;
+ background-color: #000;
+ border-color: #313131;
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
- background-color: black;
- border-color: #313131;
+ background-color: black;
+ border-color: #313131;
}
.select2-container--bootstrap .select2-dropdown {
- -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
- box-shadow: 0 6px 12px rgba(0,0,0,.175);
- border-color: #66afe9;
- overflow-x: hidden;
- margin-top: -1px;
- background-color : #333;
+ -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+ box-shadow: 0 6px 12px rgba(0,0,0,.175);
+ border-color: #66afe9;
+ overflow-x: hidden;
+ margin-top: -1px;
+ background-color : #333;
}
-
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
- color: #fff;
- cursor: default;
- background-color: #333;
- border: 1px solid #333;
- border-bottom-color: transparent;
+ color: #fff;
+ cursor: default;
+ background-color: #333;
+ border: 1px solid #333;
+ border-bottom-color: transparent;
}
/* hover tab */
.nav > li > a:focus, .nav > li > a:hover {
- text-decoration: none;
- background-color: #777;
- border:0px;
- color : black;
+ text-decoration: none;
+ background-color: #777;
+ border:0px;
+ color : black;
}
-
-
.bootgrid-table td.loading, .bootgrid-table td.no-results {
- background: #000;
-
+ background: #000;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
- padding: 5px;
- line-height: 1.42857143;
- vertical-align: top;
- border-top: 0px solid #61616145;
- background-color:#333333;
+ padding: 5px;
+ line-height: 1.42857143;
+ vertical-align: top;
+ border-top: 0px solid #61616145;
+ background-color:#333333;
}
.table-hover, .table-condensed, .table-striped, .bootgrid-table {
-background-color :black;
+ background-color :black;
}
/*TD TH*/
td, th {
-
- background-color: #333;
+ background-color: #333;
}
.list-group-item {
-
- background-color: #020202;
-
+ background-color: #020202;
}
.tabcontent {
- background-color: #333;
+ background-color: #333;
}
/* Grid and ETC*/
.vis-time-axis .vis-text {
- color: #fff;
+ color: #fff;
}
.vis-timeline {
- border: 1px solid #444;
+ border: 1px solid #444;
}
+/*
.vis-major, .vis-grid, .vis-panel, .vis-background, .vis-horizontal {
}
+*/
/* FORM */
.form-control {
-
- border: 1px solid #222;
-
+ border: 1px solid #222;
}
/* PRE */
pre {
- display: block;
- padding: 9.5px;
- margin: 0 0 10px;
- font-size: 13px;
- line-height: 1.42857143;
- color: #fffefe;
- word-break: break-all;
- word-wrap: break-word;
- background-color: #000000;
- border: 1px solid #3a3636;
- border-radius: 4px;
+ display: block;
+ padding: 9.5px;
+ margin: 0 0 10px;
+ font-size: 13px;
+ line-height: 1.42857143;
+ color: #fffefe;
+ word-break: break-all;
+ word-wrap: break-word;
+ background-color: #000000;
+ border: 1px solid #3a3636;
+ border-radius: 4px;
}
.bg-danger {
- background-color: #ad3636;
+ background-color: #ad3636;
}
hr {
- border: 0px;
- height: 1px;
- background-color: #333;
- color: #ccc;
+ border: 0px;
+ height: 1px;
+ background-color: #333;
+ color: #ccc;
}
/* MODALE*/
.modal-header {
-
- border-bottom: 1px solid #2d2626;
+ border-bottom: 1px solid #2d2626;
}
.modal-content {
-
- background-color: #333;
- border: 1px solid #333;
- border: 1px solid rgba(0,0,0,.2);
-
+ background-color: #333;
+ border: 1px solid #333;
+ border: 1px solid rgba(0,0,0,.2);
}
.modal-footer {
-
- border-top: 1px solid #252222;
+
+ border-top: 1px solid #252222;
}
/* LEGEND */
legend {
- padding: 5px;
- color: #fff;
- border-bottom: 1px solid #333;
+ padding: 5px;
+ color: #fff;
+ border-bottom: 1px solid #333;
}
/* INFOBOX RRD*/
.infobox .rrd-pre {
- background-color: #2f2e2e;
- font-size: 11px;
- white-space: pre-wrap;
+ background-color: #2f2e2e;
+ font-size: 11px;
+ white-space: pre-wrap;
}
.infobox, .infobox-down {
- border: 2px dashed #535356;
- background-color: #1e1e21;
+ border: 2px dashed #535356;
+ background-color: #1e1e21;
}
/* WELL*/
.well {
-
- background-color: #333;
- border: 1px solid #333;
+ background-color: #333;
+ border: 1px solid #333;
}
/* INTERFACE */
.interface, .interface-admindown, a.interface-admindown, a.interface-admindown:visited, .interface-updown, a.interface-updown, a.interface-updown:visited, .interface-upup, a.interface-upup {
- color: #bcca1f;
+ color: #bcca1f;
}
/* dropdwon menu divider*/
.dropdown-menu .divider {
-
- background-color: #292929;
+ background-color: #292929;
}
/* OVERLIB BG*/
.overlib-contents {
- background: inherit;
- background-color: #333;
- color:cyan;
- padding: 0;
- margin: 0;
+ background: inherit;
+ background-color: #333;
+ color:cyan;
+ padding: 0;
+ margin: 0;
}
.devices-overlib-box {
- background-color: #292929;
+ background-color: #292929;
}
/*border of overlib different than content*/
#overDiv {
- z-index: 1200 !important;
- border: solid 1px #777;
- background-color: #333;
- padding: 5px;
- border-radius: 4px;
- box-shadow: 0 5px 15px rgba(0,0,0,.5);
+ z-index: 1200 !important;
+ border: solid 1px #777;
+ background-color: #333;
+ padding: 5px;
+ border-radius: 4px;
+ box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.overlib-text {
@@ -711,18 +674,18 @@ legend {
}
.minigraph-div {
- display: block;
- padding: 3px;
- margin: 3px;
- min-width: 183px;
- max-width:183px;
- min-height:90px;
- max-height:90px;
- text-align: center;
- float: left;
- background-color: #333;
- border:solid 1px;
- border-color:#777;
+ display: block;
+ padding: 3px;
+ margin: 3px;
+ min-width: 183px;
+ max-width:183px;
+ min-height:90px;
+ max-height:90px;
+ text-align: center;
+ float: left;
+ background-color: #333;
+ border:solid 1px;
+ border-color:#777;
}
/* graph general */
@@ -740,18 +703,18 @@ legend {
/*query builder*/
.query-builder .rule-container, .query-builder .rule-placeholder, .query-builder .rules-group-container {
- background-color:#000;
+ background-color:#000;
}
/* tool tip MAP */
div.vis-tooltip {
- color: #fff;
- background-color: #333;
+ color: #fff;
+ background-color: #333;
}
/* FOOTER */
.panel-footer {
- background-color: black;
+ background-color: black;
}