overrides.less 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567
  1. // Media queries
  2. // ---------------------
  3. @media (max-width: 767px) {
  4. div.panel {
  5. width: 100% !important;
  6. padding: 0px !important;
  7. }
  8. }
  9. // Containers
  10. // ---------------------
  11. .container-fluid {
  12. padding-left: 0px;
  13. padding-right: 0px;
  14. }
  15. .container.grafana-container {
  16. padding: 5px 10px;
  17. width: 100%;
  18. box-sizing: border-box;
  19. }
  20. // Backgrounds
  21. // ---------------------
  22. .bgNav {
  23. background: @navbarBackground;
  24. }
  25. .bgPrimary {
  26. background: @btnPrimaryBackground;
  27. color: rgba(255,255,255,.90);
  28. }
  29. .bgInfo {
  30. background: @btnInfoBackground;
  31. color: rgba(255,255,255,.90);
  32. }
  33. .bgSuccess {
  34. background: @btnSuccessBackground;
  35. color: rgba(255,255,255,.90);
  36. }
  37. .bgWarning {
  38. background: @btnWarningBackground;
  39. color: rgba(255,255,255,.90);
  40. }
  41. .bgDanger {
  42. background: @btnDangerBackground;
  43. color: rgba(255,255,255,.90);
  44. }
  45. .bgInverse {
  46. background: @btnInverseBackground;
  47. color: rgba(255,255,255,.90);
  48. }
  49. code, pre {
  50. background-color: @grayLighter;
  51. }
  52. .panel {
  53. display: inline-table;
  54. vertical-align: top;
  55. }
  56. .panel-container {
  57. padding: 0px 0px 0px 0px;
  58. background: @kibanaPanelBackground;
  59. margin: 5px;
  60. }
  61. .panel-content {
  62. padding: 0px 10px 10px 10px;
  63. }
  64. .panel-title {
  65. border: 0px;
  66. font-weight: bold;
  67. }
  68. .panel-loading {
  69. position:absolute;
  70. top: 0px;
  71. right: 4px;
  72. z-index: 800;
  73. }
  74. .panel div.panel-extra div.panel-extra-container {
  75. margin-right: -10px;
  76. margin-top: 3px;
  77. text-align: center;
  78. ul {
  79. text-align: left;
  80. }
  81. }
  82. .panel div.panel-extra {
  83. font-size: 0.9em;
  84. margin-bottom: 0px;
  85. }
  86. .panel div.panel-extra .extra {
  87. float:right !important;
  88. }
  89. .panel-error {
  90. color: @white;
  91. padding: 3px 10px 0px 10px;
  92. }
  93. div.editor-row {
  94. vertical-align: top;
  95. }
  96. div.editor-row div.section {
  97. margin-right: 20px;
  98. vertical-align: top;
  99. display: inline-block;
  100. }
  101. div.editor-option {
  102. vertical-align: top;
  103. display: inline-block;
  104. margin-right: 10px;
  105. }
  106. div.editor-option label {
  107. display: block;
  108. }
  109. #events {
  110. font-size: 12px;
  111. }
  112. .version {
  113. font-size: 85%;
  114. }
  115. .legend {
  116. color: @black;
  117. }
  118. div.fake-input {
  119. background-color: @inputBackground;
  120. border: 1px solid @inputBorder;
  121. .border-radius(@inputBorderRadius @inputBorderRadius @inputBorderRadius @inputBorderRadius);
  122. }
  123. hr.small {
  124. margin: 5px 0px;
  125. }
  126. form input.ng-invalid {
  127. color: @errorText;
  128. }
  129. .editor-title {
  130. margin-right: 10px;
  131. font-size: 1.7em;
  132. font-weight: bold;
  133. text-transform:capitalize;
  134. }
  135. .editor-title small {
  136. opacity: 0.5;
  137. font-size: 0.7em;
  138. font-weight: normal;
  139. }
  140. .bordered {
  141. border: 1px solid @tableBorder;
  142. }
  143. .table-unpadded {
  144. th,
  145. td {
  146. padding: 0px 2px;
  147. }
  148. }
  149. .spy {
  150. position:absolute;
  151. right:0px;
  152. top:0px;
  153. }
  154. .navbar-inner {
  155. border-width: 0 0 0px;
  156. }
  157. .kibana-row {
  158. margin-bottom: 5px;
  159. }
  160. .row-tab {
  161. padding: 0px;
  162. cursor: pointer;
  163. width: 30px;
  164. height: 30px;
  165. line-height: 30px;
  166. vertical-align: middle;
  167. }
  168. .row-button {
  169. width: 30px;
  170. text-align: center;
  171. float: left;
  172. cursor: pointer;
  173. }
  174. .row-text {
  175. white-space: nowrap;
  176. text-transform: uppercase;
  177. font-weight: bold;
  178. font-size: 0.9em;
  179. margin: 0px 10px;
  180. }
  181. .row-close {
  182. padding: 0px;
  183. margin: 0px;
  184. min-height: 30px !important;
  185. line-height: 30px;
  186. background: @kibanaPanelBackground;
  187. }
  188. .top-row-open {
  189. background: @navbarBackground;
  190. padding: 5px 25px 5px 25px;
  191. }
  192. .top-row-close {
  193. padding: 5px 10px;
  194. text-transform: uppercase;
  195. margin: 0px;
  196. text-align: left;
  197. min-height: 16px !important;
  198. line-height: 16px;
  199. }
  200. .row-open {
  201. margin-top: 5px;
  202. left:-34px;
  203. position: absolute;
  204. z-index: 100;
  205. transition: .25s left;
  206. transition-delay: .25s;
  207. -webkit-transition-delay: .25s;
  208. }
  209. .row-open:hover {
  210. left:-12px;
  211. }
  212. .odd {
  213. background-color: @tableBackgroundAccent;
  214. }
  215. .nomargin {
  216. margin: 0px;
  217. }
  218. [ng\:cloak], [ng-cloak], .ng-cloak {
  219. display: none !important;
  220. }
  221. .table tbody + tbody {
  222. border-top: 0px;
  223. }
  224. .ui-draggable-dragging {
  225. display: block;
  226. z-index: 9999;
  227. }
  228. .dragInProgress .panel-container {
  229. border: 3px solid rgba(100,100,100,0.50);
  230. }
  231. .link {
  232. color: @linkColor;
  233. cursor: pointer;
  234. }
  235. .link:hover {
  236. color: @linkColorHover;
  237. }
  238. .pointer {
  239. cursor: pointer;
  240. }
  241. .popover {
  242. max-width: 480px;
  243. }
  244. .modal {
  245. width: 100%;
  246. top: 0px !important;
  247. }
  248. .tiny {
  249. font-size: 50%;
  250. }
  251. .smaller {
  252. font-size: 70%;
  253. }
  254. .small {
  255. font-size: 85%;
  256. }
  257. .large {
  258. font-size: 120%;
  259. }
  260. .strong {
  261. font-weight: bold;
  262. }
  263. a {
  264. cursor: pointer;
  265. }
  266. .normal {
  267. font-weight: normal;
  268. }
  269. .light {
  270. font-weight: 200;
  271. }
  272. .input-smaller {
  273. width: 75px;
  274. }
  275. .string {color:lighten(@textColor, 5%)}
  276. .number {color:lighten(@infoText, 5%)}
  277. .boolean {color:lighten(@warningText, 5%)}
  278. .key {color:lighten(@errorText, 5%)}
  279. .btn-active {
  280. background-color: #E6E6E6;
  281. background-image: none;
  282. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
  283. outline: 0 none
  284. }
  285. .remove:hover {
  286. background-color: @btnDangerBackgroundHighlight;
  287. }
  288. .faded {
  289. opacity: 0.2;
  290. }
  291. div.flot-text {
  292. color: @textColor !important;
  293. }
  294. .dashboard-notice {
  295. z-index:8000;
  296. margin-left:0px;
  297. padding:3px 0px 3px 0px;
  298. width:100%;
  299. padding-left:20px;
  300. color: @white;
  301. }
  302. .alert-warning {
  303. background-color: @warningBackground;
  304. border-color: @warningBorder;
  305. color: @warningText;
  306. }
  307. /* ===================================================
  308. * popover-extra-placements.css v0.1
  309. * http://twitter.github.com/bootstrap-popover-extra-placements
  310. * ===================================================
  311. * Copyright 2012 Daniel Kleehammer
  312. *
  313. * Licensed under the Apache License, Version 2.0 (the "License");
  314. * you may not use this file except in compliance with the License.
  315. * You may obtain a copy of the License at
  316. *
  317. * http://www.apache.org/licenses/LICENSE-2.0
  318. *
  319. * Unless required by applicable law or agreed to in writing, software
  320. * distributed under the License is distributed on an "AS IS" BASIS,
  321. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  322. * See the License for the specific language governing permissions and
  323. * limitations under the License.
  324. * ========================================================== */
  325. /*************************
  326. * Top Positions
  327. *************************/
  328. /** Top Left **/
  329. .popover.topLeft {
  330. margin-top: -10px;
  331. }
  332. .popover.topLeft .arrow {
  333. bottom: -10px;
  334. left: 25%;
  335. margin-left: -10px;
  336. border-width: 10px 10px 0;
  337. border-top-color: @popoverTitleBackground;
  338. }
  339. .popover.topLeft .arrow:after {
  340. border-width: 11px 11px 0;
  341. border-top-color: rgba(0, 0, 0, 0.25);
  342. bottom: -1px;
  343. left: -11px;
  344. }
  345. /** Top Right **/
  346. .popover.topRight {
  347. margin-top: -10px;
  348. }
  349. .popover.topRight .arrow {
  350. bottom: -10px;
  351. left: 75%;
  352. margin-left: -10px;
  353. border-width: 10px 10px 0;
  354. border-top-color: @popoverTitleBackground;;
  355. }
  356. .popover.topRight .arrow:after {
  357. border-width: 11px 11px 0;
  358. border-top-color: rgba(0, 0, 0, 0.25);
  359. bottom: -1px;
  360. left: -11px;
  361. }
  362. /*************************
  363. * Right Positions
  364. *************************/
  365. .popover {
  366. &.rightTop .arrow {
  367. top: 10%;
  368. left: -@popoverArrowOuterWidth;
  369. margin-top: -@popoverArrowOuterWidth;
  370. border-left-width: 0;
  371. border-right-color: #999; // IE8 fallback
  372. border-right-color: @popoverArrowOuterColor;
  373. &:after {
  374. left: 1px;
  375. bottom: -@popoverArrowWidth;
  376. border-left-width: 0;
  377. border-right-color: @popoverArrowColor;
  378. }
  379. }
  380. &.rightBottom .arrow {
  381. top: 90%;
  382. left: -@popoverArrowOuterWidth;
  383. margin-top: -@popoverArrowOuterWidth;
  384. border-left-width: 0;
  385. border-right-color: #999; // IE8 fallback
  386. border-right-color: @popoverArrowOuterColor;
  387. &:after {
  388. left: 1px;
  389. bottom: -@popoverArrowWidth;
  390. border-left-width: 0;
  391. border-right-color: @popoverArrowColor;
  392. }
  393. }
  394. &.bottomLeft .arrow {
  395. left: 10%;
  396. margin-left: -@popoverArrowOuterWidth;
  397. border-top-width: 0;
  398. border-bottom-color: #999; // IE8 fallback
  399. border-bottom-color: @popoverArrowOuterColor;
  400. top: -@popoverArrowOuterWidth;
  401. &:after {
  402. top: 1px;
  403. margin-left: -@popoverArrowWidth;
  404. border-top-width: 0;
  405. border-bottom-color: @popoverArrowColor;
  406. }
  407. }
  408. &.bottomRight .arrow {
  409. left: 90%;
  410. margin-left: -@popoverArrowOuterWidth;
  411. border-top-width: 0;
  412. border-bottom-color: #999; // IE8 fallback
  413. border-bottom-color: @popoverArrowOuterColor;
  414. top: -@popoverArrowOuterWidth;
  415. &:after {
  416. top: 1px;
  417. margin-left: -@popoverArrowWidth;
  418. border-top-width: 0;
  419. border-bottom-color: @popoverArrowColor;
  420. }
  421. }
  422. &.leftTop .arrow {
  423. top: 10%;
  424. right: -@popoverArrowOuterWidth;
  425. margin-top: -@popoverArrowOuterWidth;
  426. border-right-width: 0;
  427. border-left-color: #999; // IE8 fallback
  428. border-left-color: @popoverArrowOuterColor;
  429. &:after {
  430. right: 1px;
  431. border-right-width: 0;
  432. border-left-color: @popoverArrowColor;
  433. bottom: -@popoverArrowWidth;
  434. }
  435. }
  436. &.leftBottom .arrow {
  437. top: 90%;
  438. right: -@popoverArrowOuterWidth;
  439. margin-top: -@popoverArrowOuterWidth;
  440. border-right-width: 0;
  441. border-left-color: #999; // IE8 fallback
  442. border-left-color: @popoverArrowOuterColor;
  443. &:after {
  444. right: 1px;
  445. border-right-width: 0;
  446. border-left-color: @popoverArrowColor;
  447. bottom: -@popoverArrowWidth;
  448. }
  449. }
  450. &.topLeft .arrow {
  451. left: 10%;
  452. margin-left: -@popoverArrowOuterWidth;
  453. border-bottom-width: 0;
  454. border-top-color: #999; // IE8 fallback
  455. border-top-color: @popoverArrowOuterColor;
  456. bottom: -@popoverArrowOuterWidth;
  457. &:after {
  458. bottom: 1px;
  459. margin-left: -@popoverArrowWidth;
  460. border-bottom-width: 0;
  461. border-top-color: @popoverArrowColor;
  462. }
  463. }
  464. &.topRight .arrow {
  465. left: 90%;
  466. margin-left: -@popoverArrowOuterWidth;
  467. border-bottom-width: 0;
  468. border-top-color: #999; // IE8 fallback
  469. border-top-color: @popoverArrowOuterColor;
  470. bottom: -@popoverArrowOuterWidth;
  471. &:after {
  472. bottom: 1px;
  473. margin-left: -@popoverArrowWidth;
  474. border-bottom-width: 0;
  475. border-top-color: @popoverArrowColor;
  476. }
  477. }
  478. }