src/wolnelektury/static/2022/styles/components/_media.scss

   1 .c-media {
   2   margin: 0 auto;
   3 }
   4
   5 .c-media__actions {
   6   display: flex;
   7 }
   8
   9 .c-media__btn {
  10   width: 100%;
  11   text-align: center;
  12   align-items: center;
  13
  14   &:nth-child(1) { padding-right: 19px; }
  15   &:nth-child(2) { padding-left: 19px; padding-right: 19px; }
  16   &:nth-child(3) { padding-left: 19px; }
  17
  18   .l-button {
  19     width: 100%;
  20     display: flex;
  21     align-items: center;
  22     justify-content: center;
  23   }
  24 }
  25
  26 .c-media__player {
  27   margin-top: 35px;
  28
  29   h2 {
  30     font-weight: $bold;
  31     @include font-size(16px);
  32     line-height: 19px;
  33     text-align: center;
  34     letter-spacing: 0.01em;
  35     color: $color-gray;
  36     margin: 0;
  37   }
  38 }
  39
  40 .c-media__caption {
  41   color: #474747;
  42   background: #F2F2F2;
  43   padding: 15px 24px;
  44   border-radius: 0 0 5px 5px;
  45   max-width: 830px;
  46   margin: 0 auto;
  47   display: flex;
  48   align-items: center;
  49   justify-content: space-between;
  50
  51   .icons {}
  52   .content {
  53     padding-left: 35px;
  54     width: calc(100% - 145px);
  55   }
  56
  57   .icon {
  58     color: #808080;
  59     font-size: 26px;
  60     &:not(:last-child) {
  61       margin-right: 16px;
  62     }
  63   }
  64
  65   p {
  66     margin: 0;
  67     color: #474747;
  68     font-weight: normal;
  69     font-size: 12px;
  70     line-height: 140%;
  71   }
  72 }
  73
  74 .c-media__popup {
  75   position: fixed;
  76   z-index: 10;
  77   top: 0;
  78   left: 0;
  79   width: 100%;
  80   height: 100%;
  81   align-items: center;
  82   justify-content: center;
  83   background-color: rgba($color-black, 0.35);
  84   display: none;
  85
  86   &.is-open {
  87     display: flex;
  88   }
  89 }
  90
  91 .c-media__popup__box {
  92   background-color: #fff;
  93   min-width: 640px;
  94   position: relative;
  95   border-radius: 10px;
  96   overflow: hidden;
  97 }
  98
  99 .c-media__popup__box__lead {
 100   padding: 40px;
 101   background: #083F4D;
 102
 103   h2 {
 104     margin-top: 0;
 105     font-weight: 600;
 106     font-size: 25px;
 107     line-height: 140%;
 108     letter-spacing: -0.01em;
 109     color: #FFFFFF;
 110   }
 111
 112   p {
 113     letter-spacing: .01em;
 114     margin-top: 0;
 115     font-weight: normal;
 116     font-size: 18px;
 117     line-height: 150%;
 118     color: #D5ECED;
 119   }
 120 }
 121
 122 .c-media__popup__box__items {
 123   padding: 40px;
 124 }
 125
 126 .c-media__popup__box__item {
 127   display: flex;
 128   align-items: center;
 129   justify-content: space-between;
 130   width: 100%;
 131   padding: 20px 0;
 132
 133   &:not(:last-child) {
 134     border-bottom: 1px solid #D9D9D9;
 135   }
 136
 137   h3 {
 138     margin-top: 0;
 139     font-weight: bold;
 140     font-size: 18px;
 141     line-height: 166%;
 142     letter-spacing: -0.005em;
 143     color: #474747;
 144     border-bottom: 0;
 145     padding: 0;
 146   }
 147
 148   p {
 149     margin-top: 10px;
 150     max-width: 390px;
 151     font-weight: normal;
 152     font-size: 15px;
 153     line-height: 160%;
 154     color: #808080;
 155   }
 156
 157   ul {
 158     list-style: none;
 159     padding: 0;
 160     margin: 10px 0 0;
 161
 162     li {
 163       line-height: 1;
 164
 165       &:not(:last-child) {
 166         margin-bottom: 15px;
 167       }
 168
 169       a {
 170         font-weight: normal;
 171         font-size: 14px;
 172         line-height: 16px;
 173         letter-spacing: 0.01em;
 174         text-decoration: underline;
 175         color: #666666;
 176
 177         &:hover {
 178           text-decoration: none;
 179         }
 180       }
 181     }
 182   }
 183
 184   .l-button {
 185     padding: 6px 10px;
 186     min-width: 120px;
 187     display: block;
 188     text-align: center;
 189
 190     color: $color-white;
 191     background: #007880;
 192     border: 2px solid #007880;
 193
 194     &:hover {
 195       background: darken(#007880, 2%);
 196       border-color: darken(#007880, 2%);
 197     }
 198   }
 199 }
 200
 201 .c-media__popup__close {
 202   position: absolute;
 203   padding: 0;
 204   border: 0;
 205   outline: 0;
 206   cursor: pointer;
 207   font-size: 0;
 208   background-color: transparent;
 209   top: 35px;
 210   right: 40px;
 211   transition: all $ease-dynamic 350ms;
 212   opacity: 0.75;
 213
 214   &:hover {
 215     opacity: 1;
 216   }
 217 }