refactor(vote): ♻️ extract base style

packages/vote/src/common/components/Mask.vue

@@ -2,7 +2,7 @@
   <Transition name="mask">
     <div
       v-if="open"
-      class="fixed inset-0 backdrop-filter backdrop-blur-sm"
+      class="fixed inset-0 bg-subaccent bg-opacity-30 backdrop-filter backdrop-blur-sm"
       :style="'z-index:' + props.zIndex"
       @click="closeMask()"
       @touchmove.stop.prevent

packages/vote/src/common/components/NavVote.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-2 shadow flex items-center bg-subaccent bg-opacity-90 mb-2">
+  <div class="baseBlock p-2 shadow flex items-center mb-2">
     <BackToHome :show="true" :saveable="false" />
     <div class="font-medium">{{ '第11届 中文东方人气投票 - ' + typeChinese }}</div>
   </div>

packages/vote/src/common/components/VoteMessageBox.vue

@@ -2,7 +2,7 @@
   <transition name="messageBox">
     <div
       v-if="open"
-      class="fixed max-h-2/3 top-1/2 mx-auto left-0 right-0 -mt-70 p-2 w-19/20 max-w-70ch rounded bg-subaccent bg-opacity-90 shadow z-51 flex flex-col"
+      class="baseBlock fixed max-h-2/3 top-1/2 mx-auto left-0 right-0 -mt-70 p-2 w-19/20 max-w-70ch rounded shadow z-51 flex flex-col"
     >
       <div class="flex justify-between items-center">
         <div class="text-lg truncate">{{ props.title }}</div>

packages/vote/src/common/components/VoteSelect.vue

@@ -15,7 +15,7 @@
     </div>
     <div
       v-if="itemList.length"
-      class="absolute z-52 rounded bg-subaccent shadow mt-1 w-full overflow-hidden"
+      class="baseBlock absolute z-52 rounded shadow mt-1 w-full overflow-hidden"
       :class="{ 'p-1': !listHidden }"
     >
       <ul
@@ -25,7 +25,7 @@
         <li
           v-for="(item, index) in itemList"
           :key="index"
-          class="truncate cursor-pointer transition transition-colors hover:bg-subaccent"
+          class="truncate cursor-pointer transition transition-colors hover:bg-accent-color-600"
           @click="selectItem(item)"
         >
           {{ item.name }}

packages/vote/src/home/Home.vue

@@ -34,7 +34,7 @@
           </div>
         </div>
 
-        <div v-if="screenSizes['md']" class="text-xl rounded-xl p-8 shadow-around bg-subaccent bg-opacity-90">
+        <div v-if="screenSizes['md']" class="baseBlock text-xl rounded-xl p-8 shadow-around">
           这是一个为了调查东方Project系列在中文圈的大致情况而举办的一次调查活动。在活动期间，我们同往届一样，接受来自中文圈内的东方爱好者们的投票，并在投票结束后择日公布本次投票的结果。敬请期待。
         </div>
       </div>
@@ -47,7 +47,7 @@
       </div>
 
       <!-- Other Messages -->
-      <div class="w-full pt-6vh md:p-10 md:shadow-around md:rounded-xl md:bg-subaccent md:bg-opacity-90 md:mt-10">
+      <div class="baseBlockMd w-full pt-6vh md:p-10 md:shadow-around md:rounded-xl md:mt-10">
         <article class="prose-lg lg:prose-xl">
           <h2>投票详情</h2>
           <p>投票的举办地点与结果的发布地点均为本站。</p>

packages/vote/src/home/UserHome.vue

@@ -3,7 +3,7 @@
   <!-- Mobile View -->
   <div v-if="screenSizes['<lg']" class="min-h-100vh flex flex-col text-sm">
     <!-- Top Nav -->
-    <div class="w-full py-1 pr-3 bg-subaccent bg-opacity-90 shadow flex items-center justify-between">
+    <div class="baseBlock w-full py-1 pr-3 shadow flex items-center justify-between">
       <div v-if="!systemListIsOpen" class="pl-3 text-lg">第11届 中文东方人气投票</div>
       <div v-else class="flex items-center space-x-2">
         <icon-uil-angle-left-b class="w-8 h-8 cursor-pointer" @click="systemListClose()" />
@@ -27,7 +27,7 @@
       <Transition name="userList">
         <div
           v-if="userListOpen"
