mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-17 04:40:53 +08:00
V2.0.0
Breaking change 1. 手機端界面卡片化，同時，手機端也可以顯示側邊欄的內容 2. 修復當menu過多時，header界面出現錯亂的bug。當menu過多時，會變為sidebar模式 3. 增加medium-zoom大圖查看模式 4. 增加鼠標點擊特效：文字和愛心 兩個點擊特效 5. 主頁subtitle可以調用第三方api(金山詞霸每日一句、一言網的一句話、一句網、今日詩詞) 6. 添加 snackbar 彈窗 7. 修改nightshift為darkmode，darkmode可隨系統設置而自動切換，可設置隨時間而切換darkmode 8. 修復hexo自帶的標籤外掛(Tag Plugins)顯示bug(Block Quote、Code Block With caption、Gist、Youtube、Vimeo) 9. 主題所需要的css和js可根據需要配置CDN 10. 更改darkmode的加載方式，網站設置dark mode後，現在進入網頁不會在'閃'一下 11. 背景特效和背景圖片在手機界面也會顯示 12. 增加justified-gallery圖片顯示(Tag Plugins) Feature 1. 文章頁面，字數統計、閲讀時長和閲讀量前面添加icon 2. 更改懶加載js 3. 升級typed.js/instantpage.js到最新版 4. 搜索和右下角按鈕添加退出特效 Fixed 1. 修復在 Hexo 4.0.0下，一些按鈕點擊會跳出一個空白頁的bug 2. 修復在 Hexo 4.0.0下，分頁按鈕出現代碼的bug 3. 修復當沒有設置評論時，右下角依舊出現'直達評論'按鈕的bug 4. 優化sidebar的打開速度 5. 修復文章頁標題左右邊距不平等的bug 6. 修復keywords讀取的bug 7. 修復當post/page 內容為空時，footer位置錯亂的bug 8. 修復在手機safari，toc sidebar底部內容被遮擋的bug 9. 完善Dark mode,一些界面的配色 10. 修復 card-archives 查看更多 跳轉bug Remove 1. 移除Gitment 2. 移除Gallery
This commit is contained in:
Jerry
@@ -19,6 +19,13 @@ body
|
||||
-webkit-user-select: none
|
||||
-ms-user-select: none
|
||||
|
||||
#body-wrap
|
||||
position relative
|
||||
flex: 1 auto
|
||||
display: flex
|
||||
flex-direction: column
|
||||
transition: all .3s
|
||||
|
||||
*::-webkit-scrollbar
|
||||
width: 8px
|
||||
height: 8px
|
||||
@@ -160,10 +167,10 @@ table
|
||||
.is_hidden
|
||||
overflow: hidden
|
||||
|
||||
.pull-left
|
||||
.pull_left
|
||||
float: left
|
||||
|
||||
.pull-right
|
||||
.pull_right
|
||||
float: right
|
||||
|
||||
.fireworks
|
||||
@@ -171,12 +178,9 @@ table
|
||||
z-index: -1
|
||||
pointer-events: none
|
||||
|
||||
// 去掉加載黑框
|
||||
img[src=""],img:not([src])
|
||||
opacity: 0
|
||||
|
||||
#body-wrap
|
||||
transition: all .3s
|
||||
.fireworks
|
||||
z-index: 99999
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
i#toggle-sidebar,
|
||||
@@ -184,4 +188,185 @@ img[src=""],img:not([src])
|
||||
display: none
|
||||
|
||||
body
|
||||
padding-left: 0 !important
|
||||
padding-left: 0 !important
|
||||
|
||||
|
||||
// 懶加載
|
||||
.lazyload,
|
||||
.lazyloading
|
||||
opacity: 0
|
||||
|
||||
.lazyloaded
|
||||
opacity: 1
|
||||
transition: opacity 0.3s
|
||||
|
||||
img[src=""],img:not([src])
|
||||
opacity: 0
|
||||
|
||||
.justified-gallery
|
||||
img
|
||||
opacity 0
|
||||
.fancybox
|
||||
width: auto
|
||||
text-align: inherit
|
||||
.img-alt
|
||||
display: none
|
||||
|
||||
.medium-zoom-image--opened
|
||||
margin: 0 !important
|
||||
z-index: 99999 !important
|
||||
|
||||
.medium-zoom-overlay
|
||||
z-index: 99999 !important
|
||||
|
||||
// hexo tag video
|
||||
.video-container
|
||||
position: relative
|
||||
padding-top: 56.25%
|
||||
height: 0
|
||||
overflow: hidden
|
||||
margin-bottom: 0.8rem
|
||||
|
||||
iframe
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin-top: 0
|
||||
|
||||
|
||||
.layout_page,
|
||||
.layout_post,
|
||||
#footer
|
||||
animation: main 1s
|
||||
|
||||
#nav,
|
||||
#top-container
|
||||
animation: header 1s
|
||||
|
||||
#site-title
|
||||
animation: titlescale 1s
|
||||
|
||||
canvas,
|
||||
#web_bg
|
||||
animation: to_show 4s
|
||||
|
||||
.card-announcement-animation
|
||||
animation: announ_animation .8s linear infinite
|
||||
color: #FF0000
|
||||
|
||||
.scroll-down-effects
|
||||
animation: scroll-down-effect 1.5s infinite
|
||||
|
||||
if hexo-config("avatar_effect") == true
|
||||
.avatar_img
|
||||
animation: avatar_turn_around 2s linear infinite
|
||||
|
||||
.reward-main
|
||||
animation: donate_effcet .3s .1s ease both
|
||||
|
||||
#rightside-config-hide
|
||||
animation: rightside_in_animate .3s
|
||||
|
||||
@keyframes scroll-down-effect
|
||||
0%
|
||||
opacity: 0.4
|
||||
top: 0
|
||||
50%
|
||||
opacity: 1
|
||||
top: -16px
|
||||
100%
|
||||
opacity: 0.4
|
||||
top: 0
|
||||
|
||||
@keyframes header
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-50px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes headerNoOpacity
|
||||
0%
|
||||
transform: translateY(-50px)
|
||||
100%
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes main
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(50px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes titlescale
|
||||
0%
|
||||
opacity: 0
|
||||
transform: scale(0.7)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes search_close
|
||||
0%
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
100%
|
||||
opacity: 0
|
||||
transform: scale(0.7)
|
||||
|
||||
@keyframes to_show
|
||||
0%
|
||||
opacity: 0
|
||||
100%
|
||||
opacity: 1
|
||||
|
||||
@keyframes avatar_turn_around
|
||||
from
|
||||
transform: rotate(0deg)
|
||||
to
|
||||
transform: rotate(360deg)
|
||||
|
||||
@keyframes sub_menus
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes donate_effcet
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-20px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes announ_animation
|
||||
0%,to
|
||||
transform: scale(1)
|
||||
50%
|
||||
transform: scale(1.2)
|
||||
|
||||
@keyframes rightside_in_animate
|
||||
0%
|
||||
transform: translateX(28px)
|
||||
100%
|
||||
transform: translateX(0)
|
||||
|
||||
@keyframes rightside_out_animate
|
||||
0%
|
||||
transform: translateX(0)
|
||||
100%
|
||||
transform: translateX(28px)
|
||||
|
||||
@keyframes right_to_left
|
||||
0%
|
||||
transform: translateX(100px)
|
||||
100%
|
||||
transform: translateX(0)
|
||||
|
||||
|
||||
@@ -28,6 +28,17 @@ blockquote
|
||||
color: $blockquote-color
|
||||
background-color: lighten($blockquote-padding-color,33)
|
||||
|
||||
p
|
||||
margin: 0 !important
|
||||
padding: 0.5rem 0
|
||||
|
||||
footer
|
||||
padding: 0 0 0.5rem 0
|
||||
cite
|
||||
&:before
|
||||
content: "—"
|
||||
padding: 0 .3em
|
||||
|
||||
.article-container
|
||||
pre,
|
||||
code
|
||||
@@ -49,11 +60,7 @@ blockquote
|
||||
color: $highlight-foreground
|
||||
text-shadow: none
|
||||
|
||||
.highlight
|
||||
@extend $code-block
|
||||
position: relative
|
||||
border-radius: 1px
|
||||
|
||||
figure.highlight
|
||||
&:after
|
||||
position: absolute
|
||||
top: 0
|
||||
@@ -63,6 +70,11 @@ blockquote
|
||||
background: darken($highlight-background, 5)
|
||||
content: ""
|
||||
|
||||
.highlight
|
||||
@extend $code-block
|
||||
position: relative
|
||||
border-radius: 1px
|
||||
|
||||
pre
|
||||
margin: 0
|
||||
padding: 8px 0
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
#bookmark-it
|
||||
margin-top: .2rem
|
||||
height: 1.6rem
|
||||
background: $light-blue
|
||||
background-color: $light-blue
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
line-height: 1.6rem
|
||||
@@ -83,10 +83,10 @@
|
||||
span
|
||||
padding-left: 10px
|
||||
|
||||
.toggle_change--primary,.bookmark--primary
|
||||
.bookmark--primary
|
||||
color: $ruby
|
||||
|
||||
.toggle_change--animated,.bookmark--animated
|
||||
.bookmark--animated
|
||||
transition-property: color
|
||||
transition-duration: 1s
|
||||
|
||||
@@ -130,28 +130,18 @@
|
||||
span
|
||||
margin-left: 10px
|
||||
|
||||
.card-tag-cloud a
|
||||
text-decoration: none
|
||||
position: relative
|
||||
padding-bottom: 0.3rem
|
||||
word-break: keep-all
|
||||
.card-tag-cloud
|
||||
a
|
||||
text-decoration: none
|
||||
position: relative
|
||||
padding-bottom: 0.3rem
|
||||
word-break: keep-all
|
||||
|
||||
&::after
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
z-index: -1
|
||||
width: 0
|
||||
height: 3px
|
||||
background-color: lighten($theme-color, 30%)
|
||||
content: ""
|
||||
transition: all 0.3s ease-in-out
|
||||
&:hover
|
||||
color: $light-blue !important
|
||||
|
||||
&:hover
|
||||
color: $light-blue !important
|
||||
|
||||
&::after
|
||||
width: 100%
|
||||
// &::after
|
||||
// width: 100%
|
||||
|
||||
.aside_recent_item
|
||||
margin: 10px 0 -15px 0
|
||||
@@ -223,6 +213,10 @@
|
||||
text-decoration: none
|
||||
color: $font-black
|
||||
padding: 0.2rem 1rem
|
||||
transition: .2s
|
||||
|
||||
&:hover
|
||||
padding: 0.2rem 0.85rem
|
||||
|
||||
.aside_category_list_name,.archive-list-link
|
||||
white-space: nowrap
|
||||
@@ -260,61 +254,6 @@
|
||||
float: right
|
||||
display: inline-block
|
||||
|
||||
// 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
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
.layout_page
|
||||
flex-direction: column
|
||||
|
||||
@@ -63,3 +63,4 @@
|
||||
|
||||
code, pre
|
||||
font-size: 98%
|
||||
|
||||
|
||||
@@ -36,7 +36,8 @@
|
||||
margin: 11px 10px
|
||||
width: 70px
|
||||
height: 70px
|
||||
border: 0px solid #eaeefb
|
||||
border: 0px solid #eaeefb
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
img
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
footer
|
||||
#footer
|
||||
margin-top: 1rem
|
||||
background: $light-blue
|
||||
background-attachment: local
|
||||
@@ -20,7 +20,7 @@ footer
|
||||
background-image: linear-gradient(234deg, #394245 0%, #000 100%)
|
||||
|
||||
|
||||
#footer
|
||||
#footer-wrap
|
||||
padding: 1.2rem 1rem 1rem
|
||||
color: $light-grey
|
||||
text-align: center
|
||||
|
||||
@@ -81,6 +81,7 @@
|
||||
border: none
|
||||
font-size: 18px
|
||||
transition: all .3s
|
||||
opacity: 0
|
||||
|
||||
.toggle-menu
|
||||
display: none
|
||||
@@ -108,8 +109,7 @@
|
||||
|
||||
&.open-sidebar
|
||||
.site-page
|
||||
display: none
|
||||
opacity: 0
|
||||
visibility: hidden
|
||||
|
||||
a,
|
||||
#site-name,
|
||||
@@ -154,12 +154,13 @@
|
||||
.menus_item_child
|
||||
position: absolute
|
||||
background-color: alpha($white, 0.8)
|
||||
padding: 8px 10px
|
||||
border-radius: 5px
|
||||
box-shadow: 0 5px 20px -4px rgba(0,0,0,.5)
|
||||
display: none
|
||||
opacity: 1
|
||||
animation: sub_menus .3s .1s ease both
|
||||
padding: 0
|
||||
margin-top: 10px
|
||||
|
||||
&:before
|
||||
content: ""
|
||||
@@ -174,10 +175,23 @@
|
||||
li
|
||||
list-style: none
|
||||
text-align: center
|
||||
padding: 0px 10px
|
||||
|
||||
&:first-child
|
||||
padding: 6px 10px 0
|
||||
|
||||
&:last-child
|
||||
padding: 0px 10px 6px
|
||||
|
||||
&:hover
|
||||
a,i
|
||||
color: $theme-color
|
||||
|
||||
a
|
||||
color: #3b3a3a
|
||||
text-shadow: none
|
||||
#search_button
|
||||
padding: 0 0 0 0.7rem
|
||||
|
||||
.site-page
|
||||
position: relative
|
||||
@@ -186,6 +200,7 @@
|
||||
font-size: 0.7rem
|
||||
cursor: pointer
|
||||
|
||||
#page-header .menus_item > .site-page
|
||||
&::after
|
||||
position: absolute
|
||||
bottom: 0
|
||||
@@ -213,16 +228,28 @@
|
||||
@media screen and (max-width: $sm)
|
||||
#page-header
|
||||
padding: 10px 0.8rem
|
||||
|
||||
.menus
|
||||
display: none
|
||||
|
||||
.toggle-menu
|
||||
|
||||
#nav
|
||||
#site-social-icons
|
||||
display: block
|
||||
|
||||
.search
|
||||
span
|
||||
display none
|
||||
&.not_index_bg
|
||||
height: 14rem
|
||||
|
||||
#page_site-info
|
||||
top: 7rem
|
||||
|
||||
#top-container
|
||||
height: 14rem
|
||||
|
||||
#post-info
|
||||
bottom: 1rem
|
||||
padding: 0 5%
|
||||
|
||||
.mobile_hidden
|
||||
display: none
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: $bg)
|
||||
#page-header
|
||||
|
||||
@@ -23,8 +23,9 @@
|
||||
z-index: 103
|
||||
overflow-y: scroll
|
||||
display: block
|
||||
transition: all .3s
|
||||
display: none
|
||||
transition: transform .3s
|
||||
opacity: 0
|
||||
will-change: transform
|
||||
|
||||
#mobile-sidebar-menus
|
||||
.mobile_author_icon
|
||||
@@ -110,11 +111,11 @@
|
||||
margin: 0
|
||||
|
||||
#mobile-sidebar-toc
|
||||
padding: 15px 10px
|
||||
padding: 1rem 0.5rem 5rem 0.3rem
|
||||
|
||||
ol,li
|
||||
list-style: none
|
||||
padding: 0 0 0 5px
|
||||
padding: 0 0 0 8px
|
||||
margin: 0
|
||||
|
||||
|
||||
@@ -144,14 +145,22 @@
|
||||
transform: translate3d(-288px, 0, 0) !important
|
||||
|
||||
.open-mobile-menus
|
||||
padding-left: 0 !important
|
||||
|
||||
#mobile-sidebar
|
||||
#mobile-sidebar-menus
|
||||
transform: translateX(-254px)
|
||||
opacity: 1
|
||||
|
||||
// pc界面打開mobile-menus需關閉sidebar
|
||||
#sidebar
|
||||
left: -300px !important
|
||||
|
||||
.open-mobile-toc
|
||||
#mobile-sidebar
|
||||
#mobile-sidebar-toc
|
||||
transform: translateX(-254px)
|
||||
opacity: 1
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
#mobile-sidebar-menus
|
||||
@@ -162,3 +171,4 @@
|
||||
display: block !important
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,293 +0,0 @@
|
||||
if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
.night-mode
|
||||
color: #99a9bf
|
||||
background-color: #2d3032
|
||||
|
||||
#sidebar
|
||||
background: #2d3035 !important
|
||||
box-shadow: -0.25rem 0 0.25rem #2d3035 !important
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: lighten(#2d3035,5)
|
||||
|
||||
#toggle-sidebar
|
||||
color: #99a9bf !important
|
||||
|
||||
if hexo-config("local_search") && hexo-config("local_search.enable")
|
||||
#local-search
|
||||
background: #2d3035
|
||||
.local-search-box--input
|
||||
background: #2d3035
|
||||
color: #99a9bf
|
||||
|
||||
.search-result-title
|
||||
color: #99a9bf
|
||||
if hexo-config("algolia_search.enable")
|
||||
#algolia-search
|
||||
background: #2d3035
|
||||
.ais-search-box--input
|
||||
background: #2d3035
|
||||
color: #99a9bf
|
||||
|
||||
#algolia-search-results
|
||||
.algolia-hit-item-link
|
||||
color: #99a9bf !important
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: #99a9bf
|
||||
|
||||
.article-container code
|
||||
background: #616a6b
|
||||
color: #99a9bf
|
||||
|
||||
// 評論
|
||||
#vcomment
|
||||
p,a,textarea,.vemoji-btn,.vpreview-btn,input,path,.vcount,.vnum,.vtime,.vsys,.vsys,.vnick
|
||||
color: #99a9bf !important
|
||||
|
||||
.vsys
|
||||
background: rgb(97, 106, 107) !important
|
||||
|
||||
.vbtn
|
||||
background: rgb(45, 48, 53) !important
|
||||
color: #99a9bf !important
|
||||
border: 1px solid #99a9bf
|
||||
|
||||
.vwrap
|
||||
border: 1px solid #99a9bf
|
||||
|
||||
input
|
||||
border-bottom: 1px dashed #616a6b
|
||||
|
||||
.vh
|
||||
border-bottom: 1px dashed #616a6b
|
||||
|
||||
pre
|
||||
background-color: #2d3035
|
||||
border: 1px solid #99a9bf
|
||||
|
||||
.vcontent.expand:before
|
||||
background: linear-gradient(180deg,hsla(0, 0%, 0%, 0),hsl(218, 8%, 19%))
|
||||
|
||||
.vcontent.expand:after
|
||||
background: hsla(204, 5%, 22%, 1)
|
||||
|
||||
.recent-post-item
|
||||
background: #2d3032 !important
|
||||
|
||||
.article-title,
|
||||
a
|
||||
color: #99a9bf !important
|
||||
|
||||
#page-header
|
||||
&.fixed
|
||||
background: #2d3035
|
||||
box-shadow: 0 5px 6px -5px rgba(133,133,133,0)
|
||||
|
||||
a,
|
||||
.toggle-menu,
|
||||
#site-name
|
||||
color: #99a9bf
|
||||
|
||||
blockquote
|
||||
border-left: 0.2rem solid #7A5353
|
||||
color: #99a9bf
|
||||
background-color: #2f3d49
|
||||
|
||||
hr
|
||||
background: 0
|
||||
border: 2px dashed #616A6B
|
||||
&:before
|
||||
color: #99a9bf
|
||||
|
||||
.post-meta__tags
|
||||
background: 0
|
||||
border: 1px solid #99a9bf
|
||||
color: #99a9bf
|
||||
|
||||
|
||||
.post-copyright
|
||||
border: 1px solid #99a9bf
|
||||
|
||||
*
|
||||
color: #99a9bf
|
||||
|
||||
.article-container .highlight
|
||||
background-color: #1B2631
|
||||
.code pre
|
||||
background-color: #1B2631
|
||||
|
||||
.gutter pre
|
||||
background: #1C2833
|
||||
|
||||
|
||||
&:after
|
||||
background: rgb(27, 38, 59)
|
||||
|
||||
table
|
||||
&:after,.copy-notice
|
||||
background: rgb(27, 38, 59)
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: lighten(#1B2631,10)
|
||||
|
||||
.copy-notice
|
||||
background: rgb(27, 38, 59)
|
||||
|
||||
.post-cards,.md-links-item
|
||||
a
|
||||
color: #99a9bf
|
||||
|
||||
.aplayer
|
||||
color: #000000
|
||||
filter: brightness(0.6)
|
||||
|
||||
.article-sort-item__title
|
||||
color: #99a9bf
|
||||
|
||||
.category-list
|
||||
a
|
||||
color: #99a9bf
|
||||
|
||||
|
||||
|
||||
.translate_chn_to_cht,
|
||||
.nightshift,
|
||||
#readmode,
|
||||
#to_comment,
|
||||
#font_plus,
|
||||
#font_minus,
|
||||
#rightside_config,
|
||||
#go-up,
|
||||
#mobile-toc-button
|
||||
background-color: #2d3035 !important
|
||||
|
||||
img
|
||||
filter: brightness(0.6)
|
||||
|
||||
.layout_post
|
||||
background:#2d3035
|
||||
|
||||
canvas
|
||||
display: none !important
|
||||
|
||||
#aside_content
|
||||
.card_widget
|
||||
background:#2d3035 !important
|
||||
.headline,
|
||||
.length_num,
|
||||
.aside_post_title,
|
||||
.aside_category_list_link,
|
||||
.archive-list-link,
|
||||
.social-icon
|
||||
color: #99a9bf !important
|
||||
|
||||
#bookmark-it
|
||||
background: #616a6b !important
|
||||
|
||||
#archive,
|
||||
.tag-cloud,
|
||||
#tag,
|
||||
.category-content,
|
||||
#category,
|
||||
#page,
|
||||
.flink
|
||||
background:#2d3035
|
||||
|
||||
#nav,
|
||||
#top-container,
|
||||
footer
|
||||
&::before
|
||||
content: ""
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
background-color: rgba(0,0,0,.6)
|
||||
|
||||
.layout_page
|
||||
.post-meta__date,
|
||||
.article-meta__separator,
|
||||
.article-meta__categories,
|
||||
i
|
||||
color: #99a9bf
|
||||
|
||||
#site-info .blogtitle,
|
||||
span.subtitle,
|
||||
#site-title,
|
||||
#post-info .posttitle,
|
||||
#post-info #post-meta,
|
||||
#site-social-icons i,
|
||||
#top-container a,
|
||||
#footer,
|
||||
#footer a,
|
||||
#page-header a,
|
||||
#page-header .toggle-menu
|
||||
color: rgba(238,238,238,.6)
|
||||
|
||||
#footer
|
||||
background-color: #2d3032
|
||||
|
||||
//打賞 分享
|
||||
.post-reward
|
||||
.reward-button
|
||||
background-color: #616a6b
|
||||
.post_share
|
||||
filter: brightness(0.6)
|
||||
img
|
||||
filter: brightness(1)
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: lighten(#2d3035,5)
|
||||
|
||||
#web_bg
|
||||
background-color: #2d3032
|
||||
|
||||
#hbe-security
|
||||
label
|
||||
color: #99a9bf !important
|
||||
input
|
||||
background-color: #616a6b
|
||||
|
||||
|
||||
#mobile-sidebar
|
||||
#mobile-sidebar-menus
|
||||
background: #2d3035
|
||||
|
||||
.headline
|
||||
color: #99a9bf !important
|
||||
|
||||
.length_num
|
||||
color: darken(#99a9bf,10) !important
|
||||
a
|
||||
color: #99a9bf !important
|
||||
|
||||
#mobile-sidebar-toc
|
||||
background: #2d3035
|
||||
a
|
||||
color: #99a9bf !important
|
||||
|
||||
|
||||
#page-header
|
||||
.menus_item_child
|
||||
background-color: #2d3035 !important
|
||||
|
||||
&:before
|
||||
border-color: transparent transparent #2d3035 !important
|
||||
|
||||
li
|
||||
a
|
||||
color: #99a9bf
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,90 +1,78 @@
|
||||
galleryItemStyle(w, h)
|
||||
.gallery
|
||||
&-item
|
||||
width: w
|
||||
height: unit(h, "rem")
|
||||
.layout_page
|
||||
display: flex
|
||||
margin: 0 auto
|
||||
max-width: 1200px
|
||||
align-items: flex-start
|
||||
padding: 0 15px
|
||||
|
||||
&__title
|
||||
transform: translate3d(0, unit(h, "rem"), 0)
|
||||
//index
|
||||
#recent-posts
|
||||
width: 75%
|
||||
|
||||
&:hover
|
||||
.gallery-item__title
|
||||
transform: translate3d(0, unit(h - 1.5, "rem"), 0)
|
||||
.recent-post-item
|
||||
padding: 0
|
||||
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
|
||||
border-radius: 8px
|
||||
transition: all 0.3s
|
||||
background: #fff
|
||||
margin-top: 20px
|
||||
height: 280px
|
||||
|
||||
&:hover
|
||||
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
|
||||
img.post_bg
|
||||
transform:scale(1.1)
|
||||
|
||||
.left_radius
|
||||
border-top-left-radius: 8px
|
||||
border-bottom-left-radius: 8px
|
||||
|
||||
.right_radius
|
||||
border-top-right-radius: 8px
|
||||
border-bottom-right-radius: 8px
|
||||
|
||||
.post_cover
|
||||
width: 45%
|
||||
height: 280px
|
||||
overflow: hidden
|
||||
|
||||
.post_bg
|
||||
border: 0
|
||||
transition: all .6s
|
||||
display: block
|
||||
width: 100%
|
||||
height: 100%
|
||||
padding: 0
|
||||
margin: 0
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform:scale(1.1)
|
||||
|
||||
.recent-post-info
|
||||
padding: 50px 40px
|
||||
display: inline-block
|
||||
width: 55%
|
||||
overflow hidden
|
||||
|
||||
|
||||
a.article-meta__categories
|
||||
text-decoration: none
|
||||
color: #858585
|
||||
|
||||
&:hover
|
||||
color: #49b1f5 !important
|
||||
|
||||
.recent-post-item
|
||||
.content
|
||||
display: -webkit-box
|
||||
-webkit-line-clamp: 3
|
||||
-webkit-box-orient: vertical
|
||||
overflow: hidden
|
||||
height: 90px
|
||||
margin-top: 0.5rem
|
||||
|
||||
p
|
||||
word-break: break-word
|
||||
|
||||
|
||||
ol,
|
||||
ul
|
||||
margin-top: 0.4rem
|
||||
padding: 0 0 0 0.8rem
|
||||
list-style: none
|
||||
counter-reset: li
|
||||
|
||||
p
|
||||
margin: 0
|
||||
|
||||
ol,
|
||||
ul
|
||||
padding-left: 0.5rem
|
||||
|
||||
li
|
||||
position: relative
|
||||
margin: 0.2rem 0
|
||||
padding: 0.1rem 0.5rem 0.1rem 1.5rem
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
transform: rotate(360deg)
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
background: $light-blue
|
||||
color: $white
|
||||
cursor: pointer
|
||||
transition: all 0.3s ease-out
|
||||
|
||||
ol
|
||||
li
|
||||
&:before
|
||||
margin-top: 0.2rem
|
||||
width: w = 1.2rem
|
||||
height: h = w
|
||||
border-radius: 0.5 * w
|
||||
content: counter(li)
|
||||
counter-increment: li
|
||||
text-align: center
|
||||
font-size: 0.6rem
|
||||
line-height: h
|
||||
|
||||
ul
|
||||
li
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $ruby
|
||||
|
||||
&:before
|
||||
$w = 0.3rem
|
||||
top: 10px
|
||||
margin-left: 0.45rem
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: 0.5 * w solid $light-blue
|
||||
border-radius: w
|
||||
background: $white
|
||||
content: ""
|
||||
line-height: h
|
||||
|
||||
.article-type
|
||||
margin-left: 0.3rem
|
||||
color: $grey
|
||||
word-break: break-word
|
||||
|
||||
.article-meta
|
||||
color: $grey
|
||||
@@ -121,7 +109,6 @@ galleryItemStyle(w, h)
|
||||
word-wrap: break-word
|
||||
|
||||
&:hover
|
||||
// border-bottom: 1px solid $light-blue
|
||||
color: $light-blue !important
|
||||
|
||||
.tag-cloud
|
||||
@@ -150,6 +137,30 @@ galleryItemStyle(w, h)
|
||||
#archive
|
||||
padding: 3rem 3rem 3rem
|
||||
|
||||
#page,
|
||||
.category-content,
|
||||
.flink
|
||||
padding: 40px 44px 44px
|
||||
|
||||
|
||||
#page,
|
||||
.category-content,
|
||||
#archive,
|
||||
.tag-cloud,
|
||||
.flink,
|
||||
#tag,
|
||||
#category
|
||||
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
|
||||
border-radius: 8px
|
||||
transition: all .3s
|
||||
background: #fff
|
||||
margin-top: 20px
|
||||
width: 75%
|
||||
|
||||
&:hover
|
||||
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
|
||||
|
||||
.article-sort
|
||||
padding-left: 1rem
|
||||
border-left: 2px solid $pale-blue
|
||||
@@ -296,48 +307,50 @@ galleryItemStyle(w, h)
|
||||
&:after
|
||||
content: ")"
|
||||
|
||||
.gallery
|
||||
&-item
|
||||
position: relative
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
margin: 0.4rem
|
||||
width: 6rem
|
||||
height: 6rem
|
||||
background-position: 50% 50%
|
||||
background-size: cover
|
||||
background-repeat: no-repeat
|
||||
cursor: pointer
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
&__title
|
||||
position: absolute
|
||||
overflow: hidden
|
||||
padding: 0 0.4rem
|
||||
width: 100%
|
||||
height: 1.5rem
|
||||
background: rgba(0, 0, 0, 0.5)
|
||||
color: $pale-blue
|
||||
text-align: center
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
line-height: 1.5rem
|
||||
transition: 0.2s ease-in-out
|
||||
transform: translate3d(0, 6rem, 0)
|
||||
|
||||
&:hover
|
||||
.gallery-item__title
|
||||
transform: translate3d(0, 4.5rem, 0)
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
.recent-post-item
|
||||
.article-title
|
||||
font-size: 1rem
|
||||
.layout_page
|
||||
padding: 0 5px !important
|
||||
|
||||
#page,
|
||||
.category-content,
|
||||
#archive,
|
||||
.tag-cloud,
|
||||
.flink,
|
||||
#tag,
|
||||
#category
|
||||
padding: 1.8rem 1.3rem
|
||||
margin-top: 10px
|
||||
|
||||
.category-lists
|
||||
padding: 0
|
||||
|
||||
#recent-posts
|
||||
.recent-post-item
|
||||
height: auto !important
|
||||
|
||||
.article-meta.tags
|
||||
display: none
|
||||
.post_cover
|
||||
width: 100%
|
||||
height: 230px
|
||||
border-radius: 8px 8px 0 0
|
||||
|
||||
galleryItemStyle(calc(50% - 22px), 6)
|
||||
.recent-post-info
|
||||
padding: 30px 25px 18px!important
|
||||
width: 100%
|
||||
|
||||
.article-title
|
||||
font-size: 1rem
|
||||
|
||||
.article-meta.tags
|
||||
display: none
|
||||
|
||||
@media screen and (min-width: $md)
|
||||
galleryItemStyle(8rem, 8)
|
||||
&:first-child
|
||||
margin-top: 10px
|
||||
|
||||
@media screen and (min-width: 900px)
|
||||
if hexo-config("aside.position") == "left"
|
||||
#recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
|
||||
order: 2
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
|
||||
width: 100% !important
|
||||
@@ -72,13 +72,17 @@ if hexo-config("post_beautify.enable")
|
||||
width: 100%
|
||||
color: $light-grey
|
||||
text-align: left
|
||||
padding-left: 8%
|
||||
padding: 0 8%
|
||||
position: absolute
|
||||
bottom: 1.5rem
|
||||
|
||||
#post-title
|
||||
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
|
||||
font-size: 1.5rem
|
||||
margin-bottom: 0.4rem
|
||||
|
||||
.posttitle
|
||||
line-height: 1.5
|
||||
|
||||
i.fa.fa-angle-right
|
||||
margin: 0 0.3rem 0 0.2rem
|
||||
@@ -108,12 +112,8 @@ if hexo-config("post_beautify.enable")
|
||||
background: $light-blue
|
||||
color: $white
|
||||
|
||||
.layout
|
||||
margin: 0 auto
|
||||
max-width: 1000px
|
||||
|
||||
#post-content
|
||||
margin-bottom: 1rem
|
||||
|
||||
if hexo-config("post_beautify.enable")
|
||||
h1,
|
||||
@@ -321,7 +321,7 @@ img
|
||||
|
||||
.post-copyright
|
||||
position: relative
|
||||
margin-bottom: 0.4rem
|
||||
margin: 1rem 0 0.5rem 0
|
||||
padding: 0.5rem 0.8rem
|
||||
border: 1px solid $light-grey
|
||||
transition: box-shadow 0.3s ease-in-out
|
||||
@@ -359,13 +359,7 @@ img
|
||||
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
.layout
|
||||
margin: 0 30px
|
||||
width: auto
|
||||
|
||||
#top-container
|
||||
// background-attachment: local
|
||||
|
||||
#post-title
|
||||
font-size: 1rem
|
||||
|
||||
@@ -374,7 +368,7 @@ img
|
||||
|
||||
|
||||
@media screen and (min-width: $md)
|
||||
.layout
|
||||
.layout_post
|
||||
width: $content-large-width
|
||||
|
||||
.katex-wrap
|
||||
@@ -394,10 +388,6 @@ img
|
||||
font-size: 1em
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px)
|
||||
.layout
|
||||
margin: 0 15px
|
||||
width: auto
|
||||
|
||||
.layout_post
|
||||
padding: 50px
|
||||
@@ -405,8 +395,8 @@ img
|
||||
border-radius: 8px
|
||||
transition: all 0.3s
|
||||
background: #fff
|
||||
margin-top: 40px
|
||||
margin-bottom: 40px
|
||||
margin: 40px auto
|
||||
max-width: 1000px
|
||||
|
||||
&:hover
|
||||
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
@@ -444,15 +434,13 @@ img
|
||||
text-decoration: none
|
||||
color: $light-blue
|
||||
|
||||
h1
|
||||
margin: 0.8rem 0
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
margin: 1rem 0 0.5rem 0
|
||||
margin: 1rem 0 0.8rem 0
|
||||
|
||||
img
|
||||
margin: 0 auto 0.8rem
|
||||
@@ -460,17 +448,20 @@ img
|
||||
blockquote,
|
||||
p
|
||||
margin: 0 0 0.8rem 0
|
||||
|
||||
|
||||
table,.note
|
||||
margin: 0.8rem 0
|
||||
|
||||
figure
|
||||
margin: 0.8rem 0
|
||||
iframe,.note
|
||||
margin: 0 0 0.8rem 0
|
||||
|
||||
table
|
||||
margin: 0
|
||||
|
||||
blockquote
|
||||
p
|
||||
margin: 0.5rem 0
|
||||
.layout_post,
|
||||
.layout_page
|
||||
opacity: 1
|
||||
|
||||
@media screen and (max-width: 1024px)
|
||||
.layout_post
|
||||
margin: 0 15px
|
||||
width: auto
|
||||
|
||||
@media screen and (max-width:768px)
|
||||
.layout_post
|
||||
padding: 1.8rem 1rem
|
||||
margin: 30px 5px
|
||||
|
||||
@@ -76,13 +76,13 @@ if hexo-config("readmode") && hexo-config("readmode.enable")
|
||||
background-color: rgba(102,128,153,.05)
|
||||
|
||||
#rightside
|
||||
#nightshift
|
||||
#darkmode
|
||||
display: none
|
||||
|
||||
canvas
|
||||
display: none !important
|
||||
|
||||
footer,
|
||||
#footer,
|
||||
#post-comment,
|
||||
hr,
|
||||
.relatedPosts,
|
||||
|
||||
@@ -6,14 +6,13 @@
|
||||
opacity 0
|
||||
|
||||
#rightside-config-hide
|
||||
transition: all .3s
|
||||
display none
|
||||
|
||||
#readmode,
|
||||
#font_plus,
|
||||
#font_minus,
|
||||
#to_comment,
|
||||
.nightshift,
|
||||
.darkmode,
|
||||
#mobile-toc-button,
|
||||
#go-up,
|
||||
#rightside_config
|
||||
|
||||
@@ -10,6 +10,8 @@
|
||||
background: $sidebar-background
|
||||
box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
|
||||
opacity: 0.9
|
||||
will-change: transform
|
||||
transition: transform .2s
|
||||
|
||||
.sidebar-toc
|
||||
ol,
|
||||
|
||||
300
source/css/_layout/z-darkmode.styl
Normal file
300
source/css/_layout/z-darkmode.styl
Normal file
@@ -0,0 +1,300 @@
|
||||
[data-theme="dark"]
|
||||
body
|
||||
color: #99a9bf
|
||||
background-color: #2d3032
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: lighten(#2d3035,5)
|
||||
|
||||
#sidebar
|
||||
background: #2d3035
|
||||
box-shadow: -0.25rem 0 0.25rem #2d3035
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: lighten(#2d3035,5)
|
||||
|
||||
if hexo-config("local_search") && hexo-config("local_search.enable")
|
||||
#local-search
|
||||
background: #2d3035
|
||||
.local-search-box--input
|
||||
background: #2d3035
|
||||
color: #99a9bf
|
||||
|
||||
.search-result-title
|
||||
color: #99a9bf
|
||||
if hexo-config("algolia_search.enable")
|
||||
#algolia-search
|
||||
background: #2d3035
|
||||
.ais-search-box--input
|
||||
background: #2d3035
|
||||
color: #99a9bf
|
||||
|
||||
#algolia-search-results
|
||||
.algolia-hit-item-link
|
||||
color: #99a9bf
|
||||
|
||||
.article-container code
|
||||
background: #616a6b
|
||||
color: #99a9bf
|
||||
|
||||
if hexo-config('valine') && hexo-config('valine.enable')
|
||||
// 評論
|
||||
#vcomment
|
||||
p,a,textarea,.vemoji-btn,.vpreview-btn,input,path,.vcount,.vnum,.vtime,.vsys,.vsys,.vnick
|
||||
color: #99a9bf !important
|
||||
|
||||
.vsys
|
||||
background: rgb(97, 106, 107) !important
|
||||
|
||||
.vbtn
|
||||
background: rgb(45, 48, 53) !important
|
||||
color: #99a9bf !important
|
||||
border: 1px solid #99a9bf
|
||||
|
||||
.vwrap
|
||||
border: 1px solid #99a9bf
|
||||
|
||||
input
|
||||
border-bottom: 1px dashed #616a6b
|
||||
|
||||
.vh
|
||||
border-bottom: 1px dashed #616a6b
|
||||
|
||||
pre
|
||||
background-color: #2d3035
|
||||
border: 1px solid #99a9bf
|
||||
|
||||
.vcontent.expand:before
|
||||
background: linear-gradient(180deg,hsla(0, 0%, 0%, 0),hsl(218, 8%, 19%))
|
||||
|
||||
.vcontent.expand:after
|
||||
background: hsla(204, 5%, 22%, 1)
|
||||
|
||||
.recent-posts
|
||||
.recent-post-item
|
||||
background: #2d3032 !important
|
||||
|
||||
.article-title
|
||||
color: #99a9bf !important
|
||||
|
||||
#page-header
|
||||
&.fixed
|
||||
background: #2d3035
|
||||
box-shadow: 0 5px 6px -5px rgba(133,133,133,0)
|
||||
|
||||
a,
|
||||
.toggle-menu,
|
||||
#site-name
|
||||
color: #99a9bf
|
||||
|
||||
blockquote
|
||||
color: #99a9bf
|
||||
background-color: lighten(#2d3035,10)
|
||||
|
||||
hr
|
||||
background: 0
|
||||
border: 2px dashed #616A6B
|
||||
&:before
|
||||
color: #99a9bf
|
||||
|
||||
.post-meta__tags
|
||||
background: 0
|
||||
border: 1px solid #99a9bf
|
||||
color: #99a9bf
|
||||
|
||||
.post-copyright
|
||||
border: 1px solid #99a9bf
|
||||
|
||||
*
|
||||
color: #99a9bf
|
||||
|
||||
.article-container pre
|
||||
background-color: lighten(#2d3035, 2)
|
||||
|
||||
.article-container .highlight:not(.js-file-line-container)
|
||||
background-color: lighten(#2d3035, 2)
|
||||
.code pre
|
||||
background-color: lighten(#2d3035, 2)
|
||||
|
||||
.gutter pre
|
||||
background: lighten(#2d3035, 3)
|
||||
|
||||
&:after
|
||||
background: lighten(#2d3035, 3)
|
||||
|
||||
table
|
||||
&:after,.copy-notice
|
||||
background: lighten(#2d3035, 3)
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: lighten(#2d3035, 8)
|
||||
|
||||
.copy-notice
|
||||
background: lighten(#2d3035, 3)
|
||||
|
||||
.aplayer
|
||||
color: #000000
|
||||
filter: brightness(0.6)
|
||||
|
||||
.translate_chn_to_cht,
|
||||
.darkmode,
|
||||
#readmode,
|
||||
#to_comment,
|
||||
#font_plus,
|
||||
#font_minus,
|
||||
#rightside_config,
|
||||
#go-up,
|
||||
#mobile-toc-button
|
||||
background-color: lighten(#2d3035,10) !important
|
||||
color: #99a9bf !important
|
||||
|
||||
&:hover
|
||||
background: lighten(#2d3035,20) !important
|
||||
|
||||
.md-links-item:before,
|
||||
.aside_category_list:hover,
|
||||
.archive-list-item:hover,
|
||||
#bookmark-it,
|
||||
.reward-button,
|
||||
.reward-all,
|
||||
.note
|
||||
background-color: lighten(#2d3035,10) !important
|
||||
|
||||
img,iframe,.gist
|
||||
filter: brightness(0.7)
|
||||
|
||||
#aside_content
|
||||
.card_widget
|
||||
background:#2d3035 !important
|
||||
.headline,
|
||||
.length_num,
|
||||
.aside_post_title,
|
||||
.aside_category_list_link,
|
||||
.archive-list-link,
|
||||
.social-icon
|
||||
color: #99a9bf !important
|
||||
|
||||
#archive,
|
||||
.tag-cloud,
|
||||
#tag,
|
||||
.category-content,
|
||||
#category,
|
||||
#page,
|
||||
.flink,
|
||||
.layout_post,
|
||||
#footer-wrap
|
||||
background:#2d3035
|
||||
|
||||
#nav,
|
||||
#top-container,
|
||||
#footer
|
||||
&::before
|
||||
content: ""
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
background-color: rgba(0,0,0,0.7)
|
||||
|
||||
#nav span,
|
||||
#nav i,
|
||||
#page-header a,
|
||||
#page-header .toggle-menu,
|
||||
#top-container #post-meta,
|
||||
#top-container a,
|
||||
.posttitle,
|
||||
#footer-wrap,
|
||||
#footer-wrap a
|
||||
color: lighten(#99a9bf,10)
|
||||
|
||||
.recent-posts .post-meta__date,
|
||||
.recent-posts .article-meta,
|
||||
.recent-posts .article-meta__categories,
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.prev_info,
|
||||
.next_info,
|
||||
.post-reward .reward-button,
|
||||
.fa-clipboard,
|
||||
.gutter pre,
|
||||
#bookmark-it,
|
||||
.copy-notice,
|
||||
.md-links-item a,
|
||||
.category-list-link
|
||||
color: #99a9bf !important
|
||||
|
||||
.article-sort-item__title
|
||||
color: #99a9bf
|
||||
&:hover
|
||||
color: #49b1f5
|
||||
|
||||
//打賞 分享
|
||||
.post-reward
|
||||
.reward-all:after
|
||||
border-top: 13px solid lighten(#2d3035,10) !important
|
||||
|
||||
|
||||
#web_bg[data-type=color]
|
||||
background: #2d3032
|
||||
|
||||
#web_bg[data-type=photo]:before
|
||||
content: ""
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
background-color: rgba(0,0,0,0.8)
|
||||
|
||||
#hbe-security
|
||||
label
|
||||
color: #99a9bf !important
|
||||
input
|
||||
background-color: #616a6b
|
||||
|
||||
|
||||
#mobile-sidebar
|
||||
#mobile-sidebar-menus
|
||||
background: #2d3035
|
||||
|
||||
.headline
|
||||
color: #99a9bf !important
|
||||
|
||||
.length_num
|
||||
color: darken(#99a9bf,10) !important
|
||||
a
|
||||
color: #99a9bf !important
|
||||
|
||||
#mobile-sidebar-toc
|
||||
background: #2d3035
|
||||
a
|
||||
color: #99a9bf !important
|
||||
|
||||
#page-header
|
||||
.menus_item_child
|
||||
background-color: #2d3035 !important
|
||||
|
||||
&:before
|
||||
border-color: transparent transparent #2d3035 !important
|
||||
|
||||
li
|
||||
a
|
||||
color: #99a9bf
|
||||
|
||||
.bookmark--animated:before
|
||||
background: lighten(#2d3035,20) !important
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,302 +0,0 @@
|
||||
#recent-posts
|
||||
width: 75%
|
||||
|
||||
.recent-post-item
|
||||
padding: 0
|
||||
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
|
||||
border-radius: 8px
|
||||
transition: all 0.3s
|
||||
background: #fff
|
||||
margin-top: 20px
|
||||
height: 280px
|
||||
|
||||
&:hover
|
||||
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
|
||||
img.post_bg
|
||||
transform:scale(1.1)
|
||||
|
||||
.is_left
|
||||
float: left
|
||||
border-top-left-radius: 8px
|
||||
border-bottom-left-radius: 8px
|
||||
|
||||
.is_right
|
||||
float: right
|
||||
border-top-right-radius: 8px
|
||||
border-bottom-right-radius: 8px
|
||||
|
||||
.post_cover
|
||||
width: 45%
|
||||
height: 280px
|
||||
overflow: hidden
|
||||
|
||||
img.post_bg
|
||||
border: 0
|
||||
transition: all .6s
|
||||
display: block
|
||||
width: 100%
|
||||
height: 100%
|
||||
padding: 0
|
||||
margin: 0
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform:scale(1.1)
|
||||
|
||||
#pagination
|
||||
margin-top: 2rem
|
||||
|
||||
.recent-post-info
|
||||
padding: 50px 40px
|
||||
display: inline-block
|
||||
width: 55%
|
||||
overflow hidden
|
||||
|
||||
|
||||
a.article-meta__categories
|
||||
text-decoration: none
|
||||
color: #858585
|
||||
|
||||
&:hover
|
||||
color: #49b1f5 !important
|
||||
|
||||
.content
|
||||
display: -webkit-box
|
||||
-webkit-line-clamp: 3
|
||||
-webkit-box-orient: vertical
|
||||
overflow: hidden
|
||||
height: 90px
|
||||
|
||||
.layout_page
|
||||
display: flex
|
||||
margin: 0 auto
|
||||
max-width: 1200px
|
||||
align-items: flex-start
|
||||
padding: 0 15px
|
||||
|
||||
|
||||
#page,.category-content,.flink
|
||||
padding: 40px 44px 44px
|
||||
|
||||
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
|
||||
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
|
||||
border-radius: 8px
|
||||
transition: all .3s
|
||||
background: #fff
|
||||
margin-top: 20px
|
||||
width: 75%
|
||||
|
||||
.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink
|
||||
|
||||
&:hover
|
||||
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 900px)
|
||||
if hexo-config("aside.position") == "left"
|
||||
#recent-posts,#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
|
||||
order: 2
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
|
||||
width: 100% !important
|
||||
|
||||
|
||||
@media screen and (max-width:768px)
|
||||
#web_bg
|
||||
display: none
|
||||
|
||||
.recent-post-item
|
||||
height: auto !important
|
||||
border-radius: 8px
|
||||
|
||||
.post_cover
|
||||
width: 100% !important
|
||||
height: 230px !important
|
||||
border-radius: 8px !important
|
||||
|
||||
.recent-post-item,#page,.tag-cloud,.flink
|
||||
margin-top: 1px
|
||||
|
||||
.recent-post-item,#page,.category-content,.tag-cloud,.flink
|
||||
box-shadow: none !important
|
||||
background: none !important
|
||||
padding: 0px 20px 0 !important
|
||||
|
||||
&:hover
|
||||
-webkit-box-shadow: none
|
||||
box-shadow: none
|
||||
|
||||
#archive,#category,#tag
|
||||
box-shadow: none !important
|
||||
background: none !important
|
||||
padding: 0px 30px 0 !important
|
||||
|
||||
|
||||
.layout_post
|
||||
padding: 0 20px 0
|
||||
border-radius: 0
|
||||
-webkit-box-shadow: none
|
||||
box-shadow: none
|
||||
background: none
|
||||
margin: 0
|
||||
|
||||
&:hover
|
||||
-webkit-box-shadow: none
|
||||
box-shadow: none
|
||||
|
||||
.layout_page
|
||||
padding: 0 !important
|
||||
|
||||
#aside_content
|
||||
display: none !important
|
||||
|
||||
.category-lists
|
||||
padding: 0
|
||||
|
||||
#recent-posts
|
||||
.recent-post-info
|
||||
padding: 20px 10px !important
|
||||
width: 100%
|
||||
|
||||
#pagination
|
||||
margin-bottom: 0
|
||||
|
||||
#nav
|
||||
#site-social-icons
|
||||
display: block
|
||||
|
||||
&.not_index_bg
|
||||
height: 14rem
|
||||
|
||||
#page_site-info
|
||||
top: 7rem
|
||||
|
||||
#top-container
|
||||
height: 14rem
|
||||
|
||||
#post-info
|
||||
bottom: 1rem
|
||||
padding-left: 5%
|
||||
|
||||
.mobile_hidden
|
||||
display: none
|
||||
|
||||
|
||||
canvas
|
||||
display: none !important
|
||||
|
||||
|
||||
.layout_page,
|
||||
.layout_post,
|
||||
footer
|
||||
animation: main 1s
|
||||
|
||||
#nav,
|
||||
#top-container,
|
||||
#page-header
|
||||
animation: header 1s
|
||||
|
||||
#site-title
|
||||
animation: titlescale 1s
|
||||
|
||||
canvas,
|
||||
#web_bg
|
||||
animation: to_show 4s
|
||||
|
||||
.card-announcement-animation
|
||||
animation: announ_animation .8s linear infinite
|
||||
color: #FF0000
|
||||
|
||||
.scroll-down-effects
|
||||
animation: scroll-down-effect 1.5s infinite
|
||||
|
||||
if hexo-config("avatar_effect") == true
|
||||
.avatar_img
|
||||
animation: avatar_turn_around 2s linear infinite
|
||||
|
||||
.reward-main
|
||||
animation: donate_effcet .3s .1s ease both
|
||||
|
||||
.rightside-in
|
||||
animation: rightside_in_animate .3s
|
||||
display: block !important
|
||||
|
||||
@keyframes scroll-down-effect
|
||||
0%
|
||||
opacity: 0.4
|
||||
top: 0
|
||||
50%
|
||||
opacity: 1
|
||||
top: -16px
|
||||
100%
|
||||
opacity: 0.4
|
||||
top: 0
|
||||
|
||||
@keyframes header
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-50px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes main
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(50px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes titlescale
|
||||
0%
|
||||
opacity: 0
|
||||
transform: scale(0.7)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes to_show
|
||||
0%
|
||||
opacity: 0
|
||||
100%
|
||||
opacity: 1
|
||||
|
||||
@keyframes avatar_turn_around
|
||||
from
|
||||
transform: rotate(0deg)
|
||||
to
|
||||
transform: rotate(360deg)
|
||||
|
||||
@keyframes sub_menus
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes donate_effcet
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-20px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes announ_animation
|
||||
0%,to
|
||||
transform: scale(1)
|
||||
50%
|
||||
transform: scale(1.2)
|
||||
|
||||
@keyframes rightside_in_animate
|
||||
0%
|
||||
transform: translateX(28px)
|
||||
100%
|
||||
transform: translateX(0)
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
#algolia-search
|
||||
animation: titlescale 0.5s
|
||||
|
||||
.ais-search-box
|
||||
margin: 0 auto
|
||||
max-width: 100%
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
#local-search
|
||||
animation: titlescale 0.5s
|
||||
|
||||
.local-search-box
|
||||
margin: 0 auto
|
||||
max-width: 100%
|
||||
|
||||
Reference in New Issue
Block a user