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

A Hakurei Reimu style Hexo theme

// https://github.com/chriskempson/tomorrow-theme
$code-block {
  background: var(--highlight-background);
  padding: 0 article-padding 16px;
  border-radius: post-radius;
  color: var(--highlight-foreground);
  line-height: font-size * line-height;
}

$line-numbers {
  color: #666;
  font-size: 14px;
  line-height: font-size * line-height;
  -webkit-user-select: none;
  user-select: none;
}

.article-entry {
  // remove mermaid
  .mermaid {
    background: transparent;
  }

  figure {
    display: block;
    margin: 16px 0;
    transition: 0.3s;
    box-shadow: var(--shadow-card);

    &:hover {
      box-shadow: var(--shadow-card-hover);
    }

    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: transparent;
    }

    ::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: var(--highlight-scrollbar);
    }
  }

  pre, code, kbd {
    font-family: font-code;
    font-size: 93.75%;
    transition: 0.3s;
    word-break: break-word;
  }

  code, kbd {
    background: var(--color-code-background);
    padding: 1px 4px;
    border-radius: 6px;
    color: var(--color-link);
  }

  pre {
    @extend $code-block;
    border-radius: 0;

    code {
      background: none;
      text-shadow: none;
      color: var(--highlight-foreground);
      padding: 0;
    }
  }

  .highlight {
    overflow: hidden;
    interpolate-size: allow-keywords;
    @extend $code-block;

    &.code-closed {
      pre {
        height: 0;
        opacity: 0;
        overflow: hidden;
      }
    }

    pre {
      border: none;
      margin: 0;
      padding: 0;
      border-radius: 0;
    }

    table {
      margin: 0;
      table-layout: fixed;
    }

    td {
      border: none;
      padding: 0;
    }

    figcaption {
      clearfix();
      font-size: 14px;
      color: var(--highlight-comment);
      line-height: 1;
      margin-bottom: 12px;

      a {
        float: right;
      }
    }

    .gutter {
      width: 36px;
      vertical-align: top;
    }

    .gutter pre {
      @extend $line-numbers;
      text-align: right;
      padding-right: 12px;
    }

    .line {
      height: font-size * line-height;
    }

    .line.marked {
      background: var(--highlight-selection);
    }

    .line .deletion {
      color: var(--highlight-deletion);
      background: var(--highlight-deletion-bg);
    }

    .line .addition {
      color: var(--highlight-addition);
      background: var(--highlight-addition-bg);
    }
  }

  .gist {
    border: 1px solid var(--color-border);
    border-width: 1px 0;
    background: var(--highlight-background);
    padding: 16px article-padding 16px 0;

    .gist-file {
      border: none;
      font-family: font-code;
      margin: 0;

      .gist-data {
        background: none;
        border: none;

        .line-numbers {
          @extend $line-numbers;
          background: none;
          border: none;
          padding: 0 20px 0 0;
        }

        .line-data {
          padding: 0 !important;
        }
      }

      .highlight {
        margin: 0;
        padding: 0;
        border: none;
      }

      .gist-meta {
        background: var(--highlight-background);
        color: var(--highlight-comment);
        font: 0.85em font-basic;
        text-shadow: 0 0;
        padding: 0;
        margin-top: 1em;
        margin-left: article-padding;

        a {
          color: var(--color-link);
          font-weight: normal;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}

pre {
  .comment, .punctuation {
    color: var(--highlight-comment);
  }

  .attr, .attribute, .meta, .selector-attr, .selector-class, .selector-id, .symbol, .section {
    color: var(--highlight-aqua);
  }

  .variable, .literal, .number, .doctag, .bullet, .emphasis, .strong {
    color: var(--highlight-orange);
  }

  .params {
    color: var(--highlight-foreground);
  }

  .function {
    color: var(--highlight-purple);
  }

  .class, .tag, .title, .built_in, .quote, .name, .selector-tag, .selector-pseudo {
    color: var(--highlight-green);
  }

  .keyword, .type, .builtin-name, .meta-keyword, .template-tag, .template-variable {
    color: var(--highlight-red);
  }

  .string, .undefined, .regexp, .link {
    color: var(--highlight-blue);
  }

  .section, .strong {
    font-weight: bold;
  }

  .emphasis {
    font-style: italic;
  }
}

.code-area {
  width: 100%;
  overflow: auto;
  transition: 0.3s;
}

.code-figcaption {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
  flex-shrink: 0;
  background: linear-gradient(to right, transparent 0%, var(--highlight-nav) 20%, var(--highlight-nav) 80%, transparent 100%);
  margin-bottom: 10px;
}

.code-decoration {
  width: 70px;

  &:after {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    background: #ff5f56;
    width: 12px;
    height: 12px;
    box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
  }
}

.code-left-wrap, .code-right-wrap {
  display: flex;
}

.code-copy {
  margin: 5px;
  z-index: 1;
  filter: invert(50%);
  cursor: var(--cursor-pointer) !important;
  color: #fff;
  transition: 0.3s;

  &:hover {
    opacity: 0.7;
  }
}

.code-lang {
  margin: 5px;
  line-height: 0;
  font-weight: bold;
  z-index: 1;
  filter: invert(50%);
  cursor: var(--cursor-pointer) !important;
  user-select: none;
  --webkit-user-select: none;
}

.code-expand {
  margin: 5px;
  filter: invert(50%);
  z-index: 1;
  cursor: var(--cursor-pointer) !important;
  transition: 0.3s;
  transform: rotate(0deg);
  color: #fff;

  &:hover {
    opacity: 0.7;
  }
}

.code-closed .code-expand {
  transform: rotate(-180deg) !important;
  transition: 0.3s;
}

#copy-tooltip {
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s ease;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 12px 16px;
  border-radius: 8px;
}