From 9c31a7c18d09e5c673f7715b45f7e46985b11537 Mon Sep 17 00:00:00 2001 From: GilbN Date: Fri, 21 Dec 2018 23:46:37 +0100 Subject: [PATCH] added side menu on graforg added versions without side menus --- CSS/themes/graforg.css | 13 +- CSS/themes/graforg_no_side_menu.css | 160 +++++++++++++++++++ CSS/themes/grafplex_no_side_menu.css | 221 +++++++++++++++++++++++++++ 3 files changed, 391 insertions(+), 3 deletions(-) create mode 100644 CSS/themes/graforg_no_side_menu.css create mode 100644 CSS/themes/grafplex_no_side_menu.css diff --git a/CSS/themes/graforg.css b/CSS/themes/graforg.css index 84caf046..2a3ece2b 100644 --- a/CSS/themes/graforg.css +++ b/CSS/themes/graforg.css @@ -13,9 +13,16 @@ div.flot-text { .theme-dark, .theme-light, .preloader { background: #1f1f1f !important; } -/* Hide sidemenu */ -.sidemenu { - display: 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 */ diff --git a/CSS/themes/graforg_no_side_menu.css b/CSS/themes/graforg_no_side_menu.css new file mode 100644 index 00000000..84caf046 --- /dev/null +++ b/CSS/themes/graforg_no_side_menu.css @@ -0,0 +1,160 @@ +/* GRAFANA ORG THEME */ +body { + color: #FFFFFF !important; + background-color: #1f1f1f !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: #1f1f1f !important; +} +/* Hide sidemenu */ +.sidemenu { + display: none !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: rgba(0, 0, 0, .25); + 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; +} diff --git a/CSS/themes/grafplex_no_side_menu.css b/CSS/themes/grafplex_no_side_menu.css new file mode 100644 index 00000000..d3eb4443 --- /dev/null +++ b/CSS/themes/grafplex_no_side_menu.css @@ -0,0 +1,221 @@ +/* GRAFANA BLUR THEME */ +body { + background-image: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), + url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-light.png") !important; + 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) !important; + color:#FFFFFF !important; +} +.theme-dark, .theme-light, .preloader { + background-image: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), + url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-light.png") !important; + background-repeat: repeat, no-repeat!important; + background-attachment: fixed, fixed!important; + background-position: center center, center center!important; + background-size: auto, cover!important; + -webkit-background-size: auto, cover!important; + -moz-background-size: auto, cover!important; + -o-background-size: auto, cover!important; +} +.page-header-canvas { + background: rgba(0, 0, 0, 0.25) !important; + box-shadow: none !important; + border-bottom: none !important; +} +.main-view { + background: linear-gradient(180deg,#ffffff00 10px,#ffffff00 100px) !important; +} + +/* login page */ +.login { +background-image: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), +url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-light.png") !important; +background-repeat: repeat, no-repeat!important; +background-attachment: fixed, fixed!important; +background-position: center center, center center!important; +background-size: auto, cover!important; +-webkit-background-size: auto, cover!important; +-moz-background-size: auto, cover!important; +-o-background-size: auto, cover!important; +background-color: rgba(0,0,0,.0) !important; +color:#FFFFFF !important; +} +.login-branding { + border-right: none !important; +} +/* Configuration menu */ +.card-item { + background: rgba(0, 0, 0, .25) !important; +} +.card-item:hover { + background: hsla(0,0%,100%,.08) !important; +} +.card-item-sub-name, .card-item-type { + color: #FFF !important; +} +.gf-form--has-input-icon .gf-form-input-icon { + color: #fff !important; +} +.gf-tabs-link.active, .gf-tabs-link.active:focus, .gf-tabs-link.active:hover { + background: rgba(0, 0, 0, 0.25) !important; +} +.filter-table tbody tr:nth-child(odd) { + background: hsla(0,0%,100%,.08) !important; +} +.cta-form { + background-color: rgba(0, 0, 0, 0.25) !important; +} +.empty-list-cta { + background-color: rgba(0, 0, 0, .25) !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: #FFFFFF !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>input { + height: 55px !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: #00000000 !important; +} +.gf-form-select-wrapper { + background-color: hsla(0,0%,100%,.08) !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; +} +.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: #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; +} + +/* PANEL BACKGROUND COLOR*/ +.panel-container { + background-color: rgba(0, 0, 0, .25); + border: transparent; +} +.panel-container.panel-transparent { + background-color: rgba(0, 0, 0, .25); + 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: 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; +}