提交 00f5db67 编写于 作者: EvanOne(文一)'s avatar EvanOne(文一)

refactor: Refactor some component style

上级 3374ba2e
......@@ -14,6 +14,9 @@ html(lang=config.language)
div.content-inner(class=`${is_home() ? 'content-home' : ''}`)
block content
if page.comments
include ./_partials/widgets/comments.pug
aside#sidebar.sidebar
div.sidebar-inner
!= partial('./_partials/sidebar/sidebar.pug', null, { cache: theme.cache })
......@@ -24,8 +27,10 @@ html(lang=config.language)
div.footer-inner
!= partial('./_partials/footer/footer.pug', null, { cache: theme.cache })
//- if theme.back2top.enable
//- include ../_components/back2top.pug
include ./_partials/widgets/loading-bar.pug
if theme.back2top.enable
include ./_partials/widgets/back2top.pug
//- include ../_components/search/index.pug
......
- var fa_prefix = theme.fa_prefix || 'fa'
div.busuanzi
if theme.busuanzi.site.uv.enable
span.busuanzi-uv
i.fa.fa-user
i(class=`${fa_prefix} fa-user`)
if !theme.busuanzi.site.icon_only
span= _p("footer.uv") + " "
span= __("footer.uv") + " "
span#busuanzi_value_site_uv
if theme.busuanzi.site.uv.enable && theme.busuanzi.site.pv.enable
......@@ -11,9 +13,9 @@ div.busuanzi
if theme.busuanzi.site.pv.enable
span.busuanzi-pv
i.fa.fa-eye
i(class=`${fa_prefix} fa-eye`)
if !theme.busuanzi.site.icon_only
span= _p("footer.pv") + " "
span= __("footer.pv") + " "
span#busuanzi_value_site_pv
include ../../_third-party/analytics/busuanzi.pug
......@@ -8,9 +8,9 @@
indexName: env.ALGOLIA_INDEX_NAME || config.algolia.indexName,
hits: theme.algolia_search.hits,
languages: {
input_placeholder: _p("algolia_search.input_placeholder"),
hits_empty: _p("algolia_search.hits_empty"),
hits_stats: _p("algolia_search.hits_stats")
input_placeholder: __("algolia_search.input_placeholder"),
hits_empty: __("algolia_search.hits_empty"),
hits_stats: __("algolia_search.hits_stats")
}
});
}
......@@ -61,10 +61,10 @@
});
var prompt = JSON.stringify({
copy_success: _p("prompt.copy.success"),
copy_error: _p("prompt.copy.error"),
creative_commons: _p("prompt.creative_commons"),
copy_button: _p("prompt.copy_button")
copy_success: __("prompt.copy.success"),
copy_error: __("prompt.copy.error"),
creative_commons: __("prompt.creative_commons"),
copy_button: __("prompt.copy_button")
});
script.
......
section.posts
section.post-list
include ../../_mixins/post-header.pug
//- include ../_mixins/gallery.pug
......@@ -28,5 +28,5 @@ section.posts
if !post.link && isExcerpt
div.post-body-more
a.post-body-more__a(href=url_for(post.path))= _p("post.read_more") + " »"
a.post-body-more__a(href=url_for(post.path))= __("post.read_more") + " »"
- })
......@@ -3,6 +3,6 @@ div.search-mask
div.search-popup
span.search-close
div.search-input
input(placeholder= _p("local_search.input_placeholder"))
input(placeholder= __("local_search.input_placeholder"))
div.search-results
div#back-top
div(data-popover=_p("back2top") data-popover-pos="up").back-top-inner
i(class=`fa fa-${theme.back2top.icon.name}`)
- var fa_prefix = theme.fa_prefix || 'fa'
div#back2top.back2top
div(data-popover=__("back2top") data-popover-pos="up")
i.back2top-icon(class=`${fa_prefix} fa-${theme.back2top.icon.name}`)
if theme.disqus && theme.disqus.enable
div#comments.comments.content
div#disqus_thread
div#comments.comments
div.comment-inner
div#disqus_thread
else if theme.valine && theme.valine.enable
div#comments.comments.content
div#comments.comments
div.comment-inner
else if theme.gitalk && theme.gitalk.enable
div#comments.comments.content
div#gitalk-container
div#comments.comments
div.comment-inner
div#gitalk-container
else if theme.livere && theme.livere.enable
div#comments.comments.content
div#lv-container(data-id="city" data-uid=theme.livere.uid)
div#comments.comments
div.comment-inner
div#lv-container(data-id="city" data-uid=theme.livere.uid)
......@@ -5,17 +5,17 @@
var ccURL = `https://creativecommons.org/licenses/${ccLicense}/4.0/deed.${ccLanguage}`
div.post-copyright
div.copyright-author
span.copyright-name!= _p("post.copyright.author") + ":"
span.copyright-value
div.post-copyright-author
span.post-copyright-author-name!= __("post.copyright.author") + ": "
span.post-copyright-author-value
if (config.url && config.author)
a(href=config.url)= config.author
div.copyright-link
span.copyright-name!= _p("post.copyright.link") + ":"
span.copyright-value
div.post-copyright-link
span.post-copyright-link-name!= __("post.copyright.link") + ": "
span.post-copyright-link-value
if (config.url)
a(href=page.permalink)= page.permalink
div.copyright-notice
span.copyright-name!= _p("post.copyright.license_title") + ":"
span.copyright-value
div.post-copyright-notice
span.post-copyright-notice-name!= __("post.copyright.license_title") + ": "
span.post-copyright-notice-value
!= _p("post.copyright.license_content", ccURL, ccLicense.toUpperCase())
div.loading-bar
div#loading-bar.loading-bar
div.progress
div#reward
div.reward-button!= _p("reward.btn_text")
div.reward-qr-wrapper
div.reward-qr
span.reward-qr-alipay
img(src=theme.reward.alipay)
div.reward-qr-alipay-text!= _p("reward.alipay")
span.reward-qr-wechat
img(src=theme.reward.wechat)
div.reward-qr-wechat-text!= _p("reward.wechat")
div.reward
div.reward-button!= __("reward.btn_text")
div.reward-qr
span.reward-qr-alipay
img.reward-qr-alipay__img(src=theme.reward.alipay)
div.reward-qr-alipay-text!= __("reward.alipay")
span.reward-qr-wechat
img.reward-qr-wechat__img(src=theme.reward.wechat)
div.reward-qr-wechat-text!= __("reward.wechat")
div(data-popover=__("post.sticky") data-popover-pos="up").sticky-top
i(class=`${theme.fa_prefix || 'fa'} fa-${theme.stick_top.icon}`).sticky-top__i
- var fa_prefix = theme.fa_prefix || 'fa'
div.sticky-top(data-popover=__("post.sticky") data-popover-pos="up")
i.sticky-top__i(class=`${fa_prefix} fa-${theme.stick_top.icon}`)
extends ./_layout.pug
block content
- var fa_prefix = theme.fa_prefix || 'fa'
div.post
- var fa_prefix = theme.fa_prefix || 'fa'
include ./_mixins/post-header.pug
//- include ./_mixins/gallery.pug
include ./_mixins/post-header.pug
//- include ./_mixins/gallery.pug
+postHeader(page)
+postHeader(page)
div.post-body
if page.photos && page.photos.length
//- +gallery(page)
!= page.content
div.post-body
if page.photos && page.photos.length
//- +gallery(page)
!= page.content
footer.post-footer
if theme.post_widget.end_text.enable
div.post-footer-end
span= "------ "
span= __("post.end")
span= " ------"
footer.post-footer
if theme.post_widget.end_text.enable
div.post-end
span= "------ "
span= __("post.end")
span= " ------"
- var themeConfigCC = theme.creative_commons.enable && theme.creative_commons.post
if page.copyright === false ? page.copyright : themeConfigCC
//- include ./_components/copyright.pug
if page.copyright || (theme.creative_commons.enable && theme.creative_commons.post)
include ./_partials/widgets/copyright.pug
if theme.post_widget.tags
if page.tags && page.tags.length > 0
div.post-footer-tags
each tag in page.tags.data
span.post-footer-tags-item
i.post-footer-tags-item__i(class=`${fa_prefix} fa-tags`)
a.post-footer-tags-item__a(href=tag.permalink)= tag.name
if theme.post_widget.tags
if page.tags && page.tags.length > 0
div.post-tags
each tag in page.tags.data
span.post-tags-item
i.post-tags-item__i(class=`${fa_prefix} fa-tags`)
a.post-tags-item__a(href=tag.permalink)= tag.name
//- if page.reward === false ? page.reward : (theme.reward && theme.reward.enable)
//- include ./_components/reward.pug
if page.reward || (theme.reward && theme.reward.enable)
include ./_partials/widgets/reward.pug
include ./_partials/widgets/pagination.pug
include ./_partials/widgets/pagination.pug
......@@ -27,13 +27,15 @@ hexo.extend.filter.register('after_post_render', function(data) {
if (!data.protocol) return;
if (data.hostname === siteHost) return;
var fa_prefix = theme.fa_prefix || 'fa';
$(this).replaceWith(function() {
return $(
'<span class="external-link">' +
'<a href="' + href + '" target="_blank" rel="noopener">' +
$(this).html() +
'</a>' +
'<i class="fa fa-external-link"></i>' +
'<i class="' + fa_prefix + ' fa-external-link"></i>' +
'</span>'
);
});
......
$highlight_theme = hexo-config('highlight_theme')
highlight_theme = hexo-config('highlight_theme');
if ($highlight_theme == 'light')
$highlight-addition = #deffe7
$highlight-deletion = #ffe8eb
else if ($highlight_theme == 'dark')
$highlight-addition = alpha(#00ff00, .2)
$highlight-deletion = alpha(#ff0000, .2)
else if ($highlight_theme == 'ocean')
$highlight-addition = alpha(#9bb955, .4)
$highlight-deletion = alpha(#ff0000, .2)
if (highlight_theme == 'light') {
$highlight-addition = #deffe7;
$highlight-deletion = #ffe8eb;
} else if (highlight_theme == 'dark') {
$highlight-addition = alpha(#00ff00, .2);
$highlight-deletion = alpha(#ff0000, .2);
} else if (highlight_theme == 'ocean') {
$highlight-addition = alpha(#9bb955, .4);
$highlight-deletion = alpha(#ff0000, .2);
}
@require './theme.styl'
@require './diff.styl'
languages = 'js' 'javascript' 'python' 'ruby' 'xml' 'html' 'css' 'php' 'sql' 'coffeescript' 'java' 'bash' 'markdown' 'kotlin' 'c' 'c\+\+' 'c#' 'go' 'golang' 'less' 'sass' 'scss' 'stylus' 'styl' 'typescript' 'ts' 'yml' 'yaml' 'matlab' 'objectivec' 'makefile' 'scala' 'gradle' 'swift' 'rust' 'lua' 'lisp' 'fortran' 'dart' 'perl'
$wordWrap = hexo-config('code_word_wrap')
for lang in languages
.highlight{'.' + lang}
figcaption
span
&:first-child::before
content: lang
margin: 0 .6rem
color: $highlight-code-lang-color
.highlight
position: relative
margin: .5rem 0 1rem
min-width: 100%
line-height: $line-height-code-block
color: $highlight-color
background-color: $highlight-background
.copy-button i
color: $copy-button-color
@require './theme.styl';
@require './diff.styl';
languages = 'js' 'javascript' 'python' 'ruby' 'xml' 'html' 'css' 'php' 'sql' 'coffeescript' 'java' 'bash' 'markdown' 'kotlin' 'c' 'c\+\+' 'c#' 'go' 'golang' 'less' 'sass' 'scss' 'stylus' 'styl' 'typescript' 'ts' 'yml' 'yaml' 'matlab' 'objectivec' 'makefile' 'scala' 'gradle' 'swift' 'rust' 'lua' 'lisp' 'fortran' 'dart' 'perl';
wordWrap = hexo-config('code_word_wrap');
for lang in languages {
.highlight{'.' + lang} {
figcaption {
span {
&:first-child::before {
content: lang;
margin: 0 .6rem 0 0;
color: $highlight-code-lang-color;
}
}
}
}
}
.highlight {
margin: 0 0 1rem;
width: 100%;
line-height: $line-height-codeblock;
color: $highlight-color;
background-color: $highlight-background;
.copy-button i {
color: $copy-button-color;
}
pre,
code
font-family: $code-font-family
pre
margin: 0
if ($wordWrap)
white-space: pre-wrap
counter-reset: line
td
border-width: 0
figcaption
overflow: hidden
padding: .1rem 0
width: 100%
color: $highlight-header-color
background-color: $highlight-header-bg-color
span
&:first-child
float: left
color: $highlight-code-note-color
span
&:nth-child(2)
float: right
margin-right: 2rem
figcaption.custom
padding: .1rem 0
min-height: 1.5rem
.custom-lang
float: left
margin: 0 .6rem
color: $highlight-code-lang-color
.code
if ($wordWrap)
padding: 0
else
padding: 0 0 0 .4rem
.gutter
padding: .4rem .6rem
width: 1rem
background-color: $highlight-side-bg-color
if ($wordWrap)
display: none
pre
text-align: right
color: $highlight-side-color
background-color: inherit
if ($wordWrap)
.line
&::before
content: counter(line)
display: inline-block
margin: 0 .4rem 0 0
box-sizing: content-box
padding: 0 .8rem 0 .4rem
min-width: 1rem
text-align: right
color: $highlight-side-color
background-color: $highlight-side-bg-color
counter-increment: line
code {
font-family: $font-family-code;
}
pre {
margin: 0;
if (wordWrap) {
white-space: pre-wrap;
counter-reset: line;
}
}
td {
border-width: 0;
}
figcaption {
overflow: hidden;
position: relative;
padding: 0 .6rem;
width: 100%;
color: $highlight-header-color;
background-color: $highlight-header-bg-color;
span {
&:first-child {
float: left;
color: $highlight-code-note-color;
}
}
span {
&:last-child {
float: right;
margin-right: 2rem;
}
}
}
figcaption.custom {
padding: .1rem 0;
min-height: 1.5rem;
.custom-lang {
float: left;
margin: 0 .6rem;
color: $highlight-code-lang-color;
}
}
.code {
if (wordWrap) {
padding: 0;
} else {
padding: 0 0 0 .4rem;
}
}
.gutter {
padding: .4rem .6rem;
width: 1rem;
background-color: $highlight-side-bg-color;
if (wordWrap) {
display: none;
}
pre {
text-align: right;
color: $highlight-side-color;
background-color: inherit;
}
}
if (wordWrap) {
.line {
&::before {
content: counter(line);
display: inline-block;
margin: 0 .4rem 0 0;
box-sizing: content-box;
padding: 0 .8rem 0 .4rem;
min-width: 1rem;
text-align: right;
color: $highlight-side-color;
background-color: $highlight-side-bg-color;
counter-increment: line;
}
}
}
.variable,
.attribute
color: $highlight-red
.attribute {
color: $highlight-red;
}
.number,
.preprocessor,
......@@ -107,11 +133,13 @@ for lang in languages
.params,
.constant,
.number,
.command
color: $highlight-orange
.command {
color: $highlight-orange;
}
.built_in
color: $highlight-yellow
.built_in {
color: $highlight-yellow;
}
.special,
.formula,
......@@ -121,19 +149,24 @@ for lang in languages
.inheritance,
.header,
.regexp,
.tag
color: $highlight-green
.tag {
color: $highlight-green;
}
.keyword,
.title
color: $highlight-aqua
.title {
color: $highlight-aqua;
}
.function,
.title
color: $highlight-blue
.title {
color: $highlight-blue;
}
.comment
color: $highlight-comment
.comment {
color: $highlight-comment;
}
}
.ruby .constant,
.xml .tag .title,
......@@ -143,18 +176,21 @@ for lang in languages
.css .id,
.tag .name,
.css .class,
.css .pseudo
color: $highlight-red
.css .pseudo {
color: $highlight-red;
}
.ruby .class .title,
.css .rules .attribute,
.ruby .symbol,
.xml .cdata
color: $highlight-green
.xml .cdata {
color: $highlight-green;
}
.css .hexcolor,
.tag .string
color: $highlight-aqua
.tag .string {
color: $highlight-aqua;
}
.python .decorator,
.python .title,
......@@ -163,18 +199,22 @@ for lang in languages
.perl .sub,
.javascript .title,
.js .title,
.coffeescript .title
color: $highlight-blue
.coffeescript .title {
color: $highlight-blue;
}
.tag .attr,
.javascript .keyword,
.javascript .function,
.js .keyword,
.js .function
color: $highlight-purple
.js .function {
color: $highlight-purple;
}
.diff .addition
background-color: $highlight-addition
.diff .addition {
background-color: $highlight-addition;
}
.diff .deletion
background-color: $highlight-deletion
.diff .deletion {
background-color: $highlight-deletion;
}
@import './theme.styl'
@import './highlight.styl'
@import './diff.styl'
@import './theme.styl';
@import './highlight.styl';
@import './diff.styl';
$highlight_theme = hexo-config('highlight_theme')
highlight_theme = hexo-config('highlight_theme');
if ($highlight_theme == 'light')
$highlight-color = #757575
$highlight-background = #f6f8fa
$highlight-side-color = lighten($highlight-color, 60%)
$highlight-side-bg-color = darken($highlight-background, 1%)
$highlight-header-color = $highlight-color
$highlight-header-bg-color = $highlight-side-bg-color
$highlight-code-lang-color = alpha($highlight-header-color, .6)
$highlight-code-note-color = $highlight-header-color
$copy-button-color = alpha($highlight-header-color, .7)
$highlight-comment = #90a4ae
$highlight-red = #E53935
$highlight-orange = #F76D47
$highlight-yellow = #FFB62C
$highlight-green = #91B859
$highlight-aqua = #39ADB5
$highlight-blue = #6182B8
$highlight-purple = #a626a4
if (highlight_theme == 'light') {
$highlight-color = #757575;
$highlight-background = #f6f8fa;
$highlight-side-color = lighten($highlight-color, 60%);
$highlight-side-bg-color = darken($highlight-background, 2%);
$highlight-header-color = $highlight-color;
$highlight-header-bg-color = $highlight-side-bg-color;
$highlight-code-lang-color = alpha($highlight-header-color, .6);
$highlight-code-note-color = $highlight-header-color;
$copy-button-color = alpha($highlight-header-color, .7);
$highlight-comment = #90a4ae;
$highlight-red = #E53935;
$highlight-orange = #F76D47;
$highlight-yellow = #FFB62C;
$highlight-green = #91B859;
$highlight-aqua = #39ADB5;
$highlight-blue = #6182B8;
$highlight-purple = #a626a4;
}
if ($highlight_theme == 'dark')
$highlight-color = #7a85b9
$highlight-background = #0f111a
$highlight-side-color = darken($highlight-color, 50%)
$highlight-side-bg-color = darken($highlight-background, 10%)
$highlight-header-color = $highlight-color
$highlight-header-bg-color = $highlight-side-bg-color
$highlight-code-lang-color = alpha($highlight-header-color, .6)
$highlight-code-note-color = $highlight-header-color
$copy-button-color = alpha($highlight-header-color, .7)
$highlight-comment = #98a4d0
$highlight-red = #ff5370
$highlight-orange = #f78c6c
$highlight-yellow = #ffcb6b
$highlight-green = #c3e88d
$highlight-aqua = #89ddff
$highlight-blue = #82aaff
$highlight-purple = #c792ea
if (highlight_theme == 'dark') {
$highlight-color = #7a85b9;
$highlight-background = #0f111a;
$highlight-side-color = darken($highlight-color, 50%);
$highlight-side-bg-color = darken($highlight-background, 10%);
$highlight-header-color = $highlight-color;
$highlight-header-bg-color = $highlight-side-bg-color;
$highlight-code-lang-color = alpha($highlight-header-color, .6);
$highlight-code-note-color = $highlight-header-color;
$copy-button-color = alpha($highlight-header-color, .7);
$highlight-comment = #98a4d0;
$highlight-red = #ff5370;
$highlight-orange = #f78c6c;
$highlight-yellow = #ffcb6b;
$highlight-green = #c3e88d;
$highlight-aqua = #89ddff;
$highlight-blue = #82aaff;
$highlight-purple = #c792ea;
}
if ($highlight_theme == 'ocean')
$highlight-color = #f8f8f2
$highlight-background = #304148
$highlight-side-color = alpha($highlight-color, 20%)
$highlight-side-bg-color = darken($highlight-background, 5%)
$highlight-header-color = $highlight-color
$highlight-header-bg-color = $highlight-side-bg-color
$highlight-code-lang-color = alpha($highlight-header-color, .5)
$highlight-code-note-color = $highlight-header-color
$copy-button-color = alpha($highlight-header-color, .6)
$highlight-comment = #65737e
$highlight-red = #ec5f67
$highlight-orange = #f99157
$highlight-yellow = gold
$highlight-green = #5fb3b3
$highlight-aqua = #99c794
$highlight-blue = #6699cc
$highlight-purple = #c594c5
if (highlight_theme == 'ocean') {
$highlight-color = #f8f8f2;
$highlight-background = #304148;
$highlight-side-color = alpha($highlight-color, 20%);
$highlight-side-bg-color = darken($highlight-background, 5%);
$highlight-header-color = $highlight-color;
$highlight-header-bg-color = $highlight-side-bg-color;
$highlight-code-lang-color = alpha($highlight-header-color, .5);
$highlight-code-note-color = $highlight-header-color;
$copy-button-color = alpha($highlight-header-color, .6);
$highlight-comment = #65737e;
$highlight-red = #ec5f67;
$highlight-orange = #f99157;
$highlight-yellow = gold;
$highlight-green = #5fb3b3;
$highlight-aqua = #99c794;
$highlight-blue = #6699cc;
$highlight-purple = #c594c5;
}
@import './header/index.styl';
@import './footer/index.styl';
@import './sidebar/index.styl';
@import './pages/index.styl';
@import './post/index.styl';
@import './highlight';
@import './widgets/index.styl';
......@@ -8,7 +8,7 @@
top: $font-size-main;
bottom: $font-size-main;
left: 0;
border-left: .3rem dashed $post-list-line-color;
border-left: .3rem dashed $post-timeline-line-color;
transform: translateX(-50%);
}
......@@ -24,7 +24,7 @@
top: 50%;
left: 0;
z-index: $z-index0;
border: .2rem solid $post-list-dot-color;
border: .2rem solid $post-timeline-dot-color;
border-radius: 50%;
width: .9rem;
height: .9rem;
......@@ -34,7 +34,7 @@
&:hover {
&::before {
border-color: $post-list-dot-hover-color;
border-color: $post-timeline-dot-hover-color;
}
}
}
......
......@@ -17,19 +17,19 @@
font-size: $font-size-base + 6px
&.default::before
content: $note-default
content: $icon-note-default
color: #777
&.success::before
content: $note-success
content: $icon-note-success
color: #42b983
&.warning::before
content: $note-warning
content: $icon-note-warning
color: #ecc91e
&.danger::before
content: $note-danger
content: $icon-note-danger
color: #dc3b3b
&.default
......
@import './post-timeline.styl';
@import './post-list.styl';
@import './post.styl';
// Only in homepage.
.post {
margin: 0 0 1.5rem;
border-radius: 5px;
padding: 1.5rem 2rem;
width: 100%;
background-color: $white;
// -----------------------------------------
.post-list {
.post {
margin: 0 0 1.5rem;
border-radius: 5px;
padding: 1.5rem 2rem;
width: 100%;
background-color: $white;
&-body {
&-excerpt {
& *:last-child {
margin-bottom: 0;
}
}
&-body {
&-more {
margin-top: 1.5rem;
text-align: center;
&-more {
margin-top: 1.5rem;
text-align: center;
&__a {
display: inline-block;
border-radius: 5px;
padding: 0 .6em;
color: $white;
background-color: $home-readmore-bg-color;
transition: background-color .2s ease;
cursor: pointer;
&:hover {
&__a {
display: inline-block;
border-radius: 5px;
padding: 0 .6em;
color: $white;
background-color: $home-readmore-bg-hover-color;
background-color: $home-readmore-bg-color;
transition: background-color .2s ease;
cursor: pointer;
&:hover {
color: $white;
background-color: $home-readmore-bg-hover-color;
}
}
}
}
......
.post-header {
position: relative;
margin: 0 0 1rem;
font-size: 1em;
text-align: center;
&-title {
margin: 0;
cursor: auto;
&__a {
position: relative;
color: $post-title-color;
word-wrap();
&::before {
content: '';
visibility: hidden;
position: absolute;
right: 0;
bottom: -4px;
left: 0;
height: 2px;
background-color: #000;
transition-property: transform;
transition-ease();
transform: scaleX(0);
}
.post {
&-header {
position: relative;
margin: 0 0 1rem;
font-size: 1em;
text-align: center;
&-title {
margin: 0;
cursor: auto;
&:hover {
&__a {
position: relative;
color: $post-title-color;
word-wrap();
&::before {
visibility: visible;
transform: scaleX(1);
content: '';
visibility: hidden;
position: absolute;
right: 0;
bottom: -4px;
left: 0;
height: 2px;
background-color: #000;
transition-property: transform;
transition-ease();
transform: scaleX(0);
}
&:hover {
color: $post-title-color;
&::before {
visibility: visible;
transform: scaleX(1);
}
}
}
}
}
&-meta {
i {
margin-right: .2rem;
}
&-meta {
i {
margin-right: .2rem;
}
& > span {
&:not(:first-child)::before {
content: '•';
margin: 0 .3rem;
color: $black-light;
& > span {
&:not(:first-child)::before {
content: '•';
margin: 0 .3rem;
color: $black-light;
}
}
}
&-create {
color: $post-create-color;
}
&-create {
color: $post-create-color;
}
&-update {
color: $post-update-color;
}
&-update {
color: $post-update-color;
}
&-word-count {
color: $post-word-count-color;
}
&-word-count {
color: $post-word-count-color;
}
&-reading-time {
color: $post-reading-time-color;
}
&-reading-time {
color: $post-reading-time-color;
}
&-reading-count {
color: $post-reading-count-color;
}
&-reading-count {
color: $post-reading-count-color;
}
.leancloud_visitors {
color: $post-reading-count-color;
.leancloud_visitors {
color: $post-reading-count-color;
}
}
}
}
.post-footer {
&-end {
margin: 0 0 1rem;
border-top: 1px dashed $post-end-line-color;
padding: 1rem 0 0;
text-align: center;
color: $post-end-color;
}
&-copyright {
position: relative;
margin: 0 0 1rem;
border: 1px solid $post-copyright-border-color;
padding: .8rem 1rem;
width: 100%;
transition-property: box-shadow;
transition-ease();
&:hover {
box-shadow: 0 0 5px 5px $post-copyright-shadow-color;
}
&-author,
&-link,
&-notice {
&-name {
font-weight: $font-weight-bold;
word-wrap();
}
if (hexo-config('post_widget.end_text.horizon_line')) {
border-top: 1px dashed $post-end-line-color;
padding: 1rem 0 0;
&-value {
color: $font-color;
word-wrap();
}
}
}
......
#reward
text-align: center
.reward-button
display: inline-block
margin: 1rem 0 1.5rem
border-radius: 10px
padding: .2rem 1rem
color: $white
background-color: $reward-btn-color
transition: background-color .2s
cursor: pointer
&:hover
background-color: $reward-btn-hover-color
.reward-qr-wrapper
display: none
.reward-qr
overflow: hidden
&-alipay,
&-wechat
display: inline-block
margin: 0 2rem
img
width: 200px
height: 200px
&-alipay-text,
&-wechat-text
margin: .5rem 0
&-alipay-text
color: $reward-alipay-color
&-wechat-text
color: $reward-wechat-color
.search-input
.ais-search-box
max-width: 100%
.algolia-hit-item
&::before
content: ''
display: inline-block
margin-right: .8rem
border: .15rem solid $blue-light
border-radius: 50%
width: .6rem
height: .6rem
background-color: #fff
transition: color .2s
em
font-style: normal
background-color: $yellow-light
#algolia-pagination
margin: .5rem 0
ul
margin: 0
padding: 0
text-align: center
.ais-pagination
&--item
a
clearAStyle()
display: block
border-radius: 3px
width: 1.5rem
height: 1.5rem
font-size: $font-size-larger
line-height: 1.5rem
text-align: center
cursor: pointer
&:hover
color: #fff
background-color: $blue-light
#algolia-stats
overflow: hidden
.algolia-logo
img
width: 4rem
height: 1.5rem
.search-input {
.ais-search-box {
max-width: 100%;
}
}
.algolia-hit-item {
&::before {
content: '';
display: inline-block;
margin-right: .8rem;
border: .15rem solid $blue-light;
border-radius: 50%;
width: .6rem;
height: .6rem;
background-color: #fff;
transition: color .2s;
}
em {
font-style: normal;
background-color: $yellow-light;
}
}
#algolia-pagination {
margin: .5rem 0;
ul {
margin: 0;
padding: 0;
text-align: center;
}
}
.ais-pagination {
&--item {
a {
display: block;
border-radius: 3px;
width: 1.5rem;
height: 1.5rem;
font-size: $font-size-larger;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
&:hover {
color: #fff;
background-color: $blue-light;
}
}
}
}
#algolia-stats {
overflow: hidden;
}
.algolia-logo {
img {
width: 4rem;
height: 1.5rem;
}
}
.search-mask
display: none
position: fixed
top: 0
left: 0
z-index: $z-index2
width: 100%
height: 100%
background-color: alpha($black-dark, .7)
.search-mask {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: $z-index2;
width: 100%;
height: 100%;
background-color: alpha($black-dark, .7);
}
.search-popup
display: none
position: fixed
top: 10%
left: 50%
z-index: $z-index2
margin-left: -350px
border-radius: 5px
padding: 1rem
width: 700px
max-height: 80%
font-size: $font-size-large
color: $font-color
background-color: $white-light
.search-popup {
display: none;
position: fixed;
top: 10%;
left: 50%;
z-index: $z-index2;
margin-left: -350px;
border-radius: 5px;
padding: 1rem;
width: 700px;
max-height: 80%;
font-size: $font-size-large;
color: $font-color;
background-color: $white-light;
}
.search-input
margin: 1.2rem 0 1rem
.search-input {
margin: 1.2rem 0 1rem;
input
border: 2px solid alpha($blue-light, .5)
border-radius: 2rem
padding: .2rem .8rem
line-height: 1.3rem
outline: 0
transition: border-color .3s
input {
border: 2px solid alpha($blue-light, .5);
border-radius: 2rem;
padding: .2rem .8rem;
line-height: 1.3rem;
outline: 0;
transition: border-color .3s;
&:hover,
&:focus
border-color: $blue-light
&:focus {
border-color: $blue-light;
}
}
}
.search-close
position: absolute
top: .5rem
right: .5rem
width: 1rem
height: 1rem
font-size: 1.25em
color: $black-light
transform: translateZ(0)
cursor: pointer
.search-close {
position: absolute;
top: .5rem;
right: .5rem;
width: 1rem;
height: 1rem;
font-size: 1.25em;
color: $black-light;
cursor: pointer;
&::before,
&::after
content: ''
display: block
position: absolute
top: 50%
margin-top: -.1rem
width: 1rem
height: .2rem
background-color: $black-light
&::after {
content: '';
display: block;
position: absolute;
top: 50%;
margin-top: -.1rem;
width: 1rem;
height: .2rem;
background-color: $black-light;
}
@extend .anime-close
@extend .anime-close;
}
.search-results
overflow-x: hidden
overflow-y: scroll
max-height: 16rem
.search-results {
overflow-x: hidden;
overflow-y: scroll;
max-height: 16rem;
em
font-style: normal
background-color: $yellow-light
em {
font-style: normal;
background-color: $yellow-light;
}
}
@import './common.styl'
@import './algolia.styl' if (hexo-config('algolia_search.enable'))
@import './localsearch.styl' if (hexo-config('local_search.enable'))
@import './common.styl';
@import './algolia.styl' if (hexo-config('algolia_search.enable'));
@import './localsearch.styl' if (hexo-config('local_search.enable'));
.search-input
input
width: 100%
.search-results
max-height: calc(80vh - 6rem)
b
border-bottom: 1px dashed red
color: red
transition: color .2s
& > ul
margin: 0
padding-left: 1.4rem
li
&:not(:last-child)
margin-bottom: 1rem
&::after
content: ''
display: block
border-bottom: 1px dashed #ccc
padding-bottom: .5rem
width: 100%
&-title
clearAStyle()
font-weight: $font-weight-bold
color: #222
&:hover
color: $blue-light
b
color: $blue-light
&-content
overflow: hidden
width: 100%
max-height: 5rem
color: #666
.search-input {
input {
width: 100%;
}
}
.search-results {
max-height: calc(80vh - 6rem);
b {
border-bottom: 1px dashed red;
color: red;
transition-property: color;
transition-ease();
}
& > ul {
margin: 0;
padding-left: 1.4rem;
li {
&:not(:last-child) {
margin-bottom: 1rem;
&::after {
content: '';
display: block;
border-bottom: 1px dashed #ccc;
padding-bottom: .5rem;
width: 100%;
}
}
}
}
&-title {
font-weight: $font-weight-bold;
color: #222;
&:hover {
color: $blue-light;
b {
color: $blue-light;
}
}
}
&-content {
overflow: hidden;
width: 100%;
max-height: 5rem;
color: #666;
}
}
#back-top
position: fixed
right: 0
bottom: 5vh
transition: transform .5s
transform: translateX(100%)
.back2top {
position: fixed;
right: 0;
bottom: 5vh;
transition-property: transform;
transform: translateX(100%);
cursor: pointer;
transition-ease();
&.show
transform: translateX(-100%)
&.show {
transform: translateX(-100%);
}
&.hide
transform: translateX(100%)
&.hide {
transform: translateX(100%);
}
$back-to-top-rotate = convert(hexo-config('back2top.icon.rotate') || '0')
$back-to-top-color = convert(hexo-config('back2top.icon.color') || '#666')
$back-to-top-hover-color = convert(hexo-config('back2top.icon.hover_color') || '#999')
&-icon {
font-size: 1.5rem;
color: convert(hexo-config('back2top.icon.color') || '#666');
transition-property: color;
transform: rotate(convert(hexo-config('back2top.icon.rotate') || '0'));
transition-ease();
.back-top-inner
i
font-size: 1.5rem
color: $back-to-top-color
transition: color .2s
transform: rotate($back-to-top-rotate)
&:hover {
color: convert(hexo-config('back2top.icon.hover_color') || '#999');
}
}
&:hover
color: $back-to-top-hover-color
cursor: pointer
&[data-popover][data-popover-pos='up']:hover::before
transform: translate(-50%, -125%)
&[data-popover][data-popover-pos='up']:hover::before {
transform: translate(-50%, -125%);
}
}
.comments
margin: 1.5rem 0 0
.comments {
margin: 1.5rem 0 0;
width: $content-width;
a
clearAStyle()
if (hexo-config('sidebar.position') == 'left') {
float: right;
} else if (hexo-config('sidebar.position') == 'right') {
float: left;
}
&-inner {
layout-card();
}
}
// Disqus
#disqus_thread {
width: 100%;
}
// Gitalk
#gitalk-container
width: 100%
#gitalk-container {
width: 100%;
.gt-meta
margin-top: 0
padding-top: 0
.gt-meta {
margin-top: 0;
padding-top: 0;
}
}
// Livere
#lv-container
width: 100%
// Disqus
#disqus_thread
width: 100%
#lv-container {
width: 100%;
}
.post-copyright
position: relative
margin: 1.2rem 0
border: 1px solid #e6e6e6
border-radius: 2px
padding: .8rem 1rem
width: 100%
transition: box-shadow .2s
&:hover
box-shadow: 0 0 4px 4px #f5f5f5
.copyright-name
margin-right: .5rem
font-weight: $font-weight-bold
white-space: nowrap
.copyright-value
word-break: break-all
color: $font-color
// @import './copyright.styl' if (hexo-config('footer.copyright.enable'))
// @import './reward.styl' if (hexo-config('reward.enable'))
// @import './back2top.styl' if (hexo-config('back2top.enable'))
@import './back2top.styl' if (hexo-config('back2top.enable'));
// @import './external-link.styl' if (hexo-config('external_link.icon.enable'))
// @import './fancybox.styl' if (hexo-config('fancybox'))
// @import './lazyload.styl' if (hexo-config('lazyload.enable'))
// @import './loading-bar.styl'
// @import './recent-posts.styl'
// @import './comments.styl'
@import './comments.styl';
// @import './copy.styl'
// @import './analytics/index.styl'
// @import './search/index.styl'
// @import './tag-plugin/index.styl'
@import './loading-bar.styl';
@import './sticky-top.styl';
@import './post-timeline.styl';
@import './pagination.styl'
@import './pagination.styl';
@import './reward.styl';
.loading-bar
position: fixed
top: 0
left: 0
z-index: 99999
opacity: 0
transition: opacity .4s
.loading-bar {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
opacity: 0;
transition-property: opacity;
transition-ease();
.progress
position: fixed
top: 0
left: 0
width: 100%
height: 2px
background: #77b6ff
box-shadow: 0 0 10px rgba(119, 182, 255, .7)
transform: translateX(-100%)
.progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: $loading-bar-bg-color;
box-shadow: 0 0 10px $loading-bar-shadow-color;
transform: translateX(-100%);
}
&.loading
opacity: 1
transition: none
&.loading {
opacity: 1;
transition: none;
.progress
transition: transform .4s ease
will-change: transform
.progress {
transition-property: transform;
transition-ease();
will-change: transform;
}
}
}
.reward {
text-align: center;
&-button {
display: inline-block;
margin: 1rem 0 1.5rem;
border-radius: 10px;
padding: .2rem 1rem;
color: $white;
background-color: $reward-btn-color;
transition-property: background-color;
cursor: pointer;
transition-ease();
&:hover {
background-color: $reward-btn-hover-color;
}
}
&-qr {
display: none;
&-alipay,
&-wechat {
display: inline-block;
margin: 0 2rem;
&__img {
width: 200px;
height: 200px;
}
&-text {
margin: .5rem 0;
}
}
&-alipay {
&-text {
color: $reward-alipay-color;
}
}
&-wechat {
&-text {
color: $reward-wechat-color;
}
}
}
}
......@@ -4,6 +4,7 @@
.main {
margin: 2rem auto;
width: 100%;
}
.main-inner {
......@@ -17,67 +18,91 @@
width: convert(hexo-config('sidebar.width') || '$sidebar-width');
}
if (hexo-config('sidebar.position') == 'left') {
.content {
.content {
width: $content-width;
if (hexo-config('sidebar.position') == 'left') {
float: right;
}
} else if (hexo-config('sidebar.position') == 'right') {
.content {
} else if (hexo-config('sidebar.position') == 'right') {
float: left;
}
}
.content-inner {
border-radius: 5px;
padding: 1rem 2rem;
width: $content-width;
height: 100%;
background-color: $white;
.post-body {
if (hexo-config('heading_line')) {
h1,
h2 {
border-bottom: 1px solid $heading-line-color;
padding-bottom: .3em;
&-inner {
width: 100%;
height: 100%;
layout-card();
a {
&:not(.heading-link):not(.paginator-post-next__a) {
border-bottom: 1px solid $link-bottom-color;
transition-property: border-color;
transition-ease();
&:hover {
border-bottom-color: $link-bottom-hover-color;
}
}
}
}
.external-link {
color: $gray-dark;
img {
border: 1px solid $img-border-color;
border-radius: 3px;
padding: .2rem;
}
i {
margin: 0 .1rem 0 .15rem;
font-size: .9em;
.post-body {
if (hexo-config('heading_line')) {
h1,
h2 {
border-bottom: 1px solid $heading-line-color;
padding-bottom: .3em;
}
}
}
}
.table-container {
overflow: auto;
margin-bottom: 1rem;
.external-link {
color: $gray-dark;
table {
margin: 0;
i {
margin: 0 .1rem 0 .15rem;
font-size: .9em;
}
}
.table-container {
overflow: auto;
margin-bottom: 1rem;
}
}
.heading-link {
color: $heading-color;
&::after {
content: $icon-heading-link;
margin-left: .3em;
color: $heading-logo-color;
opacity: 0;
@extend $font-awesome;
transition-property: opacity;
transition-ease();
.table-plugin {
& tbody tr {
&:nth-of-type(odd) {
background-color: $table-row-odd-bg-color;
}
&:hover {
background-color: $table-row-hover-bg-color;
}
}
}
&:hover {
.heading-link {
color: $heading-color;
&::after {
opacity: 1;
content: $icon-heading-link;
margin-left: .3em;
color: $heading-logo-color;
opacity: 0;
@extend $font-awesome;
transition-property: opacity;
transition-ease();
}
&:hover {
&::after {
opacity: 1;
}
}
}
}
......
......@@ -38,7 +38,7 @@ h6 {
for size in 1 .. 6 {
h{size} {
font-size: $font-size-headings[size - 1]
font-size: $font-size-headings[size - 1];
}
}
......@@ -107,20 +107,9 @@ dd {
table {
border-spacing: 0;
border-collapse: collapse;
margin: 0 0 1rem;
width: 100%;
}
table > tbody > tr {
&:nth-of-type(odd) {
background-color: $table-row-odd-bg-color;
}
&:hover {
background-color: $table-row-hover-bg-color;
}
}
th,
td {
border: 1px solid $table-border-color;
......
......@@ -25,9 +25,10 @@ popover-bg-color = alpha(#000, .7);
background-color: popover-bg-color;
opacity: 0;
text-shadow: none;
transition: opacity .2s, transform .2s;
transition-property: opacity, transform;
transform: translate(-50%, -70%);
pointer-events: none;
transition-ease();
}
[data-popover]::before {
......@@ -61,34 +62,34 @@ popover-bg-color = alpha(#000, .7);
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
&-success {
color: $alert-success;
color: $alert-success-color;
& ~ i {
color: $alert-success;
color: $alert-success-color;
}
}
&-info {
color: $alert-info;
color: $alert-info-color;
& ~ i {
color: $alert-info;
color: $alert-info-color;
}
}
&-warning {
color: $alert-warning;
color: $alert-warning-color;
& ~ i {
color: $alert-warning;
color: $alert-warning-color;
}
}
&-error {
color: $alert-error;
color: $alert-error-color;
& ~ i {
color: $alert-error;
color: $alert-error-color;
}
}
......@@ -102,8 +103,9 @@ popover-bg-color = alpha(#000, .7);
.anime-close {
&::before,
&::after {
transition: transform .25s;
transition-property: transform;
transform: rotate(-45deg);
transition-ease();
}
&::after {
......
......@@ -87,3 +87,9 @@ disable-user-select() {
-ms-user-select: none;
user-select: none;
}
layout-card() {
border-radius: 5px;
padding: 1rem 2rem;
background-color: $white;
}
......@@ -35,11 +35,11 @@ $md-width = 992px - 0.02px
$lg-width = 1200px - 0.02px
// Width
$sidebar-width = 260px
$side-main-gap = 20px
$content-width = $md-width
$main-aside-gap = 40px
$main-width = $sidebar-width + $content-width + $side-main-gap
$sidebar-width = 260px
$side-main-gap = 20px
$content-width = $md-width
$main-aside-gap = 40px
$main-width = $sidebar-width + $content-width + $side-main-gap
// -------------------------------------------
// Font, line-height
......@@ -87,21 +87,17 @@ $body-bg-color = darken(#f4f5f5, 5%)
// Link ( <a> )
$link-color = #058ed2
$link-hover-color = #11a3eb
$link-bottom-color = #d9ecfb
$link-bottom-color = transparent
$link-bottom-hover-color = #7ebef1
// Heading ( <h1~6> )
$heading-color = #222
$heading-logo-color = $blue-light
$heading-logo-color = $orange-dark
$heading-line-color = #eaecef
// Horizon line ( <hr> )
$hr-color = #b8dcfd
// Unordered list ( <ul> )
$ul-list-color = $blue-light
$ul-list-hover-color = $orange-dark
// Blockquote ( <blockquote> )
$quote-bg-color = #f6f6f6
$quote-left-color = #cbcbcb
......@@ -117,8 +113,6 @@ $img-border-color = #dadefb
// -------------------------------------------
// Header
$header-nav-bg-color = alpha(#2d2e30, .7)
$header-nav-text-color = $white-light
$header-nav-text-hover-color = $blue-light
$header-nav-link-color = $white-light
$header-nav-link-hover-color = $blue-light
......@@ -155,21 +149,22 @@ $sidebar-state-category-color = #5c5c5c
$sidebar-state-tag-color = #ff8956
// Post
$post-title-color = #444
$post-create-color = #666
$post-update-color = $blue-light
$post-word-count-color = #666
$post-reading-time-color = $blue-light
$post-reading-count-color = $orange-dark
$post-end-color = #b6b6b6
$post-end-line-color = #e4e4e4
$post-tags-icon-color = $blue-light
// Post list (In the archive/tag/category page.)
$post-list-line-color = #c8edff
$post-list-dot-color = #6ec5ff
$post-list-dot-hover-color = $orange-dark
$post-list-time-color = #99a9bf
$post-title-color = #444
$post-create-color = #666
$post-update-color = $blue-light
$post-word-count-color = #666
$post-reading-time-color = $blue-light
$post-reading-count-color = $orange-dark
$post-end-color = #b6b6b6
$post-end-line-color = #e4e4e4
$post-tags-icon-color = $blue-light
$post-copyright-border-color = #e6e6e6
$post-copyright-shadow-color = #f5f5f5
// Post timeline (In the archive/tag/category page.)
$post-timeline-line-color = #c8edff
$post-timeline-dot-color = #6ec5ff
$post-timeline-dot-hover-color = $orange-dark
// Pagination
$pagination-item-color = $blue-light
......@@ -188,11 +183,14 @@ $reward-btn-hover-color = #e45c5c
$reward-alipay-color = #1caceb
$reward-wechat-color = #3cb034
$loading-bar-bg-color = #77b6ff
$loading-bar-shadow-color = alpha(#77b6ff, .7)
// Notification
$alert-success = #52c41a
$alert-info = #1890ff
$alert-warning = #faad14
$alert-error = #f5222d
$alert-info-color = #1890ff
$alert-warning-color = #faad14
$alert-error-color = #f5222d
// -------------------------------------------
// Icon font
......@@ -206,16 +204,10 @@ $font-awesome
$icon-heading-link = '\f0c1'
$icon-ul-list-dot = '\f111'
$icon-ul-list-dot-empty = '\f10c'
$icon-ul-list-square = '\f0c8'
$icon-hr = '\f0fb'
$note-default = '\f0a9'
$note-success = '\f058'
$note-warning = '\f06a'
$note-danger = '\f056'
$icon-note-default = '\f0a9'
$icon-note-success = '\f058'
$icon-note-warning = '\f06a'
$icon-note-danger = '\f056'
// -------------------------------------------
// Table
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册