From 9333de8dbb284abe0ff03390e5eda021c00e1b94 Mon Sep 17 00:00:00 2001 From: Christophe K <ckforall@gmail.com> Date: Sat, 1 Jun 2019 01:16:39 +0200 Subject: [PATCH] Basic file CSS for librenms dark theme --- html/css/custom/styles.css | 448 +++++++++++++++++++++++++++++++++++++ 1 file changed, 448 insertions(+) create mode 100644 html/css/custom/styles.css diff --git a/html/css/custom/styles.css b/html/css/custom/styles.css new file mode 100644 index 0000000..0eac91a --- /dev/null +++ b/html/css/custom/styles.css @@ -0,0 +1,448 @@ +/* Not finished */ +/*----------------------- +# Create by ckforum +# june 2019 +# release 1.9 +# thanks to yoyo +------------------------*/ + +/* INSTALLATION ADD THIS BELOW TO YOUR CONFIG.PHP */ + +/* SEEE MORE @ https://github.com/librenms/librenms/blob/master/includes/defaults.inc.php */ +/* + +### DARK MODE +// rtext 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%) +$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'] = false; + +### 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"; +*/ + + + +@media (prefers-color-scheme: dark) { + img { + opacity: .75; + transition: opacity .5s ease-in-out; + } + img:hover { + opacity: 1; + } +} + +html { + --text-color-normal: #0a244d; + --text-color-light: #8cabd9; +} + +html[data-theme='dark'] { + --text-color-normal: hsl(210, 10%, 62%); + --text-color-light: hsl(210, 15%, 35%); + --text-color-richer: hsl(210, 50%, 72%); + --text-color-highlight: hsl(25, 70%, 45%); +} + +/* SCROLL BAR*/ + +::-webkit-scrollbar { + width: 8px; +} + +::-moz-scrollbar { + 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; +} + +::-moz-scrollbar-track { + -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); +} + +::-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); +} + + +::-webkit-scrollbar-thumb:window-inactive { + background: rgba(255,0,0,0.4); +} +::-moz-scrollbar-thumb:window-inactive { + background: rgba(255,0,0,0.4); +} + +/* end Scroll */ + + + + + +body { + background-color: #070707; + color: white; +} +@media screen and (prefers-color-scheme: light) { + body { + background-color: white; + color: black; + } +} + + +a:hover { + background-color: grey; +} + + +.gridster { + background-color: black; +} + + +.devices-headers-table-menu { + background-color:#000; +} + +.panel { + background-color:#333; + +} + +.panel>.panel-collapse>.table, .panel>.table, .panel>.table-responsive>.table { + background-color: black; + color: yellow; +} + +.panel-default { + border-color: #333; +} + +.panel-default>.panel-heading { + border-color: #777777; +} +.panel-default>.panel-heading { +background-color: #777777; +} + + +A.grey:visited, A.grey, .grey { + color: #8aaad6; +} + +.navbar-inverse { + background-color: #2a2a2a; +} + +.table-responsive .bootgrid-table td, .table-responsive .bootgrid-table th>.column-header-anchor>.text { + color: yellow; +} + +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: #2b2626; +} + +.form-control { + background-color: #000; +} + +.nav-tabs { + border-bottom: 1px solid #333; +} + +.edit-widget, .close-widget { cursor: pointer; } +.widget_body { + background-color: #333333; + color: wheat; +} + +.widget_header { + background-color: #777777; +} + +.icon-theme { + color: #f3f3f3; +} + + +.device-overview>.panel-body>.row:nth-child(odd) { + background-color: #333333; +} +.device-overview>.panel-body>.row:nth-child(odd) { + background-color: #333333; +} + +.devices-graphs-select { + background-color: black; +} + + +.device-head, a.list-device { + color: #77a7d2; +} + +.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { + background-color: black; +} + + + +.dropdown-menu { + color : white; + background-color: #6b6666; + +} + +.dropdown-menu>li>a { + + color: #fffefe; +} + +.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder { + color: #999; + background-color: black; +} + +.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn { + background-color: black; + color: wheat; +} + +.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection { + background-color: black; +} + +.select2-container--bootstrap .select2-selection--single { + background-color: black; + border-style: solid; + border-color: #333; +} + +.select2-container--default .select2-selection--single .select2-selection__rendered { + 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; +} + + +button, input, optgroup, select, textarea { + background-color: black; +} + + +.gridster .gs-w { + background: #202020; +} + +A.black:visited, A.black, .black { + color: #fff1f1; +} + +.interface-upup, a.interface-upup { + color: #9dfd8e; +} + + +.bootgrid-footer .search .glyphicon, .bootgrid-header .search .glyphicon { + + background-color: black; +} + +.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;; +} + +.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; +} + +.table>thead>tr>th { + + border-bottom: 2px solid #3e3939; +} + + +.table-responsive .bootgrid-table td, .table-responsive .bootgrid-table th>.column-header-anchor>.text { + color: white; + background-color: #333333; +} +.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover { + + background-color: black; +} + +.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; +} +.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; +} + +.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; +} + + + +.device-table-metrics span { + color: white; +} + +.btn-default { + color: #ada5a5; + background-color: #000; + border-color: #313131; +} + +.input-group-addon:first-child { + 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; +} + +.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; +} + + + +.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { + color: #fff; + background-color: #333; + border: 1px solid #333; + border-bottom-color: transparent; +} + +.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; +} + +.bootgrid-table td.loading, .bootgrid-table td.no-results { + 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: 8px; + 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; +} + +.list-group-item { + + background-color: #020202; + +} + +.form-control { + + border: 1px solid #222; + +} + +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; +} + +.bg-danger { + background-color: #ad3636; +} + +hr { + border: 0px; + height: 1px; + background-color: #333; + color: #ccc; +} + +/* FOOTER */ + +.panel-footer { + background-color: black; +} -- GitLab