@gcorevideo/player 2.20.16 → 2.20.17

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