@gcorevideo/player 2.20.14 → 2.20.16

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