-          class="absolute min-w-30 text-center top-6 z-51 right-0.5 rounded bg-subaccent bg-opacity-90 p-2 shadow"
+          class="baseBlock absolute min-w-30 text-center top-6 z-51 right-0.5 rounded p-2 shadow"
         >
           <img
             class="absolute -top-5 right-2 h-11 w-11 rounded-full ring-2 ring-accent-color-200 cursor-pointer"
@@ -60,7 +60,7 @@
         :class="{ '-translate-x-1/2': systemListIsOpen }"
       >
         <div class="w-1/2 p-3 space-y-2">
-          <div class="flex w-full p-0.5 shadow rounded bg-subaccent bg-opacity-90">
+          <div class="baseBlock flex w-full p-0.5 shadow rounded">
             <div class="w-1/3 p-0.5 overflow-hidden rounded">
               <div class="w-full aspect-1/1">
                 <img
@@ -92,7 +92,7 @@
             </div>
           </div>
 
-          <div class="flex w-full p-0.5 shadow rounded bg-subaccent bg-opacity-90">
+          <div class="baseBlock flex w-full p-0.5 shadow rounded">
             <div class="w-1/3 p-0.5 overflow-hidden rounded">
               <div class="w-full aspect-1/1">
                 <img src="https://s3c.lilywhite.cc/thvote/imgs/nav/couple@100px.png" class="object-cover rounded" />
@@ -128,7 +128,7 @@
             </div>
           </div>
 
-          <div class="flex w-full p-0.5 shadow rounded bg-subaccent bg-opacity-90">
+          <div class="baseBlock flex w-full p-0.5 shadow rounded">
             <div class="w-1/3 p-0.5 overflow-hidden rounded">
               <div class="w-full aspect-1/1">
                 <img src="https://s3c.lilywhite.cc/thvote/imgs/nav/doujin@100px.png" class="object-contain rounded" />
@@ -158,7 +158,7 @@
             </div>
           </div>
 
-          <!-- <div class="flex w-full p-0.5 shadow rounded bg-subaccent bg-opacity-90">
+          <!-- <div class="baseBlock flex w-full p-0.5 shadow rounded">
             <div class="w-1/3 p-0.5 overflow-hidden rounded">
               <div class="w-full aspect-1/1">
                 <img src="@/home/assets/DefaultAvatar.jpg" class="object-cover rounded" />
@@ -236,7 +236,7 @@
         :class="dpCollapseNav ? 'ml-[calc(4ch-2px)]' : 'ml-[min(calc(30vh-4rem-2px),calc(256px+1rem-2px))]'"
       ></div>
       <div
-        class="flex-1 flex flex-col gap-4 pt-2 px-4 pb-px rounded-xl border-2 border-accent-color-400 bg-subaccent bg-opacity-100 pointer-events-auto"
+        class="flex-1 flex flex-col gap-4 pt-2 px-4 pb-px rounded-xl border-2 border-accent-color-400 bg-subaccent pointer-events-auto"
       >
         <!-- Top Nav -->
         <div class="flex justify-between">
@@ -261,7 +261,7 @@
             <Transition name="userList">
               <div
                 v-if="userListOpen"
-                class="absolute min-w-30 text-center top-6 z-51 right-1 rounded bg-subaccent p-2 shadow"
+                class="baseBlock absolute min-w-30 text-center top-6 z-51 right-1 rounded p-2 shadow"
               >
                 <img
                   class="absolute -top-5 right-2 h-11 w-11 rounded-full ring-2 ring-accent-color-200 cursor-pointer"
@@ -299,13 +299,13 @@
 
     <!-- <div
         class="
+          baseBlock
           flex flex-wrap
           space-y-2
           w-3/10
           p-2
           shadow-around
           rounded
-          bg-subaccent bg-opacity-90
         "
       >
         <div class="w-full overflow-hidden rounded">

packages/vote/src/home/UserSettings.vue

@@ -2,20 +2,15 @@
   <div class="page"></div>
   <div class="w-full min-h-100vh flex flex-col space-y-2 md:space-y-0 md:z-50">
     <!-- Top Nav -->
-    <div
-      class="w-full h-11 py-1 bg-subaccent bg-opacity-90 shadow flex items-center space-x-2"
-      :class="{ 'pl-2': voteEnded() }"
-    >
+    <div class="baseBlock w-full h-11 py-1 shadow flex items-center space-x-2" :class="{ 'pl-2': voteEnded() }">
       <router-link v-if="!voteEnded()" to="/" class="w-8 h-8 cursor-pointer"
         ><icon-uil-angle-left-b class="w-full h-full"></icon-uil-angle-left-b
       ></router-link>
       <div class="text-xl">用户设定</div>
     </div>
     <!-- Main Content -->
     <div class="md:p-3 md:w-1/3 md:min-w-95 md:m-auto md:flex md:flex-grow">
