Skip to content

Commit 35d6ff4

Browse files
js2mejs2me
committed
docs: update docs UI
1 parent f89b370 commit 35d6ff4

File tree

6 files changed

+303
-286
lines changed

6 files changed

+303
-286
lines changed

‎docs/.vitepress/theme/customs.css‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
.i-logos\:mobx-icon {
2+
background: url(/mobx.svg) no-repeat;
3+
background-size: 100% 100%;
4+
background-color: transparent;
5+
width: 1.2em;
6+
height: 1.2em;
7+
}
8+
9+
/**
10+
* Component: Algolia
11+
* -------------------------------------------------------------------------- */
12+
13+
.DocSearch {
14+
--docsearch-primary-color: var(--vp-c-brand-1) !important;
15+
}
16+
17+
@media (min-width: 640px) {
18+
:root {
19+
--vp-home-hero-image-filter: blur(56px);
20+
}
21+
}
22+
23+
@media (min-width: 960px) {
24+
:root {
25+
--vp-home-hero-image-filter: blur(68px);
26+
}
27+
}
28+
29+
30+
:root {
31+
--vp-c-bg-feature-soft: #f6f6f76b;
32+
}
33+
34+
html.dark {
35+
--vp-c-bg-feature-soft: #20212730;
36+
}
37+
38+
.custom-block > .custom-block-title:first-child:last-child {
39+
margin-top: -8px;
40+
}
41+
p:has(>em:first-child:last-child) + div[class*=language-] {
42+
margin-top: -10px;
43+
}
44+
45+
.vp-doc strong a {
46+
font-weight: bold;
47+
}
48+
49+
.vp-doc strong code {
50+
font-weight: bold;
51+
}
52+
53+
.VPHome {
54+
flex: 1;
55+
display: flex;
56+
flex-direction: column;
57+
margin-bottom: 0 !important;
58+
}
59+
60+
.VPContent.is-home {
61+
display: flex;
62+
}
63+
64+
.VPHero.has-image.VPHomeHero {
65+
flex: 1;
66+
display: flex;
67+
flex-direction: column;
68+
}
69+
70+
.VPHero.has-image .main {position: relative;}
71+
72+
.VPHero.has-image .container {
73+
padding-left: 2rem;
74+
padding-right: 2rem;
75+
margin-top: auto;
76+
margin-bottom: auto;
77+
padding-bottom: 7vh;
78+
}
79+
80+
.main > .heading > .text {
81+
font-size: 24px;
82+
line-height: 28px;
83+
padding-top: 20px;
84+
}
85+
86+
html .VPFooter {
87+
border-top: 0 !important;
88+
}
89+
90+
html:has(.VPFeatures.VPHomeFeatures .items > .item) .VPHero.has-image .container {
91+
margin-bottom: 0;
92+
margin-top: auto;
93+
}
94+
html:has(.VPFeatures.VPHomeFeatures .items > .item) .VPHero.has-image.VPHomeHero {
95+
flex: 1;
96+
}
97+
html:has(.VPFeatures.VPHomeFeatures .items > .item) .VPFeatures.VPHomeFeatures {
98+
margin-bottom: auto;
99+
flex: 1;
100+
}
101+
102+
html.gh-preview .main > .heading > .name {
103+
line-height: 72px;
104+
font-size: 68px;
105+
}
106+
html.gh-preview .main > .heading > .text {
107+
font-size: 43px;
108+
line-height: 48px;
109+
}
110+
html.gh-preview .main > .actions {
111+
opacity: 0;
112+
}
113+
html.gh-preview .VPFeatures.VPHomeFeatures {
114+
opacity: 0;
115+
}
116+
117+
#VPContent .VPFeature {
118+
display: block;
119+
background-color: var(--vp-c-bg-feature-soft);
120+
border: 0;
121+
backdrop-filter: blur(10px);
122+
border-radius: 24px;
123+
}
124+
125+
#app .VPFooter .message, #app .VPFooter .copyright {
126+
line-height: 18px;
127+
font-size: 13px;
128+
}
129+
130+
#app .VPFeature .icon {
131+
border-radius: 12px;
132+
}
133+
134+
#VPContent span.name.clip {
135+
text-shadow: 30px 30px 256px var(--custom-brand-2), -30px -30px 256px var(--custom-brand-1);
136+
}
137+
138+
#VPContent .VPButton.medium.brand {
139+
box-shadow: 30px 30px 128px var(--custom-brand-2), -30px -30px 128px var(--custom-brand-1);
140+
}
141+
142+
.VPSidebarItem.has-active > .item {
143+
position: relative;
144+
}
145+
146+
.VPSidebarItem.has-active > .item:before {
147+
content: '';
148+
background: var(--vp-c-bg-feature-soft);
149+
position: absolute;
150+
inset: 0;
151+
border-radius: 6px;
152+
left: -8px;
153+
z-index: -1;
154+
}

‎docs/.vitepress/theme/index.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
// https://vitepress.dev/guide/custom-theme
2-
import { h } from 'vue'
3-
import type { Theme } from 'vitepress'
4-
import DefaultTheme from 'vitepress/theme'
5-
import './style.css'
6-
import 'uno.css'
2+
import { h } from 'vue';
3+
import type { Theme } from 'vitepress';
4+
import DefaultTheme from 'vitepress/theme';
5+
import './pallete.css';
6+
import './customs.css';
7+
import './logo-animate.css';
8+
import 'uno.css';
79

