style: remove the use of has css selector

Tim-Saijun · Aug 22, 2023 · b1ff151 · b1ff151
1 parent be2ae7a
commit b1ff151
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Link/LinkAvatar.vue b/src/components/Link/LinkAvatar.vue
@@ -1,10 +1,5 @@
 <template>
-  <a
-    class="links-group-avatar h-[120px] w-[120px] flex items-center justify-center text-white text-6xl font-bold scale"
-    :href="link"
-    target="_blank"
-    :title="title"
-  >
+  <a :class="linkGroupClasses" :href="link" target="_blank" :title="title">
     <img
       v-if="source"
       :class="avatarClasses"
@@ -40,6 +35,14 @@ export default defineComponent({
     const appStore = useAppStore()
 
     return {
+      linkGroupClasses: computed(() => {
+        return {
+          'links-group-avatar h-[120px] w-[120px] flex items-center justify-center text-white text-6xl font-bold':
+            true,
+          'diamond-shape':
+            appStore.themeConfig.theme.profile_shape === 'diamond-avatar'
+        }
+      }),
       avatarClasses: computed(() => {
         return {
           'h-full w-full shadow-xl m-0 transform-gpu': true,

diff --git a/src/components/Link/LinkBox.vue b/src/components/Link/LinkBox.vue
@@ -125,7 +125,7 @@ export default defineComponent({
   .links-group-avatar:nth-child(even) {
     @apply mt-4 transform-gpu;
     transform: translate(-60px);
-    &:has(.diamond-avatar) {
+    &.diamond-shape {
       @apply mt-0;
       transform: translate(-66px);
     }