vitepress-theme-element-plus 0.0.1 → 0.0.2

package/styles/code.scss

@@ -0,0 +1,283 @@
+:root {
+  --vp-code-block-bg: var(--el-fill-color-light);
+  --vp-code-line-height: 1.6;
+}
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--code-font-family);
+}
+
+:not(pre) > code {
+  border-radius: 4px;
+  padding: 0.15rem 0.5rem;
+  background-color: var(--el-fill-color-light);
+  transition: color 0.25s, background-color 0.5s;
+  font-size: 14px;
+}
+
+.doc-content a > code {
+  color: var(--vp-code-link-color);
+}
+
+.doc-content a:hover > code {
+  color: var(--vp-code-link-hover-color);
+}
+
+.doc-content h1 > code,
+.doc-content h2 > code,
+.doc-content h3 > code {
+  font-size: 0.9em;
+}
+
+.doc-content div[class*='language-'],
+.vp-block {
+  position: relative;
+  margin: 16px 0;
+  background-color: var(--vp-code-block-bg);
+  overflow-x: auto;
+  transition: background-color 0.5s;
+}
+
+@media (min-width: 640px) {
+  .doc-content div[class*='language-'],
+  .vp-block {
+    border-radius: 8px;
+  }
+}
+
+@media (max-width: 639px) {
+  .doc-content li div[class*='language-'] {
+    border-radius: 8px 0 0 8px;
+  }
+}
+
+.doc-content div[class*='language-'] + div[class*='language-'],
+.doc-content div[class$='-api'] + div[class*='language-'],
+.doc-content
+  div[class*='language-']
+  + div[class$='-api']
+  > div[class*='language-'] {
+  margin-top: -8px;
+}
+
+.doc-content [class*='language-'] pre,
+.doc-content [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;
+}
+
+.doc-content [class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 20px 0;
+  background: transparent;
+  overflow-x: auto;
+}
+
+.doc-content [class*='language-'] code {
+  display: block;
+  padding: 0 24px;
+  width: fit-content;
+  min-width: 100%;
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-block-color);
+  transition: color 0.5s;
+}
+
+.doc-content [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);
+  display: inline-block;
+}
+
+.doc-content [class*='language-'] code .highlighted.error {
+  background-color: var(--vp-code-line-error-color);
+}
+
+.doc-content [class*='language-'] code .highlighted.warning {
+  background-color: var(--vp-code-line-warning-color);
+}
+
+.doc-content [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.doc-content [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 10px;
+}
+
+.doc-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.doc-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.doc-content
+  [class*='language-']:hover
+  .has-focused-lines
+  .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.doc-content [class*='language-'] code .diff.remove {
+  background-color: var(--vp-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.doc-content [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--vp-code-line-diff-remove-symbol-color);
+}
+
+.doc-content [class*='language-'] code .diff.add {
+  background-color: var(--vp-code-line-diff-add-color);
+}
+
+.doc-content [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--vp-code-line-diff-add-symbol-color);
+}
+
+.doc-content div[class*='language-'].line-numbers-mode {
+  /*rtl:ignore*/
+  padding-left: 32px;
+}
+
+.doc-content .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: 3;
+  /*rtl:ignore*/
+  border-right: 1px solid var(--vp-code-block-divider-color);
+  padding-top: 20px;
+  width: 32px;
+  text-align: center;
+  font-family: var(--vp-font-family-mono);
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-line-number-color);
+  transition: border-color 0.5s, color 0.5s;
+}
+
+.doc-content [class*='language-'] > button.copy {
+  /*rtl:ignore*/
+  direction: ltr;
+  position: absolute;
+  top: 12px;
+  /*rtl:ignore*/
+  right: 12px;
+  z-index: 3;
+  border: 1px solid var(--vp-code-copy-code-border-color);
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+  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-repeat: no-repeat;
+  transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;
+}
+
+.doc-content [class*='language-']:hover > button.copy,
+.doc-content [class*='language-'] > button.copy:focus {
+  opacity: 1;
+}
+
+.doc-content [class*='language-'] > button.copy:hover,
+.doc-content [class*='language-'] > button.copy.copied {
+  border-color: var(--vp-code-copy-code-hover-border-color);
+  background-color: var(--vp-code-copy-code-hover-bg);
+}
+
+.doc-content [class*='language-'] > button.copy.copied,
+.doc-content [class*='language-'] > button.copy:hover.copied {
+  /*rtl:ignore*/
+  border-radius: 0 4px 4px 0;
+  background-color: var(--vp-code-copy-code-hover-bg);
+  background-image: var(--vp-icon-copied);
+}
+
+.doc-content [class*='language-'] > button.copy.copied::before,
+.doc-content [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;
+  border-radius: 4px 0 0 4px;
+  padding: 0 10px;
+  width: fit-content;
+  height: 40px;
+  text-align: center;
+  font-size: 12px;
+  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);
+}
+
+.doc-content [class*='language-'] > span.lang {
+  position: absolute;
+  top: 2px;
+  /*rtl:ignore*/
+  right: 8px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-lang-color);
+  transition: color 0.4s, opacity 0.4s;
+}
+
+.doc-content [class*='language-']:hover > button.copy + span.lang,
+.doc-content [class*='language-'] > button.copy:focus + span.lang {
+  opacity: 0;
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+}

