@gcorevideo/player 2.22.1 → 2.22.2

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