@gcorevideo/player 2.22.13 → 2.22.14

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