dark-jsc.less 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. // 驾驶舱模块黑色主题样式
  2. @import "./setting.less";
  3. #appBody.dark {
  4. transition: @transition;
  5. .gray {
  6. transition: @transition;
  7. }
  8. .green {
  9. transition: @transition;
  10. }
  11. .white {
  12. transition: @transition;
  13. }
  14. #app {
  15. transition: @transition;
  16. }
  17. .panel-title {
  18. transition: @transition;
  19. }
  20. .panel-tools {
  21. transition: @transition;
  22. }
  23. .weather {
  24. .other-info {
  25. .text {
  26. transition: @transition;
  27. }
  28. div.svg-icon svg use {
  29. transition: @transition;
  30. }
  31. }
  32. }
  33. .security-days {
  34. .text {
  35. transition: @transition;
  36. }
  37. .num {
  38. transition: @transition;
  39. }
  40. }
  41. .tab-box {
  42. .tab-item {
  43. span {
  44. svg {
  45. use {
  46. transition: @transition;
  47. }
  48. }
  49. }
  50. }
  51. }
  52. .header-body {
  53. .header-title {
  54. svg {
  55. g:nth-child(1) {
  56. path,
  57. polygon {
  58. transition: @transition;
  59. }
  60. }
  61. }
  62. }
  63. }
  64. .weather-info {
  65. span svg use {
  66. transition: @transition;
  67. }
  68. }
  69. .map .tab-box .tab-item.active {
  70. // background-image: linear-gradient(to top,
  71. // rgba(5, 187, 76, 0.5),
  72. // rgba(5, 187, 76, 0));
  73. transition: @transition;
  74. }
  75. .map .tab-box .tab-item.active::after {
  76. transition: @transition;
  77. }
  78. .header-menu .header-menu-list .header-menu-item.active::after {
  79. transition: @transition;
  80. }
  81. .header-menu .header-menu-list .header-menu-item.active {
  82. background: linear-gradient(to top,
  83. rgba(5, 187, 76, 0.5),
  84. rgba(5, 187, 76, 0));
  85. border : 0.093vh solid @green;
  86. transition: color @transition ease-in-out;
  87. }
  88. .coulometric-analysis {
  89. .card-1 {
  90. .card-icon {
  91. svg use {
  92. transition: @transition;
  93. }
  94. }
  95. }
  96. }
  97. .map .compass {
  98. svg g:nth-child(3) {
  99. g g path {
  100. transition: @transition;
  101. }
  102. }
  103. svg g:nth-child(4) {
  104. g g path {
  105. transition: @transition;
  106. }
  107. }
  108. &::after {
  109. transition: @transition;
  110. }
  111. }
  112. .name-box-period-label {
  113. transition: @transition;
  114. }
  115. .name-box-period-value {
  116. transition: @transition;
  117. }
  118. .svg-map-nx {
  119. .item-label {
  120. rect {
  121. transition: @transition;
  122. }
  123. .mapKey {
  124. transition: @transition;
  125. }
  126. }
  127. .popup-layer-svg {
  128. .mapKey {
  129. transition: @transition;
  130. }
  131. }
  132. #popup-box-svg rect {
  133. transition: @transition;
  134. }
  135. }
  136. .com-panel-3,
  137. .com-panel,
  138. .header-body {
  139. transition: @transition;
  140. }
  141. .com-panel-3 .dot,
  142. .com-panel.line:before {
  143. transition: @transition;
  144. }
  145. .panel-header {
  146. transition: @transition;
  147. }
  148. .fengji-icon {
  149. svg use {
  150. transition: @transition;
  151. }
  152. }
  153. .modal.el-dialog {
  154. transition: @transition;
  155. }
  156. .modal.el-dialog .el-dialog__title {
  157. transition: @transition;
  158. }
  159. .situation-body {
  160. .value span:nth-child(2) {
  161. transition: @transition;
  162. }
  163. }
  164. .coulometric-analysis .card-title {
  165. transition: @transition;
  166. }
  167. .com-panel,
  168. .panel-header,
  169. .home .table-card,
  170. .com-panel-3.situation,
  171. .el-menu--collapse,
  172. .el-sub-menu,
  173. .el-sub-menu__title,
  174. .el-menu--popup,
  175. .el-menu-item {
  176. transition: @transition;
  177. }
  178. .com-panel.line::before {
  179. transition: @transition;
  180. }
  181. .lightMenu {
  182. width : 0;
  183. height : calc(100% - 71px);
  184. position : absolute;
  185. left : 0;
  186. top : 57px;
  187. z-index : 100;
  188. border-radius: 20px;
  189. border : 0;
  190. overflow : hidden;
  191. transition : @transition;
  192. }
  193. .lightMenu.hidden {
  194. width : 0;
  195. transition: @transition;
  196. }
  197. .main-body {
  198. margin-left: 0;
  199. transition : @transition;
  200. }
  201. .dot.top-left {
  202. transition: @transition;
  203. }
  204. .dot.bottom-left {
  205. transition: @transition;
  206. }
  207. .dot.top-rignt {
  208. transition: @transition;
  209. }
  210. .dot.bottom-right {
  211. transition: @transition;
  212. }
  213. .lightMenu .el-menu--collapse {
  214. transition: @transition;
  215. }
  216. .lightMenu .el-menu--collapse {
  217. height: 100%;
  218. }
  219. .lightMenu .el-sub-menu__title {
  220. transition: @transition;
  221. }
  222. .lightMenu .el-sub-menu__title i {
  223. transition: @transition;
  224. }
  225. transition: @transition;
  226. }
  227. .left{
  228. margin-top: 5px;
  229. }