@gcorevideo/player 2.22.10 → 2.22.11

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