diff --git a/CSS/themes/graforg-dashboard.css b/CSS/themes/graforg-dashboard.css new file mode 100644 index 00000000..7133f0d3 --- /dev/null +++ b/CSS/themes/graforg-dashboard.css @@ -0,0 +1,225 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GRAFANA THEME FOR ORGANIZR DASHBOARD INTEGRATION */ +body { + color: #FFFFFF !important; + background-color: transparent !important; +} +.main-view { + background: linear-gradient(180deg,#ffffff00 10px,#ffffff00 100px) !important; +} +div.flot-text { + color: #FFF !important; +} +/* Loading page */ +.theme-dark, .theme-light, .preloader { + background: transparent !important; +} + +/* login page */ +.login-branding { + border-right: none !important; +} + +/* sidemenu */ +.sidemenu-open .sidemenu { + background: rgba(0, 0, 0, .25) !important; +} +.sidemenu__logo:hover { + background: rgba(0, 0, 0, .25) !important; +} +.sidemenu-item.active, .sidemenu-item:hover { + background-color: rgba(0, 0, 0, .25) !important; +} + +/* Dashboard dropdown menu */ +.search-dropdown__col_1 { + background: transparent !important; +} +.search-container { + left: 0px !important; +} +.navbar-page-btn { + color: #FFF !important; +} + +/* Panel fullscreen navbar */ +.panel-in-fullscreen .navbar { + background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)) !important; +} + +/* Dashboard search menu */ +.search-field-wrapper { + background-color: #1f1f1f !important; + 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)) !important; +} +.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 !important; +} +.gf-form-select-wrapper .gf-form-input { + background-color: #393a3b !important; +} + +/* Variable label color */ +.template-variable { + color: #f79520 !important; +} + +/* Variable label box */ +.gf-form-label { + background-color: rgba(0, 0, 0, 0.25) !important; + border: none !important; + color: #FFF; +} +.gf-form-input:focus { + color: #FFF !important; + background-color: #262626 !important; + border: none !important; + box-shadow: none !important; +} +.variable-option.highlighted, .variable-option:hover { + background-color: hsla(0,0%,100%,.1) !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: #FFF !important; + background-color: rgba(0, 0, 0, 0.25) !important; + background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important; + border: none !important; +} + +/* Custom Range Refreshing every X Dropdown */ +.gf-timepicker-absolute-section select { + background-color: #393a3b !important; +} + +/* PANEL BACKGROUND COLOR*/ +.panel-container { + background-color: rgba(0, 0, 0, .25); + border: transparent; +} +.panel-container.panel-transparent { + background-color: transparent; + border: transparent; +} +.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: transparent !important; +} + +/* Panel text color*/ +div.flot-text { + color: #FFF !important; +} + +/* panel loading circle*/ +.panel-loading { + color: #FFF !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; +} +/* table panel border size */ +.table-panel-table td { + padding: .45em 0 .45em 1.1em; + border-bottom: 1px solid #171819; + border-right: 1px solid #171819; +} +/* Edit panel tabs */ +.tabbed-view-header { + box-shadow: none; + background: rgba(0, 0, 0, 0.25); + border-bottom: none; +} +.tabbed-view-panel-title { + padding-left: 10px; +} +/* worldmap zoom buttons and leaflet */ +.leaflet-bar a, .leaflet-bar a:hover { + background-color: #1f1f1f !important; + border-bottom: 1px solid #1f1f1f !important; + color: white !important; +} +.leaflet-bar a:hover { + background-color: #1b1b1b !important; +} +.leaflet-control-attribution { + display: none; +} +/* New Dashboard */ +.add-panel__item { + background: linear-gradient(135deg,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.25)); + box-shadow: -1px -1px 0 0 hsla(0,0%,100%,.1), 1px 1px 0 0 rgba(0, 0, 0, 0); +} +.add-panel__item.active, .add-panel__item:hover { + background: linear-gradient(135deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)); +} +.add-panel__header { + background: rgba(0, 0, 0, 0.25); + box-shadow: none; + border-bottom: 0px; +}