refactor: 💄 Add slight "frosted glass" effect to some cards, improve color variety, make avatars smaller

app.vue

@@ -91,6 +91,6 @@ body {
 
 html.theme-changing * {
     /* Stroke and fill aren't animatable */
-    transition: background 1s ease, border 1s ease, color 1s ease, box-shadow 1s ease !important;
+    transition: background-color 1s ease, border 1s ease, color 1s ease, box-shadow 1s ease !important;
 }
 </style>

components/composer/dialog.vue

@@ -67,7 +67,7 @@ const relation = ref(
         }
     }">
         <DialogContent :hide-close="true"
-            class="sm:max-w-xl max-w-full w-full grid-rows-[minmax(0,1fr)_auto] max-h-[90dvh] p-5 pt-6 top-0 sm:top-1/2 translate-y-0 sm:-translate-y-1/2">
+            class="sm:max-w-xl max-w-full w-[calc(100%-2*0.5rem)] grid-rows-[minmax(0,1fr)_auto] max-h-[90dvh] p-5 pt-6 top-2 sm:top-1/2 translate-y-0 sm:-translate-y-1/2 rounded">
             <DialogTitle class="sr-only">
                 {{ relation?.type === "reply" ? m.loved_busy_mantis_slide() : relation?.type === "quote" ? "Quote" :
                     m.chunky_dull_marlin_trip() }}

components/notes/header.vue

@@ -6,8 +6,8 @@
             }
         }" :open-delay="2000">
             <HoverCardTrigger :as-child="true">
-                <NuxtLink :href="urlAsPath" :class="cn('relative size-14', smallLayout && 'size-8')">
-                    <Avatar :class="cn('size-14 border border-card', smallLayout && 'size-8')" :src="author.avatar"
+                <NuxtLink :href="urlAsPath" :class="cn('relative size-12', smallLayout && 'size-8')">
+                    <Avatar :class="cn('size-12 border border-card', smallLayout && 'size-8')" :src="author.avatar"
                         :name="author.display_name" />
                     <Avatar v-if="cornerAvatar" class="size-6 border absolute -bottom-1 -right-1" :src="cornerAvatar" />
                 </NuxtLink>
@@ -114,4 +114,4 @@ const visibilities = {
         text: "This note is direct: it can only be seen by mentioned users.",
     },
 };
-</script>
+</script>

components/notes/note.vue

@@ -7,8 +7,8 @@
                 :corner-avatar="note.reblog ? note.account.avatar : undefined" :note-url="url"
                 :visibility="noteToUse.visibility" :created-at="new Date(noteToUse.created_at)"
                 :small-layout="smallLayout" class="z-[1]" />
-            <div v-if="topAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute top-0 h-7 left-[3.25rem]')"></div>
-            <div v-if="bottomAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute bottom-0 h-[calc(100%-1.5rem)] left-[3.25rem]')"></div>
+            <div v-if="topAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute top-0 h-7 left-[3rem]')"></div>
+            <div v-if="bottomAvatarBar" :class="cn('shrink-0 bg-border w-0.5 absolute bottom-0 h-[calc(100%-1.5rem)] left-[3rem]')"></div>
         </CardHeader>
         <!-- Simply offset by the size of avatar + 0.75rem (the gap) -->
         <CardContent :class="contentUnderUsername && (smallLayout ? 'ml-11' : 'ml-[4.25rem]')">

components/ui/card/Card.vue

@@ -17,7 +17,7 @@ const props = withDefaults(
     :as-child="props.asChild"
     :class="
       cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        'rounded-lg border bg-card/20 backdrop-blur-xl text-card-foreground shadow-sm',
         props.class,
       )
     "

components/ui/dialog/DialogContent.vue

@@ -30,27 +30,20 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    />
-    <DialogContent
-      v-bind="forwarded"
-      :class="
-        cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class,
-        )"
-    >
-      <slot />
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 bg-black/80 backdrop-blur data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogContent v-bind="forwarded" :class="cn(
+            'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+            props.class,
+        )">
+            <slot />
 
-      <DialogClose
-        v-if="!props.hideClose"
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-      >
-        <X class="size-4" />
-        <span class="sr-only">Close</span>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
+            <DialogClose v-if="!props.hideClose"
+                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <X class="size-4" />
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
 </template>

styles/index.css

@@ -15,7 +15,7 @@
         --popover: 0 0% 100%;
         --popover-foreground: 240 10% 3.9%;
 
-        --card: 0 0% 100%;
+        --card: 241 10% 99%;
         --card-foreground: 240 10% 3.9%;
 
         --border: 240 5.9% 90%;
@@ -60,7 +60,7 @@
         --popover: 240 10% 3.9%;
         --popover-foreground: 0 0% 98%;
 
-        --card: 240 10% 3.9%;
+        --card: 240 10% 5%;
         --card-foreground: 0 0% 98%;
 
         --border: 240 3.7% 15.9%;