hexo-theme-reimu/source/css/_partial/container.styl

A Hakurei Reimu style Hexo theme

// Colors
:root {
  --color-info-bg: hsl(210, 90%, 96%);
  --color-info-text: hsl(210, 100%, 40%);
  --color-info-shadow: hsl(210, 100%, 98%);
  --color-warning-bg: hsl(40, 100%, 94%);
  --color-warning-text: hsl(34, 94%, 35%);
  --color-warning-shadow: hsl(40, 100%, 98%);
  --color-danger-bg: hsl(0, 100%, 97%);
  --color-danger-text: hsl(356, 72%, 45%);
  --color-danger-shadow: hsl(0, 100%, 98%);
  --color-tip-bg: hsl(138, 76%, 96%);
  --color-tip-text: hsl(152, 95%, 28%);
  --color-tip-shadow: hsl(138, 100%, 98%);
  --color-important-bg: hsl(270, 80%, 96%);
  --color-important-text: hsl(270, 80%, 45%);
  --color-important-shadow: hsl(270, 80%, 98%);
}

[data-theme='dark'] {
  &:root {
    --color-info-bg: hsl(210, 30%, 25%);
    --color-info-text: hsl(210, 80%, 70%);
    --color-info-shadow: hsl(210, 30%, 16%);
    --color-warning-bg: hsl(40, 30%, 25%);
    --color-warning-text: hsl(40, 80%, 70%);
    --color-warning-shadow: hsl(40, 30%, 16%);
    --color-danger-bg: hsl(0, 30%, 25%);
    --color-danger-text: hsl(0, 80%, 70%);
    --color-danger-shadow: hsl(0, 30%, 16%);
    --color-tip-bg: hsl(138, 30%, 25%);
    --color-tip-text: hsl(138, 80%, 70%);
    --color-tip-shadow: hsl(138, 30%, 16%);
    --color-important-bg: hsl(270, 30%, 25%);
    --color-important-text: hsl(270, 80%, 70%);
    --color-important-shadow: hsl(270, 30%, 16%);
  }
}

.custom-block {
  margin: 28px 0;
  border-radius: post-radius;
  transition: 0.3s;
  display: flow-root;
  padding: 0 12px;

  .custom-block-title:before {
    font-weight: normal;
    margin-right: 8px;

    if (hexo-config('icon_font')) {
      font-family: font-icon;
    } else {
      font-family: var(--font-icon);
    }
  }

  &.info {
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border-left: 6px var(--color-info-text) solid;
    box-shadow: 0 0 5px 2px var(--color-info-shadow);

    .custom-block-title:before {
      if (hexo-config('icon_font')) {
        content: '\e647';
      } else {
        content: '\f05a';
      }
    }
  }

  &.warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    box-shadow: 0 0 5px 2px var(--color-warning-shadow);
    border-left: 6px var(--color-warning-text) solid;

    .custom-block-title:before {
      if (hexo-config('icon_font')) {
        content: '\e646';
      } else {
        content: '\f06a';
      }
    }
  }

  &.danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    box-shadow: 0 0 5px 2px var(--color-danger-shadow);
    border-left: 6px var(--color-danger-text) solid;

    .custom-block-title:before {
      if (hexo-config('icon_font')) {
        content: '\e645';
      } else {
        content: '\f057';
        font-weight: 900;
      }
    }
  }

  &.tip {
    background: var(--color-tip-bg);
    color: var(--color-tip-text);
    box-shadow: 0 0 5px 2px var(--color-tip-shadow);
    border-left: 6px var(--color-tip-text) solid;

    .custom-block-title:before {
      if (hexo-config('icon_font')) {
        content: '\e643';
      } else {
        content: '\f058';
        font-weight: 900;
      }
    }
  }

  &.important {
    background: var(--color-important-bg);
    color: var(--color-important-text);
    box-shadow: 0 0 5px 2px var(--color-important-shadow);
    border-left: 6px var(--color-important-text) solid;

    .custom-block-title:before {
      if (hexo-config('icon_font')) {
        content: '\e649';
      } else {
        content: '\f192';
        font-weight: 900;
      }
    }
  }

  p {
    margin: 12px 0;
  }
}

.custom-block-title {
  margin: 12px 0 !important;
  font-size: 18px;
  font-weight: bold;
}