@gcorevideo/player 2.22.12 → 2.22.13

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.
@@ -215,155 +215,131 @@
215
215
  }
216
216
  .dvr .dvr-controls[data-dvr] .live-button {
217
217
  display: block;
218
- }.big-mute-icon-wrapper[data-big-mute] {
218
+ }.clips.bar-container[data-seekbar] {
219
+ clip-path: url("#myClip");
220
+ }.context-menu {
221
+ z-index: 999;
219
222
  position: absolute;
220
- z-index: 9998;
221
- background-color: transparent;
222
- display: flex;
223
- justify-content: center;
224
- width: 100%;
225
- height: calc(100% - 50px);
226
- margin: 0 auto;
227
- opacity: 0.75;
228
- transition: opacity 0.1s ease;
229
- pointer-events: auto;
223
+ top: 0;
224
+ left: 0;
225
+ text-align: center;
230
226
  }
231
- .big-mute-icon-wrapper[data-big-mute].hide {
232
- display: none;
227
+ .context-menu .context-menu-list {
228
+ font-family: "Proxima Nova", sans-serif;
229
+ font-size: 12px;
230
+ line-height: 12px;
231
+ list-style-type: none;
232
+ text-align: left;
233
+ padding: 5px;
234
+ margin-left: auto;
235
+ margin-right: auto;
236
+ background-color: rgba(0, 0, 0, 0.75);
237
+ border: 1px solid #666;
238
+ border-radius: 4px;
233
239
  }
234
- .big-mute-icon-wrapper[data-big-mute]:hover {
240
+ .context-menu .context-menu-list .context-menu-list-item {
241
+ color: white;
242
+ padding: 5px;
235
243
  cursor: pointer;
244
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
245
+ order: 99;
246
+ height: 20px;
236
247
  }
237
-
238
- .big-mute-icon[data-big-mute-icon] {
239
- display: flex;
240
- align-items: center;
241
- justify-content: center;
242
- align-self: center;
243
- width: 120px;
244
- height: 120px;
245
- border: 2px solid white;
246
- border-radius: 50%;
247
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
248
- filter: alpha(opacity=60);
249
- opacity: 1;
250
- box-shadow: 0 0 1px 0 white;
251
- background: rgba(240, 243, 247, 0.9411764706);
252
- z-index: 10000;
253
- }
254
- .big-mute-icon[data-big-mute-icon] svg {
255
- margin-left: 5px;
256
- width: 80px;
257
- height: 80px;
248
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
249
+ position: absolute;
250
+ right: 16px;
251
+ bottom: 52px;
252
+ width: 250px;
253
+ min-height: 48px;
254
+ z-index: 9999;
255
+ border-radius: 4px;
258
256
  }
259
- .big-mute-icon[data-big-mute-icon] svg path {
260
- fill: #1f1e1e !important;
257
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
258
+ padding: 8px 0;
261
259
  }
262
- .big-mute-icon[data-big-mute-icon]:hover {
263
- background: rgba(240, 243, 247, 0.8784313725);
260
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
261
+ float: left;
262
+ margin-right: 10px;
264
263
  }
265
- .big-mute-icon[data-big-mute-icon]:hover svg path {
266
- fill: #151515 !important;
267
- }*,
268
- :focus,
269
- :visited {
270
- outline: none !important;
264
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
265
+ margin: 0;
266
+ text-align: left;
267
+ line-height: 22px;
268
+ padding: 5px 14px;
269
+ width: 250px;
270
+ font-size: 12px;
271
271
  }
272
-
273
- .media-control-audiotracks {
274
- position: relative;
272
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
273
+ float: right;
274
+ margin-right: -14px;
275
275
  }
276
- .media-control-audiotracks button {
277
- background-color: transparent;
278
- color: #fff;
279
- -webkit-font-smoothing: antialiased;
280
- border: none;
281
- cursor: pointer;
282
- display: flex;
283
- align-items: center;
284
- padding: 0;
276
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
277
+ float: right;
278
+ margin-right: 8px;
285
279
  }
286
- .media-control-audiotracks button .audio-text {
287
- text-overflow: ellipsis;
288
- overflow: hidden;
289
- white-space: nowrap;
290
- max-width: 100px;
291
- background-color: transparent;
292
- -webkit-font-smoothing: antialiased;
293
- border: none;
294
- cursor: pointer;
280
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
281
+ height: 20px;
282
+ }*, :focus, :visited {
283
+ outline: none !important;
295
284
  }
296
- .media-control-audiotracks button:hover {
297
- color: white;
285
+
286
+ .gear-wrapper .go-back {
287
+ font-weight: 600;
288
+ font-size: 14px;
289
+ line-height: 20px;
290
+ width: 100%;
291
+ text-align: left;
292
+ padding: 12px;
298
293
  }
299
- .media-control-audiotracks button.changing {
300
- animation: pulse 0.5s infinite alternate;
294
+ .gear-wrapper .go-back .arrow-left-icon {
295
+ float: left;
296
+ padding-top: 2px;
297
+ padding-right: 2px;
301
298
  }
302
- .media-control-audiotracks button span.audio-arrow {
303
- width: 9px;
304
- height: 6px;
305
- margin-left: 5px;
299
+ .gear-wrapper .go-back .arrow-left-icon svg {
300
+ height: 16px;
306
301
  }
307
- .media-control-audiotracks .menu {
308
- max-width: 114px;
302
+ .gear-wrapper ul.gear-sub-menu {
303
+ width: 100%;
309
304
  list-style-type: none;
310
- position: absolute;
311
- background-color: rgba(74, 74, 74, 0.6);
312
- border: none;
313
305
  min-width: 60px;
314
- border-radius: 4px;
315
- bottom: 40px;
316
- right: -2px;
317
- }
318
- .media-control-audiotracks .menu.hidden {
319
- display: none;
306
+ border-top: 2px solid rgb(36, 36, 36);
320
307
  }
321
- .media-control-audiotracks li {
322
- font-size: var(--font-size-media-controls-dropdown);
323
- text-align: right;
324
- height: 30px;
308
+ .gear-wrapper ul.gear-sub-menu li {
309
+ font-size: 12px;
310
+ text-align: left;
325
311
  }
326
- .media-control-audiotracks li[data-title] {
312
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
327
313
  background-color: #c3c2c2;
328
314
  padding: 5px;
329
315
  }
330
- .media-control-audiotracks li a {
316
+ .gear-wrapper ul.gear-sub-menu li a {
331
317
  display: block;
332
318
  text-decoration: none;
333
- text-overflow: ellipsis;
334
- overflow: hidden;
335
- white-space: nowrap;
336
- height: 30px;
319
+ height: 32px;
337
320
  padding: 5px 10px;
321
+ line-height: 22px;
338
322
  color: #fffffe;
339
323
  }
340
- .media-control-audiotracks li a:hover {
341
- text-decoration: none;
342
- background-color: rgba(0, 0, 0, 0.4);
324
+ .gear-wrapper ul.gear-sub-menu li a:hover {
343
325
  color: white;
326
+ background-color: rgba(0, 0, 0, 0.4);
344
327
  }
345
- .media-control-audiotracks li.current a {
346
- color: #f00;
328
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
329
+ color: white;
330
+ text-decoration: none;
347
331
  }
348
- .media-control-audiotracks li:first-child a {
349
- border-bottom-left-radius: 4px;
350
- border-bottom-right-radius: 4px;
332
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
333
+ width: 30px;
334
+ height: 20px;
335
+ float: left;
336
+ display: block;
351
337
  }
352
- .media-control-audiotracks li:last-child a {
353
- border-top-left-radius: 4px;
354
- border-top-right-radius: 4px;
338
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
339
+ display: none;
355
340
  }
356
-
357
- @keyframes pulse {
358
- 0% {
359
- color: #fff;
360
- }
361
- 50% {
362
- color: #ff0101;
363
- }
364
- 100% {
365
- color: #B80000;
366
- }
341
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
342
+ display: inline;
367
343
  }:root {
368
344
  --primary-background-color: #000;
369
345
  --secondary-background-color: #262626;
@@ -746,298 +722,208 @@
746
722
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
747
723
  width: 25%;
748
724
  }
749
- }.media-control-pip {
750
- order: 95;
751
- display: flex;
725
+ }*,
726
+ :focus,
727
+ :visited {
728
+ outline: none !important;
752
729
  }
753
- .media-control-pip button {
754
- height: 20px;
730
+
731
+ .media-control-audiotracks {
732
+ position: relative;
755
733
  }
756
- .media-control-pip button svg {
757
- height: 20px;
758
- }.clips.bar-container[data-seekbar] {
759
- clip-path: url("#myClip");
760
- }div.player-error-screen, [data-player] div.player-error-screen {
761
- color: #CCCACA;
762
- position: absolute;
763
- top: 0;
764
- height: 100%;
765
- width: 100%;
766
- background-color: rgba(0, 0, 0, 0.7);
767
- z-index: 2000;
734
+ .media-control-audiotracks button {
735
+ background-color: transparent;
736
+ color: #fff;
737
+ -webkit-font-smoothing: antialiased;
738
+ border: none;
739
+ cursor: pointer;
768
740
  display: flex;
769
- flex-direction: column;
770
- justify-content: center;
771
- }
772
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
773
- font-size: 14px;
774
- color: #CCCACA;
775
- margin-top: 45px;
776
- }
777
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
778
- font-weight: bold;
779
- line-height: 30px;
780
- font-size: 18px;
741
+ align-items: center;
742
+ padding: 0;
781
743
  }
782
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
783
- width: 90%;
784
- margin: 0 auto;
785
- }
786
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
787
- font-size: 13px;
788
- margin-top: 15px;
789
- }
790
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
744
+ .media-control-audiotracks button .audio-text {
745
+ text-overflow: ellipsis;
746
+ overflow: hidden;
747
+ white-space: nowrap;
748
+ max-width: 100px;
749
+ background-color: transparent;
750
+ -webkit-font-smoothing: antialiased;
751
+ border: none;
791
752
  cursor: pointer;
792
- width: 30px;
793
- margin: 15px auto 0;
794
- }*, :focus, :visited {
795
- outline: none !important;
796
753
  }
797
-
798
- .gear-wrapper .go-back {
799
- font-weight: 600;
800
- font-size: 14px;
801
- line-height: 20px;
802
- width: 100%;
803
- text-align: left;
804
- padding: 12px;
754
+ .media-control-audiotracks button:hover {
755
+ color: white;
805
756
  }
806
- .gear-wrapper .go-back .arrow-left-icon {
807
- float: left;
808
- padding-top: 2px;
809
- padding-right: 2px;
757
+ .media-control-audiotracks button.changing {
758
+ animation: pulse 0.5s infinite alternate;
810
759
  }
811
- .gear-wrapper .go-back .arrow-left-icon svg {
812
- height: 16px;
760
+ .media-control-audiotracks button span.audio-arrow {
761
+ width: 9px;
762
+ height: 6px;
763
+ margin-left: 5px;
813
764
  }
814
- .gear-wrapper ul.gear-sub-menu {
815
- width: 100%;
765
+ .media-control-audiotracks .menu {
766
+ max-width: 114px;
816
767
  list-style-type: none;
768
+ position: absolute;
769
+ background-color: rgba(74, 74, 74, 0.6);
770
+ border: none;
817
771
  min-width: 60px;
818
- border-top: 2px solid rgb(36, 36, 36);
772
+ border-radius: 4px;
773
+ bottom: 40px;
774
+ right: -2px;
819
775
  }
820
- .gear-wrapper ul.gear-sub-menu li {
821
- font-size: 12px;
822
- text-align: left;
776
+ .media-control-audiotracks .menu.hidden {
777
+ display: none;
823
778
  }
824
- .gear-wrapper ul.gear-sub-menu li[data-title] {
779
+ .media-control-audiotracks li {
780
+ font-size: var(--font-size-media-controls-dropdown);
781
+ text-align: right;
782
+ height: 30px;
783
+ }
784
+ .media-control-audiotracks li[data-title] {
825
785
  background-color: #c3c2c2;
826
786
  padding: 5px;
827
787
  }
828
- .gear-wrapper ul.gear-sub-menu li a {
788
+ .media-control-audiotracks li a {
829
789
  display: block;
830
790
  text-decoration: none;
831
- height: 32px;
791
+ text-overflow: ellipsis;
792
+ overflow: hidden;
793
+ white-space: nowrap;
794
+ height: 30px;
832
795
  padding: 5px 10px;
833
- line-height: 22px;
834
796
  color: #fffffe;
835
797
  }
836
- .gear-wrapper ul.gear-sub-menu li a:hover {
837
- color: white;
798
+ .media-control-audiotracks li a:hover {
799
+ text-decoration: none;
838
800
  background-color: rgba(0, 0, 0, 0.4);
839
- }
840
- .gear-wrapper ul.gear-sub-menu li a:hover a {
841
801
  color: white;
842
- text-decoration: none;
843
802
  }
844
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
845
- width: 30px;
846
- height: 20px;
847
- float: left;
848
- display: block;
803
+ .media-control-audiotracks li.current a {
804
+ color: #f00;
849
805
  }
850
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
851
- display: none;
806
+ .media-control-audiotracks li:first-child a {
807
+ border-bottom-left-radius: 4px;
808
+ border-bottom-right-radius: 4px;
852
809
  }
853
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
854
- display: inline;
855
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
856
- order: 99;
857
- height: 20px;
810
+ .media-control-audiotracks li:last-child a {
811
+ border-top-left-radius: 4px;
812
+ border-top-right-radius: 4px;
858
813
  }
859
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
814
+
815
+ @keyframes pulse {
816
+ 0% {
817
+ color: #fff;
818
+ }
819
+ 50% {
820
+ color: #ff0101;
821
+ }
822
+ 100% {
823
+ color: #B80000;
824
+ }
825
+ }div.player-error-screen, [data-player] div.player-error-screen {
826
+ color: #CCCACA;
860
827
  position: absolute;
861
- right: 16px;
862
- bottom: 52px;
863
- width: 250px;
864
- min-height: 48px;
865
- z-index: 9999;
866
- border-radius: 4px;
867
- }
868
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
869
- padding: 8px 0;
828
+ top: 0;
829
+ height: 100%;
830
+ width: 100%;
831
+ background-color: rgba(0, 0, 0, 0.7);
832
+ z-index: 2000;
833
+ display: flex;
834
+ flex-direction: column;
835
+ justify-content: center;
870
836
  }
871
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
872
- float: left;
873
- margin-right: 10px;
837
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
838
+ font-size: 14px;
839
+ color: #CCCACA;
840
+ margin-top: 45px;
874
841
  }
875
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
876
- margin: 0;
877
- text-align: left;
878
- line-height: 22px;
879
- padding: 5px 14px;
880
- width: 250px;
881
- font-size: 12px;
842
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
843
+ font-weight: bold;
844
+ line-height: 30px;
845
+ font-size: 18px;
882
846
  }
883
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
884
- float: right;
885
- margin-right: -14px;
847
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
848
+ width: 90%;
849
+ margin: 0 auto;
886
850
  }
887
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
888
- float: right;
889
- margin-right: 8px;
851
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
852
+ font-size: 13px;
853
+ margin-top: 15px;
890
854
  }
891
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
892
- height: 20px;
893
- }*, :focus, :visited {
894
- outline: none !important;
855
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
856
+ cursor: pointer;
857
+ width: 30px;
858
+ margin: 15px auto 0;
859
+ }.gear-option_hd-icon.hidden {
860
+ display: none;
895
861
  }
896
862
 
897
- .multicamera[data-multicamera] {
898
- float: right;
899
- margin-top: 4px;
900
- position: relative;
901
- margin-right: 20px;
902
- width: 20px;
863
+ .quality-levels li.disabled {
864
+ opacity: 0.5;
865
+ pointer-events: none;
903
866
  }
904
- .multicamera[data-multicamera] button {
867
+ .quality-levels li.current {
868
+ background-color: #000;
869
+ }.big-mute-icon-wrapper[data-big-mute] {
870
+ position: absolute;
871
+ z-index: 9998;
905
872
  background-color: transparent;
906
- color: #fff;
907
- font-family: Roboto, "Open Sans", Arial, sans-serif;
908
- -webkit-font-smoothing: antialiased;
909
- border: none;
910
- font-size: 14px;
911
- padding: 0;
912
- }
913
- .multicamera[data-multicamera] button svg {
914
- height: 20px;
915
- position: relative;
916
- margin-top: 6px;
917
- }
918
- .multicamera[data-multicamera] button:hover {
919
- color: #c9c9c9;
920
- }
921
- .multicamera[data-multicamera] button.changing {
922
- animation: pulse 0.5s infinite alternate;
923
- }
924
- .multicamera[data-multicamera] button span.quality-arrow {
925
- width: 9px;
926
- height: 6px;
927
- margin-top: 11px;
928
- margin-left: 5px;
873
+ display: flex;
874
+ justify-content: center;
875
+ width: 100%;
876
+ height: calc(100% - 50px);
877
+ margin: 0 auto;
878
+ opacity: 0.75;
879
+ transition: opacity 0.1s ease;
880
+ pointer-events: auto;
929
881
  }
930
- .multicamera[data-multicamera] > ul {
931
- padding: 6px 0;
932
- right: -24px;
933
- width: 245px;
934
- list-style-type: none;
935
- position: absolute;
936
- bottom: 48px;
937
- border-radius: 4px;
882
+ .big-mute-icon-wrapper[data-big-mute].hide {
938
883
  display: none;
939
- background-color: rgba(74, 74, 74, 0.9);
940
- }
941
- .multicamera[data-multicamera] > ul::after {
942
- content: "";
943
- position: absolute;
944
- top: 100%;
945
- left: 85%;
946
- margin-left: -10px;
947
- width: 0;
948
- height: 0;
949
- border-top: 10px solid rgba(74, 74, 74, 0.9);
950
- border-right: 10px solid transparent;
951
- border-left: 10px solid transparent;
952
884
  }
953
- .multicamera[data-multicamera] li {
954
- font-size: 10px;
885
+ .big-mute-icon-wrapper[data-big-mute]:hover {
955
886
  cursor: pointer;
956
887
  }
957
- .multicamera[data-multicamera] li .multicamera-item {
888
+
889
+ .big-mute-icon[data-big-mute-icon] {
958
890
  display: flex;
959
- padding: 10px 0;
891
+ align-items: center;
960
892
  justify-content: center;
961
- position: relative;
962
- }
963
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
964
- pointer-events: none;
965
- }
966
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
967
- opacity: 0.5;
968
- }
969
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
970
- opacity: 0.5;
971
- }
972
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
973
- background-color: rgba(0, 0, 0, 0);
974
- }
975
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
976
- background-color: rgba(0, 0, 0, 0.3);
977
- }
978
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
979
- width: 80px;
980
- height: 60px;
981
- }
982
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
983
- width: 80px;
984
- height: 60px;
985
- }
986
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
987
- width: 120px;
988
- text-align: left;
989
- margin-left: 15px;
990
- }
991
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
893
+ align-self: center;
992
894
  width: 120px;
993
- height: 20px;
994
- font-family: Roboto, "Open Sans", Arial, sans-serif;
995
- font-size: 14px;
996
- font-weight: normal;
997
- font-style: normal;
998
- font-stretch: normal;
999
- line-height: 1.43;
1000
- letter-spacing: normal;
1001
- text-align: left;
1002
- color: #fff;
1003
- text-overflow: ellipsis;
1004
- overflow: hidden;
1005
- }
1006
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1007
- opacity: 0.6;
895
+ height: 120px;
896
+ border: 2px solid white;
897
+ border-radius: 50%;
898
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
899
+ filter: alpha(opacity=60);
900
+ opacity: 1;
901
+ box-shadow: 0 0 1px 0 white;
902
+ background: rgba(240, 243, 247, 0.9411764706);
903
+ z-index: 10000;
1008
904
  }
1009
- .multicamera[data-multicamera] li[data-title] {
1010
- background-color: #c3c2c2;
1011
- padding: 5px;
905
+ .big-mute-icon[data-big-mute-icon] svg {
906
+ margin-left: 5px;
907
+ width: 80px;
908
+ height: 80px;
1012
909
  }
1013
- .multicamera[data-multicamera] li a {
1014
- color: #444;
1015
- padding: 2px 10px;
1016
- display: block;
1017
- text-decoration: none;
910
+ .big-mute-icon[data-big-mute-icon] svg path {
911
+ fill: #1f1e1e !important;
1018
912
  }
1019
- .multicamera[data-multicamera] li a:hover {
1020
- background-color: #555;
1021
- color: white;
913
+ .big-mute-icon[data-big-mute-icon]:hover {
914
+ background: rgba(240, 243, 247, 0.8784313725);
1022
915
  }
1023
- .multicamera[data-multicamera] li a:hover a {
1024
- color: white;
1025
- text-decoration: none;
916
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
917
+ fill: #151515 !important;
918
+ }.media-control-pip {
919
+ order: 95;
920
+ display: flex;
1026
921
  }
1027
- .multicamera[data-multicamera] li.current a {
1028
- color: #f00;
922
+ .media-control-pip button {
923
+ height: 20px;
1029
924
  }
1030
-
1031
- @keyframes pulse {
1032
- 0% {
1033
- color: #fff;
1034
- }
1035
- 50% {
1036
- color: #ff0101;
1037
- }
1038
- 100% {
1039
- color: #B80000;
1040
- }
925
+ .media-control-pip button svg {
926
+ height: 20px;
1041
927
  }[data-player] {
1042
928
  --bottom-panel: 40px;
1043
929
  }
@@ -1651,146 +1537,30 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1651
1537
  }
1652
1538
  .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {
1653
1539
  border-bottom-left-radius: 4px;
1654
- border-bottom-right-radius: 4px;
1655
- }
1656
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {
1657
- border-top-left-radius: 4px;
1658
- border-top-right-radius: 4px;
1659
- }
1660
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1661
- height: 26px;
1662
- line-height: 26px;
1663
- bottom: 52px;
1664
- border-radius: 3px;
1665
- background-color: rgba(74, 74, 74, 0.7);
1666
- }
1667
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1668
- letter-spacing: 0.8px;
1669
- font-size: 14px;
1670
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1671
- }
1672
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1673
- padding-left: 8px;
1674
- padding-right: 8px;
1675
- }
1676
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1677
- display: none !important;
1678
- }.gear-option_hd-icon.hidden {
1679
- display: none;
1680
- }
1681
-
1682
- .quality-levels li.disabled {
1683
- opacity: 0.5;
1684
- pointer-events: none;
1685
- }
1686
- .quality-levels li.current {
1687
- background-color: #000;
1688
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1689
- height: 0;
1690
- }
1691
-
1692
- .skip_time_plugin[data-skip-time] {
1693
- position: absolute;
1694
- width: 100%;
1695
- height: calc(100% - 50px);
1696
- z-index: 9998;
1697
- background-color: transparent;
1698
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1699
- }
1700
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1701
- width: 100%;
1702
- height: 100%;
1703
- display: flex;
1704
- justify-content: space-between;
1705
- }
1706
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1707
- width: 33.3%;
1708
- height: 100%;
1709
- }.context-menu {
1710
- z-index: 999;
1711
- position: absolute;
1712
- top: 0;
1713
- left: 0;
1714
- text-align: center;
1715
- }
1716
- .context-menu .context-menu-list {
1717
- font-family: "Proxima Nova", sans-serif;
1718
- font-size: 12px;
1719
- line-height: 12px;
1720
- list-style-type: none;
1721
- text-align: left;
1722
- padding: 5px;
1723
- margin-left: auto;
1724
- margin-right: auto;
1725
- background-color: rgba(0, 0, 0, 0.75);
1726
- border: 1px solid #666;
1727
- border-radius: 4px;
1728
- }
1729
- .context-menu .context-menu-list .context-menu-list-item {
1730
- color: white;
1731
- padding: 5px;
1732
- cursor: pointer;
1733
- }.scrub-thumbnails {
1734
- position: absolute;
1735
- bottom: 52px;
1736
- width: 100%;
1737
- transition: opacity 0.3s ease;
1738
- }
1739
- .scrub-thumbnails.hidden {
1740
- opacity: 0;
1741
- }
1742
- .scrub-thumbnails .thumbnail-container {
1743
- display: inline-block;
1744
- position: relative;
1745
- overflow: hidden;
1746
- background-color: #000;
1747
- }
1748
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
1749
- position: absolute;
1750
- width: auto;
1751
- }
1752
- .scrub-thumbnails .thumbnails-text {
1753
- background-color: rgba(74, 74, 74, 0.7);
1754
- border-radius: 3px;
1755
- white-space: nowrap;
1756
- overflow: hidden;
1757
- text-overflow: ellipsis;
1758
- color: white;
1759
- position: absolute;
1760
- bottom: 23px;
1761
- width: 100px;
1540
+ border-bottom-right-radius: 4px;
1762
1541
  }
