| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284 |
- commit 5e4b026668c5146e9289b3607fede9270d7029a6
- Author: Torkel Ödegaard <torkel.odegaard@gmail.com>
- Date: Tue Feb 3 22:05:53 2015 +0100
- Css work applying new styles for topmenu dashboard button and logo/menu icon
- diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html
- index a727e6112..ec4bb634c 100644
- --- a/src/app/partials/dashboard_topnav.html
- +++ b/src/app/partials/dashboard_topnav.html
- @@ -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()">
- - <i class="fa fa-th-large"></i>
- - <i class="fa fa-angle-down"></i>
- - </a>
- + <div class="top-nav-dashboards-btn">
- + <a class="pointer" ng-click="openSearch()">
- + <i class="fa fa-th-large"></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}}
- diff --git a/src/css/less/console.less b/src/css/less/console.less
- deleted file mode 100644
- index de413b301..000000000
- --- 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 abfbf8a23..cdfdc2940 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 0e131c763..7ae4b7cf5 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 491a50d51..82a60cb6f 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 be851d6a5..956fad6e0 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;
|