From ea8c16a9f8e18034ce3753ef282cc837625ddfde Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 6 Mar 2022 15:43:35 +0200
Subject: [PATCH] Add background for Popover on Firefox

---
 app/styles/global.css              | 10 +++++++++-
 app/styles/tournament-bracket.css  |  2 ++
 app/styles/tournament-map-pool.css |  2 ++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/styles/global.css b/app/styles/global.css
index f2599e9d9..e709ba136 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -5,6 +5,7 @@
   --bg-darker: hsl(237.3deg 42.3% 26.6%);
   --bg-lighter: hsl(237.3deg 42.3% 35.6%);
   --bg-lighter-transparent: hsla(237.3deg 42.3% 35.6% / 50%);
+  --bg-darker-transparent: hsla(237.3deg 42.3% 26.6% / 90%);
   --bg-modal-backdrop: hsla(237deg 98% 1% / 70%);
   --border: hsl(237.3deg 42.3% 45.6%);
   --button-text: rgb(0 0 0 / 85%);
@@ -444,13 +445,20 @@ hr {
 .popover-content {
   max-width: 20rem;
   padding: var(--s-2);
-  backdrop-filter: blur(10px) brightness(75%);
+  background-color: var(--bg-darker-transparent);
   border-radius: var(--rounded);
   font-size: var(--fonts-sm);
   font-weight: var(--semi-bold);
   white-space: pre-wrap;
 }
 
+@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+  .popover-content {
+    backdrop-filter: blur(10px) brightness(75%);
+    background-color: transparent;
+  }
+}
+
 .combobox-input {
   width: 12rem;
 }
diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css
index ea8a5d95d..0cea84a84 100644
--- a/app/styles/tournament-bracket.css
+++ b/app/styles/tournament-bracket.css
@@ -30,6 +30,8 @@
   display: flex;
   justify-content: space-between;
   padding: var(--s-2);
+
+  /* TODO: add fallback from Firefox */
   backdrop-filter: blur(5px);
   background: rgb(0 0 0 / 25%);
   border-start-end-radius: var(--rounded);
diff --git a/app/styles/tournament-map-pool.css b/app/styles/tournament-map-pool.css
index 75f004ed5..166a3efb7 100644
--- a/app/styles/tournament-map-pool.css
+++ b/app/styles/tournament-map-pool.css
@@ -41,6 +41,8 @@
   position: absolute;
   display: flex;
   padding: var(--s-1-5);
+
+  /* TODO: add fallback from Firefox */
   backdrop-filter: blur(5px) grayscale(25%);
   border-end-end-radius: var(--rounded);
   border-start-start-radius: var(--rounded);