@gcorevideo/player 2.21.4 → 2.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/assets/dvr-controls/dvr_controls.scss +7 -25
  2. package/assets/dvr-controls/index.ejs +2 -2
  3. package/assets/media-control/media-control.ejs +1 -1
  4. package/assets/media-control/media-control.scss +8 -3
  5. package/assets/media-control/width370.scss +1 -1
  6. package/assets/style/theme.scss +1 -1
  7. package/dist/core.js +1 -1
  8. package/dist/index.css +1441 -1446
  9. package/dist/index.js +82 -79
  10. package/dist/plugins/index.css +1189 -1194
  11. package/dist/plugins/index.js +81 -76
  12. package/lib/plugins/dvr-controls/DvrControls.d.ts +0 -3
  13. package/lib/plugins/dvr-controls/DvrControls.d.ts.map +1 -1
  14. package/lib/plugins/dvr-controls/DvrControls.js +13 -38
  15. package/lib/plugins/media-control/MediaControl.d.ts +10 -14
  16. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  17. package/lib/plugins/media-control/MediaControl.js +66 -38
  18. package/lib/testUtils.d.ts +4 -1
  19. package/lib/testUtils.d.ts.map +1 -1
  20. package/lib/testUtils.js +10 -11
  21. package/package.json +1 -1
  22. package/src/plugins/dvr-controls/DvrControls.ts +16 -44
  23. package/src/plugins/dvr-controls/__tests__/DvrControls.test.ts +23 -25
  24. package/src/plugins/dvr-controls/__tests__/__snapshots__/DvrControls.test.ts.snap +8 -32
  25. package/src/plugins/media-control/MediaControl.ts +91 -51
  26. package/src/plugins/media-control/__tests__/MediaControl.test.ts +89 -0
  27. package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +128 -0
  28. package/src/testUtils.ts +10 -11
  29. package/tsconfig.tsbuildinfo +1 -1
package/dist/plugins/index.css CHANGED
@@ -46,7 +46,7 @@
46
46
  }
47
47
 
48
48
  .gcore-skin-main-color {
49
- background-color: var(--theme-foreground-color) !important;
49
+ background-color: var(--theme-foreground-color);
50
50
  }
51
51
 
52
52
  .gcore-skin-border-color {
@@ -122,110 +122,110 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }*,
126
- :focus,
127
- :visited {
128
- outline: none !important;
125
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
126
+ order: 99;
127
+ height: 20px;
129
128
  }
130
-
131
- .media-control-audiotracks {
132
- position: relative;
129
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
130
+ position: absolute;
131
+ right: 16px;
132
+ bottom: 52px;
133
+ display: none;
134
+ width: 250px;
135
+ min-height: 48px;
136
+ z-index: 9999;
137
+ border-radius: 4px;
133
138
  }
134
- .media-control-audiotracks button {
135
- background-color: transparent;
136
- color: #fff;
137
- -webkit-font-smoothing: antialiased;
138
- border: none;
139
- cursor: pointer;
140
- display: flex;
141
- align-items: center;
142
- padding: 0;
139
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
140
+ padding: 8px 0;
143
141
  }
144
- .media-control-audiotracks button .audio-text {
145
- text-overflow: ellipsis;
146
- overflow: hidden;
147
- white-space: nowrap;
148
- max-width: 100px;
149
- background-color: transparent;
150
- -webkit-font-smoothing: antialiased;
151
- border: none;
152
- cursor: pointer;
142
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
143
+ float: left;
144
+ margin-right: 10px;
153
145
  }
154
- .media-control-audiotracks button:hover {
155
- color: white;
146
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
147
+ margin: 0;
148
+ text-align: left;
149
+ line-height: 22px;
150
+ padding: 5px 14px;
151
+ width: 250px;
152
+ font-size: 12px;
156
153
  }
157
- .media-control-audiotracks button.changing {
158
- animation: pulse 0.5s infinite alternate;
154
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
155
+ float: right;
156
+ margin-right: -14px;
159
157
  }
160
- .media-control-audiotracks button span.audio-arrow {
161
- width: 9px;
162
- height: 6px;
163
- margin-left: 5px;
158
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
159
+ float: right;
160
+ margin-right: 8px;
164
161
  }
165
- .media-control-audiotracks > ul {
166
- max-width: 114px;
162
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
163
+ height: 20px;
164
+ }*, :focus, :visited {
165
+ outline: none !important;
166
+ }
167
+
168
+ .gear-wrapper .go-back {
169
+ font-weight: 600;
170
+ font-size: 14px;
171
+ line-height: 20px;
172
+ width: 100%;
173
+ text-align: left;
174
+ padding: 12px;
175
+ }
176
+ .gear-wrapper .go-back .arrow-left-icon {
177
+ float: left;
178
+ padding-top: 2px;
179
+ padding-right: 2px;
180
+ }
181
+ .gear-wrapper .go-back .arrow-left-icon svg {
182
+ height: 16px;
183
+ }
184
+ .gear-wrapper ul.gear-sub-menu {
185
+ width: 100%;
167
186
  list-style-type: none;
168
- position: absolute;
169
- display: none;
170
- background-color: rgba(74, 74, 74, 0.6);
171
- border: none;
187
+ background-color: transparent;
172
188
  min-width: 60px;
173
- border-radius: 4px;
174
- bottom: 40px;
175
- right: -2px;
189
+ border-top: 2px solid rgb(36, 36, 36);
176
190
  }
