vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/theme-default/styles/components/vp-doc.css

@@ -1,3 +1,28 @@
+/**
+ * Anchors
+ * -------------------------------------------------------------------------- */
+
+.vp-doc [id] {
+  scroll-margin-top: calc(
+    2.9375rem + var(--vp-layout-top-height, 0px) +
+      var(--vp-extra-scroll-margin, 1.5rem)
+  );
+
+  @media (min-width: 60rem) {
+    scroll-margin-top: calc(
+      var(--vp-nav-height) + 2.9375rem + var(--vp-layout-top-height, 0px) +
+        var(--vp-extra-scroll-margin, 1.5rem)
+    );
+  }
+
+  @media (min-width: 80rem) {
+    scroll-margin-top: calc(
+      var(--vp-nav-height) + var(--vp-layout-top-height, 0px) +
+        var(--vp-extra-scroll-margin, 1.5rem)
+    );
+  }
+}
+
 /**
  * Headings
  * -------------------------------------------------------------------------- */
@@ -15,38 +40,40 @@
 
 .vp-doc h1 {
   letter-spacing: -0.02em;
-  line-height: 40px;
-  font-size: 28px;
+  line-height: 1.4285714;
+  font-size: 1.75rem;
 }
 
 .vp-doc h2 {
-  margin: 48px 0 16px;
+  margin: 3rem 0 1rem;
   border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
+  padding-top: 1.5rem;
   letter-spacing: -0.02em;
-  line-height: 32px;
-  font-size: 24px;
+  line-height: 1.3333333;
+  font-size: 1.5rem;
+  /* since it already has a top padding of 1.5rem, we don't need extra scroll margin */
+  --vp-extra-scroll-margin: 0px;
 }
 
 .vp-doc h3 {
-  margin: 32px 0 0;
+  margin: 2rem 0 0;
   letter-spacing: -0.01em;
-  line-height: 28px;
-  font-size: 20px;
+  line-height: 1.4;
+  font-size: 1.25rem;
 }
 
 .vp-doc h4 {
-  margin: 24px 0 0;
+  margin: 1.5rem 0 0;
   letter-spacing: -0.01em;
-  line-height: 24px;
-  font-size: 18px;
+  line-height: 1.3333333;
+  font-size: 1.125rem;
 }
 
 .vp-doc .header-anchor {
   position: absolute;
   top: 0;
-  left: 0;
-  margin-left: -0.87em;
+  inset-inline-start: 0;
+  margin-inline-start: -0.87em;
   font-weight: 500;
   user-select: none;
   opacity: 0;
@@ -75,16 +102,16 @@
   opacity: 1;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .vp-doc h1 {
     letter-spacing: -0.02em;
-    line-height: 40px;
-    font-size: 32px;
+    line-height: 1.25;
+    font-size: 2rem;
   }
 }
 
 .vp-doc h2 .header-anchor {
-  top: 24px;
+  top: 1.5rem;
 }
 
 /**
@@ -92,25 +119,26 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc p,
+.vp-doc img,
 .vp-doc summary {
-  margin: 16px 0;
+  margin: 1rem 0;
 }
 
 .vp-doc p {
-  line-height: 28px;
+  line-height: 1.75;
 }
 
 .vp-doc blockquote {
-  margin: 16px 0;
-  border-left: 2px solid var(--vp-c-divider);
-  padding-left: 16px;
+  margin: 1rem 0;
+  border-inline-start: 2px solid var(--vp-c-divider);
+  padding-inline-start: 1rem;
   transition: border-color 0.5s;
   color: var(--vp-c-text-2);
 }
 
 .vp-doc blockquote > p {
   margin: 0;
-  font-size: 16px;
+  font-size: 1rem;
   transition: color 0.5s;
 }
 
@@ -118,7 +146,7 @@
   font-weight: 500;
   color: var(--vp-c-brand-1);
   text-decoration: underline;
-  text-underline-offset: 2px;
+  text-underline-offset: 0.125rem;
   transition:
     color 0.25s,
     opacity 0.25s;
@@ -138,8 +166,8 @@
 
 .vp-doc ul,
 .vp-doc ol {
-  padding-left: 1.25rem;
-  margin: 16px 0;
+  padding-inline-start: 1.25rem;
+  margin: 1rem 0;
 }
 
 .vp-doc ul {
@@ -151,12 +179,49 @@
 }
 
 .vp-doc li + li {
-  margin-top: 8px;
+  margin-top: 0.5rem;
 }
 
 .vp-doc li > ol,
 .vp-doc li > ul {
-  margin: 8px 0 0;
+  margin: 0.5rem 0 0;
+}
+
+.vp-doc li > p:first-child {
+  margin-top: 0;
+}
+
+.vp-doc li > p:last-child {
+  margin-bottom: 0;
+}
+
+.vp-doc li.task-list-item {
+  list-style: none;
+}
+
+.vp-doc .task-list-item-checkbox {
+  margin-block: 0 0.125rem;
+  margin-inline: -1.25rem 0.25rem;
+  vertical-align: middle;
+  accent-color: var(--vp-c-brand-1);
+}
+
+/**
+ * Footnotes
+ * -------------------------------------------------------------------------- */
+
+.vp-doc sup.footnote-ref {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.vp-doc .footnote-ref a,
+.vp-doc .footnote-backref {
+  text-decoration: none;
+}
+
+.vp-doc .footnotes {
+  font-size: 0.875rem;
 }
 
 /**
@@ -166,7 +231,7 @@
 .vp-doc table {
   display: block;
   border-collapse: collapse;
-  margin: 20px 0;
+  margin: 1.25rem 0;
   overflow-x: auto;
 }
 
@@ -183,19 +248,19 @@
 .vp-doc th,
 .vp-doc td {
   border: 1px solid var(--vp-c-divider);
-  padding: 8px 16px;
+  padding: 0.5rem 1rem;
 }
 
 .vp-doc th {
-  text-align: left;
-  font-size: 14px;
+  text-align: start;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
   background-color: var(--vp-c-bg-soft);
 }
 
 .vp-doc td {
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 /**
@@ -203,7 +268,7 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc hr {
-  margin: 16px 0;
+  margin: 1rem 0;
   border: none;
   border-top: 1px solid var(--vp-c-divider);
 }
@@ -213,12 +278,12 @@
  * -------------------------------------------------------------------------- */
 
 .vp-doc .custom-block {
-  margin: 16px 0;
+  margin: 1rem 0;
 }
 
 .vp-doc .custom-block p {
-  margin: 8px 0;
-  line-height: 24px;
+  margin: 0.5rem 0;
+  line-height: 1.7142857;
 }
 
 .vp-doc .custom-block p:first-child {
@@ -226,8 +291,8 @@
 }
 
 .vp-doc .custom-block div[class*='language-'] {
-  margin: 8px 0;
-  border-radius: 8px;
+  margin: 0.5rem 0 !important;
+  border-radius: 0.5rem;
 }
 
 .vp-doc .custom-block div[class*='language-'] code {
@@ -235,9 +300,19 @@
   background-color: transparent;
 }
 
+.vp-doc .custom-block .vp-code-group,
+.vp-doc .custom-block [class*='vp-code-block'] {
+  margin-top: 0.5rem;
+}
+
 .vp-doc .custom-block .vp-code-group .tabs {
   margin: 0;
-  border-radius: 8px 8px 0 0;
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.vp-doc .custom-block .vp-code-group div[class*='language-'],
+.vp-doc .custom-block [class*='vp-code-block'] div[class*='language-'] {
+  margin-top: 0 !important;
 }
 
 /**
@@ -251,9 +326,11 @@
 }
 
 .vp-doc :not(pre) > code {
-  border-radius: 4px;
-  padding: 3px 6px;
+  border-radius: 0.25rem;
+  padding: 0.1875rem 0.375rem;
   background-color: var(--vp-code-bg);
+  /* keep the written order of identifiers and punctuation inside rtl prose */
+  unicode-bidi: plaintext;
   transition:
     color 0.25s,
     background-color 0.5s;
@@ -274,66 +351,60 @@
   font-size: 0.9em;
 }
 
+/* code-block wrappers carry dir="ltr" (see preWrapper.ts), so code, its
+   gutter and its controls keep their physical layout on rtl pages; the
+   logical properties in this section resolve to left/right there */
 .vp-doc div[class*='language-'],
 .vp-block {
   position: relative;
-  margin: 16px -24px;
+  margin: 1rem -1.5rem;
   background-color: var(--vp-code-block-bg);
   overflow-x: auto;
   transition: background-color 0.5s;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .vp-doc div[class*='language-'],
   .vp-block {
-    border-radius: 8px;
-    margin: 16px 0;
+    border-radius: 0.5rem;
+    margin: 1rem 0;
   }
 }
 
-@media (max-width: 639px) {
+@media not all and (min-width: 40rem) {
   .vp-doc li div[class*='language-'] {
-    border-radius: 8px 0 0 8px;
+    border-radius: 0;
+    border-start-start-radius: 0.5rem;
+    border-end-start-radius: 0.5rem;
   }
 }
 
 .vp-doc div[class*='language-'] + div[class*='language-'],
 .vp-doc div[class$='-api'] + div[class*='language-'],
 .vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
-  margin-top: -8px;
+  margin-top: -0.5rem;
 }
 
 .vp-doc [class*='language-'] pre,
 .vp-doc [class*='language-'] code {
-  /*rtl:ignore*/
-  direction: ltr;
-  /*rtl:ignore*/
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
 }
 
 .vp-doc [class*='language-'] pre {
   position: relative;
   z-index: 1;
   margin: 0;
-  padding: 20px 0;
+  padding: 1.25rem 0;
   background: transparent;
   overflow-x: auto;
+  text-align: start;
 }
 
 .vp-doc [class*='language-'] code {
   display: block;
-  padding: 0 24px;
+  padding: 0 1.5rem;
   width: fit-content;
   min-width: 100%;
   line-height: var(--vp-code-line-height);
@@ -345,9 +416,9 @@
 .vp-doc [class*='language-'] code .highlighted {
   background-color: var(--vp-code-line-highlight-color);
   transition: background-color 0.5s;
-  margin: 0 -24px;
-  padding: 0 24px;
-  width: calc(100% + 2 * 24px);
+  margin: 0 -1.5rem;
+  padding: 0 1.5rem;
+  width: calc(100% + 2 * 1.5rem);
   display: inline-block;
 }
 
@@ -361,18 +432,19 @@
 
 .vp-doc [class*='language-'] code .diff {
   transition: background-color 0.5s;
-  margin: 0 -24px;
-  padding: 0 24px;
-  width: calc(100% + 2 * 24px);
+  margin: 0 -1.5rem;
+  padding: 0 1.5rem;
+  width: calc(100% + 2 * 1.5rem);
   display: inline-block;
 }
 
 .vp-doc [class*='language-'] code .diff::before {
   position: absolute;
-  left: 10px;
+  inset-inline-start: 0.625rem;
 }
 
 .vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  will-change: filter;
   filter: blur(0.095rem);
   opacity: 0.4;
   transition:
@@ -412,21 +484,18 @@
 }
 
 .vp-doc div[class*='language-'].line-numbers-mode {
-  /*rtl:ignore*/
-  padding-left: 32px;
+  padding-inline-start: 2rem;
 }
 
 .vp-doc .line-numbers-wrapper {
   position: absolute;
   top: 0;
   bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
+  inset-inline-start: 0;
   z-index: 3;
-  /*rtl:ignore*/
-  border-right: 1px solid var(--vp-code-block-divider-color);
-  padding-top: 20px;
-  width: 32px;
+  border-inline-end: 1px solid var(--vp-code-block-divider-color);
+  padding-top: 1.25rem;
+  width: 2rem;
   text-align: center;
   font-family: var(--vp-font-family-mono);
   line-height: var(--vp-code-line-height);
@@ -438,23 +507,20 @@
 }
 
 .vp-doc [class*='language-'] > button.copy {
-  /*rtl:ignore*/
-  direction: ltr;
   position: absolute;
-  top: 12px;
-  /*rtl:ignore*/
-  right: 12px;
+  top: 0.75rem;
+  inset-inline-end: 0.75rem;
   z-index: 3;
   border: 1px solid var(--vp-code-copy-code-border-color);
-  border-radius: 4px;
-  width: 40px;
-  height: 40px;
+  border-radius: 0.25rem;
+  width: 2.5rem;
+  height: 2.5rem;
   background-color: var(--vp-code-copy-code-bg);
   opacity: 0;
   cursor: pointer;
   background-image: var(--vp-icon-copy);
   background-position: 50%;
-  background-size: 20px;
+  background-size: 1.25rem;
   background-repeat: no-repeat;
   transition:
     border-color 0.25s,
@@ -475,8 +541,8 @@
 
 .vp-doc [class*='language-'] > button.copy.copied,
 .vp-doc [class*='language-'] > button.copy:hover.copied {
-  /*rtl:ignore*/
-  border-radius: 0 4px 4px 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   background-color: var(--vp-code-copy-code-hover-bg);
   background-image: var(--vp-icon-copied);
 }
@@ -485,35 +551,34 @@
 .vp-doc [class*='language-'] > button.copy:hover.copied::before {
   position: relative;
   top: -1px;
-  /*rtl:ignore*/
   transform: translateX(calc(-100% - 1px));
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid var(--vp-code-copy-code-hover-border-color);
-  /*rtl:ignore*/
-  border-right: 0;
-  /*rtl:ignore*/
-  border-radius: 4px 0 0 4px;
-  padding: 0 10px;
+  border-inline-end: 0;
+  border-start-start-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
+  padding: 0 0.625rem;
   width: fit-content;
-  height: 40px;
+  height: 2.5rem;
   text-align: center;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--vp-code-copy-code-active-text);
   background-color: var(--vp-code-copy-code-hover-bg);
   white-space: nowrap;
-  content: var(--vp-code-copy-copied-text-content);
+  /* the wrapper is ltr; let the translated label pick its own direction */
+  unicode-bidi: plaintext;
+  content: attr(data-copied);
 }
 
 .vp-doc [class*='language-'] > span.lang {
   position: absolute;
-  top: 2px;
-  /*rtl:ignore*/
-  right: 8px;
+  top: 0.125rem;
+  inset-inline-end: 0.5rem;
   z-index: 2;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 500;
   user-select: none;
   color: var(--vp-code-lang-color);
@@ -527,55 +592,36 @@
   opacity: 0;
 }
 
-/**
- * Component: Team
- * -------------------------------------------------------------------------- */
-
-.vp-doc .VPTeamMembers {
-  margin-top: 24px;
-}
-
-.vp-doc .VPTeamMembers.small.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
-}
-
-.vp-doc .VPTeamMembers.small.count-2 .container,
-.vp-doc .VPTeamMembers.small.count-3 .container {
-  max-width: 100% !important;
-}
-
-.vp-doc .VPTeamMembers.medium.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
-}
-
 /**
  * External links
  * -------------------------------------------------------------------------- */
 
 /* prettier-ignore */
-:is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
-  display: inline-block;
-  margin-top: -1px;
-  margin-left: 4px;
-  width: 11px;
-  height: 11px;
+:where(
+  .vp-external-link-icon,
+  .vp-doc a:is([href*='://'], [target='_blank'])
+):not(.no-icon, svg a, :has(img, svg))::after {
+  display: inline;
+  margin-inline-start: 0.25rem;
+  padding-inline-start: 0.6875rem;
   background: currentColor;
-  color: var(--vp-c-text-3);
+  color: currentColor;
   flex-shrink: 0;
-  --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");
+  --icon: var(--vp-icon-external-link);
   -webkit-mask-image: var(--icon);
   mask-image: var(--icon);
-  /*rtl:raw:transform: scaleX(-1);*/
-}
-
-.vp-external-link-icon::after {
-  content: '';
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
 }
 
 /* prettier-ignore */
-.external-link-icon-enabled :is(.vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
-  content: '';
-  color: currentColor;
+:where(
+  .vp-external-link-icon,
+  .external-link-icon-enabled :is(.vp-doc a:is([href*='://'], [target='_blank']))
+):not(.no-icon, svg a, :has(img, svg))::after {
+  content: var(--vp-direction-mark) '\2060';
 }