mirror of
https://github.com/gilbN/theme.park.git
synced 2024-10-03 22:17:08 +02:00
theme.park v1
This commit is contained in:
GilbN
parent
47328942c5
commit
822b9dc6ed
167
CSS/themes/grafblur.css
Normal file
167
CSS/themes/grafblur.css
Normal file
@ -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;
|
||||
}
|
||||
153
CSS/themes/graforg.css
Normal file
153
CSS/themes/graforg.css
Normal file
@ -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;
|
||||
}
|
||||
109
CSS/themes/monitorg.css
Normal file
109
CSS/themes/monitorg.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
90
CSS/themes/netblur.css
Normal file
90
CSS/themes/netblur.css
Normal file
@ -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;
|
||||
}
|
||||
78
CSS/themes/netorg.css
Normal file
78
CSS/themes/netorg.css
Normal file
@ -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;
|
||||
}
|
||||
335
README.md
335
README.md
@ -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>
|
||||
|
||||
BIN
Resources/blur-light-dark.png
Normal file
BIN
Resources/blur-light-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
Resources/blur-light.png
Normal file
BIN
Resources/blur-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
Resources/blur-noise.png
Normal file
BIN
Resources/blur-noise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
Screenshots/graforg/1.jpg
Normal file
BIN
Screenshots/graforg/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
BIN
Screenshots/graforg/2.jpg
Normal file
BIN
Screenshots/graforg/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
Screenshots/graforg/3.jpg
Normal file
BIN
Screenshots/graforg/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
Screenshots/graforg/4.png
Normal file
BIN
Screenshots/graforg/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
Screenshots/monitorg/1.jpg
Normal file
BIN
Screenshots/monitorg/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
Screenshots/monitorg/2.jpg
Normal file
BIN
Screenshots/monitorg/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
Screenshots/monitorg/3.jpg
Normal file
BIN
Screenshots/monitorg/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
Screenshots/monitorg/4.jpg
Normal file
BIN
Screenshots/monitorg/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
Screenshots/netorg/1.jpg
Normal file
BIN
Screenshots/netorg/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
BIN
Screenshots/netorg/2.jpg
Normal file
BIN
Screenshots/netorg/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
Loading…
Reference in New Issue
Block a user