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: #fff;
  54   }
  55 }
  56
  57 .privacy-concerns-button {
  58   @include margin-left(auto);
  59
  60   padding: 5px 8px 5px 7px;
  61   border-radius: 3px;
  62   white-space: nowrap;
  63   cursor: pointer;
  64   transition: background-color 0.3s;
  65   font-weight: $font-semibold;
  66
  67   &:hover {
  68     background-color: #000;
  69   }
  70 }
  71
  72 .privacy-concerns-okay {
  73   @include margin-left(10px);
  74
  75   background-color: pvar(--mainColor);
  76 }
  77
  78 @media screen and (max-width: 1300px) {
  79   .privacy-concerns {
  80     font-size: 12px;
  81     padding: 2px 5px;
  82   }
  83
  84   .privacy-concerns-text {
  85     margin: 0;
  86   }
  87 }