Files
hexo-theme-butterfly/source/css/_mode/readmode.styl
Jerry 2cd1aa5bc9 fix: 修復夜間模式下,閲讀模式代碼塊背景顔色的顯示bug
fix: 修復在 chrome上,進入頁面時,頁面元素會出現模糊到清晰的bug close #479
fix: 修復 文章頁面上滑子菜單圖標文字無法顯示的 bug close #481
improvement: meta description 限制在150字以內 close #480
improvement: pug優化和結構調整
2021-01-29 23:38:13 +08:00

198 lines
4.2 KiB
Stylus

if hexo-config('readmode')
.read-mode
--font-color: #4c4948
--readmode-light-color: #fff
--white: #4c4948
--light-grey: #4c4948
--gray: #d6dbdf
--hr-border: #d6dbdf
--hr-before-color: darken(#d6dbdf, 10)
--highlight-bg: #f7f7f7
--exit-btn-bg: #C0C0C0
--exit-btn-color: #fff
--exit-btn-hover: darken(#C0C0C0, 20)
[data-theme='dark']
.read-mode
--font-color: rgba(255, 255, 255, .7)
--readmode-light-color: #0d0d0d
--white: rgba(255, 255, 255, .9)
--light-grey: rgba(255, 255, 255, .7)
--gray: rgba(255, 255, 255, .7)
--hr-border: rgba(255, 255, 255, .5)
--hr-before-color: rgba(255, 255, 255, .7)
--highlight-bg: #171717
--exit-btn-bg: #1f1f1f
--exit-btn-color: rgba(255, 255, 255, .9)
--exit-btn-hover: lighten(#1f1f1f, 20)
.read-mode
background: var(--readmode-light-color)
.exit-readmode
position: fixed
top: 30px
right: 30px
width: 40px
height: 40px
border-radius: 8px
background: var(--exit-btn-bg)
color: var(--exit-btn-color)
font-size: 16px
transition: background .3s
&:hover
background: var(--exit-btn-hover)
#aside-content
display: none
#page-header.post-bg
background-color: transparent
background-image: none !important
&:before
opacity: 0
& > #post-info
text-align: center
#post
margin: 0 auto
background: transparent
box-shadow: none
&:hover
box-shadow: none
& > canvas
display: none !important
.highlight-tools,
#footer,
#post > *:not(#post-info):not(.post-content),
#nav,
.post-outdate-notice,
#web_bg,
#rightside,
.not-top-img
display: none !important
#article-container
a
color: #99a9bf
pre,
.highlight:not(.js-file-line-container)
background: var(--highlight-bg) !important
*
color: var(--font-color) !important
figure.highlight
border-radius: 0 !important
box-shadow: none !important
& > :not(.highlight-tools)
display: block !important
.line:before
color: var(--font-color) !important
.hljs
background: var(-highlight-bg) !important
h1,
h2,
h3,
h4,
h5,
h6
padding: 0
&:before
content: ''
&:hover
padding: 0
ul,
li,
ol
&:hover:before
transform: none !important
ol,
li
&:before
background: transparent !important
color: var(--font-color) !important
ul
>li
&:before
border: .15rem solid var(--gray) !important
.tabs
border: 2px solid var(--tab-border-color)
> .nav-tabs
background: transparent
> .tab
border-bottom: 0
button
border-top: none !important
background: transparent
&:hover
background: none !important
&.active
button
text-decoration: underline
> .tab-contents .tab-item-content.active
animation: none
code
color: var(--font-color)
blockquote
border-left: .2rem solid var(--gray)
background-color: var(--readmode-light-color)
.hide-toggle
border: 1px solid var(--gray) !important
.hide-button,
.btn-beautify
background: var(--readmode-light-color) !important
color: var(--font-color) !important
.btn-beautify
border: 1px solid var(--gray) !important
.button--animated:before
background: var(--readmode-light-color) !important
.hide-inline,
.hide-block
& >.hide-button
border: 1px solid var(--gray)
& > .button--animated:before
background: var(--readmode-light-color)
.note
border: 2px solid var(--gray)
border-left-color: var(--gray) !important
filter: none
background-color: var(--readmode-light-color) !important
color: var(--font-color)
&:before,
.note-icon
color: var(--font-color)