177
- .media-control-audiotracks li {
178
- font-size: var(--font-size-media-controls-dropdown);
179
- text-align: right;
180
- height: 30px;
191
+ .gear-wrapper ul.gear-sub-menu li {
192
+ font-size: 12px;
193
+ text-align: left;
181
194
  }
182
- .media-control-audiotracks li[data-title] {
195
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
183
196
  background-color: #c3c2c2;
184
197
  padding: 5px;
185
198
  }
186
- .media-control-audiotracks li a {
199
+ .gear-wrapper ul.gear-sub-menu li a {
187
200
  display: block;
188
201
  text-decoration: none;
189
- text-overflow: ellipsis;
190
- overflow: hidden;
191
- white-space: nowrap;
192
- height: 30px;
202
+ height: 32px;
193
203
  padding: 5px 10px;
204
+ line-height: 22px;
194
205
  color: #fffffe;
195
206
  }
196
- .media-control-audiotracks li a:hover {
197
- text-decoration: none;
198
- background-color: rgba(0, 0, 0, 0.4);
207
+ .gear-wrapper ul.gear-sub-menu li a:hover {
199
208
  color: white;
209
+ background-color: rgba(0, 0, 0, 0.4);
200
210
  }
201
- .media-control-audiotracks li.current a {
202
- color: #f00;
211
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
212
+ color: white;
213
+ text-decoration: none;
203
214
  }
204
- .media-control-audiotracks li:first-child a {
205
- border-bottom-left-radius: 4px;
206
- border-bottom-right-radius: 4px;
215
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
216
+ width: 30px;
217
+ height: 20px;
218
+ float: left;
219
+ display: block;
207
220
  }
208
- .media-control-audiotracks li:last-child a {
209
- border-top-left-radius: 4px;
210
- border-top-right-radius: 4px;
221
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
222
+ display: none;
211
223
  }
212
-
213
- @keyframes pulse {
214
- 0% {
215
- color: #fff;
216
- }
217
- 50% {
218
- color: #ff0101;
219
- }
220
- 100% {
221
- color: #B80000;
222
- }
223
- }.clips.bar-container[data-seekbar] {
224
- clip-path: url("#myClip");
225
- }.dvr-controls[data-dvr-controls] {
224
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
225
+ display: inline;
226
+ }.dvr-controls[data-dvr] {
226
227
  display: inline-block;
227
- float: left;
228
- color: #fff;
228
+ color: var(--player-dvr-color);
229
229
  line-height: 32px;
230
230
  font-size: 10px;
231
231
  font-weight: bold;
@@ -234,12 +234,11 @@
234
234
  line-height: 40px;
235
235
  margin-left: 0;
236
236
  }
237
- .dvr-controls[data-dvr-controls] .live-info {
237
+ .dvr-controls[data-dvr] .live-info {
238
238
  cursor: default;
239
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
240
239
  text-transform: uppercase;
241
240
  }
242
- .dvr-controls[data-dvr-controls] .live-info:before {
241
+ .dvr-controls[data-dvr] .live-info:before {
243
242
  content: "";
244
243
  display: inline-block;
245
244
  position: relative;
@@ -247,29 +246,28 @@
247
246
  height: 7px;
248
247
  border-radius: 3.5px;
249
248
  margin-right: 3.5px;
250
- background-color: #ff0101;
249
+ background-color: var(--player-live-color);
251
250
  }
252
- .dvr-controls[data-dvr-controls] .live-info.disabled {
251
+ .dvr-controls[data-dvr] .live-info.disabled {
253
252
  opacity: 0.3;
254
253
  }
255
- .dvr-controls[data-dvr-controls] .live-info.disabled:before {
256
- background-color: #fff;
254
+ .dvr-controls[data-dvr] .live-info.disabled:before {
255
+ background-color: var(--player-dvr-color);
257
256
  }
258
- .dvr-controls[data-dvr-controls] .live-button {
257
+ .dvr-controls[data-dvr] .live-button {
259
258
  cursor: pointer;
260
259
  outline: none;
261
260
  display: none;
262
261
  border: 0;
263
- color: #fff;
262
+ color: var(--player-dvr-color);
264
263
  background-color: transparent;
265
264
  height: 32px;
266
265
  padding: 0;
267
266
  opacity: 0.7;
268
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
269
267
  text-transform: uppercase;
270
268
  transition: all 0.1s ease;
271
269
  }
272
- .dvr-controls[data-dvr-controls] .live-button:before {
270
+ .dvr-controls[data-dvr] .live-button:before {
273
271
  content: "";
274
272
  display: inline-block;
275
273
  position: relative;
@@ -277,27 +275,27 @@
277
275
  height: 7px;
278
276
  border-radius: 3.5px;
279
277
  margin-right: 3.5px;
280
- background-color: #fff;
278
+ background-color: var(--player-dvr-color);
281
279
  }
282
- .dvr-controls[data-dvr-controls] .live-button:hover {
280
+ .dvr-controls[data-dvr] .live-button:hover {
283
281
  opacity: 1;
284
282
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
285
283
  }
286
- .dvr-controls[data-dvr-controls] .live-info {
284
+ .dvr-controls[data-dvr] .live-info {
287
285
  font-size: 14px;
288
286
  letter-spacing: 0.8px;
289
287
  font-weight: 500;
290
288
  color: #fffffe;
291
289
  margin-left: 21px;
292
290
  }
293
- .dvr-controls[data-dvr-controls] .live-info::before {
291
+ .dvr-controls[data-dvr] .live-info::before {
294
292
  width: 10px;
295
293
  height: 10px;
296
294
  border-radius: 50%;
297
295
  margin-right: 8px;
298
296
  background-color: #ed4f4a;
299
297
  }
300
- .dvr-controls[data-dvr-controls] .live-button {
298
+ .dvr-controls[data-dvr] .live-button {
301
299
  height: 40px;
302
300
  opacity: 1;
303
301
  font-size: 14px;
@@ -305,7 +303,7 @@
305
303
  font-weight: 500;
306
304
  margin-left: 20px;
307
305
  }
308
- .dvr-controls[data-dvr-controls] .live-button::before {
306
+ .dvr-controls[data-dvr] .live-button::before {
309
307
  width: 10px;
310
308
  height: 10px;
311
309
  border-radius: 50%;
@@ -313,277 +311,230 @@
313
311
  background-color: #cacaca;
314
312
  }
315
313
 
316
- .dvr .dvr-controls[data-dvr-controls] .live-info {
314
+ .dvr .dvr-controls[data-dvr] .live-info {
317
315
  display: none;
318
316
  }
319
- .dvr .dvr-controls[data-dvr-controls] .live-button {
317
+ .dvr .dvr-controls[data-dvr] .live-button {
320
318
  display: block;
321
- }
322
- .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
323
- background-color: #005aff;
319
+ }*,
320
+ :focus,
321
+ :visited {
322
+ outline: none !important;
324
323
  }
325
324
 
326
- .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
327
- background-color: #ff0101;
328
- }.big-mute-icon-wrapper[data-big-mute] {
329
- position: absolute;
330
- z-index: 9998;
331
- background-color: transparent;
332
- display: flex;
333
- justify-content: center;
334
- width: 100%;
335
- height: calc(100% - 50px);
336
- margin: 0 auto;
337
- opacity: 0.75;
338
- transition: opacity 0.1s ease;
339
- pointer-events: auto;
340
- }
341
- .big-mute-icon-wrapper[data-big-mute].hide {
342
- display: none;
325
+ .media-control-audiotracks {
326
+ position: relative;
343
327
  }
344
- .big-mute-icon-wrapper[data-big-mute]:hover {
328
+ .media-control-audiotracks button {
329
+ background-color: transparent;
330
+ color: #fff;
331
+ -webkit-font-smoothing: antialiased;
332
+ border: none;
345
333
  cursor: pointer;
346
- }
347
-
348
- .big-mute-icon[data-big-mute-icon] {
349
334
  display: flex;
350
335
  align-items: center;
351
- justify-content: center;
352
- align-self: center;
353
- width: 120px;
354
- height: 120px;
355
- border: 2px solid white;
356
- border-radius: 50%;
357
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
358
- filter: alpha(opacity=60);
359
- opacity: 1;
360
- box-shadow: 0 0 1px 0 white;
361
- background: rgba(240, 243, 247, 0.9411764706);
362
- z-index: 10000;
336
+ padding: 0;
363
337
  }
364
- .big-mute-icon[data-big-mute-icon] svg {
365
- margin-left: 5px;
366
- width: 80px;
367
- height: 80px;
338
+ .media-control-audiotracks button .audio-text {
339
+ text-overflow: ellipsis;
340
+ overflow: hidden;
341
+ white-space: nowrap;
342
+ max-width: 100px;
343
+ background-color: transparent;
344
+ -webkit-font-smoothing: antialiased;
345
+ border: none;
346
+ cursor: pointer;
368
347
  }
369
- .big-mute-icon[data-big-mute-icon] svg path {
370
- fill: #1f1e1e !important;
348
+ .media-control-audiotracks button:hover {
349
+ color: white;
371
350
  }
372
- .big-mute-icon[data-big-mute-icon]:hover {
373
- background: rgba(240, 243, 247, 0.8784313725);
351
+ .media-control-audiotracks button.changing {
352
+ animation: pulse 0.5s infinite alternate;
374
353
  }
375
- .big-mute-icon[data-big-mute-icon]:hover svg path {
376
- fill: #151515 !important;
377
- }.context-menu {
378
- z-index: 999;
379
- position: absolute;
380
- top: 0;
381
- left: 0;
382
- text-align: center;
354
+ .media-control-audiotracks button span.audio-arrow {
355
+ width: 9px;
356
+ height: 6px;
357
+ margin-left: 5px;
383
358
  }
384
- .context-menu .context-menu-list {
385
- font-family: "Proxima Nova", sans-serif;
386
- font-size: 12px;
387
- line-height: 12px;
359
+ .media-control-audiotracks > ul {
360
+ max-width: 114px;
388
361
  list-style-type: none;
389
- text-align: left;
390
- padding: 5px;
391
- margin-left: auto;
392
- margin-right: auto;
393
- background-color: rgba(0, 0, 0, 0.75);
394
- border: 1px solid #666;
362
+ position: absolute;
363
+ display: none;
364
+ background-color: rgba(74, 74, 74, 0.6);
365
+ border: none;
366
+ min-width: 60px;
395
367
  border-radius: 4px;
368
+ bottom: 40px;
369
+ right: -2px;
396
370
  }
397
- .context-menu .context-menu-list .context-menu-list-item {
398
- color: white;
399
- padding: 5px;
400
- cursor: pointer;
401
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
402
- order: 99;
403
- height: 20px;
371
+ .media-control-audiotracks li {
372
+ font-size: var(--font-size-media-controls-dropdown);
373
+ text-align: right;
374
+ height: 30px;
404
375
  }
405
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
406
- position: absolute;
407
- right: 16px;
408
- bottom: 52px;
409
- display: none;
410
- width: 250px;
411
- min-height: 48px;
412
- z-index: 9999;
413
- border-radius: 4px;
376
+ .media-control-audiotracks li[data-title] {
377
+ background-color: #c3c2c2;
378
+ padding: 5px;
414
379
  }
415
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
416
- padding: 8px 0;
380
+ .media-control-audiotracks li a {
381
+ display: block;
382
+ text-decoration: none;
383
+ text-overflow: ellipsis;
384
+ overflow: hidden;
385
+ white-space: nowrap;
386
+ height: 30px;
387
+ padding: 5px 10px;
388
+ color: #fffffe;
417
389
  }
418
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
419
- float: left;
420
- margin-right: 10px;
390
+ .media-control-audiotracks li a:hover {
391
+ text-decoration: none;
392
+ background-color: rgba(0, 0, 0, 0.4);
393
+ color: white;
421
394
  }
422
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
423
- margin: 0;
424
- text-align: left;
425
- line-height: 22px;
426
- padding: 5px 14px;
427
- width: 250px;
428
- font-size: 12px;
395
+ .media-control-audiotracks li.current a {
396
+ color: #f00;
429
397
  }
430
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
431
- float: right;
432
- margin-right: -14px;
398
+ .media-control-audiotracks li:first-child a {
399
+ border-bottom-left-radius: 4px;
400
+ border-bottom-right-radius: 4px;
433
401
  }
434
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
435
- float: right;
436
- margin-right: 8px;
402
+ .media-control-audiotracks li:last-child a {
403
+ border-top-left-radius: 4px;
404
+ border-top-right-radius: 4px;
437
405
  }
438
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
439
- height: 20px;
440
- }*, :focus, :visited {
406
+
407
+ @keyframes pulse {
408
+ 0% {
409
+ color: #fff;
410
+ }
411
+ 50% {
412
+ color: #ff0101;
413
+ }
414
+ 100% {
415
+ color: #B80000;
416
+ }
417
+ }*,
418
+ :focus,
419
+ :visited {
441
420
  outline: none !important;
442
421
  }
443
422
 
444
- .gear-wrapper .go-back {
445
- font-weight: 600;
446
- font-size: 14px;
447
- line-height: 20px;
448
- width: 100%;
449
- text-align: left;
450
- padding: 12px;
423
+ .media-control-cc[data-cc] {
424
+ position: relative;
425
+ order: 85;
451
426
  }
452
- .gear-wrapper .go-back .arrow-left-icon {
453
- float: left;
454
- padding-top: 2px;
455
- padding-right: 2px;
427
+ .media-control-cc[data-cc] button {
428
+ background-color: transparent;
429
+ color: #fff;
430
+ -webkit-font-smoothing: antialiased;
431
+ border: none;
432
+ cursor: pointer;
456
433
  }
457
- .gear-wrapper .go-back .arrow-left-icon svg {
458
- height: 16px;
434
+ .media-control-cc[data-cc] button .cc-text svg {
435
+ fill: white;
459
436
  }
460
- .gear-wrapper ul.gear-sub-menu {
461
- width: 100%;
462
- list-style-type: none;
463
- background-color: transparent;
464
- min-width: 60px;
465
- border-top: 2px solid rgb(36, 36, 36);
437
+ .media-control-cc[data-cc] button:hover {
438
+ color: #c9c9c9;
466
439
  }
467
- .gear-wrapper ul.gear-sub-menu li {
468
- font-size: 12px;
469
- text-align: left;
440
+ .media-control-cc[data-cc] button.changing {
441
+ animation: pulse 0.5s infinite alternate;
470
442
  }
471
- .gear-wrapper ul.gear-sub-menu li[data-title] {
472
- background-color: #c3c2c2;
473
- padding: 5px;
443
+ .media-control-cc[data-cc] ul {
444
+ width: 80px;
445
+ list-style-type: none;
446
+ position: absolute;
447
+ bottom: 25px;
448
+ border: 1px solid black;
449
+ display: none;
450
+ background-color: #e6e6e6;
451
+ padding: 8px 0;
474
452
  }
475
- .gear-wrapper ul.gear-sub-menu li a {
453
+ .media-control-cc[data-cc] li a {
454
+ color: #444;
455
+ padding: 2px 10px;
476
456
  display: block;
477
457
  text-decoration: none;
478
- height: 32px;
479
- padding: 5px 10px;
480
- line-height: 22px;
481
- color: #fffffe;
482
458
  }
483
- .gear-wrapper ul.gear-sub-menu li a:hover {
459
+ .media-control-cc[data-cc] li a:hover {
460
+ background-color: #555;
484
461
  color: white;
485
- background-color: rgba(0, 0, 0, 0.4);
486
462
  }
487
- .gear-wrapper ul.gear-sub-menu li a:hover a {
463
+ .media-control-cc[data-cc] li a:hover a {
488
464
  color: white;
489
465
  text-decoration: none;
490
466
  }
491
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
492
- width: 30px;
493
- height: 20px;
494
- float: left;
495
- display: block;
467
+ .media-control-cc[data-cc] li.current a {
468
+ color: #f00;
469
+ background-color: #555;
496
470
  }
497
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
498
- display: none;
471
+
472
+ @keyframes pulse {
473
+ 0% {
474
+ color: #fff;
475
+ }
476
+ 50% {
477
+ color: #ff0101;
478
+ }
479
+ 100% {
480
+ color: #B80000;
481
+ }
499
482
  }
500
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
501
- display: inline;
502
- }div.player-error-screen, [data-player] div.player-error-screen {
503
- color: #CCCACA;
483
+ ::cue {
484
+ visibility: hidden !important;
485
+ font-size: 0 !important;
486
+ }
487
+
488
+ .ios-fullscreen::cue {
489
+ visibility: visible !important;
490
+ font-size: 1em !important;
491
+ }.seek-time[data-seek-time] {
504
492
  position: absolute;
505
- top: 0;
506
- height: 100%;
507
- width: 100%;
508
- background-color: rgba(0, 0, 0, 0.7);
509
- z-index: 2000;
510
- display: flex;
511
- flex-direction: column;
512
- justify-content: center;
493
+ white-space: nowrap;
494
+ height: 20px;
495
+ line-height: 20px;
496
+ font-size: 0;
497
+ left: -100%;
498
+ bottom: 55px;
499
+ background-color: rgba(2, 2, 2, 0.5);
500
+ z-index: 9999;
501
+ transition: opacity 0.1s ease;
513
502
  }
514
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
515
- font-size: 14px;
516
- color: #CCCACA;
517
- margin-top: 45px;
503
+ .seek-time[data-seek-time].hidden[data-seek-time] {
504
+ opacity: 0;
518
505
  }
519
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
520
- font-weight: bold;
521
- line-height: 30px;
522
- font-size: 18px;
506
+ .seek-time[data-seek-time] [data-seek-time] {
507
+ display: inline-block;
508
+ color: white;
509
+ font-size: 10px;
510
+ padding-left: 7px;
511
+ padding-right: 7px;
512
+ vertical-align: top;
523
513
  }
524
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
525
- width: 90%;
526
- margin: 0 auto;
514
+ .seek-time[data-seek-time] [data-duration] {
515
+ display: inline-block;
516
+ color: rgba(255, 255, 255, 0.5);
517
+ font-size: 10px;
518
+ padding-right: 7px;
519
+ vertical-align: top;
527
520
  }
528
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
529
- font-size: 13px;
530
- margin-top: 15px;
521
+ .seek-time[data-seek-time] [data-duration]::before {
522
+ content: "|";
523
+ margin-right: 7px;
524
+ }:root {
525
+ --primary-background-color: #000;
526
+ --secondary-background-color: #262626;
527
+ --primary-text-color: #fff;
528
+ --secondary-text-color: #fff4f2;
529
+ --hover-text-color: #f9b090;
530
+ --speedtest-red: #df564d;
531
+ --speedtest-orange: #df934d;
532
+ --speedtest-yellow: #dfd04d;
533
+ --speedtest-light-green: #c2df4d;
534
+ --speedtest-green: #73df4d;
531
535
  }
532
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
533
- cursor: pointer;
534
- width: 30px;
535
- margin: 15px auto 0;
536
- }.player-poster[data-poster] {
537
- display: flex;
538
- justify-content: center;
539
- align-items: center;
540
- position: absolute;
541
- height: 100%;
542
- width: 100%;
543
- z-index: 998;
544
- top: 0;
545
- left: 0;
546
- background-color: #000;
547
- background-size: cover;
548
- background-repeat: no-repeat;
549
- background-position: 50% 50%;
550
- }
551
- .player-poster[data-poster].clickable {
552
- cursor: pointer;
553
- }
554
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
555
- opacity: 1;
556
- }
557
- .player-poster[data-poster] .play-wrapper[data-poster] {
558
- width: 100%;
559
- height: 25%;
560
- margin: 0 auto;
561
- opacity: 0.75;
562
- transition: opacity 0.1s ease;
563
- }
564
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
565
- height: 100%;
566
- display: inline;
567
- }
568
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
569
- fill: #fff;
570
- }.level-disabled {
571
- opacity: 0.5;
572
- pointer-events: none;
573
- }:root {
574
- --primary-background-color: #000;
575
- --secondary-background-color: #262626;
576
- --primary-text-color: #fff;
577
- --secondary-text-color: #fff4f2;
578
- --hover-text-color: #f9b090;
579
- --speedtest-red: #df564d;
580
- --speedtest-orange: #df934d;
581
- --speedtest-yellow: #dfd04d;
582
- --speedtest-light-green: #c2df4d;
583
- --speedtest-green: #73df4d;
584
- }
585
-
586
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box {
536
+
537
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box {
587
538
  position: absolute;
588
539
  display: inline-block;
589
540
  bottom: 52px;
@@ -952,36 +903,112 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
952
903
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
953
904
  width: 25%;
954
905
  }
955
- }[data-player] {
956
- --bottom-panel: 40px;
906
+ }.clips.bar-container[data-seekbar] {
907
+ clip-path: url("#myClip");
908
+ }div.player-error-screen, [data-player] div.player-error-screen {
909
+ color: #CCCACA;
910
+ position: absolute;
911
+ top: 0;
912
+ height: 100%;
913
+ width: 100%;
914
+ background-color: rgba(0, 0, 0, 0.7);
915
+ z-index: 2000;
916
+ display: flex;
917
+ flex-direction: column;
918
+ justify-content: center;
957
919
  }
958
-
959
- .container .media-control-notransition {
960
- transition: none !important;
920
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
921
+ font-size: 14px;
922
+ color: #CCCACA;
923
+ margin-top: 45px;
961
924
  }
962
- .container .player-poster[data-poster] .play-wrapper[data-poster] {
963
- opacity: 1;
925
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
926
+ font-weight: bold;
927
+ line-height: 30px;
928
+ font-size: 18px;
964
929
  }
965
- .container.crop-video [data-html5-video] {
966
- object-fit: cover;
930
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
931
+ width: 90%;
932
+ margin: 0 auto;
967
933
  }
968
- .container .cc-line {
934
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
935
+ font-size: 13px;
936
+ margin-top: 15px;
937
+ }
938
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
939
+ cursor: pointer;
940
+ width: 30px;
941
+ margin: 15px auto 0;
942
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
943
+ height: 0;
944
+ }
945
+
946
+ .skip_time_plugin[data-skip-time] {
969
947
  position: absolute;
970
- bottom: calc(var(--bottom-panel) + 5px);
971
948
  width: 100%;
949
+ height: calc(100% - 50px);
950
+ z-index: 9998;
951
+ background-color: transparent;
952
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
972
953
  }
973
- .container .cc-line p {
974
- width: auto;
975
- background-color: rgba(0, 0, 0, 0.4);
976
- color: white;
977
- display: inline-block;
954
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
955
+ width: 100%;
956
+ height: 100%;
957
+ display: flex;
958
+ justify-content: space-between;
978
959
  }
979
- .container .circle-poster[data-poster] {
980
- top: 50%;
981
- margin-top: -60px;
982
- left: 50%;
983
- margin-left: -60px;
960
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
961
+ width: 33.3%;
962
+ height: 100%;
963
+ }.context-menu {
964
+ z-index: 999;
965
+ position: absolute;
966
+ top: 0;
967
+ left: 0;
968
+ text-align: center;
969
+ }
970
+ .context-menu .context-menu-list {
971
+ font-family: "Proxima Nova", sans-serif;
972
+ font-size: 12px;
973
+ line-height: 12px;
974
+ list-style-type: none;
975
+ text-align: left;
976
+ padding: 5px;
977
+ margin-left: auto;
978
+ margin-right: auto;
979
+ background-color: rgba(0, 0, 0, 0.75);
980
+ border: 1px solid #666;
981
+ border-radius: 4px;
982
+ }
983
+ .context-menu .context-menu-list .context-menu-list-item {
984
+ color: white;
985
+ padding: 5px;
986
+ cursor: pointer;
987
+ }.big-mute-icon-wrapper[data-big-mute] {
984
988
  position: absolute;
989
+ z-index: 9998;
990
+ background-color: transparent;
991
+ display: flex;
992
+ justify-content: center;
993
+ width: 100%;
994
+ height: calc(100% - 50px);
995
+ margin: 0 auto;
996
+ opacity: 0.75;
997
+ transition: opacity 0.1s ease;
998
+ pointer-events: auto;
999
+ }
1000
+ .big-mute-icon-wrapper[data-big-mute].hide {
1001
+ display: none;
1002
+ }
1003
+ .big-mute-icon-wrapper[data-big-mute]:hover {
1004
+ cursor: pointer;
1005
+ }
1006
+
1007
+ .big-mute-icon[data-big-mute-icon] {
1008
+ display: flex;
1009
+ align-items: center;
1010
+ justify-content: center;
1011
+ align-self: center;
985
1012
  width: 120px;
986
1013
  height: 120px;
987
1014
  border: 2px solid white;
@@ -990,1046 +1017,1035 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
990
1017
  filter: alpha(opacity=60);
991
1018
  opacity: 1;
992
1019
  box-shadow: 0 0 1px 0 white;
1020
+ background: rgba(240, 243, 247, 0.9411764706);
1021
+ z-index: 10000;
993
1022
  }
994
- .container .circle-poster[data-poster] svg {
1023
+ .big-mute-icon[data-big-mute-icon] svg {
995
1024
  margin-left: 5px;
996
1025
  width: 80px;
997
1026
  height: 80px;
998
1027
  }
999
- .container .spinner-three-bounce[data-spinner] > div {
1000
- background-color: #ff5700;
1028
+ .big-mute-icon[data-big-mute-icon] svg path {
1029
+ fill: #1f1e1e !important;
1030
+ }
1031
+ .big-mute-icon[data-big-mute-icon]:hover {
1032
+ background: rgba(240, 243, 247, 0.8784313725);
1033
+ }
1034
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
1035
+ fill: #151515 !important;
1036
+ }.level-disabled {
1037
+ opacity: 0.5;
1038
+ pointer-events: none;
1039
+ }*, :focus, :visited {
1040
+ outline: none !important;
1001
1041
  }
1002
1042
 
1003
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
1004
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audiotracks {
1005
- display: none;
1043
+ .multicamera[data-multicamera] {
1044
+ float: right;
1045
+ margin-top: 4px;
1046
+ position: relative;
1047
+ margin-right: 20px;
1048
+ width: 20px;
1006
1049
  }
1007
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1008
- transform: rotate(270deg);
1009
- float: none;
1010
- display: block;
1011
- position: absolute;
1012
- /* bottom: 12px; */
1013
- margin: 0;
1014
- top: -40px;
1050
+ .multicamera[data-multicamera] button {
1051
+ background-color: transparent;
1052
+ color: #fff;
1053
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1054
+ -webkit-font-smoothing: antialiased;
1055
+ border: none;
1056
+ font-size: 14px;
1015
1057
  padding: 0;
1016
- /* right: 20px; */
1017
- margin-left: -32px;
1018
- margin-top: -3px;
1019
- width: 80px;
1020
- /* padding-left: 12px; */
1021
1058
  }
1022
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
1023
- position: absolute;
1024
- width: 100%;
1025
- height: 100%;
1026
- left: -5px;
1059
+ .multicamera[data-multicamera] button svg {
1060
+ height: 20px;
1061
+ position: relative;
1062
+ margin-top: 6px;
1027
1063
  }
1028
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1029
- display: none;
1064
+ .multicamera[data-multicamera] button:hover {
1065
+ color: #c9c9c9;
1030
1066
  }
1031
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
1032
- margin-left: 11px;
1033
- top: 7px;
1034
- width: 80px;
1067
+ .multicamera[data-multicamera] button.changing {
1068
+ animation: pulse 0.5s infinite alternate;
1035
1069
  }
1036
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
1037
- margin-left: 11px;
1038
- top: 1px;
1070
+ .multicamera[data-multicamera] button span.quality-arrow {
1071
+ width: 9px;
1072
+ height: 6px;
1073
+ margin-top: 11px;
1074
+ margin-left: 5px;
1039
1075
  }
1040
-
1041
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc {
1042
- width: 28px;
1076
+ .multicamera[data-multicamera] > ul {
1077
+ padding: 6px 0;
1078
+ right: -24px;
1079
+ width: 245px;
1080
+ list-style-type: none;
1081
+ position: absolute;
1082
+ bottom: 48px;
1083
+ border-radius: 4px;
1084
+ display: none;
1085
+ background-color: rgba(74, 74, 74, 0.9);
1043
1086
  }
1044
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc svg {
1045
- height: 17px;
1087
+ .multicamera[data-multicamera] > ul::after {
1088
+ content: "";
1089
+ position: absolute;
1090
+ top: 100%;
1091
+ left: 85%;
1092
+ margin-left: -10px;
1093
+ width: 0;
1094
+ height: 0;
1095
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1096
+ border-right: 10px solid transparent;
1097
+ border-left: 10px solid transparent;
1046
1098
  }
1047
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
1048
- top: calc(50% - 150px);
1049
- left: calc(50% - 125px);
1050
- width: 250px;
1051
- height: calc(100% - 32px);
1052
- max-height: 300px;
1053
- transform: none;
1099
+ .multicamera[data-multicamera] li {
1100
+ font-size: 10px;
1101
+ cursor: pointer;
1054
1102
  }
1055
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
1056
- border: none;
1103
+ .multicamera[data-multicamera] li .multicamera-item {
1104
+ display: flex;
1105
+ padding: 10px 0;
1106
+ justify-content: center;
1107
+ position: relative;
1057
1108
  }
1058
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1059
- visibility: hidden;
1109
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1110
+ pointer-events: none;
1060
1111
  }
1061
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
1062
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks {
1063
- display: block;
1112
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1113
+ opacity: 0.5;
1064
1114
  }
1065
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector],
1066
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] {
1067
- margin-top: 3px;
1068
- margin-right: 10px;
1115
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1116
+ opacity: 0.5;
1069
1117
  }
1070
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul,
1071
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul {
1072
- bottom: 30px;
1073
- width: 50px;
1118
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1119
+ background-color: rgba(0, 0, 0, 0);
1074
1120
  }
1075
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li,
1076
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li {
1077
- height: 23px;
1078
- font-size: 14px;
1121
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1122
+ background-color: rgba(0, 0, 0, 0.3);
1079
1123
  }
1080
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li a,
1081
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li a {
1082
- height: 23px;
1083
- padding: 2px 5px;
1124
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1125
+ width: 80px;
1126
+ height: 60px;
1084
1127
  }
1085
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .quality-text,
1086
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .audio-text,
1087
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .quality-text,
1088
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .audio-text,
1089
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .quality-text,
1090
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .audio-text,
1091
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,
1092
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {
1093
- font-size: 13px;
1128
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1129
+ width: 80px;
1130
+ height: 60px;
1094
1131
  }
1095
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
1096
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
1097
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.quality-arrow,
1098
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.audio-arrow,
1099
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.quality-arrow,
1100
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.audio-arrow,
1101
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,
1102
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {
1103
- width: 7px;
1104
- height: 5px;
1105
- margin-left: 4px;
1106
- margin-top: 11px;
1132
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1133
+ width: 120px;
1134
+ text-align: left;
1135
+ margin-left: 15px;
1107
1136
  }
1108
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
1109
- margin-top: 0;
1110
- margin-right: 10px;
1137
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1138
+ width: 120px;
1139
+ height: 20px;
1140
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1141
+ font-size: 14px;
1142
+ font-weight: normal;
1143
+ font-style: normal;
1144
+ font-stretch: normal;
1145
+ line-height: 1.43;
1146
+ letter-spacing: normal;
1147
+ text-align: left;
1148
+ color: #fff;
1149
+ text-overflow: ellipsis;
1150
+ overflow: hidden;
1111
1151
  }
1112
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
1113
- height: 32px;
1152
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1153
+ opacity: 0.6;
1114
1154
  }
1115
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
1116
- height: 17px;
1117
- margin: 0;
1155
+ .multicamera[data-multicamera] li[data-title] {
1156
+ background-color: #c3c2c2;
1157
+ padding: 5px;
1118
1158
  }
1119
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
1120
- padding-left: 10px;
1121
- padding-right: 12px;
1159
+ .multicamera[data-multicamera] li a {
1160
+ color: #444;
1161
+ padding: 2px 10px;
1162
+ display: block;
1163
+ text-decoration: none;
1122
1164
  }
1123
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
1124
- line-height: 32px;
1165
+ .multicamera[data-multicamera] li a:hover {
1166
+ background-color: #555;
1167
+ color: white;
1125
1168
  }
1126
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1127
- font-size: 11px;
1128
- line-height: 32px;
1169
+ .multicamera[data-multicamera] li a:hover a {
1170
+ color: white;
1171
+ text-decoration: none;
1129
1172
  }
1130
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] {
1131
- height: 32px;
1173
+ .multicamera[data-multicamera] li.current a {
1174
+ color: #f00;
1132
1175
  }
1133
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button {
1134
- margin-left: 10px;
1135
- height: 32px;
1136
- font-size: 12px;
1137
- line-height: 32px;
1138
- text-shadow: none;
1139
- letter-spacing: 0.6px;
1176
+
1177
+ @keyframes pulse {
1178
+ 0% {
1179
+ color: #fff;
1180
+ }
1181
+ 50% {
1182
+ color: #ff0101;
1183
+ }
1184
+ 100% {
1185
+ color: #B80000;
1186
+ }
1187
+ }.share_plugin[data-share] {
1188
+ pointer-events: auto;
1189
+ z-index: 5;
1190
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1140
1191
  }
1141
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button::before {
1142
- width: 8px;
1143
- height: 8px;
1144
- margin-right: 4px;
1192
+ .share_plugin[data-share].share-hide .share-button-container {
1193
+ right: -50px;
1145
1194
  }
1146
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info {
1147
- margin-left: 10px;
1148
- height: 32px;
1149
- font-size: 12px;
1150
- line-height: 32px;
1151
- text-shadow: none;
1152
- letter-spacing: 0.6px;
1195
+ .share_plugin[data-share] .share-button-container {
1196
+ cursor: pointer;
1197
+ width: 36px;
1198
+ height: 36px;
1199
+ background-color: rgba(74, 74, 74, 0.6);
1200
+ border-radius: 4px;
1201
+ position: absolute;
1202
+ right: 10px;
1203
+ top: 10px;
1204
+ padding-top: 6px;
1205
+ transition: all 0.3s ease-out;
1153
1206
  }
1154
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info::before {
1155
- width: 8px;
1156
- height: 8px;
1157
- margin-right: 4px;
1207
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1208
+ background-color: transparent;
1209
+ border: 0;
1210
+ margin: 0 6px;
1211
+ padding: 0;
1212
+ cursor: pointer;
1213
+ display: inline-block;
1214
+ width: 19px;
1215
+ height: 20px;
1158
1216
  }
1159
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
1160
- height: 32px;
1217
+ .share_plugin[data-share] .share-container {
1218
+ pointer-events: auto;
1219
+ position: absolute;
1220
+ width: 280px;
1221
+ background-color: white;
1222
+ transform: translate(0, 50%);
1223
+ transform: translate(-50%, -50%);
1224
+ left: 50%;
1225
+ /* margin-left: -140px; */
1226
+ top: calc(50% - 20px);
1227
+ /* margin-top: -170px; */
1161
1228
  }
1162
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1163
- height: 33px;
1229
+ .share_plugin[data-share] .share-container .share-container-header {
1230
+ text-align: left;
1231
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1164
1232
  }
1165
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
1166
- height: 17px;
1233
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1234
+ display: inline-block;
1235
+ font-size: 16px;
1236
+ margin: 5px;
1167
1237
  }
1168
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1169
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1170
- line-height: 33px;
1171
- font-size: 11px;
1238
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1239
+ display: inline-block;
1240
+ width: 24px;
1241
+ float: right;
1242
+ margin: 5px;
1243
+ cursor: pointer;
1172
1244
  }
1173
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1174
- max-width: calc(80% - 210px);
1245
+ .share_plugin[data-share] .share-container .share-container-main {
1246
+ margin-bottom: 8px;
1175
1247
  }
1176
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
1177
- height: 32px;
1178
- margin-right: 8px;
1248
+ .share_plugin[data-share] .share-container .share-container-main > div {
1249
+ text-align: left;
1250
+ font-size: 14px;
1251
+ padding: 5px;
1179
1252
  }
1180
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1181
- height: 32px;
1253
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--link, .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1254
+ overflow: hidden;
1255
+ text-overflow: ellipsis;
1256
+ color: #818181;
1257
+ border: solid 1px #d3d3d3;
1258
+ width: calc(100% - 10px);
1259
+ padding: 5px;
1182
1260
  }
1183
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1184
- height: 17px;
1185
- margin-top: 5px;
1261
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1262
+ max-height: 90px;
1263
+ resize: none;
1186
1264
  }
1187
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1188
- display: none;
1265
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1266
+ width: 32px;
1267
+ display: inline-block;
1268
+ margin-right: 5px;
1269
+ cursor: pointer;
1270
+ }.player-poster[data-poster] {
1271
+ display: flex;
1272
+ justify-content: center;
1273
+ align-items: center;
1274
+ position: absolute;
1275
+ height: 100%;
1276
+ width: 100%;
1277
+ z-index: 998;
1278
+ top: 0;
1279
+ left: 0;
1280
+ background-color: #000;
1281
+ background-size: cover;
1282
+ background-repeat: no-repeat;
1283
+ background-position: 50% 50%;
1189
1284
  }
1190
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1191
- width: 0;
1192
- height: 12px;
1193
- top: 9px;
1194
- padding: 0;
1285
+ .player-poster[data-poster].clickable {
1286
+ cursor: pointer;
1287
+ }
1288
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1289
+ opacity: 1;
1290
+ }
1291
+ .player-poster[data-poster] .play-wrapper[data-poster] {
1292
+ width: 100%;
1293
+ height: 25%;
1294
+ margin: 0 auto;
1295
+ opacity: 0.75;
1296
+ transition: opacity 0.1s ease;
1195
1297
  }
1196
-
1197
- :root {
1198
- --font-size-media-controls: 14px;
1199
- --font-size-media-controls-dropdown: 16px;
1298
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
1299
+ height: 100%;
1300
+ display: inline;
1200
1301
  }
1201
-
1202
- .media-control-skin-1[data-media-control-skin-1] {
1302
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1303
+ fill: #fff;
1304
+ }.scrub-thumbnails {
1203
1305
  position: absolute;
1306
+ bottom: 52px;
1204
1307
  width: 100%;
1205
- height: 100%;
1206
- z-index: 9999;
1207
- pointer-events: none;
1208
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1209
- font-size: var(--font-size-media-controls);
1308
+ transition: opacity 0.3s ease;
1210
1309
  }
1211
- .media-control-skin-1[data-media-control-skin-1].dragging {
1212
- pointer-events: auto;
1213
- cursor: grabbing !important;
1214
- cursor: url("closed-hand.cur"), move;
1310
+ .scrub-thumbnails.hidden {
1311
+ opacity: 0;
1215
1312
  }
1216
- .media-control-skin-1[data-media-control-skin-1].dragging * {
1217
- cursor: grabbing !important;
1218
- cursor: url("closed-hand.cur"), move;
1313
+ .scrub-thumbnails .thumbnail-container {
1314
+ display: inline-block;
1315
+ position: relative;
1316
+ overflow: hidden;
1317
+ background-color: #000;
1219
1318
  }
1220
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1221
- line-height: 0;
1222
- letter-spacing: 0;
1223
- speak: none;
1224
- color: #fff;
1225
- vertical-align: middle;
1226
- text-align: left;
1227
- transition: all 0.1s ease;
1319
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
1320
+ position: absolute;
1321
+ width: auto;
1228
1322
  }
1229
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1323
+ .scrub-thumbnails .thumbnails-text {
1324
+ background-color: rgba(74, 74, 74, 0.7);
1325
+ border-radius: 3px;
1326
+ white-space: nowrap;
1327
+ overflow: hidden;
1328
+ text-overflow: ellipsis;
1230
1329
  color: white;
1330
+ position: absolute;
1331
+ bottom: 23px;
1332
+ width: 100px;
1231
1333
  }
1232
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1233
- opacity: 0;
1234
- }
1235
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1236
- bottom: -50px;
1334
+ .scrub-thumbnails .spotlight {
1335
+ background-color: #4a4a4a;
1336
+ overflow: hidden;
1337
+ position: absolute;
1338
+ bottom: 0;
1339
+ left: 0;
1340
+ border-color: #4a4a4a;
1341
+ border-style: solid;
1342
+ border-width: 3px;
1343
+ border-radius: 3px;
1237
1344
  }
1238
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1239
- opacity: 0;
1345
+ .scrub-thumbnails .spotlight img {
1346
+ width: auto;
1240
1347
  }
1241
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1348
+ .scrub-thumbnails .backdrop {
1242
1349
  position: absolute;
1350
+ left: 0;
1243
1351
  bottom: 0;
1244
- width: 100%;
1245
- padding: 0 12px 0 8px;
1246
- height: var(--bottom-panel);
1247
- vertical-align: middle;
1248
- pointer-events: auto;
1249
- transition: bottom 0.4s ease-out;
1250
- display: flex;
1251
- justify-content: space-between;
1252
- }
1253
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel {
1254
- display: flex;
1255
- align-items: center;
1256
- gap: 0.5rem;
1257
- justify-content: flex-start;
1352
+ right: 0;
1353
+ background-color: #000;
1354
+ overflow: hidden;
1258
1355
  }
1259
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel {
1356
+ .scrub-thumbnails .backdrop .carousel {
1357
+ position: absolute;
1358
+ top: 0;
1359
+ left: 0;
1260
1360
  height: 100%;
1261
- text-align: center;
1262
- line-height: var(--bottom-panel);
1361
+ white-space: nowrap;
1263
1362
  }
1264
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1363
+ .scrub-thumbnails .backdrop .carousel img {
1364
+ width: auto;
1365
+ }.media-control-pip {
1366
+ order: 95;
1265
1367
  display: flex;
1266
- align-items: center;
1267
- gap: 1rem;
1268
- justify-content: flex-end;
1269
- }
1270
- @media (max-width: 420px) {
1271
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1272
- gap: 0.5rem;
1273
- overflow: hidden;
1274
- }
1275
1368
  }
1276
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1277
- background-color: transparent;
1278
- border: 0;
1279
- padding: 0;
1280
- cursor: pointer;
1281
- display: inline-block;
1369
+ .media-control-pip button {
1282
1370
  height: 20px;
1283
- width: 24px;
1284
1371
  }
1285
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1372
+ .media-control-pip button svg {
1286
1373
  height: 20px;
1374
+ }.spinner-three-bounce[data-spinner] {
1375
+ position: absolute;
1376
+ width: 70px;
1377
+ text-align: center;
1378
+ z-index: 999;
1379
+ left: 0;
1380
+ right: 0;
1381
+ margin: 0 auto;
1382
+ margin-left: auto;
1383
+ margin-right: auto;
1384
+ /* center vertically */
1385
+ top: 50%;
1386
+ transform: translateY(-50%);
1287
1387
  }
1288
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1289
- fill: white;
1290
- }
1291
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1292
- outline: none;
1293
- }
1294
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1295
- float: left;
1296
- height: 100%;
1297
- }
1298
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1299
- float: left;
1300
- height: 100%;
1301
- }
1302
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1303
- float: left;
1304
- height: 100%;
1388
+ .spinner-three-bounce[data-spinner] > div {
1389
+ width: 18px;
1390
+ height: 18px;
1391
+ background-color: #FFF;
1392
+ border-radius: 100%;
1393
+ display: inline-block;
1394
+ animation: bouncedelay 1.4s infinite ease-in-out;
1395
+ /* Prevent first frame from flickering when animation starts */
1396
+ animation-fill-mode: both;
1305
1397
  }
1306
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1307
- order: 100;
1308
- background-color: transparent;
1309
- border: 0;
1310
- height: 40px;
1398
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1399
+ animation-delay: -0.32s;
1311
1400
  }
1312
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1313
- background-color: transparent;
1314
- border: 0;
1315
- cursor: default;
1316
- display: none !important;
1317
- float: right;
1318
- height: 100%;
1401
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1402
+ animation-delay: -0.16s;
1319
1403
  }
1320
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1321
- display: flex;
1322
- color: white;
1323
- cursor: default;
1324
- line-height: var(--bottom-panel);
1325
- position: relative;
1404
+
1405
+ @keyframes bouncedelay {
1406
+ 0%, 80%, 100% {
1407
+ transform: scale(0);
1408
+ }
1409
+ 40% {
1410
+ transform: scale(1);
1411
+ }
1412
+ }[data-player] {
1413
+ --bottom-panel: 40px;
1326
1414
  }
1327
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1328
- margin: 1px 0 0 7px;
1415
+
1416
+ .container .media-control-notransition {
1417
+ transition: none !important;
1329
1418
  }
1330
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1331
- color: rgb(255, 255, 255);
1332
- opacity: 0.5;
1333
- margin-top: 1px;
1334
- margin-right: 6px;
1419
+ .container .player-poster[data-poster] .play-wrapper[data-poster] {
1420
+ opacity: 1;
1335
1421
  }
1336
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1337
- content: "|";
1338
- margin-right: 7px;
1422
+ .container.crop-video [data-html5-video] {
1423
+ object-fit: cover;
1339
1424
  }
1340
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container {
1341
- display: none;
1425
+ .container .cc-line {
1426
+ position: absolute;
1427
+ bottom: calc(var(--bottom-panel) + 5px);
1428
+ width: 100%;
1342
1429
  }
1343
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1344
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1345
- text-overflow: ellipsis;
1346
- white-space: nowrap;
1347
- overflow: hidden;
1348
- display: inline-block;
1349
- float: left;
1430
+ .container .cc-line p {
1431
+ width: auto;
1432
+ background-color: rgba(0, 0, 0, 0.4);
1350
1433
  color: white;
1351
- cursor: default;
1352
- line-height: var(--bottom-panel);
1353
- position: relative;
1434
+ display: inline-block;
1354
1435
  }
1355
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1356
- margin-right: 6px;
1436
+ .container .circle-poster[data-poster] {
1437
+ top: 50%;
1438
+ margin-top: -60px;
1439
+ left: 50%;
1440
+ margin-left: -60px;
1441
+ position: absolute;
1442
+ width: 120px;
1443
+ height: 120px;
1444
+ border: 2px solid white;
1445
+ border-radius: 50%;
1446
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1447
+ filter: alpha(opacity=60);
1448
+ opacity: 1;
1449
+ box-shadow: 0 0 1px 0 white;
1357
1450
  }
1358
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1359
- max-width: calc(80% - 240px);
1451
+ .container .circle-poster[data-poster] svg {
1452
+ margin-left: 5px;
1453
+ width: 80px;
1454
+ height: 80px;
1360
1455
  }
1361
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1362
- position: absolute;
1363
- top: -11px;
1364
- left: 0;
1365
- display: inline-block;
1366
- vertical-align: middle;
1367
- width: 100%;
1368
- height: 20px;
1369
- cursor: pointer;
1456
+ .container .spinner-three-bounce[data-spinner] > div {
1457
+ background-color: #ff5700;
1370
1458
  }
1371
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1372
- width: 100%;
1373
- height: 3px;
1374
- position: relative;
1375
- top: 8px;
1376
- background-color: #666;
1459
+
1460
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
1461
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audiotracks {
1462
+ display: none;
1377
1463
  }
1378
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
1464
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1465
+ transform: rotate(270deg);
1466
+ float: none;
1467
+ display: block;
1379
1468
  position: absolute;
1380
- top: 0;
1381
- left: 0;
1382
- width: 0;
1383
- height: 100%;
1384
- background-color: white;
1385
- transition: all 0.1s ease-out;
1469
+ /* bottom: 12px; */
1470
+ margin: 0;
1471
+ top: -40px;
1472
+ padding: 0;
1473
+ /* right: 20px; */
1474
+ margin-left: -32px;
1475
+ margin-top: -3px;
1476
+ width: 80px;
1477
+ /* padding-left: 12px; */
1386
1478
  }
1387
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1479
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
1388
1480
  position: absolute;
1389
- top: 0;
1390
- left: 0;
1391
- width: 0;
1481
+ width: 100%;
1392
1482
  height: 100%;
1393
- background-color: #ff5700;
1394
- transition: all 0.1s ease-out;
1483
+ left: -5px;
1395
1484
  }
1396
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1397
- cursor: default;
1485
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1398
1486
  display: none;
1399
1487
  }
1400
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1401
- cursor: default;
1402
- display: none;
1488
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
1489
+ margin-left: 11px;
1490
+ top: 7px;
1491
+ width: 80px;
1403
1492
  }
1404
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1405
- position: absolute;
1406
- transform: translateX(-50%);
1407
- top: -11.5px;
1408
- left: 0;
1409
- width: 20px;
1410
- height: 20px;
1411
- opacity: 1;
1412
- transition: all 0.1s ease-out;
1493
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
1494
+ margin-left: 11px;
1495
+ top: 1px;
1413
1496
  }
1414
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1415
- position: absolute;
1416
- left: 4.5px;
1417
- top: 4.5px;
1418
- width: 11px;
1419
- height: 11px;
1420
- border-radius: 50%;
1421
- background-color: white;
1497
+
1498
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc {
1499
+ width: 28px;
1422
1500
  }
1423
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1424
- display: flex;
1425
- justify-content: flex-start;
1426
- height: var(--bottom-panel);
1427
- cursor: pointer;
1428
- box-sizing: border-box;
1501
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc svg {
1502
+ height: 17px;
1429
1503
  }
1430
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1431
- bottom: 0;
1504
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
1505
+ top: calc(50% - 150px);
1506
+ left: calc(50% - 125px);
1507
+ width: 250px;
1508
+ height: calc(100% - 32px);
1509
+ max-height: 300px;
1510
+ transform: none;
1432
1511
  }
1433
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1434
- background-color: transparent;
1435
- border: 0;
1436
- box-sizing: content-box;
1437
- height: var(--bottom-panel);
1438
- width: 20px;
1512
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
1513
+ border: none;
1439
1514
  }
1440
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1441
- height: 20px;
1442
- position: relative;
1443
- top: 3px;
1444
- margin-top: 7px;
1515
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1516
+ visibility: hidden;
1445
1517
  }
1446
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
1447
- fill: white;
1518
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
1519
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks {
1520
+ display: block;
1448
1521
  }
1449
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1450
- margin-left: 2px;
1522
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector],
1523
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] {
1524
+ margin-top: 3px;
1525
+ margin-right: 10px;
1451
1526
  }
1452
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1453
- position: relative;
1454
- margin-left: 10px;
1455
- top: 8px;
1456
- width: 80px;
1527
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul,
1528
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul {
1529
+ bottom: 30px;
1530
+ width: 50px;
1531
+ }
1532
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li,
1533
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li {
1457
1534
  height: 23px;
1458
- padding: 3px 0;
1459
- transition: width 0.2s ease-out;
1535
+ font-size: 14px;
1460
1536
  }
1461
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
1462
- height: 3px;
1463
- border-radius: 100px;
1464
- position: relative;
1465
- top: 7px;
1466
- background-color: #666;
1537
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li a,
1538
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li a {
1539
+ height: 23px;
1540
+ padding: 2px 5px;
1467
1541
  }
1468
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
1469
- position: absolute;
1470
- top: 0;
1471
- left: 0;
1472
- width: 0;
1473
- height: 100%;
1474
- border-radius: 100px;
1475
- background-color: white;
1476
- transition: all 0.1s ease-out;
1542
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .quality-text,
1543
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .audio-text,
1544
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .quality-text,
1545
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .audio-text,
1546
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .quality-text,
1547
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .audio-text,
1548
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,
1549
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {
1550
+ font-size: 13px;
1477
1551
  }
1478
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
1479
- position: absolute;
1480
- top: 0;
1481
- left: 0;
1482
- width: 0;
1483
- height: 100%;
1484
- background-color: #005aff;
1485
- transition: all 0.1s ease-out;
1552
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
1553
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
1554
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.quality-arrow,
1555
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.audio-arrow,
1556
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.quality-arrow,
1557
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.audio-arrow,
1558
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,
1559
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {
1560
+ width: 7px;
1561
+ height: 5px;
1562
+ margin-left: 4px;
1563
+ margin-top: 11px;
1486
1564
  }
1487
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
1488
- position: absolute;
1489
- transform: translateX(-50%);
1490
- top: 3px;
1491
- margin-left: 3px;
1492
- width: 16px;
1493
- height: 16px;
1494
- opacity: 1;
1495
- transition: all 0.1s ease-out;
1565
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
1566
+ margin-top: 0;
1567
+ margin-right: 10px;
1496
1568
  }
1497
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
1498
- position: absolute;
1499
- left: 3px;
1500
- top: 5px;
1501
- width: 7px;
1502
- height: 7px;
1503
- border-radius: 50%;
1504
- background-color: white;
1569
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
1570
+ height: 32px;
1505
1571
  }
1506
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
1507
- float: left;
1508
- width: 4px;
1509
- padding-left: 2px;
1510
- height: 12px;
1511
- opacity: 0.5;
1512
- box-shadow: inset 2px 0 0 white;
1513
- transition: transform 0.2s ease-out;
1572
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
1573
+ height: 17px;
1574
+ margin: 0;
1514
1575
  }
1515
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
1516
- box-shadow: inset 2px 0 0 #fff;
1517
- opacity: 1;
1576
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
1577
+ padding-left: 10px;
1578
+ padding-right: 12px;
1518
1579
  }
1519
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
1520
- padding-left: 0;
1580
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
1581
+ line-height: 32px;
1521
1582
  }
1522
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1523
- transform: scaleY(1.5);
1583
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1584
+ font-size: 11px;
1585
+ line-height: 32px;
1524
1586
  }
1525
-
1526
- /* TODO distribute between plugins' styles */
1527
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button] {
1528
- display: flex;
1529
- justify-content: center;
1530
- padding: 0;
1531
- align-items: center;
1587
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] {
1588
+ height: 32px;
1589
+ }
1590
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button {
1591
+ margin-left: 10px;
1592
+ height: 32px;
1593
+ font-size: 12px;
1594
+ line-height: 32px;
1595
+ text-shadow: none;
1596
+ letter-spacing: 0.6px;
1597
+ }
1598
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button::before {
1599
+ width: 8px;
1600
+ height: 8px;
1601
+ margin-right: 4px;
1532
1602
  }
