ThinkAdmin/plugin/think-plugs-static/stc/public/static/theme/css/_config.less

@charset "UTF-8";

// +----------------------------------------------------------------------

// 默认盒边框样式
@BoxBottomLine: 1px solid rgba(0, 0, 0, 0.10);
@BoxBorderColor: #EEE;
@BoxBorderRadius: 3px;

// 输入边线颜色
@RadioBorderNormalColor: #CCC;
@InputBorderNormalColor: #EEE;
@InputBorderActiveColor: #DDD;

// 基础阴影配置
@ShadowOuterMin: 0 0 4px 0 rgba(0, 0, 0, 0.20);
@ShadowOuterMax: 0 0 6px 1px rgba(0, 0, 0, 0.20);
@ShadowBodyTop: 0 1px 6px 1px rgba(0, 21, 41, 0.35);
@ShadowBodyLeft: 1px 0 6px 1px rgba(0, 21, 41, 0.35);
@ShadowBodyRight: 0 1px 6px 1px rgba(0, 21, 41, 0.35);
@ShadowInset: 0 1px 20px 0 rgba(0, 0, 0, 0.10) inset;

// 导航条颜色配置
@TopHeaderTextColor: #333;
@TopHeaderBackColor: #FFF;
@TopHeaderNavNormalTextColor: @TopHeaderTextColor;
@TopHeaderNavNormalBackColor: @TopHeaderBackColor;

// 导航条按钮颜色
@TopHeaderNavHoverTextColor: #000;
@TopHeaderNavHoverBackColor: rgba(0, 0, 0, 0.05);
@TopHeaderNavActiveTextColor: #000;
@TopHeaderNavActiveBackColor: rgba(0, 0, 0, 0.10);

// 布局尺寸设置
@LayoutLeftMiniSize: 55px;
@LayoutLeftDefaSize: 200px;
@LayoutLeftNavHeight: 50px;
@LayoutHeadTopHeight: 55px;
@LayoutBodyHeadHeight: 50px;

// 左侧菜单布局颜色
@LeftMainBackColor: #20222A !important;

@LeftMainNavHoverBackColor: rgba(99, 99, 99, 0.2);
@LeftMainNavHoverTextColor: #FFF;

@LeftMainNavNormalBackColor: none;
@LeftMainNavNormalTextColor: #EEE;

@LeftMainNavActiveBackColor: #098;
@LeftMainNavActiveTextColor: #FFF;

// 加载页面背景颜色
@LoadBackColor: #EFEFEF;

// 窗口页面背景颜色
@BodyMainBackColor: #EFEFEF;

// 鍚庡彴涓婚璁捐 token
#themePalette(
  @accent: #009688,
  @bodyBg: #F4F7FB,
  @surface: #FFFFFF,
  @surfaceSoft: #F8FAFC,
  @border: #E2E8F0,
  @text: #1F2937,
  @muted: #64748B,
  @shadowTint: rgba(15, 23, 42, 0.10)
) {
  --ta-accent: @accent;
  --ta-accent-soft: rgba(red(@accent), green(@accent), blue(@accent), 0.12);
  --ta-accent-deep: rgba(red(@accent), green(@accent), blue(@accent), 0.22);
  --ta-body-bg: @bodyBg;
  --ta-surface: @surface;
  --ta-surface-soft: @surfaceSoft;
  --ta-border-color: @border;
  --ta-text-color: @text;
  --ta-text-muted: @muted;
  --ta-radius-sm: 6px;
  --ta-radius-md: 10px;
  --ta-shadow-xs: 0 8px 20px @shadowTint;
  --ta-shadow-sm: 0 14px 36px @shadowTint;
}

// 最小滚动样式
#defaScrollbar() {
  height: 100%;
  display: block;
  overflow: auto;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 3px !important;

    &-track {
      background: #666 !important
    }

    &-thumb {
      background-color: #999 !important
    }
  }
}

// 通用延时动态
#defaTransition(@time:0.2s,@type:all) {
  transition: @type @time linear;
  -o-transition: @type @time linear;
  -moz-transition: @type @time linear;
  -webkit-transition: @type @time linear;
}

// 内容主体布局
#bodyLayout() {
  > form.layui-form.layui-card {
    margin: 0;
    box-shadow: @ShadowOuterMax;

    > .layui-card-body {
      padding: 24px 24px 8px 24px;
    }
  }
}

// 图片背景容器
#imageBgCover() {
  overflow: hidden;
  position: relative;
  background: none no-repeat center center;
  vertical-align: middle;
  background-size: cover;
}

// Layui 字体图标
#iconLayout(@size:15px) {
  font-family: layui-icon !important;
  font-size: @size;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 禁止选中内容
#notSelect() {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none
}

// Flex 基础定位
#flex() {
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

// Flex 换行方式
#flexWrap(@type:wrap) {
  -ms-flex-wrap: @type;
  -webkit-flex-wrap: @type;
  flex-wrap: @type;
}

// Flex 垂直方向
#flexAlign(@type) {
  -ms-flex-align: @type;
  -webkit-box-align: @type;
  -webkit-align-items: @type;
  align-items: @type;
}

//  Flex 横向布局
#flexJustify(@type) {
  -ms-flex-pack: @type;
  -webkit-box-pack: @type;
  -webkit-justify-content: @type;
  justify-content: @type;
}

// 主轴方向
#flexDirection(@type:row) {
  -webkit-box-orient: vertical;
  -ms-flex-direction: @type;
  -webkit-flex-direction: @type;
  flex-direction: @type;
}