810
export default {
911
extends: DefaultTheme,

‎docs/.vitepress/theme/logo-animate.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
@keyframes logoBgGradientAnimate {
3+
0% {
4+
background-position: 0% 0%;
5+
transform: scale(1) translate(-50%, -50%);
6+
}
7+
50% {
8+
background-position: 300% 300%;
9+
transform: scale(1.4) translate(-35%, -35%);
10+
}
11+
100% {
12+
background-position: 0% 0%;
13+
transform: scale(1) translate(-50%, -50%);
14+
}
15+
}
16+
17+
.image-container > .image-bg {
18+
background-size: 200% 200%;
19+
animation: logoBgGradientAnimate 7s linear infinite;
20+
}
21+
22+
@keyframes logoAnimate {
23+
0% {
24+
transform: scale(1) translate(-50%, -50%);
25+
}
26+
50% {
27+
transform: scale(1.05) translate(-48%, -48%);
28+
}
29+
100% {
30+
transform: scale(1) translate(-50%, -50%);
31+
}
32+
}
33+
34+
.image-container > .image-src {
35+
animation: logoAnimate 10s linear infinite;
36+
}

‎docs/.vitepress/theme/pallete.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/**
2+
* Customize default theme styling by overriding CSS variables:
3+
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
4+
*/
5+
6+
/**
7+
* Colors
8+
*
9+
* Each colors have exact same color scale system with 3 levels of solid
10+
* colors with different brightness, and 1 soft color.
11+
*
12+
* - `XXX-1`: The most solid color used mainly for colored text. It must
13+
* satisfy the contrast ratio against when used on top of `XXX-soft`.
14+
*
15+
* - `XXX-2`: The color used mainly for hover state of the button.
16+
*
17+
* - `XXX-3`: The color for solid background, such as bg color of the button.
18+
* It must satisfy the contrast ratio with pure white (#ffffff) text on
19+
* top of it.
20+
*
21+
* - `XXX-soft`: The color used for subtle background such as custom container
22+
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
23+
* on top of it.
24+
*
25+
* The soft color must be semi transparent alpha channel. This is crucial
26+
* because it allows adding multiple "soft" colors on top of each other
27+
* to create a accent, such as when having inline code block inside
28+
* custom containers.
29+
*
30+
* - `default`: The color used purely for subtle indication without any
31+
* special meanings attched to it such as bg color for menu hover state.
32+
*
33+
* - `brand`: Used for primary brand colors, such as link text, button with
34+
* brand theme, etc.
35+
*
36+
* - `tip`: Used to indicate useful information. The default theme uses the
37+
* brand color for this by default.
38+
*
39+
* - `warning`: Used to indicate warning to the users. Used in custom
40+
* container, badges, etc.
41+
*
42+
* - `danger`: Used to show error, or dangerous message to the users. Used
43+
* in custom container, badges, etc.
44+
* -------------------------------------------------------------------------- */
45+
46+
:root {
47+
--vp-c-brand-1: #ff745b;
48+
--vp-c-brand-2: #fb811f;
49+
--vp-c-brand-3: #fb581f;
50+
--vp-c-brand-soft: #fb581f33;
51+
52+
--custom-brand-1: #ff4a00;
53+
--custom-brand-2: #0066f6;
54+
--custom-brand-3: #0066f699;
55+
56+
57+
--vp-home-hero-name-color: transparent;
58+
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--custom-brand-2) 30%, var(--custom-brand-1));
59+
--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--custom-brand-1) 50%, var(--custom-brand-3) 50%);
60+
--vp-home-hero-image-filter: blur(44px);
61+
62+
--vp-custom-block-tip-border: transparent;
63+
--vp-custom-block-tip-text: var(--vp-c-text-1);
64+
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
65+
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
66+
67+
--vp-button-brand-border: transparent;
68+
--vp-button-brand-text: var(--vp-c-white);
69+
--vp-button-brand-bg: var(--vp-c-brand-3);
70+
--vp-button-brand-hover-border: transparent;
71+
--vp-button-brand-hover-text: var(--vp-c-white);
72+
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
73+
--vp-button-brand-active-border: transparent;
74+
--vp-button-brand-active-text: var(--vp-c-white);
75+
--vp-button-brand-active-bg: var(--vp-c-brand-1);
76+
77+
--vp-c-default-1: var(--vp-c-gray-1);
78+
--vp-c-default-2: var(--vp-c-gray-2);
79+
--vp-c-default-3: var(--vp-c-gray-3);
80+
--vp-c-default-soft: var(--vp-c-gray-soft);
81+
82+
--vp-c-tip-1: var(--vp-c-brand-1);
83+
--vp-c-tip-2: var(--vp-c-brand-2);
84+
--vp-c-tip-3: var(--vp-c-brand-3);
85+
--vp-c-tip-soft: var(--vp-c-brand-soft);
86+
87+
--vp-c-warning-1: var(--vp-c-yellow-1);
88+
--vp-c-warning-2: var(--vp-c-yellow-2);
89+
--vp-c-warning-3: var(--vp-c-yellow-3);
90+
--vp-c-warning-soft: var(--vp-c-yellow-soft);
91+
92+
--vp-c-danger-1: var(--vp-c-red-1);
93+
--vp-c-danger-2: var(--vp-c-red-2);
94+
--vp-c-danger-3: var(--vp-c-red-3);
95+
--vp-c-danger-soft: var(--vp-c-red-soft);
96+
}
97+
98+
html.dark {
99+
--vp-c-brand-1: #ffae77;
100+
--vp-c-brand-2: #ff8a4f;
101+
--vp-c-brand-3: #fb681f;
102+
--custom-brand-1: #ff542f;
103+
--custom-brand-2: #3c8dff;
104+
}

0 commit comments

Comments
 (0)