hexo-theme-butterfly/source/css/_global/index.styl
Jerry 83dc0559c0 1. Feature: 可設置内联代码块样式 #26
2. Feature: 可設置夜間模式作爲默認樣式
3. Feature: 可設置是否顯示code language名稱
4. Feature: 可設置是否展開或關閉代碼框
5. Feature: 可設置背景圖片/顔色
6. Feature: 可設置是否顯示footer背景
7. Feature: 增加 canvas-nest.js
8. Feature: 頭像可設置效果(轉圈圈)
9. Feature: menu可設置分組
9. Fix: 優化打賞和搜索打開特效
10. Fix: 優化sidebar的打開特效,避免與文章頁特效不同步
11. Fix: 適配**hexo-blog-encrypt**,現在可以顯示toc
12. Fix: 修復設置不顯示評論時,直達評論按鈕沒有消失的bug
13. Fix: 修復post頁底欄,當沒有顯示評論,不顯示TOC,評論和toc都不顯示 這三種狀態下按鈕的bug
14. Fix: 修復代碼框左右滑動時,代碼名字跟著滑動的bug
15. Fix: 其他page頁標題的字體顯示
16. Fix: 修復當設置開啓canvas_ribbons,進入網站會先顯示canvas_ribbons的bug
17. Fix: 完善夜間模式下,字體顯示問題
18. Fix: 修復代碼框 複製 和 代碼名 z-index bug #25
19. Fix: 完善阅读模式
2019-09-08 16:17:07 +08:00

384 lines
6.1 KiB
Stylus

html
height: 100%
font-size: $rem
body
position: relative
display: flex
flex-direction: column
min-height: 100%
background: #fff
color: $font-black
font-size: $font-size
font-family: $font-family
line-height: $text-line-height
*::-webkit-scrollbar
width: 8px
height: 8px
*::-webkit-scrollbar-thumb
background: $light-blue
*::-webkit-scrollbar-track
background-color: transparent
#web_bg
background: $web-bg
height: 100%
width: 100%
background-size: cover
position: fixed
z-index: -999
background-attachment: local
background-repeat: no-repeat
background-position: center
h1,
h2,
h3,
h4,
h5,
h6
position: relative
margin: 0.2rem 0
color: lighten($font-color, 15%)
font-weight: bold
code
font-size: inherit !important
#content-outer
flex: 1 auto
*
box-sizing: border-box
#content-inner
.img-alt
text-decoration: none
color: $a-link-color
#toggle-sidebar
position: fixed
bottom: $sidebar-icon-top
left: $sidebar-icon-left
z-index: 100
font-size: $sidebar-icon-size
cursor: pointer
transition: all 0.2s
opacity: 0
#go-up
position: fixed
right: $go-up-right
bottom: $go-up-bottom
font-size: $sidebar-icon-size
opacity: 0
cursor: pointer
transition: all .2s
.fancybox-caption
text-align: center
hr
position: relative
margin: 2rem auto
width: calc(100% - 4px)
border: 2px dashed $pale-blue
background: $white
&:hover
&:before
left: calc(95% - 20px)
&:before
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: $light-blue
content: $hr-icon
font: normal normal normal 14px / 1 FontAwesome
font-size: 20px
transition: all 1s ease-in-out
// collapse/expand beautify
details
padding: 0.3rem
border: 2px solid darken($light-grey, 10%)
summary
color: $theme-color
// set <caption> of <figure> to center-align
// use class="not-code" to avoid conflicts because code also use <figure> tag
.not-code
margin: 0.5em
padding: 0.5em
border: thin silver solid
text-align: center
table
overflow: auto
width: 100%
border-spacing: 0
border-collapse: collapse
thead
background: alpha($a-link-color, 10%)
th,
td
padding: 0.3rem 0.6rem
border: 1px solid darken($light-grey, 10%)
vertical-align: top
*::selection
background: $selection
color: $pale-grey
.text-center
text-align: center
.pull-left
float: left
.pull-right
float: right
@media screen and (max-width: $bg)
i#toggle-sidebar,
#sidebar
display: none
body
padding-left: 0 !important
// valine
#vcomment
font-size: inherit
input
font-size: 0.65rem
button
font-size: .7rem
padding: .3rem 1rem
background-color: $light-blue
color: #fff
border-color: #fff
&:hover
background-color: darken($light-blue, 40)
textarea
font-size: 0.7rem
background: url(/img/comment_bg.png) 100% 100% no-repeat
.info
display: none
.vimg
border: 0
&:hover
-moz-transform: rotate(540deg)
-o-transform: rotate(540deg)
-webkit-transform: rotate(540deg)
transform: rotate(540deg)
.vcount
font-size: 0.775rem
.vnum
font-size: 1.1rem
.vsys
font-size: 80%
.vtime
font-size: .65rem
.vcontent
font-size: 100%
.vat
font-size: .7125rem
color: $cyan
border: 1px solid $cyan
padding: 0 .8rem
border-radius: 5px
&:hover
background-color: alpha($cyan,0.5)
code, pre
font-size: 98%
font-family: $code-font
.full_page #site-title,
.full_page #site-sub-title,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
font-family: $site-name-font
#rightside
right: -38px
position: fixed
bottom: 60px
opacity: 0
transition: all .2s
#readmode,#font_plus,#font_minus,#to_comment
width: 30px
height: 30px
background-color: $light-blue
color: #e3e8ee
text-align: center
line-height: 29px
font-size: 16px
display: block
margin-bottom: 2px
cursor: pointer
text-decoration: none
#to_comment
display: none
#font_minus,#font_plus
display: none
.translate_chn_to_cht
width: 30px
height: 30px
background-color: $light-blue
color: #e3e8ee
text-align: center
line-height: 29px
font-size: 16px
display: block
margin-bottom: 2px
cursor: pointer
text-decoration: none
.nightshift
width: 30px
height: 30px
background-color: $light-blue
color: #e3e8ee
text-align: center
font-size: 17px
display: block
margin-bottom: 2px
cursor: pointer
padding-top: 6px
a
&:hover
color: white
&:after
color: white
.comment_headling
font-size: 20px
font-weight: 700
margin-bottom: 10px
// bookmark
.fc-container .fancybox-bg
background: #eee
.fancybox-is-open.fc-container .fancybox-bg
opacity: 0.95
.fc-content
margin: 20px
max-width: 550px
padding: 50px
box-shadow: 10px 10px 60px -25px
border-radius: 4px
.fc-content h3
margin-top: 0
font-size: 1.6em
letter-spacing: normal
.fc-content p
color: #666
line-height: 1.5
.fc-content p:last-child
margin-bottom: 0
/* Custom animation */
.fancybox-fx-material.fancybox-slide--previous,
.fancybox-fx-material.fancybox-slide--next
transform: translateY(-60px) scale(1.1)
opacity: 0
.fancybox-fx-material.fancybox-slide--current
opacity: 1
transform: translateY(0) scale(1)
.bookmark-ok
background: #FF6666
border-width: 0
color: #fff
text-decoration: none
padding: 7px 20px
line-height: 1.5
border-radius: 20px
text-transform: uppercase
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif
font-size: 80%
font-weight: 700
margin: 5px 5px 5px 0
display: inline-block
cursor: pointer
outline: none
transition: all .2s ease-in-out
user-select: none
.tright
text-align: right
.is_visible
display: block !important
.is_invisible
display: none !important
.is_hidden
overflow: hidden
.fireworks
position: fixed
z-index: -1
pointer-events: none
//
img[src=""],img:not([src])
opacity: 0