client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .privacy-concerns {
   5   position: fixed;
   6   bottom: 0;
   7
   8   width: calc(100% - #{$menu-width});
   9   z-index: z(privacymsg);
  10
  11   padding: 5px 15px;
  12
  13   display: flex;
  14   flex-wrap: nowrap;
  15   align-items: center;
  16   justify-content: space-between;
  17   background-color: rgba(0, 0, 0, 0.9);
  18   color: #fff;
  19 }
  20
  21 // If the view is expanded
  22 :host-context(.expanded) {
  23   .privacy-concerns {
  24     width: 100%;
  25   }
  26 }
  27
  28 // Avoid higher z-index when overlay on touchscreens
  29 :host-context(.menu-open) {
  30   .privacy-concerns {
  31     z-index: z(overlay) - 1;
  32   }
  33 }
  34
  35 // Or if we are in the small view
  36 @media screen and (max-width: $small-view) {
  37   .privacy-concerns {
  38     width: 100%;
  39   }
  40 }
  41
  42 .privacy-concerns-text {
  43   margin: 0 5px;
  44 }
  45
  46 a {
  47   @include disable-default-a-behaviour;
  48
  49   color: pvar(--mainColor);
  50   transition: color 0.3s;
  51
  52   &:hover {
  53     color: pvar(--mainBackgroundColor);
  54   }
  55 }
  56
  57 @media screen and (max-width: 1300px) {
  58   .privacy-concerns {
  59     font-size: 12px;
  60     padding: 2px 5px;
  61   }
  62
  63   .privacy-concerns-text {
  64     margin: 0;
  65   }
  66 }