Initial rearrangment of vuetom site source

packages/vuetom/styles/code-vt.scss

@@ -0,0 +1,136 @@
+/** code macos */
+div[class*='language-'] {
+  &.macos,&.light {
+    margin: 0 0 24px;
+    border-radius: 7px;
+    box-shadow: var(--vp-shadow-4);
+    &:hover {
+      .line-numbers-wrapper {
+        color: var(--vp-c-brand);
+        font-weight: 600;
+        opacity: 1;
+      }
+    }
+    .line-numbers-wrapper {
+      padding-top: 40px;
+      width: 32px;
+      border-right: 0px;
+      opacity: 0.3;
+    }
+    &::before {
+      position: initial;
+      display: block;
+      color: var(--vp-c-text-2);
+      background: var(--vp-c-bg-soft);
+      height: 24px;
+      line-height: 24px;
+      font-weight: bold;
+      text-align: center;
+    }
+    &::after {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #fc625d;
+      -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+      content: ' ';
+    }
+    pre {
+      code {
+        padding-left: 32px;
+        font-weight: 600;
+      }
+    }
+    .token.comment,
+    .token.block-comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+      color: #747474;
+    }
+
+    .token.punctuation {
+      color: #743c3c;
+    }
+
+    .token.tag,
+    .token.attr-name,
+    .token.namespace,
+    .token.deleted {
+      color: #e2777a;
+    }
+
+    .token.function-name {
+      color: #1a5997;
+    }
+
+    .token.boolean,
+    .token.number,
+    .token.function {
+      color: #af4b09;
+    }
+
+    .token.property,
+    .token.class-name,
+    .token.constant,
+    .token.symbol {
+      color: #a0710b;
+    }
+
+    .token.selector,
+    .token.important,
+    .token.atrule,
+    .token.keyword,
+    .token.builtin {
+      color: #a241a3;
+    }
+
+    .token.string,
+    .token.char,
+    .token.attr-value,
+    .token.regex,
+    .token.variable {
+      color: #1e8545;
+    }
+
+    .token.operator,
+    .token.entity,
+    .token.url {
+      color: #168d8b;
+    }
+
+    .token.important,
+    .token.bold {
+      font-weight: bold;
+    }
+
+    .token.italic {
+      font-style: italic;
+    }
+
+    .token.entity {
+      cursor: help;
+    }
+
+    .token.inserted {
+      color: green;
+    }
+  }
+}
+.dark {
+  div[class*='language-'] {
+    &.macos {
+      &::before {
+        background: var(--vp-c-bg);
+      }
+      .lang {
+        background-color: transparent;
+        display: none;
+      }
+    }
+  }
+}

packages/vuetom/styles/code.scss

