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

   1 .c-media {
   2     margin: 0 auto;
   3
   4     .only-s {
   5         .l-button--fav {
   6             margin-top: -10px;
   7         }
   8     }
   9 }
  10
  11 .c-media__actions {
  12     display: flex;
  13     column-gap: 38px;
  14     row-gap: 10px;
  15 }
  16
  17 .c-media__btn {
  18   width: 100%;
  19   text-align: center;
  20   align-items: center;
  21
  22   //&:nth-child(1) { padding-right: 19px; }
  23   //&:nth-child(2) { padding-left: 19px; padding-right: 19px; }
  24   //&:nth-child(3) { padding-left: 19px; }
  25
  26   .l-button {
  27     width: 100%;
  28     display: flex;
  29     align-items: center;
  30     justify-content: center;
  31   }
  32 }
  33
  34 .c-media__player {
  35   margin-top: 35px;
  36
  37   h2 {
  38     font-weight: $bold;
  39     @include font-size(16px);
  40     line-height: 19px;
  41     text-align: center;
  42     letter-spacing: 0.01em;
  43     color: $color-gray;
  44     margin: 0;
  45   }
  46 }
  47
  48 .c-media__caption {
  49   color: #474747;
  50   background: #F2F2F2;
  51   padding: 15px 24px;
  52   border-radius: 0 0 5px 5px;
  53   margin: 0 auto;
  54   display: flex;
  55   align-items: center;
  56   justify-content: space-between;
  57   position: relative;
  58
  59   .icons {}
  60   .content {
  61     padding-left: 35px;
  62     width: calc(100% - 145px);
  63   }
  64
  65   .icon {
  66     color: #808080;
  67     font-size: 26px;
  68     &:not(:last-child) {
  69       margin-right: 16px;
  70     }
  71   }
  72
  73   p {
  74     margin: 0;
  75     color: #474747;
  76     font-weight: normal;
  77     font-size: 12px;
  78     line-height: 140%;
  79   }
  80
  81   .c-media__settings {
  82       position: absolute;
  83       left: 0;
  84       right: 0;
  85       top: 0;
  86       z-index: 5;
  87       min-height: 30px;
  88       overflow: hidden;
  89
  90       .icon {
  91           position: absolute;
  92           transition: .5s rotate;
  93           bottom: 0;
  94           right: 0;
  95           line-height: 30px;
  96           width: 40px;
  97           text-align: center;
  98           margin: 0;
  99       }
 100       > div {
 101           height: 0;
 102           transition: .5s height;
 103           overflow: hidden;
 104           background: #F2F2F2;
 105           border-bottom: 5px solid #D5ECED;
 106           margin-top: -5px;
 107           > div {
 108               padding: 30px;
 109           }
 110       }
 111       &.active {
 112           .icon {
 113               rotate: 180deg;
 114
 115           }
 116           > div {
 117               height: 150px;
 118           }
 119       }
 120   }
 121 }
 122
 123 .c-media__popup {
 124   position: fixed;
 125   z-index: 10;
 126   top: 0;
 127   left: 0;
 128   height: 100%;
 129   align-items: flex-start;
 130   justify-content: center;
 131   background-color: rgba($color-black, 0.35);
 132   display: none;
 133   overflow-y: scroll;
 134   padding: 10vh 16px 10px 10px;
 135   width: 100%;
 136
 137   @include rwd($break-flow) {
 138       padding: 10vh 40px 40px 40px;
 139   }
 140
 141   &.is-open {
 142     display: flex;
 143   }
 144 }
 145
 146 .c-media__popup__box {
 147   background-color: #fff;
 148   position: relative;
 149   border-radius: 10px;
 150   overflow: hidden;
 151
 152   @include rwd($break-flow) {
 153       min-width: 640px;
 154   }
 155 }
 156
 157 .c-media__popup__box__lead {
 158   padding: 16px 50px 16px 16px;
 159   background: #083F4D;
 160
 161   @include rwd($break-flow) {
 162       padding: 40px;
 163   }
 164
 165   h2 {
 166     margin-top: 0;
 167     font-weight: 600;
 168     font-size: 25px;
 169     line-height: 140%;
 170     letter-spacing: -0.01em;
 171     color: #FFFFFF;
 172   }
 173
 174   p {
 175     letter-spacing: .01em;
 176     margin-top: 0;
 177     font-weight: normal;
 178     font-size: 18px;
 179     line-height: 150%;
 180     color: #D5ECED;
 181   }
 182 }
 183
 184 .c-media__popup__box__items {
 185     padding: 16px;
 186   @include rwd($break-flow) {
 187       padding: 40px;
 188   }
 189 }
 190
 191 .c-media__popup__box__item {
 192   display: flex;
 193   align-items: center;
 194   justify-content: space-between;
 195   column-gap: 16px;
 196   width: 100%;
 197   padding: 20px 0;
 198
 199   &:not(:last-child) {
 200     border-bottom: 1px solid #D9D9D9;
 201   }
 202
 203   h3 {
 204     margin-top: 0;
 205     font-weight: bold;
 206     font-size: 18px;
 207     line-height: 166%;
 208     letter-spacing: -0.005em;
 209     color: #474747;
 210     border-bottom: 0;
 211     padding: 0;
 212   }
 213
 214   p {
 215     margin-top: 10px;
 216     max-width: 390px;
 217     font-weight: normal;
 218     font-size: 15px;
 219     line-height: 160%;
 220     color: #808080;
 221   }
 222
 223   ul {
 224     list-style: none;
 225     padding: 0;
 226     margin: 10px 0 0;
 227
 228     li {
 229       line-height: 1;
 230
 231       &:not(:last-child) {
 232         margin-bottom: 15px;
 233       }
 234
 235       a {
 236         font-weight: normal;
 237         font-size: 14px;
 238         line-height: 16px;
 239         letter-spacing: 0.01em;
 240         text-decoration: underline;
 241         color: #666666;
 242
 243         &:hover {
 244           text-decoration: none;
 245         }
 246       }
 247     }
 248   }
 249
 250   .l-button {
 251     padding: 6px 10px;
 252     min-width: 120px;
 253     display: block;
 254     text-align: center;
 255
 256     color: $color-white;
 257     background: #007880;
 258     border: 2px solid #007880;
 259
 260     &:hover {
 261       background: darken(#007880, 2%);
 262       border-color: darken(#007880, 2%);
 263     }
 264   }
 265 }
 266
 267 .c-media__popup__close {
 268   position: absolute;
 269   padding: 0;
 270   border: 0;
 271   outline: 0;
 272   cursor: pointer;
 273   font-size: 0;
 274   background-color: transparent;
 275   top: 15px;
 276   right: 20px;
 277   transition: all $ease-dynamic 350ms;
 278   opacity: 0.75;
 279
 280   &:hover {
 281     opacity: 1;
 282   }
 283
 284   @include rwd($break-flow) {
 285       top: 35px;
 286       right: 40px;
 287   }
 288 }
 289
 290 .book-cover-small img {
 291     max-width: calc((100vw - 3 * 16px) / 2);
 292 }