From 1c4e6a3ea7cd80f04e214e74851df9cc59969471 Mon Sep 17 00:00:00 2001 From: ciaochaos <1272777550@qq.com> Date: Tue, 23 Jun 2020 21:10:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B7=B1=E8=89=B2=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/MP_verify_er6mFebsl0UgJtQ2.txt | 1 + public/MP_verify_nGEJNyOtlgsMTFCQ.txt | 1 + src/components/Qrcode.css | 100 ++++++++++++++------------ src/components/app/App.css | 3 +- src/components/app/PartFooter.js | 2 + src/components/app/PartMore.js | 1 + src/index.css | 37 ++++++++++ src/qrbtf-logo.svg | 30 ++++---- 8 files changed, 112 insertions(+), 63 deletions(-) create mode 100644 public/MP_verify_er6mFebsl0UgJtQ2.txt create mode 100644 public/MP_verify_nGEJNyOtlgsMTFCQ.txt diff --git a/public/MP_verify_er6mFebsl0UgJtQ2.txt b/public/MP_verify_er6mFebsl0UgJtQ2.txt new file mode 100644 index 0000000..447a7e1 --- /dev/null +++ b/public/MP_verify_er6mFebsl0UgJtQ2.txt @@ -0,0 +1 @@ +er6mFebsl0UgJtQ2 \ No newline at end of file diff --git a/public/MP_verify_nGEJNyOtlgsMTFCQ.txt b/public/MP_verify_nGEJNyOtlgsMTFCQ.txt new file mode 100644 index 0000000..712789f --- /dev/null +++ b/public/MP_verify_nGEJNyOtlgsMTFCQ.txt @@ -0,0 +1 @@ +nGEJNyOtlgsMTFCQ \ No newline at end of file diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index 2dfbf38..a0b88db 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -1,6 +1,6 @@ .Qr-titled { - background-color: #f5f5f7; + background-color: var(--content-bg-color); box-sizing: border-box; padding-top: calc((10px + 2vmin) * 2); padding-bottom: calc((10px + 2vmin) * 2); @@ -121,6 +121,7 @@ /*padding: 23px;*/ overflow: hidden; display: flex; + opacity: var(--qr-opacity); background-color: white; width: calc((100vw - 56px) / 2); height: calc((100vw - 56px) / 2); @@ -184,14 +185,19 @@ .Qr-item-selected .Qr-item-image { border-color: #44D7B6 !important; + opacity: 1!important; } .Qr-item-selected .Qr-item-detail { - color: #000000; + opacity: 1; +} + +.Qr-item:hover .Qr-item-image { + opacity: var(--qr-opacity-hover); } .Qr-item:hover .Qr-item-detail { - color: #000000; + opacity: 1; } .Qr-item-selected .Qr-item-desc-inner { @@ -200,7 +206,8 @@ } .Qr-item-detail { - color: rgba(0,0,0,0.3); + opacity: 0.3; + color: var(--font-color); margin-top: 5px; font-size: 1em; text-align: left; @@ -226,7 +233,7 @@ width: calc((100vw - 56px) / 2); text-align: left; font-size: 12px; - color: rgba(0,0,0,0.6); + color: var(--input-font-color); -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; @@ -246,13 +253,12 @@ .Qr-item-desc a { font-weight: bold; padding: 0px 0; - color: #000000; + color: var(--font-color); box-sizing: border-box; text-decoration: none; } .Qr-item-desc a:hover { - color: #000000; text-decoration: underline; } @@ -327,21 +333,21 @@ td { .big-input { height: calc(2em + 6px); font-size: calc(10px + 2vmin); - border: rgba(0,0,0,0.12) solid 2px; + border: var(--border-color) solid 2px; margin-left: 10px; flex: 1; } @media (min-width: 500px) { .big-input { - border: rgba(0,0,0,0.12) solid 3px; + border: var(--border-color) solid 3px; } } .Qr-upload { - color: rgba(102,102,102,1); + color: var(--upload-color); font-size: calc(10px + 2vmin); - border: rgba(0,0,0,0.12) solid 2px; + border: var(--border-color) solid 2px; width: calc(2em + 6px)!important; height: calc(2em + 6px); cursor: pointer; @@ -361,7 +367,7 @@ td { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-appearance: none; -moz-text-size-adjust: 100%; - background: white; + background: var(--bg-color); font-family: 'Futura', sans-serif; display: flex; justify-content: center; @@ -370,13 +376,13 @@ td { @media (min-width: 500px) { .Qr-upload { - border: rgba(0,0,0,0.12) solid 3px; + border: var(--border-color) solid 3px; } } .Qr-upload:hover { - border-color: #44D7B6; - color: #44D7B6; + border-color: var(--border-color-focus); + color: var(--border-color-focus); } .Qr-upload:active { @@ -402,13 +408,13 @@ td { .small-input { margin: 0; font-size: 0.9em; - border: rgba(0,0,0,0.12) solid 2px; + border: var(--border-color) solid 2px; width: calc((100vw - 56px) / 2); } @media (min-width: 500px) { .small-input { - border: rgba(0,0,0,0.12) solid 3px; + border: var(--border-color) solid 3px; font-size: 0.8em; width: 200px; } @@ -435,7 +441,8 @@ td { -moz-appearance: none; -moz-text-size-adjust: 100%; font-family: 'Futura', sans-serif; - color: rgba(0,0,0,0.6); + color: var(--input-font-color); + background-color: var(--bg-color); } input::-webkit-outer-spin-button, @@ -466,16 +473,16 @@ input[type="number"]{ -moz-appearance: none; -moz-text-size-adjust: 100%; font-family: 'Futura', sans-serif; - color: rgba(0,0,0,0.6); + color: var(--input-font-color); font-size: 0.9em; - border: rgba(0,0,0,0.12) solid 2px; + border: var(--border-color) solid 2px; width: calc((100vw - 56px) / 2); padding-left: 1em; } @media (min-width: 500px) { .Qr-select { - border: rgba(0,0,0,0.12) solid 3px; + border: var(--border-color) solid 3px; width: 200px; font-size: 0.8em; } @@ -483,7 +490,7 @@ input[type="number"]{ .Qr-input::placeholder { font-family: 'Futura', sans-serif; - color: rgba(0,0,0,0.18); + color: var(--border-color); } .Qr-Centered { @@ -495,13 +502,13 @@ input[type="number"]{ } .Qr-input:focus { - border-color: #44D7B6; - color: #000000; + border-color: var(--border-color-focus); + color: var(--input-font-color-focus); } .Qr-select:focus { - border-color: #44D7B6; - color: #000000; + border-color: var(--border-color-focus); + color: var(--input-font-color-focus); } @@ -556,7 +563,7 @@ input[type="number"]{ outline: none; padding: 0; box-sizing: border-box; - border: rgba(0,0,0,0.12) solid 2px; + border: var(--border-color) solid 2px; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; @@ -568,13 +575,14 @@ input[type="number"]{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-appearance: none; -moz-text-size-adjust: 100%; - background: white; + background: var(--bg-color); font-family: 'Futura', sans-serif; + color: var(--input-font-color); } @media (min-width: 500px) { .dl-btn { - border: rgba(0,0,0,0.12) solid 3px; + border: var(--border-color) solid 3px; font-size: 0.8em; } } @@ -589,21 +597,21 @@ input[type="number"]{ } .dl-btn:hover { - border-color: #44D7B6; - color: #44D7B6; + border-color: var(--border-color-focus); + color: var(--border-color-focus); } .dl-btn-active { - border-color: #44D7B6; - color: #44D7B6; + border-color: var(--border-color-focus); + color: var(--border-color-focus); } .dl-btn:active { -webkit-transition-duration: 0s; /* Safari */ transition-duration: 0s; -moz-transition-duration: 0s; - border-color: #3BBC9F; - color: #3BBC9F; + border-color: var(--border-color-active); + color: var(--border-color-active); } @media (min-width: 500px) { @@ -617,16 +625,16 @@ input[type="number"]{ } .Qr-footer { - color: #515154; + color: var(--footer-font-color); margin-bottom: -1em; } .Gray { - color: #86868B; + color: var(--footer-font-color-lighter); } .gray { - color: #d2d2d7; + color: var(--footer-font-color-lighter); } .Qr-footer div { @@ -635,7 +643,7 @@ input[type="number"]{ } .Qr-footer strong { - color: #000000 !important; + color: var(--font-color) !important; } .Qr-footer-part span { @@ -675,25 +683,25 @@ a:hover { .Qr-article p { font-size: 14px; line-height: 1.7em; - color: #636366; + color: var(--p-font-color); letter-spacing: 0.05em; } .Qr-article p b { font-weight: bold; - color: #000000; + color: var(--font-color); } .Qr-article p a { font-weight: bold; padding: 1px 0; - color: #000000; - border-bottom: 1px solid #000000; + color: var(--font-color); + border-bottom: 1px solid var(--font-color); } .Qr-article p a:hover { - color: #000000; - border-bottom: 1px solid #000000; + color: var(--font-color); + border-bottom: 1px solid var(--font-color); text-decoration: none; } @@ -723,7 +731,7 @@ a:hover { select { padding: 0; - background-color: #FFFFFF; + background-color: var(--bg-color); } select:-moz-focusring { diff --git a/src/components/app/App.css b/src/components/app/App.css index f1513ac..942952b 100644 --- a/src/components/app/App.css +++ b/src/components/app/App.css @@ -6,14 +6,13 @@ } .App-header { - background-color: #FFFFFF; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); - color: black; + color: var(--font-color); } .Layout { diff --git a/src/components/app/PartFooter.js b/src/components/app/PartFooter.js index f79cb57..e446e80 100644 --- a/src/components/app/PartFooter.js +++ b/src/components/app/PartFooter.js @@ -47,6 +47,8 @@ const PartFooter = () => ( 董斯佳 丨  野生符号 丨  + Cigaret 丨  JaBi 扎比 丨  (

Star

最新消息

+

2020.6.23
新增深色模式。

2020.6.22
新增 A — a1、A — a2、A — b1、A — b2 样式，添加样式描述，新增桌面端横向拖拽滑动。

2020.6.11
QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。访问项目。

2020.5.23
网站开源啦！点击访问 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 QRBTF 开源啦！来写个二维码样式吧～。

diff --git a/src/index.css b/src/index.css index 068aa6d..ce438fa 100644 --- a/src/index.css +++ b/src/index.css @@ -3,7 +3,44 @@ src: url('./Futura.ttc'); } +:root { + color-scheme: light dark; + --bg-color: #FFFFFF; + --content-bg-color: #F5F5F7; + --font-color: rgba(0,0,0,1); + --p-font-color: rgba(0,0,0,0.6); + --footer-font-color: rgba(0,0,0,0.6); + --footer-font-color-lighter: rgba(0,0,0,0.3); + --input-font-color: rgba(0,0,0,0.6); + --input-font-color-focus: rgba(0,0,0,1); + --border-color: rgba(0,0,0,0.12); + --border-color-focus: #44D7B6; + --border-color-active: #3BBC9F; + --qr-opacity: calc(1); + --qr-opacity-hover: calc(1); + --upload-color: rgba(102,102,102,1); +} + +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #000000; + --content-bg-color: #1D1D1F; + --font-color: rgba(255, 255, 255, .9); + --p-font-color: rgba(255,255,255,0.6); + --footer-font-color: rgba(255,255,255,0.6); + --footer-font-color-lighter: rgba(255,255,255,0.3); + --input-font-color: rgba(255,255,255,0.7); + --input-font-color-focus: rgba(255,255,255,.9); + --border-color: rgba(255,255,255,0.18); + --border-color-focus: #44D7B6; + --qr-opacity: calc(0.5); + --qr-opacity-hover: calc(0.8); + --upload-color: rgba(150,150,150,1); + } +} + body { + background-color: var(--bg-color); margin: 0; font-family: 'Futura', sans-serif; -webkit-font-smoothing: antialiased; diff --git a/src/qrbtf-logo.svg b/src/qrbtf-logo.svg index 7d7667a..cd55ec5 100644 --- a/src/qrbtf-logo.svg +++ b/src/qrbtf-logo.svg @@ -42,7 +42,7 @@ > @@ -138,7 +138,7 @@ > @@ -380,7 +380,7 @@ > @@ -469,7 +469,7 @@ > @@ -553,7 +553,7 @@ > @@ -637,7 +637,7 @@ >