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 16px 10px 10px;
  93   width: 100%;
  94
  95   @include rwd($break-flow) {
  96       padding: 10vh 40px 40px 40px;
  97   }
  98
  99   &.is-open {
 100     display: flex;
 101   }
 102 }
 103
 104 .c-media__popup__box {
 105   background-color: #fff;
 106   position: relative;
 107   border-radius: 10px;
 108   overflow: hidden;
 109
 110   @include rwd($break-flow) {
 111       min-width: 640px;
 112   }
 113 }
 114
 115 .c-media__popup__box__lead {
 116   padding: 16px 50px 16px 16px;
 117   background: #083F4D;
 118
 119   @include rwd($break-flow) {
 120       padding: 40px;
 121   }
 122
 123   h2 {
 124     margin-top: 0;
 125     font-weight: 600;
 126     font-size: 25px;
 127     line-height: 140%;
 128     letter-spacing: -0.01em;
 129     color: #FFFFFF;
 130   }
 131
 132   p {
 133     letter-spacing: .01em;
 134     margin-top: 0;
 135     font-weight: normal;
 136     font-size: 18px;
 137     line-height: 150%;
 138     color: #D5ECED;
 139   }
 140 }
 141
 142 .c-media__popup__box__items {
 143     padding: 16px;
 144   @include rwd($break-flow) {
 145       padding: 40px;
 146   }
 147 }
 148
 149 .c-media__popup__box__item {
 150   display: flex;
 151   align-items: center;
 152   justify-content: space-between;
 153   column-gap: 16px;
 154   width: 100%;
 155   padding: 20px 0;
 156
 157   &:not(:last-child) {
 158     border-bottom: 1px solid #D9D9D9;
 159   }
 160
 161   h3 {
 162     margin-top: 0;
 163     font-weight: bold;
 164     font-size: 18px;
 165     line-height: 166%;
 166     letter-spacing: -0.005em;
 167     color: #474747;
 168     border-bottom: 0;
 169     padding: 0;
 170   }
 171
 172   p {
 173     margin-top: 10px;
 174     max-width: 390px;
 175     font-weight: normal;
 176     font-size: 15px;
 177     line-height: 160%;
 178     color: #808080;
 179   }
 180
 181   ul {
 182     list-style: none;
 183     padding: 0;
 184     margin: 10px 0 0;
 185
 186     li {
 187       line-height: 1;
 188
 189       &:not(:last-child) {
 190         margin-bottom: 15px;
 191       }
 192
 193       a {
 194         font-weight: normal;
 195         font-size: 14px;
 196         line-height: 16px;
 197         letter-spacing: 0.01em;
 198         text-decoration: underline;
 199         color: #666666;
 200
 201         &:hover {
 202           text-decoration: none;
 203         }
 204       }
 205     }
 206   }
 207
 208   .l-button {
 209     padding: 6px 10px;
 210     min-width: 120px;
 211     display: block;
 212     text-align: center;
 213
 214     color: $color-white;
 215     background: #007880;
 216     border: 2px solid #007880;
 217
 218     &:hover {
 219       background: darken(#007880, 2%);
 220       border-color: darken(#007880, 2%);
 221     }
 222   }
 223 }
 224
 225 .c-media__popup__close {
 226   position: absolute;
 227   padding: 0;
 228   border: 0;
 229   outline: 0;
 230   cursor: pointer;
 231   font-size: 0;
 232   background-color: transparent;
 233   top: 15px;
 234   right: 20px;
 235   transition: all $ease-dynamic 350ms;
 236   opacity: 0.75;
 237
 238   &:hover {
 239     opacity: 1;
 240   }
 241
 242   @include rwd($break-flow) {
 243       top: 35px;
 244       right: 40px;
 245   }
 246 }
 247
 248 .book-cover-small img {
 249     max-width: calc((100vw - 3 * 16px) / 2);
 250 }