global.less 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. html,
  2. body,
  3. #root {
  4. height: 100%;
  5. margin: 0;
  6. padding: 0;
  7. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  8. 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  9. 'Noto Color Emoji';
  10. }
  11. .colorWeak {
  12. filter: invert(80%);
  13. }
  14. .ant-layout {
  15. min-height: 100vh;
  16. }
  17. .ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
  18. left: unset;
  19. }
  20. canvas {
  21. display: block;
  22. }
  23. body {
  24. text-rendering: optimizeLegibility;
  25. -webkit-font-smoothing: antialiased;
  26. -moz-osx-font-smoothing: grayscale;
  27. }
  28. ul,
  29. ol {
  30. list-style: none;
  31. }
  32. @media (max-width: 768px) {
  33. .ant-table {
  34. width: 100%;
  35. overflow-x: auto;
  36. &-thead>tr,
  37. &-tbody>tr {
  38. >th,
  39. >td {
  40. white-space: pre;
  41. >span {
  42. display: block;
  43. }
  44. }
  45. }
  46. }
  47. }
  48. // 框架格式化
  49. .ant-pro-top-nav-header-logo>*:first-child>img {
  50. display: inline-block;
  51. height: 26px;
  52. vertical-align: middle;
  53. }
  54. .ant-layout-sider {
  55. .ant-pro-base-menu-inline-item-title {
  56. font-size: 13px;
  57. }
  58. .ant-menu-title-content .anticon {
  59. font-size: 13px !important;
  60. min-width: 13px !important;
  61. }
  62. .ant-menu-item-selected {
  63. color: #000 !important;
  64. }
  65. .ant-menu-dark .ant-menu-item-selected {
  66. color: #FFF !important;
  67. }
  68. }
  69. .ant-pro-layout .ant-pro-layout-content {
  70. padding-block: 0;
  71. padding-inline: 0;
  72. }
  73. .ant-pro-page-container .ant-pro-page-container-warp-page-header {
  74. padding-block-start: 0;
  75. padding-block-end: 10px;
  76. padding-inline-start: 20px;
  77. padding-inline-end: 20px;
  78. }
  79. /** 初始化 表格里样式 */
  80. .all_table {
  81. .ant-table-cell {
  82. padding: 2px 5px !important;
  83. }
  84. .progress {
  85. padding: 0 !important;
  86. .ant-progress {
  87. height: 100%;
  88. .ant-progress-outer {
  89. height: 100%;
  90. .ant-progress-inner {
  91. height: 100%;
  92. border-radius: 0;
  93. .ant-progress-bg {
  94. height: 100% !important;
  95. border-radius: 0;
  96. }
  97. }
  98. }
  99. }
  100. }
  101. .ant-statistic {
  102. line-height: 22px;
  103. .ant-statistic-content {
  104. font-size: 13px;
  105. word-break: break-word;
  106. }
  107. }
  108. .ant-typography {
  109. font-size: 13px;
  110. }
  111. .ant-table-summary td {
  112. font-weight: bold;
  113. }
  114. }
  115. .ringRatio.ant-table-cell {
  116. padding: 0 !important;
  117. }
  118. // 黑夜表格
  119. .all_table_dark {}
  120. .header_table_body td {
  121. font-weight: 600;
  122. }
  123. // 自定义拂晓蓝xiao 样式
  124. .css-dark {
  125. .ant-pro-sider-logo {
  126. color: rgba(255, 255, 255, 0.65);
  127. border-block-end: 1px solid rgba(255, 255, 255, 0.06);
  128. &>a>h1 {
  129. color: rgba(255, 255, 255, 0.88);
  130. }
  131. }
  132. .ant-pro-sider-actions {
  133. color: rgba(255, 255, 255, 0.65);
  134. }
  135. aside {
  136. &.ant-layout-sider.ant-pro-sider {
  137. background-color: #001529;
  138. }
  139. .ant-menu {
  140. .ant-menu-item,
  141. .ant-menu-submenu-title {
  142. color: rgba(255, 255, 255, 0.65);
  143. }
  144. .ant-menu-item:not(.ant-menu-item-selected):hover {
  145. color: rgba(255, 255, 255, 0.88) !important;
  146. }
  147. }
  148. &.ant-layout-sider .ant-menu-item-selected {
  149. color: #ffffff !important;
  150. }
  151. .ant-menu-light {
  152. .ant-menu-submenu-selected>.ant-menu-submenu-title {
  153. color: #1890ff;
  154. }
  155. .ant-menu-item-selected {
  156. // background-color: rgba(255, 255, 255, 0.04);
  157. background-color: #1890ff;
  158. }
  159. &:not(.ant-menu-horizontal) {
  160. .ant-menu-item:not(.ant-menu-item-selected):hover,
  161. .ant-menu-submenu-title:hover {
  162. background-color: rgba(255, 255, 255, 0.03);
  163. }
  164. }
  165. }
  166. .ant-pro-base-menu-inline-group .ant-menu-item-group-title {
  167. color: rgba(255, 255, 255, 0.65);
  168. }
  169. }
  170. header {
  171. &.ant-layout-header {
  172. background-color: #001529 !important;
  173. }
  174. .ant-pro-top-nav-header-logo>*:first-child>h1 {
  175. color: rgba(255, 255, 255, 0.88)
  176. }
  177. .ant-pro-global-header-header-actions-avatar>div {
  178. color: rgba(255, 255, 255, 0.45);
  179. }
  180. .ant-menu-light.ant-menu-horizontal>.ant-menu-item-selected {
  181. color: rgba(255, 255, 255, 0.95)
  182. }
  183. }
  184. }
  185. ::-webkit-scrollbar {
  186. width: 6px;
  187. height: 8px;
  188. }
  189. ::-webkit-scrollbar-thumb {
  190. border-radius: 4px;
  191. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  192. background-color: #ddd;
  193. background: rgba(0, 0, 0, 0);
  194. }
  195. :hover::-webkit-scrollbar-thumb {
  196. background: rgba(82, 82, 82, 0.3);
  197. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  198. }