Vue3 + Vite使用Vitepress编辑基于Element-plus再次封装的Vue3基础组件库文档弃用vitepress-theme-demoblock，使用自己封装的Demo组件
.,
.,
.,
. {
color: var(--prism-comment);
font-style: var(--prism-comment-style);
}
. {
color: var(--prism-namespace);
}
. {
color: var(--prism-interpolation);
}
. {
color: var(--prism-string);
}
. {
color: var(--prism-punctuation);
}
. {
color: var(--prism-operator);
}
.,
.-flow {
color: var(--prism-keyword-control);
}
.,
.,
. {
color: var(--prism-symbol);
}
. {
color: var(--prism-constant);
}
. {
text-decoration: var(--prism-url-decoration);
}
.,
.language-json . {
color: var(--prism-boolean);
}
.,
.language-json . {
color: var(--prism-number);
}
. {
color: var(--prism-variable);
}
. {
color: var(--prism-keyword);
}
.,
.-value,
. {
color: var(--prism-selector);
}
. {
color: var(--prism-function);
}
. {
color: var(--prism-deleted);
}
.,
. {
font-weight: 700;
}
. {
font-style: italic;
}
.-name {
color: var(--prism-class);
}
.,
. {
color: var(--prism-builtin);
}
.-name,
.,
. {
color: var(--prism-property);
}
.language-json . {
color: var(--prism-json-property);
}
. {
color: var(--prism-regex);
}
.,
. {
color: var(--prism-decorator);
}
.line-numbers .line-numbers-rows {
border-right-color: var(--prism-line-number);
}
.line-numbers-rows > span:before {
color: var(--prism-line-number-gutter);
}
.line-highlight {
background: var(--prism-line-highlight-background);
}
[class*='language-']:before {
position: absolute;
top: 0.4em;
right: 0.8em;
z-index: 2;
opacity: var(--prism-marker-opacity);
font-size: var(--prism-marker-font-size);
color: var(--prism-marker-color);
}
[class~='language-html']:before,
[class~='language-markup']:before {
content: 'html';
}
[class~='language-md']:before,
[class~='language-markdown']:before {
content: 'md';
}
[class~='language-css']:before {
content: 'css';
}
[class~='language-sass']:before {
content: 'sass';
}
[class~='language-scss']:before {
content: 'scss';
}
[class~='language-less']:before {
content: 'less';
}
[class~='language-stylus']:before {
content: 'styl';
}
[class~='language-js']:before,
[class~='language-typescript']:before {
content: 'js';
}
[class~='language-ts']:before,
[class~='language-typescript']:before {
content: 'ts';
}
[class~='language-json']:before {
content: 'json';
}
[class~='language-rb']:before,
[class~='language-ruby']:before {
content: 'rb';
}
[class~='language-py']:before,
[class~='language-python']:before {
content: 'py';
}
[class~='language-sh']:before,
[class~='language-bash']:before {
content: 'sh';
}
[class~='language-php']:before {
content: 'php';
}
[class~='language-go']:before {
content: 'go';
}
[class~='language-rust']:before {
content: 'rust';
}
[class~='language-java']:before {
content: 'java';
}
[class~='language-c']:before {
content: 'c';
}
[class~='language-yaml']:before {
content: 'yaml';
}
[class~='language-vue']:before {
content: 'vue';
}
[class~='language-dockerfile']:before {
content: 'dockerfile';
}
[class*='language-']:before {
font-family: var(--code-font-family);
}
span[class~='language-css']:before {
content: '';
}
:root {
--el-fill-color-light: #f5f7fa;
--el-fill-color-lighter: #fafafa;
--prism-marker-opacity: 0.6;
--prism-marker-color: var(--code-text-color);
--prism-line-height: var(--code-line-height);
}
html:not(.dark) {
--prism-builtin: #3182bd;
--prism-comment: #848486;
--prism-deleted: #3182bd;
--prism-function: #6196cc;
--prism-boolean: #c25205;
--prism-number: #c25205;
--prism-property: #717c11;
--prism-punctuation: #a8a9cc;
--prism-keyword: #c792ea;
--prism-variable: #0b8235;
--prism-url-decoration: #67cdcc;
--prism-symbol: green;
--prism-selector: #0b8235;
}
{
--prism-scheme: dark;
--prism-foreground: #a6accd;
--prism-background: #181818;
--prism-comment: #758575;
--prism-string: #c3e88d;
--prism-literal: #429988;
--prism-keyword: #89ddff;
--prism-boolean: #6394bf;
--prism-number: #6394bf;
--prism-variable: #c2b36e;
--prism-function: #82aaff;
--prism-deleted: #bc6066;
--prism-class: #54b1bf;
--prism-builtin: var(--el-color-primary-light-3);
--prism-property: #c792ea;
--prism-namespace: #db889a;
--prism-punctuation: #89ddff;
--prism-decorator: #bd8f8f;
--prism-regex: #ab5e3f;
--prism-json-property: #6b8b9e;
--prism-line-number: #888888;
--prism-line-number-gutter: #eeeeee;
--prism-line-highlight-background: #444444;
--prism-selection-background: #444444;
--prism-inline-background: #2d2d2d;
}
code {
margin: 0;
border-radius: 4px;
padding: 0.15rem 0.5rem;
font-family: var(--code-font-family);
font-size: var(--code-font-size);
color: var(--code-text-color);
line-height: var(--code-line-height);
background-color: var(--code-bg-color);
}
pre code {
background-color: transparent;
}
a > code {
color: var(--code-link-color);
}
code . {
color: #ec5975;
}
code . {
color: var(--c-brand);
}
div[class*='language-'] {
position: relative;
margin: 0;
background-color: var(--code-bg-color);
overflow-x: auto;
}
li > div[class*='language-'] {
border-radius: 6px 0 0 6px;
margin: 0;
}
@media (min-width: 420px) {
div[class*='language-'] {
margin: 0;
border-radius: 6px;
}
li > div[class*='language-'] {
margin: 0;
border-radius: 6px;
}
}
[class*='language-'] pre,
[class*='language-'] code {
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
tab-size: 4;
hyphens: none;
}
[class*='language-'] pre {
position: relative;
z-index: 1;
margin: 0;
padding: 0.25rem;
background: transparent;
overflow-x: auto;
}
[class*='language-'] code {
padding: 0;
line-height: var(--code-line-height);
font-size: var(--code-font-size);
color: var(--code-text-color);
}
.highlight-lines {
position: absolute;
top: 0;
bottom: 0;
left: 0;
padding: 1.25rem 0;
width: 100%;
line-height: var(--code-line-height);
font-family: var(--code-font-family);
font-size: var(--code-font-size);
user-select: none;
overflow: hidden;
}
.highlight-lines .highlighted {
background-color: #000000a8;
}
div[class*='language-'].line-numbers-mode {
padding-left: 3.5rem;
}
.line-numbers-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 3;
border-right: 1px solid var(--el-overlay-color-lighter);
padding: 1.25rem 0;
width: 3.5rem;
text-align: center;
line-height: var(--code-line-height);
font-family: var(--code-font-family);
font-size: var(--code-font-size);
color: #888;
}
.navbar-menu {
display: none;
}
@media screen and (min-width: 768px) {
.navbar-menu {
display: flex;
}
}
.navbar-wrapper {
position: relative;
border-bottom: 1px solid var(--border-color);
height: var(--header-height);
padding: 0 12px 0 24px;
background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px);
-webkit-backdrop-filter: saturate(50%) blur(4px);
top: 0;
}
@media screen and (min-width: 768px) {
.navbar-wrapper {
padding: 0 12px 0 32px;
}
}
@media screen and (min-width: 1280px) {
.navbar-wrapper {
padding: 0 32px;
}
}
.navbar-wrapper .header-container {
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.navbar-wrapper .header-container .content {
display: flex;
justify-content: flex-end;
align-items: center;
flex-grow: 1;
}
@media screen and (min-width: 1440px) {
.navbar-wrapper .header-container {
max-width: calc(var(--vp-screen-max-width));
}
}
@media screen and (min-width: 1680px) {
.navbar-wrapper .header-container {
max-width: calc(var(--vp-screen-max-width));
}
}
@media screen and (min-width: 768px) {
.navbar-wrapper .content {
padding-top: 1px;
}
}
.navbar {
top: 0;
left: 0;
position: relative;
z-index: var(--nav-z-index);
}
@media screen and (min-width: 960px) {
.navbar {
position: sticky;
width: 100%;
}
}
.menu + .appearance {
margin-left: 8px;
}
.menu + .social-links {
margin-left: 12px;
}
.appearance + .social-links {
margin-left: 12px;
}
* {
scrollbar-color: var(--el-scrollbar-bg-color) var(--el-fill-color-light);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar:horizontal {
height: 6px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #0003;
border-radius: 10px;
transition: all 0.2s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
cursor: pointer;
background-color: #0000004d;
}
.dark ::-webkit-scrollbar-thumb {
background-color: #fff3;
}
.dark ::-webkit-scrollbar-thumb:hover {
background-color: #fff6;
}
.sub-nav {
border-bottom: 1px solid var(--border-color);
background-color: var(--bg-color);
color: var(--text-color);
transition: border-color var(--el-transition-duration),
background-color var(--el-transition-duration-fast);
position: sticky;
top: 0;
left: 0;
width: 100%;
display: flex;
padding: 0 32px;
justify-content: space-between;
z-index: var(--sub-nav-z-index);
overflow: hidden;
}
@media (max-width: 767px) {
.sub-nav {
padding: 0 24px;
}
}
.sub-nav .go-back-top {
transform: translateY(100%);
opacity: 0;
}
.sub-nav . {
transform: translateY(0);
opacity: 1;
}
@media screen and (min-width: 960px) {
.sub-nav {
display: none !important;
}
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
transition: opacity 0.5s;
z-index: var(--overlay-z-index);
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: var(--sidebar-z-index);
width: var(--sidebar-width-xs);
background-color: var(--bg-color);
padding: 48px 32px 0;
overflow-y: auto;
transform: translate(-100%);
transition: background-color var(--el-transition-duration-fast), opacity 0.25s,
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
. {
transform: translate(0);
}
.sidebar .sidebar-groups {
padding: 0 0 5rem;
}
.sidebar .sidebar-groups .sidebar-group__title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 8px;
line-height: 24px;
}
.sidebar .sidebar-groups .sidebar-group + .sidebar-group {
padding-top: 24px;
}
@media (max-width: 767px) {
.sidebar {
width: calc(var(--vp-sidebar-width-mobile) - 14px);
}
}
@media screen and (min-width: 768px) {
.sidebar {
width: calc(var(--vp-sidebar-width-small));
}
}
@media screen and (min-width: 960px) {
.sidebar {
top: var(--header-height);
transform: translate(0);
}
}
@media screen and (min-width: 1440px) {
.sidebar {
padding: 48px 32px 96px calc((100vw - var(--vp-screen-max-width)) / 2);
width: calc(
(100vw - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)
);
}
}
@media screen and (min-width: 1680px) {
.sidebar {
padding: 48px 48px 96px calc((100vw - var(--vp-screen-max-width)) / 2);
width: calc(
(100vw - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)
);
}
}
.toc-wrapper {
display: none;
padding-left: 64px;
}
.toc-wrapper .toc-content {
position: sticky;
top: calc(var(--header-height) + 32px);
margin-top: 0;
padding: 4px 8px 4px 12px;
margin-bottom: 32px;
width: 200px;
}
.toc-wrapper .toc-content .toc-marker {
opacity: 0;
position: absolute;
background-color: var(--brand-color);
border-radius: 4px;
width: 4px;
height: 14px;
top: 30px;
left: 0;
z-index: 0;
transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
background-color 0.5s;
}
.toc-wrapper .toc-content__heading {
font-size: 12px;
color: var(--text-color-light);
font-weight: 600;
text-transform: uppercase;
margin-top: 0;
}
.toc-wrapper .toc-content .toc-items {
list-style: none;
padding: 0;
margin: 12px 0 0;
line-height: 1.2;
}
.toc-wrapper .toc-content .toc-items .toc-item {
margin-top: 10px;
font-size: 11px;
color: var(--text-color-lighter);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: inherit;
}
.toc-wrapper .toc-content .toc-items .toc-item .toc-link {
position: relative;
color: var(--text-color-lighter);
transition: color var(--el-transition-duration);
}
.toc-wrapper .toc-content .toc-items .toc-item . {
color: var(--brand-color);
}
.toc-wrapper .toc-content .toc-items . {
padding-left: 1rem;
}
@media screen and (min-width: 1440px) {
.toc-wrapper {
display: block;
}
}
@media screen and (min-width: 1680px) {
.toc-wrapper {
padding-left: 96px;
display: block;
}
}
.doc-content-wrapper {
--vp-content-width: 800px;
padding: 32px 24px 96px;
}
.doc-content-wrapper .doc-content-container .doc-content {
width: 100%;
}
@media screen and (min-width: 1440px) {
.doc-content-wrapper .doc-content-container {
width: var(--vp-content-width);
}
}
@media screen and (min-width: 768px) {
.doc-content-wrapper {
padding: 48px 32px 42px;
}
}
@media screen and (min-width: 960px) {
.doc-content-wrapper {
padding: 64px 64px 42px;
}
}
@media screen and (min-width: 1440px) {
.doc-content-wrapper {
padding: 64px 0 42px 64px;
display: flex;
}
}
@media screen and (min-width: 1680px) {
.doc-content-wrapper {
padding: 64px 0 42px 96px;
display: flex;
}
}
.hero-content {
padding: 40px 40px 0;
}
@media (max-width: 768px) {
.hero-content {
padding: 30px 10px 0;
}
}
.vp-tag {
--vp-tag-color: var(--el-color-primary);
--vp-tag-border-color: var(--el-color-primary);
display: inline-block;
padding: 0 7px;
border-radius: 10px;
border: 1px solid var(--vp-tag-border-color);
font-size: var(--el-font-size-extra-small);
color: var(--vp-tag-color);
line-height: 18px;
white-space: nowrap;
}
. {
--vp-tag-color: var(--el-color-danger);
--vp-tag-border-color: var(--el-color-danger);
}
. {
--vp-tag-color: var(--el-color-warning);
--vp-tag-border-color: var(--el-color-warning);
}
.vp-tag.a11y {
--vp-tag-color: var(--purple-color);
--vp-tag-border-color: var(--purple-color-light);
}
.page-content {
outline: none;
}
@media screen and (min-width: 960px) {
.page-content {
padding-top: var(--nav-height);
}
.-sidebar {
padding-left: calc(var(--sidebar-width-sm) + 10px);
}
}
@media screen and (min-width: 960px) and (min-width: 1280px) {
.-sidebar {
padding-left: calc(var(--vp-sidebar-width-small) - 6px);
}
}
@media screen and (min-width: 960px) and (min-width: 1440px) {
.-sidebar {
padding-left: calc(
(100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)
);
}
}
.page-content .doc-content a {
display: inline-flex;
align-items: center;
}
.page-content .doc-content -link {
white-space: nowrap;
word-break: keep-all;
}
.page-content .doc-content a .link-icon {
margin-left: 0.25rem;
height: 1em;
width: 1em;
}
.container {
max-width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.\!visible {
visibility: visible !important;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.absolute {
position: absolute;
}
.fixed,
[fixed=''] {
position: fixed;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}