Skip to content

N
nexpie-grafana-theme
Commit 5e4b0266 by Torkel Ödegaard
Options

Css work applying new styles for topmenu dashboard button and logo/menu icon

parent 9d5979c0
Showing with 71 additions and 110 deletions
src/app/partials/dashboard_topnav.html
...@@ -5,13 +5,18 @@ ...@@ -5,13 +5,18 @@
<div class="top-nav"> <div class="top-nav">
<a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()"> <a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img> <img class="logo-icon" src="img/fav32.png"></img>
<i class="fa fa-angle-right"></i> <i class="fa fa-bars"></i>
</a> </a>
<a class="top-nav-dashboards-btn pointer" ng-click="openSearch()"> <div class="top-nav-dashboards-btn">
<i class="fa fa-th-large"></i> <a class="pointer" ng-click="openSearch()">
<i class="fa fa-angle-down"></i> <i class="fa fa-th-large"></i>
</a> <i class="fa fa-caret-down"></i>
</a>
</div>
<span class="fa fa-angle-right top-nav-breadcrumb-icon">
</span>
<a ng-click="asd()" class="top-nav-title pointer"> <a ng-click="asd()" class="top-nav-title pointer">
{{dashboard.title}} {{dashboard.title}}
......
src/css/less/console.less deleted 100644 → 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);
}
src/css/less/grafana.less
@import "p_pro.less"; @import "p_pro.less";
@import "submenu.less"; @import "submenu.less";
@import "graph.less"; @import "graph.less";
@import "console.less";
@import "bootstrap-tagsinput.less"; @import "bootstrap-tagsinput.less";
@import "tables_lists.less"; @import "tables_lists.less";
@import "search.less"; @import "search.less";
...@@ -48,10 +47,6 @@ ...@@ -48,10 +47,6 @@
} }
} }
.logo-icon {
width: 24px;
}
.row-button { .row-button {
width: 24px; width: 24px;
} }
......
src/css/less/navbar.less
...@@ -11,48 +11,75 @@ ...@@ -11,48 +11,75 @@
float: left; float: left;
} }
.fa.top-nav-breadcrumb-icon {
margin: 17px 21px 8px 0px;
float: left;
font-size: 160%;
color: @textColor;
}
.top-nav-menu-btn { .top-nav-menu-btn {
border-radius: 50%;
background: black;
display: block; display: block;
float: left; float: left;
padding: 11px 9px 11px 14px; padding: 4px;
background: @grafanaTargetBackground; margin: 7px 6px 3px 9px;
border: 1px solid rgb(55, 54, 54); .fa {
i { display: none;
font-size: 160%; }
color: darken(@gray, 15%); img {
padding: 0px 0px 0px 0px; width: 30px;
position: relative;
top: 4px;
} }
&:hover { &: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 { .top-nav-dashboards-btn {
display: block; display: block;
float: left; float: left;
padding: 15px 7px 9px 14px; margin: 10px 8px 5px 14px;
border-radius: 3px;
font-size: 1.4em; font-size: 1.4em;
font-weight: bold; font-weight: bold;
color: #a2a2a2; color: #a2a2a2;
margin: 0 18px 0 0; border: 1px solid #555;
border: 1px solid rgb(55, 54, 54);
border-left: none; a {
background: @grafanaTargetBackground; display: inline-block;
.fa-th-large { background: @grafanaTargetFuncBackground;
font-size: 123%; 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; position: relative;
top: 4px; top: 4px;
} }
&:hover {
background: lighten(@grafanaTargetBackground, 3%);
.fa {
color: @textColor;
}
}
} }
.top-nav-breadcrumb { .top-nav-breadcrumb {
......
src/css/less/sidemenu.less
...@@ -55,11 +55,18 @@ ...@@ -55,11 +55,18 @@
.sidemenu-top-btn { .sidemenu-top-btn {
display: block; display: block;
padding: 14px 0px 10px 27px; padding: 8px 0 4px 22px;
background: @grafanaTargetBackground; background-color: @navbarBackground;
border: 1px solid rgb(55, 54, 54); border-right: 3px solid black;
img {
border-radius: 50%;
background: black;
width: 30px;
padding: 4px;
}
i { i {
padding-right: 5px; padding-right: 5px;
padding-top: 5px;
font-size: 170%; font-size: 170%;
color: @gray; color: @gray;
} }
......
src/css/less/variables.dark.less
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
@grayLighter: #BBBFC2; @grayLighter: #BBBFC2;
@white: #fff; @white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
@blue: #33B5E5; @blue: #33B5E5;
...@@ -30,9 +29,6 @@ ...@@ -30,9 +29,6 @@
// ------------------------- // -------------------------
@grafanaPanelBackground: @grayDarker; @grafanaPanelBackground: @grayDarker;
// Tabs
@fullEditBorder: #555;
// Graphite Target Editor // Graphite Target Editor
@grafanaTargetBorder: @black; @grafanaTargetBorder: @black;
@grafanaTargetBackground: @grayDark; @grafanaTargetBackground: @grayDark;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment