@gcorevideo/player 2.22.28 → 2.22.29

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