@gcorevideo/player 2.24.8 → 2.24.9

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