@gcorevideo/player 2.22.2 → 2.22.3

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