@gcorevideo/player 2.20.16 → 2.20.18

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 (11) hide show
  1. package/dist/core.js +47 -2
  2. package/dist/index.css +1105 -1105
  3. package/dist/index.js +47 -2
  4. package/dist/plugins/index.css +503 -503
  5. package/dist/plugins/index.js +1 -1
  6. package/lib/playback/HTML5Video.d.ts +6 -0
  7. package/lib/playback/HTML5Video.d.ts.map +1 -1
  8. package/lib/playback/HTML5Video.js +46 -1
  9. package/package.json +1 -1
  10. package/src/playback/HTML5Video.ts +53 -1
  11. package/tsconfig.tsbuildinfo +1 -1
package/dist/index.css CHANGED
@@ -259,8 +259,224 @@
259
259
  100% {
260
260
  color: #B80000;
261
261
  }
262
- }.clips.bar-container[data-seekbar] {
263
- clip-path: url("#myClip");
262
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
263
+ float: right;
264
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
265
+ }
266
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
267
+ height: 40px;
268
+ width: 40px;
269
+ padding-right: 20px;
270
+ }
271
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
272
+ height: 20px;
273
+ }
274
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
275
+ position: absolute;
276
+ right: 16px;
277
+ bottom: 52px;
278
+ display: none;
279
+ width: 250px;
280
+ min-height: 48px;
281
+ z-index: 9999;
282
+ border-radius: 4px;
283
+ }
284
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
285
+ padding: 8px 0;
286
+ }
287
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
288
+ float: left;
289
+ margin-right: 10px;
290
+ }
291
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
292
+ margin: 0;
293
+ text-align: left;
294
+ line-height: 22px;
295
+ padding: 5px 14px;
296
+ width: 250px;
297
+ font-size: 12px;
298
+ }
299
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
300
+ float: right;
301
+ margin-right: -14px;
302
+ }
303
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
304
+ float: right;
305
+ margin-right: 8px;
306
+ }
307
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
308
+ height: 20px;
309
+ }*, :focus, :visited {
310
+ outline: none !important;
311
+ }
312
+
313
+ .gear-wrapper .go-back {
314
+ font-weight: 600;
315
+ font-size: 14px;
316
+ line-height: 20px;
317
+ width: 100%;
318
+ text-align: left;
319
+ padding: 12px;
320
+ }
321
+ .gear-wrapper .go-back .arrow-left-icon {
322
+ float: left;
323
+ padding-top: 2px;
324
+ padding-right: 2px;
325
+ }
326
+ .gear-wrapper .go-back .arrow-left-icon svg {
327
+ height: 16px;
328
+ }
329
+ .gear-wrapper ul.gear-sub-menu {
330
+ width: 100%;
331
+ list-style-type: none;
332
+ background-color: transparent;
333
+ min-width: 60px;
334
+ border-top: 2px solid rgb(36, 36, 36);
335
+ }
336
+ .gear-wrapper ul.gear-sub-menu li {
337
+ font-size: 12px;
338
+ text-align: left;
339
+ }
340
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
341
+ background-color: #c3c2c2;
342
+ padding: 5px;
343
+ }
344
+ .gear-wrapper ul.gear-sub-menu li a {
345
+ display: block;
346
+ text-decoration: none;
347
+ height: 32px;
348
+ padding: 5px 10px;
349
+ line-height: 22px;
350
+ color: #fffffe;
351
+ }
352
+ .gear-wrapper ul.gear-sub-menu li a:hover {
353
+ color: white;
354
+ background-color: rgba(0, 0, 0, 0.4);
355
+ }
356
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
357
+ color: white;
358
+ text-decoration: none;
359
+ }
360
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
361
+ width: 30px;
362
+ height: 20px;
363
+ float: left;
364
+ display: block;
365
+ }
366
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
367
+ display: none;
368
+ }
369
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
370
+ display: inline;
371
+ }
372
+ .gear-wrapper svg {
373
+ height: 20px;
374
+ }.dvr-controls[data-dvr-controls] {
375
+ display: inline-block;
376
+ float: left;
377
+ color: #fff;
378
+ line-height: 32px;
379
+ font-size: 10px;
380
+ font-weight: bold;
381
+ margin-left: 6px;
382
+ height: 40px;
383
+ line-height: 40px;
384
+ margin-left: 0;
385
+ }
386
+ .dvr-controls[data-dvr-controls] .live-info {
387
+ cursor: default;
388
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
389
+ text-transform: uppercase;
390
+ }
391
+ .dvr-controls[data-dvr-controls] .live-info:before {
392
+ content: "";
393
+ display: inline-block;
394
+ position: relative;
395
+ width: 7px;
396
+ height: 7px;
397
+ border-radius: 3.5px;
398
+ margin-right: 3.5px;
399
+ background-color: #ff0101;
400
+ }
401
+ .dvr-controls[data-dvr-controls] .live-info.disabled {
402
+ opacity: 0.3;
403
+ }
404
+ .dvr-controls[data-dvr-controls] .live-info.disabled:before {
405
+ background-color: #fff;
406
+ }
407
+ .dvr-controls[data-dvr-controls] .live-button {
408
+ cursor: pointer;
409
+ outline: none;
410
+ display: none;
411
+ border: 0;
412
+ color: #fff;
413
+ background-color: transparent;
414
+ height: 32px;
415
+ padding: 0;
416
+ opacity: 0.7;
417
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
418
+ text-transform: uppercase;
419
+ transition: all 0.1s ease;
420
+ }
421
+ .dvr-controls[data-dvr-controls] .live-button:before {
422
+ content: "";
423
+ display: inline-block;
424
+ position: relative;
425
+ width: 7px;
426
+ height: 7px;
427
+ border-radius: 3.5px;
428
+ margin-right: 3.5px;
429
+ background-color: #fff;
430
+ }
431
+ .dvr-controls[data-dvr-controls] .live-button:hover {
432
+ opacity: 1;
433
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
434
+ }
435
+ .dvr-controls[data-dvr-controls] .live-info {
436
+ font-size: 14px;
437
+ letter-spacing: 0.8px;
438
+ font-weight: 500;
439
+ color: #fffffe;
440
+ margin-left: 21px;
441
+ }
442
+ .dvr-controls[data-dvr-controls] .live-info::before {
443
+ width: 10px;
444
+ height: 10px;
445
+ border-radius: 50%;
446
+ margin-right: 8px;
447
+ background-color: #ed4f4a;
448
+ }
449
+ .dvr-controls[data-dvr-controls] .live-button {
450
+ height: 40px;
451
+ opacity: 1;
452
+ font-size: 14px;
453
+ letter-spacing: 0.8px;
454
+ font-weight: 500;
455
+ margin-left: 20px;
456
+ }
457
+ .dvr-controls[data-dvr-controls] .live-button::before {
458
+ width: 10px;
459
+ height: 10px;
460
+ border-radius: 50%;
461
+ margin-right: 8px;
462
+ background-color: #cacaca;
463
+ }
464
+
465
+ .dvr .dvr-controls[data-dvr-controls] .live-info {
466
+ display: none;
467
+ }
468
+ .dvr .dvr-controls[data-dvr-controls] .live-button {
469
+ display: block;
470
+ }
471
+ .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
472
+ background-color: #005aff;
473
+ }
474
+
475
+ .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
476
+ background-color: #ff0101;
477
+ }.level-disabled {
478
+ opacity: 0.5;
479
+ pointer-events: none;
264
480
  }.big-mute-icon-wrapper[data-big-mute] {
265
481
  position: absolute;
266
482
  z-index: 9998;
@@ -334,40 +550,6 @@
334
550
  color: white;
335
551
  padding: 5px;
336
552
  cursor: pointer;
337
- }div.player-error-screen, [data-player] div.player-error-screen {
338
- color: #CCCACA;
339
- position: absolute;
340
- top: 0;
341
- height: 100%;
342
- width: 100%;
343
- background-color: rgba(0, 0, 0, 0.7);
344
- z-index: 2000;
345
- display: flex;
346
- flex-direction: column;
347
- justify-content: center;
348
- }
349
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
350
- font-size: 14px;
351
- color: #CCCACA;
352
- margin-top: 45px;
353
- }
354
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
355
- font-weight: bold;
356
- line-height: 30px;
357
- font-size: 18px;
358
- }
359
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
360
- width: 90%;
361
- margin: 0 auto;
362
- }
363
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
364
- font-size: 13px;
365
- margin-top: 15px;
366
- }
367
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
368
- cursor: pointer;
369
- width: 30px;
370
- margin: 15px auto 0;
371
553
  }:root {
372
554
  --primary-background-color: #000;
373
555
  --secondary-background-color: #262626;
@@ -750,8 +932,42 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
750
932
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
751
933
  width: 25%;
752
934
  }
