@gcorevideo/player 2.19.9 → 2.19.11

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.
@@ -122,136 +122,143 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }.context-menu {
126
- z-index: 999;
127
- position: absolute;
128
- top: 0;
129
- left: 0;
130
- text-align: center;
125
+ }*, :focus, :visited {
126
+ outline: none !important;
131
127
  }
132
- .context-menu .context-menu-list {
133
- font-family: "Proxima Nova", sans-serif;
134
- font-size: 12px;
135
- line-height: 12px;
136
- list-style-type: none;
137
- text-align: left;
138
- padding: 5px;
139
- margin-left: auto;
140
- margin-right: auto;
141
- background-color: rgba(0, 0, 0, 0.75);
142
- border: 1px solid #666;
143
- border-radius: 4px;
128
+
129
+ .audio_selector[data-track-selector] {
130
+ float: right;
131
+ margin-top: 4px;
132
+ position: relative;
133
+ width: 50px;
134
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
144
135
  }
145
- .context-menu .context-menu-list .context-menu-list-item {
146
- color: white;
147
- padding: 5px;
148
- cursor: pointer;
149
- }.dvr-controls[data-dvr-controls] {
150
- display: inline-block;
151
- float: left;
136
+ .audio_selector[data-track-selector] button {
137
+ background-color: transparent;
152
138
  color: #fff;
153
- line-height: 32px;
154
- font-size: 10px;
155
- font-weight: bold;
156
- margin-left: 6px;
139
+ -webkit-font-smoothing: antialiased;
140
+ border: none;
141
+ font-size: 14px;
142
+ cursor: pointer;
157
143
  }
158
- .dvr-controls[data-dvr-controls] .live-info {
159
- cursor: default;
160
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
161
- text-transform: uppercase;
144
+ .audio_selector[data-track-selector] button .audio-text {
145
+ text-overflow: ellipsis;
146
+ overflow: hidden;
147
+ white-space: nowrap;
148
+ max-width: 100px;
149
+ background-color: transparent;
150
+ -webkit-font-smoothing: antialiased;
151
+ border: none;
152
+ font-size: 14px;
153
+ cursor: pointer;
154
+ padding-top: 5px;
162
155
  }
163
- .dvr-controls[data-dvr-controls] .live-info:before {
164
- content: "";
165
- display: inline-block;
166
- position: relative;
167
- width: 7px;
168
- height: 7px;
169
- border-radius: 3.5px;
170
- margin-right: 3.5px;
171
- background-color: #ff0101;
156
+ .audio_selector[data-track-selector] button:hover {
157
+ color: #c9c9c9;
172
158
  }
173
- .dvr-controls[data-dvr-controls] .live-info.disabled {
174
- opacity: 0.3;
159
+ .audio_selector[data-track-selector] button.changing {
160
+ animation: pulse 0.5s infinite alternate;
175
161
  }
176
- .dvr-controls[data-dvr-controls] .live-info.disabled:before {
177
- background-color: #fff;
162
+ .audio_selector[data-track-selector] button span.audio-arrow {
163
+ width: 9px;
164
+ height: 6px;
165
+ margin-top: 11px;
166
+ margin-left: 5px;
178
167
  }
179
- .dvr-controls[data-dvr-controls] .live-button {
180
- cursor: pointer;
181
- outline: none;
168
+ .audio_selector[data-track-selector] > ul {
169
+ max-width: 114px;
170
+ list-style-type: none;
171
+ position: absolute;
172
+ bottom: 25px;
173
+ border: 1px solid black;
182
174
  display: none;
183
- border: 0;
184
- color: #fff;
185
- background-color: transparent;
186
- height: 32px;
187
- padding: 0;
188
- opacity: 0.7;
189
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
190
- text-transform: uppercase;
191
- transition: all 0.1s ease;
175
+ background-color: #e6e6e6;
192
176
  }
193
- .dvr-controls[data-dvr-controls] .live-button:before {
194
- content: "";
195
- display: inline-block;
196
- position: relative;
197
- width: 7px;
198
- height: 7px;
199
- border-radius: 3.5px;
200
- margin-right: 3.5px;
201
- background-color: #fff;
177
+ .audio_selector[data-track-selector] li {
178
+ font-size: 10px;
202
179
  }
203
- .dvr-controls[data-dvr-controls] .live-button:hover {
204
- opacity: 1;
205
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
180
+ .audio_selector[data-track-selector] li[data-title] {
181
+ background-color: #c3c2c2;
182
+ padding: 5px;
183
+ }
184
+ .audio_selector[data-track-selector] li a {
185
+ color: #444;
186
+ padding: 2px 10px;
187
+ display: block;
188
+ text-decoration: none;
189
+ text-overflow: ellipsis;
190
+ overflow: hidden;
191
+ white-space: nowrap;
192
+ }
193
+ .audio_selector[data-track-selector] li a:hover {
194
+ background-color: #555;
195
+ color: white;
196
+ }
197
+ .audio_selector[data-track-selector] li a:hover a {
198
+ color: white;
199
+ text-decoration: none;
200
+ }
201
+ .audio_selector[data-track-selector] li.current a {
202
+ color: #f00;
206
203
  }
207
204
 
208
- .dvr-controls[data-dvr-controls] {
209
- height: 40px;
210
- line-height: 40px;
211
- margin-left: 0;
205
+ .audio_selector[data-track-selector] {
206
+ width: auto;
207
+ margin-top: 7px;
208
+ margin-right: 20px;
212
209
  }
213
- .dvr-controls[data-dvr-controls] .live-info {
214
- font-size: 14px;
215
- letter-spacing: 0.8px;
216
- font-weight: 500;
217
- color: #fffffe;
218
- margin-left: 21px;
210
+ .audio_selector[data-track-selector] button[data-level-selector-button],
211
+ .audio_selector[data-track-selector] button[data-track-selector-button] {
212
+ display: flex;
213
+ justify-content: center;
214
+ padding: 0;
219
215
  }
220
- .dvr-controls[data-dvr-controls] .live-info::before {
221
- width: 10px;
222
- height: 10px;
223
- border-radius: 50%;
224
- margin-right: 8px;
225
- background-color: #ed4f4a;
216
+ .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
217
+ .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
218
+ color: white;
226
219
  }
227
- .dvr-controls[data-dvr-controls] .live-button {
228
- height: 40px;
229
- opacity: 1;
230
- font-size: 14px;
231
- letter-spacing: 0.8px;
232
- font-weight: 500;
233
- margin-left: 20px;
220
+ .audio_selector[data-track-selector] ul {
221
+ background-color: rgba(74, 74, 74, 0.6);
222
+ border: none;
223
+ min-width: 60px;
224
+ transform: rotate(180deg);
225
+ border-radius: 4px;
226
+ bottom: 40px;
227
+ right: -2px;
234
228
  }
235
- .dvr-controls[data-dvr-controls] .live-button::before {
236
- width: 10px;
237
- height: 10px;
238
- border-radius: 50%;
239
- margin-right: 8px;
240
- background-color: #cacaca;
229
+ .audio_selector[data-track-selector] ul li {
230
+ transform: rotate(-180deg);
231
+ font-size: 16px;
232
+ text-align: right;
233
+ height: 30px;
241
234
  }
242
-
243
- .dvr .dvr-controls[data-dvr-controls] .live-info {
244
- display: none;
235
+ .audio_selector[data-track-selector] ul li a {
236
+ height: 30px;
237
+ padding: 5px 10px;
238
+ color: #fffffe;
245
239
  }
246
- .dvr .dvr-controls[data-dvr-controls] .live-button {
247
- display: block;
240
+ .audio_selector[data-track-selector] ul li a:hover {
241
+ background-color: rgba(0, 0, 0, 0.4);
248
242
  }
249
- .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
250
- background-color: #005aff;
243
+ .audio_selector[data-track-selector] ul li:first-child a {
244
+ border-bottom-left-radius: 4px;
245
+ border-bottom-right-radius: 4px;
246
+ }
247
+ .audio_selector[data-track-selector] ul li:last-child a {
248
+ border-top-left-radius: 4px;
249
+ border-top-right-radius: 4px;
251
250
  }
252
251
 
253
- .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
254
- background-color: #ff0101;
252
+ @keyframes pulse {
253
+ 0% {
254
+ color: #fff;
255
+ }
256
+ 50% {
257
+ color: #ff0101;
258
+ }
259
+ 100% {
260
+ color: #B80000;
261
+ }
255
262
  }:root {
256
263
  --primary-background-color: #000;
257
264
  --secondary-background-color: #262626;
@@ -634,145 +641,188 @@
634
641
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
635
642
  width: 25%;
636
643
  }
637
- }.clips.bar-container[data-seekbar] {
638
- clip-path: url("#myClip");
639
- }*, :focus, :visited {
640
- outline: none !important;
644
+ }.context-menu {
645
+ z-index: 999;
646
+ position: absolute;
647
+ top: 0;
648
+ left: 0;
649
+ text-align: center;
641
650
  }
642
-
643
- .audio_selector[data-track-selector] {
644
- float: right;
645
- margin-top: 4px;
646
- position: relative;
647
- width: 50px;
648
- font-family: Roboto, "Open Sans", Arial, sans-serif;
651
+ .context-menu .context-menu-list {
652
+ font-family: "Proxima Nova", sans-serif;
653
+ font-size: 12px;
654
+ line-height: 12px;
655
+ list-style-type: none;
656
+ text-align: left;
657
+ padding: 5px;
658
+ margin-left: auto;
659
+ margin-right: auto;
660
+ background-color: rgba(0, 0, 0, 0.75);
661
+ border: 1px solid #666;
662
+ border-radius: 4px;
649
663
  }
650
- .audio_selector[data-track-selector] button {
651
- background-color: transparent;
652
- color: #fff;
653
- -webkit-font-smoothing: antialiased;
654
- border: none;
655
- font-size: 14px;
664
+ .context-menu .context-menu-list .context-menu-list-item {
665
+ color: white;
666
+ padding: 5px;
656
667
  cursor: pointer;
657
- }
658
- .audio_selector[data-track-selector] button .audio-text {
659
- text-overflow: ellipsis;
660
- overflow: hidden;
661
- white-space: nowrap;
662
- max-width: 100px;
668
+ }.level-disabled {
669
+ opacity: 0.5;
670
+ pointer-events: none;
671
+ }.big-mute-icon-wrapper[data-big-mute] {
672
+ position: absolute;
673
+ z-index: 9998;
663
674
  background-color: transparent;
664
- -webkit-font-smoothing: antialiased;
665
- border: none;
666
- font-size: 14px;
667
- cursor: pointer;
668
- padding-top: 5px;
675
+ display: flex;
676
+ justify-content: center;
677
+ width: 100%;
678
+ height: calc(100% - 50px);
679
+ margin: 0 auto;
680
+ opacity: 0.75;
681
+ transition: opacity 0.1s ease;
682
+ pointer-events: auto;
669
683
  }
670
- .audio_selector[data-track-selector] button:hover {
671
- color: #c9c9c9;
684
+ .big-mute-icon-wrapper[data-big-mute].hide {
685
+ display: none;
672
686
  }
673
- .audio_selector[data-track-selector] button.changing {
674
- animation: pulse 0.5s infinite alternate;
687
+ .big-mute-icon-wrapper[data-big-mute]:hover {
688
+ cursor: pointer;
675
689
  }
676
- .audio_selector[data-track-selector] button span.audio-arrow {
677
- width: 9px;
678
- height: 6px;
679
- margin-top: 11px;
680
- margin-left: 5px;
690
+
691
+ .big-mute-icon[data-big-mute-icon] {
692
+ display: flex;
693
+ align-items: center;
694
+ justify-content: center;
695
+ align-self: center;
696
+ width: 120px;
697
+ height: 120px;
698
+ border: 2px solid white;
699
+ border-radius: 50%;
700
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
701
+ filter: alpha(opacity=60);
702
+ opacity: 1;
703
+ box-shadow: 0 0 1px 0 white;
704
+ background: rgba(240, 243, 247, 0.9411764706);
705
+ z-index: 10000;
681
706
  }
682
- .audio_selector[data-track-selector] > ul {
683
- max-width: 114px;
684
- list-style-type: none;
685
- position: absolute;
686
- bottom: 25px;
687
- border: 1px solid black;
688
- display: none;
689
- background-color: #e6e6e6;
707
+ .big-mute-icon[data-big-mute-icon] svg {
708
+ margin-left: 5px;
709
+ width: 80px;
710
+ height: 80px;
690
711
  }
691
- .audio_selector[data-track-selector] li {
692
- font-size: 10px;
712
+ .big-mute-icon[data-big-mute-icon] svg path {
713
+ fill: #1f1e1e !important;
693
714
  }
694
- .audio_selector[data-track-selector] li[data-title] {
695
- background-color: #c3c2c2;
696
- padding: 5px;
715
+ .big-mute-icon[data-big-mute-icon]:hover {
716
+ background: rgba(240, 243, 247, 0.8784313725);
697
717
  }
698
- .audio_selector[data-track-selector] li a {
699
- color: #444;
700
- padding: 2px 10px;
701
- display: block;
702
- text-decoration: none;
703
- text-overflow: ellipsis;
704
- overflow: hidden;
705
- white-space: nowrap;
718
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
719
+ fill: #151515 !important;
720
+ }.dvr-controls[data-dvr-controls] {
721
+ display: inline-block;
722
+ float: left;
723
+ color: #fff;
724
+ line-height: 32px;
725
+ font-size: 10px;
726
+ font-weight: bold;
727
+ margin-left: 6px;
706
728
  }
707
- .audio_selector[data-track-selector] li a:hover {
708
- background-color: #555;
709
- color: white;
729
+ .dvr-controls[data-dvr-controls] .live-info {
730
+ cursor: default;
731
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
732
+ text-transform: uppercase;
710
733
  }
711
- .audio_selector[data-track-selector] li a:hover a {
712
- color: white;
713
- text-decoration: none;
734
+ .dvr-controls[data-dvr-controls] .live-info:before {
735
+ content: "";
736
+ display: inline-block;
737
+ position: relative;
738
+ width: 7px;
739
+ height: 7px;
740
+ border-radius: 3.5px;
741
+ margin-right: 3.5px;
742
+ background-color: #ff0101;
714
743
  }
715
- .audio_selector[data-track-selector] li.current a {
716
- color: #f00;
744
+ .dvr-controls[data-dvr-controls] .live-info.disabled {
745
+ opacity: 0.3;
717
746
  }
718
-
719
- .audio_selector[data-track-selector] {
720
- width: auto;
721
- margin-top: 7px;
722
- margin-right: 20px;
747
+ .dvr-controls[data-dvr-controls] .live-info.disabled:before {
748
+ background-color: #fff;
723
749
  }
724
- .audio_selector[data-track-selector] button[data-level-selector-button],
725
- .audio_selector[data-track-selector] button[data-track-selector-button] {
726
- display: flex;
727
- justify-content: center;
750
+ .dvr-controls[data-dvr-controls] .live-button {
751
+ cursor: pointer;
752
+ outline: none;
753
+ display: none;
754
+ border: 0;
755
+ color: #fff;
756
+ background-color: transparent;
757
+ height: 32px;
728
758
  padding: 0;
759
+ opacity: 0.7;
760
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
761
+ text-transform: uppercase;
762
+ transition: all 0.1s ease;
729
763
  }
730
- .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
731
- .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
732
- color: white;
764
+ .dvr-controls[data-dvr-controls] .live-button:before {
765
+ content: "";
766
+ display: inline-block;
767
+ position: relative;
768
+ width: 7px;
769
+ height: 7px;
770
+ border-radius: 3.5px;
771
+ margin-right: 3.5px;
772
+ background-color: #fff;
733
773
  }
734
- .audio_selector[data-track-selector] ul {
735
- background-color: rgba(74, 74, 74, 0.6);
736
- border: none;
737
- min-width: 60px;
738
- transform: rotate(180deg);
739
- border-radius: 4px;
740
- bottom: 40px;
741
- right: -2px;
774
+ .dvr-controls[data-dvr-controls] .live-button:hover {
775
+ opacity: 1;
776
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
742
777
  }
743
- .audio_selector[data-track-selector] ul li {
744
- transform: rotate(-180deg);
745
- font-size: 16px;
746
- text-align: right;
747
- height: 30px;
778
+
779
+ .dvr-controls[data-dvr-controls] {
780
+ height: 40px;
781
+ line-height: 40px;
782
+ margin-left: 0;
748
783
  }
749
- .audio_selector[data-track-selector] ul li a {
750
- height: 30px;
751
- padding: 5px 10px;
784
+ .dvr-controls[data-dvr-controls] .live-info {
785
+ font-size: 14px;
786
+ letter-spacing: 0.8px;
787
+ font-weight: 500;
752
788
  color: #fffffe;
789
+ margin-left: 21px;
753
790
  }
754
- .audio_selector[data-track-selector] ul li a:hover {
755
- background-color: rgba(0, 0, 0, 0.4);
791
+ .dvr-controls[data-dvr-controls] .live-info::before {
792
+ width: 10px;
793
+ height: 10px;
794
+ border-radius: 50%;
795
+ margin-right: 8px;
796
+ background-color: #ed4f4a;
756
797
  }
757
- .audio_selector[data-track-selector] ul li:first-child a {
758
- border-bottom-left-radius: 4px;
759
- border-bottom-right-radius: 4px;
798
+ .dvr-controls[data-dvr-controls] .live-button {
799
+ height: 40px;
800
+ opacity: 1;
801
+ font-size: 14px;
802
+ letter-spacing: 0.8px;
803
+ font-weight: 500;
804
+ margin-left: 20px;
760
805
  }
761
- .audio_selector[data-track-selector] ul li:last-child a {
762
- border-top-left-radius: 4px;
763
- border-top-right-radius: 4px;
806
+ .dvr-controls[data-dvr-controls] .live-button::before {
807
+ width: 10px;
808
+ height: 10px;
809
+ border-radius: 50%;
810
+ margin-right: 8px;
811
+ background-color: #cacaca;
764
812
  }
765
813
 
766
- @keyframes pulse {
767
- 0% {
768
- color: #fff;
769
- }
770
- 50% {
771
- color: #ff0101;
772
- }
773
- 100% {
774
- color: #B80000;
775
- }
814
+ .dvr .dvr-controls[data-dvr-controls] .live-info {
815
+ display: none;
816
+ }
817
+ .dvr .dvr-controls[data-dvr-controls] .live-button {
818
+ display: block;
819
+ }
820
+ .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
821
+ background-color: #005aff;
822
+ }
823
+
824
+ .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
825
+ background-color: #ff0101;
776
826
  }.media-control-pip button {
777
827
  float: right;
778
828
  height: 40px;
@@ -780,125 +830,87 @@
780
830
  }
781
831
  .media-control-pip button svg {
782
832
  height: 20px;
783
- }.share_plugin[data-share] {
784
- pointer-events: auto;
785
- z-index: 5;
786
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
833
+ }div.player-error-screen, [data-player] div.player-error-screen {
834
+ color: #CCCACA;
835
+ position: absolute;
836
+ top: 0;
837
+ height: 100%;
838
+ width: 100%;
839
+ background-color: rgba(0, 0, 0, 0.7);
840
+ z-index: 2000;
841
+ display: flex;
842
+ flex-direction: column;
843
+ justify-content: center;
787
844
  }
788
- .share_plugin[data-share].share-hide .share-button-container {
789
- right: -50px;
845
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
846
+ font-size: 14px;
847
+ color: #CCCACA;
848
+ margin-top: 45px;
790
849
  }
791
- .share_plugin[data-share] .share-button-container {
792
- cursor: pointer;
793
- width: 36px;
794
- height: 36px;
795
- background-color: rgba(74, 74, 74, 0.6);
796
- border-radius: 4px;
797
- position: absolute;
798
- right: 10px;
799
- top: 10px;
800
- padding-top: 6px;
801
- transition: all 0.3s ease-out;
802
- }
803
- .share_plugin[data-share] .share-button-container button[data-share-button] {
804
- background-color: transparent;
805
- border: 0;
806
- margin: 0 6px;
807
- padding: 0;
808
- cursor: pointer;
809
- display: inline-block;
810
- width: 19px;
811
- height: 20px;
812
- }
813
- .share_plugin[data-share] .share-container {
814
- pointer-events: auto;
815
- position: absolute;
816
- width: 280px;
817
- background-color: white;
818
- transform: translate(0, 50%);
819
- transform: translate(-50%, -50%);
820
- left: 50%;
821
- /* margin-left: -140px; */
822
- top: calc(50% - 20px);
823
- /* margin-top: -170px; */
850
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
851
+ font-weight: bold;
852
+ line-height: 30px;
853
+ font-size: 18px;
824
854
  }
825
- .share_plugin[data-share] .share-container .share-container-header {
826
- text-align: left;
827
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
855
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
856
+ width: 90%;
857
+ margin: 0 auto;
828
858
  }
829
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
830
- display: inline-block;
831
- font-size: 16px;
832
- margin: 5px;
859
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
860
+ font-size: 13px;
861
+ margin-top: 15px;
833
862
  }
834
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
835
- display: inline-block;
836
- width: 24px;
837
- float: right;
838
- margin: 5px;
863
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
839
864
  cursor: pointer;
865
+ width: 30px;
866
+ margin: 15px auto 0;
867
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
868
+ float: right;
869
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
840
870
  }
841
- .share_plugin[data-share] .share-container .share-container-main {
842
- margin-bottom: 8px;
843
- }
844
- .share_plugin[data-share] .share-container .share-container-main > div {
845
- text-align: left;
846
- font-size: 14px;
847
- padding: 5px;
848
- }
849
- .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 {
850
- overflow: hidden;
851
- text-overflow: ellipsis;
852
- color: #818181;
853
- border: solid 1px #d3d3d3;
854
- width: calc(100% - 10px);
855
- padding: 5px;
871
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
872
+ height: 40px;
873
+ width: 40px;
874
+ padding-right: 20px;
856
875
  }
857
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
858
- max-height: 90px;
859
- resize: none;
876
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
877
+ height: 20px;
860
878
  }
861
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
862
- width: 32px;
863
- display: inline-block;
864
- margin-right: 5px;
865
- cursor: pointer;
866
- }.level-disabled {
867
- opacity: 0.5;
868
- pointer-events: none;
869
- }.seek-time[data-seek-time] {
879
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
870
880
  position: absolute;
871
- white-space: nowrap;
872
- height: 20px;
873
- line-height: 20px;
874
- font-size: 0;
875
- left: -100%;
876
- bottom: 55px;
877
- background-color: rgba(2, 2, 2, 0.5);
881
+ right: 16px;
882
+ bottom: 52px;
883
+ display: none;
884
+ width: 250px;
885
+ min-height: 48px;
878
886
  z-index: 9999;
879
- transition: opacity 0.1s ease;
887
+ border-radius: 4px;
880
888
  }
881
- .seek-time[data-seek-time].hidden[data-seek-time] {
882
- opacity: 0;
889
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
890
+ padding: 8px 0;
883
891
  }
884
- .seek-time[data-seek-time] [data-seek-time] {
885
- display: inline-block;
886
- color: white;
887
- font-size: 10px;
888
- padding-left: 7px;
889
- padding-right: 7px;
890
- vertical-align: top;
892
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
893
+ float: left;
894
+ margin-right: 10px;
891
895
  }
892
- .seek-time[data-seek-time] [data-duration] {
893
- display: inline-block;
894
- color: rgba(255, 255, 255, 0.5);
895
- font-size: 10px;
896
- padding-right: 7px;
897
- vertical-align: top;
896
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
897
+ margin: 0;
898
+ text-align: left;
899
+ line-height: 22px;
900
+ padding: 5px 14px;
901
+ width: 250px;
902
+ font-size: 12px;
898
903
  }
899
- .seek-time[data-seek-time] [data-duration]::before {
900
- content: "|";
901
- margin-right: 7px;
904
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
905
+ float: right;
906
+ margin-right: -14px;
907
+ }
908
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
909
+ float: right;
910
+ margin-right: 8px;
911
+ }
912
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
913
+ height: 20px;
902
914
  }*, :focus, :visited {
903
915
  outline: none !important;
904
916
  }
@@ -1047,76 +1059,202 @@
1047
1059
  100% {
1048
1060
  color: #B80000;
1049
1061
  }
1050
- }[data-player] {
1051
- --bottom-panel: 40px;
1062
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1063
+ height: 0;
1052
1064
  }
1053
1065
 
1054
- .container .media-control-notransition {
1055
- transition: none !important;
1066
+ .skip_time_plugin[data-skip-time] {
1067
+ position: absolute;
1068
+ width: 100%;
1069
+ height: calc(100% - 50px);
1070
+ z-index: 9998;
1071
+ background-color: transparent;
1072
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1056
1073
  }
1057
- .container .player-poster[data-poster] .play-wrapper[data-poster] {
1058
- opacity: 1;
1074
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1075
+ width: 100%;
1076
+ height: 100%;
1077
+ display: flex;
1078
+ justify-content: space-between;
1059
1079
  }
1060
- .container.crop-video [data-html5-video] {
1061
- object-fit: cover;
1080
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1081
+ width: 33.3%;
1082
+ height: 100%;
1083
+ }.clips.bar-container[data-seekbar] {
1084
+ clip-path: url("#myClip");
1085
+ }*, :focus, :visited {
1086
+ outline: none !important;
1062
1087
  }
1063
- .container .subtitle-string {
1064
- position: absolute;
1065
- bottom: calc(var(--bottom-panel) + 5px);
1088
+
1089
+ .gear-wrapper .go-back {
1090
+ font-weight: 600;
1091
+ font-size: 14px;
1092
+ line-height: 20px;
1066
1093
  width: 100%;
1094
+ text-align: left;
1095
+ padding: 12px;
1067
1096
  }
1068
- .container .subtitle-string p {
1069
- width: auto;
1070
- background-color: rgba(0, 0, 0, 0.4);
1071
- color: white;
1072
- display: inline-block;
1097
+ .gear-wrapper .go-back .arrow-left-icon {
1098
+ float: left;
1099
+ padding-top: 2px;
1100
+ padding-right: 2px;
1073
1101
  }
1074
- .container .circle-poster[data-poster] {
1075
- top: 50%;
1076
- margin-top: -60px;
1077
- left: 50%;
1078
- margin-left: -60px;
1079
- position: absolute;
1080
- width: 120px;
1081
- height: 120px;
1082
- border: 2px solid white;
1083
- border-radius: 50%;
1084
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1085
- filter: alpha(opacity=60);
1086
- opacity: 1;
1087
- box-shadow: 0 0 1px 0 white;
1102
+ .gear-wrapper .go-back .arrow-left-icon svg {
1103
+ height: 16px;
1088
1104
  }
1089
- .container .circle-poster[data-poster] svg {
1090
- margin-left: 5px;
1091
- width: 80px;
1092
- height: 80px;
1105
+ .gear-wrapper ul.gear-sub-menu {
1106
+ width: 100%;
1107
+ list-style-type: none;
1108
+ background-color: transparent;
1109
+ min-width: 60px;
1110
+ border-top: 2px solid rgb(36, 36, 36);
1093
1111
  }
1094
- .container .spinner-three-bounce[data-spinner] > div {
1095
- background-color: #ff5700;
1112
+ .gear-wrapper ul.gear-sub-menu li {
1113
+ font-size: 12px;
1114
+ text-align: left;
1096
1115
  }
1097
-
1098
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
1099
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audio-tracks {
1100
- display: none;
1116
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
1117
+ background-color: #c3c2c2;
1118
+ padding: 5px;
1101
1119
  }
1102
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1103
- transform: rotate(270deg);
1104
- float: none;
1120
+ .gear-wrapper ul.gear-sub-menu li a {
1105
1121
  display: block;
1106
- position: absolute;
1107
- /* bottom: 12px; */
1108
- margin: 0;
1109
- top: -40px;
1110
- padding: 0;
1111
- /* right: 20px; */
1112
- margin-left: -32px;
1113
- margin-top: -3px;
1114
- width: 80px;
1115
- /* padding-left: 12px; */
1122
+ text-decoration: none;
1123
+ height: 32px;
1124
+ padding: 5px 10px;
1125
+ line-height: 22px;
1126
+ color: #fffffe;
1116
1127
  }
1117
- .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 {
1118
- position: absolute;
1119
- width: 100%;
1128
+ .gear-wrapper ul.gear-sub-menu li a:hover {
1129
+ color: white;
1130
+ background-color: rgba(0, 0, 0, 0.4);
1131
+ }
1132
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
1133
+ color: white;
1134
+ text-decoration: none;
1135
+ }
1136
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
1137
+ width: 30px;
1138
+ height: 20px;
1139
+ float: left;
1140
+ display: block;
1141
+ }
1142
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
1143
+ display: none;
1144
+ }
1145
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1146
+ display: inline;
1147
+ }
1148
+ .gear-wrapper svg {
1149
+ height: 20px;
1150
+ }.spinner-three-bounce[data-spinner] {
1151
+ position: absolute;
1152
+ width: 70px;
1153
+ text-align: center;
1154
+ z-index: 999;
1155
+ left: 0;
1156
+ right: 0;
1157
+ margin: 0 auto;
1158
+ margin-left: auto;
1159
+ margin-right: auto;
1160
+ /* center vertically */
1161
+ top: 50%;
1162
+ transform: translateY(-50%);
1163
+ }
1164
+ .spinner-three-bounce[data-spinner] > div {
1165
+ width: 18px;
1166
+ height: 18px;
1167
+ background-color: #FFF;
1168
+ border-radius: 100%;
1169
+ display: inline-block;
1170
+ animation: bouncedelay 1.4s infinite ease-in-out;
1171
+ /* Prevent first frame from flickering when animation starts */
1172
+ animation-fill-mode: both;
1173
+ }
1174
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1175
+ animation-delay: -0.32s;
1176
+ }
1177
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1178
+ animation-delay: -0.16s;
1179
+ }
1180
+
1181
+ @keyframes bouncedelay {
1182
+ 0%, 80%, 100% {
1183
+ transform: scale(0);
1184
+ }
1185
+ 40% {
1186
+ transform: scale(1);
1187
+ }
1188
+ }[data-player] {
1189
+ --bottom-panel: 40px;
1190
+ }
1191
+
1192
+ .container .media-control-notransition {
1193
+ transition: none !important;
1194
+ }
1195
+ .container .player-poster[data-poster] .play-wrapper[data-poster] {
1196
+ opacity: 1;
1197
+ }
1198
+ .container.crop-video [data-html5-video] {
1199
+ object-fit: cover;
1200
+ }
1201
+ .container .subtitle-string {
1202
+ position: absolute;
1203
+ bottom: calc(var(--bottom-panel) + 5px);
1204
+ width: 100%;
1205
+ }
1206
+ .container .subtitle-string p {
1207
+ width: auto;
1208
+ background-color: rgba(0, 0, 0, 0.4);
1209
+ color: white;
1210
+ display: inline-block;
1211
+ }
1212
+ .container .circle-poster[data-poster] {
1213
+ top: 50%;
1214
+ margin-top: -60px;
1215
+ left: 50%;
1216
+ margin-left: -60px;
1217
+ position: absolute;
1218
+ width: 120px;
1219
+ height: 120px;
1220
+ border: 2px solid white;
1221
+ border-radius: 50%;
1222
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1223
+ filter: alpha(opacity=60);
1224
+ opacity: 1;
1225
+ box-shadow: 0 0 1px 0 white;
1226
+ }
1227
+ .container .circle-poster[data-poster] svg {
1228
+ margin-left: 5px;
1229
+ width: 80px;
1230
+ height: 80px;
1231
+ }
1232
+ .container .spinner-three-bounce[data-spinner] > div {
1233
+ background-color: #ff5700;
1234
+ }
1235
+
1236
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
1237
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audio-tracks {
1238
+ display: none;
1239
+ }
1240
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1241
+ transform: rotate(270deg);
1242
+ float: none;
1243
+ display: block;
1244
+ position: absolute;
1245
+ /* bottom: 12px; */
1246
+ margin: 0;
1247
+ top: -40px;
1248
+ padding: 0;
1249
+ /* right: 20px; */
1250
+ margin-left: -32px;
1251
+ margin-top: -3px;
1252
+ width: 80px;
1253
+ /* padding-left: 12px; */
1254
+ }
1255
+ .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 {
1256
+ position: absolute;
1257
+ width: 100%;
1120
1258
  height: 100%;
1121
1259
  left: -5px;
1122
1260
  }
@@ -1652,237 +1790,217 @@
1652
1790
  }
1653
1791
  .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 {
1654
1792
  transform: scaleY(1.5);
1655
- }.big-mute-icon-wrapper[data-big-mute] {
1656
- position: absolute;
1657
- z-index: 9998;
1658
- background-color: transparent;
1659
- display: flex;
1660
- justify-content: center;
1661
- width: 100%;
1662
- height: calc(100% - 50px);
1663
- margin: 0 auto;
1664
- opacity: 0.75;
1665
- transition: opacity 0.1s ease;
1793
+ }.share_plugin[data-share] {
1666
1794
  pointer-events: auto;
1795
+ z-index: 5;
1796
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1667
1797
  }
1668
- .big-mute-icon-wrapper[data-big-mute].hide {
1669
- display: none;
1798
+ .share_plugin[data-share].share-hide .share-button-container {
1799
+ right: -50px;
1670
1800
  }
1671
- .big-mute-icon-wrapper[data-big-mute]:hover {
1801
+ .share_plugin[data-share] .share-button-container {
1672
1802
  cursor: pointer;
1673
- }
1674
-
1675
- .big-mute-icon[data-big-mute-icon] {
1676
- display: flex;
1677
- align-items: center;
1678
- justify-content: center;
1679
- align-self: center;
1680
- width: 120px;
1681
- height: 120px;
1682
- border: 2px solid white;
1683
- border-radius: 50%;
1684
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1685
- filter: alpha(opacity=60);
1686
- opacity: 1;
1687
- box-shadow: 0 0 1px 0 white;
1688
- background: rgba(240, 243, 247, 0.9411764706);
1689
- z-index: 10000;
1690
- }
1691
- .big-mute-icon[data-big-mute-icon] svg {
1692
- margin-left: 5px;
1693
- width: 80px;
1694
- height: 80px;
1695
- }
1696
- .big-mute-icon[data-big-mute-icon] svg path {
1697
- fill: #1f1e1e !important;
1698
- }
1699
- .big-mute-icon[data-big-mute-icon]:hover {
1700
- background: rgba(240, 243, 247, 0.8784313725);
1701
- }
1702
- .big-mute-icon[data-big-mute-icon]:hover svg path {
1703
- fill: #151515 !important;
1704
- }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1705
- .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1706
- display: block;
1707
- }
1708
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1709
- width: 40px;
1710
- margin-top: 0;
1711
- }
1712
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1713
- display: flex;
1714
- justify-content: center;
1715
- padding: 0;
1716
- align-items: center;
1717
- }
1718
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1719
- color: white;
1720
- }
1721
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1803
+ width: 36px;
1804
+ height: 36px;
1722
1805
  background-color: rgba(74, 74, 74, 0.6);
1723
- border: none;
1724
- width: auto;
1725
- transform: rotate(180deg);
1726
1806
  border-radius: 4px;
1727
- bottom: 52px;
1728
- margin-left: -28px;
1729
- }
1730
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1731
- transform: rotate(-180deg);
1732
- font-size: 16px;
1733
- text-align: center;
1734
- white-space: nowrap;
1735
- height: 30px;
1807
+ position: absolute;
1808
+ right: 10px;
1809
+ top: 10px;
1810
+ padding-top: 6px;
1811
+ transition: all 0.3s ease-out;
1736
1812
  }
1737
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1738
- height: 30px;
1739
- padding: 5px 10px;
1740
- color: #fffffe;
1813
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1814
+ background-color: transparent;
1815
+ border: 0;
1816
+ margin: 0 6px;
1817
+ padding: 0;
1818
+ cursor: pointer;
1819
+ display: inline-block;
1820
+ width: 19px;
1821
+ height: 20px;
1741
1822
  }
1742
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1743
- background-color: rgba(0, 0, 0, 0.4);
1823
+ .share_plugin[data-share] .share-container {
1824
+ pointer-events: auto;
1825
+ position: absolute;
1826
+ width: 280px;
1827
+ background-color: white;
1828
+ transform: translate(0, 50%);
1829
+ transform: translate(-50%, -50%);
1830
+ left: 50%;
1831
+ /* margin-left: -140px; */
1832
+ top: calc(50% - 20px);
1833
+ /* margin-top: -170px; */
1744
1834
  }
1745
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1746
- background-color: rgba(0, 0, 0, 0.4);
1835
+ .share_plugin[data-share] .share-container .share-container-header {
1836
+ text-align: left;
1837
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1747
1838
  }
1748
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1749
- border-bottom-left-radius: 4px;
1750
- border-bottom-right-radius: 4px;
1839
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1840
+ display: inline-block;
1841
+ font-size: 16px;
1842
+ margin: 5px;
1751
1843
  }
1752
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1753
- border-top-left-radius: 4px;
1754
- border-top-right-radius: 4px;
1844
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1845
+ display: inline-block;
1846
+ width: 24px;
1847
+ float: right;
1848
+ margin: 5px;
1849
+ cursor: pointer;
1755
1850
  }
1756
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1757
- height: 26px;
1758
- line-height: 26px;
1759
- bottom: 52px;
1760
- border-radius: 3px;
1761
- background-color: rgba(74, 74, 74, 0.7);
1851
+ .share_plugin[data-share] .share-container .share-container-main {
1852
+ margin-bottom: 8px;
1762
1853
  }
1763
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1764
- letter-spacing: 0.8px;
1854
+ .share_plugin[data-share] .share-container .share-container-main > div {
1855
+ text-align: left;
1765
1856
  font-size: 14px;
1766
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1767
- }
1768
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1769
- padding-left: 8px;
1770
- padding-right: 8px;
1771
- }
1772
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1773
- display: none !important;
1774
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
1775
- float: right;
1776
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1857
+ padding: 5px;
1777
1858
  }
1778
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
1779
- height: 40px;
1780
- width: 40px;
1781
- padding-right: 20px;
1859
+ .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 {
1860
+ overflow: hidden;
1861
+ text-overflow: ellipsis;
1862
+ color: #818181;
1863
+ border: solid 1px #d3d3d3;
1864
+ width: calc(100% - 10px);
1865
+ padding: 5px;
1782
1866
  }
1783
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
1784
- height: 20px;
1867
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1868
+ max-height: 90px;
1869
+ resize: none;
1785
1870
  }
1786
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
1871
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1872
+ width: 32px;
1873
+ display: inline-block;
1874
+ margin-right: 5px;
1875
+ cursor: pointer;
1876
+ }.seek-time[data-seek-time] {
1787
1877
  position: absolute;
1788
- right: 16px;
1789
- bottom: 52px;
1790
- display: none;
1791
- width: 250px;
1792
- min-height: 48px;
1878
+ white-space: nowrap;
1879
+ height: 20px;
1880
+ line-height: 20px;
1881
+ font-size: 0;
1882
+ left: -100%;
1883
+ bottom: 55px;
1884
+ background-color: rgba(2, 2, 2, 0.5);
1793
1885
  z-index: 9999;
1794
- border-radius: 4px;
1795
- }
1796
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
1797
- padding: 8px 0;
1886
+ transition: opacity 0.1s ease;
1798
1887
  }
1799
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
1800
- float: left;
1801
- margin-right: 10px;
1888
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1889
+ opacity: 0;
1802
1890
  }
1803
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
1804
- margin: 0;
1805
- text-align: left;
1806
- line-height: 22px;
1807
- padding: 5px 14px;
1808
- width: 250px;
1809
- font-size: 12px;
1891
+ .seek-time[data-seek-time] [data-seek-time] {
1892
+ display: inline-block;
1893
+ color: white;
1894
+ font-size: 10px;
1895
+ padding-left: 7px;
1896
+ padding-right: 7px;
1897
+ vertical-align: top;
1810
1898
  }
1811
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
1812
- float: right;
1813
- margin-right: -14px;
1899
+ .seek-time[data-seek-time] [data-duration] {
1900
+ display: inline-block;
1901
+ color: rgba(255, 255, 255, 0.5);
1902
+ font-size: 10px;
1903
+ padding-right: 7px;
1904
+ vertical-align: top;
1814
1905
  }
1815
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
1816
- float: right;
1817
- margin-right: 8px;
1906
+ .seek-time[data-seek-time] [data-duration]::before {
1907
+ content: "|";
1908
+ margin-right: 7px;
1909
+ }.scrub-thumbnails {
1910
+ position: absolute;
1911
+ bottom: 52px;
1912
+ width: 100%;
1913
+ transition: opacity 0.3s ease;
1818
1914
  }
1819
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
1820
- height: 20px;
1821
- }*, :focus, :visited {
1822
- outline: none !important;
1915
+ .scrub-thumbnails.hidden {
1916
+ opacity: 0;
1823
1917
  }
1824
-
1825
- .gear-wrapper .go-back {
1826
- font-weight: 600;
1827
- font-size: 14px;
1828
- line-height: 20px;
1829
- width: 100%;
1830
- text-align: left;
1831
- padding: 12px;
1918
+ .scrub-thumbnails .thumbnail-container {
1919
+ display: inline-block;
1920
+ position: relative;
1921
+ overflow: hidden;
1922
+ background-color: #000;
1832
1923
  }
1833
- .gear-wrapper .go-back .arrow-left-icon {
1834
- float: left;
1835
- padding-top: 2px;
1836
- padding-right: 2px;
1924
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
1925
+ position: absolute;
1926
+ width: auto;
1837
1927
  }
1838
- .gear-wrapper .go-back .arrow-left-icon svg {
1839
- height: 16px;
1928
+ .scrub-thumbnails .thumbnails-text {
1929
+ background-color: rgba(74, 74, 74, 0.7);
1930
+ border-radius: 3px;
1931
+ white-space: nowrap;
1932
+ overflow: hidden;
1933
+ text-overflow: ellipsis;
1934
+ color: white;
1935
+ position: absolute;
1936
+ bottom: 23px;
1937
+ width: 100px;
1840
1938
  }
1841
- .gear-wrapper ul.gear-sub-menu {
1842
- width: 100%;
1843
- list-style-type: none;
1844
- background-color: transparent;
1845
- min-width: 60px;
1846
- border-top: 2px solid rgb(36, 36, 36);
1939
+ .scrub-thumbnails .spotlight {
1940
+ background-color: #4a4a4a;
1941
+ overflow: hidden;
1942
+ position: absolute;
1943
+ bottom: 0;
1944
+ left: 0;
1945
+ border-color: #4a4a4a;
1946
+ border-style: solid;
1947
+ border-width: 3px;
1948
+ border-radius: 3px;
1847
1949
  }
1848
- .gear-wrapper ul.gear-sub-menu li {
1849
- font-size: 12px;
1850
- text-align: left;
1950
+ .scrub-thumbnails .spotlight img {
1951
+ width: auto;
1851
1952
  }
1852
- .gear-wrapper ul.gear-sub-menu li[data-title] {
1853
- background-color: #c3c2c2;
1854
- padding: 5px;
1953
+ .scrub-thumbnails .backdrop {
1954
+ position: absolute;
1955
+ left: 0;
1956
+ bottom: 0;
1957
+ right: 0;
1958
+ background-color: #000;
1959
+ overflow: hidden;
1855
1960
  }
1856
- .gear-wrapper ul.gear-sub-menu li a {
1857
- display: block;
1858
- text-decoration: none;
1859
- height: 32px;
1860
- padding: 5px 10px;
1861
- line-height: 22px;
1862
- color: #fffffe;
1961
+ .scrub-thumbnails .backdrop .carousel {
1962
+ position: absolute;
1963
+ top: 0;
1964
+ left: 0;
1965
+ height: 100%;
1966
+ white-space: nowrap;
1863
1967
  }
1864
- .gear-wrapper ul.gear-sub-menu li a:hover {
1865
- color: white;
1866
- background-color: rgba(0, 0, 0, 0.4);
1968
+ .scrub-thumbnails .backdrop .carousel img {
1969
+ width: auto;
1970
+ }.player-poster[data-poster] {
1971
+ display: flex;
1972
+ justify-content: center;
1973
+ align-items: center;
1974
+ position: absolute;
1975
+ height: 100%;
1976
+ width: 100%;
1977
+ z-index: 998;
1978
+ top: 0;
1979
+ left: 0;
1980
+ background-color: #000;
1981
+ background-size: cover;
1982
+ background-repeat: no-repeat;
1983
+ background-position: 50% 50%;
1867
1984
  }
1868
- .gear-wrapper ul.gear-sub-menu li a:hover a {
1869
- color: white;
1870
- text-decoration: none;
1985
+ .player-poster[data-poster].clickable {
1986
+ cursor: pointer;
1871
1987
  }
1872
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
1873
- width: 30px;
1874
- height: 20px;
1875
- float: left;
1876
- display: block;
1988
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1989
+ opacity: 1;
1877
1990
  }
1878
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
1879
- display: none;
1991
+ .player-poster[data-poster] .play-wrapper[data-poster] {
1992
+ width: 100%;
1993
+ height: 25%;
1994
+ margin: 0 auto;
1995
+ opacity: 0.75;
1996
+ transition: opacity 0.1s ease;
1880
1997
  }
1881
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1998
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
1999
+ height: 100%;
1882
2000
  display: inline;
1883
2001
  }
1884
- .gear-wrapper svg {
1885
- height: 20px;
2002
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
2003
+ fill: #fff;
1886
2004
  }*, :focus, :visited {
1887
2005
  outline: none !important;
1888
2006
  }
@@ -1964,194 +2082,76 @@
1964
2082
  .ios-fullscreen::cue {
1965
2083
  visibility: visible !important;
1966
2084
  font-size: 1em !important;
1967
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1968
- height: 0;
1969
- }
1970
-
1971
- .skip_time_plugin[data-skip-time] {
1972
- position: absolute;
1973
- width: 100%;
1974
- height: calc(100% - 50px);
1975
- z-index: 9998;
1976
- background-color: transparent;
1977
- font-family: Roboto, "Open Sans", Arial, sans-serif;
2085
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
2086
+ .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
2087
+ display: block;
1978
2088
  }
1979
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1980
- width: 100%;
1981
- height: 100%;
1982
- display: flex;
1983
- justify-content: space-between;
2089
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
2090
+ width: 40px;
2091
+ margin-top: 0;
1984
2092
  }
1985
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1986
- width: 33.3%;
1987
- height: 100%;
1988
- }.player-poster[data-poster] {
2093
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1989
2094
  display: flex;
1990
2095
  justify-content: center;
2096
+ padding: 0;
1991
2097
  align-items: center;
1992
- position: absolute;
1993
- height: 100%;
1994
- width: 100%;
1995
- z-index: 998;
1996
- top: 0;
1997
- left: 0;
1998
- background-color: #000;
1999
- background-size: cover;
2000
- background-repeat: no-repeat;
2001
- background-position: 50% 50%;
2002
- }
2003
- .player-poster[data-poster].clickable {
2004
- cursor: pointer;
2005
- }
2006
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
2007
- opacity: 1;
2008
2098
  }
2009
- .player-poster[data-poster] .play-wrapper[data-poster] {
2010
- width: 100%;
2011
- height: 25%;
2012
- margin: 0 auto;
2013
- opacity: 0.75;
2014
- transition: opacity 0.1s ease;
2099
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
2100
+ color: white;
2015
2101
  }
2016
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
2017
- height: 100%;
2018
- display: inline;
2102
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
2103
+ background-color: rgba(74, 74, 74, 0.6);
2104
+ border: none;
2105
+ width: auto;
2106
+ transform: rotate(180deg);
2107
+ border-radius: 4px;
2108
+ bottom: 52px;
2109
+ margin-left: -28px;
2019
2110
  }
2020
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
2021
- fill: #fff;
2022
- }.spinner-three-bounce[data-spinner] {
2023
- position: absolute;
2024
- width: 70px;
2111
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
2112
+ transform: rotate(-180deg);
2113
+ font-size: 16px;
2025
2114
  text-align: center;
2026
- z-index: 999;
2027
- left: 0;
2028
- right: 0;
2029
- margin: 0 auto;
2030
- margin-left: auto;
2031
- margin-right: auto;
2032
- /* center vertically */
2033
- top: 50%;
2034
- transform: translateY(-50%);
2035
- }
2036
- .spinner-three-bounce[data-spinner] > div {
2037
- width: 18px;
2038
- height: 18px;
2039
- background-color: #FFF;
2040
- border-radius: 100%;
2041
- display: inline-block;
2042
- animation: bouncedelay 1.4s infinite ease-in-out;
2043
- /* Prevent first frame from flickering when animation starts */
2044
- animation-fill-mode: both;
2045
- }
2046
- .spinner-three-bounce[data-spinner] [data-bounce1] {
2047
- animation-delay: -0.32s;
2048
- }
2049
- .spinner-three-bounce[data-spinner] [data-bounce2] {
2050
- animation-delay: -0.16s;
2115
+ white-space: nowrap;
2116
+ height: 30px;
2051
2117
  }
2052
-
2053
- @keyframes bouncedelay {
2054
- 0%, 80%, 100% {
2055
- transform: scale(0);
2056
- }
2057
- 40% {
2058
- transform: scale(1);
2059
- }
2060
- }div.player-error-screen, [data-player] div.player-error-screen {
2061
- color: #CCCACA;
2062
- position: absolute;
2063
- top: 0;
2064
- height: 100%;
2065
- width: 100%;
2066
- background-color: rgba(0, 0, 0, 0.7);
2067
- z-index: 2000;
2068
- display: flex;
2069
- flex-direction: column;
2070
- justify-content: center;
2118
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
2119
+ height: 30px;
2120
+ padding: 5px 10px;
2121
+ color: #fffffe;
2071
2122
  }
2072
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
2073
- font-size: 14px;
2074
- color: #CCCACA;
2075
- margin-top: 45px;
2123
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
2124
+ background-color: rgba(0, 0, 0, 0.4);
2076
2125
  }
2077
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
2078
- font-weight: bold;
2079
- line-height: 30px;
2080
- font-size: 18px;
2126
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
2127
+ background-color: rgba(0, 0, 0, 0.4);
2081
2128
  }
2082
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
2083
- width: 90%;
2084
- margin: 0 auto;
2129
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
2130
+ border-bottom-left-radius: 4px;
2131
+ border-bottom-right-radius: 4px;
2085
2132
  }
2086
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
2087
- font-size: 13px;
2088
- margin-top: 15px;
2133
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
2134
+ border-top-left-radius: 4px;
2135
+ border-top-right-radius: 4px;
2089
2136
  }
2090
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2091
- cursor: pointer;
2092
- width: 30px;
2093
- margin: 15px auto 0;
2094
- }.scrub-thumbnails {
2095
- position: absolute;
2137
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
2138
+ height: 26px;
2139
+ line-height: 26px;
2096
2140
  bottom: 52px;
2097
- width: 100%;
2098
- transition: opacity 0.3s ease;
2099
- }
2100
- .scrub-thumbnails.hidden {
2101
- opacity: 0;
2102
- }
2103
- .scrub-thumbnails .thumbnail-container {
2104
- display: inline-block;
2105
- position: relative;
2106
- overflow: hidden;
2107
- background-color: #000;
2108
- }
2109
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
2110
- position: absolute;
2111
- width: auto;
2112
- }
2113
- .scrub-thumbnails .thumbnails-text {
2114
- background-color: rgba(74, 74, 74, 0.7);
2115
- border-radius: 3px;
2116
- white-space: nowrap;
2117
- overflow: hidden;
2118
- text-overflow: ellipsis;
2119
- color: white;
2120
- position: absolute;
2121
- bottom: 23px;
2122
- width: 100px;
2123
- }
2124
- .scrub-thumbnails .spotlight {
2125
- background-color: #4a4a4a;
2126
- overflow: hidden;
2127
- position: absolute;
2128
- bottom: 0;
2129
- left: 0;
2130
- border-color: #4a4a4a;
2131
- border-style: solid;
2132
- border-width: 3px;
2133
2141
  border-radius: 3px;
2142
+ background-color: rgba(74, 74, 74, 0.7);
2134
2143
  }
2135
- .scrub-thumbnails .spotlight img {
2136
- width: auto;
2137
- }
2138
- .scrub-thumbnails .backdrop {
2139
- position: absolute;
2140
- left: 0;
2141
- bottom: 0;
2142
- right: 0;
2143
- background-color: #000;
2144
- overflow: hidden;
2144
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
2145
+ letter-spacing: 0.8px;
2146
+ font-size: 14px;
2147
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
2145
2148
  }
2146
- .scrub-thumbnails .backdrop .carousel {
2147
- position: absolute;
2148
- top: 0;
2149
- left: 0;
2150
- height: 100%;
2151
- white-space: nowrap;
2149
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
2150
+ padding-left: 8px;
2151
+ padding-right: 8px;
2152
2152
  }
2153
- .scrub-thumbnails .backdrop .carousel img {
2154
- width: auto;
2153
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
2154
+ display: none !important;
2155
2155
  }.player-logo[data-logo] {
2156
2156
  position: absolute;
2157
2157
  z-index: 2;