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