-      <div
-        class="md:w-full md:rounded-xl md:p-3 md:bg-subaccent md:bg-opacity-90 md:shadow md:flex md:flex-grow md:items-center"
-      >
+      <div class="baseBlockMd md:w-full md:rounded-xl md:p-3 md:shadow md:flex md:flex-grow md:items-center">
         <div class="w-full md:ring-accent-color-600 p-3 divide-y divide-accent-color-300">
           <div class="flex items-center space-x-3">
             <img

packages/vote/src/home/components/LoginBox.vue

@@ -2,7 +2,7 @@
   <transition name="loginBox">
     <div
       v-if="open"
-      class="fixed max-h-full top-1/2 mx-auto left-0 right-0 -mt-40 p-4 border border-accent-color-600 w-19/20 md:w-100 rounded-xl bg-subaccent z-51"
+      class="baseBlock fixed max-h-full top-1/2 mx-auto left-0 right-0 -mt-40 p-4 border border-accent-color-600 w-19/20 md:w-100 rounded-xl z-51"
     >
       <div class="w-full overflow-hidden">
         <div

packages/vote/src/home/components/UserQuestionnaire.vue

@@ -7,11 +7,7 @@
           <h2 class="text-base font-bold whitespace-nowrap">{{ questionnaireNameById[catogory].name }}</h2>
           <span class="text-sm truncate">{{ questionnaireNameById[catogory].desc }}</span>
         </div>
-        <div
-          v-for="(_child, childId) in children"
-          :key="childId"
-          class="flex w-full p-0.5 shadow rounded bg-subaccent bg-opacity-90 mt-2"
-        >
+        <div v-for="(_child, childId) in children" :key="childId" class="baseBlock w-full p-0.5 shadow rounded mt-2">
           <div class="w-1/3 p-0.5 overflow-hidden rounded">
             <div class="w-full aspect-1/1">
               <img :src="questionnaireNameById[catogory].children[childId].image" class="object-cover rounded" />

packages/vote/src/home/components/UserVote.vue

@@ -2,7 +2,7 @@
   <div class="min-h-[calc(100vh-44px)] md:min-h-0">
     <!-- Main Content -->
     <div class="w-full p-3 space-y-2">
-      <div class="flex w-full p-0.5 shadow rounded bg-subaccent bg-opacity-80">
+      <div class="baseBlock flex w-full p-0.5 shadow rounded">
         <div class="w-1/3 p-0.5 overflow-hidden rounded">
           <div class="w-full aspect-1/1">
             <img src="https://s3c.lilywhite.cc/thvote/imgs/nav/character@100px.png" class="object-cover rounded" />
@@ -33,7 +33,7 @@
         </div>
       </div>
 
-      <div class="flex w-full p-0.5 shadow rounded bg-subaccent bg-opacity-80">
+      <div class="baseBlock flex w-full p-0.5 shadow rounded">
         <div class="w-1/3 p-0.5 overflow-hidden rounded">
           <div class="w-full aspect-1/1">
             <img src="https://s3c.lilywhite.cc/thvote/imgs/nav/music@100px.png" class="object-cover rounded" />
@@ -63,7 +63,7 @@
           </div>
         </div>
       </div>
-      <div class="flex w-full p-0.5 shadow rounded bg-subaccent bg-opacity-80">
+      <div class="baseBlock flex w-full p-0.5 shadow rounded">
         <div class="w-1/3 p-0.5 overflow-hidden rounded">
           <div class="w-full aspect-1/1">
             <img src="https://s3c.lilywhite.cc/thvote/imgs/nav/couple@100px.png" class="object-cover rounded" />

packages/vote/src/questionnaire/Questionnaire.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page"></div>
   <div class="w-full min-h-100vh flex flex-col overflow-hidden">
-    <div class="p-2 flex items-center justify-between bg-subaccent bg-opacity-90">
+    <div class="baseBlock p-2 flex items-center justify-between">
       <div class="flex items-center">
         <BackToHome :show="true" :saveable="true" />
         <div class="font-medium">
@@ -29,7 +29,7 @@
     </div>
 
     <div class="w-full flex flex-col space-y-3 p-1 md:w-1/2 3xl:w-1/4 md:m-auto">
