variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix transparencies in non-backdrop-blur browsers

Browse source
This commit is contained in:
Andrew Prifer 2022-06-13 15:25:27 +02:00 committed by Andrew Prifer
parent 4d4d970278
commit c303748ca9
4 changed files with 16 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
View file

@ -44,6 +44,10 @@ const Container = styled.div<{pin: boolean}>`
&:hover { &:hover {
display: block; display: block;
} }
@supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95);
}
` `
const Title = styled.div` const Title = styled.div`

4
theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
View file

@ -71,6 +71,10 @@ const Header = styled(BaseHeader)`
z-index: 5; z-index: 5;
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
} }
@supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95);
}
` `
export const outlineItemFont = css` export const outlineItemFont = css`

4
theatre/studio/src/toolbars/PinButton.tsx
View file

@ -36,6 +36,10 @@ const Container = styled.button<{pinned?: boolean}>`
svg { svg {
display: block; display: block;
} }
@supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95);
}
` `
interface PinButtonProps extends ComponentPropsWithRef<'button'> { interface PinButtonProps extends ComponentPropsWithRef<'button'> {

4
theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
View file

@ -60,6 +60,10 @@ export const Container = styled.button`
border-top-right-radius: 2px; border-top-right-radius: 2px;
} }
} }
@supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95);
}
` `
const ToolbarIconButton: typeof Container = React.forwardRef( const ToolbarIconButton: typeof Container = React.forwardRef(