753
- }.seek-time[data-seek-time] {
754
- position: absolute;
935
+ }.player-poster[data-poster] {
936
+ display: flex;
937
+ justify-content: center;
938
+ align-items: center;
939
+ position: absolute;
940
+ height: 100%;
941
+ width: 100%;
942
+ z-index: 998;
943
+ top: 0;
944
+ left: 0;
945
+ background-color: #000;
946
+ background-size: cover;
947
+ background-repeat: no-repeat;
948
+ background-position: 50% 50%;
949
+ }
950
+ .player-poster[data-poster].clickable {
951
+ cursor: pointer;
952
+ }
953
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
954
+ opacity: 1;
955
+ }
956
+ .player-poster[data-poster] .play-wrapper[data-poster] {
957
+ width: 100%;
958
+ height: 25%;
959
+ margin: 0 auto;
960
+ opacity: 0.75;
961
+ transition: opacity 0.1s ease;
962
+ }
963
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
964
+ height: 100%;
965
+ display: inline;
966
+ }
967
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
968
+ fill: #fff;
969
+ }.seek-time[data-seek-time] {
970
+ position: absolute;
755
971
  white-space: nowrap;
756
972
  height: 20px;
757
973
  line-height: 20px;
@@ -783,1164 +999,893 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
783
999
  .seek-time[data-seek-time] [data-duration]::before {
784
1000
  content: "|";
785
1001
  margin-right: 7px;
786
- }[data-player] {
787
- --bottom-panel: 40px;
788
- }
789
-
790
- .container .media-control-notransition {
791
- transition: none !important;
792
- }
793
- .container .player-poster[data-poster] .play-wrapper[data-poster] {
794
- opacity: 1;
795
- }
796
- .container.crop-video [data-html5-video] {
797
- object-fit: cover;
798
- }
799
- .container .subtitle-string {
1002
+ }div.player-error-screen, [data-player] div.player-error-screen {
1003
+ color: #CCCACA;
800
1004
  position: absolute;
801
- bottom: calc(var(--bottom-panel) + 5px);
1005
+ top: 0;
1006
+ height: 100%;
802
1007
  width: 100%;
1008
+ background-color: rgba(0, 0, 0, 0.7);
1009
+ z-index: 2000;
1010
+ display: flex;
1011
+ flex-direction: column;
1012
+ justify-content: center;
803
1013
  }
804
- .container .subtitle-string p {
805
- width: auto;
806
- background-color: rgba(0, 0, 0, 0.4);
807
- color: white;
808
- display: inline-block;
1014
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1015
+ font-size: 14px;
1016
+ color: #CCCACA;
1017
+ margin-top: 45px;
809
1018
  }
810
- .container .circle-poster[data-poster] {
811
- top: 50%;
812
- margin-top: -60px;
813
- left: 50%;
814
- margin-left: -60px;
815
- position: absolute;
816
- width: 120px;
817
- height: 120px;
818
- border: 2px solid white;
819
- border-radius: 50%;
820
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
821
- filter: alpha(opacity=60);
822
- opacity: 1;
823
- box-shadow: 0 0 1px 0 white;
1019
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1020
+ font-weight: bold;
1021
+ line-height: 30px;
1022
+ font-size: 18px;
824
1023
  }
825
- .container .circle-poster[data-poster] svg {
826
- margin-left: 5px;
827
- width: 80px;
828
- height: 80px;
1024
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1025
+ width: 90%;
1026
+ margin: 0 auto;
829
1027
  }
830
- .container .spinner-three-bounce[data-spinner] > div {
831
- background-color: #ff5700;
1028
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1029
+ font-size: 13px;
1030
+ margin-top: 15px;
1031
+ }
1032
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1033
+ cursor: pointer;
1034
+ width: 30px;
1035
+ margin: 15px auto 0;
1036
+ }*, :focus, :visited {
1037
+ outline: none !important;
832
1038
  }
833
1039
 
834
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
835
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audio-tracks {
836
- display: none;
1040
+ .multicamera[data-multicamera] {
1041
+ float: right;
1042
+ margin-top: 4px;
1043
+ position: relative;
1044
+ margin-right: 20px;
1045
+ width: 20px;
837
1046
  }
838
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
839
- transform: rotate(270deg);
840
- float: none;
841
- display: block;
842
- position: absolute;
843
- /* bottom: 12px; */
844
- margin: 0;
845
- top: -40px;
1047
+ .multicamera[data-multicamera] button {
1048
+ background-color: transparent;
1049
+ color: #fff;
1050
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1051
+ -webkit-font-smoothing: antialiased;
1052
+ border: none;
1053
+ font-size: 14px;
846
1054
  padding: 0;
847
- /* right: 20px; */
848
- margin-left: -32px;
849
- margin-top: -3px;
850
- width: 80px;
851
- /* padding-left: 12px; */
852
1055
  }
853
- .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 {
854
- position: absolute;
855
- width: 100%;
856
- height: 100%;
857
- left: -5px;
1056
+ .multicamera[data-multicamera] button svg {
1057
+ height: 20px;
1058
+ position: relative;
1059
+ margin-top: 6px;
858
1060
  }
859
- .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 {
860
- display: none;
1061
+ .multicamera[data-multicamera] button:hover {
1062
+ color: #c9c9c9;
861
1063
  }
862
- .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 {
863
- margin-left: 11px;
864
- top: 7px;
865
- width: 80px;
1064
+ .multicamera[data-multicamera] button.changing {
1065
+ animation: pulse 0.5s infinite alternate;
866
1066
  }
867
- .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 {
868
- margin-left: 11px;
869
- top: 1px;
1067
+ .multicamera[data-multicamera] button span.quality-arrow {
1068
+ width: 9px;
1069
+ height: 6px;
1070
+ margin-top: 11px;
1071
+ margin-left: 5px;
870
1072
  }
871
-
872
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] {
873
- width: 28px;
1073
+ .multicamera[data-multicamera] > ul {
1074
+ padding: 6px 0;
1075
+ right: -24px;
1076
+ width: 245px;
1077
+ list-style-type: none;
1078
+ position: absolute;
1079
+ bottom: 48px;
1080
+ border-radius: 4px;
1081
+ display: none;
1082
+ background-color: rgba(74, 74, 74, 0.9);
874
1083
  }
875
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] svg {
876
- height: 17px;
1084
+ .multicamera[data-multicamera] > ul::after {
1085
+ content: "";
1086
+ position: absolute;
1087
+ top: 100%;
1088
+ left: 85%;
1089
+ margin-left: -10px;
1090
+ width: 0;
1091
+ height: 0;
1092
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1093
+ border-right: 10px solid transparent;
1094
+ border-left: 10px solid transparent;
877
1095
  }
878
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
879
- top: calc(50% - 150px);
880
- left: calc(50% - 125px);
881
- width: 250px;
882
- height: calc(100% - 32px);
883
- max-height: 300px;
884
- transform: none;
1096
+ .multicamera[data-multicamera] li {
1097
+ font-size: 10px;
1098
+ cursor: pointer;
885
1099
  }
886
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
887
- border: none;
1100
+ .multicamera[data-multicamera] li .multicamera-item {
1101
+ display: flex;
1102
+ padding: 10px 0;
1103
+ justify-content: center;
1104
+ position: relative;
888
1105
  }
889
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
890
- visibility: hidden;
1106
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1107
+ pointer-events: none;
891
1108
  }
892
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
893
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks {
894
- display: block;
1109
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1110
+ opacity: 0.5;
895
1111
  }
896
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector],
897
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector],
898
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector],
899
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] {
900
- margin-top: 3px;
901
- margin-right: 10px;
1112
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1113
+ opacity: 0.5;
902
1114
  }
903
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul,
904
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul,
905
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul,
906
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul {
907
- bottom: 30px;
908
- width: 50px;
1115
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1116
+ background-color: rgba(0, 0, 0, 0);
909
1117
  }
910
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul li,
911
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul li,
912
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul li,
913
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul li {
914
- height: 23px;
915
- font-size: 14px;
1118
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1119
+ background-color: rgba(0, 0, 0, 0.3);
916
1120
  }
917
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul li a,
918
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul li a,
919
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul li a,
920
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul li a {
921
- height: 23px;
922
- padding: 2px 5px;
1121
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1122
+ width: 80px;
1123
+ height: 60px;
923
1124
  }
924
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] .quality-text, .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] .audio-text,
925
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] .quality-text,
926
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] .audio-text,
927
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] .quality-text,
928
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] .audio-text,
929
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] .quality-text,
930
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] .audio-text,
931
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] .quality-text,
932
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] .audio-text,
933
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] .quality-text,
934
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] .audio-text,
935
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] .quality-text,
936
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] .audio-text,
937
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] .quality-text,
938
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] .audio-text {
939
- font-size: 13px;
1125
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1126
+ width: 80px;
1127
+ height: 60px;
940
1128
  }
941
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] span.quality-arrow, .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
942
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] span.quality-arrow,
943
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] span.audio-arrow,
944
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] span.quality-arrow,
945
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] span.audio-arrow,
946
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] span.quality-arrow,
947
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] span.audio-arrow,
948
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
949
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
950
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] span.quality-arrow,
951
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] span.audio-arrow,
952
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] span.quality-arrow,
953
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] span.audio-arrow,
954
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] span.quality-arrow,
955
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] span.audio-arrow {
956
- width: 7px;
957
- height: 5px;
958
- margin-left: 4px;
959
- margin-top: 11px;
1129
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1130
+ width: 120px;
1131
+ text-align: left;
1132
+ margin-left: 15px;
960
1133
  }
