mschool/src/component-ui/global.less

// 注意：为什么要写两个重复的 :root？
// 由于 vant 中的主题变量也是在 :root 下声明的，所以在有些情况下会由于优先级的问题无法成功覆盖。通过
// :root:root 可以显式地让你所写内容的优先级更高一些，从而确保主题变量的成功覆盖。
:root:root {
  // 01 品牌色
  --k-primary: #ff8057;

  // 02 背景色
  --k-bg-1: #fff;
  --k-bg-2: #f8f8f8;
  --k-bg-3: #f6f6f6;
  --k-bg-4: #f2f2f2;

  // 03 辅助色
  --k-orange: #ffebdd;
  --k-red: #f44541;
  --k-blue: #64a9ff;
  --k-purple: #8f80ff;

  // 04 渐变色
  --k-gradient-1: linear-gradient(90deg, #ff9c63 0%, #ff7144 100%);
  --k-gradient-2: linear-gradient(270deg, #ff4f44 0%, #ffafab 100%);
  --k-gradient-3: linear-gradient(90deg, #8cccff 0%, #459aff 100%);
  --k-gradient-4: linear-gradient(90deg, #d4a9ff 0%, #8f80ff 100%);
  --k-gradient-5: linear-gradient(90deg, #a9f0b4 0%, #09c58c 100%);

  // 05 字体颜色
  --k-font-primary: #f67146;
  --k-font-danger: #f44541;
  --k-gray-1: #333333;
  --k-gray-2: #666666;
  --k-gray-3: #777777;
  --k-gray-4: #aaaaaa;
  --k-gray-5: #cccccc;

  // 06 分割线
  --k-hairline-dark: #eeeeee;
  --k-hairline-shallow: #f2f2f2;

  // 07 蒙层
  --k-overlay-background-dark: rgba(0, 0, 0, 0.7);
  --k-overlay-background-shallow: rgba(0, 0, 0, 0.5);

  // 圆角
  --k-radius-sm: 2px;
  --k-radius-md: 4px;
  --k-radius-lg: 8px;
  --k-radius-xl: 10px;
  --k-radius-max: 999px;

  // 间距
  --k-padding-base: 4px;
  --k-padding-xs: 6px;
  --k-padding-sm: 8px;
  --k-padding-md: 12px;
  --k-padding-lg: 16px;
  --k-padding-xl: 20px;
  --k-padding-page: 13px; // 页面是基础边距
  --k-padding-card: 9px; // 卡片的基础边距

  // 描边 投影
  --k-border-color: var(--k-primary);
  --k-border-width: 1px;
  --k-shadow: 0px 2px 12px 0px rgba(100, 101, 102, 0.12);

  // 设置Vant UI组件库中的默认样式；
  --van-primary: var(--k-primary);
  --van-primary-color: var(--van-primary);
  --van-primary-text: var(--k-font-primary);
  --van-text-color: var(--k-gray-1);

  // 多选框
  --van-checkbox-border-color: #dcdcdc;
  --van-checkbox-label-color: var(--k-gray-1);
  --van-checkbox-disabled-icon-color: #dcdcdc;
  --van-checkbox-disabled-label-color: var(--k-gray-5);
  --van-checkbox-disabled-background: #f7f8fa;

  // 单选框
  --van-radio-border-color: #dcdcdc;
  --van-radio-disabled-icon-color: #dcdcdc;
  --van-radio-disabled-background: #f7f8fa;

  // 导航
  --van-nav-bar-arrow-size: 20px;
  --van-nav-bar-title-font-size: 18px;
  --van-nav-bar-title-text-color: var(--k-gray-1);
  --van-nav-bar-icon-color: var(--k-gray-1);

  // tab 选择卡
  --van-tab-text-color: var(--k-gray-3);
  --van-tabs-bottom-bar-width: 40px;
  --van-tab-active-text-color: var(--k-gray-1);

  // 侧边导航栏(分类选择)
  --van-sidebar-selected-border-width: 2px;
  --van-sidebar-selected-border-height: 18px;
  --van-sidebar-text-color: var(--k-gray-1);
  --van-sidebar-selected-text-color: var(--k-primary);

  // 宫格
  --van-grid-item-text-color: var(--k-gray-1);
  --van-grid-item-text-font-size: 14px;

  // 步骤条
  --van-step-horizontal-title-font-size: 14px;
  --van-step-finish-text-color: var(--k-gray-1);
  --van-step-text-color: #999;

  // 按钮
  --van-button-normal-font-size: 18px;

  // 通知栏
  --van-notice-bar-background: #ffe3d2;
  --van-notice-bar-text-color: var(--k-font-primary);

  // 开关
  --van-switch-size: 22px;
  --van-switch-width: calc(2em + 4px);
  --van-switch-height: calc(1em + 4px);
  // --van-switch-background: #fff;

  // 折叠面板
  --van-collapse-item-content-text-color: #999;

  // 头部高度
  --van-nav-bar-height: 44px;
  --van-nav-bar-arrow-size: 22px;
}