From cf249988de2adc21b687d6a4b63521fc06ccaa28 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 21 Feb 2020 22:11:03 +0800 Subject: [PATCH 01/13] Dark Mode support --- layout/_macro/post.swig | 4 +--- source/css/_colors.styl | 21 +++++++++++++++++++ .../components/post/post-copyright.styl | 2 +- .../_common/components/post/post-header.styl | 4 ++-- .../css/_common/outline/header/site-nav.styl | 2 +- source/css/_common/scaffolding/base.styl | 6 +++--- source/css/_common/scaffolding/tags/tabs.styl | 2 +- .../css/{_mixins/base.styl => _mixins.styl} | 20 ++++++++++++++++++ source/css/_mixins/Gemini.styl | 1 - source/css/_mixins/Mist.styl | 0 source/css/_mixins/Muse.styl | 0 source/css/_mixins/Pisces.styl | 19 ----------------- source/css/_schemes/Gemini/index.styl | 4 ++-- source/css/_schemes/Mist/_posts-expand.styl | 4 ---- source/css/_schemes/Pisces/_layout.styl | 4 ++-- source/css/_schemes/Pisces/_sidebar.styl | 4 ++-- source/css/_variables/Gemini.styl | 3 ++- source/css/_variables/Mist.styl | 3 +++ source/css/_variables/Pisces.styl | 1 + source/css/_variables/base.styl | 12 +++++++++++ source/css/main.styl | 8 ++++--- 21 files changed, 79 insertions(+), 45 deletions(-) create mode 100644 source/css/_colors.styl rename source/css/{_mixins/base.styl => _mixins.styl} (79%) delete mode 100644 source/css/_mixins/Gemini.styl delete mode 100644 source/css/_mixins/Mist.styl delete mode 100644 source/css/_mixins/Muse.styl delete mode 100644 source/css/_mixins/Pisces.styl diff --git a/layout/_macro/post.swig b/layout/_macro/post.swig index 81ea112abd..424a6aa550 100644 --- a/layout/_macro/post.swig +++ b/layout/_macro/post.swig @@ -85,9 +85,7 @@ {{ __('post.in') }} {%- for cat in post.categories.toArray() %} - + {%- set cat_length = post.categories.length %} diff --git a/source/css/_colors.styl b/source/css/_colors.styl new file mode 100644 index 0000000000..8de6c32491 --- /dev/null +++ b/source/css/_colors.styl @@ -0,0 +1,21 @@ +:root { + --body-bg-color: $body-bg-color; + --text-color: $text-color; + --post-block-bg-color: $post-block-bg-color; + --link-color: $link-color; + --post-copyright-bg-color: $post-copyright-bg-color; + --post-title-link-color: $post-title-link-color; +} + +if (hexo-config('darkmode')) { + @media (prefers-color-scheme: dark) { + :root { + --body-bg-color: $body-bg-color-dark; + --text-color: $text-color-dark; + --post-block-bg-color: $post-block-bg-color-dark; + --link-color: $link-color-dark; + --post-copyright-bg-color: $post-copyright-bg-color-dark; + --post-title-link-color: $post-title-link-color-dark; + } + } +} diff --git a/source/css/_common/components/post/post-copyright.styl b/source/css/_common/components/post/post-copyright.styl index e7044d8894..4e3cf9a81b 100644 --- a/source/css/_common/components/post/post-copyright.styl +++ b/source/css/_common/components/post/post-copyright.styl @@ -1,5 +1,5 @@ .post-copyright { - background: $whitesmoke; + background: var(--post-copyright-bg-color); border-left: 3px solid $red; list-style: none; margin: 2em 0 0; diff --git a/source/css/_common/components/post/post-header.styl b/source/css/_common/components/post/post-header.styl index a981a7d87f..5fadad1714 100644 --- a/source/css/_common/components/post/post-header.styl +++ b/source/css/_common/components/post/post-header.styl @@ -31,13 +31,13 @@ .posts-expand .post-title-link { border-bottom: none; - color: $black-light; + color: var(--link-color); display: inline-block; position: relative; vertical-align: top; &::before { - background: black; + background: var(--post-title-link-color); bottom: 0; content: ''; height: 2px; diff --git a/source/css/_common/outline/header/site-nav.styl b/source/css/_common/outline/header/site-nav.styl index 8b88781eb1..7e33265ee2 100644 --- a/source/css/_common/outline/header/site-nav.styl +++ b/source/css/_common/outline/header/site-nav.styl @@ -12,7 +12,7 @@ width: 22px; .toggle-line { - background: $text-color; + background: var(--text-color); border-radius: 1px; } } diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl index a3a49f20ba..f8044699fa 100644 --- a/source/css/_common/scaffolding/base.styl +++ b/source/css/_common/scaffolding/base.styl @@ -8,8 +8,8 @@ html, body { } body { - background: $body-bg-color; - color: $text-color; + background: var(--body-bg-color); + color: var(--text-color); font-family: $font-family-base; font-size: $font-size-base; line-height: $line-height-base; @@ -40,7 +40,7 @@ p { a, span.exturl { border-bottom: 1px solid $link-decoration-color; - color: $link-color; + color: var(--link-color); outline: 0; text-decoration: none; word-wrap(); diff --git a/source/css/_common/scaffolding/tags/tabs.styl b/source/css/_common/scaffolding/tags/tabs.styl index 8f2c6149ec..2c65b65c15 100644 --- a/source/css/_common/scaffolding/tags/tabs.styl +++ b/source/css/_common/scaffolding/tags/tabs.styl @@ -76,7 +76,7 @@ } a { - color: $link-color; + color: var(--link-color); cursor: default; } } diff --git a/source/css/_mixins/base.styl b/source/css/_mixins.styl similarity index 79% rename from source/css/_mixins/base.styl rename to source/css/_mixins.styl index a719518a97..6ae7a6ada0 100644 --- a/source/css/_mixins/base.styl +++ b/source/css/_mixins.styl @@ -91,3 +91,23 @@ disable-user-select() { -webkit-user-select: none; user-select: none; } + +sidebar-inline-links-item() { + margin: 5px 0 0; + + if (!hexo-config('social_icons.icons_only')) { + width: 50%; + } + + a, span.exturl { + box-sizing: border-box; + display: inline-block; + margin-bottom: 0; + margin-right: 0; + max-width: 216px; + overflow: hidden; + padding: 0 5px; + text-overflow: ellipsis; + white-space: nowrap; + } +} diff --git a/source/css/_mixins/Gemini.styl b/source/css/_mixins/Gemini.styl deleted file mode 100644 index 08a3853253..0000000000 --- a/source/css/_mixins/Gemini.styl +++ /dev/null @@ -1 +0,0 @@ -@import 'Pisces.styl'; diff --git a/source/css/_mixins/Mist.styl b/source/css/_mixins/Mist.styl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/source/css/_mixins/Muse.styl b/source/css/_mixins/Muse.styl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/source/css/_mixins/Pisces.styl b/source/css/_mixins/Pisces.styl deleted file mode 100644 index 6572598254..0000000000 --- a/source/css/_mixins/Pisces.styl +++ /dev/null @@ -1,19 +0,0 @@ -sidebar-inline-links-item() { - margin: 5px 0 0; - - if (!hexo-config('social_icons.icons_only')) { - width: 50%; - } - - a, span.exturl { - box-sizing: border-box; - display: inline-block; - margin-bottom: 0; - margin-right: 0; - max-width: 216px; - overflow: hidden; - padding: 0 5px; - text-overflow: ellipsis; - white-space: nowrap; - } -} diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl index f12f5c018d..3480216524 100644 --- a/source/css/_schemes/Gemini/index.styl +++ b/source/css/_schemes/Gemini/index.styl @@ -35,7 +35,7 @@ $use-seo = hexo-config('seo'); // Post & Comments blocks. .post-block { - background: white; + background: var(--post-block-bg-color); border-radius: $border-radius-inner; box-shadow: $box-shadow-inner; padding: $content-desktop-padding; @@ -80,7 +80,7 @@ $use-seo = hexo-config('seo'); top: initial; } - background: white; + background: var(--post-block-bg-color); border-radius: $border-radius; border-top: initial; box-shadow: $box-shadow; diff --git a/source/css/_schemes/Mist/_posts-expand.styl b/source/css/_schemes/Mist/_posts-expand.styl index 391aae638b..7ac81f1128 100644 --- a/source/css/_schemes/Mist/_posts-expand.styl +++ b/source/css/_schemes/Mist/_posts-expand.styl @@ -29,10 +29,6 @@ text-align: center; } - .post-title-link::before { - background: $black-deep; - } - .post-body img { margin-left: 0; } diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl index a9d6249e91..c6625551ef 100644 --- a/source/css/_schemes/Pisces/_layout.styl +++ b/source/css/_schemes/Pisces/_layout.styl @@ -17,7 +17,7 @@ } .header-inner { - background: white; + background: var(--post-block-bg-color); border-radius: $border-radius-inner; box-shadow: $box-shadow-inner; overflow: hidden; @@ -51,7 +51,7 @@ } .content-wrap { - background: white; + background: var(--post-block-bg-color); border-radius: $border-radius-inner; box-shadow: $box-shadow-inner; box-sizing: border-box; diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index ed3d69b299..485a08a691 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -1,5 +1,5 @@ .sidebar { - background: $body-bg-color; + background: var(--body-bg-color); box-shadow: none; margin-top: 100%; position: static; @@ -27,7 +27,7 @@ border-radius: $border-radius; box-shadow: $box-shadow; box-sizing: border-box; - color: $text-color; + color: var(--text-color); width: $sidebar-desktop; if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) { diff --git a/source/css/_variables/Gemini.styl b/source/css/_variables/Gemini.styl index 7e824562e6..3de6b5f239 100644 --- a/source/css/_variables/Gemini.styl +++ b/source/css/_variables/Gemini.styl @@ -18,4 +18,5 @@ $border-radius = initial; // $border-radius = 3px; // Back to top -$b2t-sidebar-bg-color = $body-bg-color; +$b2t-sidebar-bg-color = $body-bg-color; +$b2t-sidebar-bg-color-dark = $body-bg-color-dark; diff --git a/source/css/_variables/Mist.styl b/source/css/_variables/Mist.styl index a8711e0bf8..c985f207d3 100644 --- a/source/css/_variables/Mist.styl +++ b/source/css/_variables/Mist.styl @@ -11,3 +11,6 @@ $posts-collapse-left = 0; $btn-default-color = $link-color; $btn-default-bg = transparent; + +$post-block-bg-color = white; +$post-block-bg-color-dark = #1d1d1d; diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 3c7744dcb7..7305058c51 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -77,3 +77,4 @@ $b2t-opacity = .6; $b2t-position-bottom = -100px; $b2t-position-bottom-on = 30px; $b2t-sidebar-bg-color = $body-bg-color; +$b2t-sidebar-bg-color-dark = $body-bg-color-dark; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 462fbaea5b..ef4660f384 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -28,9 +28,11 @@ $orange = #fc6423; // -------------------------------------------------- // Global text color on $text-color = $black-light; +$text-color-dark = #e1e1e1; // Global link color. $link-color = $black-light; +$link-color-dark = #e1e1e1; $link-hover-color = $black-deep; $link-decoration-color = $grey-dark; $link-decoration-hover-color = $black-deep; @@ -40,11 +42,21 @@ $border-color = $grey-light; // Background color for $body-bg-color = white; +$body-bg-color-dark = #121212; +$post-block-bg-color = white; +$post-block-bg-color-dark = #1d1d1d; // Selection $selection-bg = $blue-deep; $selection-color = white; +// Post title link +$post-title-link-color = $black-deep; +$post-title-link-color-dark = white; + +// Post copyright +$post-copyright-bg-color = $whitesmoke; +$post-copyright-bg-color-dark = #282828; // Typography // Font, line-height, and elements colors. diff --git a/source/css/main.styl b/source/css/main.styl index e159c53305..8084230c28 100644 --- a/source/css/main.styl +++ b/source/css/main.styl @@ -4,7 +4,6 @@ $scheme = hexo-config('scheme') ? hexo-config('scheme') : 'Muse'; $variables = base $scheme; -$mixins = base $scheme; // Variables Layer @@ -16,11 +15,14 @@ for $inject_variable in hexo-config('injects.variable') // Mixins Layer // -------------------------------------------------- -for $mixin in $mixins - @import "_mixins/" + $mixin; +@import "_mixins.styl"; for $inject_mixin in hexo-config('injects.mixin') @import $inject_mixin; +// Dark mode colors +// -------------------------------------------------- +@import "_colors.styl"; + // Common Layer // -------------------------------------------------- From ca0a2e213fee3eee08ed5d80efe38fa3cbe1bd8f Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 21 Feb 2020 23:06:43 +0800 Subject: [PATCH 02/13] Update --- source/css/_colors.styl | 8 ++++++-- .../_common/components/post/post-followme.styl | 2 +- source/css/_common/scaffolding/buttons.styl | 4 ++-- .../scaffolding/highlight/highlight.styl | 2 +- source/css/_common/scaffolding/tables.styl | 14 +++++++------- source/css/_schemes/Gemini/index.styl | 6 +++--- source/css/_schemes/Pisces/_layout.styl | 4 ++-- source/css/_variables/Mist.styl | 3 --- source/css/_variables/base.styl | 17 ++++------------- 9 files changed, 26 insertions(+), 34 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index 8de6c32491..cdd9d85c31 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -1,10 +1,12 @@ :root { --body-bg-color: $body-bg-color; --text-color: $text-color; - --post-block-bg-color: $post-block-bg-color; + --content-bg-color: $content-bg-color; --link-color: $link-color; --post-copyright-bg-color: $post-copyright-bg-color; --post-title-link-color: $post-title-link-color; + --table-row-odd-bg-color: $table-row-odd-bg-color; + --table-row-hover-bg-color: $table-row-hover-bg-color; } if (hexo-config('darkmode')) { @@ -12,10 +14,12 @@ if (hexo-config('darkmode')) { :root { --body-bg-color: $body-bg-color-dark; --text-color: $text-color-dark; - --post-block-bg-color: $post-block-bg-color-dark; + --content-bg-color: $content-bg-color-dark; --link-color: $link-color-dark; --post-copyright-bg-color: $post-copyright-bg-color-dark; --post-title-link-color: $post-title-link-color-dark; + --table-row-odd-bg-color: $table-row-odd-bg-color-dark; + --table-row-hover-bg-color: $table-row-hover-bg-color-dark; } } } diff --git a/source/css/_common/components/post/post-followme.styl b/source/css/_common/components/post/post-followme.styl index 205f4341a5..ce62676866 100644 --- a/source/css/_common/components/post/post-followme.styl +++ b/source/css/_common/components/post/post-followme.styl @@ -1,6 +1,6 @@ .followme { align-items: center; - background: $whitesmoke; + background: var(--post-copyright-bg-color); border-left: 3px solid $red; color: $grey; display: flex; diff --git a/source/css/_common/scaffolding/buttons.styl b/source/css/_common/scaffolding/buttons.styl index 9dfced1514..51b5458a35 100644 --- a/source/css/_common/scaffolding/buttons.styl +++ b/source/css/_common/scaffolding/buttons.styl @@ -1,10 +1,10 @@ .btn { background: $btn-default-bg; - border: $btn-default-border-width solid $btn-default-border-color; + border: 2px solid $btn-default-border-color; border-radius: $btn-default-radius; color: $btn-default-color; display: inline-block; - font-size: $btn-default-font-size; + font-size: $font-size-small; line-height: 2; padding: 0 20px; text-decoration: none; diff --git a/source/css/_common/scaffolding/highlight/highlight.styl b/source/css/_common/scaffolding/highlight/highlight.styl index 516ce5df01..7bd66d44f4 100644 --- a/source/css/_common/scaffolding/highlight/highlight.styl +++ b/source/css/_common/scaffolding/highlight/highlight.styl @@ -20,7 +20,7 @@ pre, code { code { background: $code-background; - border-radius: $code-border-radius; + border-radius: 3px; color: $code-foreground; padding: 2px 4px; word-wrap(); diff --git a/source/css/_common/scaffolding/tables.styl b/source/css/_common/scaffolding/tables.styl index 0890fd238e..be7628f6f2 100644 --- a/source/css/_common/scaffolding/tables.styl +++ b/source/css/_common/scaffolding/tables.styl @@ -7,24 +7,24 @@ table { border-spacing: 0; font-size: $table-font-size; margin: 0 0 20px 0; - width: $table-width; + width: 100%; } tbody tr { &:nth-of-type(odd) { - background: $table-row-odd-bg-color; + background: var(--table-row-odd-bg-color); } &:hover { - background: $table-row-hover-bg-color; + background: var(--table-row-hover-bg-color); } } caption, th, td { font-weight: normal; - padding: $table-cell-padding; - text-align: $table-content-alignment; - vertical-align: $table-content-vertical; + padding: 8px; + text-align: left; + vertical-align: middle; } th, td { @@ -33,7 +33,7 @@ th, td { } th { - font-weight: $table-th-font-weight; + font-weight: 700; padding-bottom: 10px; } diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl index 3480216524..8f89b2639f 100644 --- a/source/css/_schemes/Gemini/index.styl +++ b/source/css/_schemes/Gemini/index.styl @@ -35,7 +35,7 @@ $use-seo = hexo-config('seo'); // Post & Comments blocks. .post-block { - background: var(--post-block-bg-color); + background: var(--content-bg-color); border-radius: $border-radius-inner; box-shadow: $box-shadow-inner; padding: $content-desktop-padding; @@ -51,7 +51,7 @@ $use-seo = hexo-config('seo'); // Comments blocks. .comments { - background: white; + background: var(--content-bg-color); border-radius: $border-radius; box-shadow: $box-shadow; margin: auto; @@ -80,7 +80,7 @@ $use-seo = hexo-config('seo'); top: initial; } - background: var(--post-block-bg-color); + background: var(--content-bg-color); border-radius: $border-radius; border-top: initial; box-shadow: $box-shadow; diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl index c6625551ef..519262c47a 100644 --- a/source/css/_schemes/Pisces/_layout.styl +++ b/source/css/_schemes/Pisces/_layout.styl @@ -17,7 +17,7 @@ } .header-inner { - background: var(--post-block-bg-color); + background: var(--content-bg-color); border-radius: $border-radius-inner; box-shadow: $box-shadow-inner; overflow: hidden; @@ -51,7 +51,7 @@ } .content-wrap { - background: var(--post-block-bg-color); + background: var(--content-bg-color); border-radius: $border-radius-inner; box-shadow: $box-shadow-inner; box-sizing: border-box; diff --git a/source/css/_variables/Mist.styl b/source/css/_variables/Mist.styl index c985f207d3..a8711e0bf8 100644 --- a/source/css/_variables/Mist.styl +++ b/source/css/_variables/Mist.styl @@ -11,6 +11,3 @@ $posts-collapse-left = 0; $btn-default-color = $link-color; $btn-default-bg = transparent; - -$post-block-bg-color = white; -$post-block-bg-color-dark = #1d1d1d; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index ef4660f384..8d95a2eec0 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -43,8 +43,8 @@ $border-color = $grey-light; // Background color for $body-bg-color = white; $body-bg-color-dark = #121212; -$post-block-bg-color = white; -$post-block-bg-color-dark = #1d1d1d; +$content-bg-color = white; +$content-bg-color-dark = #1d1d1d; // Selection $selection-bg = $blue-deep; @@ -128,36 +128,27 @@ $zindex-5 = 1500; // Table // -------------------------------------------------- -$table-width = 100%; $table-border-color = $gray-lighter; $table-font-size = $font-size-small; -$table-content-alignment = left; -$table-content-vertical = middle; -$table-th-font-weight = 700; -$table-cell-padding = 8px; -$table-cell-border-right-color = $gainsboro; $table-cell-border-bottom-color = $gray-lighter; $table-row-odd-bg-color = #f9f9f9; +$table-row-odd-bg-color-dark = #282828; $table-row-hover-bg-color = $whitesmoke; +$table-row-hover-bg-color-dark = #363636; // Code & Code Blocks // -------------------------------------------------- $code-font-family = $font-family-monospace; -$code-border-radius = 3px; $code-foreground = $black-light; $code-background = $gainsboro; // Buttons // -------------------------------------------------- -$btn-font-weight = normal; - $btn-default-radius = 0; $btn-default-bg = $black-deep; $btn-default-color = white; -$btn-default-font-size = $font-size-small; -$btn-default-border-width = 2px; $btn-default-border-color = $black-deep; $btn-default-hover-bg = white; $btn-default-hover-color = $black-deep; From 36d210aafe96bfbc78232fd5dde49a86e877324e Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 21 Feb 2020 23:50:26 +0800 Subject: [PATCH 03/13] Update --- source/css/_colors.styl | 19 +++++++++++--- .../components/post/post-copyright.styl | 2 +- .../components/post/post-followme.styl | 2 +- .../components/third-party/search.styl | 2 +- source/css/_common/outline/header/menu.styl | 4 +++ .../outline/sidebar/sidebar-author.styl | 7 +++-- .../_common/outline/sidebar/site-state.styl | 3 +-- source/css/_schemes/Mist/_menu.styl | 4 --- source/css/_schemes/Pisces/_menu.styl | 26 ++++++++----------- source/css/_schemes/Pisces/_sidebar.styl | 8 +++--- source/css/_variables/Mist.styl | 2 ++ source/css/_variables/Pisces.styl | 4 +-- source/css/_variables/base.styl | 13 ++++------ 13 files changed, 49 insertions(+), 47 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index cdd9d85c31..08dae8610d 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -1,25 +1,36 @@ :root { --body-bg-color: $body-bg-color; - --text-color: $text-color; --content-bg-color: $content-bg-color; + --card-bg-color: $card-bg-color; + --text-color: $text-color; --link-color: $link-color; - --post-copyright-bg-color: $post-copyright-bg-color; + --sidebar-link-hover-color: $black-deep; --post-title-link-color: $post-title-link-color; --table-row-odd-bg-color: $table-row-odd-bg-color; --table-row-hover-bg-color: $table-row-hover-bg-color; + --menu-item-bg-color: $menu-item-bg-color; } if (hexo-config('darkmode')) { @media (prefers-color-scheme: dark) { :root { --body-bg-color: $body-bg-color-dark; - --text-color: $text-color-dark; --content-bg-color: $content-bg-color-dark; + --card-bg-color: $card-bg-color-dark; + --text-color: $text-color-dark; --link-color: $link-color-dark; - --post-copyright-bg-color: $post-copyright-bg-color-dark; + --sidebar-link-hover-color: white; --post-title-link-color: $post-title-link-color-dark; --table-row-odd-bg-color: $table-row-odd-bg-color-dark; --table-row-hover-bg-color: $table-row-hover-bg-color-dark; + --menu-item-bg-color: $menu-item-bg-color-dark; + } + img { + opacity: .75; + + &:hover { + opacity: 1; + } } } } diff --git a/source/css/_common/components/post/post-copyright.styl b/source/css/_common/components/post/post-copyright.styl index 4e3cf9a81b..c3569f4b49 100644 --- a/source/css/_common/components/post/post-copyright.styl +++ b/source/css/_common/components/post/post-copyright.styl @@ -1,5 +1,5 @@ .post-copyright { - background: var(--post-copyright-bg-color); + background: var(--card-bg-color); border-left: 3px solid $red; list-style: none; margin: 2em 0 0; diff --git a/source/css/_common/components/post/post-followme.styl b/source/css/_common/components/post/post-followme.styl index ce62676866..a597ff39e4 100644 --- a/source/css/_common/components/post/post-followme.styl +++ b/source/css/_common/components/post/post-followme.styl @@ -1,6 +1,6 @@ .followme { align-items: center; - background: var(--post-copyright-bg-color); + background: var(--card-bg-color); border-left: 3px solid $red; color: $grey; display: flex; diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl index 4bb1a518dd..5ad537cc08 100644 --- a/source/css/_common/components/third-party/search.styl +++ b/source/css/_common/components/third-party/search.styl @@ -11,7 +11,7 @@ } .search-popup { - background: white; + background: var(--card-bg-color); border-radius: 5px; display: none; height: 80%; diff --git a/source/css/_common/outline/header/menu.styl b/source/css/_common/outline/header/menu.styl index 5c8a697cc6..c394f6eb39 100644 --- a/source/css/_common/outline/header/menu.styl +++ b/source/css/_common/outline/header/menu.styl @@ -50,6 +50,10 @@ } } +.menu-item-active a { + background: var(--menu-item-bg-color); +} + .use-motion .menu-item { opacity: 0; } diff --git a/source/css/_common/outline/sidebar/sidebar-author.styl b/source/css/_common/outline/sidebar/sidebar-author.styl index d1eae73437..5b5254bd33 100644 --- a/source/css/_common/outline/sidebar/sidebar-author.styl +++ b/source/css/_common/outline/sidebar/sidebar-author.styl @@ -1,10 +1,9 @@ .site-author-image { border: $site-author-image-border-width solid $site-author-image-border-color; display: block; - height: $site-author-image-height; margin: 0 auto; max-width: $site-author-image-width; - padding: $site-author-image-padding; + padding: 2px; if (hexo-config('avatar.rounded')) { border-radius: 50%; @@ -25,12 +24,12 @@ if (hexo-config('avatar.rotated')) { color: $site-author-name-color; font-weight: $site-author-name-weight; margin: $site-author-name-margin; - text-align: $site-author-name-align; + text-align: center; } .site-description { color: $site-description-color; font-size: $site-description-font-size; margin-top: $site-description-margin-top; - text-align: $site-description-align; + text-align: center; } diff --git a/source/css/_common/outline/sidebar/site-state.styl b/source/css/_common/outline/sidebar/site-state.styl index 26c72035f7..247939cc06 100644 --- a/source/css/_common/outline/sidebar/site-state.styl +++ b/source/css/_common/outline/sidebar/site-state.styl @@ -4,7 +4,7 @@ line-height: 1.4; margin-top: 10px; overflow: hidden; - text-align: $site-state-align; + text-align: center; white-space: nowrap; } @@ -21,7 +21,6 @@ } .site-state-item-count { - color: $site-state-item-count-color; display: block; font-size: $site-state-item-count-font-size; font-weight: $font-weight-bold; diff --git a/source/css/_schemes/Mist/_menu.styl b/source/css/_schemes/Mist/_menu.styl index ca676a8e05..877c45b435 100644 --- a/source/css/_schemes/Mist/_menu.styl +++ b/source/css/_schemes/Mist/_menu.styl @@ -8,10 +8,6 @@ } } -.menu-item-active a { - background: $gray-lighter; -} - .menu { margin: 0; diff --git a/source/css/_schemes/Pisces/_menu.styl b/source/css/_schemes/Pisces/_menu.styl index dc6c9dd5df..fe01f69d94 100644 --- a/source/css/_schemes/Pisces/_menu.styl +++ b/source/css/_schemes/Pisces/_menu.styl @@ -22,21 +22,17 @@ } } -.menu-item-active a { - background: $whitesmoke; - - if (!hexo-config('menu_settings.badges')) { - &::after { - background: $grey; - border-radius: 50%; - content: ' '; - height: 6px; - margin-top: -3px; - position: absolute; - right: 15px; - top: 50%; - width: 6px; - } +if (!hexo-config('menu_settings.badges')) { + .menu-item-active a::after { + background: $grey; + border-radius: 50%; + content: ' '; + height: 6px; + margin-top: -3px; + position: absolute; + right: 15px; + top: 50%; + width: 6px; } } diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index 485a08a691..1580371e14 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -9,11 +9,11 @@ display: none; } a, span.exturl { - color: $black-light; + color: var(--link-color); &:hover { - border-bottom-color: $black-deep; - color: $black-deep; + border-bottom-color: var(--sidebar-link-hover-color); + color: var(--sidebar-link-hover-color); } } } @@ -23,7 +23,7 @@ } .sidebar-inner { - background: white; + background: var(--content-bg-color); border-radius: $border-radius; box-shadow: $box-shadow; box-sizing: border-box; diff --git a/source/css/_variables/Mist.styl b/source/css/_variables/Mist.styl index a8711e0bf8..de7edaea38 100644 --- a/source/css/_variables/Mist.styl +++ b/source/css/_variables/Mist.styl @@ -11,3 +11,5 @@ $posts-collapse-left = 0; $btn-default-color = $link-color; $btn-default-bg = transparent; + +$menu-item-bg-color = $gray-lighter; diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 7305058c51..79628acbda 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -37,14 +37,12 @@ $site-author-image-border-width = 1px; $site-author-image-border-color = $gainsboro; $site-author-name-margin = 0; -$site-author-name-color = $black-deep; -$site-author-name-align = center; +$site-author-name-color = var(--text-color); $site-author-name-weight = $font-weight-bold; $site-description-font-size = $font-size-smaller; $site-description-color = $grey-dark; $site-description-margin-top = 0; -$site-description-align = center; $site-state-item-count-font-size = $font-size-medium; $site-state-item-name-font-size = $font-size-smaller; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 8d95a2eec0..6eea33eefb 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -55,8 +55,11 @@ $post-title-link-color = $black-deep; $post-title-link-color-dark = white; // Post copyright -$post-copyright-bg-color = $whitesmoke; -$post-copyright-bg-color-dark = #282828; +$card-bg-color = $whitesmoke; +$card-bg-color-dark = #282828; + +$menu-item-bg-color = $whitesmoke; +$menu-item-bg-color-dark = $black-dim; // Typography // Font, line-height, and elements colors. @@ -222,25 +225,19 @@ $sidebar-nav-color = $black-light; $sidebar-nav-hover-color = $whitesmoke; $sidebar-highlight = $blue-bright; -$site-author-image-padding = 2px; $site-author-image-width = 96px; -$site-author-image-height = auto; $site-author-image-border-width = 2px; $site-author-image-border-color = $black-dim; $site-author-name-margin = 5px 0 0; $site-author-name-color = $whitesmoke; -$site-author-name-align = center; $site-author-name-weight = normal; $site-description-font-size = $font-size-medium; $site-description-color = $grey-dark; $site-description-margin-top = 5px; -$site-description-align = center; -$site-state-align = center; $site-state-item-count-font-size = $font-size-larger; -$site-state-item-count-color = inherit; $site-state-item-name-font-size = $font-size-small; $site-state-item-name-color = inherit; $site-state-item-border-color = $black-dim; From 0ca5d7cda7e90794b79bdb726a85bd6c558b7169 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 00:08:03 +0800 Subject: [PATCH 04/13] Update --- source/css/_colors.styl | 2 -- source/css/_common/components/post/post-collapse.styl | 2 +- source/css/_common/components/post/post-header.styl | 2 +- source/css/_schemes/Mist/_header.styl | 2 +- source/css/_variables/Mist.styl | 2 ++ source/css/_variables/base.styl | 6 +----- 6 files changed, 6 insertions(+), 10 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index 08dae8610d..22b34829b0 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -5,7 +5,6 @@ --text-color: $text-color; --link-color: $link-color; --sidebar-link-hover-color: $black-deep; - --post-title-link-color: $post-title-link-color; --table-row-odd-bg-color: $table-row-odd-bg-color; --table-row-hover-bg-color: $table-row-hover-bg-color; --menu-item-bg-color: $menu-item-bg-color; @@ -20,7 +19,6 @@ if (hexo-config('darkmode')) { --text-color: $text-color-dark; --link-color: $link-color-dark; --sidebar-link-hover-color: white; - --post-title-link-color: $post-title-link-color-dark; --table-row-odd-bg-color: $table-row-odd-bg-color-dark; --table-row-hover-bg-color: $table-row-hover-bg-color-dark; --menu-item-bg-color: $menu-item-bg-color-dark; diff --git a/source/css/_common/components/post/post-collapse.styl b/source/css/_common/components/post/post-collapse.styl index 04accabbe8..d05a644449 100644 --- a/source/css/_common/components/post/post-collapse.styl +++ b/source/css/_common/components/post/post-collapse.styl @@ -99,7 +99,7 @@ a, span.exturl { border-bottom: none; - color: $grey-dim; + color: var(--link-color); } } diff --git a/source/css/_common/components/post/post-header.styl b/source/css/_common/components/post/post-header.styl index 5fadad1714..c250cd233a 100644 --- a/source/css/_common/components/post/post-header.styl +++ b/source/css/_common/components/post/post-header.styl @@ -37,7 +37,7 @@ vertical-align: top; &::before { - background: var(--post-title-link-color); + background: var(--link-color); bottom: 0; content: ''; height: 2px; diff --git a/source/css/_schemes/Mist/_header.styl b/source/css/_schemes/Mist/_header.styl index 30003cedc7..8f83f3a8b8 100644 --- a/source/css/_schemes/Mist/_header.styl +++ b/source/css/_schemes/Mist/_header.styl @@ -1,7 +1,7 @@ // Header // -------------------------------------------------- .header { - background: $whitesmoke; + background: var(--content-bg-color); } .header-inner { diff --git a/source/css/_variables/Mist.styl b/source/css/_variables/Mist.styl index de7edaea38..1be467b356 100644 --- a/source/css/_variables/Mist.styl +++ b/source/css/_variables/Mist.styl @@ -3,6 +3,8 @@ @import "Muse.styl"; +$content-bg-color = $whitesmoke; + $brand-color = $black-deep; $brand-hover-color = $brand-color; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 6eea33eefb..8141d9fd4b 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -50,11 +50,7 @@ $content-bg-color-dark = #1d1d1d; $selection-bg = $blue-deep; $selection-color = white; -// Post title link -$post-title-link-color = $black-deep; -$post-title-link-color-dark = white; - -// Post copyright +// Dark mode color $card-bg-color = $whitesmoke; $card-bg-color-dark = #282828; From 71d26cb8f59ea4e94c415bb19e38810b6b780826 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 11:47:26 +0800 Subject: [PATCH 05/13] Update --- source/css/_colors.styl | 29 ++++++++++++------- .../components/back-to-top-sidebar.styl | 5 +--- .../css/_common/components/back-to-top.styl | 3 -- source/css/_common/components/components.styl | 10 ++++++- source/css/_schemes/Muse/_menu.styl | 1 + source/css/_schemes/Pisces/_sidebar.styl | 1 + source/css/_variables/Gemini.styl | 4 --- source/css/_variables/Pisces.styl | 2 -- source/css/_variables/base.styl | 1 - 9 files changed, 31 insertions(+), 25 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index 22b34829b0..67419b2bd4 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -1,4 +1,4 @@ -:root { +$color-scheme-light { --body-bg-color: $body-bg-color; --content-bg-color: $content-bg-color; --card-bg-color: $card-bg-color; @@ -10,19 +10,28 @@ --menu-item-bg-color: $menu-item-bg-color; } +$color-scheme-dark { + --body-bg-color: $body-bg-color-dark; + --content-bg-color: $content-bg-color-dark; + --card-bg-color: $card-bg-color-dark; + --text-color: $text-color-dark; + --link-color: $link-color-dark; + --sidebar-link-hover-color: white; + --table-row-odd-bg-color: $table-row-odd-bg-color-dark; + --table-row-hover-bg-color: $table-row-hover-bg-color-dark; + --menu-item-bg-color: $menu-item-bg-color-dark; +} + +:root { + @extend $color-scheme-light; +} + if (hexo-config('darkmode')) { @media (prefers-color-scheme: dark) { :root { - --body-bg-color: $body-bg-color-dark; - --content-bg-color: $content-bg-color-dark; - --card-bg-color: $card-bg-color-dark; - --text-color: $text-color-dark; - --link-color: $link-color-dark; - --sidebar-link-hover-color: white; - --table-row-odd-bg-color: $table-row-odd-bg-color-dark; - --table-row-hover-bg-color: $table-row-hover-bg-color-dark; - --menu-item-bg-color: $menu-item-bg-color-dark; + @extend $color-scheme-dark; } + img { opacity: .75; diff --git a/source/css/_common/components/back-to-top-sidebar.styl b/source/css/_common/components/back-to-top-sidebar.styl index f79b14ed26..4077ad93ae 100644 --- a/source/css/_common/components/back-to-top-sidebar.styl +++ b/source/css/_common/components/back-to-top-sidebar.styl @@ -1,10 +1,7 @@ .back-to-top { - background: $b2t-sidebar-bg-color; - font-size: $b2t-font-size; + background: transparent; margin: 20px - $sidebar-offset -10px -20px; opacity: 0; - text-align: center; - the-transition(); if (!hexo-config('back2top.scrollpercent')) { span { diff --git a/source/css/_common/components/back-to-top.styl b/source/css/_common/components/back-to-top.styl index e0f7b2e5cc..2c78424c28 100644 --- a/source/css/_common/components/back-to-top.styl +++ b/source/css/_common/components/back-to-top.styl @@ -4,15 +4,12 @@ box-sizing: border-box; color: $b2t-color; cursor: pointer; - font-size: $b2t-font-size; left: $b2t-position-right; opacity: $b2t-opacity; padding: 0 6px; position: fixed; - text-align: center; transition-property: bottom; z-index: $zindex-3; - the-transition(); if (hexo-config('back2top.scrollpercent')) { width: initial; diff --git a/source/css/_common/components/components.styl b/source/css/_common/components/components.styl index 598032979b..20b1488fd4 100644 --- a/source/css/_common/components/components.styl +++ b/source/css/_common/components/components.styl @@ -1,4 +1,12 @@ -@import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top') if (hexo-config('back2top.enable')); +if (hexo-config('back2top.enable')) { + .back-to-top { + font-size: $b2t-font-size; + text-align: center; + the-transition(); + } + + @import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top'); +} @import 'reading-progress' if (hexo-config('reading_progress.enable')); diff --git a/source/css/_schemes/Muse/_menu.styl b/source/css/_schemes/Muse/_menu.styl index b14457d132..cb72602ac3 100644 --- a/source/css/_schemes/Muse/_menu.styl +++ b/source/css/_schemes/Muse/_menu.styl @@ -21,6 +21,7 @@ } .menu-item-active a { + background: transparent; border-bottom: 1px solid $menu-link-hover-border !important; color: $black-deep; diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index 1580371e14..1e27466314 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -123,6 +123,7 @@ if (hexo-config('back2top.sidebar')) { // Only when back2top.sidebar is true, apply the following styles .back-to-top { + background: var(--body-bg-color); margin: 8px - $sidebar-offset -10px -18px; &.back-to-top-on { diff --git a/source/css/_variables/Gemini.styl b/source/css/_variables/Gemini.styl index 3de6b5f239..56cca83c99 100644 --- a/source/css/_variables/Gemini.styl +++ b/source/css/_variables/Gemini.styl @@ -16,7 +16,3 @@ $border-radius-inner = initial; $border-radius = initial; // $border-radius-inner = 0 0 3px 3px; // $border-radius = 3px; - -// Back to top -$b2t-sidebar-bg-color = $body-bg-color; -$b2t-sidebar-bg-color-dark = $body-bg-color-dark; diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 79628acbda..d9c26f6258 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -74,5 +74,3 @@ $btn-default-hover-bg = $black-deep; $b2t-opacity = .6; $b2t-position-bottom = -100px; $b2t-position-bottom-on = 30px; -$b2t-sidebar-bg-color = $body-bg-color; -$b2t-sidebar-bg-color-dark = $body-bg-color-dark; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 8141d9fd4b..2a5ea71e23 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -260,7 +260,6 @@ $b2t-position-right-mobile = 20px; $b2t-font-size = 12px; $b2t-color = white; $b2t-bg-color = $black-deep; -$b2t-sidebar-bg-color = $black-deep; // .post-expand .post-eof // In Muse scheme, margin above and below the post separator From ef4e8ba04a77ea02cece3a02029c26a8efe1217c Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 12:15:07 +0800 Subject: [PATCH 06/13] Update --- source/css/_colors.styl | 6 +++--- source/css/_common/components/post/post-nav.styl | 5 ----- source/css/_common/scaffolding/base.styl | 4 ++-- source/css/_schemes/Muse/_menu.styl | 1 - source/css/_schemes/Pisces/_sidebar.styl | 4 ++-- 5 files changed, 7 insertions(+), 13 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index 67419b2bd4..8f0dce9970 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -4,7 +4,7 @@ $color-scheme-light { --card-bg-color: $card-bg-color; --text-color: $text-color; --link-color: $link-color; - --sidebar-link-hover-color: $black-deep; + --link-hover-color: $link-hover-color; --table-row-odd-bg-color: $table-row-odd-bg-color; --table-row-hover-bg-color: $table-row-hover-bg-color; --menu-item-bg-color: $menu-item-bg-color; @@ -16,14 +16,14 @@ $color-scheme-dark { --card-bg-color: $card-bg-color-dark; --text-color: $text-color-dark; --link-color: $link-color-dark; - --sidebar-link-hover-color: white; + --link-hover-color: white; --table-row-odd-bg-color: $table-row-odd-bg-color-dark; --table-row-hover-bg-color: $table-row-hover-bg-color-dark; --menu-item-bg-color: $menu-item-bg-color-dark; } :root { - @extend $color-scheme-light; + @extend $color-scheme-dark; } if (hexo-config('darkmode')) { diff --git a/source/css/_common/components/post/post-nav.styl b/source/css/_common/components/post/post-nav.styl index bebafeca56..4e725580ae 100644 --- a/source/css/_common/components/post/post-nav.styl +++ b/source/css/_common/components/post/post-nav.styl @@ -16,11 +16,6 @@ line-height: 1.6; position: relative; - &:hover { - border-bottom: none; - color: $link-hover-color; - } - &:active { top: 2px; } diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl index f8044699fa..deef86e06b 100644 --- a/source/css/_common/scaffolding/base.styl +++ b/source/css/_common/scaffolding/base.styl @@ -46,8 +46,8 @@ a, span.exturl { word-wrap(); &:hover { - border-bottom-color: $link-decoration-hover-color; - color: $link-hover-color; + border-bottom-color: var(--link-hover-color); + color: var(--link-hover-color); } // For spanned external links. diff --git a/source/css/_schemes/Muse/_menu.styl b/source/css/_schemes/Muse/_menu.styl index cb72602ac3..c6ced3ad90 100644 --- a/source/css/_schemes/Muse/_menu.styl +++ b/source/css/_schemes/Muse/_menu.styl @@ -23,7 +23,6 @@ .menu-item-active a { background: transparent; border-bottom: 1px solid $menu-link-hover-border !important; - color: $black-deep; +mobile() { border-bottom: 1px dotted $gray-lighter !important; diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index 1e27466314..eab609920d 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -12,8 +12,8 @@ color: var(--link-color); &:hover { - border-bottom-color: var(--sidebar-link-hover-color); - color: var(--sidebar-link-hover-color); + border-bottom-color: var(--link-hover-color); + color: var(--link-hover-color); } } } From 7ae9da465eb2cba592d082275925d5dc7a127fe9 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 12:16:05 +0800 Subject: [PATCH 07/13] Update --- source/css/_colors.styl | 2 +- .../components/third-party/search.styl | 2 +- .../css/_common/outline/header/site-meta.styl | 1 - .../outline/sidebar/sidebar-blogroll.styl | 16 ------------ .../css/_common/outline/sidebar/sidebar.styl | 10 ------- source/css/_schemes/Mist/_header.styl | 1 - source/css/_schemes/Muse/_header.styl | 4 --- source/css/_schemes/Muse/_sidebar.styl | 26 +++++++++++++++++++ source/css/_schemes/Pisces/_header.styl | 1 - source/css/_schemes/Pisces/_sidebar.styl | 11 +++----- source/css/_variables/base.styl | 1 - 11 files changed, 31 insertions(+), 44 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index 8f0dce9970..1cb667a9b6 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -23,7 +23,7 @@ $color-scheme-dark { } :root { - @extend $color-scheme-dark; + @extend $color-scheme-light; } if (hexo-config('darkmode')) { diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl index 5ad537cc08..7d2b755a79 100644 --- a/source/css/_common/components/third-party/search.styl +++ b/source/css/_common/components/third-party/search.styl @@ -49,7 +49,7 @@ .search-header { display: flex; - background: $whitesmoke; + background: $gainsboro; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 5px; diff --git a/source/css/_common/outline/header/site-meta.styl b/source/css/_common/outline/header/site-meta.styl index d39ac81157..bb04916204 100644 --- a/source/css/_common/outline/header/site-meta.styl +++ b/source/css/_common/outline/header/site-meta.styl @@ -8,7 +8,6 @@ } .brand { - background: $brand-bg; border-bottom: none; color: $brand-color; display: inline-block; diff --git a/source/css/_common/outline/sidebar/sidebar-blogroll.styl b/source/css/_common/outline/sidebar/sidebar-blogroll.styl index 54131f6a33..d6f8e94ebb 100644 --- a/source/css/_common/outline/sidebar/sidebar-blogroll.styl +++ b/source/css/_common/outline/sidebar/sidebar-blogroll.styl @@ -14,19 +14,3 @@ margin: 0; padding: 0; } - -.links-of-blogroll-item { - if (hexo-config('links_settings.layout') == 'inline') { - display: inline-block; - } - padding: 2px 10px; - - a, span.exturl { - box-sizing: border-box; - display: inline-block; - max-width: 280px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} diff --git a/source/css/_common/outline/sidebar/sidebar.styl b/source/css/_common/outline/sidebar/sidebar.styl index 059e687b54..cec715233b 100644 --- a/source/css/_common/outline/sidebar/sidebar.styl +++ b/source/css/_common/outline/sidebar/sidebar.styl @@ -7,16 +7,6 @@ position: fixed; top: 0; - a, span.exturl { - border-bottom-color: $black-light; - color: $grey-dark; - - &:hover { - border-bottom-color: $gainsboro; - color: $gainsboro; - } - } - +tablet-mobile() { if (!hexo-config('sidebar.onmobile')) { display: none; diff --git a/source/css/_schemes/Mist/_header.styl b/source/css/_schemes/Mist/_header.styl index 8f83f3a8b8..c9ab21ee55 100644 --- a/source/css/_schemes/Mist/_header.styl +++ b/source/css/_schemes/Mist/_header.styl @@ -20,7 +20,6 @@ line-height: normal; .brand { - background: none; padding: 2px 1px; +mobile() { diff --git a/source/css/_schemes/Muse/_header.styl b/source/css/_schemes/Muse/_header.styl index 96d8ad73af..b58adf1680 100644 --- a/source/css/_schemes/Muse/_header.styl +++ b/source/css/_schemes/Muse/_header.styl @@ -3,10 +3,6 @@ text-align: center; } - .brand { - background: none; - } - .site-title { color: $black-deep; margin: 10px auto 0; diff --git a/source/css/_schemes/Muse/_sidebar.styl b/source/css/_schemes/Muse/_sidebar.styl index 8ca2a54779..1d123abcbb 100644 --- a/source/css/_schemes/Muse/_sidebar.styl +++ b/source/css/_schemes/Muse/_sidebar.styl @@ -33,4 +33,30 @@ if (hexo-config('sidebar.position') == 'right') { width: $sidebar-desktop; z-index: $zindex-2; the-transition-ease-out(); + + a, span.exturl { + border-bottom-color: $black-light; + color: $grey-dark; + + &:hover { + border-bottom-color: $gainsboro; + color: $gainsboro; + } + } +} + +.links-of-blogroll-item { + if (hexo-config('links_settings.layout') == 'inline') { + display: inline-block; + } + padding: 2px 10px; + + a, span.exturl { + box-sizing: border-box; + display: inline-block; + max-width: 280px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } diff --git a/source/css/_schemes/Pisces/_header.styl b/source/css/_schemes/Pisces/_header.styl index 5c02574f9a..3e03dbfa76 100644 --- a/source/css/_schemes/Pisces/_header.styl +++ b/source/css/_schemes/Pisces/_header.styl @@ -12,7 +12,6 @@ } .brand { - background: none; padding: 0; &:hover { diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index eab609920d..a68437da83 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -8,14 +8,6 @@ +tablet-mobile() { display: none; } - a, span.exturl { - color: var(--link-color); - - &:hover { - border-bottom-color: var(--link-hover-color); - color: var(--link-hover-color); - } - } } .sidebar-toggle { @@ -109,6 +101,9 @@ } .links-of-blogroll-item { + if (hexo-config('links_settings.layout') == 'inline') { + display: inline-block; + } padding: 0; if (hexo-config('links_settings.layout') == 'inline') { diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 2a5ea71e23..447cb2b9b5 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -197,7 +197,6 @@ $head-bg = transparent; $site-meta-text-align = center; $brand-color = white; $brand-hover-color = white; -$brand-bg = $black-deep; $font-size-title = (hexo-config('font.enable') and hexo-config('font.title.size') is a 'unit') ? unit(hexo-config('font.title.size'), em) : $font-size-largest; $font-size-subtitle = $font-size-smaller; From 4cf1515b2b6696d95fc4765f83819cc47ab31bf2 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 12:59:09 +0800 Subject: [PATCH 08/13] Fix brand color --- source/css/_colors.styl | 6 +++++- source/css/_common/outline/header/site-meta.styl | 4 ++-- source/css/_schemes/Mist/_header.styl | 2 +- source/css/_schemes/Pisces/_header.styl | 4 ---- source/css/_variables/Mist.styl | 2 ++ source/css/_variables/base.styl | 2 ++ 6 files changed, 12 insertions(+), 8 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index 1cb667a9b6..8e586461a0 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -5,6 +5,8 @@ $color-scheme-light { --text-color: $text-color; --link-color: $link-color; --link-hover-color: $link-hover-color; + --brand-color: $brand-color; + --brand-hover-color: $brand-hover-color; --table-row-odd-bg-color: $table-row-odd-bg-color; --table-row-hover-bg-color: $table-row-hover-bg-color; --menu-item-bg-color: $menu-item-bg-color; @@ -17,13 +19,15 @@ $color-scheme-dark { --text-color: $text-color-dark; --link-color: $link-color-dark; --link-hover-color: white; + --brand-color: $brand-color-dark; + --brand-hover-color: $brand-hover-color-dark; --table-row-odd-bg-color: $table-row-odd-bg-color-dark; --table-row-hover-bg-color: $table-row-hover-bg-color-dark; --menu-item-bg-color: $menu-item-bg-color-dark; } :root { - @extend $color-scheme-light; + @extend $color-scheme-dark; } if (hexo-config('darkmode')) { diff --git a/source/css/_common/outline/header/site-meta.styl b/source/css/_common/outline/header/site-meta.styl index bb04916204..c1fad8f938 100644 --- a/source/css/_common/outline/header/site-meta.styl +++ b/source/css/_common/outline/header/site-meta.styl @@ -9,14 +9,14 @@ .brand { border-bottom: none; - color: $brand-color; + color: var(--brand-color); display: inline-block; line-height: $font-size-title; padding: 0 40px; position: relative; &:hover { - color: $brand-hover-color; + color: var(--brand-hover-color); } } diff --git a/source/css/_schemes/Mist/_header.styl b/source/css/_schemes/Mist/_header.styl index c9ab21ee55..874f61debc 100644 --- a/source/css/_schemes/Mist/_header.styl +++ b/source/css/_schemes/Mist/_header.styl @@ -43,7 +43,7 @@ } i { - background: $black-deep; + background: var(--brand-color); display: block; height: 2px; position: relative; diff --git a/source/css/_schemes/Pisces/_header.styl b/source/css/_schemes/Pisces/_header.styl index 3e03dbfa76..d5c4b5f613 100644 --- a/source/css/_schemes/Pisces/_header.styl +++ b/source/css/_schemes/Pisces/_header.styl @@ -13,10 +13,6 @@ .brand { padding: 0; - - &:hover { - color: white; - } } .site-subtitle { diff --git a/source/css/_variables/Mist.styl b/source/css/_variables/Mist.styl index 1be467b356..04cfaa1ea8 100644 --- a/source/css/_variables/Mist.styl +++ b/source/css/_variables/Mist.styl @@ -7,6 +7,8 @@ $content-bg-color = $whitesmoke; $brand-color = $black-deep; $brand-hover-color = $brand-color; +$brand-color-dark = white; +$brand-hover-color-dark = $brand-color-dark; $site-meta-text-align = left; $posts-collapse-left = 0; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 447cb2b9b5..830caff607 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -197,6 +197,8 @@ $head-bg = transparent; $site-meta-text-align = center; $brand-color = white; $brand-hover-color = white; +$brand-color-dark = white; +$brand-hover-color-dark = white; $font-size-title = (hexo-config('font.enable') and hexo-config('font.title.size') is a 'unit') ? unit(hexo-config('font.title.size'), em) : $font-size-largest; $font-size-subtitle = $font-size-smaller; From 7bbdb5699e4e3662f757be4c9cd421c70497fe1c Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 13:10:33 +0800 Subject: [PATCH 09/13] Update --- source/css/_colors.styl | 2 +- source/css/_common/components/pages/schedule.styl | 2 +- source/css/_common/components/post/post-header.styl | 2 +- source/css/_common/components/third-party/search.styl | 1 - source/css/_common/outline/header/menu.styl | 2 +- .../css/_common/outline/sidebar/sidebar-blogroll.styl | 2 +- source/css/_common/outline/sidebar/site-state.styl | 2 +- source/css/_common/scaffolding/base.styl | 5 ++--- .../css/_common/scaffolding/highlight/copy-code.styl | 2 +- source/css/_schemes/Mist/_header.styl | 4 ---- source/css/_schemes/Pisces/_sub-menu.styl | 7 +++---- source/css/_variables/Gemini.styl | 4 ++-- source/css/_variables/Pisces.styl | 2 +- source/css/_variables/base.styl | 10 +--------- 14 files changed, 16 insertions(+), 31 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index 8e586461a0..950ba7ca8c 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -18,7 +18,7 @@ $color-scheme-dark { --card-bg-color: $card-bg-color-dark; --text-color: $text-color-dark; --link-color: $link-color-dark; - --link-hover-color: white; + --link-hover-color: $link-hover-color-dark; --brand-color: $brand-color-dark; --brand-hover-color: $brand-hover-color-dark; --table-row-odd-bg-color: $table-row-odd-bg-color-dark; diff --git a/source/css/_common/components/pages/schedule.styl b/source/css/_common/components/pages/schedule.styl index 90ae7c51c5..b798356c74 100644 --- a/source/css/_common/components/pages/schedule.styl +++ b/source/css/_common/components/pages/schedule.styl @@ -55,7 +55,7 @@ color: $grey; display: inline-block; font-size: 12px; - font-weight: $font-weight-normal; + font-weight: normal; padding-left: 12px; } diff --git a/source/css/_common/components/post/post-header.styl b/source/css/_common/components/post/post-header.styl index c250cd233a..7db69e5f04 100644 --- a/source/css/_common/components/post/post-header.styl +++ b/source/css/_common/components/post/post-header.styl @@ -3,7 +3,7 @@ } .posts-expand .post-title { - font-weight: $font-weight-normal; + font-weight: normal; margin: initial; text-align: center; word-wrap(); diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl index 7d2b755a79..0274d88c20 100644 --- a/source/css/_common/components/third-party/search.styl +++ b/source/css/_common/components/third-party/search.styl @@ -39,7 +39,6 @@ } .popup-btn-close { - border-left: 1px solid $gainsboro; cursor: pointer; &:hover .fa { diff --git a/source/css/_common/outline/header/menu.styl b/source/css/_common/outline/header/menu.styl index c394f6eb39..6f29af063a 100644 --- a/source/css/_common/outline/header/menu.styl +++ b/source/css/_common/outline/header/menu.styl @@ -36,7 +36,7 @@ .badge { display: inline-block; - font-weight: $font-weight-bolder; + font-weight: bold; line-height: 1; margin-left: .35em; margin-top: .35em; diff --git a/source/css/_common/outline/sidebar/sidebar-blogroll.styl b/source/css/_common/outline/sidebar/sidebar-blogroll.styl index d6f8e94ebb..87d55ca296 100644 --- a/source/css/_common/outline/sidebar/sidebar-blogroll.styl +++ b/source/css/_common/outline/sidebar/sidebar-blogroll.styl @@ -5,7 +5,7 @@ .links-of-blogroll-title { font-size: $font-size-small; - font-weight: $font-weight-bold; + font-weight: 600; margin-top: 0; } diff --git a/source/css/_common/outline/sidebar/site-state.styl b/source/css/_common/outline/sidebar/site-state.styl index 247939cc06..d8663e59e1 100644 --- a/source/css/_common/outline/sidebar/site-state.styl +++ b/source/css/_common/outline/sidebar/site-state.styl @@ -23,7 +23,7 @@ .site-state-item-count { display: block; font-size: $site-state-item-count-font-size; - font-weight: $font-weight-bold; + font-weight: 600; text-align: center; } diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl index deef86e06b..09ecbe47c0 100644 --- a/source/css/_common/scaffolding/base.styl +++ b/source/css/_common/scaffolding/base.styl @@ -62,8 +62,7 @@ iframe, img, video { } hr { - background-color: $gray-lighter; - background-image: repeating-linear-gradient(-45deg, white, white 4px, transparent 4px, transparent 8px); + background-image: repeating-linear-gradient(-45deg, $gray-lighter, $gray-lighter 4px, transparent 4px, transparent 8px); border: 0; height: 3px; margin: 40px 0; @@ -82,7 +81,7 @@ blockquote { } dt { - font-weight: $font-weight-bolder; + font-weight: bold; } dd { diff --git a/source/css/_common/scaffolding/highlight/copy-code.styl b/source/css/_common/scaffolding/highlight/copy-code.styl index 63df6e5ba8..86831413d8 100644 --- a/source/css/_common/scaffolding/highlight/copy-code.styl +++ b/source/css/_common/scaffolding/highlight/copy-code.styl @@ -10,7 +10,7 @@ color: $black-dim; cursor: pointer; display: inline-block; - font-weight: $font-weight-bolder; + font-weight: bold; line-height: 1.6; opacity: 0; outline: 0; diff --git a/source/css/_schemes/Mist/_header.styl b/source/css/_schemes/Mist/_header.styl index 874f61debc..e721cf3c7d 100644 --- a/source/css/_schemes/Mist/_header.styl +++ b/source/css/_schemes/Mist/_header.styl @@ -47,10 +47,6 @@ display: block; height: 2px; position: relative; - - +mobile() { - height: 3px; - } } } diff --git a/source/css/_schemes/Pisces/_sub-menu.styl b/source/css/_schemes/Pisces/_sub-menu.styl index 480187fc52..61806dd77a 100644 --- a/source/css/_schemes/Pisces/_sub-menu.styl +++ b/source/css/_schemes/Pisces/_sub-menu.styl @@ -1,5 +1,5 @@ .sub-menu { - background: white; + background: var(--content-bg-color); border-bottom: 1px solid $table-border-color; margin: 0; padding: 6px 0; @@ -8,11 +8,12 @@ display: inline-block; a, span.exturl { + background: transparent; margin: 5px 10px; padding: initial; &:hover { - background: initial; + background: transparent; color: $sidebar-highlight; } @@ -25,12 +26,10 @@ } .menu-item-active a { - background: white; border-bottom-color: $sidebar-highlight; color: $sidebar-highlight; &:hover { - background: white; border-bottom-color: $sidebar-highlight; } } diff --git a/source/css/_variables/Gemini.styl b/source/css/_variables/Gemini.styl index 56cca83c99..cce60d5939 100644 --- a/source/css/_variables/Gemini.styl +++ b/source/css/_variables/Gemini.styl @@ -14,5 +14,5 @@ $box-shadow = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0 $border-radius-inner = initial; $border-radius = initial; -// $border-radius-inner = 0 0 3px 3px; -// $border-radius = 3px; +// $border-radius-inner = 0 0 3px 3px; +// $border-radius = 3px; diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index d9c26f6258..1e69d4fc4c 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -38,7 +38,7 @@ $site-author-image-border-color = $gainsboro; $site-author-name-margin = 0; $site-author-name-color = var(--text-color); -$site-author-name-weight = $font-weight-bold; +$site-author-name-weight = 600; $site-description-font-size = $font-size-smaller; $site-description-color = $grey-dark; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 830caff607..b2683b3465 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -34,8 +34,8 @@ $text-color-dark = #e1e1e1; $link-color = $black-light; $link-color-dark = #e1e1e1; $link-hover-color = $black-deep; +$link-hover-color-dark = white; $link-decoration-color = $grey-dark; -$link-decoration-hover-color = $black-deep; // Global border color. $border-color = $grey-light; @@ -86,14 +86,6 @@ $font-family-monospace = get_font_family('codes'), consolas, Menlo, monospace $font-family-icons = 'FontAwesome'; -// Font Weight -$font-weight-lighter = 200; -$font-weight-light = 300; -$font-weight-normal = 400; -$font-weight-bold = 600; -$font-weight-bolder = 700; - - // Font size $font-size-base = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em; $font-size-smallest = .75em; From 4190bc4069b6eeba46a65f6e33a48ec3f2aac0b9 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 15:51:45 +0800 Subject: [PATCH 10/13] Remove toc color var --- source/css/_colors.styl | 2 +- .../css/_common/outline/sidebar/sidebar-toc.styl | 15 ++++----------- source/css/_variables/Pisces.styl | 9 --------- source/css/_variables/base.styl | 9 --------- 4 files changed, 5 insertions(+), 30 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index 950ba7ca8c..c6337cbc9f 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -27,7 +27,7 @@ $color-scheme-dark { } :root { - @extend $color-scheme-dark; + @extend $color-scheme-light; } if (hexo-config('darkmode')) { diff --git a/source/css/_common/outline/sidebar/sidebar-toc.styl b/source/css/_common/outline/sidebar/sidebar-toc.styl index 2da5f80e56..739ec6fa47 100644 --- a/source/css/_common/outline/sidebar/sidebar-toc.styl +++ b/source/css/_common/outline/sidebar/sidebar-toc.styl @@ -12,15 +12,8 @@ } a { - border-bottom-color: $toc-link-border-color; - color: $toc-link-color; transition-property: all; the-transition(); - - &:hover { - border-bottom-color: $toc-link-hover-border-color; - color: $toc-link-hover-color; - } } } @@ -53,15 +46,15 @@ } .active > a { - border-bottom-color: $toc-link-active-border-color; - color: $toc-link-active-color; + border-bottom-color: $sidebar-highlight; + color: $sidebar-highlight; } .active-current > a { - color: $toc-link-active-current-color; + color: $sidebar-highlight; &:hover { - color: $toc-link-active-current-border-color; + color: $sidebar-highlight; } } } diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 1e69d4fc4c..267798ac4a 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -49,15 +49,6 @@ $site-state-item-name-font-size = $font-size-smaller; $site-state-item-name-color = $grey-dark; $site-state-item-border-color = $gainsboro; -$toc-link-color = $grey-dim; -$toc-link-border-color = $grey-light; -$toc-link-hover-color = black; -$toc-link-hover-border-color = black; -$toc-link-active-color = $sidebar-highlight; -$toc-link-active-border-color = $sidebar-highlight; -$toc-link-active-current-color = $sidebar-highlight; -$toc-link-active-current-border-color = $sidebar-highlight; - // Components // -------------------------------------------------- diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index b2683b3465..687ea0d070 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -231,15 +231,6 @@ $site-state-item-name-font-size = $font-size-small; $site-state-item-name-color = inherit; $site-state-item-border-color = $black-dim; -$toc-link-color = $grey-dark; -$toc-link-border-color = $black-light; -$toc-link-hover-color = $grey-light; -$toc-link-hover-border-color = $grey-light; -$toc-link-active-color = $sidebar-highlight; -$toc-link-active-border-color = $sidebar-highlight; -$toc-link-active-current-color = $sidebar-highlight; -$toc-link-active-current-border-color = $sidebar-highlight; - // Components // -------------------------------------------------- From e265c3902cdd12cbf9a2e7bbd9e433c8379d8a35 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 19:12:30 +0800 Subject: [PATCH 11/13] Fix --- source/css/_common/scaffolding/comments.styl | 2 +- source/css/_common/scaffolding/tags/label.styl | 1 + source/css/_common/scaffolding/tags/tabs.styl | 2 +- source/css/_schemes/Mist/_layout.styl | 6 ------ source/css/_schemes/Mist/_posts-expand.styl | 5 ++--- source/css/_schemes/Muse/_header.styl | 4 ++++ source/css/_schemes/Muse/_menu.styl | 3 +-- source/css/_variables/Mist.styl | 12 ++++++++---- source/css/_variables/Muse.styl | 3 --- source/css/_variables/Pisces.styl | 2 +- 10 files changed, 19 insertions(+), 21 deletions(-) diff --git a/source/css/_common/scaffolding/comments.styl b/source/css/_common/scaffolding/comments.styl index 31cc2e61df..fe0b2ee32b 100644 --- a/source/css/_common/scaffolding/comments.styl +++ b/source/css/_common/scaffolding/comments.styl @@ -29,7 +29,7 @@ } .tabs-comment { - background: white; + background: var(--content-bg-color); margin-top: 4em; padding-top: 0; diff --git a/source/css/_common/scaffolding/tags/label.styl b/source/css/_common/scaffolding/tags/label.styl index 177c46b7de..70c30c7469 100644 --- a/source/css/_common/scaffolding/tags/label.styl +++ b/source/css/_common/scaffolding/tags/label.styl @@ -1,4 +1,5 @@ .post-body .label { + color: $text-color; display: inline; padding: 0 2px; diff --git a/source/css/_common/scaffolding/tags/tabs.styl b/source/css/_common/scaffolding/tags/tabs.styl index 2c65b65c15..629e691c41 100644 --- a/source/css/_common/scaffolding/tags/tabs.styl +++ b/source/css/_common/scaffolding/tags/tabs.styl @@ -20,7 +20,6 @@ } li.tab { - background: white; border-bottom: 1px solid $gray-lighter; border-left: 1px solid transparent; border-right: 1px solid transparent; @@ -86,6 +85,7 @@ .tab-content { .tab-pane { border: 1px solid $table-border-color; + border-top: 0; padding: 20px 20px 0 20px; border-radius: $tbr; diff --git a/source/css/_schemes/Mist/_layout.styl b/source/css/_schemes/Mist/_layout.styl index 8551ed5083..112f87cb44 100644 --- a/source/css/_schemes/Mist/_layout.styl +++ b/source/css/_schemes/Mist/_layout.styl @@ -1,9 +1,5 @@ // Tags // -------------------------------------------------- -a { - border-bottom-color: $grey-light; -} - hr { height: 2px; margin: 20px 0; @@ -12,8 +8,6 @@ hr { // Components // -------------------------------------------------- .btn { - border-radius: 0; - border-width: 2px; padding: 0 10px; } diff --git a/source/css/_schemes/Mist/_posts-expand.styl b/source/css/_schemes/Mist/_posts-expand.styl index 7ac81f1128..ecd069aed7 100644 --- a/source/css/_schemes/Mist/_posts-expand.styl +++ b/source/css/_schemes/Mist/_posts-expand.styl @@ -60,13 +60,12 @@ // color: $grey-dim; background: none; border: 0; - border-bottom: 2px solid $grey-dim; - font-size: $font-size-small; + border-bottom: 2px solid $btn-default-border-color; padding: 0; transition-property: border; &:hover { - border-bottom-color: $black-deep; + border-bottom-color: $btn-default-hover-border-color; } } } diff --git a/source/css/_schemes/Muse/_header.styl b/source/css/_schemes/Muse/_header.styl index b58adf1680..790b7a7ed7 100644 --- a/source/css/_schemes/Muse/_header.styl +++ b/source/css/_schemes/Muse/_header.styl @@ -19,3 +19,7 @@ max-width: 150px; padding: 5px; } + +.brand { + background: $btn-default-bg; +} diff --git a/source/css/_schemes/Muse/_menu.styl b/source/css/_schemes/Muse/_menu.styl index c6ced3ad90..d3e3c81507 100644 --- a/source/css/_schemes/Muse/_menu.styl +++ b/source/css/_schemes/Muse/_menu.styl @@ -1,6 +1,5 @@ .site-nav { +mobile() { - background: white; border-bottom: 1px solid $gray-lighter; border-top: 1px solid $gray-lighter; left: 0; @@ -22,7 +21,7 @@ .menu-item-active a { background: transparent; - border-bottom: 1px solid $menu-link-hover-border !important; + border-bottom: 1px solid var(--link-hover-color) !important; +mobile() { border-bottom: 1px dotted $gray-lighter !important; diff --git a/source/css/_variables/Mist.styl b/source/css/_variables/Mist.styl index 04cfaa1ea8..7e2b78df9f 100644 --- a/source/css/_variables/Mist.styl +++ b/source/css/_variables/Mist.styl @@ -3,7 +3,9 @@ @import "Muse.styl"; +$link-decoration-color = $grey-light; $content-bg-color = $whitesmoke; +$menu-item-bg-color = $gray-lighter; $brand-color = $black-deep; $brand-hover-color = $brand-color; @@ -13,7 +15,9 @@ $brand-hover-color-dark = $brand-color-dark; $site-meta-text-align = left; $posts-collapse-left = 0; -$btn-default-color = $link-color; -$btn-default-bg = transparent; - -$menu-item-bg-color = $gray-lighter; +$btn-default-bg = transparent; +$btn-default-color = var(--link-color); +$btn-default-hover-bg = transparent; +$btn-default-border-color = var(--link-color); +$btn-default-hover-color = var(--link-hover-color); +$btn-default-hover-border-color = var(--link-hover-color); diff --git a/source/css/_variables/Muse.styl b/source/css/_variables/Muse.styl index 60f7ff1f8f..158399d4a0 100644 --- a/source/css/_variables/Muse.styl +++ b/source/css/_variables/Muse.styl @@ -3,6 +3,3 @@ $sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320; $sidebar-desktop = unit($sidebar-width, 'px'); - -// Menu -$menu-link-hover-border = $black-deep; diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 267798ac4a..8ea2113b03 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -58,8 +58,8 @@ $btn-default-radius = 2px; $btn-default-bg = white; $btn-default-color = $text-color; $btn-default-border-color = $text-color; -$btn-default-hover-color = white; $btn-default-hover-bg = $black-deep; +$btn-default-hover-color = white; // Back to top $b2t-opacity = .6; From cbe10991901ae5a197942edf303ff74abc9a3986 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 20:25:15 +0800 Subject: [PATCH 12/13] Stylint --- _config.yml | 3 +++ .../components/post/post-followme.styl | 2 +- .../components/third-party/search.styl | 2 +- source/css/_schemes/Gemini/index.styl | 14 +++++------ source/css/_schemes/Mist/_posts-expand.styl | 24 +++++++++---------- source/css/_variables/base.styl | 2 +- 6 files changed, 25 insertions(+), 22 deletions(-) diff --git a/_config.yml b/_config.yml index c633e6b609..e5bf68a8a7 100644 --- a/_config.yml +++ b/_config.yml @@ -109,6 +109,9 @@ scheme: Muse #scheme: Pisces #scheme: Gemini +# Dark Mode +darkmode: false + # --------------------------------------------------------------- # Menu Settings diff --git a/source/css/_common/components/post/post-followme.styl b/source/css/_common/components/post/post-followme.styl index a597ff39e4..2ba8c87486 100644 --- a/source/css/_common/components/post/post-followme.styl +++ b/source/css/_common/components/post/post-followme.styl @@ -23,7 +23,7 @@ } .social-link { - border: none; + border: 0; display:inline-block; text-align: center; diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl index 0274d88c20..61bc2f03f5 100644 --- a/source/css/_common/components/third-party/search.styl +++ b/source/css/_common/components/third-party/search.styl @@ -47,10 +47,10 @@ } .search-header { - display: flex; background: $gainsboro; border-top-left-radius: 5px; border-top-right-radius: 5px; + display: flex; padding: 5px; } } diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl index 8f89b2639f..5d1b4552db 100644 --- a/source/css/_schemes/Gemini/index.styl +++ b/source/css/_schemes/Gemini/index.styl @@ -39,14 +39,14 @@ $use-seo = hexo-config('seo'); border-radius: $border-radius-inner; box-shadow: $box-shadow-inner; padding: $content-desktop-padding; -} -// When blocks are siblings (homepage). -.post-block + .post-block { - border-radius: $border-radius; - // Rewrite shadows & borders because all blocks have offsets. - box-shadow: $box-shadow; - margin-top: $sidebar-offset; + // When blocks are siblings (homepage). + & + .post-block { + border-radius: $border-radius; + // Rewrite shadows & borders because all blocks have offsets. + box-shadow: $box-shadow; + margin-top: $sidebar-offset; + } } // Comments blocks. diff --git a/source/css/_schemes/Mist/_posts-expand.styl b/source/css/_schemes/Mist/_posts-expand.styl index ecd069aed7..f4e577bb8a 100644 --- a/source/css/_schemes/Mist/_posts-expand.styl +++ b/source/css/_schemes/Mist/_posts-expand.styl @@ -1,21 +1,21 @@ // Post Expand // -------------------------------------------------- -.posts-expand .home { - .post-title, .post-meta { - text-align: $site-meta-text-align; +.posts-expand { + padding-top: 0; - +mobile() { - text-align: center; + .home { + .post-title, .post-meta { + text-align: $site-meta-text-align; + + +mobile() { + text-align: center; + } } - } - .post-meta { - margin: 5px 0 20px 0; + .post-meta { + margin: 5px 0 20px 0; + } } -} - -.posts-expand { - padding-top: 0; .post-eof { display: none; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 687ea0d070..fa866599fd 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -109,7 +109,7 @@ $line-height-code-block = 1.6; // Can't be less than 1.3; // Z-index master list // -------------------------------------------------- -$zindex-0 = 1000 +$zindex-0 = 1000; $zindex-1 = 1100; $zindex-2 = 1200; $zindex-3 = 1300; From ed99ed1d7edc953a0453aac5514915954bfe6bb8 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Sat, 22 Feb 2020 20:45:21 +0800 Subject: [PATCH 13/13] Revert --- layout/_macro/post.swig | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/layout/_macro/post.swig b/layout/_macro/post.swig index 424a6aa550..81ea112abd 100644 --- a/layout/_macro/post.swig +++ b/layout/_macro/post.swig @@ -85,7 +85,9 @@ {{ __('post.in') }} {%- for cat in post.categories.toArray() %} - + {%- set cat_length = post.categories.length %}