@gcorevideo/player 2.19.9 → 2.19.10

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