1763
- .scrub-thumbnails .spotlight {
1764
- background-color: #4a4a4a;
1765
- overflow: hidden;
1766
- position: absolute;
1767
- bottom: 0;
1768
- left: 0;
1769
- border-color: #4a4a4a;
1770
- border-style: solid;
1771
- border-width: 3px;
1772
- border-radius: 3px;
1542
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {
1543
+ border-top-left-radius: 4px;
1544
+ border-top-right-radius: 4px;
1773
1545
  }
1774
- .scrub-thumbnails .spotlight img {
1775
- width: auto;
1546
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1547
+ height: 26px;
1548
+ line-height: 26px;
1549
+ bottom: 52px;
1550
+ border-radius: 3px;
1551
+ background-color: rgba(74, 74, 74, 0.7);
1776
1552
  }
1777
- .scrub-thumbnails .backdrop {
1778
- position: absolute;
1779
- left: 0;
1780
- bottom: 0;
1781
- right: 0;
1782
- background-color: #000;
1783
- overflow: hidden;
1553
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1554
+ letter-spacing: 0.8px;
1555
+ font-size: 14px;
1556
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1784
1557
  }
1785
- .scrub-thumbnails .backdrop .carousel {
1786
- position: absolute;
1787
- top: 0;
1788
- left: 0;
1789
- height: 100%;
1790
- white-space: nowrap;
1558
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1559
+ padding-left: 8px;
1560
+ padding-right: 8px;
1791
1561
  }
1792
- .scrub-thumbnails .backdrop .carousel img {
1793
- width: auto;
1562
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1563
+ display: none !important;
1794
1564
  }.player-poster[data-poster] {
1795
1565
  display: flex;
1796
1566
  justify-content: center;
@@ -1825,6 +1595,39 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1825
1595
  }
1826
1596
  .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1827
1597
  fill: #fff;
1598
+ }.seek-time[data-seek-time] {
1599
+ position: absolute;
1600
+ white-space: nowrap;
1601
+ height: 20px;
1602
+ line-height: 20px;
1603
+ font-size: 0;
1604
+ left: -100%;
1605
+ bottom: 55px;
1606
+ background-color: rgba(2, 2, 2, 0.5);
1607
+ z-index: 9999;
1608
+ transition: opacity 0.1s ease;
1609
+ }
1610
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1611
+ opacity: 0;
1612
+ }
1613
+ .seek-time[data-seek-time] [data-seek-time] {
1614
+ display: inline-block;
1615
+ color: white;
1616
+ font-size: 10px;
1617
+ padding-left: 7px;
1618
+ padding-right: 7px;
1619
+ vertical-align: top;
1620
+ }
1621
+ .seek-time[data-seek-time] [data-duration] {
1622
+ display: inline-block;
1623
+ color: rgba(255, 255, 255, 0.5);
1624
+ font-size: 10px;
1625
+ padding-right: 7px;
1626
+ vertical-align: top;
1627
+ }
1628
+ .seek-time[data-seek-time] [data-duration]::before {
1629
+ content: "|";
1630
+ margin-right: 7px;
1828
1631
  }.share_plugin[data-share] {
1829
1632
  pointer-events: auto;
1830
1633
  z-index: 5;
@@ -1893,74 +1696,339 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1893
1696
  }