961
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
962
- margin-top: 0;
963
- margin-right: 10px;
1134
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1135
+ width: 120px;
1136
+ height: 20px;
1137
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1138
+ font-size: 14px;
1139
+ font-weight: normal;
1140
+ font-style: normal;
1141
+ font-stretch: normal;
1142
+ line-height: 1.43;
1143
+ letter-spacing: normal;
1144
+ text-align: left;
1145
+ color: #fff;
1146
+ text-overflow: ellipsis;
1147
+ overflow: hidden;
964
1148
  }
965
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
966
- height: 32px;
1149
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1150
+ opacity: 0.6;
967
1151
  }
968
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
969
- height: 17px;
970
- margin: 0;
1152
+ .multicamera[data-multicamera] li[data-title] {
1153
+ background-color: #c3c2c2;
1154
+ padding: 5px;
971
1155
  }
972
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
973
- height: 32px;
1156
+ .multicamera[data-multicamera] li a {
1157
+ color: #444;
1158
+ padding: 2px 10px;
1159
+ display: block;
1160
+ text-decoration: none;
974
1161
  }
975
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-bottomgear .button-gear {
976
- height: 33px;
977
- margin-right: 10px;
978
- padding-right: 0;
1162
+ .multicamera[data-multicamera] li a:hover {
1163
+ background-color: #555;
1164
+ color: white;
979
1165
  }
980
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-bottomgear .button-gear svg {
981
- height: 17px;
1166
+ .multicamera[data-multicamera] li a:hover a {
1167
+ color: white;
1168
+ text-decoration: none;
982
1169
  }
983
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
984
- line-height: 32px;
1170
+ .multicamera[data-multicamera] li.current a {
1171
+ color: #f00;
985
1172
  }
986
- .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] {
987
- font-size: 11px;
988
- line-height: 32px;
1173
+
1174
+ @keyframes pulse {
1175
+ 0% {
1176
+ color: #fff;
1177
+ }
1178
+ 50% {
1179
+ color: #ff0101;
1180
+ }
1181
+ 100% {
1182
+ color: #B80000;
1183
+ }
1184
+ }.clips.bar-container[data-seekbar] {
1185
+ clip-path: url("#myClip");
1186
+ }.media-control-pip button {
1187
+ float: right;
1188
+ height: 40px;
1189
+ margin-right: 20px;
989
1190
  }
990
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] {
991
- height: 32px;
1191
+ .media-control-pip button svg {
1192
+ height: 20px;
1193
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1194
+ height: 0;
992
1195
  }
993
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button {
994
- margin-left: 10px;
995
- height: 32px;
996
- font-size: 12px;
997
- line-height: 32px;
998
- text-shadow: none;
999
- letter-spacing: 0.6px;
1196
+
1197
+ .skip_time_plugin[data-skip-time] {
1198
+ position: absolute;
1199
+ width: 100%;
1200
+ height: calc(100% - 50px);
1201
+ z-index: 9998;
1202
+ background-color: transparent;
1203
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1000
1204
  }
1001
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button::before {
1002
- width: 8px;
1003
- height: 8px;
1004
- margin-right: 4px;
1205
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1206
+ width: 100%;
1207
+ height: 100%;
1208
+ display: flex;
1209
+ justify-content: space-between;
1005
1210
  }
1006
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info {
1007
- margin-left: 10px;
1008
- height: 32px;
1009
- font-size: 12px;
1010
- line-height: 32px;
1011
- text-shadow: none;
1012
- letter-spacing: 0.6px;
1211
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1212
+ width: 33.3%;
1213
+ height: 100%;
1214
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1215
+ .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1216
+ display: block;
1013
1217
  }
1014
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info::before {
1015
- width: 8px;
1016
- height: 8px;
1017
- margin-right: 4px;
1218
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1219
+ width: 40px;
1220
+ margin-top: 0;
1018
1221
  }
1019
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
1020
- height: 32px;
1222
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1223
+ display: flex;
1224
+ justify-content: center;
1225
+ padding: 0;
1226
+ align-items: center;
1021
1227
  }
1022
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-playpause] {
1023
- margin-left: 10px;
1024
- margin-right: 10px;
1228
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1229
+ color: white;
1025
1230
  }
1026
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-playstop] {
1027
- margin-left: 10px;
1028
- margin-right: 10px;
1231
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1232
+ background-color: rgba(74, 74, 74, 0.6);
1233
+ border: none;
1234
+ width: auto;
1235
+ transform: rotate(180deg);
1236
+ border-radius: 4px;
1237
+ bottom: 52px;
1238
+ margin-left: -28px;
1029
1239
  }
1030
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1031
- margin-right: 12px;
1032
- height: 33px;
1240
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1241
+ transform: rotate(-180deg);
1242
+ font-size: 16px;
1243
+ text-align: center;
1244
+ white-space: nowrap;
1245
+ height: 30px;
1033
1246
  }
1034
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
1035
- height: 17px;
1247
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1248
+ height: 30px;
1249
+ padding: 5px 10px;
1250
+ color: #fffffe;
1036
1251
  }
1037
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1038
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1039
- line-height: 33px;
1040
- font-size: 11px;
1252
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1253
+ background-color: rgba(0, 0, 0, 0.4);
1041
1254
  }
1042
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1043
- max-width: calc(80% - 210px);
1255
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1256
+ background-color: rgba(0, 0, 0, 0.4);
1044
1257
  }
1045
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
1046
- height: 32px;
1047
- margin-right: 8px;
1258
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1259
+ border-bottom-left-radius: 4px;
1260
+ border-bottom-right-radius: 4px;
1048
1261
  }
1049
- .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] {
1050
- height: 32px;
1262
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1263
+ border-top-left-radius: 4px;
1264
+ border-top-right-radius: 4px;
1051
1265
  }
1052
- .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 {
1053
- height: 17px;
1054
- margin-top: 5px;
1266
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1267
+ height: 26px;
1268
+ line-height: 26px;
1269
+ bottom: 52px;
1270
+ border-radius: 3px;
1271
+ background-color: rgba(74, 74, 74, 0.7);
1055
1272
  }
1056
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1057
- display: none;
1273
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1274
+ letter-spacing: 0.8px;
1275
+ font-size: 14px;
1276
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1058
1277
  }
1059
- .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 {
1060
- width: 0;
1061
- height: 12px;
1062
- top: 9px;
1063
- padding: 0;
1278
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1279
+ padding-left: 8px;
1280
+ padding-right: 8px;
1281
+ }
1282
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1283
+ display: none !important;
1284
+ }[data-player] {
1285
+ --bottom-panel: 40px;
1064
1286
  }
1065
1287
 
1066
- .media-control-skin-1[data-media-control-skin-1] {
1288
+ .container .media-control-notransition {
1289
+ transition: none !important;
1290
+ }
1291
+ .container .player-poster[data-poster] .play-wrapper[data-poster] {
1292
+ opacity: 1;
1293
+ }
1294
+ .container.crop-video [data-html5-video] {
1295
+ object-fit: cover;
1296
+ }
1297
+ .container .subtitle-string {
1067
1298
  position: absolute;
1299
+ bottom: calc(var(--bottom-panel) + 5px);
1068
1300
  width: 100%;
1069
- height: 100%;
1070
- z-index: 9999;
1071
- pointer-events: none;
1072
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1073
1301
  }
1074
- .media-control-skin-1[data-media-control-skin-1].dragging {
1075
- pointer-events: auto;
1076
- cursor: grabbing !important;
1077
- cursor: url("closed-hand.cur"), move;
1078
- }
1079
- .media-control-skin-1[data-media-control-skin-1].dragging * {
1080
- cursor: grabbing !important;
1081
- cursor: url("closed-hand.cur"), move;
1082
- }
1083
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1084
- line-height: 0;
1085
- letter-spacing: 0;
1086
- speak: none;
1087
- color: #fff;
1088
- vertical-align: middle;
1089
- text-align: left;
1090
- transition: all 0.1s ease;
1091
- }
1092
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1093
- color: white;
1094
- }
1095
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1096
- opacity: 0;
1097
- }
1098
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1099
- bottom: -50px;
1100
- }
1101
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1102
- opacity: 0;
1103
- }
1104
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1105
- position: absolute;
1106
- bottom: 0;
1107
- width: 100%;
1108
- height: var(--bottom-panel);
1109
- font-size: 0;
1110
- vertical-align: middle;
1111
- pointer-events: auto;
1112
- transition: bottom 0.4s ease-out;
1113
- }
1114
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel[data-media-control-skin-1] {
1115
- position: absolute;
1116
- top: 0;
1117
- left: 4px;
1118
- height: 100%;
1119
- }
1120
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel[data-media-control-skin-1] {
1121
- height: 100%;
1122
- text-align: center;
1123
- line-height: var(--bottom-panel);
1124
- }
1125
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel[data-media-control-skin-1] {
1126
- position: absolute;
1127
- top: 0;
1128
- right: 4px;
1129
- height: 100%;
1130
- }
1131
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1132
- background-color: transparent;
1133
- border: 0;
1134
- padding: 0;
1135
- cursor: pointer;
1136
- display: inline-block;
1137
- height: 40px;
1138
- width: 20px;
1139
- }
1140
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1141
- height: 20px;
1142
- }
1143
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1144
- fill: white;
1145
- }
1146
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1147
- outline: none;
1148
- }
1149
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1150
- float: left;
1151
- height: 100%;
1152
- }
1153
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1154
- float: left;
1155
- height: 100%;
1156
- }
1157
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1158
- float: left;
1159
- height: 100%;
1160
- }
1161
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1162
- float: right;
1163
- background-color: transparent;
1164
- border: 0;
1165
- margin-right: 12px;
1166
- height: 40px;
1167
- }
1168
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1169
- background-color: transparent;
1170
- border: 0;
1171
- cursor: default;
1172
- display: none !important;
1173
- float: right;
1174
- height: 100%;
1175
- }
1176
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playpause], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playstop] {
1177
- float: left;
1178
- margin-left: 8px;
1179
- margin-right: 14px;
1180
- }
1181
- .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] {
1182
- display: inline-block;
1183
- float: left;
1184
- font-size: 14px;
1302
+ .container .subtitle-string p {
1303
+ width: auto;
1304
+ background-color: rgba(0, 0, 0, 0.4);
1185
1305
  color: white;
1186
- cursor: default;
1187
- line-height: var(--bottom-panel);
1188
- position: relative;
1189
- }
1190
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1191
- margin: 1px 6px 0 7px;
1192
- }
1193
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1194
- color: rgb(255, 255, 255);
1195
- opacity: 0.5;
1196
- margin-top: 1px;
1197
- margin-right: 6px;
1198
- }
1199
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1200
- content: "|";
1201
- margin-right: 7px;
1202
- }
1203
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container {
1204
- display: none;
1205
- }
1206
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1207
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1208
- text-overflow: ellipsis;
1209
- white-space: nowrap;
1210
- overflow: hidden;
1211
1306
  display: inline-block;
