gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme): 添加 步骤容器

Browse Source
This commit is contained in:
pengzhanbo 2024-06-18 18:50:42 +08:00
parent 018cecf7e7
commit 1df3505d89
4 changed files with 218 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
theme/src/client/styles/custom-block.css Normal file
View File

@ -0,0 +1,208 @@
/* --------------------- demo-wrapper ------------------------ */
.vp-doc .demo-wrapper {
display: flex;
flex-direction: column;
min-height: 40px;
margin: 40px -16px;
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
box-shadow: var(--vp-shadow-2);
transition: var(--t-color);
transition-property: border, box-shadow;
}
.vp-doc .demo-wrapper .demo-head {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 0;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
}
.vp-doc .demo-wrapper .demo-container {
min-height: 0;
padding: 20px;
font-size: 14px;
line-height: 22px;
background-color: var(--vp-c-bg-alt);
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
transition: background-color var(--t-color);
}
.vp-doc .demo-wrapper.has-title .demo-head {
border-bottom-color: transparent;
}
.vp-doc .demo-wrapper.only-img {
overflow: hidden;
}
.vp-doc .demo-wrapper.only-img img {
display: block;
}
.vp-doc .demo-wrapper.only-img .demo-container,
.vp-doc .demo-wrapper.no-padding .demo-container {
padding: 0;
}
.vp-doc .demo-wrapper.has-height .demo-container {
height: var(--demo-container-height);
overflow-y: auto;
}
.vp-doc .demo-wrapper .demo-ctrl {
display: flex;
gap: 5px;
align-items: center;
justify-content: flex-start;
padding: 5px 0 5px 8px;
}
.vp-doc .demo-wrapper .demo-ctrl i {
display: inline-block;
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 100%;
transition: background-color var(--t-color);
}
.vp-doc .demo-wrapper .demo-ctrl i:nth-child(1) {
background-color: var(--vp-c-danger-3);
}
.vp-doc .demo-wrapper .demo-ctrl i:nth-child(2) {
background-color: var(--vp-c-warning-3);
}
.vp-doc .demo-wrapper .demo-ctrl i:nth-child(3) {
background-color: var(--vp-c-green-3);
}
.vp-doc .demo-wrapper .demo-title {
position: relative;
min-width: 0;
padding: 0 16px;
margin: 0 20px -1px;
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-2);
background-color: var(--vp-c-bg-alt);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
transition: var(--t-color);
transition-property: color, background-color;
}
.vp-doc .demo-wrapper .demo-title p {
max-width: 100%;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
}
.vp-doc .demo-wrapper .demo-title::after,
.vp-doc .demo-wrapper .demo-title::before {
position: absolute;
bottom: 0;
z-index: 1;
width: 8px;
height: 8px;
content: " ";
transition: background var(--t-color);
}
.vp-doc .demo-wrapper .demo-title::before {
left: 100%;
background: radial-gradient(16px at right top, transparent 50%, var(--vp-c-bg-alt) 50%);
}
.vp-doc .demo-wrapper .demo-title::after {
right: 100%;
background: radial-gradient(16px at left top, transparent 50%, var(--vp-c-bg-alt) 50%);
}
.vp-doc .demo-wrapper .demo-container > *:first-child {
margin-top: 0;
}
.vp-doc .demo-wrapper .demo-container > *:last-child {
margin-bottom: 0;
}
@media (min-width: 419px) {
.vp-doc .demo-wrapper {
margin: 40px 0;
}
}
/* ---------------------------- Steps --------------------------- */
.vp-doc .vp-steps {
margin: 16px 0;
}
.vp-doc .vp-steps > ol,
.vp-doc .vp-steps > ul {
padding-inline-start: 0;
list-style: none;
}
.vp-doc .vp-steps > ol > li,
.vp-doc .vp-steps > ul > li {
position: relative;
min-height: 22px;
padding-bottom: 1px;
padding-left: 44px;
}
.vp-doc .vp-steps > ol > li::before,
.vp-doc .vp-steps > ul > li::before {
position: absolute;
inset-inline-start: 0;
top: 0;
width: 28px;
height: 28px;
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: var(--vp-c-text-1);
text-align: center;
content: counter(list-item);
background-color: var(--vp-c-bg-soft);
border: solid 1px var(--vp-c-divider);
border-radius: 100%;
transition: var(--t-color);
transition-property: color, background-color, border-color;
}
.vp-doc .vp-steps > ol > li:not(:last-of-type)::after,
.vp-doc .vp-steps > ul > li:not(:last-of-type)::after {
position: absolute;
inset-inline-start: 14px;
top: 34px;
bottom: 6px;
width: 1px;
content: "";
background-color: var(--vp-c-divider);
transition: background-color var(--t-color);
}
.vp-doc .vp-steps > ol > li > :first-child,
.vp-doc .vp-steps > ul > li > :first-child {
margin-top: 0;
}
.vp-doc .vp-steps > ol > li > :first-child:where(h1,h2,h3,h4,h5,h6),
.vp-doc .vp-steps > ul > li > :first-child:where(h1,h2,h3,h4,h5,h6) {
padding-top: 0;
border-top: none;
}
.vp-doc .vp-steps > ol > li + li,
.vp-doc .vp-steps > ul > li + li {
margin-top: 0;
}

