From f8d34b44067cc8986cc41376eafc707d8a6e08a7 Mon Sep 17 00:00:00 2001 From: lenconda Date: Sun, 12 Sep 2021 22:12:58 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20optimize=20docs=20?= =?UTF-8?q?styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .dumi/theme/builtins/Tree.less | 5 +- .dumi/theme/layout.tsx | 4 + .dumi/theme/style/layout.less | 164 +++++++++++++++++++++++++++++++ .dumi/theme/style/variables.less | 16 +++ .umirc.ts | 15 +-- docs/public/css/docs.css | 2 +- package.json | 3 + 7 files changed, 192 insertions(+), 17 deletions(-) create mode 100644 .dumi/theme/layout.tsx create mode 100644 .dumi/theme/style/layout.less create mode 100644 .dumi/theme/style/variables.less diff --git a/.dumi/theme/builtins/Tree.less b/.dumi/theme/builtins/Tree.less index 23f4a93..6156c08 100644 --- a/.dumi/theme/builtins/Tree.less +++ b/.dumi/theme/builtins/Tree.less @@ -1,9 +1,10 @@ @import (reference) '~dumi-theme-default/src/style/variables.less'; +@import '../style/variables.less'; .__dumi-site-tree { padding: 16px; - border: 1px solid @c-border; - border-radius: 2px; + border: 1px solid lighten(@border-primary, 10%); + border-radius: @border-radius; background-color: @c-light-bg; [data-prefers-color=dark] & { diff --git a/.dumi/theme/layout.tsx b/.dumi/theme/layout.tsx new file mode 100644 index 0000000..1b52e16 --- /dev/null +++ b/.dumi/theme/layout.tsx @@ -0,0 +1,4 @@ +import Layout from 'dumi-theme-default/src/layout'; +import './style/layout.less'; + +export default Layout; diff --git a/.dumi/theme/style/layout.less b/.dumi/theme/style/layout.less new file mode 100644 index 0000000..87e734c --- /dev/null +++ b/.dumi/theme/style/layout.less @@ -0,0 +1,164 @@ +@import './variables.less'; + +.markdown blockquote { + border-radius: @border-radius; + background-color: lighten(@bg-primary, 60%); + color: @blockquote-text-primary; +} + +pre[class*="language-"] { + border-radius: @border-radius; + border-color: lighten(@border-primary, 10%); +} + +.__dumi-default-menu-inner { + ul.__dumi-default-menu-list { + > li { + margin: 0 15px; + + > a { + border-radius: @border-radius; + } + } + + li { + span { + color: @text-secondary; + } + } + + a { + :hover { + color: @text-dark; + transition: all @transition-delay; + } + + &.active { + color: @bg-primary; + + > span { + color: @bg-primary; + } + } + } + } +} + +.__dumi-default-menu { + &[data-mode='site'] { + .__dumi-default-menu-list { + > li { + margin-bottom: 10px; + + > a.active, > a:hover { + background: lighten(@bg-primary, 60%); + } + + > a:hover { + color: @blockquote-text-primary; + } + + > a.active { + color: @bg-primary; + } + } + } + + &[data-mobile-show] { + box-shadow: @box-shadow; + } + + &::after { + display: none; + } + } +} + +.__dumi-default-navbar { + background-color: white; + + + nav { + > span { + & + *:not(a) { + margin-left: 10px; + } + + > a { + padding: 10px; + transition: all @transition-delay; + + &:not(.active) { + color: rgba(@text-dark, .6); + + &:hover { + background-color: lighten(@bg-primary, 60%); + color: @bg-primary; + border-radius: @border-radius; + transition: all @transition-delay; + } + } + + &.active { + background-color: lighten(@bg-primary, 60%); + color: @bg-primary; + border-radius: @border-radius; + + &::after { + display: none; + } + } + } + } + } + + &-logo { + font-size: 22px; + color: white; + } +} + +.__dumi-default-search-input { + background-color: rgba(@blockquote-text-primary, 10%); + border-radius: @border-radius; +} + +.__dumi-default-dark-switch { + display: none; +} + +.__dumi-default-menu-nav-list { + > li { + margin: 0 15px; + margin-bottom: 10px; + + > a { + &.active, &:hover { + background-color: lighten(@bg-primary, 60%); + color: @blockquote-text-primary; + border-radius: @border-radius; + } + } + } +} + +pre { + color: #333 !important; +} + +[data-prefers-color=dark] { + .markdown a { + color: #844d28 !important; + } +} + +.__dumi-default-search { + > ul { + border: 0; + box-shadow: @box-shadow; + } +} + +.__dumi-site-tree { + border-radius: @border-radius; +} diff --git a/.dumi/theme/style/variables.less b/.dumi/theme/style/variables.less new file mode 100644 index 0000000..d528484 --- /dev/null +++ b/.dumi/theme/style/variables.less @@ -0,0 +1,16 @@ +// colors +@bg-primary: #844d28; +@text-primary: #454d64; +@text-secondary: #718096; +@text-dark: #1a202c; +@blockquote-text-primary: #333; +@border-primary: #ddd; + +// shapes +@border-radius: 6px; + +// transitions +@transition-delay: .2s; + +// shadows +@box-shadow: 0 0 50px rgba(0, 0, 0, .1); diff --git a/.umirc.ts b/.umirc.ts index 42c351d..3219c37 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -24,37 +24,24 @@ export default defineConfig({ styles: [ 'https://unpkg.zhimg.com/antd@4.16.6/dist/antd.min.css', 'img { max-width: 86% !important; display: block; margin: 0 auto; }', - '.__dumi-default-locale-select, .__dumi-default-search-input { border-radius: 2px !important; }', - '.__dumi-default-locale-select, .__dumi-default-search-input:focus { border: 1px solid rgba(255, 255, 255, .4) !important; }', - '.__dumi-default-search-input { border: 1px solid transparent !important; }', '.__dumi-default-menu-doc-locale { display: none !important; }', - '.__dumi-default-navbar { background-color: #0b0f13 !important; box-shadow: 0 0 0.2rem rgb(0 0 0 / 10%), 0 0.2rem 0.4rem rgb(0 0 0 / 20%) !important; }', - '.__dumi-default-search-input { background-color: rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .8) !important; }', - '.__dumi-default-navbar-logo { font-size: 22px !important; color: white !important; }', - '.__dumi-default-navbar nav > span > a:not(.active) { color: rgba(255, 255, 255, .6) !important; }', - '.__dumi-default-navbar nav > span > a:not(.active):hover { color: rgba(255, 255, 255, .8) !important; }', - '.__dumi-default-navbar nav > span > a.active::after { display: none !important; }', '.__dumi-default-locale-select:hover { background-color: transparent !important; }', '.__dumi-default-menu[data-mode=\'site\'] .__dumi-default-menu-list > li > a::after { display: none !important; }', - '.__dumi-default-menu[data-mode=\'site\'] .__dumi-default-menu-list > li > a.active { background: rgb(132, 77, 40, 0.3) !important; }', '.__dumi-default-menu-inner ul li a::before, .__dumi-default-menu-inner ul li > span::before { display: none !important; }', '.__dumi-default-layout-hero button { border-radius: 4px !important; }', '.__dumi-default-menu[data-mode=\'site\'] { background: white !important; }', 'code, pre { font-family: Menlo, Consolas, Courier, monospace !important; font-size: 14px; background: transparent !important; }', - '[data-prefers-color=dark] .markdown a { color: #844d28 !important; }', - 'pre { color: #333 !important; }', 'h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { font-size: inherit; }', 'https://cdn.jsdelivr.net/npm/prism-themes@1.5.0/themes/prism-vs.css', '[data-prefers-color=dark] .__dumi-default-menu-inner ul li a:hover, [data-prefers-color=dark] .__dumi-default-menu-inner ul li > span:hover, [data-prefers-color=dark] .__dumi-default-menu-inner ul li a.active, [data-prefers-color=dark] .__dumi-default-menu-inner ul li > span.active { color: #844d28 !important; }', '[data-prefers-color=dark] code[class*="language-"], [data-prefers-color=dark] pre[class*="language-"] { color: white !important; }', '[data-prefers-color=dark] .markdown *:not(pre) code { color: #844d28 !important; }', '.__dumi-default-menu[data-mode=\'site\'] { padding-top: 0 !important; }', - '[data-prefers-color=dark] .__dumi-default-navbar nav > span > a:hover, [data-prefers-color=dark] .__dumi-default-navbar nav > span > a.active, [data-prefers-color=dark] .__dumi-default-layout-footer-meta, [data-prefers-color=dark] .__dumi-default-layout-footer-meta > span:last-child::before { color: #844d28 !important; }', '.__dumi-default-menu[data-mode=\'site\'] .__dumi-default-menu-list { margin-top: 50px; }', '@media (min-width: 960px) { div[data-show-sidemenu="true"] .__dumi-default-layout-content { padding-left: 10%; padding-right: 10%; } }', '@media (min-width: 1680px) { div[data-show-sidemenu="true"] .__dumi-default-layout-content { padding-left: 26%; padding-right: 26%; } }', '.markdown blockquote { border-left-color: #844d28 !important; }', - '.markdown *:not(pre) code { color: #844d28 !important; }' + '.markdown *:not(pre) code { color: #844d28 !important; }', ], favicon: '/public/images/favicon.ico', resolve: { diff --git a/docs/public/css/docs.css b/docs/public/css/docs.css index eed460e..1555eed 100644 --- a/docs/public/css/docs.css +++ b/docs/public/css/docs.css @@ -1,3 +1,3 @@ -__dumi-default-navbar { +.__dumi-default-navbar { background-color: #0b0f13; } diff --git a/package.json b/package.json index de1cd81..ebdd68e 100644 --- a/package.json +++ b/package.json @@ -34,5 +34,8 @@ "npm-run-all": "^4.1.5", "rimraf": "^3.0.2", "typescript": "^3.7.7" + }, + "dependencies": { + "dumi-theme-default": "^1.1.9" } }