Another upgrade.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / reader_player.scss
1 @import "utils/module";
2 @import "base/icons";
3 @import "components/select";
4
5
6 // copied from local, move to base
7 .jp-state-playing .icon-play {
8   &:before {
9     content: $icon-pause;
10   }
11 }
12 .jp-state-muted .icon-volume {
13   &:before {
14     content: $icon-mute;
15   }
16 }
17
18 // *
19
20
21 .c-media {
22   margin: 0 auto;
23 }
24
25 .c-media__actions {
26   display: flex;
27 }
28
29 .c-media__btn {
30   width: 100%;
31   text-align: center;
32   align-items: center;
33
34   &:nth-child(1) { padding-right: 19px; }
35   &:nth-child(2) { padding-left: 19px; padding-right: 19px; }
36   &:nth-child(3) { padding-left: 19px; }
37
38   .l-button {
39     width: 100%;
40     display: flex;
41     align-items: center;
42     justify-content: center;
43   }
44 }
45
46 .c-media__player {
47     
48     position: fixed;
49     bottom: 0;
50     left: 0;
51     right: 0;
52     z-index: 1000;
53     
54
55   h2 {
56       //font-weight: $bold;
57       font-weight: bold;
58       //@include font-size(16px);
59       font-size: 16px;
60     line-height: 19px;
61     text-align: center;
62     letter-spacing: 0.01em;
63     color: $color-gray;
64     margin: 0;
65   }
66 }
67
68 .c-media__caption {
69   color: #474747;
70   background: #F2F2F2;
71   padding: 15px 24px;
72   border-radius: 0 0 5px 5px;
73   margin: 0 auto;
74   display: flex;
75   align-items: center;
76   justify-content: space-between;
77
78   .icons {}
79   .content {
80     padding-left: 35px;
81     width: calc(100% - 145px);
82   }
83
84   .icon {
85     color: #808080;
86     font-size: 26px;
87     &:not(:last-child) {
88       margin-right: 16px;
89     }
90   }
91
92   p {
93     margin: 0;
94     color: #474747;
95     font-weight: normal;
96     font-size: 12px;
97     line-height: 140%;
98   }
99 }
100
101
102
103
104 .c-player {
105   display: flex;
106   width: 100%;
107   align-items: center;
108   position: relative;
109   background-color: black;
110   padding: 0 34px 0 14px;
111 }
112
113 .c-player__btn {
114   background: white;
115   border: 0;
116   outline: 0;
117   border-radius: 50%;
118   padding: 0;
119   width: 60px;
120   height: 60px;
121   display: flex;
122   align-items: center;
123   justify-content: center;
124   cursor: pointer;
125   transition: all $ease-dynamic 350ms;
126
127   &:hover {
128     background: #083F4D;
129     .icon {color: white;}
130   }
131
132   .icon {
133     color: white;
134     font-size: 26px;
135     position: relative;
136     transition: background $ease-dynamic 350ms;
137     &.icon-play {
138       left: 3px;
139     }
140     &.icon-pause {
141       left: 1px;
142     }
143   }
144 }
145 .jp-state-playing {
146     .c-player__btn {
147         .icon.icon-play {
148             left: 1px;
149         }
150     }
151 }
152
153 .c-player__btns {
154   display: flex;
155   align-items: center;
156
157   button {
158     padding: 0;
159     display: flex;
160     align-items: center;
161     justify-content: center;
162     background-color: transparent;
163     width: 40px; height: 40px;
164     border-radius: 50%;
165     cursor: pointer;
166     margin: 0 5px;
167     outline: 0;
168     border: 1px solid transparent;
169     transition: border-color $ease-out 450ms;
170
171     &:first-child {
172       margin-left: 0;
173     }
174
175     &:hover {
176       border-color: rgba(#fff, 0.5);
177     }
178
179     &:disabled {
180         opacity: .33;
181         &:hover {
182             border-color: transparent;
183         }
184     }
185     
186     &.c-player__btn--md {
187       width: 50px; height: 50px;
188       .icon-play {
189         font-size: 20px;
190         position: relative;
191         left: 2px;
192       }
193       .icon-pause {
194         font-size: 20px;
195       }
196     }
197
198     .icon {
199       color: white;
200       font-size: 16px;
201     }
202   }
203 }
204 .jp-state-playing {
205     .c-player__btns {
206         button {
207             &.c-player__btn--md {
208                 .icon-play {
209                     left: 0;
210                 }
211             }
212         }
213     }
214 }
215
216 .c-player__timeline {
217   //max-width: 590px;
218   //width: calc(100% - 60px);
219   //margin-left: auto;
220     //margin-right: 0;
221     width: 100%;
222     margin: 0 30px;
223   position: relative;
224
225   & > span {
226     height: 10px;
227     width: 100%;
228     display: block;
229     background: #F2F2F2;
230     border-radius: 5px;
231     position: relative;
232     overflow: hidden;
233
234     span.jp-seek-bar {
235       height: 100%;
236       position: absolute;
237       border-radius: 5px;
238       background-color: #FFFFFF;
239       top: 0; left: 0;
240     }
241     
242     span.jp-play-bar {
243       height: 100%;
244       position: absolute;
245       border-radius: 5px;
246       background-color: #006066;
247       top: 0; left: 0;
248     }
249   }
250 }
251
252
253
254
255 .c-player__title {
256   top: -27px;
257   left: 0;
258   position: absolute;
259   font-style: normal;
260   font-weight: normal;
261   font-size: 12px;
262   line-height: 140%;
263   letter-spacing: 0.05em;
264   color: #083F4D;
265 }
266
267
268 .c-player__info {
269     display: none;
270   font-style: normal;
271   font-weight: normal;
272   font-size: 12px;
273   line-height: 140%;
274   letter-spacing: 0.05em;
275   color: #083F4D;
276 }
277
278 .c-player__chapters {
279     display: none;
280   font-style: normal;
281   font-weight: normal;
282   font-size: 12px;
283   line-height: 140%;
284   letter-spacing: 0.05em;
285   color: #083F4D;
286   z-index: 1;
287
288   &.is-active {
289     > span {
290       &:after {
291         transform: rotate(180deg);
292       }
293     }
294     ul {
295       opacity: 1;
296       transform: none;
297       pointer-events: all;
298     }
299   }
300
301   > span {
302     display: flex;
303     align-items: center;
304     cursor: pointer;
305
306     &:after {
307       margin-left: 5px;
308       content: $icon-arrow-down;
309       font-family: '#{$icomoon-font-family}' !important;
310       transition: transform $ease-out 450ms;
311     }
312   }
313
314   ul {
315     width: 283px;
316     position: absolute;
317     background-color: #083F4D;
318     transform: translateY(-10px);
319     opacity: 0;
320     box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
321     transition: all $ease-out 450ms;
322     list-style-position: inside;
323     border-radius: 10px;
324     right: 0;
325     margin: 10px 0 0;
326     padding: 15px;
327     pointer-events: none;
328     li {
329       font-size: 12px;
330       line-height: 140%;
331       letter-spacing: 0.05em;
332       list-style-type: decimal;
333       margin: 5px 0;
334       color: white;
335       cursor: pointer;
336
337       span {
338           display: none;
339       }
340       span.title {
341           display: inline;
342       }
343     }
344   }
345 }
346
347 .c-player__volume {
348   display: flex;
349   align-items: center;
350   justify-content: center;
351   margin-left: 40px;
352
353   .icon {
354     font-size: 21px;
355     color: white;
356     margin-right: 8px;
357     cursor: pointer;
358   }
359
360   .jp-volume-bar {
361     width: 100px;
362     border-radius: 5px;
363     height: 10px;
364     display: block;
365     background: white;
366   }
367   .jp-volume-bar-value {
368       display: block;
369       height: 10px;
370       border-radius: 5px;
371       background: #006066;
372   }
373 }
374
375
376 .c-player__length {
377   width: 100%;
378   display: block;
379   position: relative;
380
381   > span {
382     position: absolute;
383     //padding-top: 10px;
384     font-style: normal;
385     font-weight: normal;
386     font-size: 12px;
387     line-height: 140%;
388     letter-spacing: 0.05em;
389     color: white;
390
391     &:nth-child(1) { left: 0; }
392     &:nth-child(2) { right: 0; }
393     &:nth-child(3) {
394         left: 0;
395         right: 0;
396         text-align: center;
397     }
398   }
399 }
400
401
402 .project-icon {
403     max-width: 100px;
404     max-height: 50px;
405 }
406
407
408 #locator {
409     position: relative;
410     &.snap {
411         background: white;
412         .icon {
413             color: black;
414         }
415     }
416
417     &.up:after { 
418         content: '▲';
419         color: white;
420         font-size: .8em;
421         position: absolute;
422         top: 0px;
423         left: 0;
424         right: 0;
425         text-align: center;
426     }
427     &.down:after { 
428         content: '▼';
429         color: white;
430         font-size: .8em;
431         position: absolute;
432         bottom: 2px;
433         left: 0;
434         right: 0;
435         text-align: center;
436     }
437 }
438
439
440
441 #menu {
442     padding-bottom: 50px;
443     * {
444         box-sizing: content-box;
445     }
446 }
447
448
449
450 .with-player-bar .playing-highlight {
451     background: #D5ECED;
452 }
453
454
455
456 #player-bar {
457     display: none;
458 }
459 .with-player-bar {
460     #player-bar {
461         display: block;
462     }
463     .syncable {
464         cursor: pointer;
465     }
466 }
467
468 .annoy-banner-on_blackout {
469         display: none !important;
470 }