1
theme/src/client/styles/index.css
View File

@ -8,6 +8,7 @@
@import url("./utils.css");
@import url("./content.css");
@import url("./code.css");
@import url("./custom-block.css");
@import url("./twoslash.css");
@import url("./md-enhance.css");

142
theme/src/client/styles/md-enhance.css
View File

@ -587,148 +587,6 @@
font-size: 0.8rem;
}
/* --------------------- demo-wrapper ------------------------ */
.vp-doc .demo-wrapper {
display: flex;
flex-direction: column;
min-height: 40px;
margin: 40px -16px;
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
box-shadow: var(--vp-shadow-2);
transition: var(--t-color);
transition-property: border, box-shadow;
}
.vp-doc .demo-wrapper.has-title .demo-head {
border-bottom-color: transparent;
}
.vp-doc .demo-wrapper.only-img {
overflow: hidden;
}
.vp-doc .demo-wrapper.only-img img {
display: block;
}
.vp-doc .demo-wrapper.only-img .demo-container,
.vp-doc .demo-wrapper.no-padding .demo-container {
padding: 0;
}
.vp-doc .demo-wrapper.has-height .demo-container {
height: var(--demo-container-height);
overflow-y: auto;
}
.vp-doc .demo-wrapper .demo-head {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 0;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
}
.vp-doc .demo-wrapper .demo-ctrl {
display: flex;
gap: 5px;
align-items: center;
justify-content: flex-start;
padding: 5px 0 5px 8px;
}
.vp-doc .demo-wrapper .demo-ctrl i {
display: inline-block;
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 100%;
transition: background-color var(--t-color);
}
.vp-doc .demo-wrapper .demo-ctrl i:nth-child(1) {
background-color: var(--vp-c-danger-3);
}
.vp-doc .demo-wrapper .demo-ctrl i:nth-child(2) {
background-color: var(--vp-c-warning-3);
}
.vp-doc .demo-wrapper .demo-ctrl i:nth-child(3) {
background-color: var(--vp-c-green-3);
}
.vp-doc .demo-wrapper .demo-title {
position: relative;
min-width: 0;
padding: 0 16px;
margin: 0 20px -1px;
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-2);
background-color: var(--vp-c-bg-alt);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
transition: var(--t-color);
transition-property: color, background-color;
}
.vp-doc .demo-wrapper .demo-title p {
max-width: 100%;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
}
.vp-doc .demo-wrapper .demo-title::after,
.vp-doc .demo-wrapper .demo-title::before {
position: absolute;
bottom: 0;
z-index: 1;
width: 8px;
height: 8px;
content: " ";
transition: background var(--t-color);
}
.vp-doc .demo-wrapper .demo-title::before {
left: 100%;
background: radial-gradient(16px at right top, transparent 50%, var(--vp-c-bg-alt) 50%);
}
.vp-doc .demo-wrapper .demo-title::after {
right: 100%;
background: radial-gradient(16px at left top, transparent 50%, var(--vp-c-bg-alt) 50%);
}
.vp-doc .demo-wrapper .demo-container {
min-height: 0;
padding: 20px;
font-size: 14px;
line-height: 22px;
background-color: var(--vp-c-bg-alt);
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
transition: background-color var(--t-color);
}
.vp-doc .demo-wrapper .demo-container > *:first-child {
margin-top: 0;
}
.vp-doc .demo-wrapper .demo-container > *:last-child {
margin-bottom: 0;
}
@media (min-width: 419px) {
.vp-doc .demo-wrapper {
margin: 40px 0;
}
}
/* --------------------- Markdown Enhance: Mermaid ------------------------ */
.mermaid-actions {
padding-right: 20px;

9
theme/src/node/plugins/containerPlugins.ts
View File

@ -39,6 +39,15 @@ export const customContainerPlugins: Plugin[] = [
return '</div></div>\n'
},
}),
containerPlugin({
type: 'steps',
before() {
return '<div class="vp-steps">'
},
after() {
return '</div>'
},
}),
]
/**