1894
1697
  .share_plugin[data-share] .share-container .share-container-main .share-container-header--link, .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1895
1698
  overflow: hidden;
1896
- text-overflow: ellipsis;
1897
- color: #818181;
1898
- border: solid 1px #d3d3d3;
1899
- width: calc(100% - 10px);
1900
- padding: 5px;
1699
+ text-overflow: ellipsis;
1700
+ color: #818181;
1701
+ border: solid 1px #d3d3d3;
1702
+ width: calc(100% - 10px);
1703
+ padding: 5px;
1704
+ }
1705
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1706
+ max-height: 90px;
1707
+ resize: none;
1708
+ }
1709
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1710
+ width: 32px;
1711
+ display: inline-block;
1712
+ margin-right: 5px;
1713
+ cursor: pointer;
1714
+ }*,
1715
+ :focus,
1716
+ :visited {
1717
+ outline: none !important;
1718
+ }
1719
+
1720
+ .media-control-cc[data-cc] {
1721
+ position: relative;
1722
+ order: 85;
1723
+ }
1724
+ .media-control-cc[data-cc] button {
1725
+ background-color: transparent;
1726
+ color: #fff;
1727
+ -webkit-font-smoothing: antialiased;
1728
+ border: none;
1729
+ cursor: pointer;
1730
+ }
1731
+ .media-control-cc[data-cc] button .cc-text svg {
1732
+ fill: white;
1733
+ }
1734
+ .media-control-cc[data-cc] button:hover {
1735
+ color: #c9c9c9;
1736
+ }
1737
+ .media-control-cc[data-cc] button.changing {
1738
+ animation: pulse 0.5s infinite alternate;
1739
+ }
1740
+ .media-control-cc[data-cc] ul {
1741
+ width: 80px;
1742
+ list-style-type: none;
1743
+ position: absolute;
1744
+ bottom: 25px;
1745
+ border: 1px solid black;
1746
+ display: none;
1747
+ background-color: #e6e6e6;
1748
+ padding: 8px 0;
1749
+ }
1750
+ .media-control-cc[data-cc] li a {
1751
+ color: #444;
1752
+ padding: 2px 10px;
1753
+ display: block;
1754
+ text-decoration: none;
1755
+ }
1756
+ .media-control-cc[data-cc] li a:hover {
1757
+ background-color: #555;
1758
+ color: white;
1759
+ }
1760
+ .media-control-cc[data-cc] li a:hover a {
1761
+ color: white;
1762
+ text-decoration: none;
1763
+ }
1764
+ .media-control-cc[data-cc] li.current a {
1765
+ color: #f00;
1766
+ background-color: #555;
1767
+ }
1768
+
1769
+ @keyframes pulse {
1770
+ 0% {
1771
+ color: #fff;
1772
+ }
1773
+ 50% {
1774
+ color: #ff0101;
1775
+ }
1776
+ 100% {
1777
+ color: #B80000;
1778
+ }
1779
+ }
1780
+ ::cue {
1781
+ visibility: hidden !important;
1782
+ font-size: 0 !important;
1783
+ }
1784
+
1785
+ .ios-fullscreen::cue {
1786
+ visibility: visible !important;
1787
+ font-size: 1em !important;
1788
+ }.spinner-three-bounce[data-spinner] {
1789
+ position: absolute;
1790
+ width: 70px;
1791
+ text-align: center;
1792
+ z-index: 999;
1793
+ left: 0;
1794
+ right: 0;
1795
+ margin: 0 auto;
1796
+ margin-left: auto;
1797
+ margin-right: auto;
1798
+ /* center vertically */
1799
+ top: 50%;
1800
+ transform: translateY(-50%);
1801
+ }
1802
+ .spinner-three-bounce[data-spinner] > div {
1803
+ width: 18px;
1804
+ height: 18px;
1805
+ background-color: #FFF;
1806
+ border-radius: 100%;
1807
+ display: inline-block;
1808
+ animation: bouncedelay 1.4s infinite ease-in-out;
1809
+ /* Prevent first frame from flickering when animation starts */
1810
+ animation-fill-mode: both;
1811
+ }
1812
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1813
+ animation-delay: -0.32s;
1814
+ }
1815
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1816
+ animation-delay: -0.16s;
1817
+ }
1818
+
1819
+ @keyframes bouncedelay {
1820
+ 0%, 80%, 100% {
1821
+ transform: scale(0);
1822
+ }
1823
+ 40% {
1824
+ transform: scale(1);
1825
+ }
1826
+ }.scrub-thumbnails {
1827
+ position: absolute;
1828
+ bottom: 52px;
1829
+ width: 100%;
1830
+ transition: opacity 0.3s ease;
1831
+ }
1832
+ .scrub-thumbnails.hidden {
1833
+ opacity: 0;
1834
+ }
1835
+ .scrub-thumbnails .thumbnail-container {
1836
+ display: inline-block;
1837
+ position: relative;
1838
+ overflow: hidden;
1839
+ background-color: #000;
1840
+ }
1841
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
1842
+ position: absolute;
1843
+ width: auto;
1844
+ }
1845
+ .scrub-thumbnails .thumbnails-text {
1846
+ background-color: rgba(74, 74, 74, 0.7);
1847
+ border-radius: 3px;
1848
+ white-space: nowrap;
1849
+ overflow: hidden;
1850
+ text-overflow: ellipsis;
1851
+ color: white;
1852
+ position: absolute;
1853
+ bottom: 23px;
1854
+ width: 100px;
1855
+ }
1856
+ .scrub-thumbnails .spotlight {
1857
+ background-color: #4a4a4a;
1858
+ overflow: hidden;
1859
+ position: absolute;
1860
+ bottom: 0;
1861
+ left: 0;
1862
+ border-color: #4a4a4a;
1863
+ border-style: solid;
1864
+ border-width: 3px;
1865
+ border-radius: 3px;
1866
+ }
1867
+ .scrub-thumbnails .spotlight img {
1868
+ width: auto;
1869
+ }
1870
+ .scrub-thumbnails .backdrop {
1871
+ position: absolute;
1872
+ left: 0;
1873
+ bottom: 0;
1874
+ right: 0;
1875
+ background-color: #000;
1876
+ overflow: hidden;
1901
1877
  }
