Commit 5e4b0266 by Torkel Ödegaard

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

parent 9d5979c0
......@@ -5,13 +5,18 @@
<div class="top-nav">
<a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="fa fa-angle-right"></i>
<i class="fa fa-bars"></i>
</a>
<a class="top-nav-dashboards-btn pointer" ng-click="openSearch()">
<div class="top-nav-dashboards-btn">
<a class="pointer" ng-click="openSearch()">
<i class="fa fa-th-large"></i>
<i class="fa fa-angle-down"></i>
<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">
{{dashboard.title}}
......
.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);
}
@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;
}
......
......@@ -11,47 +11,74 @@
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;
padding: 4px;
margin: 7px 6px 3px 9px;
.fa {
display: none;
}
img {
width: 30px;
}
&:hover {
.fa {
display: block;
width: 30px;
height: 30px;
color: @textColor;
opacity: .7;
position: relative;
left: 6px;
top: 4px;
font-size: 150%;
}
img {
display: none;
}
&:hover {
background: lighten(@grafanaTargetBackground, 3%);
}
}
.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%;
}
.fa-angle-down {
position: relative;
top: 4px;
}
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: lighten(@grafanaTargetBackground, 3%);
background: @grafanaTargetFuncHightlight;
.fa {
color: @textColor;
color: @linkColorHover
}
}
}
.fa-caret-down {
font-size: 60%;
position: relative;
top: 4px;
}
}
......
......@@ -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;
}
......
......@@ -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;
......
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