1212
- float: left;
1213
- font-size: 14px;
1214
- color: white;
1215
- cursor: default;
1216
- line-height: var(--bottom-panel);
1217
- position: relative;
1218
- }
1219
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1220
- margin-right: 6px;
1221
- }
1222
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1223
- max-width: calc(80% - 240px);
1224
1307
  }
1225
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1308
+ .container .circle-poster[data-poster] {
1309
+ top: 50%;
1310
+ margin-top: -60px;
1311
+ left: 50%;
1312
+ margin-left: -60px;
1226
1313
  position: absolute;
1227
- top: -11px;
1228
- left: 0;
1229
- display: inline-block;
1230
- vertical-align: middle;
1231
- width: 100%;
1232
- height: 20px;
1233
- cursor: pointer;
1234
- }
1235
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1236
- width: 100%;
1237
- height: 3px;
1238
- position: relative;
1239
- top: 8px;
1240
- background-color: #666;
1314
+ width: 120px;
1315
+ height: 120px;
1316
+ border: 2px solid white;
1317
+ border-radius: 50%;
1318
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1319
+ filter: alpha(opacity=60);
1320
+ opacity: 1;
1321
+ box-shadow: 0 0 1px 0 white;
1241
1322
  }
1242
- .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] {
1243
- position: absolute;
1244
- top: 0;
1245
- left: 0;
1246
- width: 0;
1247
- height: 100%;
1248
- background-color: white;
1249
- transition: all 0.1s ease-out;
1323
+ .container .circle-poster[data-poster] svg {
1324
+ margin-left: 5px;
1325
+ width: 80px;
1326
+ height: 80px;
1250
1327
  }
1251
- .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] {
1252
- position: absolute;
1253
- top: 0;
1254
- left: 0;
1255
- width: 0;
1256
- height: 100%;
1328
+ .container .spinner-three-bounce[data-spinner] > div {
1257
1329
  background-color: #ff5700;
1258
- transition: all 0.1s ease-out;
1259
- }
1260
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1261
- cursor: default;
1262
- display: none;
1263
1330
  }
1264
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1265
- cursor: default;
1331
+
1332
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
1333
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audio-tracks {
1266
1334
  display: none;
1267
1335
  }
1268
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1269
- position: absolute;
1270
- transform: translateX(-50%);
1271
- top: -11.5px;
1272
- left: 0;
1273
- width: 20px;
1274
- height: 20px;
1275
- opacity: 1;
1276
- transition: all 0.1s ease-out;
1277
- }
1278
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1336
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1337
+ transform: rotate(270deg);
1338
+ float: none;
1339
+ display: block;
1279
1340
  position: absolute;
1280
- left: 4.5px;
1281
- top: 4.5px;
1282
- width: 11px;
1283
- height: 11px;
1284
- border-radius: 50%;
1285
- background-color: white;
1286
- }
1287
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1288
- float: left;
1289
- display: inline-block;
1290
- height: var(--bottom-panel);
1291
- cursor: pointer;
1292
- box-sizing: border-box;
1293
- margin-right: 20px;
1294
- }
1295
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1296
- float: left;
1297
- bottom: 0;
1298
- }
1299
- .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] {
1300
- background-color: transparent;
1301
- border: 0;
1302
- box-sizing: content-box;
1303
- height: var(--bottom-panel);
1304
- width: 20px;
1305
- }
1306
- .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 {
1307
- height: 20px;
1308
- position: relative;
1309
- top: 3px;
1310
- margin-top: 7px;
1311
- }
1312
- .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 {
1313
- fill: white;
1314
- }
1315
- .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 {
1316
- margin-left: 2px;
1317
- }
1318
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1319
- float: left;
1320
- position: relative;
1321
- margin-left: 10px;
1322
- top: 8px;
1341
+ /* bottom: 12px; */
1342
+ margin: 0;
1343
+ top: -40px;
1344
+ padding: 0;
1345
+ /* right: 20px; */
1346
+ margin-left: -32px;
1347
+ margin-top: -3px;
1323
1348
  width: 80px;
1324
- height: 23px;
1325
- padding: 3px 0;
1326
- transition: width 0.2s ease-out;
1327
- }
1328
- .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] {
1329
- height: 3px;
1330
- border-radius: 100px;
1331
- position: relative;
1332
- top: 7px;
1333
- background-color: #666;
1334
- }
1335
- .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] {
1336
- position: absolute;
1337
- top: 0;
1338
- left: 0;
1339
- width: 0;
1340
- height: 100%;
1341
- border-radius: 100px;
1342
- background-color: white;
1343
- transition: all 0.1s ease-out;
1349
+ /* padding-left: 12px; */
1344
1350
  }
1345
- .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] {
1351
+ .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 {
1346
1352
  position: absolute;
1347
- top: 0;
1348
- left: 0;
1349
- width: 0;
1353
+ width: 100%;
1350
1354
  height: 100%;
1351
- background-color: #005aff;
1352
- transition: all 0.1s ease-out;
1353
- }
1354
- .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] {
1355
- position: absolute;
1356
- transform: translateX(-50%);
1357
- top: 3px;
1358
- margin-left: 3px;
1359
- width: 16px;
1360
- height: 16px;
1361
- opacity: 1;
1362
- transition: all 0.1s ease-out;
1363
- }
1364
- .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] {
1365
- position: absolute;
1366
- left: 3px;
1367
- top: 5px;
1368
- width: 7px;
1369
- height: 7px;
1370
- border-radius: 50%;
1371
- background-color: white;
1372
- }
1373
- .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] {
1374
- float: left;
1375
- width: 4px;
1376
- padding-left: 2px;
1377
- height: 12px;
1378
- opacity: 0.5;
1379
- box-shadow: inset 2px 0 0 white;
1380
- transition: transform 0.2s ease-out;
1355
+ left: -5px;
1381
1356
  }
1382
- .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 {
1383
- box-shadow: inset 2px 0 0 #fff;
1384
- opacity: 1;
1357
+ .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 {
1358
+ display: none;
1385
1359
  }
1386
- .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) {
1387
- padding-left: 0;
1360
+ .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 {
1361
+ margin-left: 11px;
1362
+ top: 7px;
1363
+ width: 80px;
1388
1364
  }
1389
- .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 {
1390
- transform: scaleY(1.5);
1391
- }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1392
- .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1393
- display: block;
1365
+ .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 {
1366
+ margin-left: 11px;
1367
+ top: 1px;
1394
1368
  }
1395
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1396
- width: 40px;
1397
- margin-top: 0;
1369
+
1370
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] {
1371
+ width: 28px;
1398
1372
  }
1399
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1400
- display: flex;
1401
- justify-content: center;
1402
- padding: 0;
1403
- align-items: center;
1373
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] svg {
1374
+ height: 17px;
1404
1375
  }
1405
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1406
- color: white;
1376
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
1377
+ top: calc(50% - 150px);
1378
+ left: calc(50% - 125px);
1379
+ width: 250px;
1380
+ height: calc(100% - 32px);
1381
+ max-height: 300px;
1382
+ transform: none;
1407
1383
  }
1408
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1409
- background-color: rgba(74, 74, 74, 0.6);
1384
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
1410
1385
  border: none;