1533
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button]:hover {
1534
- color: white;
1603
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info {
1604
+ margin-left: 10px;
1605
+ height: 32px;
1606
+ font-size: 12px;
1607
+ line-height: 32px;
1608
+ text-shadow: none;
1609
+ letter-spacing: 0.6px;
1535
1610
  }
1536
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul {
1537
- background-color: rgba(74, 74, 74, 0.6);
1538
- border: none;
1539
- width: auto;
1540
- border-radius: 4px;
1541
- bottom: 52px;
1542
- margin-left: -28px;
1611
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info::before {
1612
+ width: 8px;
1613
+ height: 8px;
1614
+ margin-right: 4px;
1543
1615
  }
1544
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li {
1545
- font-size: 16px;
1546
- text-align: center;
1547
- white-space: nowrap;
1548
- height: 30px;
1616
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
1617
+ height: 32px;
1549
1618
  }
1550
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a {
1551
- height: 30px;
1552
- padding: 5px 10px;
1553
- color: #fffffe;
1619
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1620
+ height: 33px;
1554
1621
  }
1555
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a:hover {
1556
- background-color: rgba(0, 0, 0, 0.4);
1622
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
1623
+ height: 17px;
1557
1624
  }
1558
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li.current a {
1559
- background-color: rgba(0, 0, 0, 0.4);
1625
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1626
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1627
+ line-height: 33px;
1628
+ font-size: 11px;
1560
1629
  }
1561
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {
1562
- border-bottom-left-radius: 4px;
1563
- border-bottom-right-radius: 4px;
1630
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1631
+ max-width: calc(80% - 210px);
1564
1632
  }
1565
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {
1566
- border-top-left-radius: 4px;
1567
- border-top-right-radius: 4px;
1633
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
1634
+ height: 32px;
1635
+ margin-right: 8px;
1568
1636
  }
1569
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1570
- height: 26px;
1571
- line-height: 26px;
1572
- bottom: 52px;
1573
- border-radius: 3px;
1574
- background-color: rgba(74, 74, 74, 0.7);
1637
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1638
+ height: 32px;
1575
1639
  }
1576
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1577
- letter-spacing: 0.8px;
1578
- font-size: 14px;
1579
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1640
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1641
+ height: 17px;
1642
+ margin-top: 5px;
1580
1643
  }
