From fa1b010456cfb27ae2acaca95447082f12ded6f5 Mon Sep 17 00:00:00 2001 From: tolking Date: Sat, 25 Apr 2020 10:03:03 +0800 Subject: [PATCH] style: uniform code style --- CHANGELOG.md | 5 ++++ docs/.vuepress/config.js | 12 ++++---- package.json | 2 +- styles/components.styl | 43 ++++++++++++++++++++++------ styles/index.styl | 61 ++++++++++++++++++++++------------------ styles/palette.styl | 6 ++-- 6 files changed, 84 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f440521..daf6af3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ [README](README.md) | [CHANGELOG](CHANGELOG.md) +## 1.0.7 + +- uniform code style +- fix typo + ## 1.0.6 - fix styles on pwa diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index d550e5f..7cc26f8 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -57,11 +57,11 @@ module.exports = { ] } } - }, - postcss: { - plugins: [ - require('css-prefers-color-scheme/postcss'), - require('autoprefixer') - ] } + // postcss: { + // plugins: [ + // require('css-prefers-color-scheme/postcss'), + // require('autoprefixer') + // ] + // } } diff --git a/package.json b/package.json index 69976ef..6ea185c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vuepress-theme-default-prefers-color-scheme", - "version": "1.0.6", + "version": "1.0.7", "main": "index.js", "description": "add prefers-color-scheme for vuepress default theme", "author": "tolking ", diff --git a/styles/components.styl b/styles/components.styl index f574968..07052d3 100644 --- a/styles/components.styl +++ b/styles/components.styl @@ -4,16 +4,21 @@ color var(--lighten25TextColor) border-color var(--darken10BorderColor) background-color var(--bgColor) + &:focus border-color var(--accentColor) + .suggestions background var(--bgColor) border-color var(--darken10BorderColor) + .suggestion a color var(--lighten35TextColor) + &.focused background-color var(--darken10BgColor) + a color var(--accentColor) @@ -22,28 +27,34 @@ .ds-dropdown-menu background var(--bgColor) border-color var(--searchBorderColor) + &::before border-color var(--searchBorderColor) + .ds-suggestion border-bottom-color var(--borderColor) + // .algolia-docsearch-suggestion--highlight - // color #2c815b + // color #2c815b .algolia-docsearch-suggestion border-color var(--borderColor) + .algolia-docsearch-suggestion--category-header background var(--accentColor) // color #fff // .algolia-docsearch-suggestion--highlight - // background rgba(255, 255, 255, 0.6) + // background rgba(255, 255, 255, 0.6) + .algolia-docsearch-suggestion--title color var(--textColor) + .algolia-docsearch-suggestion--subcategory-column border-color var(--borderColor) // background #f1f3f5 - // .algolia-docsearch-suggestion--subcategory-column-text - // color #555 + .algolia-docsearch-footer border-color var(--borderColor) + .ds-cursor .algolia-docsearch-suggestion--content // background-color #e7edf3 !important color var(--textColor) @@ -51,15 +62,19 @@ .dropdown-wrapper .dropdown-title color var(--textColor) + .nav-dropdown .dropdown-item h4 border-top-color var(--kbdBgColor) + a &:hover color var(--accentColor) + &.router-link-active color var(--accentColor) + &::after border-left-color var(--accentColor) @@ -80,24 +95,29 @@ .hero .description color var(--lighten40TextColor) + .action-button // color #fff background-color var(--accentColor) border-bottom-color var(--darken10AccentColor) + &:hover background-color var(--lighten10AccentColor) + .features border-top-color var(--borderColor) + .feature h2 color var(--lighten10TextColor) + p color var(--lighten25TextColor) + .footer border-top-color var(--borderColor) color var(--lighten25TextColor) - // navbar .navbar .site-name color var(--textColor) @@ -107,35 +127,42 @@ background var(--bgColor) .nav-links a - &:hover, &.router-link-active + &:hover + &.router-link-active color var(--accentColor) + @media (min-width: $MQMobile) color var(--textColor) @media (min-width: $MQMobile) .nav-item > a:not(.external) - &:hover, &.router-link-active + &:hover + &.router-link-active border-bottom-color var(--accentColor) // page-edit -.page-edit .edit-link a, +.page-edit .edit-link a .page-edit .last-updated .prefix color var(--lighten25TextColor) // sidebar .sidebar-heading color var(--textColor) + &.clickable &.active color var(--accentColor) border-left-color var(--accentColor) + &:hover color var(--accentColor) a.sidebar-link color var(--textColor) + &:hover color var(--accentColor) + &.active color var(--accentColor) border-left-color var(--accentColor) diff --git a/styles/index.styl b/styles/index.styl index d285497..9d68141 100644 --- a/styles/index.styl +++ b/styles/index.styl @@ -31,6 +31,7 @@ --darken10AccentColor darken($accentColor, 10%) --darken10BgColor darken($bgColor, 5%) --darken10BorderColor darken($borderColor, 10%) + @media (prefers-color-scheme: light) --codeBgColor $codeBgLightColor --preTextColor $preTextLightColor @@ -38,6 +39,7 @@ --languageTextColor $languageTextLightColor --lineNumbersColor $lineNumbersLightColor --lighten20TextColor lighten($textColor, 20%) + @media (prefers-color-scheme: dark) --accentColor $accentDarkColor --textColor $textDarkColor @@ -65,26 +67,24 @@ --darken10BgColor lighten($bgDarkColor, 5%) --darken10BorderColor darken($borderDarkColor, 10%) - -html, -body, -.navbar, +html +body +.navbar .sidebar background-color var(--bgColor) -body { +body color var(--textColor) -} -.navbar, -h2, +.navbar +h2 .sidebar .nav-links border-bottom-color var(--borderColor) .sidebar border-right-color var(--borderColor) -{$contentClass}:not(.custom) p.demo, +{$contentClass}:not(.custom) p.demo kbd border-color var(--borderColor) @@ -95,20 +95,21 @@ blockquote color var(--blockquoteTextColor) border-left-color var(--blockquoteBorderColor) -a, +a p a code - color var(--accentColor) + color var(--accentColor) -hr, +hr .page-nav .inner border-top-color var(--borderColor) !important tr border-top-color var(--tableBorderColor) + &:nth-child(2n) background-color var(--tableStripeBgColor) -th, +th td border-color var(--tableBorderColor) @@ -118,9 +119,8 @@ td .arrow.down border-top-color var(--arrowBgColor) -.arrow.right, - border-left-color var(--arrowBgColor) - +.arrow.right +border-left-color var(--arrowBgColor) .arrow.left border-right-color var(--arrowBgColor) @@ -128,32 +128,35 @@ td {$contentClass} code color var(--lighten20TextColor) background-color var(--miniCodeBgColor) + .token.inserted color var(--accentColor) -{$contentClass} pre, -{$contentClass} pre[class*="language-"], -div[class*="language-"], -div[class*="language-"].line-numbers-mode::after +{$contentClass} pre + +{$contentClass} pre[class*='language-'] +div[class*='language-'] +div[class*='language-'].line-numbers-mode::after background-color var(--codeBgColor) {$contentClass} - pre, pre[class*="language-"] + pre + pre[class*='language-'] code color var(--preTextColor) -div[class*="language-"] .highlight-lines .highlighted, -div[class*="language-"].line-numbers-mode .highlight-lines .highlighted::before +div[class*='language-'] .highlight-lines .highlighted +div[class*='language-'].line-numbers-mode .highlight-lines .highlighted::before background-color var(--highlightedBgColor) -div[class*="language-"].line-numbers-mode::after +div[class*='language-'].line-numbers-mode::after background-color var(--codeBgColor) border-right-color var(--highlightedBgColor) -div[class*="language-"]::before +div[class*='language-']::before color var(--languageTextColor) -div[class*="language-"].line-numbers-mode .line-numbers-wrapper +div[class*='language-'].line-numbers-mode .line-numbers-wrapper color var(--lineNumbersColor) // custom-block @@ -163,15 +166,17 @@ div[class*="language-"].line-numbers-mode .line-numbers-wrapper .custom-block.warning background-color var(--warningBgColor) + a color var(--warningColor) .custom-block.danger background-color var(--dangerBgColor) + a color var(--dangerColor) -.custom-block.warning, +.custom-block.warning .custom-block.danger color var(--textColor) @@ -181,10 +186,12 @@ div[class*="language-"].line-numbers-mode .line-numbers-wrapper border-color var(--accentColors) !important background-color var(--bgColor) !important color var(--textColor) !important + button border-color var(--darken10AccentColor) !important background-color var(--accentColor) !important color #fff !important + &:hover background-color var(--lighten10AccentColor) !important diff --git a/styles/palette.styl b/styles/palette.styl index 6fb6df9..625c636 100644 --- a/styles/palette.styl +++ b/styles/palette.styl @@ -1,6 +1,6 @@ $contentClass = '.theme-default-content' -$accentColors ?= #3eaf7c +$accentColor ?= #3eaf7c $accentDarkColor ?= $accentColor $textColor ?= #2c3e50 @@ -49,13 +49,13 @@ $tipBgColor ?= #f3f5f7 $tipBgDarkColor ?= #3e3b3b $warningColor ?= #e7c000 -$warningDarkColor ?= #e7c000 +$warningDarkColor ?= $warningColor $warningBgColor ?= rgba(255, 229, 100, 0.3) $warningBgDarkColor ?= rgba(185, 174, 119, 0.3) $dangerColor ?= #c00 -$dangerDarkColor ?= #c00 +$dangerDarkColor ?= $dangerColor $dangerBgColor ?= #ffe6e6 $dangerBgDarkColor ?= rgba(255, 214, 214, 0.3)