@gcorevideo/player 2.22.8 → 2.22.9

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