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