blog/themes/butterfly/source/css/_highlight/highlight.styl

$highlight_theme = hexo-config('highlight_theme')
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap')

@require 'theme'

:root
  --hl-color: $highlight-foreground
  --hl-bg: $highlight-background
  --hltools-bg: $highlight-tools.bg-color
  --hltools-color: $highlight-tools.color
  --hlnumber-bg: $highlight-gutter.bg-color
  --hlnumber-color: $highlight-gutter.color
  --hlscrollbar-bg: $highlight-scrollbar
  --hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))

[data-theme='dark']
  --hl-color: alpha(#FFFFFF, .7)
  --hl-bg: lighten(#121212, 2)
  --hltools-bg: lighten(#121212, 3)
  --hltools-color: #90a4ae
  --hlnumber-bg: lighten(#121212, 2)
  --hlnumber-color: alpha(#FFFFFF, .4)
  --hlscrollbar-bg: lighten(#121212, 5)
  --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))

if $highlight_enable
  @require 'highlight/index'

if $prismjs_enable
  @require 'prismjs/index'

$code-block
  overflow: auto
  margin: 0 0 20px
  padding: 0
  background: var(--hl-bg)
  color: var(--hl-color)
  line-height: $line-height-code-block

  if wordWrap
    counter-reset: line
    white-space: pre-wrap

#article-container
  pre,
  code
    font-size: $code-font-size
    font-family: $code-font-family !important

  code
    padding: 2px 4px
    background: $code-background
    color: $code-foreground

  pre
    @extend $code-block
    padding: 10px 20px

    code
      padding: 0
      background: none
      color: var(--hl-color)
      text-shadow: none

  figure.highlight
    @extend $code-block
    position: relative

    pre
      margin: 0
      padding: 8px 0
      border: none

    figcaption,
    .caption
      padding: 6px 0 2px 14px
      font-size: $code-font-size
      line-height: 1em

      a
        float: right
        padding-right: 10px
        color: var(--hl-color)

        &:hover
          border-bottom-color: var(--hl-color)

    &.copy-true
      user-select: all
      -webkit-user-select: all

      & > table,
      & > pre
        display: block !important
        opacity: 0

  .highlight-tools
    position: relative
    display: flex
    align-items: center
    overflow: hidden
    min-height: 24px
    height: 2.15em
    background: var(--hltools-bg)
    color: var(--hltools-color)
    font-size: $code-font-size

    &.closed
      & ~ *
        display: none

      .expand
        transition: all .3s
        transform: rotate(-90deg) !important

    .expand
      position: absolute
      padding: .57em .7em
      cursor: pointer
      transition: transform .3s

      & + .code-lang
        left: 1.7em

    .code-lang
      position: absolute
      left: 14px
      text-transform: uppercase
      font-weight: bold
      font-size: 1.15em
      user-select: none
      -webkit-user-select: none

    .copy-notice
      position: absolute
      right: 2.4em
      opacity: 0
      transition: opacity .4s

    .copy-button
      position: absolute
      right: 14px
      cursor: pointer
      transition: color .2s

      &:hover
        color: $theme-color

  .gutter
    user-select: none
    -webkit-user-select: none

  .gist table
    width: auto

    td
      border: none

  if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
    figure.highlight
      margin: 0 0 24px
      border-radius: 7px
      box-shadow: 0 5px 10px 0 $highlight-mac-border
      -webkit-transform: translateZ(0)

      .highlight-tools
        &:after
          position: absolute
          left: 14px
          width: 12px
          height: 12px
          border-radius: 50%
          background: #fc625d
          box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
          content: ' '

        .expand
          right: 0

          &.closed
            transition: all .3s
            transform: rotate(90deg) !important

          & ~ .copy-notice
            right: 3.45em

          & ~ .copy-button
            right: 2.1em

        .code-lang
          left: 75px

  if hexo-config('highlight_height_limit')
    .code-expand-btn
      position: absolute
      bottom: 0
      z-index: 10
      width: 100%
      background: var(--hlexpand-bg)
      text-align: center
      font-size: $code-font-size
      cursor: pointer

      i
        padding: 6px 0
        color: var(--hlnumber-color)
        animation: code-expand-key 1.2s infinite

      &.expand-done
        & > i
          transform: rotate(180deg)

        & + table,
        & + pre
          margin-bottom: 1.8em

      &:not(.expand-done)
        & ~ table,
        & ~ pre
          overflow: hidden
          height: unit(hexo-config('highlight_height_limit'), px)

@keyframes code-expand-key
  0%
    opacity: .6

  50%
    opacity: .1

  100%
    opacity: .6