Implemented the new player.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / components / _player.scss
1 .c-player {
2   display: flex;
3   width: 100%;
4   align-items: center;
5   position: relative;
6   background-color: #D5ECED;
7   padding: 25px 34px 25px 14px;
8 }
9
10 .c-player__head {
11   background: #006066;
12   padding: 8px 14px;
13   border-radius: 5px 5px 0px 0px;
14   font-weight: 600;
15   font-size: 12px;
16   line-height: 140%;
17   letter-spacing: 0.02em;
18   color: #FFFFFF;
19 }
20
21 .c-player__btn {
22   background: white;
23   border: 0;
24   outline: 0;
25   border-radius: 50%;
26   padding: 0;
27   width: 60px;
28   height: 60px;
29   display: flex;
30   align-items: center;
31   justify-content: center;
32   cursor: pointer;
33   transition: all $ease-dynamic 350ms;
34
35   &:hover {
36     background: #083F4D;
37     .icon {color: white;}
38   }
39
40   .icon {
41     color: #007880;
42     font-size: 26px;
43     position: relative;
44     transition: background $ease-dynamic 350ms;
45     &.icon-play {
46       left: 3px;
47     }
48     &.icon-pause {
49       left: 1px;
50     }
51   }
52 }
53 .jp-state-playing {
54     .c-player__btn {
55         .icon.icon-play {
56             left: 1px;
57         }
58     }
59 }
60
61 .c-player__btns {
62   display: flex;
63   align-items: center;
64
65   button {
66     padding: 0;
67     display: flex;
68     align-items: center;
69     justify-content: center;
70     background-color: transparent;
71     width: 40px; height: 40px;
72     border-radius: 50%;
73     cursor: pointer;
74     margin: 0 5px;
75     outline: 0;
76     border: 1px solid transparent;
77     transition: border-color $ease-out 450ms;
78
79     &:first-child {
80       margin-left: 0;
81     }
82
83     &:hover {
84       border-color: rgba(#007880, 0.5);
85     }
86
87     &:disabled {
88         opacity: .33;
89         &:hover {
90             border-color: transparent;
91         }
92     }
93     
94     &.c-player__btn--md {
95       width: 50px; height: 50px;
96       .icon-play {
97         font-size: 20px;
98         position: relative;
99         left: 2px;
100       }
101       .icon-pause {
102         font-size: 20px;
103       }
104     }
105
106     .icon {
107       color: #007880;
108       font-size: 16px;
109     }
110   }
111 }
112 .jp-state-playing {
113     .c-player__btns {
114         button {
115             &.c-player__btn--md {
116                 .icon-play {
117                     left: 0;
118                 }
119             }
120         }
121     }
122 }
123
124 .c-player__timeline {
125   max-width: 590px;
126   width: calc(100% - 60px);
127   margin-left: auto;
128   margin-right: 0;
129   position: relative;
130
131   & > span {
132     height: 10px;
133     width: 100%;
134     display: block;
135     background: #F2F2F2;
136     border-radius: 5px;
137     position: relative;
138     overflow: hidden;
139
140     span.jp-seek-bar {
141       height: 100%;
142       position: absolute;
143       border-radius: 5px;
144       background-color: #FFFFFF;
145       top: 0; left: 0;
146     }
147     
148     span.jp-play-bar {
149       height: 100%;
150       position: absolute;
151       border-radius: 5px;
152       background-color: #006066;
153       top: 0; left: 0;
154     }
155   }
156 }
157
158
159
160
161 .c-player__title {
162   top: -27px;
163   left: 0;
164   position: absolute;
165   font-style: normal;
166   font-weight: normal;
167   font-size: 12px;
168   line-height: 140%;
169   letter-spacing: 0.05em;
170   color: #083F4D;
171 }
172
173
174 .c-player__info {
175   top: -27px;
176   left: 0;
177   position: absolute;
178   font-style: normal;
179   font-weight: normal;
180   font-size: 12px;
181   line-height: 140%;
182   letter-spacing: 0.05em;
183   color: #083F4D;
184 }
185
186 .c-player__chapters {
187   top: -27px;
188   right: 0;
189   position: absolute;
190   font-style: normal;
191   font-weight: normal;
192   font-size: 12px;
193   line-height: 140%;
194   letter-spacing: 0.05em;
195   color: #083F4D;
196   z-index: 1;
197
198   &.is-active {
199     > span {
200       &:after {
201         transform: rotate(180deg);
202       }
203     }
204     ul {
205       opacity: 1;
206       transform: none;
207       pointer-events: all;
208     }
209   }
210
211   > span {
212     display: flex;
213     align-items: center;
214     cursor: pointer;
215
216     &:after {
217       margin-left: 5px;
218       content: $icon-arrow-down;
219       font-family: '#{$icomoon-font-family}' !important;
220       transition: transform $ease-out 450ms;
221     }
222   }
223
224   ul {
225     width: 283px;
226     position: absolute;
227     background-color: #083F4D;
228     transform: translateY(-10px);
229     opacity: 0;
230     box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
231     transition: all $ease-out 450ms;
232     list-style-position: inside;
233     border-radius: 10px;
234     right: 0;
235     margin: 10px 0 0;
236     padding: 15px;
237     pointer-events: none;
238     li {
239       font-size: 12px;
240       line-height: 140%;
241       letter-spacing: 0.05em;
242       list-style-type: decimal;
243       margin: 5px 0;
244       color: white;
245
246       span {
247           display: none;
248       }
249       span.title {
250           display: inline;
251       }
252     }
253   }
254 }
255
256 .c-player__volume {
257   display: flex;
258   align-items: center;
259   justify-content: center;
260   margin-left: 40px;
261
262   .icon {
263     font-size: 21px;
264     color: #007880;
265     margin-right: 8px;
266     cursor: pointer;
267   }
268
269   .jp-volume-bar {
270     width: 100px;
271     border-radius: 5px;
272     height: 10px;
273     display: block;
274     background: white;
275   }
276   .jp-volume-bar-value {
277       display: block;
278       height: 10px;
279       border-radius: 5px;
280       background: #006066;
281   }
282 }
283
284
285 .c-player__length {
286   width: 100%;
287   display: block;
288   position: relative;
289
290   > span {
291     position: absolute;
292     padding-top: 10px;
293     font-style: normal;
294     font-weight: normal;
295     font-size: 12px;
296     line-height: 140%;
297     letter-spacing: 0.05em;
298     color: #083F4D;
299
300     &:nth-child(1) { left: 0; }
301     &:nth-child(2) { right: 0; }
302   }
303 }