@@ -0,0 +1,260 @@
+/** code default */
+
+code .token.deleted {
+  color: #ec5975;
+}
+
+code .token.inserted {
+  color: var(--c-brand);
+}
+
+div[class*='language-'] {
+  position: relative;
+  background-color: var(--vp-c-bg-soft);
+  transition: color 0.5s;
+  border: 2px solid transparent;
+  overflow-x: auto;
+  .line-numbers-wrapper {
+    border-right: 2px solid var(--vp-c-brand);
+    transition: opacity 0.5s;
+    opacity: 0.3;
+  }
+}
+
+div[class*='language-']:hover {
+  border: 2px solid var(--vp-c-brand);
+  .line-numbers-wrapper {
+    color: var(--vp-c-brand);
+    font-weight: 600;
+    opacity: 1;
+  }
+  &::before {
+    opacity: 0;
+  }
+  &::after {
+    width: 100%;
+    opacity: 1;
+  }
+}
+
+div[class*='language-']::after {
+  content: '';
+  height: 5px;
+  width: 0;
+  background: var(--vp-c-brand);
+  transition: all 0.5s;
+  opacity: 0.3;
+  display: block;
+}
+
+div[class*='language-']::before {
+  position: absolute;
+  bottom: 0;
+  font-size: 0.8rem;
+  color: #888;
+  height: 20px;
+  line-height: 20px;
+  width: 100%;
+  text-align: center;
+  transition: opacity 0.5s;
+  display: none;
+}
+
+.dark {
+  div[class*='language-'] {
+    background-color: var(--vp-c-bg-alt);
+  }
+}
+
+@media (min-width: 420px) {
+  div[class*='language-'] {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+
+  li > div[class*='language-'] {
+    margin: 1rem 0 1rem 0rem;
+    border-radius: 6px;
+  }
+}
+
+div[class~='language-html']:before,
+div[class~='language-markup']:before {
+  content: 'html';
+}
+
+div[class~='language-md']:before,
+div[class~='language-markdown']:before {
+  content: 'md';
+}
+
+div[class~='language-css']:before {
+  content: 'css';
+}
+
+div[class~='language-sass']:before {
+  content: 'sass';
+}
+
+div[class~='language-scss']:before {
+  content: 'scss';
+}
+
+div[class~='language-less']:before {
+  content: 'less';
+}
+
+div[class~='language-stylus']:before {
+  content: 'styl';
+}
+
+div[class~='language-js']:before,
+div[class~='language-javascript']:before {
+  content: 'js';
+}
+
+div[class~='language-ts']:before,
+div[class~='language-typescript']:before {
+  content: 'ts';
+}
+
+div[class~='language-json']:before {
+  content: 'json';
+}
+
+div[class~='language-rb']:before,
+div[class~='language-ruby']:before {
+  content: 'rb';
+}
+
+div[class~='language-py']:before,
+div[class~='language-python']:before {
+  content: 'py';
+}
+
+div[class~='language-sh']:before,
+div[class~='language-bash']:before {
+  content: 'sh';
+}
+
+div[class~='language-php']:before {
+  content: 'php';
+}
+
+div[class~='language-go']:before {
+  content: 'go';
+}
+
+div[class~='language-rust']:before {
+  content: 'rust';
+}
+
+div[class~='language-java']:before {
+  content: 'java';
+}
+
+div[class~='language-c']:before {
+  content: 'c';
+}
+
+div[class~='language-yaml']:before {
+  content: 'yaml';
+}
+
+div[class~='language-dockerfile']:before {
+  content: 'dockerfile';
+}
+
+div[class~='language-vue']:before {
+  content: 'vue';
+}
+
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML.
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ *
+ * @author Rose Pritchard
+ */
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+
+.token.punctuation {
+  color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+
+.token.function-name {
+  color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}
+
+/* pre code */
+
+.container pre {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  padding: 15px;
+  margin-bottom: 0;
+  overflow: auto;
+}

packages/vuetom/styles/colors.scss

@@ -0,0 +1,78 @@
+:root {
+
+  /**
+   * Base Colors
+   * --------------------------------------------------------------------- */
+
+  --c-white-rgb: 255,255,255;
+  --c-black-rgb: 0,0,0;
+
+  --c-white: #ffffff;
+  --c-white-dark: #f8f8f8;
+  --c-black: #000000;
+
+  --c-divider-light: rgba(60, 60, 67, 0.12);
+  --c-divider-dark: rgba(84, 84, 88, 0.48);
+
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f9f9f9;
+  --vt-c-white-mute: #f1f1f1;
+
+  --vt-c-black: #1a1a1a;
+  --vt-c-black-pure: #000000;
+  --vt-c-black-soft: #242424;
+  --vt-c-black-mute: #2f2f2f;
+
+  --vt-c-indigo: #213547;
+  --vt-c-indigo-soft: #476582;
+  --vt-c-indigo-light: #aac8e4;
+
+  --vt-c-gray: #8e8e8e;
+  --vt-c-gray-light-1: #aeaeae;
+  --vt-c-gray-light-2: #c7c7c7;
+  --vt-c-gray-light-3: #d1d1d1;
+  --vt-c-gray-light-4: #e5e5e5;
+  --vt-c-gray-light-5: #f2f2f2;
+  --vt-c-gray-dark-1: #636363;
+  --vt-c-gray-dark-2: #484848;
+  --vt-c-gray-dark-3: #3a3a3a;
+  --vt-c-gray-dark-4: #282828;
+  --vt-c-gray-dark-5: #202020;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.70);
+  --vt-c-text-light-3: rgba(60, 60, 60, 0.33);
+  --vt-c-text-light-4: rgba(60, 60, 60, 0.18);
+  --vt-c-text-light-code: var(--vt-c-indigo-soft);
+
+  --vt-c-text-dark-1: rgba(255, 255, 255, 0.87);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.60);
+  --vt-c-text-dark-3: rgba(235, 235, 235, 0.38);
+  --vt-c-text-dark-4: rgba(235, 235, 235, 0.18);
+  --vt-c-text-dark-code: var(--vt-c-indigo-light);
+
+  --vp-c-blue: #16a0db;
+  --vp-c-blue-light: #25beff;
+  --vp-c-blue-lighter: #5cceff;
+  --vp-c-blue-dark: #198aba;
+  --vp-c-blue-darker: #13678a;
+  --vp-c-blue-dimm-1: rgba(66, 145, 184, 0.5);
+  --vp-c-blue-dimm-2: rgba(66, 145, 184, 0.4);
+  --vp-c-blue-dimm-3: rgba(66, 145, 184, 0.3);
+  --vp-c-blue-dimm-4: rgba(66, 147, 184, 0.2);
+  --vp-c-blue-dimm-5: rgba(66, 139, 184, 0.1);
+
+  --vp-c-pink: #e44a8a;
+  --vp-c-pink-light: #f962a1;
+  --vp-c-pink-lighter: #ff91bf;
+  --vp-c-pink-dark: #b31858;
+  --vp-c-pink-darker: #720e37;
+  --vp-c-pink-dimm-1: rgba(184, 66, 127, 0.5);
+  --vp-c-pink-dimm-2: rgba(184, 66, 100, 0.25);
+  --vp-c-pink-dimm-3: rgba(184, 66, 113, 0.05);
+}

packages/vuetom/styles/custom-blocks.scss

@@ -0,0 +1,58 @@
+:root {
+  // custom-block.tip
+  --vp-custom-block-tip-border: var(--vp-c-brand-light);
+  --vp-custom-block-tip-text: var(--vp-c-brand);
+  --vp-custom-block-tip-bg: transparent;
+  // custom-block.warning
+  --vp-custom-block-warning-border: #b99a02;
+  --vp-custom-block-warning-text: #b49704;
+  --vp-custom-block-warning-bg: #e7c00010;
+  // custom-block.danger
+  --vp-custom-block-danger-border: #b90e0e;
+  --vp-custom-block-danger-text: #cf0b0b;
+  --vp-custom-block-danger-bg: #cc000010;
+  // custom-block.info
+  --vp-custom-block-info-border: #05b640;
+  --vp-custom-block-info-text: #05b740;
+  --vp-custom-block-info-bg: #06ce4910;
+}
+
+.custom-block.tip,
+.custom-block.info,
+.custom-block.warning,
+.custom-block.danger {
+  margin: 1rem 0;
+  border-width: 2px;
+  border-left: 0.5rem solid;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1.3rem;
+  overflow-x: auto;
+  &:hover {
+    transition: all 0.5s;
+    box-shadow: var(--vp-shadow-4);
+    border-left: 2px solid;
+  }
+  a {
+    cursor: pointer;
+  }
+  .custom-block-title {
+    font-weight: 600;
+  }
+}
+
+.custom-block.details {
+  margin: 1rem 0;
+  border-width: 2px;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1.3rem;
+  summary {
+    outline: none;
+    cursor: pointer;
+  }
+}
+
+.dark {
+  .custom-block.tip {
+    background-color: #23232380;
+  } 
+}

packages/vuetom/styles/index.scss

@@ -0,0 +1,4 @@
+@use './vars.scss';
+@use './custom-blocks.scss';
+@use './code.scss';
+@use './code-vt.scss';

packages/vuetom/styles/mixins.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+
+@use './vars' as *;
+
+@mixin with-border {
+  border-bottom: 2px solid transparent;
+}
+
+$breakpoints: (
+  'sm': #{$breakpoint-sm},
+  'md': #{$breakpoint-md},
+  'lg': #{$breakpoint-lg},
+  'xlg': #{$breakpoint-xlg},
+  'xxl': #{$breakpoint-xxl},
+) !default;
+
+@mixin respond-to($breakpoint) {
+  @if #{map.has-key($breakpoints, $breakpoints)} {
+    @media screen and (min-width: #{map.get($breakpoints, $breakpoint)}) {
+      @content;
+    }
+  }
+}

