@nnc-digital/nnc-design-system 1.0.0-alpha25 → 1.0.0-alpha27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25779,7 +25779,7 @@ const VideoContainer = styled.div`
25779
25779
  left: 0;
25780
25780
  width: 100%;
25781
25781
  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25782
- height: 575px;
25782
+ height: 590px;
25783
25783
  }
25784
25784
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25785
25785
  height: 420px;
@@ -25789,7 +25789,6 @@ const VideoContainer = styled.div`
25789
25789
  }
25790
25790
  `;
25791
25791
 
25792
-
25793
25792
  const VideoBackground = styled.video`
25794
25793
  position: absolute;
25795
25794
  top: 0;
@@ -25799,41 +25798,37 @@ const VideoBackground = styled.video`
25799
25798
  object-fit: cover;
25800
25799
  z-index: -1;
25801
25800
  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25802
- height: 575px;
25801
+ height: 590px;
25803
25802
  }
25804
25803
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25805
25804
  height: 420px;
25806
25805
  }
25807
25806
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25808
- height: 540px; /* Height for large and above screens */
25807
+ height: 540px;
25809
25808
  }
25810
25809
  `;
25811
25810
 
25812
25811
  const PlayPauseButton = styled.button`
25813
25812
  position: absolute;
25814
- bottom: 20px;
25815
- right: 20px;
25816
- background: rgba(0, 0, 0, 0.5);
25817
- border: 1px solid white;
25818
- color: white;
25819
- font-size: 32px;
25820
- border-radius: 50%;
25821
- width: 50px;
25822
- height: 50px;
25823
- cursor: pointer;
25824
- display: flex;
25825
- align-items: center;
25826
- justify-content: center;
25827
- z-index: 10;
25828
- &:hover {
25829
- background: rgba(0, 0, 0, 0.7);
25830
- }
25831
- @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25832
- bottom: 140px;
25833
- }
25813
+ display: none;
25834
25814
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25835
25815
  bottom: 20px;
25836
25816
  right: 20px;
25817
+ display: flex;
25818
+ align-items: center;
25819
+ justify-content: center;
25820
+ z-index: 10;
25821
+ background: rgba(0, 0, 0, 0.5);
25822
+ border: 1px solid white;
25823
+ color: white;
25824
+ font-size: 32px;
25825
+ border-radius: 50%;
25826
+ width: 50px;
25827
+ height: 50px;
25828
+ cursor: pointer;
25829
+ &:hover {
25830
+ background: rgba(0, 0, 0, 0.7);
25831
+ }
25837
25832
  }
25838
25833
  `;
25839
25834