// 全局CSS变量
html {
  --font-default: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, "sans-serif";
  /* --theme: #fb6c28; */
  --background-reverse: #000;
  --background: #fff;
  --background-translucent: rgba(255, 255, 255, 0.7);
  --sub-background: #f5f5f5;
  --sib-background: #fff;
  --glass-background: rgba(255, 255, 255, 0.65);
  --main: #303133;
  --routine: #606266;
  --title: #333;
  --sib: #f2f6fc;
  --minor: #909399;
  --seat: #c0c4cc;
  --classA: #dcdfe6;
  --classB: #e4e7ed;
  --classC: #ebeef5;
  --classD: #f2f6fc;
  --classE: #dcdcdc;
  --classF: #333;
  --classG: #dcdcdc;
  --classH: #e9f2ff;
  --classI: #5a3713;
  --classJ: #f9e5fb;
  --classK: #e4e7ed;
  --classL: #666;
  --classM: #2d2e37;
  --quote: #50bfff;
  --code: #409eff;
  --code-background: #e8f3ff;
  --overdue-border: #ffbb76;
  --overdue-background: #fffcef;
  --radius-wrap: 8px;
  --radius-inner: 4px;
  --radius-img: 5px;
  --box-shadow: 0 0px 10px -5px #949494;
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-code: #bdbdbd;
  --block-shadow: 1px 2px 10px 0 #afafaf;
  --box-shadow-journal: #d8d8d8;
  --box-shadow-friend: #d8d8d8;
  --box-shadow-toc: inset 20px 0 30px 0 #dadada, 1px 2px 10px 0 #a8a8a8;
  --background-toc: rgba(255, 255, 255, 0.95);
  --box-shadow-tags: 2px 2px 3px 0px #c2c0b3;
  --background-tags: #fffaeb;
  --background-tag: #fdfdfd;
  --box-shadow-pager: 0 0 3px 0 #cacaca;
  --notice: #fb6c28;
  --background-notice: #fbf5f1;
  --background-journal: #fff;
  --background-journal-block: #f5f5f5;
  --background-journal-gradient: linear-gradient(0deg,
      #d4d4d4,
      transparent 80%);
  --background-friend: #fff;
  --background-friend-block: #f5f5f5;
  --shadow-notice: inset 0 0 15px #d1dae8;
  --animation-notice: twinkle 1s ease infinite alternate;
  background: var(--background);

  &[data-mode="dark"] {
    /* --theme: #9999ff; */
    --background-reverse: #fff;
    --background: #232323;
    --background-translucent: rgba(35, 35, 35, 0.7);
    --sub-background: #303030;
    --sib-background: #303030;
    --glass-background: rgba(0, 0, 0, 0.65);
    --main: #999;
    --routine: #888;
    --title: #ddd;
    --sib: #3a3a3a;
    --minor: #777;
    --seat: #666;
    --classA: #515253;
    --classB: #454545;
    --classC: #414243;
    --classD: #303030;
    --classE: #585858;
    --classF: #bdbdbd;
    --classG: #303030;
    --classH: #454545;
    --classI: #36312c;
    --classJ: #39243c;
    --classK: #eee;
    --classL: #333;
    --classM: #fff;
    --quote: #276b92;
    --code: #efa141;
    --code-background: #353246;
    --overdue-border: #6f553b;
    --overdue-background: #2b2715;
    --box-shadow: 1px 1px 3px 1px #1b1b1b;
    --text-shadow: none;
    --shadow-code: #191919;
    --block-shadow: 2px 4px 10px 0 #0a0a0a;
    --box-shadow-journal: rgba(0, 0, 0, 0.2);
    --box-shadow-friend: rgba(0, 0, 0, 0.2);
    --box-shadow-toc: inset 0 0 30px 0 rgba(253, 253, 253, 0.34),
      1px 2px 10px 0 #181818;
    --background-toc: rgba(35, 35, 35, 0.98);
    --box-shadow-tags: 2px 2px 3px 0px #111;
    --background-tags: #35353e;
    --background-tag: #2f2f2f;
    --box-shadow-pager: 0 0 3px 0 #1b1b1b;
    --notice: #9999ff;
    --background-notice: #303030;
    --background-journal: #383838;
    --background-journal-block: #232323;
    --background-journal-gradient: linear-gradient(0deg,
        #151515,
        transparent 80%);
    --background-friend: #383838;
    --background-friend-block: #232323;
    --shadow-notice: inset 0 0 15px #4a4c4e;
    --animation-notice: twinkle-night 1s ease infinite alternate;
    background: var(--background);

    // 暗黑模式下需要修改的样式
    body:after {
      background: #2b2b2b;
      z-index: -200;
    }

    img {
      filter: brightness(0.9);
    }

    .motto_day_words {
      filter: invert(1);
    }

    .joe_header {
      .joe_header__above-logo {
        svg {
          display: block;
        }
      }
    }

    .joe_detail__article {
      .joe_detail__article-anote {
        color: rgba(255, 255, 255, 0.61);
      }

      img {
        filter: brightness(0.9);
      }

      .joe_detail__article-abtn {
        color: rgba(255, 255, 255, 0.61);
      }

      .joe_detail__overdue-wrapper {
        background: var(--classD);
      }
    }

    .joe_detail__article-video .episodes .box .item:not(.active) {
      background: var(--classC);
    }

    .aplayer {
      background: var(--classD);

      .aplayer-list li {
        color: var(--main);
        border-color: var(--classC);

        &.aplayer-list-light,
        &:hover {
          background: #232324 !important;
        }
      }

      .aplayer-info {
        border-color: var(--classC);
      }

      .aplayer-music {
        color: var(--classF);
        border-color: var(--classC);
      }

      .aplayer-time {
        .aplayer-icon:hover path {
          fill: var(--classF) !important;
        }
      }

      .aplayer-lrc {
        &:before {
          height: 5px;
          background: -webkit-linear-gradient(180deg,
              rgba(0, 0, 0, 0.3) 0,
              rgba(0, 0, 0, 0));
          background: linear-gradient(180deg,
              rgba(0, 0, 0, 0.3) 0,
              rgba(0, 0, 0, 0));
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cc000000", endColorstr="#00000000", GradientType=0);
        }

        &:after {
          background: -webkit-linear-gradient(180deg,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, 0.3));
          background: linear-gradient(180deg,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, 0.3));
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#cc000000", GradientType=0);
        }
      }
    }

    .joe_detail__friends {
      filter: brightness(0.8);
    }

    .toc-nodata {
      em {
        opacity: 0.4;
      }
    }

    .site_driven {
      img {

        &.baidu,
        &.huawei,
        &.jinshan {
          filter: invert(1);
        }
      }
    }
  }
}