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