From c100907a94741bd8536db463640832940e8498a0 Mon Sep 17 00:00:00 2001 From: xsf0105 Date: Thu, 28 Mar 2024 16:18:23 +0800 Subject: [PATCH] update --- package-lock.json | 48 ++--- package.json | 4 +- src/assets/styles/{theme.scss => theme.css} | 227 +++++++++----------- src/docs_vue/main.ts | 4 +- src/views/main.scss | 16 +- 5 files changed, 125 insertions(+), 174 deletions(-) rename src/assets/styles/{theme.scss => theme.css} (62%) diff --git a/package-lock.json b/package-lock.json index b673b0d..a7b25dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "2.0.0", "license": "MIT", "dependencies": { - "quark-doc-header": "^2.0.27", - "quark-doc-home": "^2.0.27", + "quark-doc-header": "^2.0.31", + "quark-doc-home": "^2.0.32", "quarkd": "^1.0.2", "sass": "~1.32.0", "vue-i18n": "^9.1.10", @@ -12761,9 +12761,9 @@ } }, "node_modules/quark-doc-header": { - "version": "2.0.27", - "resolved": "https://registry.npmjs.org/quark-doc-header/-/quark-doc-header-2.0.27.tgz", - "integrity": "sha512-PXpuBeC/RsH18BI586zu485rjVBUqQkUtFn1s4ZrhLw6GLThB8NxsC1LM8A1p73X64ZQPB4ROj79nZ2rPaOYHQ==", + "version": "2.0.31", + "resolved": "https://registry.npmjs.org/quark-doc-header/-/quark-doc-header-2.0.31.tgz", + "integrity": "sha512-T4TeVGzU/0StinTaQvXWsX2yxHjpa8AJa6b8ye/p+KsZIYtiqfboqVrDufJ+WlejjAZVUMF0Zj6dJ6Zgr8Waaw==", "dependencies": { "@docsearch/js": "^3.4.0", "quarkc": "^1.0.37" @@ -12773,21 +12773,21 @@ } }, "node_modules/quark-doc-home": { - "version": "2.0.27", - "resolved": "https://registry.npmjs.org/quark-doc-home/-/quark-doc-home-2.0.27.tgz", - "integrity": "sha512-I2elrXLOpOzcPq+pOCI9Qnw+StCTCIlE0qOF5wI73nkLUzkdZd8J0SAOpyaakHokoLpiCzh5Q2VeqWVhhxs76A==", + "version": "2.0.32", + "resolved": "https://registry.npmjs.org/quark-doc-home/-/quark-doc-home-2.0.32.tgz", + "integrity": "sha512-becNJA/oPDSAbVOF/1YAJn6kuIG+M7QNsUs4xDVRuXcN9paCaikb+AAU5hw7ilWYUacIQtP1ZspLsJJF0wNWCw==", "dependencies": { - "quark-doc-header": "^2.0.27", - "quarkc": "^1.0.40" + "quark-doc-header": "^2.0.31", + "quarkc": "^1.0.41" }, "engines": { "node": ">=14.18.0" } }, "node_modules/quarkc": { - "version": "1.0.40", - "resolved": "https://r.cnpmjs.org/quarkc/-/quarkc-1.0.40.tgz", - "integrity": "sha512-wNYRV8pGKo/kq4APFwQgIurxKcu1uLDqB1ESLJGhiK60R0FBQR3VTcoVWp6Vbc8moX1UfaCrSC9PVl8lGZicRw==", + "version": "1.0.41", + "resolved": "https://registry.npmjs.org/quarkc/-/quarkc-1.0.41.tgz", + "integrity": "sha512-fD6keMjYJFEg8Xk9ee2g4N2NNJQSWxUffBbaohOoduxz2NCpVXgOyCu4vnu+QzK7SKjk9inN+INgsYK1GWpnxw==", "dependencies": { "@babel/runtime": "^7.22.5" } @@ -26713,27 +26713,27 @@ "dev": true }, "quark-doc-header": { - "version": "2.0.27", - "resolved": "https://registry.npmjs.org/quark-doc-header/-/quark-doc-header-2.0.27.tgz", - "integrity": "sha512-PXpuBeC/RsH18BI586zu485rjVBUqQkUtFn1s4ZrhLw6GLThB8NxsC1LM8A1p73X64ZQPB4ROj79nZ2rPaOYHQ==", + "version": "2.0.31", + "resolved": "https://registry.npmjs.org/quark-doc-header/-/quark-doc-header-2.0.31.tgz", + "integrity": "sha512-T4TeVGzU/0StinTaQvXWsX2yxHjpa8AJa6b8ye/p+KsZIYtiqfboqVrDufJ+WlejjAZVUMF0Zj6dJ6Zgr8Waaw==", "requires": { "@docsearch/js": "^3.4.0", "quarkc": "^1.0.37" } }, "quark-doc-home": { - "version": "2.0.27", - "resolved": "https://registry.npmjs.org/quark-doc-home/-/quark-doc-home-2.0.27.tgz", - "integrity": "sha512-I2elrXLOpOzcPq+pOCI9Qnw+StCTCIlE0qOF5wI73nkLUzkdZd8J0SAOpyaakHokoLpiCzh5Q2VeqWVhhxs76A==", + "version": "2.0.32", + "resolved": "https://registry.npmjs.org/quark-doc-home/-/quark-doc-home-2.0.32.tgz", + "integrity": "sha512-becNJA/oPDSAbVOF/1YAJn6kuIG+M7QNsUs4xDVRuXcN9paCaikb+AAU5hw7ilWYUacIQtP1ZspLsJJF0wNWCw==", "requires": { - "quark-doc-header": "^2.0.27", - "quarkc": "^1.0.40" + "quark-doc-header": "^2.0.31", + "quarkc": "^1.0.41" } }, "quarkc": { - "version": "1.0.40", - "resolved": "https://r.cnpmjs.org/quarkc/-/quarkc-1.0.40.tgz", - "integrity": "sha512-wNYRV8pGKo/kq4APFwQgIurxKcu1uLDqB1ESLJGhiK60R0FBQR3VTcoVWp6Vbc8moX1UfaCrSC9PVl8lGZicRw==", + "version": "1.0.41", + "resolved": "https://registry.npmjs.org/quarkc/-/quarkc-1.0.41.tgz", + "integrity": "sha512-fD6keMjYJFEg8Xk9ee2g4N2NNJQSWxUffBbaohOoduxz2NCpVXgOyCu4vnu+QzK7SKjk9inN+INgsYK1GWpnxw==", "requires": { "@babel/runtime": "^7.22.5" } diff --git a/package.json b/package.json index d020948..61c4dfe 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,8 @@ "push2GithubWebsite": "node ./scripts/push2GithubWebsite" }, "dependencies": { - "quark-doc-header": "^2.0.27", - "quark-doc-home": "^2.0.27", + "quark-doc-header": "^2.0.31", + "quark-doc-home": "^2.0.32", "quarkd": "^1.0.2", "sass": "~1.32.0", "vue-i18n": "^9.1.10", diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.css similarity index 62% rename from src/assets/styles/theme.scss rename to src/assets/styles/theme.css index 3e6a394..e9cda8a 100644 --- a/src/assets/styles/theme.scss +++ b/src/assets/styles/theme.css @@ -1,4 +1,5 @@ +/* light mode theme */ :root { --font-family-base: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; @@ -34,18 +35,6 @@ font-family: var(--font-family-base); } -.nav-item .nav-active { - color: var(--brand-color); -} - -.action .why-quark { - background-color: var(--main-bg); - color: #000; - &:hover { - background-color: #f6f6f6; - } -} - .nav-item a { color: var(--text-font-color-light); font-family: var(--font-family-base); @@ -53,12 +42,10 @@ .nav-item a:hover { color: var(--brand-color); } -.social-links a, -.translate-lang a { +.social-links a { color: rgba(60, 60, 67, .7); } -.social-links a:hover svg, -.translate-lang a:hover svg{ +.social-links a:hover svg { color: rgba(60, 60, 67, .92); transition: color .25s; } @@ -108,11 +95,12 @@ } .doc-content-document ul li, -.doc-content-document ol li,{ +.doc-content-document ol li { color: var(--text-font-color); } +/* dark mode theme */ html.dark { --link-font-color-dark: rgba(255, 255, 255, 0.87); --main-bg: #23272f; @@ -120,6 +108,7 @@ html.dark { --header-bg-light: #fff; --text-font-color-light: rgba(255, 255, 255, 0.5); + /* --text-font-color-light: rgba(255, 255, 255, 0.87); */ --text-code-font-color: #c9def1; --brand-color: #646cff; @@ -136,122 +125,98 @@ html.dark { --scroll-down-dark-color: var(--link-font-color-dark); --arrow-dark-mode-icon: url('https://raw.githubusercontent.com/hellof2e/static/main/arrow-dark-mode.png'); --footer-bg: conic-gradient(from 90deg at -10% 100%, #2b303b 0deg, #2b303b 90deg, #16181d 1turn); + --logo-dark-mode: url('https://raw.githubusercontent.com/hellof2e/static/main/quarkd-logo-light-mode.png'); font-family: var(--font-family-base); color: var(--link-font-color-dark); background-color: var(--main-bg); +} + +html.dark pre { + color: #1e1e20; +} + +html.dark .paragraph { + color: var(--nav-link-color); +} + +html.dark .nav-item .nav-active { + color: var(--brand-color); +} + +html.dark .flyout-menu .menu-wrap { + background: var(--main-bg); + box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06); + border: 1px solid rgba(84, 84, 84, .48); +} + +html.dark .flyout-menu .menu-group-title { + color: rgba(235, 235, 235, .38); +} + +html.dark .flyout-menu .menu-link { + color: rgba(255, 255, 255, .87); +} +html.dark .flyout-menu .menu-link:hover { + color: #646cff; +} + + +html.dark .nav-item a:hover, +html.dark .nav-item button:hover { + color: rgba(255 255 255 / 1); +} +html.dark .nav-item .nav-active { + color: #fff; +} + +html.dark .social-links a:hover svg{ + color: #fff; +} + +html.dark .doc-nav a { + color: #fff; +} +html.dark .doc-nav a:hover { + color: var(--brand-color); +} + +html.dark .translations:before, .appearance:before, .social-links:before { + background-color: rgba(60, 60, 67, 0.92); +} + + +html.dark .doc-content-document p > code { + color: var(--text-code-font-color); +} +html.dark .doc-content-document strong { + color: var(--text-font-color); +} +html.dark .doc-content-document blockquote p { + color: #bcc0ff; +} +html.dark .doc-content-document a { + color: #9499ff; + text-decoration: underline; +} +html.dark .doc-content-document a:hover { + color: #bcc0ff; +} - pre { - color: #1e1e20; - } - - .flyout-menu .menu-wrap { - background: var(--main-bg); - box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06); - border: 1px solid rgba(84, 84, 84, .48); - } - - .flyout-menu .menu-group-title { - color: rgba(235, 235, 235, .38); - } - - .flyout-menu .menu-link { - color: rgba(255, 255, 255, .87); - &:hover { - color: #646cff; - } - } - - - .nav-item a:hover, - .nav-item button:hover { - color: rgba(255 255 255 / 1); - } - .nav-item .nav-active { - color: #fff; - } - - .social-links a:hover svg{ - color: #fff; - } - .translate-lang:hover { - color: #fff; - } - - .doc-nav a { - color: #fff; - } - .doc-nav a:hover { - color: var(--brand-color); - } - - .translations:before, .appearance:before, .social-links:before { - background-color: rgba(60, 60, 67, 0.92); - } - - - .doc-content-document p > code { - color: var(--text-code-font-color); - } - .doc-content-document strong { - color: var(--text-font-color); - } - .doc-content-document blockquote p { - color: #bcc0ff; - } - .doc-content-document a { - color: #9499ff; - text-decoration: underline; - } - .doc-content-document a:hover { - color: #bcc0ff; - } - - .doc-content-document table { - border: 1px solid #333; - } - .doc-content-document table th, - .doc-content-document table td { - border-left: 1px solid #333; - color: #fff; - } - .doc-content-document table td { - border-top: 1px solid #333; - } - - .doc-content-document ul li, - .doc-content-document ol li - .doc-content-document strong { - color: var(--text-font-color); - } - - .action .why-quark { - background-color: #313136; - color: #fff; - &:hover { - background-color: #2c2c30; - } - } -} - - - - - -// @media screen and (min-width: 860px) { -// .doc-nav { -// display: none; -// } -// .doc-content { -// margin-left: 0!important; -// } -// } - -// @media screen and (max-width: 880px) { -// .doc-nav { -// display: block; -// } -// .doc-content { -// margin-left: 260px; -// } -// } \ No newline at end of file +html.dark .doc-content-document table { + border: 1px solid #333; +} +html.dark .doc-content-document table th, +html.dark .doc-content-document table td { + border-left: 1px solid #333; + color: #fff; +} +html.dark .doc-content-document table td { + border-top: 1px solid #333; +} + +html.dark .doc-content-document ul li, +html.dark .doc-content-document ol li + html.dark .doc-content-document strong { + color: var(--text-font-color); +} diff --git a/src/docs_vue/main.ts b/src/docs_vue/main.ts index a6767a0..7b71f08 100644 --- a/src/docs_vue/main.ts +++ b/src/docs_vue/main.ts @@ -9,10 +9,10 @@ import "@/assets/styles/reset.scss"; import "@/assets/styles/md-style.scss"; // 主题 light or dark -import "@/assets/styles/theme.scss"; +import "@/assets/styles/theme.css"; if (isMobile) { - location.replace("https://quark-design.hellobike.com/demo/demo.html#/"); + location.replace("https://quark-design.hellobike.com/demo/demo.html#/"); } const app = createApp(App); diff --git a/src/views/main.scss b/src/views/main.scss index ca32568..794e570 100644 --- a/src/views/main.scss +++ b/src/views/main.scss @@ -46,17 +46,6 @@ text-align: center; } -// .home-subtitle{ -// padding-top: 12px; -// max-width: 576px; -// line-height: 32px; -// font-size: 20px; -// margin: 0 auto; -// font-weight: 500; -// white-space: pre-wrap; -// font-size: 20px; -// } - .home-subtitle2{ padding-top: 12px; font-size: 20px; @@ -132,9 +121,6 @@ background-color: #4f57f8; } } - .why-quark { - border-color: #525259; - } } .scroll-down { @@ -326,7 +312,7 @@ color: #fff; text-align: left; } - + } .box1, .box2,