Fix transparencies in non-backdrop-blur browsers

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`

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`

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'> {

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(