Files
hexo-theme-butterfly/source/css/_highlight/highlight.styl
Jerry 4aacafdae1 feat: 適配hexo 5.1.0 prismjs caption
feat: code-font-size 也會影響行內代碼塊字體大小 #325
fix: 修復aside recent post的 time 在safari沒有顯示的bug
fix: 修復 prismjs 在 tags-toggle 外掛標簽裏,代碼塊顯示一行的bugs
style: 刪除不必要的css
2020-08-22 23:17:28 +08:00

186 lines
3.7 KiB
Stylus

// https://github.com/equinusocio/vsc-material-theme
$highlight_theme = hexo-config('highlight_theme')
$highlighEnable = hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
$prismjsEnable = hexo-config('rootConfig.prismjs') && hexo-config('rootConfig.prismjs.enable')
wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
@require 'theme'
if $highlighEnable
@require 'highlight/index'
if $prismjsEnable
@require 'prismjs/index'
$code-block
overflow: auto
margin: 0 0 1rem
padding: 0
background: $highlight-background
color: $highlight-foreground
line-height: $line-height-code-block
if wordWrap
counter-reset: line
white-space: pre-wrap
blockquote
margin: 0 0 1rem
padding: .1rem .8rem
border-left: .2rem solid $blockquote-padding-color
background-color: var(--blockquote-bg)
color: var(--blockquote-color)
a
word-break: break-all
p
margin: 0 !important
padding: .5rem 0
footer
padding: 0 0 .5rem
cite
&:before
padding: 0 .3em
content: ''
#article-container
pre,
code
font-size: $code-font-size
font-family: $code-font-family !important
code
padding: .1rem .2rem
background: $code-background
color: $code-foreground
word-wrap: break-word
word-break: break-word
overflow-wrap: break-word
pre
@extend $code-block
padding: 10px 20px
code
padding: 0
background: none
color: $highlight-foreground
text-shadow: none
figure.highlight
@extend $code-block
position: relative
pre
margin: 0
padding: 8px 0
border: none
figcaption,
.caption
padding: .3rem 0 .1rem .7rem
font-size: $code-font-size
line-height: 1em
a
float: right
padding-right: 10px
color: $highlight-foreground
&:hover
border-bottom-color: $highlight-foreground
.highlight-tools
position: relative
display: flex
align-items: center
overflow: hidden
min-height: 1.2rem
height: 2.15em
background: $highlight-tools.bg-color
color: $highlight-tools.color
font-size: $code-font-size
&.closed + table
display: none
.expand
position: absolute
padding: .4rem .7rem
cursor: pointer
transition: transform .3s
& + .code-lang
left: 1.7rem
&.closed
transition: all .3s
transform: rotate(-90deg) !important
.code-lang
position: absolute
left: .7rem
text-transform: capitalize
font-weight: bold
font-size: 1.15em
.copy-notice
position: absolute
right: 1.7rem
opacity: 0
.copy-button
position: absolute
right: .7rem
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 1.2rem
border-radius: 7px
box-shadow: 0 5px 10px 0 $highlight-mac-border
-webkit-transform: translateZ(0)
.highlight-tools
&:after
position: absolute
left: .7rem
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: 2.8rem
& ~ .copy-button
right: 1.8rem
.code-lang
left: 3.8rem !important