@gcorevideo/player 2.20.14 → 2.20.15

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