-      <div class="p-1 rounded w-full bg-subaccent bg-opacity-90">
+      <div class="baseBlock p-1 rounded w-full">
         <div class="space-y-5 p-2">
           <div>{{ questionNum + 1 + '：' + question.content + '（' + TypeToChinese[question.type] + '）' }}</div>
           <div v-if="question.type != 'Input'" class="innerBox rounded space-y-1">

packages/vote/src/questionnaire/components/QuestionnaireChange.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="fixed top-0 inset-x-0 max-h-100vh z-51 p-3 md:p-10 rounded-b bg-subaccent bg-opacity-90 overflow-auto transform-gpu transition-transform duration-200 ease-in-out flex flex-col"
+    class="baseBlock fixed top-0 inset-x-0 max-h-100vh z-51 p-3 md:p-10 rounded-b overflow-auto transform-gpu transition-transform duration-200 ease-in-out flex flex-col"
     :class="{ '-translate-y-full': !open }"
   >
     <div
       v-for="(questionnaire, index) in questionnaireKeyToName"
       :key="index"
-      class="w-full rounded border border-accent-color-600 bg-subaccent bg-opacity-90 mb-2"
+      class="baseBlock w-full rounded border border-accent-color-600 mb-2"
     >
       <div
         class="px-2 py-1 truncate cursor-pointer"

packages/vote/src/tailwindcss/global.postcss

@@ -21,6 +21,16 @@ textarea {
   @apply bg-accent-color-100 bg-opacity-10 shadow-inner;
 }
 
+.baseBlock {
+  @apply bg-subaccent bg-opacity-80;
+  /* backdrop-filter: blur(1px);
+  -webkit-backdrop-filter: blur(1px); */
+}
+
+.baseBlockMd {
+  @apply md:bg-subaccent md:bg-opacity-80;
+}
+
 * {
   @apply text-textaccent;
 }