1411
- width: auto;
1412
- transform: rotate(180deg);
1413
- border-radius: 4px;
1414
- bottom: 52px;
1415
- margin-left: -28px;
1416
- }
1417
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1418
- transform: rotate(-180deg);
1419
- font-size: 16px;
1420
- text-align: center;
1421
- white-space: nowrap;
1422
- height: 30px;
1423
- }
1424
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1425
- height: 30px;
1426
- padding: 5px 10px;
1427
- color: #fffffe;
1428
1386
  }
1429
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1430
- background-color: rgba(0, 0, 0, 0.4);
1431
- }
1432
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1433
- background-color: rgba(0, 0, 0, 0.4);
1434
- }
1435
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1436
- border-bottom-left-radius: 4px;
1437
- border-bottom-right-radius: 4px;
1438
- }
1439
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1440
- border-top-left-radius: 4px;
1441
- border-top-right-radius: 4px;
1442
- }
1443
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1444
- height: 26px;
1445
- line-height: 26px;
1446
- bottom: 52px;
1447
- border-radius: 3px;
1448
- background-color: rgba(74, 74, 74, 0.7);
1387
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1388
+ visibility: hidden;
1449
1389
  }
1450
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1451
- letter-spacing: 0.8px;
1452
- font-size: 14px;
1453
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1390
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
1391
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks {
1392
+ display: block;
1454
1393
  }
1455
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1456
- padding-left: 8px;
1457
- padding-right: 8px;
1394
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector],
1395
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector],
1396
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector],
1397
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] {
1398
+ margin-top: 3px;
1399
+ margin-right: 10px;
1458
1400
  }
1459
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1460
- display: none !important;
1461
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
1462
- float: right;
1463
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1401
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul,
1402
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul,
1403
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul,
1404
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul {
1405
+ bottom: 30px;
1406
+ width: 50px;
1464
1407
  }
1465
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
1466
- height: 40px;
1467
- width: 40px;
1468
- padding-right: 20px;
1408
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul li,
1409
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul li,
1410
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul li,
1411
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul li {
1412
+ height: 23px;
1413
+ font-size: 14px;
1469
1414
  }
1470
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
1471
- height: 20px;
1415
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul li a,
1416
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul li a,
1417
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul li a,
1418
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul li a {
1419
+ height: 23px;
1420
+ padding: 2px 5px;
1472
1421
  }
1473
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
1474
- position: absolute;
1475
- right: 16px;
1476
- bottom: 52px;
1477
- display: none;
1478
- width: 250px;
1479
- min-height: 48px;
1480
- z-index: 9999;
1481
- border-radius: 4px;
1422
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] .quality-text, .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] .audio-text,
1423
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] .quality-text,
1424
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] .audio-text,
1425
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] .quality-text,
1426
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] .audio-text,
1427
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] .quality-text,
1428
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] .audio-text,
1429
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] .quality-text,
1430
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] .audio-text,
1431
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] .quality-text,
1432
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] .audio-text,
1433
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] .quality-text,
1434
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] .audio-text,
1435
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] .quality-text,
1436
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] .audio-text {
1437
+ font-size: 13px;
1482
1438
  }
1483
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
1484
- padding: 8px 0;
1439
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] span.quality-arrow, .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
1440
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] span.quality-arrow,
1441
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] span.audio-arrow,
1442
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] span.quality-arrow,
1443
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] span.audio-arrow,
1444
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] span.quality-arrow,
1445
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] span.audio-arrow,
1446
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
1447
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
1448
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] span.quality-arrow,
1449
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] span.audio-arrow,
1450
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] span.quality-arrow,
1451
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] span.audio-arrow,
1452
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] span.quality-arrow,
1453
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] span.audio-arrow {
1454
+ width: 7px;
1455
+ height: 5px;
1456
+ margin-left: 4px;
1457
+ margin-top: 11px;
1485
1458
  }
1486
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
1487
- float: left;
1459
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
1460
+ margin-top: 0;
1488
1461
  margin-right: 10px;
1489
1462
  }
1490
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
1491
- margin: 0;
1492
- text-align: left;
1493
- line-height: 22px;
1494
- padding: 5px 14px;
1495
- width: 250px;
1496
- font-size: 12px;
1463
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
1464
+ height: 32px;
1497
1465
  }
1498
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
1499
- float: right;
1500
- margin-right: -14px;
1466
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
1467
+ height: 17px;
1468
+ margin: 0;
1501
1469
  }
1502
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
1503
- float: right;
1504
- margin-right: 8px;
1470
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
1471
+ height: 32px;
1505
1472
  }
