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; }