@sugarat/theme 0.5.12-beta.0 → 0.5.12-beta.2

package/src/components/BlogBackToTop.vue

@@ -40,7 +40,7 @@ const iconSVGStr = computed(() => backToTopConfig?.value?.icon)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .back-to-top {
   position: fixed;
   width: v-bind(docWidth);
@@ -52,29 +52,26 @@ const iconSVGStr = computed(() => backToTopConfig?.value?.icon)
   display: flex;
   justify-content: right;
   z-index: 200;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  .icon-wrapper {
-    cursor: pointer;
-    border-radius: 50%;
-    position: relative;
-    right: -80px;
-    background-color: var(--vp-c-bg);
-    box-shadow: var(--box-shadow);
-    padding: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--vp-c-brand-soft);
-    color: var(--vp-c-brand-1);
-
-    &:hover {
-      box-shadow: var(--box-shadow-hover);
-    }
-  }
+}
+.back-to-top:hover {
+  opacity: 1;
+}
+.back-to-top .icon-wrapper {
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+  right: -80px;
+  background-color: var(--vp-c-bg);
+  box-shadow: var(--box-shadow);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+.back-to-top .icon-wrapper:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 @media screen and (max-width: 1200px) {

package/src/components/BlogButtonAfterArticle.vue

@@ -46,17 +46,17 @@ function toggleContent() {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
+@charset "UTF-8";
 .appreciation-container {
   text-align: center;
   padding: 20px;
   font-size: 14px;
   color: #606266;
-
-  :deep(.sugar-button.sugar-button--primary){
-    background-color: var(--vp-c-brand-2);
-    border-color: var(--vp-c-brand-2);
-  }
+}
+.appreciation-container :deep(.sugar-button.sugar-button--primary) {
+  background-color: var(--vp-c-brand-2);
+  border-color: var(--vp-c-brand-2);
 }
 
 .content-container {
@@ -65,9 +65,9 @@ function toggleContent() {
   justify-content: center;
   align-items: center;
   margin-top: 20px;
-  :deep(img){
-    height: 260px;
-  }
+}
+.content-container :deep(img) {
+  height: 260px;
 }
 
 .content-icon {
@@ -94,18 +94,15 @@ function toggleContent() {
   from {
     opacity: 0;
   }
-
   to {
     opacity: 1;
   }
 }
-
 /* 淡出 */
 @keyframes fadeOut {
   from {
     opacity: 1;
   }
-
   to {
     opacity: 0;
   }

package/src/components/BlogCommentWrapper.vue

@@ -52,7 +52,7 @@ const labelText = computed(() => {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .comment-btn-wrapper {
   position: fixed;
   width: v-bind(docWidth);
@@ -64,49 +64,42 @@ const labelText = computed(() => {
   display: flex;
   justify-content: right;
   z-index: 200;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  .icon-wrapper,
-  .icon-wrapper-text {
-    cursor: pointer;
-    border-radius: 50%;
-    position: relative;
-    right: -80px;
-    background-color: var(--vp-c-bg);
-    box-shadow: var(--box-shadow);
-    padding: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--vp-c-brand-soft);
-    color: var(--vp-c-brand-1);
-
-    &:hover {
-      box-shadow: var(--box-shadow-hover);
-    }
-  }
-
-  .icon-wrapper-text {
-    border-radius: 2px;
-    padding: 2px 6px;
-
-    span.text {
-      font-size: 12px;
-      margin-left: 4px;
-    }
-  }
+}
+.comment-btn-wrapper:hover {
+  opacity: 1;
+}
+.comment-btn-wrapper .icon-wrapper,
+.comment-btn-wrapper .icon-wrapper-text {
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+  right: -80px;
+  background-color: var(--vp-c-bg);
+  box-shadow: var(--box-shadow);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+.comment-btn-wrapper .icon-wrapper:hover,
+.comment-btn-wrapper .icon-wrapper-text:hover {
+  box-shadow: var(--box-shadow-hover);
+}
+.comment-btn-wrapper .icon-wrapper-text {
+  border-radius: 2px;
+  padding: 2px 6px;
+}
+.comment-btn-wrapper .icon-wrapper-text span.text {
+  font-size: 12px;
+  margin-left: 4px;
 }
 
 @media screen and (max-width: 1200px) {
-  .comment-btn-wrapper {
-
-    .icon-wrapper,
-    .icon-wrapper-text {
-      position: static;
-    }
+  .comment-btn-wrapper .icon-wrapper,
+  .comment-btn-wrapper .icon-wrapper-text {
+    position: static;
   }
 }
 </style>

package/src/components/BlogDocCover.vue

@@ -19,7 +19,7 @@ const hiddenCover = computed(
   <img v-if="cover && !hiddenCover" class="blog-doc-cover" :src="realCover">
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 img.blog-doc-cover.blog-doc-cover.blog-doc-cover {
   width: 100%;
   object-fit: cover;

package/src/components/BlogFooter.vue

@@ -115,20 +115,19 @@ const renderData = computed(() => {
   </footer>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 footer.blog-footer {
   text-align: center;
   position: relative;
   border-top: 1px solid var(--vp-c-gutter);
   padding: 20px 12px;
   background-color: var(--vp-c-bg);
-
-  p {
-    line-height: 24px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--vp-c-text-2);
-  }
+}
+footer.blog-footer p {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
 }
 
 .footer-item-list {
@@ -143,33 +142,28 @@ footer.blog-footer {
     align-items: center;
   }
 }
-
 .footer-item {
   display: flex;
   align-items: center;
   margin: 0 8px;
-
-  i {
-    margin-right: 4px;
-    font-style: normal;
-  }
-
-  i :deep(svg) {
-    fill: var(--vp-c-text-2);
-    width: 16px;
-    height: 16px;
-  }
-
-  i :deep(img) {
-    width: 16px;
-    height: 16px;
-  }
-
-  a:hover {
-    color: var(--vp-c-brand-1);
-    text-decoration: underline;
-    text-decoration-color: var(--vp-c-brand-1);
-    text-decoration-style: dashed;
-  }
+}
+.footer-item i {
+  margin-right: 4px;
+  font-style: normal;
+}
+.footer-item i :deep(svg) {
+  fill: var(--vp-c-text-2);
+  width: 16px;
+  height: 16px;
+}
+.footer-item i :deep(img) {
+  width: 16px;
+  height: 16px;
+}
+.footer-item a:hover {
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+  text-decoration-color: var(--vp-c-brand-1);
+  text-decoration-style: dashed;
 }
 </style>

package/src/components/BlogFriendLink.vue

@@ -151,7 +151,7 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .card {
   position: relative;
   margin: 0 auto 10px;
@@ -164,10 +164,9 @@ onUnmounted(() => {
   transition: all 0.3s;
   background-color: rgba(var(--bg-gradient));
   display: flex;
-
-  &:hover {
-    box-shadow: var(--box-shadow-hover);
-  }
+}
+.card:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 .card-header {
@@ -175,12 +174,11 @@ onUnmounted(() => {
   width: 100%;
   justify-content: space-between;
   align-items: center;
-
-  .title {
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-  }
+}
+.card-header .title {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
 }
 
 .friend-wrapper {
@@ -199,43 +197,36 @@ onUnmounted(() => {
   margin: 0;
   padding: 10px 10px 0 0px;
   width: 100%;
-
   position: relative;
   width: 100%;
-
-  li {
-    box-sizing: border-box;
-    padding: 0 5px;
-    height: 76px;
-    cursor: pointer;
-
-    a {
-      display: flex;
-      align-items: center;
-    }
-
-    div {
-      padding-left: 10px;
-    }
-
-    .info-wrapper {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .nickname {
-      font-size: 16px;
-      font-weight: 450;
-    }
-
-    .des {
-      color: var(--vp-c-text-2);
-      font-size: 14px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
+}
+.friend-list li {
+  box-sizing: border-box;
+  padding: 0 5px;
+  height: 76px;
+  cursor: pointer;
+}
+.friend-list li a {
+  display: flex;
+  align-items: center;
+}
+.friend-list li div {
+  padding-left: 10px;
+}
+.friend-list li .info-wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.friend-list li .nickname {
+  font-size: 16px;
+  font-weight: 450;
+}
+.friend-list li .des {
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 </style>

package/src/components/BlogHomeBanner.vue

@@ -85,28 +85,26 @@ async function changeSlogan() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 h1 {
   text-align: center;
-  .name {
-    transition: all 0.25s ease-in-out 0.04s;
-    transform: translateY(0px);
-    opacity: 1;
-    font-weight: bold;
-    margin: 0 auto;
-    font-size: 36px;
-  }
-
-  .motto {
-    position: relative;
-    bottom: 0px;
-    font-size: 14px;
-    margin-left: 10px;
-
-    &::before {
-      content: '- ';
-    }
-  }
+}
+h1 .name {
+  transition: all 0.25s ease-in-out 0.04s;
+  transform: translateY(0px);
+  opacity: 1;
+  font-weight: bold;
+  margin: 0 auto;
+  font-size: 36px;
+}
+h1 .motto {
+  position: relative;
+  bottom: 0px;
+  font-size: 14px;
+  margin-left: 10px;
+}
+h1 .motto::before {
+  content: "- ";
 }
 
 @media screen and (max-width: 500px) {
@@ -114,28 +112,24 @@ h1 {
     display: none;
   }
 }
-
 @keyframes fade-in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 .inspiring-wrapper {
   margin: 16px 0;
   height: 32px;
   width: auto;
-
-  h2 {
-    animation: fade-in 0.5s ease-in-out;
-    cursor: pointer;
-    text-align: center;
-    font-size: 20px;
-    line-height: 1.6;
-  }
+}
+.inspiring-wrapper h2 {
+  animation: fade-in 0.5s ease-in-out;
+  cursor: pointer;
+  text-align: center;
+  font-size: 20px;
+  line-height: 1.6;
 }
 </style>

package/src/components/BlogHomeHeaderAvatar.vue

@@ -25,33 +25,26 @@ useHoverSpin(imgRef, home?.value?.hoverSpin)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .blog-home-header-avatar {
-    padding-top: 40px;
-    display: flex;
-    align-items: center;
-
-    img {
-        display: block;
-        margin: 0 auto;
-        width: 130px;
-        height: 130px;
-        border-radius: 50%;
-        background-color: transparent;
-        border: 5px solid rgba(var(--bg-gradient-home));
-        box-sizing: border-box;
-        cursor: pointer;
-    }
-
-    // img:hover {
-    //     transform: rotate(666turn);
-    //     transition-duration: 59s;
-    //     transition-timing-function: cubic-bezier(.34, 0, .84, 1)
-    // }
+  padding-top: 40px;
+  display: flex;
+  align-items: center;
+}
+.blog-home-header-avatar img {
+  display: block;
+  margin: 0 auto;
+  width: 130px;
+  height: 130px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: 5px solid rgba(var(--bg-gradient-home));
+  box-sizing: border-box;
+  cursor: pointer;
 }
 
 @media screen and (min-width: 768px) {
-  .blog-home-header-avatar{
+  .blog-home-header-avatar {
     display: none;
   }
 }

package/src/components/BlogHomeInfo.vue

@@ -21,7 +21,7 @@ import BlogFriendLink from './BlogFriendLink.vue'
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .blog-info {
   display: flex;
   flex-direction: column;

package/src/components/BlogHomeOverview.vue

@@ -60,7 +60,7 @@ const titles = computed(() => (frontmatter.value?.blog?.analysis?.articles?.titl
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .card {
   position: relative;
   margin: 0 auto 10px;
@@ -74,10 +74,9 @@ const titles = computed(() => (frontmatter.value?.blog?.analysis?.articles?.titl
   background-color: rgba(var(--bg-gradient));
   display: flex;
   flex-direction: column;
-
-  &:hover {
-    box-shadow: var(--box-shadow-hover);
-  }
+}
+.card:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 .overview-data {
@@ -101,15 +100,13 @@ const titles = computed(() => (frontmatter.value?.blog?.analysis?.articles?.titl
   align-items: center;
   position: relative;
   margin: 0 10px;
-
-  .count {
-    font-size: 18px;
-  }
-
-  .label {
-    margin-top: 6px;
-    font-size: 12px;
-    color: var(--description-font-color);
-  }
+}
+.overview-item .count {
+  font-size: 18px;
+}
+.overview-item .label {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--description-font-color);
 }
 </style>

package/src/components/BlogHomeTags.vue

@@ -103,7 +103,7 @@ watch(
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .card {
   position: relative;
   margin: 0 auto 10px;
@@ -116,10 +116,9 @@ watch(
   transition: all 0.3s;
   background-color: rgba(var(--bg-gradient));
   display: flex;
-
-  &:hover {
-    box-shadow: var(--box-shadow-hover);
-  }
+}
+.card:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 .card-header {
@@ -127,12 +126,11 @@ watch(
   width: 100%;
   justify-content: space-between;
   align-items: center;
-
-  .title {
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-  }
+}
+.card-header .title {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
 }
 
 .tags {
@@ -143,11 +141,10 @@ watch(
   display: flex;
   flex-wrap: wrap;
   margin-top: 10px;
-
-  li {
-    margin-right: 10px;
-    margin-bottom: 10px;
-    cursor: pointer;
-  }
+}
+.tag-list li {
+  margin-right: 10px;
+  margin-bottom: 10px;
+  cursor: pointer;
 }
 </style>