@gcorevideo/player 2.24.9 → 2.24.11

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