common_dashboard.css 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. /*
  2. Licensed to Cloudera, Inc. under one
  3. or more contributor license agreements. See the NOTICE file
  4. distributed with this work for additional information
  5. regarding copyright ownership. Cloudera, Inc. licenses this file
  6. to you under the Apache License, Version 2.0 (the
  7. "License"); you may not use this file except in compliance
  8. with the License. You may obtain a copy of the License at
  9. http://www.apache.org/licenses/LICENSE-2.0
  10. Unless required by applicable law or agreed to in writing, software
  11. distributed under the License is distributed on an "AS IS" BASIS,
  12. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. See the License for the specific language governing permissions and
  14. limitations under the License.
  15. */
  16. .dashboard .container-fluid {
  17. padding: 6px;
  18. }
  19. .row-container {
  20. width: 100%;
  21. min-height: 70px;
  22. }
  23. .row-container.is-editing {
  24. border: 1px solid #e5e5e5;
  25. }
  26. .ui-sortable {
  27. background-color: #F3F3F3;
  28. min-height: 100px;
  29. }
  30. .ui-sortable h2 {
  31. padding-left: 10px !important;
  32. }
  33. .ui-sortable h2 ul {
  34. float: left;
  35. margin-right: 10px;
  36. font-size: 14px;
  37. }
  38. .ui-sortable-disabled {
  39. background-color: #FFF;
  40. }
  41. .card-column {
  42. border: none;
  43. }
  44. .card-widget {
  45. padding-top: 0;
  46. border: 0;
  47. min-height: 100px;
  48. }
  49. .card-widget .card-heading {
  50. font-size: 12px !important;
  51. font-weight: bold !important;
  52. line-height: 24px !important;
  53. padding-left: 3px !important;
  54. padding-right: 3px !important;
  55. }
  56. .card-widget .card-body {
  57. margin-top: 0;
  58. min-height: 40px;
  59. }
  60. .card-toolbar {
  61. margin: 0;
  62. padding: 4px;
  63. padding-top: 0;
  64. top: 70px;
  65. position: fixed;
  66. width: 100%;
  67. z-index: 1000;
  68. }
  69. .row-header {
  70. background-color: #F6F6F6;
  71. display: inline;
  72. padding: 3px;
  73. border: 1px solid #e5e5e5;
  74. border-bottom: none;
  75. }
  76. .row-highlight {
  77. background-color: #DDD;
  78. min-height: 100px;
  79. }
  80. #emptyDashboard {
  81. position: absolute;
  82. right: 204px;
  83. top: 80px;
  84. color: #666;
  85. font-size: 20px;
  86. z-index: 1000;
  87. }
  88. #emptyDashboardEditing {
  89. position: absolute;
  90. left: 120px;
  91. top: 160px;
  92. color: #666;
  93. font-size: 20px;
  94. }
  95. .emptyRow {
  96. margin-top: 10px;
  97. margin-left: 140px;
  98. color: #666;
  99. font-size: 18px;
  100. }
  101. .preview-row {
  102. background-color: #f9f9f9;
  103. min-height: 400px !important;
  104. margin-top: 30px;
  105. }
  106. .toolbar-label {
  107. float: left;
  108. font-weight: bold;
  109. color: #999;
  110. padding-left: 8px;
  111. padding-top: 24px;
  112. }
  113. .draggable-widget {
  114. width: 60px;
  115. text-align: center;
  116. float: left;
  117. border: 1px solid #CCC;
  118. margin-top: 10px;
  119. margin-left: 10px;
  120. cursor: move;
  121. }
  122. .draggable-widget.disabled {
  123. cursor: default;
  124. }
  125. .draggable-widget a {
  126. font-size: 28px;
  127. line-height: 46px;
  128. }
  129. .draggable-widget.disabled a {
  130. cursor: default;
  131. color: #CCC;
  132. }
  133. .layout-container {
  134. width: 100px;
  135. float: left;
  136. margin-top: 10px;
  137. margin-left: 10px;
  138. }
  139. .layout-box {
  140. float: left;
  141. height: 48px;
  142. background-color: #DDD;
  143. text-align: center;
  144. }
  145. .layout-box i {
  146. color: #333;
  147. font-size: 28px;
  148. line-height: 48px;
  149. }
  150. .layout-container:hover .layout-box {
  151. background-color: #CCC;
  152. }
  153. .with-top-margin {
  154. margin-top: 60px;
  155. }
  156. .ui-sortable .card-heading {
  157. -webkit-touch-callout: none;
  158. -webkit-user-select: none;
  159. -khtml-user-select: none;
  160. -moz-user-select: none;
  161. -ms-user-select: none;
  162. user-select: none;
  163. }
  164. .search-bar {
  165. padding-top: 6px;
  166. padding-bottom: 6px;
  167. }
  168. .widget-settings-section {
  169. display: none;
  170. }
  171. .widget-spinner {
  172. padding: 10px;
  173. font-size: 80px;
  174. color: #CCC;
  175. text-align: center;
  176. }
  177. .card {
  178. margin: 0;
  179. }
  180. .move-widget {
  181. cursor: move;
  182. }
  183. body.modal-open {
  184. overflow: auto !important;
  185. }
  186. .add-row {
  187. background-color: #F6F6F6;
  188. min-height: 36px;
  189. border: 2px dashed #DDD;
  190. text-align: center;
  191. padding: 4px;
  192. cursor: pointer;
  193. }
  194. .add-row:before {
  195. color: #DDD;
  196. display: inline-block;
  197. font-family: FontAwesome;
  198. font-style: normal;
  199. font-weight: normal;
  200. font-size: 24px;
  201. line-height: 1;
  202. -webkit-font-smoothing: antialiased;
  203. -moz-osx-font-smoothing: grayscale;
  204. content: "\f055";
  205. }
  206. .add-row-highlight {
  207. min-height: 10px;
  208. background-color: #CCC;
  209. }
  210. .spinedit-cnt div.spinedit .fa-chevron-up {
  211. top: -7px;
  212. color: #666;
  213. }
  214. .spinedit-cnt div.spinedit .fa-chevron-down {
  215. top: 7px;
  216. left: -4px;
  217. color: #666;
  218. }
  219. .clearable {
  220. background: url(/static/art/clearField.png) no-repeat right -10px center;
  221. border: 1px solid #999;
  222. padding: 3px 18px 3px 4px;
  223. border-radius: 3px;
  224. transition: background 0.4s !important;
  225. }
  226. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  227. .clearable {
  228. background: url(/static/art/clearField@2x.png) no-repeat right -10px center;
  229. background-size: 10px 10px;
  230. }
  231. }
  232. .clearable.x {
  233. background-position: right 5px center;
  234. }
  235. .clearable.onX {
  236. cursor: pointer !important;
  237. }
  238. .facet-field-cnt {
  239. margin-bottom: 6px;
  240. }
  241. .facet-field-switch {
  242. display: inline;
  243. margin-top: 10px;
  244. }
  245. .facet-field-label {
  246. color: #333;
  247. font-size: 11px;
  248. margin-bottom: 2px;
  249. margin-right: 4px;
  250. text-transform: uppercase;
  251. text-shadow: 1px 1px 0 #fff;
  252. }
  253. .facet-field-label-fixed-width {
  254. width: 90px;
  255. text-align: right;
  256. padding-right: 8px;
  257. display: inline-block;
  258. }
  259. .facet-field-label-fixed-width-double {
  260. width: 180px;
  261. }
  262. .facet-field-label-title {
  263. text-align: left;
  264. font-weight: bold;
  265. padding-left: 110px;
  266. }
  267. .simpledaterangepicker .left-margin {
  268. margin-left: 6px;
  269. }
  270. .facet-field-tile {
  271. float: left;
  272. }
  273. .card-column.span2 .facet-field-label-fixed-width {
  274. text-align: left;
  275. width: auto;
  276. }
  277. .card-column.span2 .facet-field-label-title {
  278. padding-left: 0;
  279. }
  280. .card-column.span2 .simpledaterangepicker .facet-field-label-fixed-width {
  281. display: block;
  282. }
  283. .card-column.span2 .simpledaterangepicker .input-prepend {
  284. display: block;
  285. margin-bottom: 5px;
  286. }
  287. .card-column.span2 .simpledaterangepicker .left-margin {
  288. margin-left: 0;
  289. }
  290. .card-column.span2 .simpledaterangepicker input[type='text'] {
  291. width: 70%;
  292. }
  293. .card-column.span2 .simpledaterangepicker select {
  294. margin-bottom: 5px;
  295. }
  296. .card-widget .input-append, .card-widget .input-prepend, .card-widget select, .card-widget input {
  297. margin-bottom: 0;
  298. }
  299. .card-column.span2 select {
  300. width: 120px;
  301. }
  302. .card-column.span2 .facet-field-tile {
  303. float: none;
  304. }
  305. .responsive-facet-toggle-section {
  306. margin-bottom: 20px;
  307. }
  308. .floating-facet-toggle-section {
  309. margin-bottom: 20px;
  310. float: left;
  311. margin-right: 20px;
  312. }
  313. @media (min-width: 1360px) {
  314. .responsive-facet-toggle-section {
  315. margin-bottom: 20px;
  316. float: left;
  317. margin-right: 20px;
  318. }
  319. }
  320. .dimensions-header {
  321. border-bottom: none;
  322. text-transform: uppercase;
  323. font-size: 11px;
  324. font-weight: bold;
  325. margin-bottom: 3px;
  326. }