tweak: extract site dark style into dark.less

This commit is contained in:
ycjcl868 2019-12-27 18:14:29 +08:00
parent bbf3875caf
commit b4d71beb92
11 changed files with 333 additions and 341 deletions

332
site/theme/static/dark.less Normal file
View File

@ -0,0 +1,332 @@
[data-theme='dark'] {
#header {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65);
}
#search-box input {
&::placeholder {
color: fade(@white, 30%);
}
}
.toc-affix {
.ant-affix {
background: #141414;
}
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
color: rgba(255, 255, 255, 0.65);
background: #262626;
}
.code-box {
border: 1px solid #303030;
.code-box-title {
&,
a {
color: fade(@white, 65%);
}
}
.code-box-description {
p {
color: fade(@white, 65%);
}
}
&-expand-trigger {
position: relative;
margin-left: 12px;
color: #fff;
font-size: 20px;
cursor: pointer;
opacity: 0.45;
transition: all 0.3s;
&:hover {
opacity: 0.65;
}
}
&-demo {
border-bottom: 1px solid #303030;
}
&-codepen {
background: transparent
url('https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/R5sDUSunb1/OtZslpOjYXijshDERXwc.svg')
center / 14px no-repeat;
}
&-riddle {
background: transparent
url('https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/sXMM9YD8lG/DlHbxMCyeuyOrqOdbgik.svg')
center / 14px no-repeat;
}
&-codesandbox {
background: transparent
url('https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/7EZvNsaBkr/aaYmtdDyHSCkXyLZVgGK.svg')
center / 14px no-repeat;
}
}
ul.anticons-list {
li {
color: #acacac;
&.TwoTone:hover {
background-color: #15395b;
}
&:hover {
.anticon {
color: #fff;
}
}
}
}
.markdown {
code,
pre,
pre code {
background: #262626;
}
}
.markdown.api-container {
table {
tbody tr {
&:hover {
background: #262626;
}
}
}
}
.markdown code {
background: fade(@white, 8%);
}
.prev-next-nav {
> a.prev-page {
.footer-nav-icon-before {
color: fade(@white, 45%);
}
&:hover .footer-nav-icon-before {
left: -3px;
color: @primary-color;
}
}
> .next-page {
.footer-nav-icon-after {
color: fade(@white, 45%);
}
&:hover .footer-nav-icon-after {
right: -3px;
color: @primary-color;
}
}
}
.grid-demo,
[id^='components-grid-demo-'] {
.demo-row,
.code-box-demo .demo-row {
background-image: linear-gradient(
90deg,
#1d1d1d 4.16666667%,
transparent 4.16666667%,
transparent 8.33333333%,
#1d1d1d 8.33333333%,
#1d1d1d 12.5%,
transparent 12.5%,
transparent 16.66666667%,
#1d1d1d 16.66666667%,
#1d1d1d 20.83333333%,
transparent 20.83333333%,
transparent 25%,
#1d1d1d 25%,
#1d1d1d 29.16666667%,
transparent 29.16666667%,
transparent 33.33333333%,
#1d1d1d 33.33333333%,
#1d1d1d 37.5%,
transparent 37.5%,
transparent 41.66666667%,
#1d1d1d 41.66666667%,
#1d1d1d 45.83333333%,
transparent 45.83333333%,
transparent 50%,
#1d1d1d 50%,
#1d1d1d 54.16666667%,
transparent 54.16666667%,
transparent 58.33333333%,
#1d1d1d 58.33333333%,
#1d1d1d 62.5%,
transparent 62.5%,
transparent 66.66666667%,
#1d1d1d 66.66666667%,
#1d1d1d 70.83333333%,
transparent 70.83333333%,
transparent 75%,
#1d1d1d 75%,
#1d1d1d 79.16666667%,
transparent 79.16666667%,
transparent 83.33333333%,
#1d1d1d 83.33333333%,
#1d1d1d 87.5%,
transparent 87.5%,
transparent 91.66666667%,
#1d1d1d 91.66666667%,
#1d1d1d 95.83333333%,
transparent 95.83333333%
);
}
.code-box-demo .ant-row > div:not(.gutter-row) {
padding: 16px 0;
background: #028ac8;
&:nth-child(2n + 1) {
background: fade(#0088c6, 70%);
}
}
.ant-row .demo-col,
.code-box-demo .ant-row .demo-col {
margin-top: 0;
margin-bottom: 0;
padding: 30px 0;
color: @black;
font-size: 18px;
text-align: center;
border: none;
}
.ant-row .demo-col-1 {
background: fade(#0088c6, 70%);
}
.ant-row .demo-col-3,
.code-box-demo .ant-row .demo-col-3 {
color: @site-text-color-secondary;
background: unset;
}
.ant-row .demo-col-5,
.code-box-demo .ant-row .demo-col-5 {
color: @site-text-color-secondary;
background: unset;
}
}
.markdown > table th {
color: fade(@white, 65%);
background: #1d1d1d;
}
.copied-code {
background: fade(@white, 8%);
}
.browser-mockup.with-url::after {
background-color: #141414;
}
.browser-mockup {
border-top: 2em solid #262626;
}
.browser-mockup::before {
background-color: #fb4742;
box-shadow: 0 0 0 2px #fb4742, 1.5em 0 0 2px #99bc2e, 3em 0 0 2px #ffba5a;
}
.browser-mockup.with-tab::after {
border-bottom: 2em solid #141414;
}
.ds-dropdown-menu {
[class^='ds-dataset-'] {
background: #1f1f1f;
.algolia-docsearch-suggestion {
background: #1f1f1f;
}
}
}
.algolia-autocomplete {
.algolia-docsearch-suggestion--category-header {
color: rgba(255, 255, 255, 0.65);
border-bottom: 1px solid #303030;
}
.algolia-docsearch-suggestion--subcategory-column::before {
background: #303030;
}
.algolia-docsearch-suggestion--content::before {
background: #303030;
}
}
.token.comment,
.token.quote {
color: #b6b18b;
}
.token.property,
.token.variable,
.token.template-variable,
.token.tag,
.token.number,
.token.name,
.token.selector-id,
.token.selector-class,
.token.regexp,
.token.deletion {
color: #eb3c54;
}
.token.built_in,
.token.builtin-name,
.token.literal,
.token.type,
.token.params,
.token.meta,
.token.link {
color: #e7ce56;
}
.token.attribute {
color: #ee7c2b;
}
.token.string,
.token.symbol,
.token.bullet,
.token.addition {
color: #177ddc;
}
.token.title,
.token.section {
color: #78bb65;
}
.token.function,
.token.keyword,
.token.selector-tag {
color: #b45ea4;
}
.hljs {
display: block;
padding: 0.5em;
overflow-x: auto;
color: #c0c5ce;
background: #1c1d21;
}
.token.emphasis {
font-style: italic;
}
.token.strong {
font-weight: bold;
}
}

View File

@ -342,55 +342,3 @@
.show-riddle-button .code-box-riddle {
display: block;
}
[data-theme='dark'] {
.code-box {
border: 1px solid #303030;
.code-box-title {
&,
a {
color: fade(@white, 65%);
}
}
.code-box-description {
p {
color: fade(@white, 65%);
}
}
&-expand-trigger {
position: relative;
margin-left: 12px;
color: #fff;
font-size: 20px;
cursor: pointer;
opacity: 0.45;
transition: all 0.3s;
&:hover {
opacity: 0.65;
}
}
&-demo {
border-bottom: 1px solid #303030;
}
&-codepen {
background: transparent
url('https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/R5sDUSunb1/OtZslpOjYXijshDERXwc.svg')
center / 14px no-repeat;
}
&-riddle {
background: transparent
url('https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/sXMM9YD8lG/DlHbxMCyeuyOrqOdbgik.svg')
center / 14px no-repeat;
}
&-codesandbox {
background: transparent
url('https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/7EZvNsaBkr/aaYmtdDyHSCkXyLZVgGK.svg')
center / 14px no-repeat;
}
}
}

View File

@ -24,26 +24,3 @@
color: @primary-color;
}
}
[data-theme='dark'] {
.ds-dropdown-menu {
[class^='ds-dataset-'] {
background: #1f1f1f;
.algolia-docsearch-suggestion {
background: #1f1f1f;
}
}
}
.algolia-autocomplete {
.algolia-docsearch-suggestion--category-header {
color: rgba(255, 255, 255, 0.65);
border-bottom: 1px solid #303030;
}
.algolia-docsearch-suggestion--subcategory-column::before {
background: #303030;
}
.algolia-docsearch-suggestion--content::before {
background: #303030;
}
}
}

