feat: no borders in cards (#925)

components/account/AccountFollowButton.vue

@@ -65,7 +65,7 @@ const buttonStyle = $computed(() => {
     return 'text-inverted bg-red border-red'
 
   if (relationship?.muting)
-    return 'text-base bg-code border-base'
+    return 'text-base bg-card border-base'
 
   // If following, use a label style with a strong border for Mutuals
   if (relationship ? relationship.following : context === 'following')

components/status/StatusAttachment.vue

@@ -98,7 +98,6 @@ useIntersectionObserver(video, (entries) => {
         loop
         playsinline
         controls
-        border="~ base"
         rounded-lg
         object-cover
         :width="attachment.meta?.original?.width"
@@ -119,7 +118,6 @@ useIntersectionObserver(video, (entries) => {
         muted
         loop
         playsinline
-        border="~ base"
         rounded-lg
         object-cover
         :width="attachment.meta?.original?.width"
@@ -160,7 +158,6 @@ useIntersectionObserver(video, (entries) => {
             aspectRatio,
             objectPosition,
           }"
-          border="~ base"
           rounded-lg
           h-full
           w-full

components/status/StatusMedia.vue

@@ -23,7 +23,7 @@ const { status } = defineProps<{
 
 <style lang="postcss">
 .status-media-container {
-  --at-apply: gap-0.5;
+  --at-apply: gap-2;
   position: relative;
   width: 100%;
   overflow: hidden;

components/status/StatusPreviewCard.vue

@@ -38,12 +38,13 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
     v-else
     block
     of-hidden
-    hover:bg-active
     :to="card.url"
+    bg-card
+    hover:bg-active
     :class="{
       'flex': isSquare,
       'p-4': root,
-      'rounded-lg border border-base': !root,
+      'rounded-lg': !root,
     }"
     target="_blank"
     external
@@ -52,10 +53,9 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
       v-if="card.image"
       flex flex-col
       display-block of-hidden
-      border="base"
       :class="{
-        'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': isSquare,
+        'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22': isSquare,
-        'w-full aspect-[1.91] border-b': !isSquare,
+        'w-full aspect-[1.91]': !isSquare,
         'rounded-lg': root,
       }"
     >

components/status/StatusPreviewGitHub.vue

@@ -89,7 +89,7 @@ const meta = $computed(() => {
     v-if="card.image"
     flex flex-col
     display-block of-hidden
-    bg-code
+    bg-card
     relative
     w-full min-h-50 md:min-h-60
     justify-center

styles/vars.css

@@ -8,6 +8,7 @@
   --c-bg-base: #fafafa;
   --c-bg-base-rgb: 250, 250, 250;
   --c-bg-active: #f2f2f2;
+  --c-bg-card: #00000006;
   --c-bg-code: #00000006;
   --c-bg-selection: #8885;
   --c-bg-fade: #EA9E4411;
@@ -38,6 +39,7 @@
   --c-bg-base: #111;
   --c-bg-base-rgb: 17, 17, 17;
   --c-bg-active: #191919;
+  --c-bg-card: #ffffff06;
   --c-bg-code: #ffffff06;
   --c-bg-fade: #EA9E4411;
   --c-bg-dm: #0a2f35;

unocss.config.ts

@@ -23,6 +23,7 @@ export default defineConfig({
       'bg-border': 'bg-$c-border',
       'bg-active': 'bg-$c-bg-active',
       'bg-primary-light': 'bg-$c-primary-light',
+      'bg-card': 'bg-$c-bg-card',
       'bg-code': 'bg-$c-bg-code',
       'bg-fade': 'bg-$c-bg-fade',
       'bg-dm': 'bg-$c-bg-dm',