1581
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1582
- padding-left: 8px;
1583
- padding-right: 8px;
1644
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1645
+ display: none;
1584
1646
  }
1585
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1586
- display: none !important;
1587
- }.share_plugin[data-share] {
1588
- pointer-events: auto;
1589
- z-index: 5;
1590
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1647
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1648
+ width: 0;
1649
+ height: 12px;
1650
+ top: 9px;
1651
+ padding: 0;
1591
1652
  }
1592
- .share_plugin[data-share].share-hide .share-button-container {
1593
- right: -50px;
1653
+
1654
+ :root {
1655
+ --font-size-media-controls: 14px;
1656
+ --font-size-media-controls-dropdown: 16px;
1657
+ --player-vod-color: #005aff;
1658
+ --player-dvr-color: #fff;
1659
+ --player-live-color: #ff0101;
1660
+ --player-seekbar-current-color: #ff5700;
1661
+ --player-seekbar-buffer-color: #fff;
1594
1662
  }
1595
- .share_plugin[data-share] .share-button-container {
1596
- cursor: pointer;
1597
- width: 36px;
1598
- height: 36px;
1599
- background-color: rgba(74, 74, 74, 0.6);
1600
- border-radius: 4px;
1663
+
1664
+ .media-control-skin-1[data-media-control-skin-1] {
1601
1665
  position: absolute;
1602
- right: 10px;
1603
- top: 10px;
1604
- padding-top: 6px;
1605
- transition: all 0.3s ease-out;
1606
- }
1607
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1608
- background-color: transparent;
1609
- border: 0;
1610
- margin: 0 6px;
1611
- padding: 0;
1612
- cursor: pointer;
1613
- display: inline-block;
1614
- width: 19px;
1615
- height: 20px;
1666
+ width: 100%;
1667
+ height: 100%;
1668
+ z-index: 9999;
1669
+ pointer-events: none;
1670
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1671
+ font-size: var(--font-size-media-controls);
1616
1672
  }
1617
- .share_plugin[data-share] .share-container {
1673
+ .media-control-skin-1[data-media-control-skin-1].dragging {
1618
1674
  pointer-events: auto;
1619
- position: absolute;
1620
- width: 280px;
1621
- background-color: white;
1622
- transform: translate(0, 50%);
1623
- transform: translate(-50%, -50%);
1624
- left: 50%;
1625
- /* margin-left: -140px; */
1626
- top: calc(50% - 20px);
1627
- /* margin-top: -170px; */
1675
+ cursor: grabbing !important;
1676
+ cursor: url("closed-hand.cur"), move;
1628
1677
  }
1629
- .share_plugin[data-share] .share-container .share-container-header {
1630
- text-align: left;
1631
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1678
+ .media-control-skin-1[data-media-control-skin-1].dragging * {
1679
+ cursor: grabbing !important;
1680
+ cursor: url("closed-hand.cur"), move;
1632
1681
  }
1633
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1634
- display: inline-block;
1635
- font-size: 16px;
1636
- margin: 5px;
1682
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1683
+ line-height: 0;
1684
+ letter-spacing: 0;
1685
+ speak: none;
1686
+ color: #fff;
1687
+ vertical-align: middle;
1688
+ text-align: left;
1689
+ transition: all 0.1s ease;
1637
1690
  }
1638
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1639
- display: inline-block;
1640
- width: 24px;
1641
- float: right;
1642
- margin: 5px;
1643
- cursor: pointer;
1691
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1692
+ color: white;
1644
1693
  }
1645
- .share_plugin[data-share] .share-container .share-container-main {
1646
- margin-bottom: 8px;
1694
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1695
+ opacity: 0;
1647
1696
  }
1648
- .share_plugin[data-share] .share-container .share-container-main > div {
1649
- text-align: left;
1650
- font-size: 14px;
1651
- padding: 5px;
1697
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1698
+ bottom: -50px;
1652
1699
  }
1653
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--link, .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1654
- overflow: hidden;
1655
- text-overflow: ellipsis;
1656
- color: #818181;
1657
- border: solid 1px #d3d3d3;
1658
- width: calc(100% - 10px);
1659
- padding: 5px;
1700
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1701
+ opacity: 0;
1660
1702
  }
