src/wolnelektury/static/2021/css/components/_media.scss

   1 .c-media {
   2   margin: 31px auto;
   3   border: 1px solid $color-light-gray;
   4 }
   5
   6 .c-media__actions {
   7   display: flex;
   8   padding: 30px;
   9   border-bottom: 1px solid $color-light-gray;
  10 }
  11
  12 .c-media__btn {
  13   width: 100%;
  14   text-align: center;
  15
  16   &:first-child {
  17     padding-right: 35px;
  18   }
  19
  20   &:nth-child(2) {
  21     padding: 0 35px;
  22     border-left: 1px solid #ccc;
  23     border-right: 1px solid #ccc;
  24   }
  25
  26   &:last-child {
  27     padding-left: 35px;
  28   }
  29
  30   .l-button {}
  31
  32   ul {
  33     @include font-size(16px);
  34     line-height: 19px;
  35     text-align: center;
  36     letter-spacing: 0.01em;
  37     padding: 0;
  38     list-style: none;
  39     display: flex;
  40     align-items: center;
  41     justify-content: center;
  42     font-weight: $bold;
  43     margin: 0;
  44
  45     li {
  46       margin-right: 6px;
  47       &:not(:last-child):after { content: "|"; margin-left: 6px; }
  48     }
  49   }
  50 }
  51
  52 .c-media__player {
  53   padding: 25px 30px;
  54
  55   h2 {
  56     font-weight: $bold;
  57     @include font-size(16px);
  58     line-height: 19px;
  59     text-align: center;
  60     letter-spacing: 0.01em;
  61     color: $color-gray;
  62     margin: 0;
  63   }
  64 }
  65
  66 .c-media__popup {
  67   position: fixed;
  68   z-index: 10;
  69   top: 0;
  70   left: 0;
  71   width: 100%;
  72   height: 100%;
  73   align-items: center;
  74   justify-content: center;
  75   background-color: rgba($color-white, 0.75);
  76   display: none;
  77
  78   &.is-open {
  79     display: flex;
  80   }
  81 }
  82
  83 .c-media__popup__box {
  84   background-color: white;
  85   border: 1px solid #CCCCCC;
  86   padding: 40px;
  87   min-width: 640px;
  88   position: relative;
  89 }
  90
  91 .c-media__popup__box__lead {
  92   padding-bottom: 30px;
  93   border-bottom: 2px solid #666666;
  94
  95   h2 {
  96     font-weight: bold;
  97     font-size: 24px;
  98     line-height: 125%;
  99     letter-spacing: -0.01em;
 100     color: #666666;
 101     margin-top: 0;
 102   }
 103
 104   p {
 105     font-weight: normal;
 106     font-size: 16px;
 107     line-height: 19px;
 108     letter-spacing: 0.01em;
 109     color: #666666;
 110     margin-top: 0;
 111   }
 112 }
 113
 114 .c-media__popup__box__item {
 115   display: flex;
 116   align-items: center;
 117   justify-content: space-between;
 118   width: 100%;
 119   padding: 20px 0;
 120
 121   &:not(:last-child) {
 122     border-bottom: 1px solid #666666;
 123   }
 124
 125   h3 {
 126     font-weight: bold;
 127     font-size: 16px;
 128     line-height: 19px;
 129     letter-spacing: 0.01em;
 130     color: #666666;
 131     margin-top: 0;
 132   }
 133
 134   p {
 135     font-weight: normal;
 136     font-size: 16px;
 137     line-height: 19px;
 138     letter-spacing: 0.01em;
 139     color: #666666;
 140     margin-top: 10px;
 141     max-width: 390px;
 142   }
 143
 144   ul {
 145     list-style: none;
 146     padding: 0;
 147     margin: 10px 0 0;
 148
 149     li {
 150       line-height: 1;
 151
 152       &:not(:last-child) {
 153         margin-bottom: 15px;
 154       }
 155
 156       a {
 157         font-weight: normal;
 158         font-size: 14px;
 159         line-height: 16px;
 160         letter-spacing: 0.01em;
 161         text-decoration: underline;
 162         color: #666666;
 163
 164         &:hover {
 165           text-decoration: none;
 166         }
 167       }
 168     }
 169   }
 170
 171   .l-button {
 172     padding: 6px 10px;
 173     min-width: 120px;
 174     display: block;
 175     text-align: center;
 176   }
 177 }
 178
 179 .c-media__popup__close {
 180   position: absolute;
 181   padding: 0;
 182   border: 0;
 183   outline: 0;
 184   cursor: pointer;
 185   font-size: 0;
 186   background-color: transparent;
 187   top: 35px;
 188   right: 40px;
 189   transition: all $ease-dynamic 350ms;
 190   opacity: 0.75;
 191
 192   &:hover {
 193     opacity: 1;
 194   }
 195 }