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