packages/vuetom/styles/rewrite/aside.scss

@@ -0,0 +1,18 @@
+// 文档侧边栏样式重写
+
+.VPSidebarGroup {
+  .link {
+    &:hover {
+      color: var(--vp-c-brand);
+      // background: var(--vt-c-button-hover-bg); 
+    }
+    &.active {
+      background: var(--vt-c-button-active-bg);
+    }
+    border-radius: 6px;
+    padding: 6px 0;
+    .link-text {
+      padding-left: 12px;
+    }
+  }
+}

packages/vuetom/styles/rewrite/content.scss

@@ -0,0 +1,7 @@
+
+.VPContent {
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center center;
+  background-image: var(--vt-bg-content);
+}

packages/vuetom/styles/rewrite/doc.scss

@@ -0,0 +1,98 @@
+// 文档MD语法样式重写
+.NotFound {
+  padding: 0;
+  margin: 60px;
+  border-radius: 10px;
+  background-color: var(--vt-bg-doc); 
+}
+.VPDoc {
+  background-color: var(--vt-bg-doc);
+  .container {
+    .content {
+      main {
+        background-image: linear-gradient(90deg,rgba(159,219,252,.08) 3%,transparent 0),linear-gradient(1turn,rgba(159,219,252,.08) 3%,transparent 0);
+        background-size: 30px 30px;
+        background-position: 50%;
+      }
+    }
+    .vp-doc {
+      h1, 
+      h2, 
+      h3, 
+      h4, 
+      h5, 
+      h6 {
+        margin: 20px 0;
+        font-weight: 600;
+        color: var(--vp-c-brand);
+      }
+      h1 {
+        font-size: 25px;
+      }
+      h2 {
+        font-size: 20px;
+        border-bottom: 4px solid var(--vp-c-pink-dimm-1);
+        line-height: 35px;
+        padding-left: 20px;
+        margin: 0;
+        border-top: 0;
+        &::after {
+          content: "";
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 400px;
+          height: 10px;
+          border-top-right-radius: 22px;
+          background: linear-gradient(90deg,transparent,var(--vp-c-brand));
+          max-width: 50vw;
+        }
+      }
+      h3 {
+        font-size: 18px;
+      }
+      h4 {
+        font-size: 16px;
+      }
+      h5 {
+        font-size: 14px;
+      }
+      h6 {
+        font-size: 12px;
+      }
+      table {
+        th, td {
+          border: 1px solid var(--vp-c-divider-light);
+        }
+      }
+      a {
+        text-decoration: underline;
+      }
+      strong {
+        color: var(--vp-c-second);
+        &::before {
+          content: "[ ";
+        }
+        &::after {
+          content: " ]";
+        }
+      }
+      blockquote {
+        margin: 0;
+        padding: 1rem;
+        border-left: 6px solid var(--vp-c-brand-dark);
+        border-radius: 5px;
+        background: var(--vp-c-blue-dimm-5);
+      }
+      :not(pre) > code {
+        color: var(--vp-c-second);
+        border: 1px solid var(--vp-c-pink-dimm-2);
+        background-color: var(--vp-c-pink-dimm-3);
+      }
+      :not(pre) > code:hover {
+        border: 1px solid var(--vp-c-pink-dimm-1);
+      }
+    }
+  }
+  
+}