1506
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
1507
- height: 20px;
1508
- }*, :focus, :visited {
1509
- outline: none !important;
1473
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-bottomgear .button-gear {
1474
+ height: 33px;
1475
+ margin-right: 10px;
1476
+ padding-right: 0;
1510
1477
  }
1511
-
1512
- .gear-wrapper .go-back {
1513
- font-weight: 600;
1514
- font-size: 14px;
1515
- line-height: 20px;
1516
- width: 100%;
1517
- text-align: left;
1518
- padding: 12px;
1478
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-bottomgear .button-gear svg {
1479
+ height: 17px;
1519
1480
  }
1520
- .gear-wrapper .go-back .arrow-left-icon {
1521
- float: left;
1522
- padding-top: 2px;
1523
- padding-right: 2px;
1481
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
1482
+ line-height: 32px;
1524
1483
  }
1525
- .gear-wrapper .go-back .arrow-left-icon svg {
1526
- height: 16px;
1484
+ .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] {
1485
+ font-size: 11px;
1486
+ line-height: 32px;
1527
1487
  }
1528
- .gear-wrapper ul.gear-sub-menu {
1529
- width: 100%;
1530
- list-style-type: none;
1531
- background-color: transparent;
1532
- min-width: 60px;
1533
- border-top: 2px solid rgb(36, 36, 36);
1488
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] {
1489
+ height: 32px;
1534
1490
  }
1535
- .gear-wrapper ul.gear-sub-menu li {
1491
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button {
1492
+ margin-left: 10px;
1493
+ height: 32px;
1536
1494
  font-size: 12px;
1537
- text-align: left;
1495
+ line-height: 32px;
1496
+ text-shadow: none;
1497
+ letter-spacing: 0.6px;
1538
1498
  }
1539
- .gear-wrapper ul.gear-sub-menu li[data-title] {
1540
- background-color: #c3c2c2;
1541
- padding: 5px;
1499
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button::before {
1500
+ width: 8px;
1501
+ height: 8px;
1502
+ margin-right: 4px;
1542
1503
  }
1543
- .gear-wrapper ul.gear-sub-menu li a {
1544
- display: block;
1545
- text-decoration: none;
1504
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info {
1505
+ margin-left: 10px;
1546
1506
  height: 32px;
1547
- padding: 5px 10px;
1548
- line-height: 22px;
1549
- color: #fffffe;
1507
+ font-size: 12px;
1508
+ line-height: 32px;
1509
+ text-shadow: none;
1510
+ letter-spacing: 0.6px;
1550
1511
  }
1551
- .gear-wrapper ul.gear-sub-menu li a:hover {
1552
- color: white;
1553
- background-color: rgba(0, 0, 0, 0.4);
1512
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info::before {
1513
+ width: 8px;
1514
+ height: 8px;
1515
+ margin-right: 4px;
1554
1516
  }
1555
- .gear-wrapper ul.gear-sub-menu li a:hover a {
1556
- color: white;
1557
- text-decoration: none;
1517
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
1518
+ height: 32px;
1558
1519
  }
1559
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
1560
- width: 30px;
1561
- height: 20px;
1562
- float: left;
1563
- display: block;
1520
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-playpause] {
1521
+ margin-left: 10px;
1522
+ margin-right: 10px;
1564
1523
  }
1565
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
1566
- display: none;
1524
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-playstop] {
1525
+ margin-left: 10px;
1526
+ margin-right: 10px;
1567
1527
  }
1568
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1569
- display: inline;
1528
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1529
+ margin-right: 12px;
1530
+ height: 33px;
1570
1531
  }
1571
- .gear-wrapper svg {
1572
- height: 20px;
1573
- }.dvr-controls[data-dvr-controls] {
1574
- display: inline-block;
1575
- float: left;
1576
- color: #fff;
1577
- line-height: 32px;
1578
- font-size: 10px;
1579
- font-weight: bold;
1580
- margin-left: 6px;
1581
- height: 40px;
1582
- line-height: 40px;
1583
- margin-left: 0;
1532
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
1533
+ height: 17px;
1584
1534
  }
1585
- .dvr-controls[data-dvr-controls] .live-info {
1586
- cursor: default;
1587
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
1588
- text-transform: uppercase;
1535
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1536
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1537
+ line-height: 33px;
1538
+ font-size: 11px;
1589
1539
  }
1590
- .dvr-controls[data-dvr-controls] .live-info:before {
1591
- content: "";
1592
- display: inline-block;
1593
- position: relative;
1594
- width: 7px;
1595
- height: 7px;
1596
- border-radius: 3.5px;
1597
- margin-right: 3.5px;
1598
- background-color: #ff0101;
1540
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1541
+ max-width: calc(80% - 210px);
1599
1542
  }
1600
- .dvr-controls[data-dvr-controls] .live-info.disabled {
1601
- opacity: 0.3;
1543
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
1544
+ height: 32px;
1545
+ margin-right: 8px;
1602
1546
  }
1603
- .dvr-controls[data-dvr-controls] .live-info.disabled:before {
1604
- background-color: #fff;
1547
+ .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] {
1548
+ height: 32px;
1605
1549
  }
1606
- .dvr-controls[data-dvr-controls] .live-button {
1607
- cursor: pointer;
1608
- outline: none;
1550
+ .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 {
1551
+ height: 17px;
1552
+ margin-top: 5px;
1553
+ }
1554
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1609
1555
  display: none;
1610
- border: 0;
1611
- color: #fff;
1612
- background-color: transparent;
1613
- height: 32px;
1614
- padding: 0;
1615
- opacity: 0.7;
1616
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
1617
- text-transform: uppercase;
1618
- transition: all 0.1s ease;
1619
1556
  }
1620
- .dvr-controls[data-dvr-controls] .live-button:before {
1621
- content: "";
1622
- display: inline-block;
1623
- position: relative;
1624
- width: 7px;
1625
- height: 7px;
1626
- border-radius: 3.5px;
1627
- margin-right: 3.5px;
1628
- background-color: #fff;
1557
+ .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 {
1558
+ width: 0;
1559
+ height: 12px;
1560
+ top: 9px;
1561
+ padding: 0;
1629
1562
  }
1630
- .dvr-controls[data-dvr-controls] .live-button:hover {
1631
- opacity: 1;
1632
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
1563
+
1564
+ .media-control-skin-1[data-media-control-skin-1] {
1565
+ position: absolute;
1566
+ width: 100%;
1567
+ height: 100%;
1568
+ z-index: 9999;
1569
+ pointer-events: none;
1570
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1633
1571
  }
1634
- .dvr-controls[data-dvr-controls] .live-info {
1635
- font-size: 14px;
1636
- letter-spacing: 0.8px;
1637
- font-weight: 500;
1638
- color: #fffffe;
1639
- margin-left: 21px;
1572
+ .media-control-skin-1[data-media-control-skin-1].dragging {
1573
+ pointer-events: auto;
1574
+ cursor: grabbing !important;
1575
+ cursor: url("closed-hand.cur"), move;
1640
1576
  }
1641
- .dvr-controls[data-dvr-controls] .live-info::before {
1642
- width: 10px;
1643
- height: 10px;
1644
- border-radius: 50%;
1645
- margin-right: 8px;
1646
- background-color: #ed4f4a;
1577
+ .media-control-skin-1[data-media-control-skin-1].dragging * {
1578
+ cursor: grabbing !important;
1579
+ cursor: url("closed-hand.cur"), move;
1647
1580
  }
1648
- .dvr-controls[data-dvr-controls] .live-button {
1649
- height: 40px;
1650
- opacity: 1;
1651
- font-size: 14px;
1652
- letter-spacing: 0.8px;
1653
- font-weight: 500;
1654
- margin-left: 20px;
1581
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1582
+ line-height: 0;
1583
+ letter-spacing: 0;
1584
+ speak: none;
1585
+ color: #fff;
1586
+ vertical-align: middle;
1587
+ text-align: left;
1588
+ transition: all 0.1s ease;
1655
1589
  }
1656
- .dvr-controls[data-dvr-controls] .live-button::before {
1657
- width: 10px;
1658
- height: 10px;
1659
- border-radius: 50%;
1660
- margin-right: 8px;
1661
- background-color: #cacaca;
1590
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1591
+ color: white;
1662
1592
  }
1663
-
1664
- .dvr .dvr-controls[data-dvr-controls] .live-info {
1665
- display: none;
1593
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1594
+ opacity: 0;
1666
1595
  }
1667
- .dvr .dvr-controls[data-dvr-controls] .live-button {
1668
- display: block;
1596
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1597
+ bottom: -50px;
1669
1598
  }
1670
- .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1671
- background-color: #005aff;
1599
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1600
+ opacity: 0;
1672
1601
  }
1673
-
1674
- .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1675
- background-color: #ff0101;
1676
- }.share_plugin[data-share] {
1602
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1603
+ position: absolute;
1604
+ bottom: 0;
1605
+ width: 100%;
1606
+ height: var(--bottom-panel);
1607
+ font-size: 0;
1608
+ vertical-align: middle;
1677
1609
  pointer-events: auto;
1678
- z-index: 5;
1679
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1610
+ transition: bottom 0.4s ease-out;
1680
1611
  }
1681
- .share_plugin[data-share].share-hide .share-button-container {
1682
- right: -50px;
1612
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel[data-media-control-skin-1] {
1613
+ position: absolute;
1614
+ top: 0;
1615
+ left: 4px;
1616
+ height: 100%;
1683
1617
  }
1684
- .share_plugin[data-share] .share-button-container {
1685
- cursor: pointer;
1686
- width: 36px;
1687
- height: 36px;
1688
- background-color: rgba(74, 74, 74, 0.6);
1689
- border-radius: 4px;
1618
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel[data-media-control-skin-1] {
1619
+ height: 100%;
1620
+ text-align: center;
1621
+ line-height: var(--bottom-panel);
1622
+ }
1623
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel[data-media-control-skin-1] {
1690
1624
  position: absolute;
1691
- right: 10px;
1692
- top: 10px;
1693
- padding-top: 6px;
1694
- transition: all 0.3s ease-out;
1625
+ top: 0;
1626
+ right: 4px;
1627
+ height: 100%;
1695
1628
  }
1696
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1629
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1697
1630
  background-color: transparent;
1698
1631
  border: 0;
1699
- margin: 0 6px;
1700
1632
  padding: 0;
1701
1633
  cursor: pointer;
1702
1634
  display: inline-block;
1703
- width: 19px;
1635
+ height: 40px;
1636
+ width: 20px;
1637
+ }
1638
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1704
1639
  height: 20px;
1705
1640
  }
1706
- .share_plugin[data-share] .share-container {
1707
- pointer-events: auto;
1708
- position: absolute;
1709
- width: 280px;
1710
- background-color: white;
1711
- transform: translate(0, 50%);
1712
- transform: translate(-50%, -50%);
1713
- left: 50%;
1714
- /* margin-left: -140px; */
1715
- top: calc(50% - 20px);
1716
- /* margin-top: -170px; */
1641
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1642
+ fill: white;
1717
1643
  }
1718
- .share_plugin[data-share] .share-container .share-container-header {
1719
- text-align: left;
1720
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1644
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1645
+ outline: none;
1721
1646
  }
1722
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1723
- display: inline-block;
1724
- font-size: 16px;
1725
- margin: 5px;
1647
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1648
+ float: left;
1649
+ height: 100%;
1726
1650
  }
1727
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1728
- display: inline-block;
1729
- width: 24px;
1730
- float: right;
1731
- margin: 5px;
1732
- cursor: pointer;
1651
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1652
+ float: left;
1653
+ height: 100%;
1733
1654
  }
1734
- .share_plugin[data-share] .share-container .share-container-main {
1735
- margin-bottom: 8px;
1655
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1656
+ float: left;
1657
+ height: 100%;
1736
1658
  }
1737
- .share_plugin[data-share] .share-container .share-container-main > div {
1738
- text-align: left;
1739
- font-size: 14px;
1740
- padding: 5px;
1659
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1660
+ float: right;
1661
+ background-color: transparent;
1662
+ border: 0;
1663
+ margin-right: 12px;
1664
+ height: 40px;
1741
1665
  }
1742
- .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 {
1743
- overflow: hidden;
1744
- text-overflow: ellipsis;
1745
- color: #818181;
1746
- border: solid 1px #d3d3d3;
1747
- width: calc(100% - 10px);
1748
- padding: 5px;
1666
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1667
+ background-color: transparent;
1668
+ border: 0;
1669
+ cursor: default;
1670
+ display: none !important;
1671
+ float: right;
1672
+ height: 100%;
1749
1673
  }
1750
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1751
- max-height: 90px;
1752
- resize: none;
1674
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playpause], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playstop] {
1675
+ float: left;
1676
+ margin-left: 8px;
1677
+ margin-right: 14px;
1753
1678
  }
1754
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1755
- width: 32px;
1679
+ .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] {
1756
1680
  display: inline-block;
1757
- margin-right: 5px;
1758
- cursor: pointer;
1759
- }.player-poster[data-poster] {
1760
- display: flex;
1761
- justify-content: center;
1762
- align-items: center;
1763
- position: absolute;
1764
- height: 100%;
1765
- width: 100%;
1766
- z-index: 998;
1767
- top: 0;
1768
- left: 0;
1769
- background-color: #000;
1770
- background-size: cover;
1771
- background-repeat: no-repeat;
1772
- background-position: 50% 50%;
1773
- }
1774
- .player-poster[data-poster].clickable {
1775
- cursor: pointer;
1681
+ float: left;
1682
+ font-size: 14px;
1683
+ color: white;
1684
+ cursor: default;
1685
+ line-height: var(--bottom-panel);
1686
+ position: relative;
1776
1687
  }
1777
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1778
- opacity: 1;
1688
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1689
+ margin: 1px 6px 0 7px;
1779
1690
  }
