@gcorevideo/player 2.24.3 → 2.24.5

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