color.less 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. @white: #fff;
  2. @info-color: @primary-color;
  3. @basic-mask-color: fade(@white, 30%);
  4. // :export {
  5. // name: "less";
  6. // mainColor: @mainColor;
  7. // fontSize: @fontSize;
  8. // }
  9. @iconify-bg-color: #5551;
  10. // =================================
  11. // ==============border-color============
  12. // =================================
  13. // Dark-dark
  14. @border-color-dark: #b6b7b9;
  15. // Dark-light
  16. @border-color-shallow-dark: #cececd;
  17. // Light-dark
  18. @border-color-light: #ebeef5;
  19. // Light-light
  20. @border-color-shallow-light: #f2f6fc;
  21. // =================================
  22. // ==============message==============
  23. // =================================
  24. // success-bg-color
  25. @success-background-color: #f1f9ec;
  26. // info-bg-color
  27. @info-background-color: #e8eff8;
  28. // warn-bg-color
  29. @warning-background-color: #fdf6ed;
  30. // danger-bg-color
  31. @danger-background-color: #fef0f0;
  32. // =================================
  33. // ==============bg color============
  34. // =================================
  35. // dark
  36. @background-color-dark: #f0f2f5;
  37. // light
  38. @background-color-light: #f5f7fa;
  39. // layout content background
  40. @layout-content-bg-color: #f1f1f6;
  41. // =================================
  42. // ==============Header=============
  43. // =================================
  44. @header-dark-bg-color: #394664;
  45. @header-dark-bg-hover-color: #273352;
  46. @header-light-bg-hover-color: #f6f6f6;
  47. @header-light-desc-color: #7c8087;
  48. @header-light-bottom-border-color: #eee;
  49. // =================================
  50. // ==============Menu============
  51. // =================================
  52. // let -menu
  53. @first-menu-item-dark-bg-color: #273352;
  54. // Level 2 menu dark background color
  55. @sub-menu-item-dark-bg-color: #314268;
  56. // Level 3 menu dark background color
  57. @children-menu-item-dark-bg-color: #4f6088;
  58. // top-menu
  59. @top-menu-active-bg-color: #273352;
  60. // trigger
  61. @trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
  62. @trigger-dark-bg-color: rgba(255, 255, 255, 0.1);
  63. @trigger-light-bg-color: @white;
  64. @trigger-light-hover-bg-color: rgba(255, 255, 255, 0.7);
  65. // =================================
  66. // ==============tree============
  67. // =================================
  68. // tree item hover background
  69. @tree-hover-background-color: #f5f7fa;
  70. // tree item hover font color
  71. @tree-hover-font-color: #f5f7fa;
  72. // =================================
  73. // ==============link============
  74. // =================================
  75. @link-hover-color: @primary-color;
  76. @link-active-color: darken(@primary-color, 10%);
  77. // =================================
  78. // ==============Text color-=============
  79. // =================================
  80. // Main text color
  81. @text-color-base: #2c3a61;
  82. // Label color
  83. @text-color-call-out: #606266;
  84. // Auxiliary information color-dark
  85. @text-color-help-dark: #909399;
  86. // Auxiliary information color-light color
  87. @text-color-help-light: #c0c4cc;
  88. // =================================
  89. // ==============breadcrumb=========
  90. // =================================
  91. @breadcrumb-item-normal-color: #6e90a7;
  92. // =================================
  93. // ==============button=============
  94. // =================================
  95. @button-primary-color: @primary-color;
  96. @button-primary-hover-color: darken(@primary-color, 5%);
  97. @button-ghost-color: @primary-color;
  98. @button-ghost-hover-color: lighten(@primary-color, 10%);
  99. @button-ghost-hover-bg-color: #e1ebf6;
  100. @button-success-color: @success-color;
  101. @button-success-hover-color: darken(@success-color, 10%);
  102. @button-warn-color: @warning-color;
  103. @button-warn-hover-color: darken(@warning-color, 10%);
  104. @button-error-color: @error-color;
  105. @button-error-hover-color: darken(@error-color, 10%);
  106. @button-cancel-color: @text-color-call-out;
  107. @button-cancel-bg-color: @white;
  108. @button-cancel-border-color: @border-color-shallow-dark;
  109. // Mouse over
  110. @button-cancel-hover-color: @primary-color;
  111. @button-cancel-hover-bg-color: @white;
  112. @button-cancel-hover-border-color: @primary-color;