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