halo-theme-dream/src/css/theme.less

梦之城，童话梦境，动漫类型博客主题。

@charset "utf-8";
/* CSS Document */
// 全局CSS变量
html {
  --theme: #50bfff;
  --main: #606266;
  --title: #444;
  --background: rgba(255, 255, 255, 0.94);
  --background-hover: #fff;
  --style-a: #fff;
  --light-a: #ffffff;
  --light-b: #ebeef5;
  --light-c: #dcdcdc;
  --light-d: #c0c4cc;
  --dark-a: #4a4a4a;
  --dark-b: #909399;
  --dark-c: #333;
  --dark-d: #9a9a9a;
  --dark-e: #7a7a7a;
  --color-a: #409eff;
  --bg-a: rgb(242 246 252 / 80%);
  --bg-b: #f2f6fc;
  --bg-c: #f5f5f5;
  --bg-d: rgba(255, 255, 255, 0.8);
  --bg-e: var(--theme);
  --bg-f: #f7f7f7;
  --bg-g: #e8f3ff;
  --bg-h: rgb(237 244 253 / 75%);
  --bg-i: #50bfff;
  --bg-j: rgb(243 244 245 / 25%);
  --bg-k: rgb(250 250 250 / 80%);
  --bg-l: rgb(243 243 243 / 80%);

  --radius-wrap: 8px;
  --radius-inner: 4px;
  --radius-img: 5px;
  --box-shadow: 0 0px 10px -5px #949494;

  &.night {
    --theme: #5d93db;
    --main: #999;
    --title: #c4c4c4;
    --background: rgba(40, 44, 52, .6);
    --background-hover: rgba(40, 44, 52, 0.8);
    --style-a: #080c28;
    --light-a: #232323;
    --light-b: #414243;
    --light-c: #303030;
    --light-d: #666;
    --dark-a: #888;
    --dark-b: #777;
    --dark-c: silver;
    --dark-d: #aaa;
    --dark-e: #c0c0c0;
    --color-a: #cbba7d;
    --bg-a: rgb(65 66 67 / 80%);
    --bg-b: #303030;
    --bg-c: #373d48;
    --bg-d: rgba(40, 44, 52, .8);
    --bg-e: #434a56;
    --bg-f: #080c28;
    --bg-g: rgba(210, 210, 210, 0.2);
    --bg-h: rgb(65 68 74 / 60%);;
    --bg-i: #276b92;
    --bg-j: rgb(36 36 36 / 15%);
    --bg-k: rgb(30 33 41 / 80%);
    --bg-l: rgb(63 65 75 / 80%);
    --box-shadow: 1px 1px 3px 1px #1b1b1b;

    body::before {
      filter: brightness(.3);
    }

    .logo-img {
      display: none;

      &-dark {
        display: inline-block;
      }
    }

    .waifu, iframe, img, video, svg, .thumbnail-image, .cover-image, .small-image, .aplayer-pic, .brightness {
      filter: brightness(.8);
    }

    .canvas_effects {
      &.night {
        display: block;
      }

      &.day {
        display: none;
      }
    }

    .main-content {

      figure {
        color: var(--main);
        background: var(--bg-k);

        pre code {
          color: var(--color-a);
          background: 0 0;
        }
      }
    }
  }
}