42 lines
787 B
JavaScript
42 lines
787 B
JavaScript
|
import styled from 'styled-components'
|
||
|
|
import { colours } from '../../assets/theme'
|
||
|
|
import CrossSvg from '../Svg/Cross'
|
||
|
|
|
||
|
|
export const VideoWrapper = styled.div`
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
z-index: 12;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
/* background-color: ${props => (props.$active ? 'red' : 'green')}; */
|
||
|
|
`
|
||
|
|
export const Iframe = styled.iframe`
|
||
|
|
z-index: 1;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
`
|
||
|
|
|
||
|
|
export const StyledCrossSvg = styled(CrossSvg)`
|
||
|
|
position: fixed;
|
||
|
|
right: 2.5em;
|
||
|
|
top: 2em;
|
||
|
|
width: 64px;
|
||
|
|
height: 64px;
|
||
|
|
cursor: pointer;
|
||
|
|
stroke: ${colours.midnightDarker};
|
||
|
|
z-index: 12;
|
||
|
|
opacity: ${props => (props.$active ? '1' : '0.2')};
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
`
|