1661
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1662
- max-height: 90px;
1663
- resize: none;
1703
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1704
+ position: absolute;
1705
+ bottom: 0;
1706
+ width: 100%;
1707
+ padding: 0 12px 0 8px;
1708
+ height: var(--bottom-panel);
1709
+ vertical-align: middle;
1710
+ pointer-events: auto;
1711
+ transition: bottom 0.4s ease-out;
1712
+ display: flex;
1713
+ justify-content: space-between;
1664
1714
  }
1665
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1666
- width: 32px;
1667
- display: inline-block;
1668
- margin-right: 5px;
1669
- cursor: pointer;
1670
- }.media-control-pip {
1671
- order: 95;
1715
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel {
1672
1716
  display: flex;
1717
+ align-items: center;
1718
+ gap: 0.5rem;
1719
+ justify-content: flex-start;
1673
1720
  }
1674
- .media-control-pip button {
1675
- height: 20px;
1721
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel {
1722
+ height: 100%;
1723
+ text-align: center;
1724
+ line-height: var(--bottom-panel);
1676
1725
  }
1677
- .media-control-pip button svg {
1678
- height: 20px;
1679
- }*, :focus, :visited {
1680
- outline: none !important;
1726
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1727
+ display: flex;
1728
+ align-items: center;
1729
+ gap: 1rem;
1730
+ justify-content: flex-end;
1681
1731
  }
1682
-
1683
- .multicamera[data-multicamera] {
1684
- float: right;
1685
- margin-top: 4px;
1686
- position: relative;
1687
- margin-right: 20px;
1688
- width: 20px;
1732
+ @media (max-width: 420px) {
1733
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1734
+ gap: 0.5rem;
1735
+ overflow: hidden;
1736
+ }
1689
1737
  }
1690
- .multicamera[data-multicamera] button {
1738
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1691
1739
  background-color: transparent;
1692
- color: #fff;
1693
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1694
- -webkit-font-smoothing: antialiased;
1695
- border: none;
1696
- font-size: 14px;
1740
+ border: 0;
1697
1741
  padding: 0;
1742
+ cursor: pointer;
1743
+ display: inline-block;
1744
+ height: 20px;
1745
+ width: 24px;
1698
1746
  }
1699
- .multicamera[data-multicamera] button svg {
1747
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1700
1748
  height: 20px;
1701
- position: relative;
1702
- margin-top: 6px;
1703
1749
  }
1704
- .multicamera[data-multicamera] button:hover {
1705
- color: #c9c9c9;
1750
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1751
+ fill: white;
1706
1752
  }
1707
- .multicamera[data-multicamera] button.changing {
1708
- animation: pulse 0.5s infinite alternate;
1753
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1754
+ outline: none;
1755
+ }
1756
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1757
+ float: left;
1758
+ height: 100%;
1709
1759
  }
1710
- .multicamera[data-multicamera] button span.quality-arrow {
1711
- width: 9px;
1712
- height: 6px;
1713
- margin-top: 11px;
1714
- margin-left: 5px;
1760
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1761
+ float: left;
1762
+ height: 100%;
1715
1763
  }
1716
- .multicamera[data-multicamera] > ul {
1717
- padding: 6px 0;
1718
- right: -24px;
1719
- width: 245px;
1720
- list-style-type: none;
1721
- position: absolute;
1722
- bottom: 48px;
1723
- border-radius: 4px;
1724
- display: none;
1725
- background-color: rgba(74, 74, 74, 0.9);
1764
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1765
+ float: left;
1766
+ height: 100%;
1726
1767
  }
1727
- .multicamera[data-multicamera] > ul::after {
1728
- content: "";
1729
- position: absolute;
1730
- top: 100%;
1731
- left: 85%;
1732
- margin-left: -10px;
1733
- width: 0;
1734
- height: 0;
1735
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1736
- border-right: 10px solid transparent;
1737
- border-left: 10px solid transparent;
1768
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1769
+ order: 100;
1770
+ background-color: transparent;
1771
+ border: 0;
1772
+ height: 40px;
1738
1773
  }
1739
- .multicamera[data-multicamera] li {
1740
- font-size: 10px;
1741
- cursor: pointer;
1774
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1775
+ background-color: transparent;
1776
+ border: 0;
1777
+ cursor: default;
1778
+ display: none !important;
1779
+ float: right;
1780
+ height: 100%;
1742
1781
  }
1743
- .multicamera[data-multicamera] li .multicamera-item {
1782
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1744
1783
  display: flex;
1745
- padding: 10px 0;
1746
- justify-content: center;
1784
+ color: white;
1785
+ cursor: default;
1786
+ line-height: var(--bottom-panel);
1747
1787
  position: relative;
1748
1788
  }
1749
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1750
- pointer-events: none;
1751
- }
1752
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1753
- opacity: 0.5;
1789
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1790
+ margin: 1px 0 0 7px;
1754
1791
  }