1902
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1903
- max-height: 90px;
1904
- resize: none;
1878
+ .scrub-thumbnails .backdrop .carousel {
1879
+ position: absolute;
1880
+ top: 0;
1881
+ left: 0;
1882
+ height: 100%;
1883
+ white-space: nowrap;
1905
1884
  }
1906
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1907
- width: 32px;
1908
- display: inline-block;
1909
- margin-right: 5px;
1910
- cursor: pointer;
1911
- }*,
1912
- :focus,
1913
- :visited {
1885
+ .scrub-thumbnails .backdrop .carousel img {
1886
+ width: auto;
1887
+ }.player-logo[data-logo] {
1888
+ position: absolute;
1889
+ z-index: 2;
1890
+ width: 100%;
1891
+ height: 100%;
1892
+ }
1893
+
1894
+ .clappr-logo {
1895
+ position: absolute;
1896
+ }*, :focus, :visited {
1914
1897
  outline: none !important;
1915
1898
  }
1916
1899
 
1917
- .media-control-cc[data-cc] {
1900
+ .multicamera[data-multicamera] {
1901
+ float: right;
1902
+ margin-top: 4px;
1918
1903
  position: relative;
1919
- order: 85;
1904
+ margin-right: 20px;
1905
+ width: 20px;
1920
1906
  }
1921
- .media-control-cc[data-cc] button {
1907
+ .multicamera[data-multicamera] button {
1922
1908
  background-color: transparent;
1923
1909
  color: #fff;
1910
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1924
1911
  -webkit-font-smoothing: antialiased;
1925
1912
  border: none;
1926
- cursor: pointer;
1913
+ font-size: 14px;
1914
+ padding: 0;
1927
1915
  }
1928
- .media-control-cc[data-cc] button .cc-text svg {
1929
- fill: white;
1916
+ .multicamera[data-multicamera] button svg {
1917
+ height: 20px;
1918
+ position: relative;
1919
+ margin-top: 6px;
1930
1920
  }
1931
- .media-control-cc[data-cc] button:hover {
1921
+ .multicamera[data-multicamera] button:hover {
1932
1922
  color: #c9c9c9;
1933
1923
  }
1934
- .media-control-cc[data-cc] button.changing {
1924
+ .multicamera[data-multicamera] button.changing {
1935
1925
  animation: pulse 0.5s infinite alternate;
1936
1926
  }
1937
- .media-control-cc[data-cc] ul {
1938
- width: 80px;
1927
+ .multicamera[data-multicamera] button span.quality-arrow {
1928
+ width: 9px;
1929
+ height: 6px;
1930
+ margin-top: 11px;
1931
+ margin-left: 5px;
1932
+ }
1933
+ .multicamera[data-multicamera] > ul {
1934
+ padding: 6px 0;
1935
+ right: -24px;
1936
+ width: 245px;
1939
1937
  list-style-type: none;
1940
1938
  position: absolute;
1941
- bottom: 25px;
1942
- border: 1px solid black;
1939
+ bottom: 48px;
1940
+ border-radius: 4px;
1943
1941
  display: none;
1944
- background-color: #e6e6e6;
1945
- padding: 8px 0;
1942
+ background-color: rgba(74, 74, 74, 0.9);
1946
1943
  }
1947
- .media-control-cc[data-cc] li a {
1944
+ .multicamera[data-multicamera] > ul::after {
1945
+ content: "";
1946
+ position: absolute;
1947
+ top: 100%;
1948
+ left: 85%;
1949
+ margin-left: -10px;
1950
+ width: 0;
1951
+ height: 0;
1952
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1953
+ border-right: 10px solid transparent;
1954
+ border-left: 10px solid transparent;
1955
+ }
1956
+ .multicamera[data-multicamera] li {
1957
+ font-size: 10px;
1958
+ cursor: pointer;
1959
+ }
1960
+ .multicamera[data-multicamera] li .multicamera-item {
1961
+ display: flex;
1962
+ padding: 10px 0;
1963
+ justify-content: center;
1964
+ position: relative;
1965
+ }
1966
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1967
+ pointer-events: none;
1968
+ }
1969
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1970
+ opacity: 0.5;
1971
+ }
1972
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1973
+ opacity: 0.5;
1974
+ }
1975
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1976
+ background-color: rgba(0, 0, 0, 0);
1977
+ }
1978
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1979
+ background-color: rgba(0, 0, 0, 0.3);
1980
+ }
1981
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1982
+ width: 80px;
1983
+ height: 60px;
1984
+ }
1985
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1986
+ width: 80px;
1987
+ height: 60px;
1988
+ }
1989
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1990
+ width: 120px;
1991
+ text-align: left;
1992
+ margin-left: 15px;
1993
+ }
1994
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1995
+ width: 120px;
1996
+ height: 20px;
1997
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1998
+ font-size: 14px;
1999
+ font-weight: normal;
2000
+ font-style: normal;
2001
+ font-stretch: normal;
2002
+ line-height: 1.43;
2003
+ letter-spacing: normal;
2004
+ text-align: left;
2005
+ color: #fff;
2006
+ text-overflow: ellipsis;
2007
+ overflow: hidden;
2008
+ }
2009
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
2010
+ opacity: 0.6;
2011
+ }
2012
+ .multicamera[data-multicamera] li[data-title] {
2013
+ background-color: #c3c2c2;
2014
+ padding: 5px;
2015
+ }
2016
+ .multicamera[data-multicamera] li a {
1948
2017
  color: #444;
1949
2018
  padding: 2px 10px;
1950
2019
  display: block;
1951
2020
  text-decoration: none;
1952
2021
  }
