@gcorevideo/player 2.22.26 → 2.22.27

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