From 9583ff6ab90015138ddcbbe21f0e89cc0f75b42b Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Sun, 8 Sep 2024 21:34:26 -0400
Subject: [PATCH] Fix backdrop blurs on GNOME Web and other browsers requiring
 `-webkit-*`

---
 source/src/components/Dialog.astro                | 1 +
 source/src/components/DiscoverChannel.astro       | 1 +
 source/src/components/Search.astro                | 1 +
 source/src/components/category/CategoryCard.astro | 1 +
 source/src/pages/live.astro                       | 1 +
 source/src/styles/mobile.scss                     | 2 ++
 source/src/styles/player.scss                     | 1 +
 7 files changed, 8 insertions(+)

diff --git a/source/src/components/Dialog.astro b/source/src/components/Dialog.astro
index 509ca74..f0e7e55 100755
--- a/source/src/components/Dialog.astro
+++ b/source/src/components/Dialog.astro
@@ -35,6 +35,7 @@ const {
     height: 100%;
     z-index: 6;
     backdrop-filter: blur(10px) brightness(0.5) contrast(0.9);
+    -webkit-backdrop-filter: blur(10px) brightness(0.5) contrast(0.9);
 }
 .dialog {
     display: none;
diff --git a/source/src/components/DiscoverChannel.astro b/source/src/components/DiscoverChannel.astro
index 8a4063d..882e795 100755
--- a/source/src/components/DiscoverChannel.astro
+++ b/source/src/components/DiscoverChannel.astro
@@ -31,6 +31,7 @@ const channel = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/channels/" + Cha
         align-items: center;
         text-align: center;
         backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
+        -webkit-backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
         img {
             width: 24%;
             align-self: center;
diff --git a/source/src/components/Search.astro b/source/src/components/Search.astro
index 4ec930e..0b710ea 100755
--- a/source/src/components/Search.astro
+++ b/source/src/components/Search.astro
@@ -136,6 +136,7 @@ for the JavaScript code in this page.
     width: 100%;
     border-radius: 6px;
     backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     border: 1px #282828 solid;
     a:hover {
         background: #0d0d0d !important;
diff --git a/source/src/components/category/CategoryCard.astro b/source/src/components/category/CategoryCard.astro
index 8d6970f..71578c8 100644
--- a/source/src/components/category/CategoryCard.astro
+++ b/source/src/components/category/CategoryCard.astro
@@ -48,6 +48,7 @@ const {
         place-content: center;
         border-radius: 10px;
         backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
+        -webkit-backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
         p {
             font-size: 18px;
             font-weight: bold;
diff --git a/source/src/pages/live.astro b/source/src/pages/live.astro
index 0fa3df4..0af3632 100755
--- a/source/src/pages/live.astro
+++ b/source/src/pages/live.astro
@@ -70,6 +70,7 @@ const Creator = await fetch(
       height: 100%;
       z-index: -1;
       backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
+      -webkit-backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
       border-radius: 12px 12px 0px 0px;
     }
     .creator-tw-banner {
diff --git a/source/src/styles/mobile.scss b/source/src/styles/mobile.scss
index 4e6d254..3dea6b6 100755
--- a/source/src/styles/mobile.scss
+++ b/source/src/styles/mobile.scss
@@ -9,6 +9,7 @@
     width: calc(100% - 48px);
     background: transparent;
     backdrop-filter: blur(48px) contrast(0.8) brightness(0.8);
+    -webkit-backdrop-filter: blur(48px) contrast(0.8) brightness(0.8);
     justify-content: space-around;
     z-index: 10;
     padding: 0px 24px;
@@ -50,6 +51,7 @@
     .header, .page-title {
         background: rgb(0 0 0 / 80%);
         backdrop-filter: blur(10px) contrast(0.8);
+        -webkit-backdrop-filter: blur(10px) contrast(0.8);
     }
 }
 @media only screen and (max-width: 800px) {
diff --git a/source/src/styles/player.scss b/source/src/styles/player.scss
index 78b0cbb..16f33ab 100755
--- a/source/src/styles/player.scss
+++ b/source/src/styles/player.scss
@@ -190,6 +190,7 @@
     gap: 6px;
     padding: 4px;
     backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
+    -webkit-backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
     hr {
         margin: 0px;
         width: 100%;