From 029252e9ec9c81ac0f221dad3793cceed501d8f8 Mon Sep 17 00:00:00 2001
From: not-nullptr <needhelpwithrift@gmail.com>
Date: Fri, 18 Oct 2024 14:44:27 +0100
Subject: [PATCH] feat: blurred background for text readability on stats

---
 apps/frontend/src/components/ui/servers/ServerStats.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/servers/ServerStats.vue b/apps/frontend/src/components/ui/servers/ServerStats.vue
index 76be7f8eb..10ae20e12 100644
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/apps/frontend/src/components/ui/servers/ServerStats.vue
@@ -5,7 +5,12 @@
       :key="index"
       class="relative min-h-[150px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
     >
-      <div class="relative z-10 flex flex-row items-center gap-2">
+      <div
+        class="relative z-10 -ml-2 flex w-fit flex-row items-center gap-2 rounded-xl px-2 py-0.5"
+        :style="{
+          backdropFilter: 'blur(32px)',
+        }"
+      >
         <h2 class="m-0 text-3xl font-extrabold text-[var(--color-contrast)]">
           {{ metric.value }}
         </h2>