1953
- .media-control-cc[data-cc] li a:hover {
2022
+ .multicamera[data-multicamera] li a:hover {
1954
2023
  background-color: #555;
1955
2024
  color: white;
1956
2025
  }
1957
- .media-control-cc[data-cc] li a:hover a {
2026
+ .multicamera[data-multicamera] li a:hover a {
1958
2027
  color: white;
1959
2028
  text-decoration: none;
1960
2029
  }
1961
- .media-control-cc[data-cc] li.current a {
2030
+ .multicamera[data-multicamera] li.current a {
1962
2031
  color: #f00;
1963
- background-color: #555;
1964
2032
  }
1965
2033
 
1966
2034
  @keyframes pulse {
@@ -1973,93 +2041,25 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1973
2041
  100% {
1974
2042
  color: #B80000;
1975
2043
  }
1976
- }
1977
- ::cue {
1978
- visibility: hidden !important;
1979
- font-size: 0 !important;
2044
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
2045
+ height: 0;
1980
2046
  }
1981
2047
 
1982
- .ios-fullscreen::cue {
1983
- visibility: visible !important;
1984
- font-size: 1em !important;
1985
- }.player-logo[data-logo] {
2048
+ .skip_time_plugin[data-skip-time] {
1986
2049
  position: absolute;
1987
- z-index: 2;
1988
2050
  width: 100%;
1989
- height: 100%;
1990
- }
1991
-
1992
- .clappr-logo {
1993
- position: absolute;
1994
- }.spinner-three-bounce[data-spinner] {
1995
- position: absolute;
1996
- width: 70px;
1997
- text-align: center;
1998
- z-index: 999;
1999
- left: 0;
2000
- right: 0;
2001
- margin: 0 auto;
2002
- margin-left: auto;
2003
- margin-right: auto;
2004
- /* center vertically */
2005
- top: 50%;
2006
- transform: translateY(-50%);
2007
- }
2008
- .spinner-three-bounce[data-spinner] > div {
2009
- width: 18px;
2010
- height: 18px;
2011
- background-color: #FFF;
2012
- border-radius: 100%;
2013
- display: inline-block;
2014
- animation: bouncedelay 1.4s infinite ease-in-out;
2015
- /* Prevent first frame from flickering when animation starts */
2016
- animation-fill-mode: both;
2017
- }
2018
- .spinner-three-bounce[data-spinner] [data-bounce1] {
2019
- animation-delay: -0.32s;
2020
- }
2021
- .spinner-three-bounce[data-spinner] [data-bounce2] {
2022
- animation-delay: -0.16s;
2023
- }
2024
-
2025
- @keyframes bouncedelay {
2026
- 0%, 80%, 100% {
2027
- transform: scale(0);
2028
- }
2029
- 40% {
2030
- transform: scale(1);
2031
- }
2032
- }.seek-time[data-seek-time] {
2033
- position: absolute;
2034
- white-space: nowrap;
2035
- height: 20px;
2036
- line-height: 20px;
2037
- font-size: 0;
2038
- left: -100%;
2039
- bottom: 55px;
2040
- background-color: rgba(2, 2, 2, 0.5);
2041
- z-index: 9999;
2042
- transition: opacity 0.1s ease;
2043
- }
2044
- .seek-time[data-seek-time].hidden[data-seek-time] {
2045
- opacity: 0;
2046
- }
2047
- .seek-time[data-seek-time] [data-seek-time] {
2048
- display: inline-block;
2049
- color: white;
2050
- font-size: 10px;
2051
- padding-left: 7px;
2052
- padding-right: 7px;
2053
- vertical-align: top;
2051
+ height: calc(100% - 50px);
2052
+ z-index: 9998;
2053
+ background-color: transparent;
2054
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
2054
2055
  }
2055
- .seek-time[data-seek-time] [data-duration] {
2056
- display: inline-block;
2057
- color: rgba(255, 255, 255, 0.5);
2058
- font-size: 10px;
2059
- padding-right: 7px;
2060
- vertical-align: top;
2056
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
2057
+ width: 100%;
2058
+ height: 100%;
2059
+ display: flex;
2060
+ justify-content: space-between;
2061
2061
  }
2062
- .seek-time[data-seek-time] [data-duration]::before {
2063
- content: "|";
2064
- margin-right: 7px;
2062
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
2063
+ width: 33.3%;
2064
+ height: 100%;
2065
2065
  }