package/styles/doc-content.scss

@@ -0,0 +1,161 @@
+.doc-content {
+  h1  {
+    margin-bottom: 2rem;
+    font-weight: 600;
+    font-size: 1.9rem;
+  }
+
+  h2 {
+    margin-top: 2.25rem;
+    margin-bottom: 1.25rem;
+    padding-bottom: .3rem;
+    line-height: 1.25;
+    font-size: 1.65rem;
+    font-weight: 600;
+  }
+
+  h3 {
+    font-size: 1.35rem;
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: 1.15rem;
+    font-weight: 600;
+  }
+
+  h5 {
+    font-weight: 600;
+  }
+
+  h2+h3 {
+    margin-top: 1.5rem;
+  }
+
+  p {
+    margin: 1rem 0;
+    line-height: 1.7;
+  }
+
+  a {
+    font-weight: 500;
+    text-decoration: inherit;
+    color: var(--brand-color);
+    display: inline-flex;
+    align-items: center;
+  }
+
+  a .link-icon {
+    margin-left: .25rem;
+    height: 1em;
+    width: 1em;
+  }
+
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    display: flex;
+    align-items: center;
+    color: var(--el-text-color-regular);
+
+    // Special case for handling tagged header.
+    .el-tag,
+    .vp-tag {
+      margin-left: 8px;
+    }
+  }
+
+  @media screen and (min-width: 480px) {
+    h1 {
+      font-size: 2.2rem;
+    }
+  }
+
+  div .vp-table {
+    width: 100%;
+    overflow-y: hidden;
+    overflow-x: auto;
+    margin-bottom: 45px;
+
+    & > table {
+      border-collapse: collapse;
+      width: 100%;
+      background-color: var(--bg-color);
+      font-size: 14px;
+      line-height: 1.5em;
+
+      tr {
+        td:nth-child(2) {
+          font-family: var(--font-family);
+        }
+      }
+
+      th,
+      td {
+        white-space: nowrap;
+        border-top: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--border-color);
+        padding: 0.6em 1em;
+        text-align: left;
+        max-width: 250px;
+        white-space: pre-wrap;
+      }
+
+      thead tr:first-child th {
+        border-top: none;
+      }
+
+      tbody tr td:first-child {
+        font-family: var(--font-family-mono);
+      }
+    }
+  }
+
+  .header-anchor:before {
+    content: '#';
+  }
+
+  a.header-anchor {
+    position: absolute;
+    margin-top: .125em;
+    margin-left: -.87em;
+    padding-right: .23em;
+    font-size: .85em;
+    opacity: 0;
+  }
+
+  h1:hover .header-anchor,h1:focus .header-anchor,h2:hover .header-anchor,h2:focus .header-anchor,h3:hover .header-anchor,h3:focus .header-anchor,h4:hover .header-anchor,h4:focus .header-anchor,h5:hover .header-anchor,h5:focus .header-anchor,h6:hover .header-anchor,h6:focus .header-anchor {
+    opacity: 1
+  }
+
+
+  .custom-block {
+    .custom-block-title {
+      font-weight: 700;
+    }
+
+    p:not(.custom-block-title) {
+      font-size: 0.9rem;
+    }
+
+    &.tip {
+      padding: 8px 16px;
+      background-color: var(--block-tip-bg-color);
+      border-radius: 4px;
+      border-left: 5px solid var(--el-color-primary);
+      margin: 20px 0;
+    }
+
+    &.warning {
+      padding: 8px 16px;
+      background-color: var(--block-warning-bg-color);
+      border-radius: 4px;
+      border-left: 5px solid var(--el-color-danger);
+      margin: 20px 0;
+    }
+  }
+}

