Private GIT

Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
1 result

styles.css

Blame
    • styles.css 13.04 KiB 
    /* Not finished */
/*--------------------------------------------------
# Create by ckforum
# june 2019
# release 2.0
# 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 {
  --body-bg: dark;
  --body-color: white;
  --anchor-color: red;
  --letter-spacing: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: black;
    --body-color: white;
    --anchor-color: salmon;
    --letter-spacing: 0.1;
  }
}


@media screen and (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

@media (prefers-color-scheme: dark) {
  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}
    
html {
  --text-color-normal: #ffffff;
  --text-color-light: #85ace6;
}

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: dark) {
  body {
    background-color: black;
    color: white;
  }
}


a:hover {
  background-color: #777;
}


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

select2-container--default .select2-results>.select2-results__options {

    background-color: #333;
    border: 1px;
    border-color: #333;
}

.select2-search--dropdown {
    
    background-color: #333;
}

.select2-results {
    
    background-color: #333;
}

.select2-container--default .select2-selection--single {
    background-color: #333;
    border: 1px solid #333;
    border-radius: 4px;
}

/* device dependencies */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
     background-color: black;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #333 1px;
}

.select2-container--default .select2-selection--multiple {
    background-color: white;
    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;
 }

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #212020;
}

/* buttons ETC..*/
button, input, optgroup, select, textarea {
    background-color: black;
    border-color: #333;
    border: 1px;
}


.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 */

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


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

.table-bordered {
    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;
}

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

.bootgrid-table th>.column-header-anchor>.text {

    color: white;
}

.text-left {
 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;
}

.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 INPUT*/
.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;
    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: 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;
}

/*TD TH*/
td, th {
 
    background-color: #333;
}

.list-group-item {
 
    background-color: #020202;
 
}

.tabcontent {
    background-color: #333;
}

/* Grid and ETC*/
.vis-time-axis .vis-text {
    color: #fff;
}

.vis-timeline {
    border: 1px solid #444;
}
.vis-major, .vis-grid, .vis-panel, .vis-background, .vis-horizontal   {

}

/* FORM */

.form-control {
 
    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;
}

.bg-danger {
    background-color: #ad3636;
}

hr {
    border: 0px;
    height: 1px;
    background-color: #333;
    color: #ccc;
}
    
/* MODALE*/

.modal-header {

    border-bottom: 1px solid #2d2626;
}

.modal-content {
 
    background-color: #333;
    border: 1px solid #333;
    border: 1px solid rgba(0,0,0,.2);
   
}

.modal-footer {
 
    border-top: 1px solid #252222;
}

/* LEGEND */

legend {
    padding: 5px;
    color: #fff;
    border-bottom: 1px solid #333;
}

/* INFOBOX RRD*/
.infobox .rrd-pre {
    background-color: #2f2e2e;
    font-size: 11px;
    white-space: pre-wrap;
}

.infobox, .infobox-down {
    border: 2px dashed #535356;
    background-color: #1e1e21;
}

/* WELL*/

.well {

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

/* dropdwon menu divider*/
.dropdown-menu .divider {

    background-color: #292929;
}

/* OVERLIB BG*/
.overlib-contents {
    background: inherit;
    background-color: #333;
    color:cyan;
    padding: 0; 
    margin: 0; 
}
    
.devices-overlib-box {
    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);
}

/* FOOTER */

.panel-footer {
    background-color: black;
}

    Another place to be (or not)