@import "variables";
html body {
  padding: 0;
  margin: 0;
  background: url("/public/images/background.jpg") repeat;
  background-color: var(--page-background);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  min-width: var(--body-min-width);
  .content-wrap {
    max-width: var(--page-width);
    margin: 0 auto;
    box-sizing: border-box;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  a {
    text-decoration: none;
    &:link {
      color: var(--font-color);
    }
  }
  // 加载动画
  #nprogress {
    --loading-color: red;
    // 改变进度条的颜色
    .bar {
      background: var(--loading-color) !important;
    }
    // 改变进度条的阴影颜色
    .peg {
      box-shadow: 0 0 10px var(--loading-color), 0 0 5px var(--loading-color) !important; /* 这里设置阴影颜色 */
    }
    // 改变进度条的旋转动画颜色
    .spinner-icon {
      border-top-color: var(--loading-color) !important;
      border-left-color: var(--loading-color) !important;
    }
  }
}

// 菜单
.el-menu {
  --el-menu-bg-color: var(--primary-color-dark);
  --el-menu-text-color: var(--color-white);
  --el-menu-hover-bg-color: var(--primary-color-dark);
  --el-bg-color-overlay: var(--primary-color-dark);
  --el-menu-item-font-size: var(--font-size-large);
  --el-border-color-light: var(--primary-color-dark);
}

// 页面标题
.page-title {
  --font-size-title: 25px;
  color: var(--primary-color-dark);
  font-size: var(--font-size-title);
  margin: 0;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  font-weight: bold;
}

// 首页内容宽度
@media (max-width: $--mobile-max-width) {
  html body {
    --page-width: 100%;
    --body-min-width: 100%;
  }
}

// 移动端
@media (max-width: $--mobile-max-width)  {
  html body {
    // 边距
    --gap: 15px;
    --gap-mini: 8px;
    --gap-midele: 20px;
    --gap-large: 25px;
    --gap-huge: 30px;
  }
}