🔧 调整属性排序&格式化

Author: BTMuli

.stylelintrc.yml

@@ -25,10 +25,10 @@ rules:
     - true
     - severity: warning
   order/order:
+    - at-rules
     - custom-properties
     - declarations
     - rules
-    - at-rules
   prettier/prettier: true
   property-no-vendor-prefix:
     - true

src/components/app/t-gameNav.vue

@@ -139,15 +139,15 @@ async function toBBS(link: URL): Promise<void> {
 }
 
 .tgn-nav {
+  @include github-styles.github-card;
+
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 4px;
   border-radius: 4px;
   color: var(--tgc-white-1);
   cursor: pointer;
-
-  @include github-styles.github-card;
 }
 
 .dark .tgn-nav {

src/components/app/t-postcard.vue

@@ -285,6 +285,8 @@ function onUserClick(): void {
 @use "@styles/github.styles.scss" as github-styles;
 
 .tpc-card {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   overflow: hidden;
@@ -299,8 +301,6 @@ function onUserClick(): void {
   &.select-mode {
     cursor: pointer;
   }
-
-  @include github-styles.github-card;
 }
 
 .dark .tpc-card {
@@ -376,6 +376,8 @@ function onUserClick(): void {
 }
 
 .tpc-tag {
+  @include github-styles.github-tag-dark-gen(#e06c63);
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -387,19 +389,17 @@ function onUserClick(): void {
   &:hover {
     @include github-styles.github-tag-dark-gen(#00aeec);
   }
-
-  @include github-styles.github-tag-dark-gen(#e06c63);
 }
 
 .tpc-reason {
+  @include github-styles.github-tag-dark-gen(#d19a66);
+
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   border-radius: 4px;
   gap: 4px;
-
-  @include github-styles.github-tag-dark-gen(#d19a66);
 }
 
 .tpc-forum {

src/components/app/top-nameCard.vue

@@ -39,6 +39,8 @@ const bgImage = computed<string>(() => {
 @use "@styles/github.styles.scss" as github-styles;
 
 .top-nc-box {
+  @include github-styles.github-card-shadow;
+
   width: 100%;
   height: 80px;
   border: 1px solid var(--common-shadow-1);
@@ -59,8 +61,6 @@ const bgImage = computed<string>(() => {
   &.grey:hover {
     filter: grayscale(0);
   }
-
-  @include github-styles.github-card-shadow;
 }
 
 .dark .top-nc-box {

src/components/func/loading.vue

@@ -73,6 +73,33 @@ async function displayBox(params: LoadingParams): Promise<void> {
 defineExpose({ displayBox });
 </script>
 <style lang="css" scoped>
+@keyframes ball-clip-rotate-pulse-rotate {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes ball-clip-rotate-pulse-scale {
+  0%,
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  30% {
+    opacity: 0.3;
+    transform: translate(-50%, -50%) scale(0.15);
+  }
+}
+
 .func-loading-outer-enter-active,
 .func-loading-outer-leave-active,
 .func-loading-inner-enter-active {
@@ -229,31 +256,4 @@ defineExpose({ displayBox });
   height: 16px;
   animation: ball-clip-rotate-pulse-scale 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
 }
-
-@keyframes ball-clip-rotate-pulse-rotate {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-
-  50% {
-    transform: translate(-50%, -50%) rotate(180deg);
-  }
-
-  100% {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-
-@keyframes ball-clip-rotate-pulse-scale {
-  0%,
-  100% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-
-  30% {
-    opacity: 0.3;
-    transform: translate(-50%, -50%) scale(0.15);
-  }
-}
 </style>

src/components/pageAnno/ta-card.vue

@@ -133,13 +133,13 @@ function getAnnoTime(content: string): string | false {
 @use "@styles/github.styles.scss" as github-styles;
 
 .anno-card {
+  @include github-styles.github-card;
+
   position: relative;
   overflow: hidden;
   width: 100%;
   box-sizing: border-box;
   border-radius: 6px;
-
-  @include github-styles.github-card;
 }
 
 .dark .anno-card {

src/components/pageHome/ph-comp-card.vue

@@ -18,14 +18,14 @@ defineProps<{ append?: boolean }>();
 @use "@styles/github.styles.scss" as github-styles;
 
 .thc-container {
+  @include github-styles.github-card;
+
   position: relative;
   min-height: 100px;
   box-sizing: border-box;
   padding: 24px 8px 8px;
   border-radius: 4px;
   margin-top: 24px;
-
-  @include github-styles.github-card;
 }
 
 .dark .thc-container {

src/components/userAchi/tua-achi.vue

@@ -96,6 +96,8 @@ async function setAchiStat(stat: boolean): Promise<void> {
 @use "@styles/github.styles.scss" as github-styles;
 
 .achi-container {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   height: 60px;
@@ -105,15 +107,15 @@ async function setAchiStat(stat: boolean): Promise<void> {
   padding: 8px;
   border-radius: 4px;
   cursor: pointer;
-
-  @include github-styles.github-card;
 }
 
 .dark .achi-container {
   @include github-styles.github-card("dark");
 }
 
 .achi-version {
+  @include github-styles.github-tag-dark-gen(#fb7299);
+
   position: absolute;
   top: 0;
   left: 0;
@@ -125,8 +127,6 @@ async function setAchiStat(stat: boolean): Promise<void> {
   font-family: var(--font-title);
   font-size: 10px;
   text-align: center;
-
-  @include github-styles.github-tag-dark-gen(#fb7299);
 }
 
 .achi-pre {
@@ -172,15 +172,15 @@ async function setAchiStat(stat: boolean): Promise<void> {
   }
 
   &__progress {
+    @include github-styles.github-tag-dark-gen(#00aeec);
+
     display: flex;
     height: 21px;
     align-items: center;
     justify-content: center;
     padding: 0 4px;
     border-radius: 4px;
     font-size: 12px;
-
-    @include github-styles.github-tag-dark-gen(#00aeec);
   }
 }
 

src/components/userAchi/tua-series.vue

@@ -99,6 +99,8 @@ function selectSeries(): void {
 @use "@styles/github.styles.scss" as github-styles;
 
 .tuas-card {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   overflow: hidden;
@@ -127,19 +129,19 @@ function selectSeries(): void {
       }
     }
   }
-
-  @include github-styles.github-card;
 }
 
 .dark .tuas-card {
+  @include github-styles.github-card("dark");
+
   &.tuas-selected {
     background: var(--box-bg-1);
   }
-
-  @include github-styles.github-card("dark");
 }
 
 .tuas-version {
+  @include github-styles.github-tag-dark-gen(#ffa726);
+
   position: absolute;
   z-index: 3;
   right: 0;
@@ -151,8 +153,6 @@ function selectSeries(): void {
   font-family: var(--font-title);
   font-size: 10px;
   text-align: center;
-
-  @include github-styles.github-tag-dark-gen(#ffa726);
 }
 
 .tuas-reward {

src/components/userAvatar/tua-avatar-box.vue

@@ -138,15 +138,15 @@ function getWeaponTitle(): string {
 @use "@styles/github.styles.scss" as github-styles;
 
 .tua-ab-box {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   flex-direction: column;
   padding: 4px;
   border-radius: 4px;
   cursor: pointer;
   row-gap: 4px;
-
-  @include github-styles.github-card;
 }
 
 .dark .tua-ab-box {

src/components/userGacha/ug-his-card.vue

@@ -141,6 +141,8 @@ function getBox(id: number): TItemBoxData {
 }
 
 .ug-his-banner {
+  @include github-styles.github-card-shadow;
+
   width: 50vw;
   border-radius: 4px;
   cursor: pointer;
@@ -150,8 +152,6 @@ function getBox(id: number): TItemBoxData {
     scale: 0.95;
     transition: 0.5s ease-in-out;
   }
-
-  @include github-styles.github-card-shadow;
 }
 
 .ug-his-info {
@@ -176,15 +176,15 @@ function getBox(id: number): TItemBoxData {
 }
 
 .ug-his-tag {
+  @include github-styles.github-tag-dark-gen(#e06c63);
+
   display: flex;
   height: fit-content;
   align-items: center;
   justify-content: center;
   padding: 0 8px;
   border-radius: 4px;
   font-size: 16px;
-
-  @include github-styles.github-tag-dark-gen(#e06c63);
 }
 
 .ug-his-sub {

src/components/userRecord/tur-role-info.vue

@@ -20,6 +20,8 @@ defineProps<TurRoleInfoProps>();
 @use "@styles/github.styles.scss" as github-styles;
 
 .tur-ri-box {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   height: 48px;
@@ -29,8 +31,6 @@ defineProps<TurRoleInfoProps>();
   padding: 4px 12px 4px 4px;
   border-radius: 24px;
   column-gap: 4px;
-
-  @include github-styles.github-card;
 }
 
 .dark .tur-ri-box {

src/pages/User/Characters.vue

@@ -487,10 +487,10 @@ function handleSwitch(next: boolean): void {
 }
 
 .uc-box-uid {
+  @include github-styles.github-tag-dark-gen(#ffcd0c);
+
   padding: 2px 4px;
   border-radius: 4px;
-
-  @include github-styles.github-tag-dark-gen(#ffcd0c);
 }
 
 .uc-ov-item {

src/pages/User/Record.vue

@@ -243,6 +243,8 @@ async function deleteRecord(): Promise<void> {
 }
 
 .ur-box {
+  @include github-styles.github-card-shadow;
+
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -252,8 +254,6 @@ async function deleteRecord(): Promise<void> {
   border-radius: 4px;
   background: var(--app-page-bg);
   row-gap: 4px;
-
-  @include github-styles.github-card-shadow;
 }
 
 .dark .ur-box {