From c303748ca92d7fc8d03cfe6b44541a5bff0d107c Mon Sep 17 00:00:00 2001
From: Andrew Prifer <andrew.prifer@gmail.com>
Date: Mon, 13 Jun 2022 15:25:27 +0200
Subject: [PATCH] Fix transparencies in non-backdrop-blur browsers

---
 theatre/studio/src/panels/DetailPanel/DetailPanel.tsx         | 4 ++++
 theatre/studio/src/panels/OutlinePanel/BaseItem.tsx           | 4 ++++
 theatre/studio/src/toolbars/PinButton.tsx                     | 4 ++++
 theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx | 4 ++++
 4 files changed, 16 insertions(+)

diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
index 4ce6a45..2e4c60d 100644
--- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
+++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
@@ -44,6 +44,10 @@ const Container = styled.div<{pin: boolean}>`
   &:hover {
     display: block;
   }
+
+  @supports not (backdrop-filter: blur()) {
+    background: rgba(40, 43, 47, 0.95);
+  }
 `
 
 const Title = styled.div`
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index f6cf4f8..11fa632 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -71,6 +71,10 @@ const Header = styled(BaseHeader)`
     z-index: 5;
     ${pointerEventsAutoInNormalMode};
   }
+
+  @supports not (backdrop-filter: blur()) {
+    background: rgba(40, 43, 47, 0.95);
+  }
 `
 
 export const outlineItemFont = css`
diff --git a/theatre/studio/src/toolbars/PinButton.tsx b/theatre/studio/src/toolbars/PinButton.tsx
index c8a8272..36449d4 100644
--- a/theatre/studio/src/toolbars/PinButton.tsx
+++ b/theatre/studio/src/toolbars/PinButton.tsx
@@ -36,6 +36,10 @@ const Container = styled.button<{pinned?: boolean}>`
   svg {
     display: block;
   }
+
+  @supports not (backdrop-filter: blur()) {
+    background: rgba(40, 43, 47, 0.95);
+  }
 `
 
 interface PinButtonProps extends ComponentPropsWithRef<'button'> {
diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
index c50f847..1ba53ef 100644
--- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
+++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
@@ -60,6 +60,10 @@ export const Container = styled.button`
       border-top-right-radius: 2px;
     }
   }
+
+  @supports not (backdrop-filter: blur()) {
+    background: rgba(40, 43, 47, 0.95);
+  }
 `
 
 const ToolbarIconButton: typeof Container = React.forwardRef(