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(