@gcorevideo/player 2.25.4 → 2.25.5

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