global.less 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. /* stylelint-disable property-no-vendor-prefix */
  2. /* stylelint-disable selector-pseudo-element-colon-notation */
  3. /* stylelint-disable selector-class-pattern */
  4. @import '~antd/es/style/themes/default.less';
  5. html,
  6. body,
  7. #root {
  8. height: 100%;
  9. }
  10. .colorWeak {
  11. filter: invert(80%);
  12. }
  13. .ant-layout {
  14. max-height: 100vh;
  15. overflow-y: hidden;
  16. }
  17. .ant-pro-basicLayout-content {
  18. max-height: 100%;
  19. max-width: 100%;
  20. overscroll-behavior: none;
  21. overflow: hidden;
  22. }
  23. // .ant-menu-submenu-selected .ant-menu-submenu-title {
  24. // background: #595284;
  25. // border-left: 3px solid #886ab5;
  26. // }
  27. .ant-layout-header {
  28. background: linear-gradient(to right, #584475 0%, #7c62a4 50%, #7c62a4 50%, #584475 100%) !important;
  29. }
  30. .ant-pro-basicLayout .ant-layout-header.ant-pro-fixed-header {
  31. background: linear-gradient(to right, #584475 0%, #7c62a4 50%, #7c62a4 50%, #584475 100%) !important;
  32. }
  33. .ant-menu-dark .ant-menu-sub,
  34. .ant-menu.ant-menu-dark,
  35. .ant-menu.ant-menu-dark .ant-menu-sub {
  36. background: none !important;
  37. }
  38. .ant-menu-dark.ant-menu-submenu-popup {
  39. background: #7c62a4;
  40. }
  41. .ant-menu-dark .ant-menu-inline.ant-menu-sub {
  42. background: #584475;
  43. }
  44. .ant-menu-dark .ant-menu-item-only-child:hover {
  45. background: @primary-color;
  46. }
  47. .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
  48. background: @primary-color;
  49. border-right: 3px solid #ffffff;
  50. }
  51. .ant-menu-inline .ant-menu-submenu-title {
  52. margin-bottom: 0;
  53. }
  54. .ant-switch-checked {
  55. background: @primary-color;
  56. }
  57. // 修复proTable中的列设置,tree list hover效果异常
  58. .ant-pro-table-column-setting-list > .ant-tree .ant-tree-node-content-wrapper:hover {
  59. background-color: unset;
  60. }
  61. .ant-btn-primary[disabled],
  62. .ant-btn-primary[disabled]:hover,
  63. .ant-btn-primary[disabled]:focus,
  64. .ant-btn-primary[disabled]:active {
  65. color: white;
  66. background: rgba(136 106 181 / 50%);
  67. }
  68. .ant-pro-top-nav-header-logo h1 {
  69. font-weight: 600;
  70. font-size: 18px;
  71. }
  72. canvas {
  73. display: block;
  74. }
  75. body {
  76. text-rendering: optimizelegibility;
  77. -webkit-font-smoothing: antialiased;
  78. -moz-osx-font-smoothing: grayscale;
  79. }
  80. ul,
  81. ol {
  82. list-style: none;
  83. margin: 0;
  84. padding: 0;
  85. }
  86. *,
  87. :after,
  88. :before {
  89. box-sizing: border-box;
  90. border: 0 solid #e4e4e7;
  91. }
  92. .vditor-reset ul,
  93. .vditor-reset ol {
  94. list-style-type: decimal !important;
  95. }
  96. @media (max-width: @screen-xs) {
  97. .ant-table {
  98. width: 100%;
  99. overflow-x: auto;
  100. &-thead > tr,
  101. &-tbody > tr {
  102. > th,
  103. > td {
  104. white-space: pre;
  105. > span {
  106. display: block;
  107. }
  108. }
  109. }
  110. }
  111. }
  112. // 兼容IE11
  113. @media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
  114. body .ant-design-pro > .ant-layout {
  115. min-height: 100vh;
  116. }
  117. }
  118. input:-webkit-autofill,
  119. input:-webkit-autofill:hover,
  120. input:-webkit-autofill:focus,
  121. input:-webkit-autofill:active {
  122. -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
  123. -webkit-transition-delay: 111111s;
  124. }
  125. .ant-picker {
  126. width: 100%;
  127. }
  128. .ant-drawer-body {
  129. padding: 0 !important;
  130. }
  131. .ant-skeleton-element {
  132. width: 100% !important;
  133. }
  134. // 弹窗左右结构
  135. .sheet-box {
  136. // overflow: hidden;
  137. .sheet-box-left {
  138. height: 100vh;
  139. // height: calc(100vh - 15px);
  140. padding: 24px 0 24px 24px;
  141. overflow-y: auto;
  142. .sheet-left-panel {
  143. // overflow-x: hidden;
  144. }
  145. }
  146. .sheet-box-right {
  147. background-color: #fafafa;
  148. border-left: 1px solid #eaeaea;
  149. .sheet-right-panel,
  150. .sheet-panel-record {
  151. height: calc(50vh - 62px);
  152. overflow-x: hidden;
  153. overflow-y: auto;
  154. // 带有按钮时需减去54px
  155. &.sheet-panel-has-btn {
  156. height: calc(50vh - 62px - 54px);
  157. }
  158. }
  159. .sheet-btns {
  160. height: 54px;
  161. }
  162. .sheet-right-panel {
  163. & .ant-card,
  164. & .ant-table {
  165. background: #fafafa;
  166. }
  167. // 空数据时tbody样式
  168. .ant-table-tbody {
  169. /* stylelint-disable-next-line selector-max-compound-selectors */
  170. & > tr.ant-table-placeholder > td {
  171. border-bottom: none;
  172. }
  173. /* stylelint-disable-next-line selector-max-compound-selectors */
  174. & > tr.ant-table-placeholder:hover > td {
  175. background: none !important;
  176. }
  177. }
  178. }
  179. }
  180. }
  181. /** 滚动条自定义 */
  182. ::-webkit-scrollbar {
  183. width: 8px;
  184. height: 8px;
  185. }
  186. ::-webkit-scrollbar-track {
  187. background: rgb(239 239 239);
  188. border-radius: 2px;
  189. }
  190. ::-webkit-scrollbar-thumb {
  191. background: #bfbfbf;
  192. border-radius: 10px;
  193. }
  194. ::-webkit-scrollbar-thumb:hover {
  195. background: #636363;
  196. }
  197. .ant-select-selection-item {
  198. text-overflow: unset;
  199. }
  200. .ant-table-cell .ant-typography {
  201. // color: unset;
  202. }
  203. .zh-drawer.ant-drawer-open {
  204. @media (min-width: 1200px) {
  205. > .ant-drawer-content-wrapper {
  206. width: 70% !important;
  207. }
  208. }
  209. @media all and (min-width: 768px) and (max-width: 1024px) {
  210. > .ant-drawer-content-wrapper {
  211. width: 100% !important;
  212. }
  213. }
  214. @media screen and (min-width: 320px) and (max-width: 750px) {
  215. > .ant-drawer-content-wrapper {
  216. width: 100% !important;
  217. }
  218. }
  219. // > .ant-drawer-content-wrapper {
  220. // width: 70% !important;
  221. // }
  222. .ant-drawer-header {
  223. padding: 0 !important;
  224. .ant-drawer-header-title {
  225. position: absolute;
  226. top: 12px;
  227. right: 0;
  228. z-index: 1050;
  229. }
  230. }
  231. }
  232. .ant-pro-table-list-toolbar-search {
  233. > .ant-input-group-wrapper {
  234. width: 250px;
  235. }
  236. }