grafana 313 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. commit 5e4b026668c5146e9289b3607fede9270d7029a6
  2. Author: Torkel Ödegaard <torkel.odegaard@gmail.com>
  3. Date: Tue Feb 3 22:05:53 2015 +0100
  4. Css work applying new styles for topmenu dashboard button and logo/menu icon
  5. diff --git a/src/app/partials/dashboard_topnav.html b/src/app/partials/dashboard_topnav.html
  6. index a727e6112..ec4bb634c 100644
  7. --- a/src/app/partials/dashboard_topnav.html
  8. +++ b/src/app/partials/dashboard_topnav.html
  9. @@ -5,13 +5,18 @@
  10. <div class="top-nav">
  11. <a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
  12. <img class="logo-icon" src="img/fav32.png"></img>
  13. - <i class="fa fa-angle-right"></i>
  14. + <i class="fa fa-bars"></i>
  15. </a>
  16. - <a class="top-nav-dashboards-btn pointer" ng-click="openSearch()">
  17. - <i class="fa fa-th-large"></i>
  18. - <i class="fa fa-angle-down"></i>
  19. - </a>
  20. + <div class="top-nav-dashboards-btn">
  21. + <a class="pointer" ng-click="openSearch()">
  22. + <i class="fa fa-th-large"></i>
  23. + <i class="fa fa-caret-down"></i>
  24. + </a>
  25. + </div>
  26. +
  27. + <span class="fa fa-angle-right top-nav-breadcrumb-icon">
  28. + </span>
  29. <a ng-click="asd()" class="top-nav-title pointer">
  30. {{dashboard.title}}
  31. diff --git a/src/css/less/console.less b/src/css/less/console.less
  32. deleted file mode 100644
  33. index de413b301..000000000
  34. --- a/src/css/less/console.less
  35. +++ /dev/null
  36. @@ -1,69 +0,0 @@
  37. -.grafana-console {
  38. - position: fixed;
  39. - width: 100%;
  40. - bottom: 0px;
  41. - height: 300px;
  42. - background: @grafanaPanelBackground;
  43. - border-top: 1px solid @fullEditBorder;
  44. -}
  45. -
  46. -.grafana-console-header {
  47. - padding: 2px 5px;
  48. -}
  49. -
  50. -.grafana-console-item {
  51. - .icon-caret-right {
  52. - font-size: 14px;
  53. - color: @blue;
  54. - }
  55. - margin: 2px 0;
  56. - display: table-row;
  57. -}
  58. -
  59. -.grafana-console-body {
  60. - overflow-y: auto;
  61. - display: table;
  62. - width: 100%;
  63. -}
  64. -
  65. -.gfc-col {
  66. - display: table-cell;
  67. - padding: 2px 4px;
  68. - white-space: nowrap;
  69. - overflow: hidden;
  70. - vertical-align: middle;
  71. -}
  72. -
  73. -.grafana-console-method {
  74. - text-align: center;
  75. -}
  76. -
  77. -.grafana-console-error {
  78. - .grafana-console-method {
  79. - color: red;
  80. - }
  81. -}
  82. -
  83. -.grafana-console-field2 {
  84. - width: 90%;
  85. -}
  86. -
  87. -.grafana-console-time:before {
  88. - content: '(';
  89. - color: rgb(106, 253, 81);
  90. -}
  91. -
  92. -.grafana-console-time:after {
  93. - content: ')';
  94. - color: rgb(106, 253, 81);
  95. -}
  96. -
  97. -.grafana-console-time {
  98. - color: rgb(162, 196, 253);
  99. -}
  100. -
  101. -.grafana-console-elapsed {
  102. - text-align: right;
  103. - color: rgb(162, 196, 253);
  104. -}
  105. -
  106. diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
  107. index abfbf8a23..cdfdc2940 100644
  108. --- a/src/css/less/grafana.less
  109. +++ b/src/css/less/grafana.less
  110. @@ -1,7 +1,6 @@
  111. @import "p_pro.less";
  112. @import "submenu.less";
  113. @import "graph.less";
  114. -@import "console.less";
  115. @import "bootstrap-tagsinput.less";
  116. @import "tables_lists.less";
  117. @import "search.less";
  118. @@ -48,10 +47,6 @@
  119. }
  120. }
  121. -.logo-icon {
  122. - width: 24px;
  123. -}
  124. -
  125. .row-button {
  126. width: 24px;
  127. }
  128. diff --git a/src/css/less/navbar.less b/src/css/less/navbar.less
  129. index 0e131c763..7ae4b7cf5 100644
  130. --- a/src/css/less/navbar.less
  131. +++ b/src/css/less/navbar.less
  132. @@ -11,48 +11,75 @@
  133. float: left;
  134. }
  135. +.fa.top-nav-breadcrumb-icon {
  136. + margin: 17px 21px 8px 0px;
  137. + float: left;
  138. + font-size: 160%;
  139. + color: @textColor;
  140. +}
  141. +
  142. .top-nav-menu-btn {
  143. + border-radius: 50%;
  144. + background: black;
  145. display: block;
  146. float: left;
  147. - padding: 11px 9px 11px 14px;
  148. - background: @grafanaTargetBackground;
  149. - border: 1px solid rgb(55, 54, 54);
  150. - i {
  151. - font-size: 160%;
  152. - color: darken(@gray, 15%);
  153. - padding: 0px 0px 0px 0px;
  154. - position: relative;
  155. - top: 4px;
  156. + padding: 4px;
  157. + margin: 7px 6px 3px 9px;
  158. + .fa {
  159. + display: none;
  160. + }
  161. + img {
  162. + width: 30px;
  163. }
  164. &:hover {
  165. - background: lighten(@grafanaTargetBackground, 3%);
  166. + .fa {
  167. + display: block;
  168. + width: 30px;
  169. + height: 30px;
  170. + color: @textColor;
  171. + opacity: .7;
  172. + position: relative;
  173. + left: 6px;
  174. + top: 4px;
  175. + font-size: 150%;
  176. + }
  177. + img {
  178. + display: none;
  179. + }
  180. }
  181. }
  182. .top-nav-dashboards-btn {
  183. display: block;
  184. float: left;
  185. - padding: 15px 7px 9px 14px;
  186. + margin: 10px 8px 5px 14px;
  187. + border-radius: 3px;
  188. font-size: 1.4em;
  189. font-weight: bold;
  190. color: #a2a2a2;
  191. - margin: 0 18px 0 0;
  192. - border: 1px solid rgb(55, 54, 54);
  193. - border-left: none;
  194. - background: @grafanaTargetBackground;
  195. - .fa-th-large {
  196. - font-size: 123%;
  197. + border: 1px solid #555;
  198. +
  199. + a {
  200. + display: inline-block;
  201. + background: @grafanaTargetFuncBackground;
  202. + padding: 5px 4px 5px 13px;
  203. + border: 1px solid #000;
  204. + border-radius: 3px;
  205. + color: #a2a2a2;
  206. +
  207. + &:hover {
  208. + background: @grafanaTargetFuncHightlight;
  209. + .fa {
  210. + color: @linkColorHover
  211. + }
  212. + }
  213. }
  214. - .fa-angle-down {
  215. +
  216. + .fa-caret-down {
  217. + font-size: 60%;
  218. position: relative;
  219. top: 4px;
  220. }
  221. - &:hover {
  222. - background: lighten(@grafanaTargetBackground, 3%);
  223. - .fa {
  224. - color: @textColor;
  225. - }
  226. - }
  227. }
  228. .top-nav-breadcrumb {
  229. diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less
  230. index 491a50d51..82a60cb6f 100644
  231. --- a/src/css/less/sidemenu.less
  232. +++ b/src/css/less/sidemenu.less
  233. @@ -55,11 +55,18 @@
  234. .sidemenu-top-btn {
  235. display: block;
  236. - padding: 14px 0px 10px 27px;
  237. - background: @grafanaTargetBackground;
  238. - border: 1px solid rgb(55, 54, 54);
  239. + padding: 8px 0 4px 22px;
  240. + background-color: @navbarBackground;
  241. + border-right: 3px solid black;
  242. + img {
  243. + border-radius: 50%;
  244. + background: black;
  245. + width: 30px;
  246. + padding: 4px;
  247. + }
  248. i {
  249. padding-right: 5px;
  250. + padding-top: 5px;
  251. font-size: 170%;
  252. color: @gray;
  253. }
  254. diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less
  255. index be851d6a5..956fad6e0 100644
  256. --- a/src/css/less/variables.dark.less
  257. +++ b/src/css/less/variables.dark.less
  258. @@ -13,7 +13,6 @@
  259. @grayLighter: #BBBFC2;
  260. @white: #fff;
  261. -
  262. // Accent colors
  263. // -------------------------
  264. @blue: #33B5E5;
  265. @@ -30,9 +29,6 @@
  266. // -------------------------
  267. @grafanaPanelBackground: @grayDarker;
  268. -// Tabs
  269. -@fullEditBorder: #555;
  270. -
  271. // Graphite Target Editor
  272. @grafanaTargetBorder: @black;
  273. @grafanaTargetBackground: @grayDark;