新增深色模式
This commit is contained in:
ciaochaos
parent
31195ed9ba
commit
1c4e6a3ea7
|
|
@ -0,0 +1 @@
|
|||
er6mFebsl0UgJtQ2
|
||||
|
|
@ -0,0 +1 @@
|
|||
nGEJNyOtlgsMTFCQ
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -47,6 +47,8 @@ const PartFooter = () => (
|
|||
<span>董斯佳<span className="gray"> 丨 </span></span>
|
||||
<span><LinkTrace href="https://mp.weixin.qq.com/s/qCTnkPWEX6AfL2CJua_AqQ" rel="noopener noreferrer"
|
||||
target="_blank">野生符号</LinkTrace><span className="gray"> 丨 </span></span>
|
||||
<span><LinkTrace href="https://github.com/kongxiangyan" rel="noopener noreferrer"
|
||||
target="_blank">Cigaret</LinkTrace><span className="gray"> 丨 </span></span>
|
||||
<span><LinkTrace href="https://mp.weixin.qq.com/s/NdVsF_FJxqSZOyGionoo1Q" rel="noopener noreferrer"
|
||||
target="_blank">JaBi 扎比</LinkTrace><span className="gray"> 丨 </span></span>
|
||||
<span><LinkTrace href="http://nav.6soluo.com/" rel="noopener noreferrer"
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ const PartMore = () => (
|
|||
<div className="Qr-article">
|
||||
<p><GitHubButton className="github-btn" href="https://github.com/ciaochaos/qrbtf" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
|
||||
<h2>最新消息</h2>
|
||||
<p><b>2020.6.23</b><br/>新增深色模式。</p>
|
||||
<p><b>2020.6.22</b><br/>新增 A — a1、A — a2、A — b1、A — b2 样式，添加样式描述，新增桌面端横向拖拽滑动。</p>
|
||||
<p><b>2020.6.11</b><br/>QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。<LinkTrace href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</LinkTrace>。</p>
|
||||
<p><b>2020.5.23</b><br/>网站开源啦！<LinkTrace href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</LinkTrace> 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦！来写个二维码样式吧～</LinkTrace>。</p>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
></animate>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
d="M2407.3796,576c0-52.6933,0-105.3867,0-158.08
|
||||
c0-2.0784,0.0005-4.1568-0.0034-6.2352c-0.0012-0.6671-0.0029-1.3342-0.0054-2.0013c-0.0046-1.2442-0.0117-2.4883-0.0237-3.7325
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
></animate>
|
||||
<line
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
x1="2259.0596" y1="576" x2="2259.0596" y2="288"
|
||||
/>
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
></animate>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
d="M2555.6995,576c0-52.6933,0-105.3867,0-158.08
|
||||
c0-2.0784,0.0005-4.1568-0.0034-6.2352c-0.0012-0.6671-0.0027-1.3342-0.0054-2.0013c-0.0044-1.2442-0.0115-2.4883-0.0234-3.7325
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
></animate>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
d="M2119.0391,432
|
||||
c0-6.5931-0.6033-13.1685-1.803-19.6516c-1.2717-6.8726-3.2068-13.6031-5.7795-20.1017
|
||||
|
|
@ -252,7 +252,7 @@
|
|||
></animate>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
d="M1810.8269,342.4639
|
||||
c-7.9363-5.353-16.5452-9.6255-25.6079-12.7087c-9.4066-3.2003-19.2096-5.0871-29.1322-5.6072
|
||||
|
|
@ -345,7 +345,7 @@
|
|||
></animate>
|
||||
<line
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
x1="1230.6259" y1="324" x2="1461.0259" y2="324"
|
||||
/>
|
||||
|
|
@ -380,7 +380,7 @@
|
|||
></animate>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
d="M1460.1464,121.7508
|
||||
c-2.4275-1.7637-4.9656-3.3752-7.5939-4.8225c-1.3143-0.7236-2.6511-1.4062-4.0079-2.0463
|
||||
|
|
@ -434,7 +434,7 @@
|
|||
></animate>
|
||||
<line
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
x1="959.2219" y1="324" x2="1189.6219" y2="324"
|
||||
/>
|
||||
|
|
@ -469,7 +469,7 @@
|
|||
></animate>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
d="M1074.422,208.8c0,76.8,0,153.6,0,230.4
|
||||
c0,1.4623-0.0001,2.9246-0.0015,4.3869c-0.0012,1.447-0.0035,2.894-0.0063,4.341c-0.0033,1.5402-0.0071,3.0804-0.0095,4.6206
|
||||
|
|
@ -518,7 +518,7 @@
|
|||
></animate>
|
||||
<line
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
x1="679.5572" y1="72" x2="679.5572" y2="576"
|
||||
/>
|
||||
|
|
@ -553,7 +553,7 @@
|
|||
></animate>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
d="M679.5572,432
|
||||
c0,6.5931,0.6033,13.1685,1.8029,19.6516c1.2719,6.8726,3.2069,13.6031,5.7796,20.1017
|
||||
|
|
@ -602,7 +602,7 @@
|
|||
></animate>
|
||||
<line
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
x1="468.0493" y1="576" x2="468.0493" y2="288"
|
||||
/>
|
||||
|
|
@ -637,7 +637,7 @@
|
|||
></animate>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
d="M582.3699,337.7508
|
||||
c-2.1679-1.5751-4.424-3.0288-6.7539-4.3526c-1.1687-0.664-2.3559-1.2954-3.56-1.8929c-1.204-0.5976-2.4249-1.1613-3.6605-1.6905
|
||||
|
|
@ -691,7 +691,7 @@
|
|||
></animate>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
d="M324,432c0-6.5931-0.6033-13.1685-1.8029-19.6516
|
||||
c-1.2718-6.8726-3.2069-13.6031-5.7796-20.1017c-5.4315-13.7201-13.6146-26.1785-24.0485-36.6128
|
||||
|
|
@ -736,7 +736,7 @@
|
|||
></animate>
|
||||
<line
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
x1="324" y1="288" x2="324" y2="756"
|
||||
/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 29 KiB |
Loading…
Reference in New Issue