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