@gcorevideo/player 2.22.10 → 2.22.12

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