_config.less 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  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 1px rgba(0, 0, 0, 0.20);
  25. @ShadowBodyTop: 0 1px 6px 1px rgba(0, 21, 41, 0.35);
  26. @ShadowBodyLeft: 1px 0 6px 1px rgba(0, 21, 41, 0.35);
  27. @ShadowBodyRight: 0 1px 6px 1px 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. @TopHeaderNavHoverTextColor: #000;
  36. @TopHeaderNavHoverBackColor: rgba(0, 0, 0, 0.05);
  37. @TopHeaderNavActiveTextColor: #000;
  38. @TopHeaderNavActiveBackColor: rgba(0, 0, 0, 0.10);
  39. // 布局尺寸设置
  40. @LayoutLeftMiniSize: 55px;
  41. @LayoutLeftDefaSize: 200px;
  42. @LayoutLeftNavHeight: 50px;
  43. @LayoutHeadTopHeight: 55px;
  44. @LayoutBodyHeadHeight: 50px;
  45. // 左侧菜单布局颜色
  46. @LeftMainBackColor: #20222A !important;
  47. @LeftMainNavHoverBackColor: rgba(99, 99, 99, 0.2);
  48. @LeftMainNavHoverTextColor: #FFF;
  49. @LeftMainNavNormalBackColor: none;
  50. @LeftMainNavNormalTextColor: #EEE;
  51. @LeftMainNavActiveBackColor: #098;
  52. @LeftMainNavActiveTextColor: #FFF;
  53. // 加载页面背景颜色
  54. @LoadBackColor: #EFEFEF;
  55. // 窗口页面背景颜色
  56. @BodyMainBackColor: #EFEFEF;
  57. // 最小滚动样式
  58. #defaScrollbar() {
  59. height: 100%;
  60. display: block;
  61. overflow: auto;
  62. overflow-x: hidden;
  63. &::-webkit-scrollbar {
  64. width: 3px !important;
  65. &-track {
  66. background: #666 !important
  67. }
  68. &-thumb {
  69. background-color: #999 !important
  70. }
  71. }
  72. }
  73. // 通用延时动态
  74. #defaTransition(@time:0.2s,@type:all) {
  75. transition: @type @time linear;
  76. -o-transition: @type @time linear;
  77. -moz-transition: @type @time linear;
  78. -webkit-transition: @type @time linear;
  79. }
  80. // 内容主体布局
  81. #bodyLayout() {
  82. > form.layui-form.layui-card {
  83. margin: 0;
  84. box-shadow: @ShadowOuterMax;
  85. > .layui-card-body {
  86. padding: 40px 40px 10px 40px;
  87. }
  88. }
  89. }
  90. // 图片背景容器
  91. #imageBgCover() {
  92. overflow: hidden;
  93. position: relative;
  94. background: none no-repeat center center;
  95. vertical-align: middle;
  96. background-size: cover;
  97. }
  98. // Layui 字体图标
  99. #iconLayout(@size:15px) {
  100. font-family: layui-icon !important;
  101. font-size: @size;
  102. font-style: normal;
  103. -webkit-font-smoothing: antialiased;
  104. -moz-osx-font-smoothing: grayscale;
  105. }
  106. // 禁止选中内容
  107. #NotSelect() {
  108. user-select: none;
  109. -ms-user-select: none;
  110. -moz-user-select: none;
  111. -webkit-user-select: none
  112. }
  113. // Flex 基础定位
  114. #flex() {
  115. display: -moz-box;
  116. display: -moz-flex;
  117. display: -ms-flexbox;
  118. display: -webkit-box;
  119. display: -webkit-flex;
  120. display: flex;
  121. }
  122. // Flex 换行方式
  123. #flexWrap(@type:wrap) {
  124. -ms-flex-wrap: @type;
  125. -webkit-flex-wrap: @type;
  126. flex-wrap: @type;
  127. }
  128. // Flex 垂直方向
  129. #flexAlign(@type) {
  130. -ms-flex-align: @type;
  131. -webkit-box-align: @type;
  132. -webkit-align-items: @type;
  133. align-items: @type;
  134. }
  135. // Flex 横向布局
  136. #flexJustify(@type) {
  137. -ms-flex-pack: @type;
  138. -webkit-box-pack: @type;
  139. -webkit-justify-content: @type;
  140. justify-content: @type;
  141. }
  142. // 主轴方向
  143. #flexDirection(@type:row) {
  144. -webkit-box-orient: vertical;
  145. -ms-flex-direction: @type;
  146. -webkit-flex-direction: @type;
  147. flex-direction: @type;
  148. }