@gcorevideo/player 2.22.1 → 2.22.3

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