package/styles/index.scss

@@ -0,0 +1,69 @@
+:root {
+  --vp-layout-max-width: 1680px;
+  --vp-sidebar-width-small: 266px;
+  --vp-sidebar-width-mobile: 320px;
+  --text-color: var(--el-text-color-primary);
+  --text-color-light: var(--el-text-color-regular);
+  --text-color-lighter: var(--el-text-color-secondary);
+  --brand-color: var(--el-color-primary);
+  --brand-color-light: var(--el-color-primary-light-1);
+  --bg-brand-color: var(--el-color-primary-light-9);
+  --bg-color: var(--el-bg-color);
+  --bg-color-rgb: 255, 255, 255;
+  --bg-color-soft: #fafafa;
+  --bg-color-mute: #f2f2f2;
+  --border-color: var(--el-border-color);
+  --border-color-light: var(--el-border-color-lighter);
+  --font-family: var(--el-font-family);
+  --font-family-mono: "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  --success-color: var(--el-color-success);
+  --warning-color: var(--el-color-warning);
+  --danger-color: var(--el-color-danger);
+  --vp-screen-max-width: 1362px;
+  --vp-sidebar-width-mobile: 320px;
+  --vp-sidebar-width-small: 266px;
+  --code-font-family: var(--font-family-mono);
+  --code-font-size: var(--el-font-size-base);
+  --code-bg-color: var(--el-fill-color-light);
+  --code-text-color: var(--text-color);
+  --code-tooltip-bg-color: var(--code-bg-color);
+  --code-tooltip-color: #0c61c9;
+  --block-tip-bg-color: rgba(var(--el-color-primary-rgb), .1);
+  --block-warning-bg-color: rgba(var(--el-color-danger-rgb), .1);
+  --link-active-bg-color: rgba(var(--el-color-primary-rgb), .1)
+
+  &.dark {
+    --el-color-primary: #a8b1ff;
+  }
+}
+
+:root:root {
+  --vp-nav-height: 55px;
+  --vp-nav-logo-height: 28px;
+  --vp-c-brand: var(--el-color-primary);
+  --vp-c-brand-1: var(--el-color-primary);
+  --el-bg-color: var(--vp-c-bg);
+}
+// fix "vitepress-plugin-group-icons" 
+.vp-code-block-title-bar.vp-code-block-title-bar {
+    margin: 16px 0px 0px;
+}
+
+.vp-code-group .tabs.tabs {
+  margin-right: 0px;
+  margin-left: 0px;
+  border-radius: 8px 8px 0px 0px;
+}
+
+@media screen and (min-width: 1440px) {
+  :root {
+    --vp-sidebar-width-small: 234px;
+  }
+}
+
+@media screen and (min-width: 1680px) {
+  :root {
+    --vp-screen-max-width: 1482px;
+    --vp-sidebar-width-small: 290px;
+  }
+}

package/styles/tag-content.scss

@@ -0,0 +1,30 @@
+.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;
+
+  &.beta {
+    --vp-tag-color: var(--el-color-danger);
+    --vp-tag-border-color: var(--el-color-danger);
+  }
+  &.deprecated {
+    --vp-tag-color: var(--el-color-warning);
+    --vp-tag-border-color: var(--el-color-warning);
+  }
+  &.a11y {
+    --vp-tag-color: var(--purple-color);
+    --vp-tag-border-color: var(--purple-color-light);
+  }
+  &.required {
+    --vp-tag-color: var(--el-color-success);
+    --vp-tag-border-color: var(--el-color-success);
+  }
+}