hexo-theme-butterfly/source/css/_mode/darkmode.styl
Jerry d62ec1b866 💥 改cdn_use為inject,可插入代碼到head或者bottom
💥 移除對文章隱藏的支持,如需要,請使用插件,hexo-hide-posts/hexo-generator-indexed
💥 移除subtitle金山詞霸每日一句,增加搏天api的隨機語錄
 subtitle修改為網頁加載完後再加載,防止api回應過慢而阻礙網頁顯示
 適配valine 1.4.0, 刪除部分valine夜間模式代碼
 meta增加article:published_time和article:modified_time
 當沒有設置Description時,會自動讀取文章前200個文字作為meta Description
 sidebar menu 增加頭像轉圈hover
💄 調整aside和mobile sidebar 網頁資訊佈局,當缺少一個時,寬度依舊平分
🐛 調整子目錄的排版(向左對齊),修復只能點擊子目錄文字才能跳轉的bug
🔥 pug精簡 刪除recent-post.pug  改為引用mixins/post-ui.pug
2020-04-12 02:40:54 +08:00

331 lines
7.2 KiB
Stylus
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
[data-theme='dark']
body
background-color: darken(#121212, 2)
color: alpha(#FFFFFF, .6)
::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
// footer
#web_bg[data-type=color],
#footer[data-type=color]
background: darken(#121212, 2)
#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
#nav,
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
background-color: #121212
#sidebar
background: #121212
box-shadow: -.25rem 0 .25rem #121212
#article-container code
background: #2c2c2c
.recent-posts
.recent-post-item
background: #121212 !important
.article-title
color: alpha(#FFFFFF, .8) !important
#page-header
&.fixed
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
.toggle-menu,
#site-name,
a
color: alpha(#FFFFFF, .8)
.menus_item_child
background-color: lighten(#121212, 5) !important
li
&:hover
background: lighten(#121212, 20)
a
color: alpha(#FFFFFF, .6)
//
#article-container pre,
#article-container pre code
background-color: lighten(#121212, 2)
.highlight-tools
background: lighten(#121212, 3)
#article-container .highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2)
.code pre,
.gutter pre
background-color: lighten(#121212, 2)
table
.copy-notice
background: lighten(#121212, 3)
.copy-notice
background: lighten(#121212, 3)
blockquote
background-color: lighten(#121212, 10)
color: alpha(#FFFFFF, .6)
hr
border: 2px dashed alpha(#FFFFFF, .3)
background: 0
&:before
color: alpha(#FFFFFF, .6)
.layout_post .tag_share .post-meta__tags
border: 1px solid alpha(#FFFFFF, .6)
color: alpha(#FFFFFF, .6)
&:hover
background: darken(#FFFFFF, 60)
//
.post-copyright
border: 1px solid alpha(#FFFFFF, .6)
.post-copyright-meta
color: alpha(#FFFFFF, .8)
.post-copyright-info
color: alpha(#FFFFFF, .6)
//
.aplayer
filter: brightness(.7)
color: $dark-black
//
#rightside
& > div
& > i,
& > a,
& > div
background-color: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
&:hover
background: lighten(#121212, 20) !important
//
.post-reward
.reward-button
background-color: lighten(#121212, 10) !important
.reward-all
background-color: lighten(#121212, 10) !important
&:after
border-top: 13px solid lighten(#121212, 10) !important
.md-links-item:before,
.aside-category-list-item:hover,
.archive-list-item:hover,
#bookmark-it
background-color: lighten(#121212, 10) !important
img,
iframe:not(.utterances-frame),
.gist
filter: brightness(.7)
//
#aside_content
.card-widget
background: #121212 !important
.headline,
.length_num,
.aside-post_title,
.aside-category-list-link,
.archive-list-link,
.social-icon,
.aside-category-list-item-more,
.archive-list-link-more
color: alpha(#FFFFFF, .6) !important
.button--animated:before
background: lighten(#121212, 20) !important
//
#nav
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background-color: alpha($dark-black, .7)
content: ''
#nav span,
#nav i,
#page-header a,
#page-header .toggle-menu,
#post-meta,
#post-meta a,
#footer-wrap,
#footer-wrap a
color: alpha(#FFFFFF, .6) !important
.posttitle,
h1,
h2,
h3,
h4,
h5,
h6
color: alpha(#FFFFFF, .8)
.recent-posts .post-meta__date,
.recent-posts .article-meta,
.recent-posts a,
.post-reward .reward-button,
.fa-clipboard,
.gutter pre,
#bookmark-it,
.copy-notice,
.md-links-item a,
.category-list-link,
.relatedPosts_date,
.prev-post .label,
.next-post .label
color: alpha(#FFFFFF, .6) !important
.prev_info,
.next_info,
.relatedPosts_title
color: alpha(#FFFFFF, .8) !important
//
.article-sort-item__title
color: alpha(#FFFFFF, .6)
&:hover
color: #49b1f5
// MENU,TOC
#mobile-sidebar
#mobile-sidebar-menus
background: #121212
.headline
color: alpha(#FFFFFF, .6) !important
.length_num
color: alpha(#FFFFFF, .8) !important
a
color: alpha(#FFFFFF, .6) !important
// note
if hexo-config('note.style') == 'modern'
.note
filter: brightness(.7)
if hexo-config('note.style') == 'flat'
.note
filter: brightness(.7)
color: #4c4948
//
// hexo-blog-encrypt
#hexo-blog-encrypt
label,
input
color: alpha(#FFFFFF, .6) !important
input
background-color: #121212
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea,
.gt-header-preview,
.gt-comment-content,
button,
.gt-popup
filter: brightness(.7)
svg
fill: alpha(#FFFFFF, .6) !important
if hexo-config('valine') && hexo-config('valine.enable')
#vcomment
.vsys
background: #2c2c2c !important
.vbtn,
.vat
border: 1px solid alpha(#FFFFFF, .6)
background: #121212 !important
color: alpha(#FFFFFF, .6) !important
&:hover
background: lighten(#121212, 20) !important
if hexo-config('local_search') && hexo-config('local_search.enable')
#local-search
background: #121212
.local-search-box--input
background: #121212
color: alpha(#FFFFFF, .6)
.search-result-title
color: alpha(#FFFFFF, .6)
if hexo-config('algolia_search.enable')
#algolia-search
background: #121212
.ais-search-box--input
background: #121212
color: alpha(#FFFFFF, .6)
#algolia-search-results
.algolia-hit-item-link
color: alpha(#FFFFFF, .6)
if hexo-config('disqusjs.enable')
#disqus_thread
#dsqjs
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(#FFFFFF, .6)
.dsqjs-order-label
background-color: lighten(#121212, 5)
.dsqjs-post-body
color: alpha(#FFFFFF, .6)
code,
pre
background: #2c2c2c
blockquote
color: alpha(#FFFFFF, .6)
.mermaid
filter: brightness(.7)