mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
style(@vant/cli): improve mobile style in dark mode
This commit is contained in:
parent
98b999d911
commit
f5c32c29f1
@ -1,6 +1,6 @@
|
||||
body {
|
||||
// colors
|
||||
--van-doc-black: #1a1a1a;
|
||||
--van-doc-black: #000;
|
||||
--van-doc-white: #fff;
|
||||
--van-doc-gray-1: #f7f8fa;
|
||||
--van-doc-gray-2: #f2f3f5;
|
||||
@ -32,11 +32,11 @@ body {
|
||||
--van-doc-link-color: var(--van-doc-blue);
|
||||
|
||||
// background
|
||||
--van-doc-background: #f7f8fa;
|
||||
--van-doc-background-light: var(--van-doc-white);
|
||||
--van-doc-background: #eeeff2;
|
||||
--van-doc-background-2: var(--van-doc-white);
|
||||
--van-doc-background-3: var(--van-doc-white);
|
||||
--van-doc-header-background: #011f3c;
|
||||
--van-doc-border-color: var(--van-doc-gray-2);
|
||||
--van-doc-shadow-color: var(--van-doc-gray-3);
|
||||
|
||||
// code
|
||||
--van-doc-code-color: #58727e;
|
||||
@ -58,10 +58,10 @@ body {
|
||||
|
||||
// background
|
||||
--van-doc-background: #202124;
|
||||
--van-doc-background-light: rgba(255, 255, 255, 0.06);
|
||||
--van-doc-background-2: rgba(255, 255, 255, 0.06);
|
||||
--van-doc-background-3: rgba(255, 255, 255, 0.1);
|
||||
--van-doc-header-background: rgba(1, 31, 60, 0.3);
|
||||
--van-doc-border-color: #3a3a3c;
|
||||
--van-doc-shadow-color: transparent;
|
||||
|
||||
// code
|
||||
--van-doc-code-color: rgba(200, 200, 200, 0.85);
|
||||
|
@ -44,9 +44,8 @@ export default {
|
||||
.van-doc-card {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
background-color: var(--van-doc-background-light);
|
||||
background-color: var(--van-doc-background-2);
|
||||
border-radius: var(--van-doc-border-radius);
|
||||
box-shadow: 0 8px 12px var(--van-doc-shadow-color);
|
||||
|
||||
> p a,
|
||||
> ul a,
|
||||
|
@ -79,8 +79,7 @@ export default {
|
||||
max-width: var(--van-doc-nav-width);
|
||||
padding: 8px 0;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--van-doc-background-light);
|
||||
box-shadow: 0 8px 12px var(--van-doc-shadow-color);
|
||||
background-color: var(--van-doc-background-2);
|
||||
|
||||
@media (min-width: var(--van-doc-row-max-width)) {
|
||||
left: 50%;
|
||||
|
@ -53,9 +53,8 @@ export default {
|
||||
width: var(--van-doc-simulator-width);
|
||||
min-width: var(--van-doc-simulator-width);
|
||||
overflow: hidden;
|
||||
background: var(--van-doc-background-light);
|
||||
background: var(--van-doc-background-2);
|
||||
border-radius: var(--van-doc-border-radius);
|
||||
box-shadow: 0 8px 12px var(--van-doc-shadow-color);
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
right: auto;
|
||||
|
@ -45,8 +45,12 @@ body {
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
||||
.van-doc-theme-light {
|
||||
background-color: var(--van-doc-gray-1);
|
||||
}
|
||||
|
||||
.van-doc-theme-dark {
|
||||
background-color: #000;
|
||||
background-color: var(--van-doc-black);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
@ -59,7 +59,7 @@ export default {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
background-color: var(--van-doc-background-light);
|
||||
background-color: var(--van-doc-background-3);
|
||||
border-radius: 99px;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
|
@ -42,7 +42,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 56px;
|
||||
background-color: var(--van-doc-background-light);
|
||||
background-color: var(--van-doc-background-2);
|
||||
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
|
@ -144,8 +144,6 @@ const t = useTranslate({
|
||||
|
||||
<style lang="less">
|
||||
.demo-button {
|
||||
background: var(--van-background-2);
|
||||
|
||||
.van-button {
|
||||
&--large {
|
||||
margin-bottom: var(--van-padding-md);
|
||||
|
@ -70,8 +70,6 @@ const t = useTranslate({
|
||||
|
||||
<style lang="less">
|
||||
.demo-col {
|
||||
background: var(--van-background-2);
|
||||
|
||||
.van-doc-demo-block {
|
||||
padding: 0 var(--van-padding-md);
|
||||
}
|
||||
|
@ -68,8 +68,6 @@ const active = ref('error');
|
||||
|
||||
<style lang="less">
|
||||
.demo-empty {
|
||||
background: var(--van-background-2);
|
||||
|
||||
.custom-image {
|
||||
.van-empty__image {
|
||||
width: 90px;
|
||||
|
@ -62,8 +62,6 @@ const t = useTranslate({
|
||||
|
||||
<style lang="less">
|
||||
.demo-loading {
|
||||
background: var(--van-background-2);
|
||||
|
||||
.van-loading {
|
||||
display: inline-block;
|
||||
margin: 5px 0 5px 20px;
|
||||
|
@ -81,8 +81,6 @@ const t = useTranslate({
|
||||
|
||||
<style lang="less">
|
||||
.demo-notice-bar {
|
||||
background: var(--van-background-2);
|
||||
|
||||
.van-notice-bar:not(:first-of-type) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
@ -47,8 +47,6 @@ const showEmbedded = ref(false);
|
||||
|
||||
<style lang="less">
|
||||
.demo-overlay {
|
||||
background: var(--van-background-2);
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -72,8 +72,6 @@ const reduce = () => {
|
||||
|
||||
<style lang="less">
|
||||
.demo-progress {
|
||||
background: var(--van-background-2);
|
||||
|
||||
.van-progress {
|
||||
margin: 20px 16px;
|
||||
|
||||
|
@ -96,7 +96,6 @@ const onChange = (value: string) => Toast(t('text') + value);
|
||||
|
||||
<style lang="less">
|
||||
.demo-slider {
|
||||
background: var(--van-background-2);
|
||||
user-select: none;
|
||||
|
||||
.van-doc-demo-block {
|
||||
|
Loading…
x
Reference in New Issue
Block a user