_config.less 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. @charset "UTF-8";
  2. // +----------------------------------------------------------------------
  3. // | ThinkAdmin
  4. // +----------------------------------------------------------------------
  5. // | 版权所有 2014~2022 广州楚才信息科技有限公司 [ http://www.cuci.cc ]
  6. // +----------------------------------------------------------------------
  7. // | 官方网站: https://thinkadmin.top
  8. // +----------------------------------------------------------------------
  9. // | 开源协议 ( https://mit-license.org )
  10. // +----------------------------------------------------------------------
  11. // | gitee 代码仓库:https://gitee.com/zoujingli/ThinkAdmin
  12. // | github 代码仓库:https://github.com/zoujingli/ThinkAdmin
  13. // +----------------------------------------------------------------------
  14. // 默认盒边框样式
  15. @BoxBottomLine: 1px solid rgba(0, 0, 0, 0.10);
  16. @BoxBorderColor: #EEE;
  17. @BoxBorderRadius: 3px;
  18. // 输入边线颜色
  19. @RadioBorderNormalColor: #CCC;
  20. @InputBorderNormalColor: #EEE;
  21. @InputBorderActiveColor: #DDD;
  22. // 基础阴影配置
  23. @ShadowOuterMin: 0 0 4px 0 rgba(0, 0, 0, 0.20);
  24. @ShadowOuterMax: 0 0 6px 0 rgba(0, 0, 0, 0.20);
  25. @ShadowBodyTop: 0 1px 6px 2px rgba(0, 21, 41, 0.35);
  26. @ShadowBodyLeft: 1px 0 6px 2px rgba(0, 21, 41, 0.35);
  27. @ShadowBodyRight: 0 1px 6px 2px rgba(0, 21, 41, 0.35);
  28. @ShadowInset: 0 1px 20px 0 rgba(0, 0, 0, 0.10) inset;
  29. // 导航条颜色配置
  30. @TopHeaderTextColor: #333;
  31. @TopHeaderBackColor: #FFF;
  32. @TopHeaderNavNormalTextColor: @TopHeaderTextColor;
  33. @TopHeaderNavNormalBackColor: @TopHeaderBackColor;
  34. // 导航条按钮颜色
  35. @TopHeaderHeight: 50px;
  36. @TopHeaderNavHoverTextColor: #000;
  37. @TopHeaderNavHoverBackColor: rgba(0, 0, 0, 0.05);
  38. @TopHeaderNavActiveTextColor: #000;
  39. @TopHeaderNavActiveBackColor: rgba(0, 0, 0, 0.10);
  40. // 左侧菜单布局颜色
  41. @LeftMainBackColor: #20222A !important;
  42. @LeftMainNavHoverBackColor: rgba(99, 99, 99, 0.2);
  43. @LeftMainNavHoverTextColor: #FFF;
  44. @LeftMainNavNormalBackColor: none;
  45. @LeftMainNavNormalTextColor: #EEE;
  46. @LeftMainNavActiveBackColor: #098;
  47. @LeftMainNavActiveTextColor: #FFF;
  48. // 加载页面背景颜色
  49. @LoadBackColor: #EFEFEF;
  50. // 窗口页面背景颜色
  51. @BodyMainTop: 50px;
  52. @BodyMainBackColor: #EFEFEF;
  53. // 左侧菜单大小
  54. @LayoutMiniLeftSize: 50px;
  55. @LayoutDefaLeftSzie: 200px;
  56. // 最小滚动样式
  57. #defaScrollbar() {
  58. height: 100%;
  59. display: block;
  60. overflow: auto;
  61. overflow-x: hidden;
  62. &::-webkit-scrollbar {
  63. width: 3px !important;
  64. &-track {
  65. background: #666 !important
  66. }
  67. &-thumb {
  68. background-color: #999 !important
  69. }
  70. }
  71. }
  72. // 通用延时动态
  73. #defaTransition(@time:0.2s) {
  74. transition: all @time linear;
  75. -o-transition: all @time linear;
  76. -moz-transition: all @time linear;
  77. -webkit-transition: all @time linear;
  78. }
  79. // 内容主体布局
  80. #bodyLayout() {
  81. > form.layui-form.layui-card {
  82. margin: 0;
  83. box-shadow: @ShadowOuterMax;
  84. > .layui-card-body {
  85. padding: 40px 40px 10px 40px;
  86. }
  87. }
  88. }
  89. // Layui 字体图标
  90. #iconLayout(@size:15px) {
  91. font-family: layui-icon !important;
  92. font-size: @size;
  93. font-style: normal;
  94. -webkit-font-smoothing: antialiased;
  95. -moz-osx-font-smoothing: grayscale;
  96. }
  97. // 禁止选中内容
  98. #NotSelect() {
  99. user-select: none;
  100. -ms-user-select: none;
  101. -moz-user-select: none;
  102. -webkit-user-select: none
  103. }
  104. // Flex 基础定位
  105. #flex() {
  106. display: -moz-box;
  107. display: -moz-flex;
  108. display: -ms-flexbox;
  109. display: -webkit-box;
  110. display: -webkit-flex;
  111. display: flex;
  112. }
  113. // Flex 换行方式
  114. #flexWrap(@type:wrap) {
  115. -ms-flex-wrap: @type;
  116. -webkit-flex-wrap: @type;
  117. flex-wrap: @type;
  118. }
  119. // Flex 垂直方向
  120. #flexAlign(@type) {
  121. -ms-flex-align: @type;
  122. -webkit-box-align: @type;
  123. -webkit-align-items: @type;
  124. align-items: @type;
  125. }
  126. // Flex 横向布局
  127. #flexJustify(@type) {
  128. -ms-flex-pack: @type;
  129. -webkit-box-pack: @type;
  130. -webkit-justify-content: @type;
  131. justify-content: @type;
  132. }
  133. // 主轴方向
  134. #flexDirection(@type:row) {
  135. -webkit-box-orient: vertical;
  136. -ms-flex-direction: @type;
  137. -webkit-flex-direction: @type;
  138. flex-direction: @type;
  139. }