View File

@ -89,10 +89,6 @@
}
}
[data-theme='dark'] #header {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65);
}
#logo {
float: left;
height: @header-height;
@ -141,12 +137,6 @@
}
}
[data-theme='dark'] #search-box input {
&::placeholder {
color: fade(@white, 30%);
}
}
.header-lang-button,
.version {
float: right;

View File

@ -73,12 +73,6 @@ pre[class*='language-'] {
background: #f5f5f5;
}
[data-theme='dark'] :not(pre) > code[class*='language-'],
[data-theme='dark'] pre[class*='language-'] {
color: rgba(255, 255, 255, 0.65);
background: #262626;
}
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
@ -155,71 +149,3 @@ pre[class*='language-'] {
.token.entity {
cursor: help;
}
[data-theme='dark'] {
.token.comment,
.token.quote {
color: #b6b18b;
}
.token.property,
.token.variable,
.token.template-variable,
.token.tag,
.token.number,
.token.name,
.token.selector-id,
.token.selector-class,
.token.regexp,
.token.deletion {
color: #eb3c54;
}
.token.built_in,
.token.builtin-name,
.token.literal,
.token.type,
.token.params,
.token.meta,
.token.link {
color: #e7ce56;
}
.token.attribute {
color: #ee7c2b;
}
.token.string,
.token.symbol,
.token.bullet,
.token.addition {
color: #177ddc;
}
.token.title,
.token.section {
color: #78bb65;
}
.token.function,
.token.keyword,
.token.selector-tag {
color: #b45ea4;
}
.hljs {
display: block;
padding: 0.5em;
overflow-x: auto;
color: #c0c5ce;
background: #1c1d21;
}
.token.emphasis {
font-style: italic;
}
.token.strong {
font-weight: bold;
}
}

View File

@ -81,21 +81,3 @@ ul.anticons-list {
background: #f5f5f5;
border-radius: 2px;
}
[data-theme='dark'] ul.anticons-list {
li {
color: #acacac;
&.TwoTone:hover {
background-color: #15395b;
}
&:hover {
.anticon {
color: #fff;
}
}
}
}
[data-theme='dark'] .copied-code {
background: fade(@white, 8%);
}

View File

@ -23,3 +23,4 @@
@import './docsearch';
@import './nprogress';
@import './contributors';
@import './dark.less';

View File

@ -124,14 +124,6 @@
border: none;
}
[data-theme='dark'] .markdown {
code,
pre,
pre code {
background: #262626;
}
}
.markdown strong,
.markdown b {
font-weight: 500;
@ -153,11 +145,6 @@
background: rgba(0, 0, 0, 0.02);
}
[data-theme='dark'] .markdown > table th {
color: fade(@white, 65%);
background: #1d1d1d;
}
.markdown > table th,
.markdown > table td {
padding: 16px 24px;
@ -276,16 +263,6 @@
}
}
[data-theme='dark'] .markdown.api-container {
table {
tbody tr {
&:hover {
background: #262626;
}
}
}
}
.grid-demo,
[id^='components-grid-demo-'] {
.demo-row,
@ -438,95 +415,3 @@
margin-top: 40px;
}
}
[data-theme='dark'] {
.markdown code {
background: fade(@white, 8%);
}
.grid-demo,
[id^='components-grid-demo-'] {
.demo-row,
.code-box-demo .demo-row {
background-image: linear-gradient(
90deg,
#1d1d1d 4.16666667%,
transparent 4.16666667%,
transparent 8.33333333%,
#1d1d1d 8.33333333%,
#1d1d1d 12.5%,
transparent 12.5%,
transparent 16.66666667%,
#1d1d1d 16.66666667%,
#1d1d1d 20.83333333%,
transparent 20.83333333%,
transparent 25%,
#1d1d1d 25%,
#1d1d1d 29.16666667%,
transparent 29.16666667%,
transparent 33.33333333%,
#1d1d1d 33.33333333%,
#1d1d1d 37.5%,
transparent 37.5%,
transparent 41.66666667%,
#1d1d1d 41.66666667%,
#1d1d1d 45.83333333%,
transparent 45.83333333%,
transparent 50%,
#1d1d1d 50%,
#1d1d1d 54.16666667%,
transparent 54.16666667%,
transparent 58.33333333%,
#1d1d1d 58.33333333%,
#1d1d1d 62.5%,
transparent 62.5%,
transparent 66.66666667%,
#1d1d1d 66.66666667%,
#1d1d1d 70.83333333%,
transparent 70.83333333%,
transparent 75%,
#1d1d1d 75%,
#1d1d1d 79.16666667%,
transparent 79.16666667%,
transparent 83.33333333%,
#1d1d1d 83.33333333%,
#1d1d1d 87.5%,
transparent 87.5%,
transparent 91.66666667%,
#1d1d1d 91.66666667%,
#1d1d1d 95.83333333%,
transparent 95.83333333%
);
}
.code-box-demo .ant-row > div:not(.gutter-row) {
padding: 16px 0;
background: #028ac8;
&:nth-child(2n + 1) {
background: fade(#0088c6, 70%);
}
}
.ant-row .demo-col,
.code-box-demo .ant-row .demo-col {
margin-top: 0;
margin-bottom: 0;
padding: 30px 0;
color: @black;
font-size: 18px;
text-align: center;
border: none;
}
.ant-row .demo-col-1 {
background: fade(#0088c6, 70%);
}
.ant-row .demo-col-3,
.code-box-demo .ant-row .demo-col-3 {
color: @site-text-color-secondary;
background: unset;
}
.ant-row .demo-col-5,
.code-box-demo .ant-row .demo-col-5 {
color: @site-text-color-secondary;
background: unset;
}
}
}

View File

@ -51,22 +51,3 @@
.browser-mockup > * {
display: block;
}
[data-theme='dark'] {
.browser-mockup.with-url::after {
background-color: #141414;
}
.browser-mockup {
border-top: 2em solid #262626;
}
.browser-mockup::before {
background-color: #fb4742;
box-shadow: 0 0 0 2px #fb4742, 1.5em 0 0 2px #99bc2e, 3em 0 0 2px #ffba5a;
}
.browser-mockup.with-tab::after {
border-bottom: 2em solid #141414;
}
}

View File

@ -61,27 +61,3 @@
margin-left: 0.5em;
}
}
[data-theme='dark'] .prev-next-nav {
> a.prev-page {
.footer-nav-icon-before {
color: fade(@white, 45%);
}
&:hover .footer-nav-icon-before {
left: -3px;
color: @primary-color;
}
}
> .next-page {
.footer-nav-icon-after {
color: fade(@white, 45%);
}
&:hover .footer-nav-icon-after {
right: -3px;
color: @primary-color;
}
}
}

View File

@ -57,12 +57,6 @@ ul.toc > li {
}
}
[data-theme='dark'] .toc-affix {
.ant-affix {
background: #141414;
}
}
.toc-affix-bottom {
position: absolute;
right: 20px;