@gcorevideo/player 2.22.14 → 2.22.16

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