packages/vuetom/styles/rewrite/docsearch.scss

@@ -0,0 +1,5 @@
+.DocSearch-Button {
+  border: 2px solid transparent; 
+  border-radius: 20px;
+  opacity: 0.8;
+}

packages/vuetom/styles/rewrite/home.scss

@@ -0,0 +1,274 @@
+// 文档-首页样式重写
+
+:root {
+  --gap-horizontal: 10px;
+  --gap-vertical: 10px;
+  --time-anim: 5s;
+  --delay-anim: 0s;
+  --blend-mode-1: none;
+  --blend-color-1: transparent;
+  --vt-bg-light: -webkit-linear-gradient(top,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 0) 20%,
+      rgba(0, 0, 0, 0) 80%,
+      rgba(0, 0, 0, 0.1) 100%),
+    -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 20%, rgba(0,
+        0,
+        0,
+        0) 80%, rgba(0, 0, 0, 0.1) 100%),
+    url('');
+}
+
+.VPHome {
+  .VPHeroLogo {
+    width: 15%;
+    margin: 0 auto;
+    padding: 30px 0 0 0;
+  }
+
+  .VPHero {
+    .container {
+      .main {
+        text-align: center;
+
+        .name {
+          color: transparent;
+          background: linear-gradient(to right, #32defd, rgb(247 69 152));
+          max-width: 100%;
+          -webkit-background-clip: text;
+
+          &:hover {
+            -webkit-animation: Glow 1.5s ease infinite alternate;
+            animation: Glow 1.5s ease infinite alternate;
+          }
+        }
+
+        .release-tag {
+          font-size: 1rem;
+          font-weight: bold;
+          line-height: 20px;
+          display: inline-block;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          padding: 6px;
+          margin-left: 8px;
+          background: var(--vp-c-brand);
+          color: #fff;
+          border-radius: 10px;
+        }
+
+        .text {
+          color: var(--vp-c-gray);
+          max-width: 100%;
+        }
+
+        .tagline {
+          color: var(--vp-c-second-lighter);
+          max-width: 100%;
+        }
+
+        .actions {
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  .VPButton {
+    border-radius: 6px !important;
+    border: 2px solid var(--vp-c-brand-light) !important;
+
+    &.alt {
+      color: var(--vp-c-brand-light) !important;
+      background-color: transparent !important;
+    }
+
+    &.alt:hover {
+      color: var(--vp-button-brand-text) !important;
+      background-color: var(--vp-c-brand-light) !important;
+    }
+
+    &.brand {
+      background-color: var(--vp-c-brand) !important;
+    }
+
+    &.brand:hover {
+      background-color: var(--vp-c-brand-light) !important;
+    }
+  }
+
+  &::after {
+    content: ' ';
+    height: 100%;
+    width: 98%;
+    top: 0;
+    left: 0;
+    position: fixed;
+    background-image: var(--vt-bg-light);
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: center center;
+    background-blend-mode: var(--blend-mode-1);
+    animation-duration: var(--time-anim);
+    animation-delay: var(--delay-anim);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-name: glitch-anim-1;
+  }
+
+  .VPFeatures {
+    padding: 32px;
+    margin: 0 15%;
+    margin-bottom: 5%;
+    background: linear-gradient(to right,
+        rgba(6, 205, 255, 0.1882352941),
+        rgba(223, 7, 107, 0.3));
+    border-radius: 16px;
+
+    .item {
+      padding: 16px;
+
+      .VPFeature {
+        border: 1px solid var(--vp-c-text-inverse-4);
+        background-color: transparent;
+
+        &:hover {
+          -webkit-animation-name: hfhover-zoom;
+          animation-name: hfhover-zoom;
+          -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+          -webkit-animation-timing-function: ease-in;
+          animation-timing-function: ease-in;
+          -webkit-animation-iteration-count: 1;
+          animation-iteration-count: 1;
+          color: var(--c-sub-brand-light);
+        }
+
+        .title {
+          color: var(--vp-c-brand-light);
+          font-size: 1.3rem;
+          margin: 15px;
+        }
+
+        .details {
+          color: var(--vp-c-second-lighter);
+          font-size: 1rem;
+          line-height: 1.5rem;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFeatures {
+    padding: 32px !important;
+  }
+}
+
+@-webkit-keyframes Glow {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
+      0 0 40px var(--vp-c-second), 0 0 70px var(--vp-c-second),
+      0 0 80px var(--vp-c-second), 0 0 100px var(--vp-c-second),
+      0 0 150px var(--vp-c-second);
+  }
+
+  to {
+    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff,
+      0 0 10px var(--vp-c-brand), 0 0 17px var(--vp-c-brand),
+      0 0 20px var(--vp-c-brand), 0 0 25px var(--vp-c-brand),
+      0 0 37px var(--vp-c-brand);
+  }
+}
+
+@keyframes Glow {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
+      0 0 40px var(--vp-c-second), 0 0 70px var(--vp-c-second),
+      0 0 80px var(--vp-c-second), 0 0 100px var(--vp-c-second),
+      0 0 150px var(--vp-c-second);
+  }
+
+  to {
+    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff,
+      0 0 10px var(--vp-c-brand), 0 0 17px var(--vp-c-brand),
+      0 0 20px var(--vp-c-brand), 0 0 25px var(--vp-c-brand),
+      0 0 37px var(--vp-c-brand);
+  }
+}
+
+@keyframes glitch-anim-1 {
+  0% {
+    opacity: 1;
+    transform: translate3d(var(--gap-horizontal), 0, 0);
+    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
+  }
+
+  2% {
+    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
+  }
+
+  4% {
+    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
+  }
+
+  6% {
+    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
+  }
+
+  8% {
+    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
+  }
+
+  10% {
+    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
+  }
+
+  12% {
+    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
+  }
+
+  14% {
+    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
+  }
+
+  16% {
+    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
+  }
+
+  18% {
+    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
+  }
+
+  20% {
+    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
+  }
+
+  21.9% {
+    opacity: 1;
+    transform: translate3d(var(--gap-horizontal), 0, 0);
+  }
+
+  22%,
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 0, 0);
+    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+  }
+}
+
+@keyframes hfhover-zoom {
+  50% {
+    -webkit-transform: scale(0.9);
+    transform: scale(0.9);
+    -webkit-filter: brightness(80%);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-filter: brightness(100%);
+  }
+}

packages/vuetom/styles/rewrite/index.scss

@@ -0,0 +1,12 @@
+// rewrite nav
+@use './nav.scss';
+// rewrite aside button
+@use './aside.scss';
+// rewrite content bg
+@use './content.scss';
+// rewrite main content
+@use './doc.scss';
+// rewrite search box
+@use './docsearch.scss';
+// rewrite custom home
+@use './home.scss';

packages/vuetom/styles/rewrite/nav.scss

@@ -0,0 +1,17 @@
+// 文档顶部导航栏样式重写
+
+.VPNav {
+  box-shadow: var(--vp-shadow-2);
+  .VPNavBarTitle {
+    .title {
+      color: var(--vp-c-brand);
+      font-size: 1.2rem;
+      font-weight: bold;
+    }
+  }
+  .VPNavBar {
+    .VPNavBarMenuLink {
+      font-weight: bold;
+    }
+  }
+}

packages/vuetom/styles/tailwind/s.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/vuetom/styles/vars.scss

@@ -0,0 +1,149 @@
+/** Base Styles */
+
+/**
+ * Base Color
+ * --------------------------------------------------------------------- */
+@import './colors.scss';
+
+:root {
+
+  /**
+   * Extends Vitepress
+   * --------------------------------------------------------------------- */
+
+  --vp-c-second: var(--vp-c-pink);
+  --vp-c-second-light: var(--vp-c-pink-light);
+  --vp-c-second-lighter: var(--vp-c-pink-lighter);
+  --vp-c-second-dark: var(--vp-c-pink-dark);
+  --vp-c-second-darker: var(--vp-c-pink-darker);  
+
+  /**
+   * Typography
+   * --------------------------------------------------------------------- */
+
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+
+  /**
+   * Z Indexes
+   *
+   * Algolia SearchBox has a z-index of 200, so make sure not to go above
+   * that value.
+   * --------------------------------------------------------------------- */
+
+  --z-index-navbar: 10;
+  --z-index-sidebar: 6;
+
+  /**
+   * Shadows
+   * --------------------------------------------------------------------- */
+
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+  --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+
+  /**
+   * Sizes
+   * --------------------------------------------------------------------- */
+
+  --header-height: 3.6rem;
+}
+
+:root {
+  --c-brand: #1496ce;
+  --c-brand-light: #19aeee;
+  --c-sub-brand: #f197bd;
+  --c-sub-brand-light: #f7adcb;
+  --color-border: #ad295c8a;
+  --color-block: #2a7f8a;
+  --color-strong: #c13e74;
+  --color-code: #7ea1c5;
+  --color-border-left: #1d8ab9;
+  --color-code-bg: rgba(77,208,225,0.08);
+  --color-block-bg: rgba(77,208,225,0.15);
+  --linear-title: linear-gradient(to right, #32defd, rgb(247 69 152));
+  // vt 背景色
+  --vt-c-bg: var(--vt-c-white);
+  --vt-c-bg-soft: var(--vt-c-white-soft);
+  --vt-c-bg-mute: var(--vt-c-white-mute);
+  --vt-c-bg-rgb: var(--c-white-rgb);
+
+  --vt-shadow: 0 5px 6px -5px rgba(133,133,133,.6);
+  --vt-code-shadow: 5px 5px 1px rgba(255, 255, 255, 0.4);
+  --vt-code-shadow-h: 5px 5px 10px rgba(255, 255, 255, 0.4);
+  --vt-code-inline-color: #c13e74;
+  --vt-code-inline-bg: #c13e7408;
+}
+
+.dark {
+  --c-brand: #18baff;
+  --c-brand-light: #189bd3;
+  --color-border: #ff3a858a;
+  --color-block: #2a7f8a;
+  --color-strong: #e44a8a;
+  --color-code: #7ea1c5;
+  --color-border-left: #1d8ab9;
+  --color-code-bg: rgba(77,208,225,0.08);
+  --color-block-bg: rgba(77,208,225,0.15);
+  --linear-title: linear-gradient(to right, #32defd, rgb(247 69 152));
+  // vt 背景色
+  --vt-c-bg: var(--vt-c-black);
+  --vt-c-bg-soft: var(--vt-c-black-soft);
+  --vt-c-bg-mute: var(--vt-c-black-mute);
+  --vt-c-bg-rgb: var(--c-black-rgb);
+
+  --vt-shadow: 0 5px 6px -5px rgba(0, 0, 0, 0.6);
+  --vt-code-shadow: 5px 5px 1px rgba(0, 0, 0, 0.4);
+  --vt-code-shadow-h: 5px 5px 10px rgba(0, 0, 0, 0.4);
+  --vt-code-inline-color: #eee;
+  --vt-code-inline-bg: #c13e7450;
+}
+
+// breakpoints
+$breakpoint-xxl: 1440px !default;
+$breakpoint-xlg: 1280px !default;
+$breakpoint-lg: 960px !default;
+$breakpoint-md: 768px !default;
+$breakpoint-sm: 480px !default;
+
+/**
+ * Icons
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Layouts
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Component: Code
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+:root {
+  --vt-c-button-hover-bg: var(--vp-c-blue-dimm-4);
+  --vt-c-button-active-bg: var(--vp-c-blue-dimm-5);
+}
+
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Component: Nav
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Component: Sidebar
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */