diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html index a727e611296..ec4bb634c59 100644 --- a/src/app/partials/dashboard_topnav.html +++ b/src/app/partials/dashboard_topnav.html @@ -5,13 +5,18 @@
- + - - - - +
+ + + + +
+ + + {{dashboard.title}} diff --git a/src/css/less/console.less b/src/css/less/console.less deleted file mode 100644 index de413b301a6..00000000000 --- a/src/css/less/console.less +++ /dev/null @@ -1,69 +0,0 @@ -.grafana-console { - position: fixed; - width: 100%; - bottom: 0px; - height: 300px; - background: @grafanaPanelBackground; - border-top: 1px solid @fullEditBorder; -} - -.grafana-console-header { - padding: 2px 5px; -} - -.grafana-console-item { - .icon-caret-right { - font-size: 14px; - color: @blue; - } - margin: 2px 0; - display: table-row; -} - -.grafana-console-body { - overflow-y: auto; - display: table; - width: 100%; -} - -.gfc-col { - display: table-cell; - padding: 2px 4px; - white-space: nowrap; - overflow: hidden; - vertical-align: middle; -} - -.grafana-console-method { - text-align: center; -} - -.grafana-console-error { - .grafana-console-method { - color: red; - } -} - -.grafana-console-field2 { - width: 90%; -} - -.grafana-console-time:before { - content: '('; - color: rgb(106, 253, 81); -} - -.grafana-console-time:after { - content: ')'; - color: rgb(106, 253, 81); -} - -.grafana-console-time { - color: rgb(162, 196, 253); -} - -.grafana-console-elapsed { - text-align: right; - color: rgb(162, 196, 253); -} - diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index abfbf8a23e9..cdfdc294043 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -1,7 +1,6 @@ @import "p_pro.less"; @import "submenu.less"; @import "graph.less"; -@import "console.less"; @import "bootstrap-tagsinput.less"; @import "tables_lists.less"; @import "search.less"; @@ -48,10 +47,6 @@ } } -.logo-icon { - width: 24px; -} - .row-button { width: 24px; } diff --git a/src/css/less/navbar.less b/src/css/less/navbar.less index 0e131c76365..7ae4b7cf5c9 100644 --- a/src/css/less/navbar.less +++ b/src/css/less/navbar.less @@ -11,48 +11,75 @@ float: left; } +.fa.top-nav-breadcrumb-icon { + margin: 17px 21px 8px 0px; + float: left; + font-size: 160%; + color: @textColor; +} + .top-nav-menu-btn { + border-radius: 50%; + background: black; display: block; float: left; - padding: 11px 9px 11px 14px; - background: @grafanaTargetBackground; - border: 1px solid rgb(55, 54, 54); - i { - font-size: 160%; - color: darken(@gray, 15%); - padding: 0px 0px 0px 0px; - position: relative; - top: 4px; + padding: 4px; + margin: 7px 6px 3px 9px; + .fa { + display: none; + } + img { + width: 30px; } &:hover { - background: lighten(@grafanaTargetBackground, 3%); + .fa { + display: block; + width: 30px; + height: 30px; + color: @textColor; + opacity: .7; + position: relative; + left: 6px; + top: 4px; + font-size: 150%; + } + img { + display: none; + } } } .top-nav-dashboards-btn { display: block; float: left; - padding: 15px 7px 9px 14px; + margin: 10px 8px 5px 14px; + border-radius: 3px; font-size: 1.4em; font-weight: bold; color: #a2a2a2; - margin: 0 18px 0 0; - border: 1px solid rgb(55, 54, 54); - border-left: none; - background: @grafanaTargetBackground; - .fa-th-large { - font-size: 123%; + border: 1px solid #555; + + a { + display: inline-block; + background: @grafanaTargetFuncBackground; + padding: 5px 4px 5px 13px; + border: 1px solid #000; + border-radius: 3px; + color: #a2a2a2; + + &:hover { + background: @grafanaTargetFuncHightlight; + .fa { + color: @linkColorHover + } + } } - .fa-angle-down { + + .fa-caret-down { + font-size: 60%; position: relative; top: 4px; } - &:hover { - background: lighten(@grafanaTargetBackground, 3%); - .fa { - color: @textColor; - } - } } .top-nav-breadcrumb { diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less index 491a50d517b..82a60cb6f0a 100644 --- a/src/css/less/sidemenu.less +++ b/src/css/less/sidemenu.less @@ -55,11 +55,18 @@ .sidemenu-top-btn { display: block; - padding: 14px 0px 10px 27px; - background: @grafanaTargetBackground; - border: 1px solid rgb(55, 54, 54); + padding: 8px 0 4px 22px; + background-color: @navbarBackground; + border-right: 3px solid black; + img { + border-radius: 50%; + background: black; + width: 30px; + padding: 4px; + } i { padding-right: 5px; + padding-top: 5px; font-size: 170%; color: @gray; } diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index be851d6a5ad..956fad6e074 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -13,7 +13,6 @@ @grayLighter: #BBBFC2; @white: #fff; - // Accent colors // ------------------------- @blue: #33B5E5; @@ -30,9 +29,6 @@ // ------------------------- @grafanaPanelBackground: @grayDarker; -// Tabs -@fullEditBorder: #555; - // Graphite Target Editor @grafanaTargetBorder: @black; @grafanaTargetBackground: @grayDark;