1780
- .player-poster[data-poster] .play-wrapper[data-poster] {
1781
- width: 100%;
1782
- height: 25%;
1783
- margin: 0 auto;
1784
- opacity: 0.75;
1785
- transition: opacity 0.1s ease;
1691
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1692
+ color: rgb(255, 255, 255);
1693
+ opacity: 0.5;
1694
+ margin-top: 1px;
1695
+ margin-right: 6px;
1786
1696
  }
1787
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
1788
- height: 100%;
1789
- display: inline;
1697
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1698
+ content: "|";
1699
+ margin-right: 7px;
1790
1700
  }
1791
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1792
- fill: #fff;
1793
- }*, :focus, :visited {
1794
- outline: none !important;
1701
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container {
1702
+ display: none;
1795
1703
  }
1796
-
1797
- .multicamera[data-multicamera] {
1798
- float: right;
1799
- margin-top: 4px;
1704
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1705
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1706
+ text-overflow: ellipsis;
1707
+ white-space: nowrap;
1708
+ overflow: hidden;
1709
+ display: inline-block;
1710
+ float: left;
1711
+ font-size: 14px;
1712
+ color: white;
1713
+ cursor: default;
1714
+ line-height: var(--bottom-panel);
1800
1715
  position: relative;
1801
- margin-right: 20px;
1802
- width: 20px;
1803
1716
  }
1804
- .multicamera[data-multicamera] button {
1805
- background-color: transparent;
1806
- color: #fff;
1807
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1808
- -webkit-font-smoothing: antialiased;
1809
- border: none;
1810
- font-size: 14px;
1811
- padding: 0;
1717
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1718
+ margin-right: 6px;
1812
1719
  }
1813
- .multicamera[data-multicamera] button svg {
1720
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1721
+ max-width: calc(80% - 240px);
1722
+ }
1723
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1724
+ position: absolute;
1725
+ top: -11px;
1726
+ left: 0;
1727
+ display: inline-block;
1728
+ vertical-align: middle;
1729
+ width: 100%;
1814
1730
  height: 20px;
1731
+ cursor: pointer;
1732
+ }
1733
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1734
+ width: 100%;
1735
+ height: 3px;
1815
1736
  position: relative;
1816
- margin-top: 6px;
1737
+ top: 8px;
1738
+ background-color: #666;
1817
1739
  }
1818
- .multicamera[data-multicamera] button:hover {
1819
- color: #c9c9c9;
1740
+ .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] {
1741
+ position: absolute;
1742
+ top: 0;
1743
+ left: 0;
1744
+ width: 0;
1745
+ height: 100%;
1746
+ background-color: white;
1747
+ transition: all 0.1s ease-out;
1820
1748
  }
1821
- .multicamera[data-multicamera] button.changing {
1822
- animation: pulse 0.5s infinite alternate;
1749
+ .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] {
1750
+ position: absolute;
1751
+ top: 0;
1752
+ left: 0;
1753
+ width: 0;
1754
+ height: 100%;
1755
+ background-color: #ff5700;
1756
+ transition: all 0.1s ease-out;
1823
1757
  }
1824
- .multicamera[data-multicamera] button span.quality-arrow {
1825
- width: 9px;
1826
- height: 6px;
1827
- margin-top: 11px;
1828
- margin-left: 5px;
1758
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1759
+ cursor: default;
1760
+ display: none;
1829
1761
  }
1830
- .multicamera[data-multicamera] > ul {
1831
- padding: 6px 0;
1832
- right: -24px;
1833
- width: 245px;
1834
- list-style-type: none;
1835
- position: absolute;
1836
- bottom: 48px;
1837
- border-radius: 4px;
1762
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1763
+ cursor: default;
1838
1764
  display: none;
1839
- background-color: rgba(74, 74, 74, 0.9);
1840
1765
  }
1841
- .multicamera[data-multicamera] > ul::after {
1842
- content: "";
1766
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1843
1767
  position: absolute;
1844
- top: 100%;
1845
- left: 85%;
1846
- margin-left: -10px;
1847
- width: 0;
1848
- height: 0;
1849
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1850
- border-right: 10px solid transparent;
1851
- border-left: 10px solid transparent;
1852
- }
1853
- .multicamera[data-multicamera] li {
1854
- font-size: 10px;
1855
- cursor: pointer;
1768
+ transform: translateX(-50%);
1769
+ top: -11.5px;
1770
+ left: 0;
1771
+ width: 20px;
1772
+ height: 20px;
1773
+ opacity: 1;
1774
+ transition: all 0.1s ease-out;
1856
1775
  }
1857
- .multicamera[data-multicamera] li .multicamera-item {
1858
- display: flex;
1859
- padding: 10px 0;
1860
- justify-content: center;
1861
- position: relative;
1776
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1777
+ position: absolute;
1778
+ left: 4.5px;
1779
+ top: 4.5px;
1780
+ width: 11px;
1781
+ height: 11px;
1782
+ border-radius: 50%;
1783
+ background-color: white;
1862
1784
  }
1863
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1864
- pointer-events: none;
1785
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1786
+ float: left;
1787
+ display: inline-block;
1788
+ height: var(--bottom-panel);
1789
+ cursor: pointer;
1790
+ box-sizing: border-box;
1791
+ margin-right: 20px;
1865
1792
  }
1866
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1867
- opacity: 0.5;
1793
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1794
+ float: left;
1795
+ bottom: 0;
1868
1796
  }
1869
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1870
- opacity: 0.5;
1797
+ .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] {
1798
+ background-color: transparent;
1799
+ border: 0;
1800
+ box-sizing: content-box;
1801
+ height: var(--bottom-panel);
1802
+ width: 20px;
1871
1803
  }
1872
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1873
- background-color: rgba(0, 0, 0, 0);
1804
+ .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 {
1805
+ height: 20px;
1806
+ position: relative;
1807
+ top: 3px;
1808
+ margin-top: 7px;
1874
1809
  }
1875
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1876
- background-color: rgba(0, 0, 0, 0.3);
1810
+ .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 {
1811
+ fill: white;
1877
1812
  }
1878
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1879
- width: 80px;
1880
- height: 60px;
1813
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1814
+ margin-left: 2px;
1881
1815
  }
1882
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1816
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1817
+ float: left;
1818
+ position: relative;
1819
+ margin-left: 10px;
1820
+ top: 8px;
1883
1821
  width: 80px;
1884
- height: 60px;
1822
+ height: 23px;
1823
+ padding: 3px 0;
1824
+ transition: width 0.2s ease-out;
1885
1825
  }
1886
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1887
- width: 120px;
1888
- text-align: left;
1889
- margin-left: 15px;
1826
+ .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] {
1827
+ height: 3px;
1828
+ border-radius: 100px;
1829
+ position: relative;
1830
+ top: 7px;
1831
+ background-color: #666;
1890
1832
  }
1891
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1892
- width: 120px;
1893
- height: 20px;
1894
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1895
- font-size: 14px;
1896
- font-weight: normal;
1897
- font-style: normal;
1898
- font-stretch: normal;
1899
- line-height: 1.43;
1900
- letter-spacing: normal;
1901
- text-align: left;
1902
- color: #fff;
1903
- text-overflow: ellipsis;
1904
- overflow: hidden;
1833
+ .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] {
1834
+ position: absolute;
1835
+ top: 0;
1836
+ left: 0;
1837
+ width: 0;
1838
+ height: 100%;
1839
+ border-radius: 100px;
1840
+ background-color: white;
1841
+ transition: all 0.1s ease-out;
1905
1842
  }
1906
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1907
- opacity: 0.6;
1843
+ .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] {
1844
+ position: absolute;
1845
+ top: 0;
1846
+ left: 0;
1847
+ width: 0;
1848
+ height: 100%;
1849
+ background-color: #005aff;
1850
+ transition: all 0.1s ease-out;
1908
1851
  }
1909
- .multicamera[data-multicamera] li[data-title] {
1910
- background-color: #c3c2c2;
1911
- padding: 5px;
1852
+ .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] {
1853
+ position: absolute;
1854
+ transform: translateX(-50%);
1855
+ top: 3px;
1856
+ margin-left: 3px;
1857
+ width: 16px;
1858
+ height: 16px;
1859
+ opacity: 1;
1860
+ transition: all 0.1s ease-out;
1912
1861
  }
1913
- .multicamera[data-multicamera] li a {
1914
- color: #444;
1915
- padding: 2px 10px;
1916
- display: block;
1917
- text-decoration: none;
1862
+ .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] {
1863
+ position: absolute;
1864
+ left: 3px;
1865
+ top: 5px;
1866
+ width: 7px;
1867
+ height: 7px;
1868
+ border-radius: 50%;
1869
+ background-color: white;
1918
1870
  }
1919
- .multicamera[data-multicamera] li a:hover {
1920
- background-color: #555;
1921
- color: white;
1871
+ .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] {
1872
+ float: left;
1873
+ width: 4px;
1874
+ padding-left: 2px;
1875
+ height: 12px;
1876
+ opacity: 0.5;
1877
+ box-shadow: inset 2px 0 0 white;
1878
+ transition: transform 0.2s ease-out;
1922
1879
  }