1755
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1792
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1793
+ color: rgb(255, 255, 255);
1756
1794
  opacity: 0.5;
1795
+ margin-top: 1px;
1796
+ margin-right: 6px;
1757
1797
  }
1758
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1759
- background-color: rgba(0, 0, 0, 0);
1798
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1799
+ content: "|";
1800
+ margin-right: 7px;
1760
1801
  }
1761
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1762
- background-color: rgba(0, 0, 0, 0.3);
1802
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container {
1803
+ display: none;
1763
1804
  }
1764
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1765
- width: 80px;
1766
- height: 60px;
1805
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1806
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1807
+ text-overflow: ellipsis;
1808
+ white-space: nowrap;
1809
+ overflow: hidden;
1810
+ display: inline-block;
1811
+ float: left;
1812
+ color: white;
1813
+ cursor: default;
1814
+ line-height: var(--bottom-panel);
1815
+ position: relative;
1767
1816
  }
1768
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1769
- width: 80px;
1770
- height: 60px;
1817
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1818
+ margin-right: 6px;
1771
1819
  }
1772
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1773
- width: 120px;
1774
- text-align: left;
1775
- margin-left: 15px;
1820
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1821
+ max-width: calc(80% - 240px);
1776
1822
  }
1777
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1778
- width: 120px;
1823
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1824
+ position: absolute;
1825
+ top: -11px;
1826
+ left: 0;
1827
+ display: inline-block;
1828
+ vertical-align: middle;
1829
+ width: 100%;
1779
1830
  height: 20px;
