e52708b87cfbbab2c923eec1e0205f911d782b1e
[wolnelektury.git] / 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 }