hexo/node_modules/hexo-theme-butterfly/source/css/_highlight/highlight.styl

217 lines
4.2 KiB
Stylus

$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))
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
& > 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
position: absolute
padding: .57em .7em
cursor: pointer
transition: transform .3s
& + .code-lang
left: 1.7em
&.closed
transition: all .3s
transform: rotate(-90deg) !important
.code-lang
position: absolute
left: 14px
text-transform: uppercase
font-weight: bold
font-size: 1.15em
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
.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