@@ -127,4 +137,5 @@ textarea {
 .page {
   @apply fixed inset-0 -z-1 bg-no-repeat bg-cover bg-center;
   background-image: url('@/common/assets/backgroundImg.jpg');
+  /* filter: blur(10px); */
 }

packages/vote/src/vote-character/VoteCharacter.vue

@@ -5,7 +5,7 @@
 
     <div class="md:flex-grow flex flex-wrap md:content-center p-1 space-y-2 md:w-1/2 3xl:w-1/4 md:m-auto">
       <transition name="characterHonmei" mode="out-in">
-        <div v-if="charactersVoted.length" class="p-1 rounded w-full shadow bg-subaccent bg-opacity-80">
+        <div v-if="charactersVoted.length" class="baseBlock p-1 rounded w-full shadow">
           <div class="p-1 flex justify-between md:text-base xl:text-xl 2xl:text-2xl">
             <div>本命角色</div>
             <icon-uil-arrows-h
@@ -42,7 +42,7 @@
         </div>
       </transition>
 
-      <div class="p-1 rounded w-full shadow bg-subaccent bg-opacity-80">
+      <div class="baseBlock p-1 rounded w-full shadow">
         <div class="p-1 flex justify-between md:text-base xl:text-xl 2xl:text-2xl®">
           <div>
             {{

packages/vote/src/vote-character/components/AdvancedFilter.vue

@@ -2,7 +2,7 @@
   <transition name="advancedFilter">
     <div
       v-if="open"
-      class="fixed top-1/8 left-0 right-0 h-3/5 flex flex-col p-3 z-53 space-y-2 bg-subaccent bg-opacity-90 shadow rounded w-4/5 mx-auto md:w-1/3 text-sm md:text-base xl:text-xl 2xl:text-2xl"
+      class="baseBlock fixed top-1/8 left-0 right-0 h-3/5 flex flex-col p-3 z-53 space-y-2 shadow rounded w-4/5 mx-auto md:w-1/3 text-sm md:text-base xl:text-xl 2xl:text-2xl"
     >
       <div class="flex justify-between border-b">
         <div>高级筛选</div>

packages/vote/src/vote-character/components/CharacterCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative p-1 pt-5 opacity-80 rounded shadow bg-subaccent bg-opacity-90">
+  <div class="baseBlock relative p-1 pt-5 opacity-80 rounded shadow">
     <icon-uil-times class="absolute right-0 top-0 cursor-pointer" @click="closeCharacterCard()"></icon-uil-times>
     <div class="w-full">
       <div class="aspect-ratio-1/1 rounded border border-accent-color-600">

packages/vote/src/vote-character/components/CharacterHonmeiCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative w-full p-1 rounded shadow bg-subaccent bg-opacity-90 flex">
+  <div class="baseBlock relative w-full p-1 rounded shadow flex">
     <div class="w-2/5 max-w-64">
       <div class="aspect-ratio-1/1 rounded border border-accent-color-600">
         <img class="object-contain" :src="characterHonmei.image ? characterHonmei.image : characterImages" />

packages/vote/src/vote-character/components/CharacterSelect.vue

@@ -2,7 +2,7 @@
   <transition name="selectBox">
     <div
       v-if="open"
-      class="fixed top-1/10 left-0 right-0 h-4/5 flex flex-col p-3 z-51 space-y-2 bg-subaccent rounded w-[calc(100%-1rem)] mx-auto md:w-1/2 3xl:w-1/4 text-sm md:text-base xl:text-xl 2xl:text-2xl"
+      class="baseBlock fixed top-1/10 left-0 right-0 h-4/5 flex flex-col p-3 z-51 space-y-2 rounded w-[calc(100%-1rem)] mx-auto md:w-1/2 3xl:w-1/4 text-sm md:text-base xl:text-xl 2xl:text-2xl"
     >
       <div class="flex justify-between border-b">
         <div>请选择角色</div>
@@ -21,7 +21,7 @@
         <small>可通过名称、外号、所属作品来搜索，支持部分匹配和拼音匹配</small>
       </div>
 
-      <div class="innerBox flex-grow overflow-y-auto p-2 rounded flex flex-col space-y-3">
+      <div class="innerBox flex-grow overflow-y-auto p-2 pr-0 rounded flex flex-col space-y-3">
         <!-- eslint-disable vue/no-v-html -->
         <div
           v-if="!characterList.length"
@@ -33,14 +33,9 @@
           "
         ></div>
         <!-- eslint-enable vue/no-v-html -->
-        <div
-          v-for="item in characterList"
-          v-else
-          :key="item.id"
-          class="flex flex-row p-1 rounded shadow bg-subaccent bg-opacity-90 ring ring-subaccent"
-        >
+        <div v-for="item in characterList" v-else :key="item.id" class="baseBlock flex flex-row p-1 rounded shadow">
           <div class="flex-shrink-0 w-1/3 max-w-32">
-            <div class="aspect-ratio-1/1 rounded bg-subaccent border border-accent-color-600">
+            <div class="baseBlock aspect-ratio-1/1 rounded border border-accent-color-600">
               <img class="object-contain" loading="lazy" :src="item.image ? item.image : characterImages" />
             </div>
           </div>

packages/vote/src/vote-couple/VoteCouple.vue

@@ -4,7 +4,7 @@
     <NavVote VoteType="couple" />
 
     <div class="md:flex-grow flex flex-wrap md:content-center p-1 space-y-2 md:w-1/2 3xl:w-1/4 md:m-auto">
-      <div class="p-1 rounded w-full space-y-2 shadow bg-subaccent bg-opacity-90">
+      <div class="baseBlock p-1 rounded w-full space-y-2 shadow">
         <div class="p-1 flex justify-between md:text-base xl:text-xl 2xl:text-2xl">
           <div>{{ '角色组合(' + couplesValid.length + '/' + CPVOTENUM + ')' }}</div>
         </div>
@@ -29,7 +29,7 @@
           <transition name="addMore" mode="out-in">
             <div
               v-if="couplesValid.length < CPVOTENUM"
-              class="w-full shadow text-center bg-subaccent bg-opacity-90 cursor-pointer select-none p-2 rounded"
+              class="baseBlock w-full shadow text-center cursor-pointer select-none p-2 rounded"
               @click="addCouple()"
             >
               <icon-uil-plus class="text-lg" />

packages/vote/src/vote-couple/components/AdvancedFilter.vue

@@ -2,7 +2,7 @@
   <transition name="advancedFilter">
     <div
       v-if="open"
-      class="fixed top-1/8 left-0 right-0 h-3/5 flex flex-col p-3 z-53 space-y-2 bg-subaccent rounded w-4/5 mx-auto md:w-1/3 text-sm md:text-base xl:text-xl 2xl:text-2xl"
+      class="baseBlock fixed top-1/8 left-0 right-0 h-3/5 flex flex-col p-3 z-53 space-y-2 rounded w-4/5 mx-auto md:w-1/3 text-sm md:text-base xl:text-xl 2xl:text-2xl"
     >
       <div class="flex justify-between border-b">
         <div>高级筛选</div>