From 03400da57528a6fbd315fde47fcd6dfad70a0377 Mon Sep 17 00:00:00 2001 From: XPoet Date: Mon, 11 Sep 2023 17:53:47 +0800 Subject: [PATCH 1/9] ui: optimize the post sticky style for mobile --- layout/home-content.ejs | 6 +++--- source/css/layout/home-content.styl | 19 ++++++++++++++++--- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/layout/home-content.ejs b/layout/home-content.ejs index 99db67a2..a525131a 100644 --- a/layout/home-content.ejs +++ b/layout/home-content.ejs @@ -9,7 +9,7 @@ > <% if (post.sticky) { %>
-  <%- __('top') %> +  <%- __('top') %>
<% } %> <%= post.title %> @@ -18,8 +18,8 @@
<% if (post.sticky && !post?.cover) { %> -
-  <%- __('top') %> +
+  <%- __('top') %>
<% } %>

diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl index 952724f6..67362bbd 100644 --- a/source/css/layout/home-content.styl +++ b/source/css/layout/home-content.styl @@ -12,8 +12,6 @@ .post-sticky-box { position absolute - top 0.8rem - right 0.8rem z-index $z-index-1 display flex align-items center @@ -24,7 +22,7 @@ letter-spacing 1px background var(--background-color-3) border-radius 0.3rem - transform scale(0.88) + transform scale(0.86) cursor default disable-user-select() @@ -32,6 +30,21 @@ top 0.6rem right 0.6rem } + + &.card { + top 0.8rem + right 0.8rem + } + + +keep-mobile() { + padding 0 + background none + transform rotate(45deg) + + .sticky-name { + display none + } + } } From 98fcae3ce899ee2dddc592d9faea0aac3d8367a1 Mon Sep 17 00:00:00 2001 From: XPoet Date: Mon, 11 Sep 2023 18:05:00 +0800 Subject: [PATCH 2/9] ui: optimize mobile style --- source/css/layout/_partial/article-copyright-info.styl | 4 ++++ source/css/layout/article-content.styl | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/source/css/layout/_partial/article-copyright-info.styl b/source/css/layout/_partial/article-copyright-info.styl index 60a50408..e64b43db 100644 --- a/source/css/layout/_partial/article-copyright-info.styl +++ b/source/css/layout/_partial/article-copyright-info.styl @@ -62,6 +62,10 @@ color var(--copyright-icon-bg-color) font-size 14rem transform translateY(-50%) + + +keep-mobile() { + font-size 12rem + } } } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index 069bd766..7729e31f 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -44,7 +44,7 @@ $spacer-padding = 2rem keep-container(1, 0, 2rem) +keep-mobile() { - padding 0 !important + padding 0 0.2rem !important box-shadow none !important &:hover { From 683c58154041449bdd108da174dfe4eb8ed21cd8 Mon Sep 17 00:00:00 2001 From: XPoet Date: Mon, 11 Sep 2023 22:54:47 +0800 Subject: [PATCH 3/9] fix(copyright-info): raises the z-index of the content container --- source/css/layout/_partial/article-copyright-info.styl | 1 + 1 file changed, 1 insertion(+) diff --git a/source/css/layout/_partial/article-copyright-info.styl b/source/css/layout/_partial/article-copyright-info.styl index e64b43db..43feed60 100644 --- a/source/css/layout/_partial/article-copyright-info.styl +++ b/source/css/layout/_partial/article-copyright-info.styl @@ -33,6 +33,7 @@ margin-top 1rem .bottom-item { + z-index $z-index-10 margin-right 1.2rem .type { From fee8375f835f76aa44348bee2ddf655d50035cbd Mon Sep 17 00:00:00 2001 From: XPoet Date: Tue, 12 Sep 2023 16:17:27 +0800 Subject: [PATCH 4/9] ui(post): optimize TOC style --- layout/_partial/toc.ejs | 4 +- source/css/layout/_partial/toc.styl | 118 ++++++++++++++----------- source/css/layout/article-content.styl | 3 +- 3 files changed, 72 insertions(+), 53 deletions(-) diff --git a/layout/_partial/toc.ejs b/layout/_partial/toc.ejs index db00a643..9b5ab63c 100644 --- a/layout/_partial/toc.ejs +++ b/layout/_partial/toc.ejs @@ -1,5 +1,5 @@ -
-
+
+
<%- toc( page.content, { diff --git a/source/css/layout/_partial/toc.styl b/source/css/layout/_partial/toc.styl index 7678fa6d..11255be3 100644 --- a/source/css/layout/_partial/toc.styl +++ b/source/css/layout/_partial/toc.styl @@ -1,6 +1,4 @@ .post-toc-wrap { - position relative - box-sizing border-box width 100% height 100% overflow-y auto @@ -18,74 +16,94 @@ .post-toc { ol { + position relative + box-sizing border-box margin 0 - padding 0 0.1rem 0.8rem 0.6rem text-align left list-style none - &:last-child { - padding-bottom 0 - } - - > ol { - padding-left 0 - } - a { transition-property all - transition() } } - .nav-item { - margin-bottom 0.2rem - overflow hidden - line-height 1.8 - white-space nowrap - text-overflow ellipsis - } + .nav { + .nav-item { + position relative + box-sizing border-box + overflow hidden + line-height 2 + white-space nowrap + text-overflow ellipsis - .nav { - .nav-child { - if (hexo-config('toc') && hexo-config('toc.expand_all') == true) { - display block - } - else { - display none - } - } - .active > .nav-child { - display block - } + &.active { + > .nav-child { + display block + } + } - .active-current > .nav-child { - display block - > .nav-item { - display block + .nav-link { + position relative + box-sizing border-box + padding-left 0.8rem + + &:hover { + .nav-number + .nav-text { + color var(--primary-color) + } + } + + &.active-current { + > .nav-child { + display block + + > .nav-item { + display block + } + } + + + &::before { + position absolute + top 50% + left 0 + width 0.2rem + height 1.2rem + background var(--primary-color) + border-radius 0.2rem + transform translateY(-50%) + content '' + } + + .nav-number + .nav-text { + color var(--primary-color) + } + } + + + .nav-number + .nav-text { + color var(--toc-text-color) + } } - } - .nav-number - .nav-text { - color var(--toc-text-color) - } + .nav-child { + padding-left 1rem - .active > a { - .nav-number - .nav-text { - color var(--primary-color) - } - } - .active-current > a { - .nav-number - .nav-text { - color var(--primary-color) + if (hexo-config('toc') && hexo-config('toc.expand_all') == true) { + display block + } + else { + display none + } } } } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index 7729e31f..709cc4d4 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -392,15 +392,16 @@ $spacer-padding = 2rem box-sizing border-box width $toc-container-width max-height 'calc(100vh - %s)' % ('calc(var(--header-height) + %s)' % $component-spacing-value) - padding 2rem 0 2rem 1.4rem transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease") &.right-toc { order 1 + padding 2rem 0 2rem 1.8rem } &.left-toc { order -1 + padding 2rem 1.8rem 2rem 0 } .header-shrink & { From 8a4a8ce13a3e60c65372138ffab2701c48c723f4 Mon Sep 17 00:00:00 2001 From: XPoet Date: Tue, 12 Sep 2023 16:43:12 +0800 Subject: [PATCH 5/9] chore(post): optimize comments anchor setting --- layout/_partial/comment/comment.ejs | 5 ++--- source/css/layout/_partial/comment/comment.styl | 9 +-------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/layout/_partial/comment/comment.ejs b/layout/_partial/comment/comment.ejs index 3e565109..a53db81b 100644 --- a/layout/_partial/comment/comment.ejs +++ b/layout/_partial/comment/comment.ejs @@ -6,9 +6,8 @@ const { %> <% if (theme_comment_enable === true && theme_comment_use) { %> -
-
-
+
+
 <%- __('comments') %>
<% if (theme_comment_use === 'valine') { %> diff --git a/source/css/layout/_partial/comment/comment.styl b/source/css/layout/_partial/comment/comment.styl index 54d6d106..511b5d30 100644 --- a/source/css/layout/_partial/comment/comment.styl +++ b/source/css/layout/_partial/comment/comment.styl @@ -18,24 +18,17 @@ if (hexo-config('comment') && hexo-config('comment.enable') == true && hexo-conf width 100% margin-top $component-spacing-value - #comments-anchor { - width 100% - height 0.8rem - } - - .comment-area-title { width 100% - margin 0.8rem 0 color var(--text-color-3) font-size 1.38rem + line-height 2 i { color var(--text-color-3) } +keep-tablet() { - margin 0.4rem 0 font-size 1.2rem } } From dac86a1f5a8cde2b1cf8c561a506b4bfe5b4d004 Mon Sep 17 00:00:00 2001 From: XPoet Date: Tue, 12 Sep 2023 17:33:55 +0800 Subject: [PATCH 6/9] ui(archives): display articles using a timeline style --- layout/_partial/archive-list.ejs | 2 +- source/css/layout/_partial/archive-list.styl | 46 +++++++++++++------- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/layout/_partial/archive-list.ejs b/layout/_partial/archive-list.ejs index 48b333d0..7553dda5 100644 --- a/layout/_partial/archive-list.ejs +++ b/layout/_partial/archive-list.ejs @@ -8,10 +8,10 @@
    <% postItem.postList.forEach(post => { %>
  • + <%= date(post.date, 'MM-DD') %> <%= post.title %> - <%= date(post.date, 'MM-DD') %>
    • <% }) %>
diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl index a8e19089..4fe926f2 100644 --- a/source/css/layout/_partial/archive-list.styl +++ b/source/css/layout/_partial/archive-list.styl @@ -2,6 +2,8 @@ $archive-year-font-size = 1.6rem $article-title-font-size = 1.2rem $article-date-font-size = 1rem $article-date-width = 3.6rem +$article-item-padding = 1.2rem +$timeline-circle-width = 0.6rem .archive-list-container { @@ -29,41 +31,55 @@ $article-date-width = 3.6rem .article-list { + padding-left $article-item-padding + .article-item { display flex align-items center justify-content space-between width 100% - margin-top 1.3rem + padding ($article-item-padding * 0.68) 0 ($article-item-padding * 0.68) $article-item-padding font-size 1rem - - +keep-tablet() { - margin-top 1.1rem + border-left 1px dashed var(--border-color) + + &::before { + position absolute + top 50% + left -($timeline-circle-width * 0.5) + z-index $z-index-1 + box-sizing border-box + width $timeline-circle-width + height $timeline-circle-width + background var(--text-color-5) + border-radius 50% + transform translateY(-50%) + content '' } - +keep-mobile() { - margin-top 1rem - } &:hover { - a.article-title - .article-date { - color var(--primary-color) + &::before { + background var(--text-color-4) } - } - a.article-title { - width 'calc(100% - %s)' % $article-date-width - color var(--text-color-3) + a.article-title { + color var(--primary-color) + } } .article-date { width $article-date-width + margin-right $article-item-padding color var(--text-color-3) font-size $article-date-font-size - text-align right + } + + + a.article-title { + width 'calc(100% - %s)' % $article-date-width + color var(--text-color-3) } } } From 6a4ee2e94e25b59b2ec58bacd84b77475bd68533 Mon Sep 17 00:00:00 2001 From: XPoet Date: Tue, 12 Sep 2023 17:55:43 +0800 Subject: [PATCH 7/9] ui: optimize tag content page style --- layout/tag-content.ejs | 4 ++-- source/css/layout/tag-content.styl | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/layout/tag-content.ejs b/layout/tag-content.ejs index f351ac3e..5bd2c36a 100644 --- a/layout/tag-content.ejs +++ b/layout/tag-content.ejs @@ -1,6 +1,6 @@
-
-
 <%= page.tag %> +
+
 <%= page.tag %>
<%- partial('_partial/archive-list', { archive_posts: page.posts }) %> diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl index 05a2b5b9..52eb306a 100644 --- a/source/css/layout/tag-content.styl +++ b/source/css/layout/tag-content.styl @@ -6,11 +6,9 @@ $tag-name-font-size = 1.5rem .tag-name { margin-bottom $component-spacing-value - padding-bottom 1rem color var(--text-color-2) font-weight 600 font-size $tag-name-font-size - border-bottom 0.1rem solid var(--border-color) i { color var(--text-color-2) From bb2e0adab6008531902962be2dc57a80d9a3cd02 Mon Sep 17 00:00:00 2001 From: XPoet Date: Tue, 12 Sep 2023 17:59:06 +0800 Subject: [PATCH 8/9] ui: optimize category content page style --- layout/category-content.ejs | 2 +- source/css/layout/category-content.styl | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/layout/category-content.ejs b/layout/category-content.ejs index 3461e71c..81792a7c 100644 --- a/layout/category-content.ejs +++ b/layout/category-content.ejs @@ -1,5 +1,5 @@
-
+
 <%= page.category %>
diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl index 8c0db40e..ad7dc8b9 100644 --- a/source/css/layout/category-content.styl +++ b/source/css/layout/category-content.styl @@ -6,11 +6,9 @@ $category-name-font-size = 1.5rem .category-name { margin-bottom $component-spacing-value - padding-bottom 1rem color var(--text-color-2) font-weight 600 font-size $category-name-font-size - border-bottom 0.1rem solid var(--border-color) i { color var(--text-color-2) From ac9c67cdb87b6a7fed80fa2611951b125153e53b Mon Sep 17 00:00:00 2001 From: XPoet Date: Tue, 12 Sep 2023 20:52:44 +0800 Subject: [PATCH 9/9] chore: adjust the directory structure and naming of CSS files --- source/css/common/basic.styl | 5 +- source/css/common/code-block/code-theme.styl | 2 +- .../{css-vars.styl => css-variables.styl} | 2 +- source/css/common/keep-style.styl | 161 ++++++++++++++++++ source/css/common/keep-theme.styl | 50 ------ .../{variables.styl => stylus-variables.styl} | 115 +------------ source/css/style.styl | 1 - 7 files changed, 168 insertions(+), 168 deletions(-) rename source/css/common/{css-vars.styl => css-variables.styl} (98%) create mode 100644 source/css/common/keep-style.styl delete mode 100644 source/css/common/keep-theme.styl rename source/css/common/{variables.styl => stylus-variables.styl} (61%) diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl index 2ae71f29..0c51ca18 100644 --- a/source/css/common/basic.styl +++ b/source/css/common/basic.styl @@ -1,6 +1,7 @@ -@import 'variables.styl' +@import 'css-variables.styl' +@import 'stylus-variables.styl' @import 'animated.styl' -@import 'keep-theme.styl' +@import 'keep-style.styl' // ====================================================================== // all diff --git a/source/css/common/code-block/code-theme.styl b/source/css/common/code-block/code-theme.styl index 3f609165..3dde6d21 100644 --- a/source/css/common/code-block/code-theme.styl +++ b/source/css/common/code-block/code-theme.styl @@ -1,4 +1,4 @@ -@import "../variables.styl" +@import "../stylus-variables.styl" // A single line block of code $code-foreground = lighten($text-color-3, 2%) diff --git a/source/css/common/css-vars.styl b/source/css/common/css-variables.styl similarity index 98% rename from source/css/common/css-vars.styl rename to source/css/common/css-variables.styl index 90a95137..8986eb13 100644 --- a/source/css/common/css-vars.styl +++ b/source/css/common/css-variables.styl @@ -1,4 +1,4 @@ -@import "variables.styl" +@import "stylus-variables.styl" :root { // ============================================================================================== diff --git a/source/css/common/keep-style.styl b/source/css/common/keep-style.styl new file mode 100644 index 00000000..5ba8ba1d --- /dev/null +++ b/source/css/common/keep-style.styl @@ -0,0 +1,161 @@ +@import 'stylus-variables.styl' + +keep-container(sValue, pValue, mbValue) { + box-sizing border-box + margin-bottom mbValue + padding pValue + background var(--content-background-color) + border-radius var(--box-border-radius) + box-shadow 0 0 8px var(--shadow-color) + + if (sValue != 1) { + transition-t("transform", "0", "0.2", "linear") + } + + &:hover { + if (sValue != 1) { + transform scale(sValue) + } + box-shadow 0 0 12px var(--shadow-hover-color) + } + + +keep-tablet() { + margin-bottom mbValue * 0.8 + padding pValue * 0.8 + border-radius calc(var(--box-border-radius) * 0.8) + } + + + +keep-mobile() { + margin-bottom mbValue * 0.6 + padding pValue * 0.6 + border-radius calc(var(--box-border-radius) * 0.6) + } +} + + +disable-user-select() { + -moz-user-select none + -ms-user-select none + -webkit-user-select none + user-select none +} + + +not-text-size-adjust() { + -ms-text-size-adjust none + -moz-text-size-adjust none + -webkit-text-size-adjust none +} + + +keep-tablet() { + @media (max-width $media-max-width) { + { block } + } +} + + +keep-mobile() { + @media (max-width $media-max-width-mobile) { + { block } + } +} + + +root-color(mode) { + // primary color + --primary-color $primary-color + --primary-color-light-1 $primary-color-light-1 + --primary-color-light-2 $primary-color-light-2 + --primary-color-dark-1 $primary-color-dark-1 + --primary-color-dark-2 $primary-color-dark-2 + + // background color + --background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1 + --background-color-1-transparent mode == 'light' ? $background-color-1-transparent : $dark-background-color-1-transparent + --background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2 + --background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3 + + // content background color + --content-background-color mode == 'light' ? $content-background-color : $dark-content-background-color + + // text color + --text-color-1 mode == 'light' ? $text-color-1 : $dark-text-color-1 + --text-color-2 mode == 'light' ? $text-color-2 : $dark-text-color-2 + --text-color-3 mode == 'light' ? $text-color-3 : $dark-text-color-3 + --text-color-4 mode == 'light' ? $text-color-4 : $dark-text-color-4 + --text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5 + --text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6 + + // toc text color + --toc-text-color mode == 'light' ? $toc-text-color : $dark-toc-text-color + + // badge color + --badge-color mode == 'light' ? $badge-color : $dark-badge-color + --badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color + + // border color + --border-color mode == 'light' ? $border-color : $dark-border-color + + // selection color + --selection-color mode == 'light' ? $selection-color : $dark-selection-color + + // shadow color + --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color + --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color + + // scrollbar color + --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color + --scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color + --toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color + + // copyright icon background color + --copyright-icon-bg-color mode == 'light' ? $copyright-icon-bg-color : $dark-copyright-icon-bg-color + + // avatar background color + --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color + + // header transparent background color + --header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1 + --header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2 + + // pjax progress bar color + --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color + + // article aging tips primary color + --article-aging-tips-color mode == 'light' ? $article-aging-tips-color : $dark-article-aging-tips-color + --article-aging-tips-background-color mode == 'light' ? $article-aging-tips-background-color : $dark-article-aging-tips-background-color + --article-aging-tips-border-color mode == 'light' ? $article-aging-tips-border-color : $dark-article-aging-tips-border-color + + --post-h-bottom-border-color mode == 'light' ? $post-h-bottom-border-color : $dark-post-h-bottom-border-color +} + + +:root { + root-color('light') +} + + +@media (prefers-color-scheme light) { + :root { + root-color('light') + } +} + + +@media (prefers-color-scheme dark) { + :root { + root-color('dark') + } +} + + +.light-mode { + root-color('light') +} + + +.dark-mode { + root-color('dark') +} diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl deleted file mode 100644 index dfd1944a..00000000 --- a/source/css/common/keep-theme.styl +++ /dev/null @@ -1,50 +0,0 @@ -keep-container(sValue, pValue, mbValue) { - box-sizing border-box - margin-bottom mbValue - padding pValue - background var(--content-background-color) - border-radius var(--box-border-radius) - box-shadow 0 0 8px var(--shadow-color) - - if (sValue != 1) { - transition-t("transform", "0", "0.2", "linear") - } - - &:hover { - if (sValue != 1) { - transform scale(sValue) - } - box-shadow 0 0 12px var(--shadow-hover-color) - } - - +keep-tablet() { - margin-bottom mbValue * 0.8 - padding pValue * 0.8 - border-radius calc(var(--box-border-radius) * 0.8) - } - - - +keep-mobile() { - margin-bottom mbValue * 0.6 - padding pValue * 0.6 - border-radius calc(var(--box-border-radius) * 0.6) - } -} - - - -disable-user-select() { - -moz-user-select none - -ms-user-select none - -webkit-user-select none - user-select none -} - - -not-text-size-adjust() { - -ms-text-size-adjust none - -moz-text-size-adjust none - -webkit-text-size-adjust none -} - - diff --git a/source/css/common/variables.styl b/source/css/common/stylus-variables.styl similarity index 61% rename from source/css/common/variables.styl rename to source/css/common/stylus-variables.styl index e4379533..5da84174 100644 --- a/source/css/common/variables.styl +++ b/source/css/common/stylus-variables.styl @@ -26,18 +26,6 @@ $has-fs-content-max-width = $content-max-width * 1.2 $media-max-width = 800px // media query max width (tablet) $media-max-width-mobile = 500px // media query max width (mobile) -keep-tablet() { - @media (max-width $media-max-width) { - { block } - } -} - -keep-mobile() { - @media (max-width $media-max-width-mobile) { - { block } - } -} - // ============================================================================================== // z-index @@ -76,7 +64,7 @@ $primary-color-dark-2 = darken($primary-color, 20%) // ============================================================================================== -// theme light mode color set +// theme light mode color // ============================================================================================== $background-color-1 = #fff $background-color-1-transparent = alpha($background-color-1, 0.6) @@ -123,7 +111,7 @@ $post-h-bottom-border-color = alpha($text-color-3, 0.15) // ============================================================================================== -// theme dark mode color set +// theme dark mode color // ============================================================================================== $dark-background-color-1 = #22272e $dark-background-color-1-transparent = alpha($dark-background-color-1, 0.6) @@ -167,102 +155,3 @@ $dark-article-aging-tips-background-color = alpha($dark-article-aging-tips-color $dark-article-aging-tips-border-color = alpha($dark-article-aging-tips-color, 0.6) $dark-post-h-bottom-border-color = alpha($dark-text-color-3, 0.15) - - -// ============================================================================================== -// light/dark mode color -// ============================================================================================== -root-color(mode) { - // primary color - --primary-color $primary-color - --primary-color-light-1 $primary-color-light-1 - --primary-color-light-2 $primary-color-light-2 - --primary-color-dark-1 $primary-color-dark-1 - --primary-color-dark-2 $primary-color-dark-2 - - // background color - --background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1 - --background-color-1-transparent mode == 'light' ? $background-color-1-transparent : $dark-background-color-1-transparent - --background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2 - --background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3 - - // content background color - --content-background-color mode == 'light' ? $content-background-color : $dark-content-background-color - - // text color - --text-color-1 mode == 'light' ? $text-color-1 : $dark-text-color-1 - --text-color-2 mode == 'light' ? $text-color-2 : $dark-text-color-2 - --text-color-3 mode == 'light' ? $text-color-3 : $dark-text-color-3 - --text-color-4 mode == 'light' ? $text-color-4 : $dark-text-color-4 - --text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5 - --text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6 - - // toc text color - --toc-text-color mode == 'light' ? $toc-text-color : $dark-toc-text-color - - // badge color - --badge-color mode == 'light' ? $badge-color : $dark-badge-color - --badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color - - // border color - --border-color mode == 'light' ? $border-color : $dark-border-color - - // selection color - --selection-color mode == 'light' ? $selection-color : $dark-selection-color - - // shadow color - --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color - --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color - - // scrollbar color - --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color - --scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color - --toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color - - // copyright icon background color - --copyright-icon-bg-color mode == 'light' ? $copyright-icon-bg-color : $dark-copyright-icon-bg-color - - // avatar background color - --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color - - // header transparent background color - --header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1 - --header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2 - - // pjax progress bar color - --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color - - // article aging tips primary color - --article-aging-tips-color mode == 'light' ? $article-aging-tips-color : $dark-article-aging-tips-color - --article-aging-tips-background-color mode == 'light' ? $article-aging-tips-background-color : $dark-article-aging-tips-background-color - --article-aging-tips-border-color mode == 'light' ? $article-aging-tips-border-color : $dark-article-aging-tips-border-color - - --post-h-bottom-border-color mode == 'light' ? $post-h-bottom-border-color : $dark-post-h-bottom-border-color -} - - -:root { - root-color('light') -} - -@media (prefers-color-scheme light) { - :root { - root-color('light') - } -} - -@media (prefers-color-scheme dark) { - :root { - root-color('dark') - } -} - - -.light-mode { - root-color('light') -} - - -.dark-mode { - root-color('dark') -} diff --git a/source/css/style.styl b/source/css/style.styl index b35d3c2f..ed1378de 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -1,4 +1,3 @@ -@import "common/css-vars.styl" @import "common/basic.styl" @import "common/markdown.styl" @import "common/code-block/highlight.styl"