@gcorevideo/player 2.19.4 → 2.19.6

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