@gcorevideo/player 2.22.5 → 2.22.7

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