1923
- .multicamera[data-multicamera] li a:hover a {
1924
- color: white;
1925
- text-decoration: none;
1880
+ .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 {
1881
+ box-shadow: inset 2px 0 0 #fff;
1882
+ opacity: 1;
1926
1883
  }
1927
- .multicamera[data-multicamera] li.current a {
1928
- color: #f00;
1884
+ .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) {
1885
+ padding-left: 0;
1929
1886
  }
1930
-
1931
- @keyframes pulse {
1932
- 0% {
1933
- color: #fff;
1934
- }
1935
- 50% {
1936
- color: #ff0101;
1937
- }
1938
- 100% {
1939
- color: #B80000;
1940
- }
1941
- }.level-disabled {
1942
- opacity: 0.5;
1943
- pointer-events: none;
1887
+ .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 {
1888
+ transform: scaleY(1.5);
1944
1889
  }.spinner-three-bounce[data-spinner] {
1945
1890
  position: absolute;
1946
1891
  width: 70px;
@@ -1979,34 +1924,159 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1979
1924
  40% {
1980
1925
  transform: scale(1);
1981
1926
  }
1982
- }.media-control-pip button {
1983
- float: right;
1984
- height: 40px;
1985
- margin-right: 20px;
1927
+ }.share_plugin[data-share] {
1928
+ pointer-events: auto;
1929
+ z-index: 5;
1930
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1986
1931
  }
1987
- .media-control-pip button svg {
1988
- height: 20px;
1989
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1990
- height: 0;
1932
+ .share_plugin[data-share].share-hide .share-button-container {
1933
+ right: -50px;
1991
1934
  }
1992
-
1993
- .skip_time_plugin[data-skip-time] {
1935
+ .share_plugin[data-share] .share-button-container {
1936
+ cursor: pointer;
1937
+ width: 36px;
1938
+ height: 36px;
1939
+ background-color: rgba(74, 74, 74, 0.6);
1940
+ border-radius: 4px;
1994
1941
  position: absolute;
1995
- width: 100%;
1996
- height: calc(100% - 50px);
1997
- z-index: 9998;
1942
+ right: 10px;
1943
+ top: 10px;
1944
+ padding-top: 6px;
1945
+ transition: all 0.3s ease-out;
1946
+ }
1947
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1998
1948
  background-color: transparent;
1999
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1949
+ border: 0;
1950
+ margin: 0 6px;
1951
+ padding: 0;
1952
+ cursor: pointer;
1953
+ display: inline-block;
1954
+ width: 19px;
1955
+ height: 20px;
2000
1956
  }
2001
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1957
+ .share_plugin[data-share] .share-container {
1958
+ pointer-events: auto;
1959
+ position: absolute;
1960
+ width: 280px;
1961
+ background-color: white;
1962
+ transform: translate(0, 50%);
1963
+ transform: translate(-50%, -50%);
1964
+ left: 50%;
1965
+ /* margin-left: -140px; */
1966
+ top: calc(50% - 20px);
1967
+ /* margin-top: -170px; */
1968
+ }
1969
+ .share_plugin[data-share] .share-container .share-container-header {
1970
+ text-align: left;
1971
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1972
+ }
1973
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1974
+ display: inline-block;
1975
+ font-size: 16px;
1976
+ margin: 5px;
1977
+ }
1978
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1979
+ display: inline-block;
1980
+ width: 24px;
1981
+ float: right;
1982
+ margin: 5px;
1983
+ cursor: pointer;
1984
+ }
1985
+ .share_plugin[data-share] .share-container .share-container-main {
1986
+ margin-bottom: 8px;
1987
+ }
1988
+ .share_plugin[data-share] .share-container .share-container-main > div {
1989
+ text-align: left;
1990
+ font-size: 14px;
1991
+ padding: 5px;
1992
+ }
1993
+ .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 {
1994
+ overflow: hidden;
1995
+ text-overflow: ellipsis;
1996
+ color: #818181;
1997
+ border: solid 1px #d3d3d3;
1998
+ width: calc(100% - 10px);
1999
+ padding: 5px;
2000
+ }
2001
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
2002
+ max-height: 90px;
2003
+ resize: none;
2004
+ }
2005
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
2006
+ width: 32px;
2007
+ display: inline-block;
2008
+ margin-right: 5px;
2009
+ cursor: pointer;
2010
+ }.scrub-thumbnails {
2011
+ position: absolute;
2012
+ bottom: 52px;
2002
2013
  width: 100%;
2014
+ transition: opacity 0.3s ease;
2015
+ }
2016
+ .scrub-thumbnails.hidden {
2017
+ opacity: 0;
2018
+ }
2019
+ .scrub-thumbnails .thumbnail-container {
2020
+ display: inline-block;
2021
+ position: relative;
2022
+ overflow: hidden;
2023
+ background-color: #000;
2024
+ }
2025
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
2026
+ position: absolute;
2027
+ width: auto;
2028
+ }
2029
+ .scrub-thumbnails .thumbnails-text {
2030
+ background-color: rgba(74, 74, 74, 0.7);
2031
+ border-radius: 3px;
2032
+ white-space: nowrap;
2033
+ overflow: hidden;
2034
+ text-overflow: ellipsis;
2035
+ color: white;
2036
+ position: absolute;
2037
+ bottom: 23px;
2038
+ width: 100px;
2039
+ }
2040
+ .scrub-thumbnails .spotlight {
2041
+ background-color: #4a4a4a;
2042
+ overflow: hidden;
2043
+ position: absolute;
2044
+ bottom: 0;
2045
+ left: 0;
2046
+ border-color: #4a4a4a;
2047
+ border-style: solid;
2048
+ border-width: 3px;
2049
+ border-radius: 3px;
2050
+ }
2051
+ .scrub-thumbnails .spotlight img {
2052
+ width: auto;
2053
+ }
2054
+ .scrub-thumbnails .backdrop {
2055
+ position: absolute;
2056
+ left: 0;
2057
+ bottom: 0;
2058
+ right: 0;
2059
+ background-color: #000;
2060
+ overflow: hidden;
2061
+ }
2062
+ .scrub-thumbnails .backdrop .carousel {
2063
+ position: absolute;
2064
+ top: 0;
2065
+ left: 0;
2003
2066
  height: 100%;
2004
- display: flex;
2005
- justify-content: space-between;
2067
+ white-space: nowrap;
2006
2068
  }
2007
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
2008
- width: 33.3%;
2069
+ .scrub-thumbnails .backdrop .carousel img {
2070
+ width: auto;
2071
+ }.player-logo[data-logo] {
2072
+ position: absolute;
2073
+ z-index: 2;
2074
+ width: 100%;
2009
2075
  height: 100%;
2076
+ }
2077
+
2078
+ .clappr-logo {
2079
+ position: absolute;
2010
2080
  }*, :focus, :visited {
2011
2081
  outline: none !important;
2012
2082
  }
@@ -2088,74 +2158,4 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2088
2158
  .ios-fullscreen::cue {
2089
2159
  visibility: visible !important;
2090
2160
  font-size: 1em !important;
2091
- }.scrub-thumbnails {
2092
- position: absolute;
2093
- bottom: 52px;
2094
- width: 100%;
2095
- transition: opacity 0.3s ease;
2096
- }
2097
- .scrub-thumbnails.hidden {
2098
- opacity: 0;
2099
- }
2100
- .scrub-thumbnails .thumbnail-container {
2101
- display: inline-block;
2102
- position: relative;
2103
- overflow: hidden;
2104
- background-color: #000;
2105
- }
2106
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
2107
- position: absolute;
2108
- width: auto;
2109
- }
2110
- .scrub-thumbnails .thumbnails-text {
2111
- background-color: rgba(74, 74, 74, 0.7);
2112
- border-radius: 3px;
2113
- white-space: nowrap;
2114
- overflow: hidden;
2115
- text-overflow: ellipsis;
2116
- color: white;
2117
- position: absolute;
2118
- bottom: 23px;
2119
- width: 100px;
2120
- }
2121
- .scrub-thumbnails .spotlight {
2122
- background-color: #4a4a4a;
2123
- overflow: hidden;
2124
- position: absolute;
2125
- bottom: 0;
2126
- left: 0;
2127
- border-color: #4a4a4a;
2128
- border-style: solid;
2129
- border-width: 3px;
2130
- border-radius: 3px;
2131
- }
2132
- .scrub-thumbnails .spotlight img {
2133
- width: auto;
2134
- }
2135
- .scrub-thumbnails .backdrop {
2136
- position: absolute;
2137
- left: 0;
2138
- bottom: 0;
2139
- right: 0;
2140
- background-color: #000;
2141
- overflow: hidden;
2142
- }
2143
- .scrub-thumbnails .backdrop .carousel {
2144
- position: absolute;
2145
- top: 0;
2146
- left: 0;
2147
- height: 100%;
2148
- white-space: nowrap;
2149
- }
2150
- .scrub-thumbnails .backdrop .carousel img {
2151
- width: auto;
2152
- }.player-logo[data-logo] {
2153
- position: absolute;
2154
- z-index: 2;
2155
- width: 100%;
2156
- height: 100%;
2157
- }
2158
-
2159
- .clappr-logo {
2160
- position: absolute;
2161
2161
  }