default.less 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. @import 'ant-design-vue/es/style/themes/default.less';
  2. :root {
  3. --blue-1: #e6f7ff;
  4. --blue-2: #bae7ff;
  5. --blue-3: #91d5ff;
  6. --blue-4: #69c0ff;
  7. --blue-5: #40a9ff;
  8. --blue-6: #1890ff;
  9. --blue-7: #096dd9;
  10. --blue-8: #0050b3;
  11. --blue-9: #003a8c;
  12. --blue-10: #002766;
  13. --green-1: #f6ffed;
  14. --green-2: #d9f7be;
  15. --green-3: #b7eb8f;
  16. --green-4: #95de64;
  17. --green-5: #73d13d;
  18. --green-6: #52c41a;
  19. --green-7: #389e0d;
  20. --green-8: #237804;
  21. --green-9: #135200;
  22. --green-10: #092b00;
  23. --red-1: #fff1f0;
  24. --red-2: #ffccc7;
  25. --red-3: #ffa39e;
  26. --red-4: #ff7875;
  27. --red-5: #ff4d4f;
  28. --red-6: #f5222d;
  29. --red-7: #cf1322;
  30. --red-8: #a8071a;
  31. --red-9: #820014;
  32. --red-10: #5c0011;
  33. --gold-1: #fffbe6;
  34. --gold-2: #fff1b8;
  35. --gold-3: #ffe58f;
  36. --gold-4: #ffd666;
  37. --gold-5: #ffc53d;
  38. --gold-6: #faad14;
  39. --gold-7: #d48806;
  40. --gold-8: #ad6800;
  41. --gold-9: #874d00;
  42. --gold-10: #613400;
  43. --purple-1: #f9f0ff;
  44. --purple-2: #efdbff;
  45. --purple-3: #d3adf7;
  46. --purple-4: #b37feb;
  47. --purple-5: #9254de;
  48. --purple-6: #722ed1;
  49. --purple-7: #531dab;
  50. --purple-8: #391085;
  51. --purple-9: #22075e;
  52. --purple-10: #120338;
  53. --cyan-1: #e6fffb;
  54. --cyan-2: #b5f5ec;
  55. --cyan-3: #87e8de;
  56. --cyan-4: #5cdbd3;
  57. --cyan-5: #36cfc9;
  58. --cyan-6: #13c2c2;
  59. --cyan-7: #08979c;
  60. --cyan-8: #006d75;
  61. --cyan-9: #00474f;
  62. --cyan-10: #002329;
  63. --pink-1: #fff0f6;
  64. --pink-2: #ffd6e7;
  65. --pink-3: #ffadd2;
  66. --pink-4: #ff85c0;
  67. --pink-5: #f759ab;
  68. --pink-6: #eb2f96;
  69. --pink-7: #c41d7f;
  70. --pink-8: #9e1068;
  71. --pink-9: #780650;
  72. --pink-10: #520339;
  73. --orange-1: #fff7e6;
  74. --orange-2: #ffe7ba;
  75. --orange-3: #ffd591;
  76. --orange-4: #ffc069;
  77. --orange-5: #ffa940;
  78. --orange-6: #fa8c16;
  79. --orange-7: #d46b08;
  80. --orange-8: #ad4e00;
  81. --orange-9: #873800;
  82. --orange-10: #612500;
  83. --primary-1: var(--blue-1);
  84. --primary-2: var(--blue-2);
  85. --primary-3: var(--blue-3);
  86. --primary-4: var(--blue-4);
  87. --primary-5: var(--blue-5);
  88. --primary-6: var(--blue-6);
  89. --primary-7: var(--blue-7);
  90. --primary-8: var(--blue-8);
  91. --primary-9: var(--blue-9);
  92. --primary-10: var(--blue-10);
  93. --primary-color: var(--primary-6);
  94. --primary-color-hover: var(--primary-5);
  95. --primary-color-active: var(--primary-7);
  96. --primary-color-outline: var(--primary-2);
  97. --info-color: var(--primary-color);
  98. --success-color: var(--green-6);
  99. --processing-color: var(--blue-6);
  100. --highlight-color: var(--red-5);
  101. --warning-color: var(--gold-6);
  102. --warning-color-hover: var(--gold-5);
  103. --warning-color-active: var(--gold-7);
  104. --warning-color-outline: var(--gold-2);
  105. --error-color: var(--red-5);
  106. --error-color-hover: var(--red-4);
  107. --error-color-active: var(--red-7);
  108. --error-color-outline: var(--red-2);
  109. --body-background: #fff;
  110. --component-background: #fff;
  111. --popover-background: @component-background;
  112. --popover-customize-border-color: @border-color-split;
  113. --text-color: fade(@black, 85%);
  114. --text-color-secondary: fade(@black, 45%);
  115. --text-color-inverse: @white;
  116. --icon-color-hover: fade(@black, 75%);
  117. --heading-color: fade(@black, 85%);
  118. --item-hover-bg: #f5f5f5;
  119. // Border color
  120. --border-color-base: hsv(0, 0, 85%);
  121. --border-color-split: hsv(0, 0, 94%);
  122. //--border-color-inverse: @white;
  123. //
  124. --background-color-light: hsv(0, 0, 98%);
  125. --background-color-base: hsv(0, 0, 96%);
  126. // Disabled states
  127. --disabled-color: fade(#000, 25%);
  128. --disabled-bg: @background-color-base;
  129. --disabled-color-dark: fade(#fff, 35%);
  130. // Shadow
  131. --shadow-color: rgba(0, 0, 0, 0.15);
  132. --shadow-color-inverse: @component-background;
  133. --box-shadow-base: @shadow-1-down;
  134. --shadow-1-up: 0 -2px 8px @shadow-color;
  135. --shadow-1-down: 0 2px 8px @shadow-color;
  136. --shadow-1-left: -2px 0 8px @shadow-color;
  137. --shadow-1-right: 2px 0 8px @shadow-color;
  138. --shadow-2: 0 4px 12px @shadow-color;
  139. // Buttons
  140. --btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
  141. --btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  142. --btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  143. --btn-default-bg: @component-background;
  144. --btn-default-ghost-color: @component-background;
  145. --btn-default-ghost-border: @component-background;
  146. --btn-text-hover-bg: rgba(0, 0, 0, 0.018);
  147. --btn-text-active-bg: rgba(0, 0, 0, 0.028);
  148. // Checkbox
  149. --checkbox-check-bg: @checkbox-check-color;
  150. // Descriptions
  151. --descriptions-bg: #fafafa;
  152. // Divider
  153. --divider-color: rgba(0, 0, 0, 6%);
  154. // Dropdown 有两个
  155. --dropdown-menu-submenu-disabled-bg: @component-background;
  156. // Radio
  157. --radio-dot-disabled-color: fade(@black, 20%);
  158. --radio-solid-checked-color: @component-background;
  159. // Radio buttons
  160. --radio-disabled-button-checked-bg: coverTintMixin(@black, 90%);
  161. --radio-disabled-button-checked-color: @disabled-color;
  162. // Layout
  163. --layout-body-background: #f0f2f5;
  164. --layout-header-background: #001529;
  165. --layout-trigger-background: #002140;
  166. //--layout-sider-background-1: coverTintMixin(#001529, 10%);
  167. // Dropdown 有两个
  168. --dropdown-menu-bg: @component-background;
  169. // Input
  170. --input-placeholder-color: hsv(0, 0, 75%);
  171. --input-icon-color: @input-color;
  172. --input-bg: @component-background;
  173. --input-number-handler-active-bg: #f4f4f4;
  174. --input-icon-hover-color: fade(@black, 85%);
  175. // Mentions
  176. --mentions-dropdown-bg: @component-background;
  177. // Select
  178. --select-dropdown-bg: @component-background;
  179. --select-background: @component-background;
  180. --select-clear-background: @select-background;
  181. --select-selection-item-bg: @background-color-base;
  182. --select-selection-item-border-color: @border-color-split;
  183. --select-multiple-disabled-background: @input-disabled-bg;
  184. --select-multiple-item-disabled-color: #bfbfbf;
  185. --select-multiple-item-disabled-border-color: @select-border-color;
  186. // Cascader
  187. --cascader-bg: @component-background;
  188. --cascader-menu-bg: @component-background;
  189. --cascader-menu-border-color-split: @border-color-split;
  190. // Tooltip
  191. --tooltip-bg: rgba(0, 0, 0, 0.75);
  192. // Popover
  193. --popover-bg: @component-background;
  194. // Modal
  195. --modal-header-bg: @component-background;
  196. --modal-header-border-color-split: @border-color-split;
  197. --modal-content-bg: @component-background;
  198. --modal-footer-border-color-split: @border-color-split;
  199. // Progress
  200. --progress-steps-item-bg: #f3f3f3;
  201. // Menu
  202. --menu-popup-bg: @component-background;
  203. --menu-dark-bg: @layout-header-background;
  204. --menu-dark-inline-submenu-bg: #000c17;
  205. // Table
  206. --table-header-bg: @background-color-light;
  207. --table-header-sort-bg: @background-color-base;
  208. --table-body-sort-bg: #fafafa;
  209. --table-row-hover-bg: @background-color-light;
  210. --table-expanded-row-bg: #fbfbfb;
  211. --table-header-cell-split-color: rgba(0, 0, 0, 0.06);
  212. --table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
  213. --table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
  214. --table-filter-btns-bg: inherit;
  215. --table-filter-dropdown-bg: @component-background;
  216. --table-expand-icon-bg: @component-background;
  217. // TimePicker
  218. --picker-bg: @component-background;
  219. --picker-basic-cell-disabled-bg: @disabled-bg;
  220. --picker-border-color: @border-color-split;
  221. // Calendar
  222. --calendar-bg: @component-background;
  223. --calendar-input-bg: @input-bg;
  224. --calendar-border-color: @border-color-inverse;
  225. --calendar-full-bg: @calendar-bg;
  226. // Badge
  227. --badge-text-color: @component-background;
  228. // Rate
  229. --rate-star-bg: @border-color-split;
  230. // Card
  231. --card-actions-background: @component-background;
  232. --card-skeleton-bg: #cfd8dc;
  233. --card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
  234. 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
  235. // Comment
  236. --comment-bg: inherit;
  237. --comment-author-time-color: #ccc;
  238. --comment-action-hover-color: #595959;
  239. // BackTop
  240. --back-top-bg: @text-color-secondary;
  241. --back-top-hover-bg: @text-color;
  242. // Avatar
  243. --avatar-bg: #ccc;
  244. // Switch
  245. --switch-bg: @component-background;
  246. // Pagination
  247. --pagination-item-bg: @component-background;
  248. --pagination-item-bg-active: @component-background;
  249. --pagination-item-link-bg: @component-background;
  250. --pagination-item-disabled-color-active: @white;
  251. --pagination-item-disabled-bg-active: darken(hsv(0, 0, 96%), 10%);
  252. --pagination-item-input-bg: @component-background;
  253. // PageHeader
  254. --page-header-back-color: #000;
  255. --page-header-ghost-bg: inherit;
  256. // Slider
  257. --slider-rail-background-color: @background-color-base;
  258. --slider-rail-background-color-hover: #e1e1e1;
  259. --slider-dot-border-color: @border-color-split;
  260. --slider-dot-border-color-active: @primary-4;
  261. // Tree
  262. --tree-bg: @component-background;
  263. // Skeleton
  264. --skeleton-to-color: coverShadeMixin(@skeleton-color, 5%);
  265. // Transfer
  266. --transfer-item-hover-bg: @item-hover-bg;
  267. // Message
  268. --message-notice-content-bg: @component-background;
  269. // List
  270. --list-customize-card-bg: @component-background;
  271. // Drawer
  272. --drawer-bg: @component-background;
  273. // Timeline
  274. --timeline-color: @border-color-split;
  275. --timeline-dot-color: @primary-color;
  276. // Image
  277. --image-preview-operation-disabled-color: rgba(255, 255, 255, 0.45);
  278. // Steps
  279. --steps-nav-arrow-color: fade(@black, 25%);
  280. --steps-background: @component-background;
  281. // Notification
  282. --notification-bg: @component-background;
  283. // 侧边栏
  284. --sidebar-light-shadow: 1px 3px 3px rgba(0, 21, 41, 0.08);
  285. --sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
  286. // 顶栏
  287. --header-light-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  288. --header-dark-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  289. --header-tool-hover-bg: rgba(0, 0, 0, 0.025);
  290. --header-dark-tool-hover-bg: rgba(255, 255, 255, 0.05);
  291. --header-color-split: rgba(0, 0, 0, 0.08);
  292. // logo
  293. --logo-light-shadow: 1px 2px 3px rgba(0, 21, 41, 0.08);
  294. --logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, 0.35);
  295. //
  296. --gradient-min: fade(#cfd8dc, 20%);
  297. --gradient-max: fade(#cfd8dc, 40%);
  298. //
  299. --success-fade-20: fade(#52c41a, 20%);
  300. --error-fade-20: fade(#ff4d4f, 20%);
  301. --warning-fade-20: fade(#faad14, 20%);
  302. //--primary-fade-20: fade(#1890ff, 20%);
  303. --primary-fade-20: var(--primary-2);
  304. //--primary-fade-8: fade(#1890ff, 8%);
  305. --white--fade--65: rgba(255,255,255,.65);
  306. --menu-dark-highlight-color: #fff;
  307. --btn-primary-color: #fff;
  308. --tooltip-color: #fff;
  309. // workfolw design
  310. --node-wrap-box-color: rgb(255, 255, 255);
  311. --node-wrap-box-before-color: #FFFFFF;
  312. --node-wrap-box-before-borde-color: rgb(202, 202, 202);
  313. --auto-judge-before-color: @component-background;
  314. }
  315. #app .form-designer-container-9136076486841527{
  316. --form-designer-primary-color: var(--primary-6);
  317. --primary-background-color: @component-background;
  318. --layout-background-color: fade(#9867f7, 12%);
  319. --layout-hover-bg-color: fade(#9867f7, 24%);
  320. --title-text-color: fade(@white, 85%);
  321. --border-color: var(--border-color-split);
  322. }