329 lines
6.8 KiB
CSS
329 lines
6.8 KiB
CSS
.vp-doc {
|
|
position: relative;
|
|
}
|
|
|
|
/**
|
|
* Headings
|
|
* -------------------------------------------------------------------------- */
|
|
.vp-doc h1,
|
|
.vp-doc h2,
|
|
.vp-doc h3,
|
|
.vp-doc h4,
|
|
.vp-doc h5,
|
|
.vp-doc h6 {
|
|
position: relative;
|
|
font-weight: 600;
|
|
color: var(--vp-c-text-1);
|
|
overflow-wrap: break-word;
|
|
outline: none;
|
|
}
|
|
|
|
.vp-doc h1 {
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.vp-doc h2 {
|
|
padding-top: 24px;
|
|
margin: 48px 0 16px;
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
letter-spacing: -0.02em;
|
|
border-top: 1px solid var(--vp-c-divider);
|
|
transition: border-top var(--vp-t-color), color var(--vp-t-color);
|
|
}
|
|
|
|
.vp-doc h2:first-of-type {
|
|
border-top: none;
|
|
}
|
|
|
|
.vp-doc h3 {
|
|
margin: 32px 0 16px;
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.vp-doc h4 {
|
|
margin: 24px 0 16px;
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.vp-doc h5,
|
|
.vp-doc h6 {
|
|
margin: 24px 0 16px;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.vp-doc .header-anchor {
|
|
position: relative;
|
|
color: currentcolor;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.vp-doc .header-anchor::before {
|
|
position: absolute;
|
|
left: -0.75em;
|
|
font-size: 0.8em;
|
|
color: var(--vp-c-brand-1);
|
|
content: var(--vp-header-anchor-symbol);
|
|
opacity: 0;
|
|
transition: color var(--vp-t-color);
|
|
}
|
|
|
|
.vp-doc .header-anchor:hover {
|
|
color: inherit;
|
|
}
|
|
|
|
.vp-doc .header-anchor:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.vp-doc .header-anchor:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.vp-doc .header-anchor:focus-visible::before {
|
|
position: absolute;
|
|
left: -0.75em;
|
|
color: var(--vp-c-brand-1);
|
|
content: var(--vp-header-anchor-symbol);
|
|
outline: auto;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.vp-doc h1 {
|
|
font-size: 32px;
|
|
line-height: 40px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
}
|
|
|
|
.vp-doc img {
|
|
display: inline-block;
|
|
}
|
|
|
|
.vp-doc img + img {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.vp-doc a img + span {
|
|
margin-left: 0.2rem;
|
|
}
|
|
|
|
/**
|
|
* Paragraph and inline elements
|
|
* -------------------------------------------------------------------------- */
|
|
.vp-doc p,
|
|
.vp-doc summary {
|
|
margin: 16px 0;
|
|
color: var(--vp-c-text-1);
|
|
transition: color var(--vp-t-color);
|
|
}
|
|
|
|
.vp-doc p {
|
|
line-height: 28px;
|
|
}
|
|
|
|
.vp-doc blockquote {
|
|
position: relative;
|
|
padding: 8px 20px 8px 36px;
|
|
margin: 16px 0;
|
|
color: var(--vp-c-text-3);
|
|
background-color: var(--vp-c-default-soft);
|
|
border-radius: 8px;
|
|
transition: background-color var(--vp-t-color), color var(--vp-t-color);
|
|
}
|
|
|
|
.vp-doc blockquote::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 4px;
|
|
font-size: 32px;
|
|
color: var(--vp-c-text-1);
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E");
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.vp-doc blockquote > p {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
color: inherit;
|
|
}
|
|
|
|
.vp-doc a {
|
|
font-weight: 500;
|
|
color: var(--vp-c-brand-1);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
transition: color var(--vp-t-color), opacity var(--vp-t-color), text-underline-offset var(--vp-t-color);
|
|
}
|
|
|
|
@media print {
|
|
.vp-doc a[href^="http://"]::after, .vp-doc a[href^="https://"]::after {
|
|
content: " (" attr(href) ") ";
|
|
}
|
|
}
|
|
|
|
.vp-doc :not(h1, h2, h3, h4, h5, h6) a:hover {
|
|
color: var(--vp-c-brand-2);
|
|
text-underline-offset: 5px;
|
|
}
|
|
|
|
.vp-doc strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/**
|
|
* Lists
|
|
* -------------------------------------------------------------------------- */
|
|
.vp-doc ul,
|
|
.vp-doc ol {
|
|
padding-left: 1.25rem;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.vp-doc ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
.vp-doc ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.vp-doc li + li {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.vp-doc li > ol,
|
|
.vp-doc li > ul {
|
|
margin: 8px 0 0;
|
|
}
|
|
|
|
/**
|
|
* Table
|
|
* -------------------------------------------------------------------------- */
|
|
.vp-doc table {
|
|
display: block;
|
|
margin: 20px 0;
|
|
overflow-x: auto;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.vp-doc tr {
|
|
background-color: var(--vp-c-bg);
|
|
border-top: 1px solid var(--vp-c-divider);
|
|
transition: var(--vp-t-color);
|
|
transition-property: background-color, border-top;
|
|
}
|
|
|
|
.vp-doc tr:nth-child(2n) {
|
|
background-color: var(--vp-c-bg-soft);
|
|
}
|
|
|
|
.vp-doc th,
|
|
.vp-doc td {
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--vp-c-divider);
|
|
transition: border var(--vp-t-color);
|
|
}
|
|
|
|
.vp-doc th {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--vp-c-text-2);
|
|
text-align: left;
|
|
background-color: var(--vp-c-bg-soft);
|
|
transition: var(--vp-t-color);
|
|
transition-property: color, background-color, border;
|
|
}
|
|
|
|
.vp-doc td {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/**
|
|
* Decorational elements
|
|
* -------------------------------------------------------------------------- */
|
|
.vp-doc hr {
|
|
margin: 16px 0;
|
|
border: none;
|
|
border-top: 1px solid var(--vp-c-divider);
|
|
transition: border-top var(--vp-t-color);
|
|
}
|
|
|
|
/**
|
|
* inline Code
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
|
|
font-size: var(--vp-code-font-size);
|
|
color: var(--vp-code-color);
|
|
transition: color var(--vp-t-color);
|
|
}
|
|
|
|
.vp-doc :not(pre) > code {
|
|
padding: 3px 6px;
|
|
background-color: var(--vp-code-bg);
|
|
border-radius: 4px;
|
|
transition: color var(--vp-t-color), background-color var(--vp-t-color);
|
|
}
|
|
|
|
.vp-doc h1 > code,
|
|
.vp-doc h2 > code,
|
|
.vp-doc h3 > code,
|
|
.vp-doc h4 > code {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.vp-doc a > code {
|
|
color: var(--vp-code-link-color);
|
|
transition: color var(--vp-t-color);
|
|
}
|
|
|
|
.vp-doc a:hover > code {
|
|
color: var(--vp-code-link-hover-color);
|
|
}
|
|
|
|
/**
|
|
* External links
|
|
* -------------------------------------------------------------------------- */
|
|
:is(.vp-external-link-icon, .vp-doc a[href*="://"], .vp-doc a[target=_blank]):not(.no-icon)::after {
|
|
--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
|
|
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
width: 11px;
|
|
height: 11px;
|
|
margin-top: -1px;
|
|
margin-left: 4px;
|
|
color: var(--vp-c-text-3);
|
|
background: currentcolor;
|
|
-webkit-mask-image: var(--icon);
|
|
mask-image: var(--icon);
|
|
}
|
|
|
|
.vp-external-link-icon::after {
|
|
content: "";
|
|
}
|
|
|
|
/* prettier-ignore */
|
|
.external-link-icon-enabled :is(.vp-doc a[href*="://"], .vp-doc a[target=_blank])::after {
|
|
color: currentcolor;
|
|
content: "";
|
|
}
|
|
|
|
.vp-doc a[href*="://"]:has(img:only-child)::after,
|
|
.vp-doc a[target=_blank]:has(img:only-child)::after {
|
|
display: none;
|
|
}
|
|
|
|
.vp-doc :not(a) > img {
|
|
cursor: zoom-in;
|
|
}
|