_dashboard.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. .dashboard-container {
  2. padding: $dashboard-padding;
  3. width: 100%;
  4. }
  5. .page-dashboard {
  6. .main-view {
  7. background-image: none;
  8. }
  9. }
  10. .template-variable {
  11. color: $variable;
  12. }
  13. div.flot-text {
  14. color: $text-color !important;
  15. }
  16. .panel {
  17. display: inline-block;
  18. float: left;
  19. &--solo {
  20. .resize-panel-handle {
  21. display: none;
  22. }
  23. .panel-container {
  24. border: none;
  25. }
  26. }
  27. }
  28. .panel-margin {
  29. margin: 0 0.4rem 0.8rem 0.4rem;
  30. display: block;
  31. }
  32. .panel-container {
  33. background-color: $panel-bg;
  34. position: relative;
  35. border: $panel-border;
  36. &.panel-transparent {
  37. background-color: transparent;
  38. border: none;
  39. }
  40. }
  41. .panel-content {
  42. padding: 0px 10px 5px 10px;
  43. }
  44. .panel-title-container {
  45. min-height: 9px;
  46. padding-top: 4px;
  47. cursor: pointer;
  48. }
  49. .panel-title {
  50. border: 0px;
  51. font-weight: $font-weight-semi-bold;
  52. position: relative;
  53. cursor: pointer;
  54. width: 100%;
  55. display: block;
  56. }
  57. .panel-loading {
  58. position:absolute;
  59. top: -3px;
  60. right: 0px;
  61. z-index: 800;
  62. }
  63. .panel-header {
  64. text-align: center;
  65. }
  66. .panel-info-corner-inner {
  67. width: 0;
  68. height: 0;
  69. position: absolute;
  70. left: 0;
  71. bottom: 0;
  72. }
  73. @mixin panel-corner-color($corner-bg) {
  74. .panel-info-corner-inner {
  75. border-left: 27px solid $corner-bg;
  76. border-right: none;
  77. border-bottom: 27px solid transparent;
  78. }
  79. }
  80. .panel-info-corner {
  81. color: $text-muted;
  82. cursor: pointer;
  83. position: absolute;
  84. display: none;
  85. left: 0;
  86. width: 27px;
  87. height: 27px;
  88. top: 0;
  89. z-index: 10;
  90. .fa {
  91. position: relative;
  92. top: -4px;
  93. left: -6px;
  94. font-size: 75%;
  95. z-index: 1000;
  96. }
  97. &--info {
  98. display: block;
  99. @include panel-corner-color(lighten($panel-bg, 4%));
  100. .fa:before {
  101. content: "\f129";
  102. }
  103. }
  104. &--links {
  105. display: block;
  106. @include panel-corner-color(lighten($panel-bg, 4%));
  107. .fa {
  108. left: -5px;
  109. }
  110. .fa:before {
  111. content: "\f08e";
  112. }
  113. }
  114. &--error {
  115. display: block;
  116. color: $text-color;
  117. @include panel-corner-color($errorBackground);
  118. .fa:before {
  119. content: "\f12a";
  120. }
  121. }
  122. }
  123. .panel-full-edit {
  124. margin-top: 20px;
  125. margin-bottom: 20px;
  126. }
  127. .panel-menu {
  128. z-index: 500;
  129. position: absolute;
  130. background: $tight-form-func-bg;
  131. border: $panel-menu-border;
  132. .panel-menu-row {
  133. white-space: nowrap;
  134. border-bottom: $panel-menu-border;
  135. &:last-child {
  136. border-bottom: none;
  137. }
  138. }
  139. .panel-menu-link, .panel-menu-icon {
  140. padding: 5px 10px;
  141. }
  142. .panel-menu-link {
  143. display: inline-block;
  144. border-right: $panel-menu-border;
  145. &:last-child {
  146. border: none;
  147. }
  148. }
  149. .dropdown-menu {
  150. text-align: left;
  151. }
  152. }
  153. .panel-highlight {
  154. box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
  155. }
  156. .panel-hover-highlight {
  157. box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5)
  158. }
  159. .on-drag-hover {
  160. .panel-container {
  161. box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
  162. }
  163. }
  164. .panel-drop-zone {
  165. display: none;
  166. .panel-container {
  167. border: $panel-border;
  168. display: flex;
  169. justify-content: center;
  170. flex-direction: column;
  171. text-align: center;
  172. color: $text-color-faint;
  173. font-weight: bold;
  174. background: $panel-drop-zone-bg;
  175. }
  176. }
  177. .panel-in-fullscreen {
  178. .panel-drop-zone {
  179. display: none !important;
  180. }
  181. }
  182. .panel-time-info {
  183. font-weight: bold;
  184. float: right;
  185. margin-right: 15px;
  186. color: $blue;
  187. font-size: 85%;
  188. position: absolute;
  189. top: 0;
  190. right: 0;
  191. }
  192. .resize-panel-handle {
  193. cursor: nwse-resize;
  194. position: absolute;
  195. font-size: 10px;
  196. bottom: 0;
  197. right: 0;
  198. width: 15px;
  199. height: 15px;
  200. display: block;
  201. color: $text-color-faint;
  202. &:before {
  203. left: initial;
  204. right: -1px;
  205. bottom: 0px;
  206. position: absolute;
  207. }
  208. }
  209. .dashboard-header {
  210. font-family: $headings-font-family;
  211. font-size: $font-size-h3;
  212. text-align: center;
  213. span {
  214. display: inline-block;
  215. @include brand-bottom-border();
  216. padding: 0.5rem .5rem .2rem .5rem;
  217. }
  218. }