1780
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1781
- font-size: 14px;
1782
- font-weight: normal;
1783
- font-style: normal;
1784
- font-stretch: normal;
1785
- line-height: 1.43;
1786
- letter-spacing: normal;
1787
- text-align: left;
1788
- color: #fff;
1789
- text-overflow: ellipsis;
1790
- overflow: hidden;
1791
- }
1792
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1793
- opacity: 0.6;
1831
+ cursor: pointer;
1794
1832
  }
1795
- .multicamera[data-multicamera] li[data-title] {
1796
- background-color: #c3c2c2;
1797
- padding: 5px;
1833
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1834
+ width: 100%;
1835
+ height: 3px;
1836
+ position: relative;
1837
+ top: 8px;
1838
+ background-color: #666;
1798
1839
  }
1799
- .multicamera[data-multicamera] li a {
1800
- color: #444;
1801
- padding: 2px 10px;
1802
- display: block;
1803
- text-decoration: none;
1840
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
1841
+ position: absolute;
1842
+ top: 0;
1843
+ left: 0;
1844
+ width: 0;
1845
+ height: 100%;
1846
+ background-color: var(--player-seekbar-buffer-color);
1847
+ transition: all 0.1s ease-out;
1804
1848
  }
1805
- .multicamera[data-multicamera] li a:hover {
1806
- background-color: #555;
1807
- color: white;
1849
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1850
+ position: absolute;
1851
+ top: 0;
1852
+ left: 0;
1853
+ width: 0;
1854
+ height: 100%;
1855
+ background-color: var(--player-seekbar-current-color);
1856
+ transition: all 0.1s ease-out;
1808
1857
  }
1809
- .multicamera[data-multicamera] li a:hover a {
1810
- color: white;
1811
- text-decoration: none;
1858
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1859
+ cursor: default;
1860
+ display: none;
1812
1861
  }
1813
- .multicamera[data-multicamera] li.current a {
1814
- color: #f00;
1862
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1863
+ cursor: default;
1864
+ display: none;
1815
1865
  }
1816
-
1817
- @keyframes pulse {
1818
- 0% {
1819
- color: #fff;
1820
- }
1821
- 50% {
1822
- color: #ff0101;
1823
- }
1824
- 100% {
1825
- color: #B80000;
1826
- }
1827
- }.seek-time[data-seek-time] {
1866
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1828
1867
  position: absolute;
1829
- white-space: nowrap;
1868
+ transform: translateX(-50%);
1869
+ top: -11.5px;
1870
+ left: 0;
1871
+ width: 20px;
1830
1872
  height: 20px;
1831
- line-height: 20px;
1832
- font-size: 0;
1833
- left: -100%;
1834
- bottom: 55px;
1835
- background-color: rgba(2, 2, 2, 0.5);
1836
- z-index: 9999;
1837
- transition: opacity 0.1s ease;
1838
- }
1839
- .seek-time[data-seek-time].hidden[data-seek-time] {
1840
- opacity: 0;
1873
+ opacity: 1;
1874
+ transition: all 0.1s ease-out;
1841
1875
  }
1842
- .seek-time[data-seek-time] [data-seek-time] {
1843
- display: inline-block;
1844
- color: white;
1845
- font-size: 10px;
1846
- padding-left: 7px;
1847
- padding-right: 7px;
1848
- vertical-align: top;
1876
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1877
+ position: absolute;
1878
+ left: 4.5px;
1879
+ top: 4.5px;
1880
+ width: 11px;
1881
+ height: 11px;
1882
+ border-radius: 50%;
1883
+ background-color: white;
1849
1884
  }
