biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 20:30:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增設置代碼行數限制，顯示展開按鈕

Browse Source 
improvement: prismjs 可以配置 code_word_wrap
improvement: 搜索 hover 效果與其它目錄一致
improvement: css 優化
fix: 修復prismjs 無法識別的語言 顯示 null 而不是顯示 code 的 bug
fix: 修復默認代碼大小不會隨着字體放大/放小而改變的bug
fix: 修復prismjs 在ios safari 下自動換行的bug
This commit is contained in:
Jerry
2021-03-14 23:25:58 +08:00
Unverified
parent 2f3094cc0a
commit 7bc46c47ed
14 changed files with 225 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
source/css/_highlight/highlight.styl
View File

@@ -1,4 +1,3 @@
// https://github.com/equinusocio/vsc-material-theme
$highlight_theme = hexo-config('highlight_theme')
$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable')
@@ -6,6 +5,16 @@ wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_w
@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 $highlighEnable
@require 'highlight/index'
@@ -16,8 +25,8 @@ $code-block
overflow: auto
margin: 0 0 1rem
padding: 0
background: $highlight-background
color: $highlight-foreground
background: var(--hl-bg)
color: var(--hl-color)
line-height: $line-height-code-block
if wordWrap
@@ -56,9 +65,6 @@ blockquote
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
@@ -67,7 +73,7 @@ blockquote
code
padding: 0
background: none
color: $highlight-foreground
color: var(--hl-color)
text-shadow: none
figure.highlight
@@ -88,10 +94,10 @@ blockquote
a
float: right
padding-right: 10px
color: $highlight-foreground
color: var(--hl-color)
&:hover
border-bottom-color: $highlight-foreground
border-bottom-color: var(--hl-color)
.highlight-tools
position: relative
@@ -100,8 +106,8 @@ blockquote
overflow: hidden
min-height: 1.2rem
height: 2.15em
background: $highlight-tools.bg-color
color: $highlight-tools.color
background: var(--hltools-bg)
color: var(--hltools-color)
font-size: $code-font-size
&.closed + table
@@ -185,3 +191,38 @@ blockquote
.code-lang
left: 3.8rem !important
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: .3rem 0
color: var(--hlnumber-color)
animation: code-expand-key 1.2s infinite
&.expand-done
display: none !important
&: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

2
source/css/_highlight/highlight/diff.styl
View File

@@ -1,7 +1,7 @@
figure.highlight
table
&::-webkit-scrollbar-thumb
background: $highlight-scrollbar
background: var(--hlscrollbar-bg)
pre .deletion
color: $highlight-deletion

6
source/css/_highlight/highlight/index.styl
View File

@@ -9,7 +9,7 @@ if $highlight_theme != false
display: inline-block
padding: 0 .3rem 0 0
min-width: 1.6rem
color: $highlight-gutter.color
color: var(--hlnumber-color)
content: counter(line)
counter-increment: line
text-align: left
@@ -29,8 +29,8 @@ if $highlight_theme != false
.gutter pre
padding-right: .5rem
padding-left: .5rem
background-color: $highlight-gutter.bg-color
color: $highlight-gutter.color
background-color: var(--hlnumber-bg)
color: var(--hlnumber-color)
text-align: right
.code pre

2
source/css/_highlight/prismjs/index.styl
View File

@@ -7,7 +7,7 @@ if $highlight_theme != false
#article-container
pre[class*='language-']
&::-webkit-scrollbar-thumb
background: $highlight-scrollbar
background: var(--hlscrollbar-bg)
&:not(.line-numbers)
padding: 10px 20px

11
source/css/_highlight/prismjs/line-number.styl
View File

@@ -8,9 +8,16 @@
> code
position: relative
white-space: inherit
line-height: $line-height-code-block
if hexo-config('code_word_wrap')
white-space: pre-wrap
else
white-space: inherit
word-wrap: normal
word-break: normal
overflow-wrap: normal
.line-numbers-rows
position: absolute
top: 0
@@ -29,6 +36,6 @@
&:before
display: block
padding-right: .8em
color: $highlight-gutter.color
color: var(--hlnumber-color)
content: counter(linenumber)
text-align: right

32
source/css/_layout/head.styl
View File

@@ -303,22 +303,6 @@ _:future,
padding: 4px
transition: transform .3s
& > a
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
&:after
width: 100%
.menus_item_child
position: absolute
right: 0
@@ -377,3 +361,19 @@ _:future,
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
font-size: .78em
cursor: pointer
&:not(.child)
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
&:after
width: 100%

52
source/css/_mode/darkmode.styl
View File

@@ -27,6 +27,14 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--toc-link-color: alpha(#FFFFFF, .6)
--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))
#web_bg:before,
#footer:before,
@@ -42,7 +50,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
background: #2c2c2c
pre > code
background: 0
background: lighten(#121212, 2)
figure.highlight
box-shadow: none
.note
code
@@ -63,33 +74,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
// 代碼框
#article-container
pre,
.highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2) !important
color: alpha(#FFFFFF, .7) !important
figure.highlight
box-shadow: none
if hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
table::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
.line:before
color: alpha(#FFFFFF, .7) !important
.hljs
background-color: lighten(#121212, 2) !important
pre[class*='language-']::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
.highlight-tools
background: lighten(#121212, 3) !important
color: #90a4ae !important
#post-comment
#comment-switch
if hexo-config('comments.text')
@@ -118,16 +102,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
#aside-content .aside-list > .aside-list-item:not(:last-child)
border-bottom: 1px dashed alpha(#FFFFFF, .1)
// 第三方
// 插件 hexo-blog-encrypt
#hexo-blog-encrypt
label,
input
color: alpha(#FFFFFF, .7) !important
input
background-color: #121212
// Gitalk
#gitalk-container
filter: brightness(.8)
@@ -135,7 +109,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
svg
fill: alpha(#FFFFFF, .9) !important
// Disqus and Disqusjs
// Disqusjs 反代模式下的適配
#disqus_thread
#dsqjs
.dsqjs-tab-active,

2
source/css/var.styl
View File

@@ -28,7 +28,7 @@ $title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon')
$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
// Global Variables
$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : $font-size
$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
$font-color = #1F2D3D
$rem = 20px
$text-line-height = 2