GilbN
7 years ago
19 changed files with 931 additions and 1 deletions
@ -0,0 +1,167 @@ |
|||
/* GRAFANA BLUR THEME */ |
|||
body { |
|||
background-image: url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-light.png"); |
|||
background-repeat: repeat, no-repeat; |
|||
background-attachment: fixed, fixed; |
|||
background-position: center center, center center; |
|||
background-size: auto, cover; |
|||
-webkit-background-size: auto, cover; |
|||
-moz-background-size: auto, cover; |
|||
-o-background-size: auto, cover; |
|||
background-color: rgba(0,0,0,.0); |
|||
color:#FFFFFF; |
|||
} |
|||
.main-view { |
|||
background: linear-gradient(180deg,#ffffff00 10px,#ffffff00 100px) !important; |
|||
} |
|||
|
|||
/* sidemenu */ |
|||
.sidemenu-open .sidemenu { |
|||
background: rgba(0, 0, 0, .25); |
|||
} |
|||
.sidemenu__logo:hover { |
|||
background: rgba(0, 0, 0, .25); |
|||
} |
|||
.sidemenu-item.active, .sidemenu-item:hover { |
|||
background-color: rgba(0, 0, 0, .25); |
|||
} |
|||
|
|||
/* Dashboard dropdown menu */ |
|||
.search-dropdown__col_1 { |
|||
background: rgba(0, 0, 0, 0) !important; |
|||
} |
|||
.search-container { |
|||
left: 0px !important; |
|||
} |
|||
.navbar-page-btn { |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
/* Panel fullscreen navbar */ |
|||
.panel-in-fullscreen .navbar { |
|||
background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)); |
|||
} |
|||
|
|||
/* Dashboard search menu */ |
|||
.search-field-wrapper { |
|||
background-image: url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-light.png"); |
|||
background-repeat: repeat, no-repeat; |
|||
background-attachment: fixed, fixed; |
|||
background-position: center center, center center; |
|||
background-size: auto, cover; |
|||
-webkit-background-size: auto, cover; |
|||
-moz-background-size: auto, cover; |
|||
-o-background-size: auto, cover; |
|||
background-color: rgba(0,0,0,.0); |
|||
box-shadow: none !important; |
|||
} |
|||
.search-field-wrapper>input { |
|||
height: 55px !important; |
|||
background-color: rgba(0, 0, 0, 0.25) !important; |
|||
} |
|||
.search-field-icon { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
|
|||
/* Dashboard settings menu */ |
|||
.dashboard-settings__aside { |
|||
background: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
.dashboard-page--settings-open .navbar { |
|||
background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)); |
|||
} |
|||
.navbar-button--primary { |
|||
border-color: #ffffff00 !important; |
|||
} |
|||
.dashboard-settings__aside-header { |
|||
color: #ffffff !important; |
|||
} |
|||
.dashboard-settings__nav-item { |
|||
color: #ffffff !important; |
|||
} |
|||
.bootstrap-tagsinput { |
|||
background-color: #09090b; |
|||
} |
|||
.gf-form-select-wrapper .gf-form-input { |
|||
background-color: #393a3b !important; |
|||
} |
|||
|
|||
/* Variable label color */ |
|||
.template-variable { |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
/* Variable label box */ |
|||
.gf-form-label { |
|||
background-color: rgba(0, 0, 0, 0.25) !important; |
|||
border: none !important; |
|||
} |
|||
|
|||
/* Variable dashboard dropdown */ |
|||
.variable-value-link { |
|||
padding: 7.4px 10px !important; |
|||
background-color: rgba(0, 0, 0, 0.25) !important; |
|||
border: none !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
/* Variable input box */ |
|||
.gf-form-input { |
|||
color: #FFFFFF !important; |
|||
background-color: rgba(255, 255, 255, 0.15) !important; |
|||
border: 0px solid #262628 !important; |
|||
|
|||
} |
|||
|
|||
/* NAVBAR BUTTONS */ |
|||
.navbar-button { |
|||
color: #FFFFFF !important; |
|||
background-color: #00000040 !important; |
|||
background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important; |
|||
} |
|||
|
|||
/* Custom Range Refreshing every X Dropdown */ |
|||
.gf-timepicker-absolute-section select { |
|||
background-color: #393a3b !important; |
|||
} |
|||
.gf-form-input:focus { |
|||
box-shadow: none !important; |
|||
} |
|||
|
|||
/* PANEL BACKGROUND COLOR*/ |
|||
.panel-container { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
border: 1px solid rgba(255, 255, 255, 0.1) !important; |
|||
} |
|||
.panel-container.panel-transparent { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
.panel-header:hover { |
|||
background-color: rgba(0, 0, 0, 0.25) !important; |
|||
} |
|||
/* ////PANEL BACKGROUND COLOR//// */ |
|||
|
|||
.graph-legend-table .graph-legend-series:nth-child(odd) { |
|||
background: rgba(0, 0, 0, 0) !important; |
|||
} |
|||
|
|||
/* Panel text color*/ |
|||
div.flot-text { |
|||
color: #ffffff!important; |
|||
} |
|||
|
|||
/* panel loading circle*/ |
|||
.panel-loading { |
|||
color: #ffffff!important; |
|||
} |
|||
|
|||
/* panel resize arrow */ |
|||
.theme-dark .react-grid-item>.react-resizable-handle:after { |
|||
border-right: 2px solid #fff !important; |
|||
border-bottom: 2px solid #fff !important; |
|||
} |
|||
|
|||
/* table panel background color */ |
|||
.table-panel-container { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
@ -0,0 +1,153 @@ |
|||
/* GRAFANA ORG THEME */ |
|||
body { |
|||
color: #FFFFFF !important; |
|||
background-color: rgba(0, 0, 0, 0) !important; |
|||
} |
|||
.main-view { |
|||
background: linear-gradient(180deg,#ffffff00 10px,#ffffff00 100px) !important; |
|||
} |
|||
|
|||
/* Hide sidemenu */ |
|||
.sidemenu { |
|||
display: none !important; |
|||
} |
|||
|
|||
/* Dashboard dropdown menu */ |
|||
.search-dropdown__col_1 { |
|||
background: rgba(0, 0, 0, 0) !important; |
|||
} |
|||
.search-container { |
|||
left: 0px !important; |
|||
} |
|||
.navbar-page-btn { |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
/* Panel fullscreen navbar */ |
|||
.panel-in-fullscreen .navbar { |
|||
background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)); |
|||
} |
|||
|
|||
/* Dashboard search menu */ |
|||
.search-field-wrapper { |
|||
background-image: url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/GrafOrg/master/Resources/blur-light.png"); |
|||
background-repeat: repeat, no-repeat; |
|||
background-attachment: fixed, fixed; |
|||
background-position: center center, center center; |
|||
background-size: auto, cover; |
|||
-webkit-background-size: auto, cover; |
|||
-moz-background-size: auto, cover; |
|||
-o-background-size: auto, cover; |
|||
background-color: rgba(0,0,0,.0); |
|||
box-shadow: none !important; |
|||
} |
|||
.search-field-wrapper>input { |
|||
height: 55px !important; |
|||
background-color: rgba(0, 0, 0, 0.25) !important; |
|||
} |
|||
.search-field-icon { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
|
|||
/* Dashboard settings menu */ |
|||
.dashboard-settings__aside { |
|||
background: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
.dashboard-page--settings-open .navbar { |
|||
background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)); |
|||
} |
|||
.navbar-button--primary { |
|||
border-color: #ffffff00 !important; |
|||
} |
|||
.dashboard-settings__aside-header { |
|||
color: #ffffff !important; |
|||
} |
|||
.dashboard-settings__nav-item { |
|||
color: #ffffff !important; |
|||
} |
|||
.bootstrap-tagsinput { |
|||
background-color: #09090b; |
|||
} |
|||
.gf-form-select-wrapper .gf-form-input { |
|||
background-color: #393a3b !important; |
|||
} |
|||
|
|||
/* Variable label color */ |
|||
.template-variable { |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
/* Variable label box */ |
|||
.gf-form-label { |
|||
background-color: rgba(0, 0, 0, 0.25) !important; |
|||
border: none !important; |
|||
} |
|||
|
|||
/* Variable dashboard dropdown */ |
|||
.variable-value-link { |
|||
padding: 7.4px 10px !important; |
|||
background-color: rgba(0, 0, 0, 0.25) !important; |
|||
border: none !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
/* Variable input box */ |
|||
.gf-form-input { |
|||
color: #FFFFFF !important; |
|||
background-color: rgba(255, 255, 255, 0.15) !important; |
|||
border: 0px solid #262628 !important; |
|||
|
|||
} |
|||
|
|||
/* NAVBAR BUTTONS */ |
|||
.navbar-button { |
|||
color: #FFFFFF !important; |
|||
background-color: #00000040 !important; |
|||
background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important; |
|||
} |
|||
|
|||
/* Custom Range Refreshing every X Dropdown */ |
|||
.gf-timepicker-absolute-section select { |
|||
background-color: #393a3b !important; |
|||
} |
|||
.gf-form-input:focus { |
|||
box-shadow: none !important; |
|||
} |
|||
|
|||
/* PANEL BACKGROUND COLOR*/ |
|||
.panel-container { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
border: 1px solid rgba(255, 255, 255, 0.1) !important; |
|||
} |
|||
.panel-container.panel-transparent { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
.panel-header:hover { |
|||
background-color: rgba(0, 0, 0, 0.25) !important; |
|||
} |
|||
/* ////PANEL BACKGROUND COLOR//// */ |
|||
|
|||
.graph-legend-table .graph-legend-series:nth-child(odd) { |
|||
background: rgba(0, 0, 0, 0) !important; |
|||
} |
|||
|
|||
/* Panel text color*/ |
|||
div.flot-text { |
|||
color: #ffffff!important; |
|||
} |
|||
|
|||
/* panel loading circle*/ |
|||
.panel-loading { |
|||
color: #ffffff!important; |
|||
} |
|||
|
|||
/* panel resize arrow */ |
|||
.theme-dark .react-grid-item>.react-resizable-handle:after { |
|||
border-right: 2px solid #fff !important; |
|||
border-bottom: 2px solid #fff !important; |
|||
} |
|||
|
|||
/* table panel background color */ |
|||
.table-panel-container { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
@ -0,0 +1,109 @@ |
|||
body { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
.container { |
|||
max-width: 100% !important; |
|||
padding-right: 2rem !important; |
|||
} |
|||
#stats { |
|||
background-color: rgba(0,0,0,.15) !important; |
|||
padding-left: .0rem !important; |
|||
padding-right: 1.11rem !important; |
|||
} |
|||
#hd { |
|||
padding-left: 0.8rem !important; |
|||
} |
|||
.double-val-label>span.success { |
|||
background-color: #28a745 !important; |
|||
} |
|||
.servicetile:hover, .servicetile:focus { |
|||
text-shadow: 0 0 20px #000; |
|||
} |
|||
#servicetitle:hover, #servicetitle:focus { |
|||
text-shadow: 0 0 20px #000; |
|||
} |
|||
#servicetitle { |
|||
color: #fff !important; |
|||
} |
|||
.btnoffline, .btnunknown, .btnonline { |
|||
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; |
|||
-webkit-box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.9) !important; |
|||
} |
|||
.btnonline { |
|||
background-color: #28a745 !important; |
|||
} |
|||
#time { |
|||
background-color: rgba(0,0,0,.15) !important; |
|||
color: #fff !important; |
|||
} |
|||
#slidertable { |
|||
background-color: rgba(0,0,0,.15) !important |
|||
} |
|||
#textslider { |
|||
color: #fff !important; |
|||
} |
|||
.dtg { |
|||
color: #fff !important; |
|||
} |
|||
.datemin { |
|||
color: #fff !important; |
|||
} |
|||
#center { |
|||
background-color: rgba(0,0,0,.0) !important; |
|||
box-shadow: 0px 0px 0px 0px #ffffff00, 0px 0px 0px 0px #ffffff00, 10px 0px 10px 0px #ffffff00, -10px 0px 10px 2px #ffffff00 !important; |
|||
} |
|||
.col-lg-4 { |
|||
background-color: rgba(0,0,0,.15) !important; |
|||
margin: 1rem .1rem 1.5rem 1rem !important; |
|||
width: 9rem !important; |
|||
} |
|||
#clock { |
|||
background-color: rgba(0,0,0,.15) !important; |
|||
color: #fff !important; |
|||
} |
|||
.date { |
|||
color: #fff !important; |
|||
} |
|||
#summary { |
|||
background-color: #e84242 !important; |
|||
border-radius: 23px 22px 22px 23px/23px 23px 22px 22px; |
|||
box-shadow: 0px 2px 5px rgb(15, 15, 15) !important; |
|||
} |
|||
.pace, .pace-progress { |
|||
background: rgba(0,0,0,.15) !important; |
|||
} |
|||
.pace, .pace-progress-inner { |
|||
box-shadow: 0 0 10px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.15) !important; |
|||
} |
|||
.footer { |
|||
color: transparent !important; |
|||
} |
|||
.footer:hover { |
|||
text-shadow: 0 0 15px transparent !important; |
|||
} |
|||
#footer { |
|||
color: transparent !important; |
|||
} |
|||
.alpaca-control-label, .alpaca-control.radio { |
|||
color: black !important; |
|||
} |
|||
.navbar-brand { |
|||
text-shadow: 0 0 15px #000000 !important; |
|||
} |
|||
.Rtable-cell { |
|||
color: #000000 !important; |
|||
} |
|||
#colorkey { |
|||
color: #000000 !important; |
|||
} |
|||
@media only screen and (max-width: 775px) { |
|||
#slidertable { |
|||
display: none !important; |
|||
} |
|||
|
|||
#time { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,90 @@ |
|||
body { |
|||
background-image: url("https://cdn.rawgit.com/gilbN/NetOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/NetOrg/master/Resources/blur-light.png"); |
|||
background-repeat: repeat, no-repeat; |
|||
background-attachment: fixed, fixed; |
|||
background-position: center center, center center; |
|||
background-size: auto, cover; |
|||
-webkit-background-size: auto, cover; |
|||
-moz-background-size: auto, cover; |
|||
-o-background-size: auto, cover; |
|||
color: #ffffff !important; |
|||
} |
|||
/* Navbar */ |
|||
.navbar-default { |
|||
background-image: url("https://cdn.rawgit.com/gilbN/NetOrg/master/Resources/blur-noise.png"), url("https://cdn.rawgit.com/gilbN/NetOrg/master/Resources/blur-light-dark.png"); |
|||
background-repeat: repeat, no-repeat; |
|||
background-attachment: fixed, fixed; |
|||
background-position: center center, center center; |
|||
background-size: auto, cover; |
|||
-webkit-background-size: auto, cover; |
|||
-moz-background-size: auto, cover; |
|||
-o-background-size: auto, cover; |
|||
} |
|||
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
color: #ffffff !important; |
|||
} |
|||
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
.navbar-default, .navbar-inverse { |
|||
border: 0px solid rgba(0, 0, 0, 0.6) !important; |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) !important; |
|||
} |
|||
.navbar-default .navbar-brand { |
|||
color: #ffffff !important; |
|||
} |
|||
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { |
|||
color: #ffffff !important; |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
.navbar-default .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a { |
|||
border-right: 1px solid rgba(0, 0, 0, 0) !important; |
|||
border-left: 1px solid rgba(0, 0, 0, 0) !important; |
|||
color: #ffffff !important; |
|||
} |
|||
.dropdown-menu { |
|||
background-color: #141a1d !important; |
|||
border: 0px !important; |
|||
} |
|||
.modal-content { |
|||
background-color: #141a1d !important; |
|||
} |
|||
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { |
|||
background-color: #141a1d !important; |
|||
} |
|||
.multi-column-dropdown li a:hover { |
|||
background-color: #141a1d !important; |
|||
} |
|||
.close, .close:hover, .close:focus { |
|||
color: #ffffff !important; |
|||
} |
|||
/* System Overview */ |
|||
.dashboard-sidebar .nav > .active > a, .dashboard-sidebar .nav > .active:hover > a, .dashboard-sidebar .nav > .active:focus > a { |
|||
color: #ff8c00 !important; |
|||
border-left: 2px solid #ff8c00 !important; |
|||
} |
|||
|
|||
/* System Overview metrics */ |
|||
.gaugeChartTitle, .gaugeChartUnits, .gaugeChartMax, .gaugeChartMin, .gaugeChartLabel, .easyPieChartTitle, .easyPieChartLabel, .easyPieChartUnits { |
|||
color: #ffffff !important; |
|||
} |
|||
.netdata-legend-value, .netdata-legend-toolbox, .netdata-legend-toolbox-button, .dygraph-axis-label { |
|||
background-color: rgba(0, 0, 0, 0) !important; |
|||
color: #ffffff !important; |
|||
} |
|||
.netdata-legend-resize-handler { |
|||
background-color: rgba(0, 0, 0, 0) !important; |
|||
color: #ffffff !important; |
|||
} |
|||
.netdata-legend-name-table-line { |
|||
border-bottom-width: 0px !important; |
|||
} |
|||
/* Sidebar */ |
|||
.dashboard-sidebar .nav > li > a { |
|||
color: #ffffff !important; |
|||
} |
|||
.dashboard-sidebar .nav > li > a:hover, .dashboard-sidebar .nav > li > a:focus { |
|||
color: #ff8c00 !important; |
|||
border-left: 1px solid #ff8c00 !important; |
|||
} |
|||
@ -0,0 +1,78 @@ |
|||
body { |
|||
background-color: rgba(0, 0, 0, 0) !important; |
|||
color: #ffffff !important; |
|||
} |
|||
|
|||
/* Navbar */ |
|||
.navbar-default { |
|||
background-color: rgba(0,0,0,.7) !important; |
|||
} |
|||
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
.navbar-default, .navbar-inverse { |
|||
border: 0px solid rgba(0, 0, 0, 0.6) !important; |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) !important; |
|||
} |
|||
.navbar-default .navbar-brand { |
|||
color: #ffffff !important; |
|||
} |
|||
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { |
|||
color: #ffffff !important; |
|||
background-color: rgba(0, 0, 0, .25) !important; |
|||
} |
|||
.navbar-default .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a { |
|||
border-right: 1px solid rgba(0, 0, 0, 0) !important; |
|||
border-left: 1px solid rgba(0, 0, 0, 0) !important; |
|||
color: #ffffff !important; |
|||
} |
|||
.dropdown-menu { |
|||
background-color: #141a1d !important; |
|||
border: 0px !important; |
|||
} |
|||
.modal-content { |
|||
background-color: #141a1d !important; |
|||
} |
|||
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { |
|||
background-color: #141a1d !important; |
|||
} |
|||
.multi-column-dropdown li a:hover { |
|||
background-color: #141a1d !important; |
|||
} |
|||
.close, .close:hover, .close:focus { |
|||
color: #ffffff !important; |
|||
} |
|||
|
|||
/* System Overview */ |
|||
.dashboard-sidebar .nav > .active > a, .dashboard-sidebar .nav > .active:hover > a, .dashboard-sidebar .nav > .active:focus > a { |
|||
color: #ff8c00 !important; |
|||
border-left: 2px solid #ff8c00 !important; |
|||
} |
|||
|
|||
/* System Overview metrics */ |
|||
.gaugeChartTitle, .gaugeChartUnits, .gaugeChartMax, .gaugeChartMin, .gaugeChartLabel, .easyPieChartTitle, .easyPieChartLabel, .easyPieChartUnits { |
|||
color: #ffffff !important; |
|||
} |
|||
.netdata-legend-value, .netdata-legend-toolbox, .netdata-legend-toolbox-button, .dygraph-axis-label { |
|||
background-color: rgba(0, 0, 0, 0) !important; |
|||
color: #ffffff !important; |
|||
} |
|||
.netdata-legend-resize-handler { |
|||
background-color: rgba(0, 0, 0, 0) !important; |
|||
color: #ffffff !important; |
|||
} |
|||
.netdata-legend-name-table-line { |
|||
border-bottom-width: 0px !important; |
|||
} |
|||
|
|||
/* Sidebar */ |
|||
.dashboard-sidebar .nav > li > a { |
|||
color: #ffffff !important; |
|||
} |
|||
.dashboard-sidebar .nav > li > a:hover, .dashboard-sidebar .nav > li > a:focus { |
|||
color: #ff8c00 !important; |
|||
border-left: 1px solid #ff8c00 !important; |
|||
} |
|||
@ -1,2 +1,335 @@ |
|||
# theme.park |
|||
A collection of themes/skins for use in conjunction with Organizr |
|||
A collection of themes/skins for use in conjunction with [Organizr](https://github.com/causefx/Organizr) |
|||
|
|||
# GrafOrg |
|||
|
|||
Custom [Grafana](https://github.com/grafana/grafana) CSS for [Organizr](https://github.com/causefx/Organizr) homepage integration. |
|||
 |
|||
## Custom CSS for Organizr |
|||
#### The graforg.css theme will mess with your Grafana base theme. And it will hide the side menu. Go to https://graforg.domain.com/datasources for settings. |
|||
|
|||
#### graforg.css is created purely for use with Organizr. |
|||
**NOTE:** When viewing Grafana in Organizr iframe it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect. |
|||
|
|||
#### grafblur.css |
|||
If you want a regular Plex theme for your Grafana setup, use the **grafblur.css** instead. |
|||
|
|||
## Setup |
|||
<details><summary>Expand</summary> |
|||
|
|||
### Screenshots |
|||
<details><summary>Expand</summary> |
|||
<p> |
|||
<img src="/Screenshots/graforg/1.jpg"></img> |
|||
<img src="/Screenshots/graforg/2.jpg"></img> |
|||
</p> |
|||
</details> |
|||
|
|||
### Subfilter |
|||
As Grafana doesn't have support for custom CSS you can get around that by using [subfilter](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx. |
|||
|
|||
Create **another** reverse proxy for monitorr and add this: |
|||
```nginx |
|||
proxy_set_header Accept-Encoding ""; |
|||
sub_filter |
|||
'</head>' |
|||
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/graforg.css"> |
|||
</head>'; |
|||
sub_filter_once on; |
|||
``` |
|||
### Here is a complete example: |
|||
```nginx |
|||
#GRAFANA CONTAINER |
|||
|
|||
# REDIRECT HTTP TRAFFIC TO https://[domain.com] |
|||
server { |
|||
listen 80; |
|||
server_name graforg.domain.com; |
|||
return 301 https://$server_name$request_uri; |
|||
} |
|||
|
|||
server { |
|||
listen 443 ssl http2; |
|||
server_name graforg.domain.com; |
|||
|
|||
include /config/nginx/ssl.conf; |
|||
|
|||
location / { |
|||
proxy_pass http://192.168.1.34:3000; |
|||
proxy_set_header Accept-Encoding ""; |
|||
sub_filter |
|||
'</head>' |
|||
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/graforg.css"> |
|||
</head>'; |
|||
sub_filter_once on; |
|||
proxy_hide_header X-Frame-Options; |
|||
proxy_set_header X-Forwarded-Host $host; |
|||
proxy_set_header X-Forwarded-Server $host; |
|||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
|||
proxy_http_version 1.1; |
|||
proxy_pass_request_headers on; |
|||
proxy_set_header Connection "keep-alive"; |
|||
proxy_store off; |
|||
} |
|||
} |
|||
``` |
|||
### Custom HTML for Organizr Homepage |
|||
Thank you [Fma965](https://gist.github.com/Fma965) for the [code](https://gist.github.com/Fma965/d30ac1fa5695304a7d6dcdc748220027) |
|||
|
|||
Change the ***Panel name*** to what you want and the ***src*** to the panel URL. |
|||
|
|||
```css |
|||
<h5><span>Panel name</span></h5> |
|||
<div class="overflowhider"><embed id="grafanadwidget1" src='https://graforg.domain.com/panel-embed-link'/>** |
|||
``` |
|||
The URL can be found by clicking **share** on the panel you want to add. |
|||
 |
|||
|
|||
If you dont want the ***Panel name*** text, just remove the `<h5><span>` line entirely. |
|||
|
|||
```css |
|||
<style> |
|||
.flex { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: transparent; |
|||
margin-top:10px; |
|||
box-shadow: none !important; |
|||
} |
|||
.flex-child { |
|||
flex: 1 1 1 1; |
|||
padding: 1px 1px 1px 1px; |
|||
} |
|||
#flex-grafanadwidget1 { |
|||
min-width: 25%; |
|||
} |
|||
#flex-grafanadwidget2 { |
|||
min-width: 25%; |
|||
} |
|||
#flex-grafanadwidget3 { |
|||
min-width: 25%; |
|||
} |
|||
#flex-grafanadwidget4 { |
|||
min-width: 25%; |
|||
} |
|||
@media only screen and (max-width: 1374px) { |
|||
#flex-grafanadwidget1, #flex-grafanadwidget2, #flex-grafanadwidget3, #flex-grafanadwidget4 { |
|||
min-width: 50%; |
|||
} |
|||
} |
|||
@media only screen and (max-width: 640px) { |
|||
#flex-grafanadwidget1, #flex-grafanadwidget2, #flex-grafanadwidget3, #flex-grafanadwidget4 { |
|||
min-width: 100%; |
|||
} |
|||
@media only screen and (max-width: 400px) { |
|||
.flex-child>h5 { |
|||
margin-left: 15px; |
|||
} |
|||
#announcementRow { |
|||
background-color:transparent !important; |
|||
} |
|||
.flex-child>h5 { |
|||
text-transform: uppercase; |
|||
font-weight: 600 !important; |
|||
font-size: 15px;important; |
|||
color: #eee; |
|||
} |
|||
.overflowhider { |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
#grafanadwidget1 { |
|||
position: relative; |
|||
height: calc(250px); |
|||
width: calc(100%); |
|||
} |
|||
#grafanadwidget2 { |
|||
position: relative; |
|||
height:calc(250px); |
|||
width:calc(100%); |
|||
} |
|||
#grafanadwidget3 { |
|||
position: relative; |
|||
height: calc(250px); |
|||
width: calc(100%); |
|||
} |
|||
#grafanadwidget4 { |
|||
position: relative; |
|||
height:calc(250px); |
|||
width:calc(100%); |
|||
} |
|||
</style> |
|||
|
|||
<div id="announcementRow" class="row"> |
|||
<div class="content-box flex"> |
|||
<div class="flex-child" id="flex-grafanadwidget1"> |
|||
<h5><span>Panel name</span></h5> |
|||
<div class="overflowhider"><embed id="grafanadwidget1" src='https://graforg.domain.com/panel-embed-link'/></div> |
|||
</div> |
|||
<div class="flex-child box-shadow" id="flex-grafanadwidget2"> |
|||
<h5><span>Panel name</span></h5> |
|||
<div class="overflowhider"><embed id="grafanadwidget2" src='https://graforg.domain.com/panel-embed-link' /></div> |
|||
</div> |
|||
<div class="flex-child" id="flex-grafanadwidget3"> |
|||
<h5><span>Panel name</span></h5> |
|||
<div class="overflowhider"><embed id="grafanadwidget3" src='https://graforg.domain.com/panel-embed-link'/></div> |
|||
</div> |
|||
<div class="flex-child box-shadow" id="flex-grafanadwidget4"> |
|||
<h5><span>Panel name</span></h5> |
|||
<div class="overflowhider"><embed id="grafanadwidget4" src='https://graforg.domain.com/panel-embed-link' /></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
``` |
|||
</details> |
|||
|
|||
*** |
|||
|
|||
# NetOrg |
|||
|
|||
Custom [Netdata](https://github.com/firehol/netdata) CSS for consistent UI in [Organizr](https://github.com/causefx/Organizr) |
|||
|
|||
 |
|||
|
|||
## Custom CSS for Organizr |
|||
#### The netorg.css theme will mess with your Netdata base theme. |
|||
|
|||
#### netorg.css is created purely for use with Organizr. |
|||
**NOTE:** When viewing Netdata in Organizr iframe it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect. |
|||
|
|||
#### netblur.css |
|||
If you want a regular Plex theme for your Netdata setup, use the **netblur.css** instead. |
|||
|
|||
## Setup |
|||
<details><summary>Expand</summary> |
|||
|
|||
### Screenshots |
|||
<details><summary>Expand</summary> |
|||
<p> |
|||
<img src="/Screenshots/netorg/1.jpg"></img> |
|||
</p> |
|||
</details> |
|||
|
|||
### Subfilter |
|||
As Netdata doesn't have support for custom CSS you can get around that by using [subfilter](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx. |
|||
|
|||
Create **another** reverse proxy for monitorr and add this: |
|||
```nginx |
|||
proxy_set_header Accept-Encoding ""; |
|||
sub_filter |
|||
'</head>' |
|||
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/netorg.css"> |
|||
</head>'; |
|||
sub_filter_once on; |
|||
``` |
|||
### Here is a complete example: |
|||
```nginx |
|||
# NETDATA CONTAINER |
|||
location ~ /netdata/(?<ndpath>.*) { |
|||
#auth_request /auth-user; |
|||
auth_request /auth-4; #=User |
|||
proxy_set_header X-Forwarded-Host $host; |
|||
proxy_set_header X-Forwarded-Server $host; |
|||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
|||
proxy_pass http://192.168.1.34:19999/$ndpath$is_args$args; |
|||
proxy_http_version 1.1; |
|||
proxy_pass_request_headers on; |
|||
proxy_set_header Connection “keep-alive”; |
|||
proxy_store off; |
|||
gzip on; |
|||
gzip_proxied any; |
|||
gzip_types *; |
|||
proxy_set_header Accept-Encoding ""; |
|||
sub_filter |
|||
'</head>' |
|||
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/netorg.css"> |
|||
</head>'; |
|||
sub_filter_once on; |
|||
} |
|||
``` |
|||
### Custom HTML for Organizr Homepage |
|||
|
|||
```css |
|||
``` |
|||
</details> |
|||
|
|||
*** |
|||
|
|||
# Monitorg |
|||
|
|||
Custom [Monitorr](https://github.com/Monitorr/Monitorr) CSS for [Organizr](https://github.com/causefx/Organizr) homepage integration. |
|||
 |
|||
|
|||
## Custom CSS for Organizr |
|||
#### This theme will mess with your Monitorr base theme. And it will hide the settings button. Go to /monitorr/settings.php for settings. |
|||
|
|||
#### It is created purely for use with Organizr. |
|||
**NOTE:** When viewing /monitorr in Organizr iframe it will follow the Organizr theme. When viewing it outside of Organizr iframe the background will be white ect. |
|||
|
|||
## Setup |
|||
<details><summary>Expand</summary> |
|||
|
|||
### Screenshots |
|||
<details><summary>Expand</summary> |
|||
<p> |
|||
<img src="/Screenshots/monitorg/1.jpg"></img> |
|||
<img src="/Screenshots/monitorg/2.jpg"></img> |
|||
<img src="/Screenshots/monitorg/3.jpg"></img> |
|||
<img src="/Screenshots/monitorg/4.jpg"></img> |
|||
</p> |
|||
</details> |
|||
|
|||
Add this in the custom css box: |
|||
```css |
|||
@import "https://rawgit.com/gilbN/theme.park/CSS/themes/monitorg.css"; |
|||
``` |
|||
And add this in custom HTML in Organizr: |
|||
```css |
|||
<div style="overflow:hidden; height:260px"> |
|||
<embed style="height:calc(100% + 50px)" width='100%' src='https://domain.com/monitorr/index.min.php' /> |
|||
</div> |
|||
``` |
|||
### Subfilter |
|||
As this theme will change the base theme, you can get around that by using [subfilter](http://nginx.org/en/docs/http/ngx_http_sub_module.html) in Nginx. |
|||
Create another reverse proxy for monitorr and add this: |
|||
```nginx |
|||
proxy_set_header Accept-Encoding ""; |
|||
sub_filter |
|||
'</head>' |
|||
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/monitorg.css"> |
|||
</head>'; |
|||
sub_filter_once on; |
|||
``` |
|||
Here is a complete example: |
|||
```nginx |
|||
#MONITORR CONTAINER |
|||
|
|||
# REDIRECT HTTP TRAFFIC TO https://[domain.com] |
|||
server { |
|||
listen 80; |
|||
server_name monitorg.domain.com; |
|||
return 301 https://$server_name$request_uri; |
|||
} |
|||
|
|||
server { |
|||
listen 443 ssl http2; |
|||
server_name monitorg.domain.com; |
|||
|
|||
#SSL settings |
|||
include /config/nginx/ssl.conf |
|||
|
|||
location / { |
|||
proxy_pass http://192.168.1.2:8701; |
|||
include /config/nginx/proxy.conf; |
|||
proxy_set_header Accept-Encoding ""; |
|||
sub_filter |
|||
'</head>' |
|||
'<link rel="stylesheet" type="text/css" href="https://rawgit.com/gilbN/theme.park/CSS/themes/monitorg.css"> |
|||
</head>'; |
|||
sub_filter_once on; |
|||
} |
|||
} |
|||
``` |
|||
</details> |
|||
|
|||
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 163 KiB |
|
After Width: | Height: | Size: 290 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 371 KiB |
|
After Width: | Height: | Size: 179 KiB |
Loading…
Reference in new issue