@gcorevideo/player 2.22.2 → 2.22.4

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