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