1850
- .seek-time[data-seek-time] [data-duration] {
1851
- display: inline-block;
1852
- color: rgba(255, 255, 255, 0.5);
1853
- font-size: 10px;
1854
- padding-right: 7px;
1855
- vertical-align: top;
1885
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1886
+ display: flex;
1887
+ justify-content: flex-start;
1888
+ height: var(--bottom-panel);
1889
+ cursor: pointer;
1890
+ box-sizing: border-box;
1856
1891
  }
1857
- .seek-time[data-seek-time] [data-duration]::before {
1858
- content: "|";
1859
- margin-right: 7px;
1860
- }.scrub-thumbnails {
1861
- position: absolute;
1862
- bottom: 52px;
1863
- width: 100%;
1864
- transition: opacity 0.3s ease;
1892
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1893
+ bottom: 0;
1865
1894
  }
1866
- .scrub-thumbnails.hidden {
1867
- opacity: 0;
1895
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1896
+ background-color: transparent;
1897
+ border: 0;
1898
+ box-sizing: content-box;
1899
+ height: var(--bottom-panel);
1900
+ width: 20px;
1868
1901
  }
1869
- .scrub-thumbnails .thumbnail-container {
1870
- display: inline-block;
1902
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1903
+ height: 20px;
1871
1904
  position: relative;
1872
- overflow: hidden;
1873
- background-color: #000;
1905
+ top: 3px;
1906
+ margin-top: 7px;
1874
1907
  }
1875
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
1876
- position: absolute;
1877
- width: auto;
1908
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
1909
+ fill: white;
1878
1910
  }
1879
- .scrub-thumbnails .thumbnails-text {
1880
- background-color: rgba(74, 74, 74, 0.7);
1881
- border-radius: 3px;
1882
- white-space: nowrap;
1883
- overflow: hidden;
1884
- text-overflow: ellipsis;
1885
- color: white;
1886
- position: absolute;
1887
- bottom: 23px;
1888
- width: 100px;
1911
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1912
+ margin-left: 2px;
1889
1913
  }
1890
- .scrub-thumbnails .spotlight {
1891
- background-color: #4a4a4a;
1892
- overflow: hidden;
1893
- position: absolute;
1894
- bottom: 0;
1895
- left: 0;
1896
- border-color: #4a4a4a;
1897
- border-style: solid;
1898
- border-width: 3px;
1899
- border-radius: 3px;
1914
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1915
+ position: relative;
1916
+ margin-left: 10px;
1917
+ top: 8px;
1918
+ width: 80px;
1919
+ height: 23px;
1920
+ padding: 3px 0;
1921
+ transition: width 0.2s ease-out;
1900
1922
  }
1901
- .scrub-thumbnails .spotlight img {
1902
- width: auto;
1923
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
1924
+ height: 3px;
1925
+ border-radius: 100px;
1926
+ position: relative;
1927
+ top: 7px;
1928
+ background-color: #666;
1903
1929
  }
1904
- .scrub-thumbnails .backdrop {
1930
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
1905
1931
  position: absolute;
1932
+ top: 0;
1906
1933
  left: 0;
1907
- bottom: 0;
1908
- right: 0;
1909
- background-color: #000;
1910
- overflow: hidden;
1934
+ width: 0;
1935
+ height: 100%;
1936
+ border-radius: 100px;
1937
+ background-color: white;
1938
+ transition: all 0.1s ease-out;
1911
1939
  }
1912
- .scrub-thumbnails .backdrop .carousel {
1940
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
1913
1941
  position: absolute;
1914
1942
  top: 0;
1915
1943
  left: 0;
1944
+ width: 0;
1916
1945
  height: 100%;
1917
- white-space: nowrap;
1918
- }
1919
- .scrub-thumbnails .backdrop .carousel img {
1920
- width: auto;
1921
- }*,
1922
- :focus,
1923
- :visited {
1924
- outline: none !important;
1946
+ background-color: var(--player-vod-color);
1947
+ transition: all 0.1s ease-out;
1925
1948
  }
1926
-
1927
- .media-control-cc[data-cc] {
1928
- position: relative;
1929
- order: 85;
1949
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
1950
+ position: absolute;
1951
+ transform: translateX(-50%);
1952
+ top: 3px;
1953
+ margin-left: 3px;
1954
+ width: 16px;
1955
+ height: 16px;
1956
+ opacity: 1;
1957
+ transition: all 0.1s ease-out;
1930
1958
  }
1931
- .media-control-cc[data-cc] button {
1932
- background-color: transparent;
1933
- color: #fff;
1934
- -webkit-font-smoothing: antialiased;
1935
- border: none;
1936
- cursor: pointer;
1959
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
1960
+ position: absolute;
1961
+ left: 3px;
1962
+ top: 5px;
1963
+ width: 7px;
1964
+ height: 7px;
1965
+ border-radius: 50%;
1966
+ background-color: white;
1937
1967
  }
1938
- .media-control-cc[data-cc] button .cc-text svg {
1939
- fill: white;
1968
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
1969
+ float: left;
1970
+ width: 4px;
1971
+ padding-left: 2px;
1972
+ height: 12px;
1973
+ opacity: 0.5;
1974
+ box-shadow: inset 2px 0 0 white;
1975
+ transition: transform 0.2s ease-out;
1940
1976
  }
1941
- .media-control-cc[data-cc] button:hover {
1942
- color: #c9c9c9;
1977
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
1978
+ box-shadow: inset 2px 0 0 #fff;
1979
+ opacity: 1;
1943
1980
  }
1944
- .media-control-cc[data-cc] button.changing {
1945
- animation: pulse 0.5s infinite alternate;
1981
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
1982
+ padding-left: 0;
1946
1983
  }
1947
- .media-control-cc[data-cc] ul {
1948
- width: 80px;
1949
- list-style-type: none;
1950
- position: absolute;
1951
- bottom: 25px;
1952
- border: 1px solid black;
1953
- display: none;
1954
- background-color: #e6e6e6;
1955
- padding: 8px 0;
1984
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1985
+ transform: scaleY(1.5);
1956
1986
  }
1957
- .media-control-cc[data-cc] li a {
1958
- color: #444;
1959
- padding: 2px 10px;
1960
- display: block;
1961
- text-decoration: none;
1987
+
1988
+ /* TODO distribute between plugins' styles */
1989
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button] {
1990
+ display: flex;
1991
+ justify-content: center;
1992
+ padding: 0;
1993
+ align-items: center;
1962
1994
  }
1963
- .media-control-cc[data-cc] li a:hover {
1964
- background-color: #555;
1995
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button]:hover {
1965
1996
  color: white;
1966
1997
  }
1967
- .media-control-cc[data-cc] li a:hover a {
1968
- color: white;
1969
- text-decoration: none;
1998
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul {
1999
+ background-color: rgba(74, 74, 74, 0.6);
2000
+ border: none;
2001
+ width: auto;
2002
+ border-radius: 4px;
2003
+ bottom: 52px;
2004
+ margin-left: -28px;
1970
2005
  }
1971
- .media-control-cc[data-cc] li.current a {
1972
- color: #f00;
1973
- background-color: #555;
2006
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li {
2007
+ font-size: 16px;
2008
+ text-align: center;
2009
+ white-space: nowrap;
2010
+ height: 30px;
1974
2011
  }
1975
-
1976
- @keyframes pulse {
1977
- 0% {
1978
- color: #fff;
1979
- }
1980
- 50% {
1981
- color: #ff0101;
1982
- }
1983
- 100% {
1984
- color: #B80000;
1985
- }
2012
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a {
2013
+ height: 30px;
2014
+ padding: 5px 10px;
2015
+ color: #fffffe;
1986
2016
  }
1987
- ::cue {
1988
- visibility: hidden !important;
1989
- font-size: 0 !important;
2017
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a:hover {
2018
+ background-color: rgba(0, 0, 0, 0.4);
1990
2019
  }
1991
-
1992
- .ios-fullscreen::cue {
1993
- visibility: visible !important;
1994
- font-size: 1em !important;
1995
- }.spinner-three-bounce[data-spinner] {
1996
- position: absolute;
1997
- width: 70px;
1998
- text-align: center;
1999
- z-index: 999;
2000
- left: 0;
2001
- right: 0;
2002
- margin: 0 auto;
2003
- margin-left: auto;
2004
- margin-right: auto;
2005
- /* center vertically */
2006
- top: 50%;
2007
- transform: translateY(-50%);
2020
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li.current a {
2021
+ background-color: rgba(0, 0, 0, 0.4);
2008
2022
  }
2009
- .spinner-three-bounce[data-spinner] > div {
2010
- width: 18px;
2011
- height: 18px;
2012
- background-color: #FFF;
2013
- border-radius: 100%;
2014
- display: inline-block;
2015
- animation: bouncedelay 1.4s infinite ease-in-out;
2016
- /* Prevent first frame from flickering when animation starts */
2017
- animation-fill-mode: both;
2023
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {
2024
+ border-bottom-left-radius: 4px;
2025
+ border-bottom-right-radius: 4px;
2018
2026
  }
2019
- .spinner-three-bounce[data-spinner] [data-bounce1] {
2020
- animation-delay: -0.32s;
2027
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {
2028
+ border-top-left-radius: 4px;
2029
+ border-top-right-radius: 4px;
2021
2030
  }
2022
- .spinner-three-bounce[data-spinner] [data-bounce2] {
2023
- animation-delay: -0.16s;
2031
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
2032
+ height: 26px;
2033
+ line-height: 26px;
2034
+ bottom: 52px;
2035
+ border-radius: 3px;
2036
+ background-color: rgba(74, 74, 74, 0.7);
2024
2037
  }
2025
-
2026
- @keyframes bouncedelay {
2027
- 0%, 80%, 100% {
2028
- transform: scale(0);
2029
- }
2030
- 40% {
2031
- transform: scale(1);
2032
- }
2038
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
2039
+ letter-spacing: 0.8px;
2040
+ font-size: 14px;
2041
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
2042
+ }
2043
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
2044
+ padding-left: 8px;
2045
+ padding-right: 8px;
2046
+ }
2047
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
2048
+ display: none !important;
2033
2049
  }.player-logo[data-logo] {
2034
2050
  position: absolute;
2035
2051
  z-index: 2;
@@ -2039,25 +2055,4 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2039
2055
 
2040
2056
  .clappr-logo {
2041
2057
  position: absolute;
2042
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
2043
- height: 0;
2044
- }
2045
-
2046
- .skip_time_plugin[data-skip-time] {
2047
- position: absolute;
2048
- width: 100%;
2049
- height: calc(100% - 50px);
2050
- z-index: 9998;
2051
- background-color: transparent;
2052
- font-family: Roboto, "Open Sans", Arial, sans-serif;
2053
- }
2054
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
2055
- width: 100%;
2056
- height: 100%;
2057
- display: flex;
2058
- justify-content: space-between;
2059
- }
2060
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
2061
- width: 33.3%;
2062
- height: 100%;
2063
2058
  }