@gcorevideo/player 2.28.23 → 2.28.24

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.
@@ -53,14 +53,15 @@
53
53
  }
54
54
  }
55
55
 
56
- // ::cue {
57
- // visibility: hidden !important;
58
- // font-size: 0 !important;
59
- // }
60
- // .ios-fullscreen::cue {
61
- // visibility: visible !important;
62
- // font-size: 1em !important;
63
- // }
56
+ ::cue {
57
+ visibility: hidden !important;
58
+ font-size: 0 !important;
59
+ }
60
+
61
+ .ios-fullscreen::cue {
62
+ visibility: visible !important;
63
+ font-size: 1em !important;
64
+ }
64
65
 
65
66
  .container {
66
67
  .gplayer-cc-line {
package/dist/core.js CHANGED
@@ -51319,7 +51319,7 @@ class Player {
51319
51319
  }
51320
51320
  }
51321
51321
 
51322
- var version$1 = "2.28.23";
51322
+ var version$1 = "2.28.24";
51323
51323
 
51324
51324
  var packages = {
51325
51325
  "node_modules/@clappr/core": {
package/dist/index.css CHANGED
@@ -171,6 +171,51 @@
171
171
  }
172
172
  .big-mute-icon[data-big-mute-icon]:hover svg path {
173
173
  fill: #151515 !important;
174
+ }.media-control-skin-1 .media-control-item.media-control-gear {
175
+ order: 99;
176
+ }
177
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
178
+ position: absolute;
179
+ right: 16px;
180
+ bottom: 52px;
181
+ width: 250px;
182
+ min-height: 48px;
183
+ z-index: 9999;
184
+ border-radius: 4px;
185
+ box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
186
+ }
187
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
188
+ padding: 8px 0;
189
+ }
190
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
191
+ margin: 0;
192
+ text-align: left;
193
+ line-height: 22px;
194
+ padding: 5px 14px;
195
+ width: 250px;
196
+ font-size: 12px;
197
+ display: flex;
198
+ align-items: center;
199
+ justify-content: flex-start;
200
+ gap: 8px;
201
+ }
202
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
203
+ flex: 24px 0 0;
204
+ height: 20px;
205
+ }
206
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
207
+ visibility: hidden;
208
+ display: inline-block;
209
+ }
210
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
211
+ flex: 0 1 100%;
212
+ }
213
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
214
+ flex: 0 0 14px;
215
+ height: 20px;
216
+ }
217
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
218
+ flex: 1 0 auto;
174
219
  }*,
175
220
  :focus,
176
221
  :visited {
@@ -234,51 +279,6 @@
234
279
  }
235
280
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
236
281
  display: inline;
237
- }.media-control-skin-1 .media-control-item.media-control-gear {
238
- order: 99;
239
- }
240
- .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
241
- position: absolute;
242
- right: 16px;
243
- bottom: 52px;
244
- width: 250px;
245
- min-height: 48px;
246
- z-index: 9999;
247
- border-radius: 4px;
248
- box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
249
- }
250
- .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
251
- padding: 8px 0;
252
- }
253
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
254
- margin: 0;
255
- text-align: left;
256
- line-height: 22px;
257
- padding: 5px 14px;
258
- width: 250px;
259
- font-size: 12px;
260
- display: flex;
261
- align-items: center;
262
- justify-content: flex-start;
263
- gap: 8px;
264
- }
265
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
266
- flex: 24px 0 0;
267
- height: 20px;
268
- }
269
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
270
- visibility: hidden;
271
- display: inline-block;
272
- }
273
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
274
- flex: 0 1 100%;
275
- }
276
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
277
- flex: 0 0 14px;
278
- height: 20px;
279
- }
280
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
281
- flex: 1 0 auto;
282
282
  }:root {
283
283
  --primary-background-color: #000;
284
284
  --secondary-background-color: #262626;
@@ -679,29 +679,6 @@
679
679
  .context-menu .context-menu-list-item_icon {
680
680
  width: 20px;
681
681
  height: 20px;
682
- }@charset "UTF-8";
683
- .gplayer-mc-clips {
684
- display: flex;
685
- gap: 6px;
686
- }
687
- .gplayer-mc-clips .gplayer-mc-clips-text {
688
- text-overflow: ellipsis;
689
- white-space: nowrap;
690
- overflow: hidden;
691
- display: inline-block;
692
- text-overflow: ellipsis;
693
- color: white;
694
- cursor: default;
695
- line-height: var(--bottom-panel);
696
- position: relative;
697
- max-width: 150px;
698
- }
699
- .gplayer-mc-clips .gplayer-mc-clips-text::before {
700
- content: "•";
701
- padding-right: 6px;
702
- }
703
- .gplayer-mc-clips .gplayer-mc-clips-text.compact {
704
- max-width: 100px;
705
682
  }.dvr-controls {
706
683
  --disabled-opacity: 0.3;
707
684
  --circle-radius: 5px;
@@ -793,6 +770,141 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
793
770
  cursor: pointer;
794
771
  width: 30px;
795
772
  margin: 15px auto 0;
773
+ }*,
774
+ :focus,
775
+ :visited {
776
+ outline: none !important;
777
+ }
778
+
779
+ .multicamera[data-multicamera] {
780
+ float: right;
781
+ margin-top: 4px;
782
+ position: relative;
783
+ margin-right: 20px;
784
+ width: 20px;
785
+ }
786
+ .multicamera[data-multicamera] button {
787
+ background-color: transparent;
788
+ color: #fff;
789
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
790
+ -webkit-font-smoothing: antialiased;
791
+ border: none;
792
+ font-size: 14px;
793
+ padding: 0;
794
+ }
795
+ .multicamera[data-multicamera] button svg {
796
+ height: 20px;
797
+ position: relative;
798
+ margin-top: 6px;
799
+ }
800
+ .multicamera[data-multicamera] button:hover {
801
+ color: #c9c9c9;
802
+ }
803
+ .multicamera[data-multicamera] button.changing {
804
+ animation: pulse 0.5s infinite alternate;
805
+ }
806
+ .multicamera[data-multicamera] button span.quality-arrow {
807
+ width: 9px;
808
+ height: 6px;
809
+ margin-top: 11px;
810
+ margin-left: 5px;
811
+ }
812
+ .multicamera[data-multicamera] > ul {
813
+ padding: 6px 0;
814
+ right: -24px;
815
+ width: 245px;
816
+ list-style-type: none;
817
+ position: absolute;
818
+ bottom: 48px;
819
+ border-radius: 4px;
820
+ display: none;
821
+ background-color: rgba(74, 74, 74, 0.9);
822
+ }
823
+ .multicamera[data-multicamera] > ul::after {
824
+ content: "";
825
+ position: absolute;
826
+ top: 100%;
827
+ left: 85%;
828
+ margin-left: -10px;
829
+ width: 0;
830
+ height: 0;
831
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
832
+ border-right: 10px solid transparent;
833
+ border-left: 10px solid transparent;
834
+ }
835
+ .multicamera[data-multicamera] li {
836
+ font-size: 10px;
837
+ cursor: pointer;
838
+ }
839
+ .multicamera[data-multicamera] li .multicamera-item {
840
+ display: flex;
841
+ padding: 10px 0;
842
+ justify-content: center;
843
+ position: relative;
844
+ }
845
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
846
+ opacity: 0.5;
847
+ }
848
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
849
+ opacity: 0.5;
850
+ }
851
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
852
+ background-color: rgba(0, 0, 0, 0);
853
+ }
854
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
855
+ pointer-events: none;
856
+ }
857
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
858
+ background-color: rgba(0, 0, 0, 0.3);
859
+ }
860
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
861
+ width: 80px;
862
+ height: 60px;
863
+ }
864
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
865
+ width: 80px;
866
+ height: 60px;
867
+ }
868
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
869
+ width: 120px;
870
+ text-align: left;
871
+ margin-left: 15px;
872
+ }
873
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
874
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
875
+ width: 120px;
876
+ height: 20px;
877
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
878
+ font-size: 14px;
879
+ font-weight: normal;
880
+ font-style: normal;
881
+ font-stretch: normal;
882
+ line-height: 1.43;
883
+ letter-spacing: normal;
884
+ text-align: left;
885
+ color: #fff;
886
+ text-overflow: ellipsis;
887
+ overflow: hidden;
888
+ }
889
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
890
+ opacity: 0.6;
891
+ }
892
+ .multicamera[data-multicamera] li a {
893
+ color: #444;
894
+ padding: 2px 10px;
895
+ display: block;
896
+ text-decoration: none;
897
+ }
898
+ .multicamera[data-multicamera] li a:hover {
899
+ background-color: #555;
900
+ color: white;
901
+ }
902
+ .multicamera[data-multicamera] li a:hover a {
903
+ color: white;
904
+ text-decoration: none;
905
+ }
906
+ .multicamera[data-multicamera] li.current a {
907
+ color: #f00;
796
908
  }[data-player] {
797
909
  --bottom-panel: 40px;
798
910
  }
@@ -1414,149 +1526,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1414
1526
  100% {
1415
1527
  color: #B80000;
1416
1528
  }
1417
- }*,
1418
- :focus,
1419
- :visited {
1420
- outline: none !important;
1421
- }
1422
-
1423
- .multicamera[data-multicamera] {
1424
- float: right;
1425
- margin-top: 4px;
1426
- position: relative;
1427
- margin-right: 20px;
1428
- width: 20px;
1429
- }
1430
- .multicamera[data-multicamera] button {
1431
- background-color: transparent;
1432
- color: #fff;
1433
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1434
- -webkit-font-smoothing: antialiased;
1435
- border: none;
1436
- font-size: 14px;
1437
- padding: 0;
1438
- }
1439
- .multicamera[data-multicamera] button svg {
1440
- height: 20px;
1441
- position: relative;
1442
- margin-top: 6px;
1443
- }
1444
- .multicamera[data-multicamera] button:hover {
1445
- color: #c9c9c9;
1446
- }
1447
- .multicamera[data-multicamera] button.changing {
1448
- animation: pulse 0.5s infinite alternate;
1449
- }
1450
- .multicamera[data-multicamera] button span.quality-arrow {
1451
- width: 9px;
1452
- height: 6px;
1453
- margin-top: 11px;
1454
- margin-left: 5px;
1455
- }
1456
- .multicamera[data-multicamera] > ul {
1457
- padding: 6px 0;
1458
- right: -24px;
1459
- width: 245px;
1460
- list-style-type: none;
1461
- position: absolute;
1462
- bottom: 48px;
1463
- border-radius: 4px;
1464
- display: none;
1465
- background-color: rgba(74, 74, 74, 0.9);
1466
- }
1467
- .multicamera[data-multicamera] > ul::after {
1468
- content: "";
1469
- position: absolute;
1470
- top: 100%;
1471
- left: 85%;
1472
- margin-left: -10px;
1473
- width: 0;
1474
- height: 0;
1475
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1476
- border-right: 10px solid transparent;
1477
- border-left: 10px solid transparent;
1478
- }
1479
- .multicamera[data-multicamera] li {
1480
- font-size: 10px;
1481
- cursor: pointer;
1482
- }
1483
- .multicamera[data-multicamera] li .multicamera-item {
1484
- display: flex;
1485
- padding: 10px 0;
1486
- justify-content: center;
1487
- position: relative;
1488
- }
1489
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1490
- opacity: 0.5;
1491
- }
1492
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1493
- opacity: 0.5;
1494
- }
1495
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1496
- background-color: rgba(0, 0, 0, 0);
1497
- }
1498
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1499
- pointer-events: none;
1500
- }
1501
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1502
- background-color: rgba(0, 0, 0, 0.3);
1503
- }
1504
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1505
- width: 80px;
1506
- height: 60px;
1507
- }
1508
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1509
- width: 80px;
1510
- height: 60px;
1511
- }
1512
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1513
- width: 120px;
1514
- text-align: left;
1515
- margin-left: 15px;
1516
- }
1517
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
1518
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1519
- width: 120px;
1520
- height: 20px;
1521
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1522
- font-size: 14px;
1523
- font-weight: normal;
1524
- font-style: normal;
1525
- font-stretch: normal;
1526
- line-height: 1.43;
1527
- letter-spacing: normal;
1528
- text-align: left;
1529
- color: #fff;
1530
- text-overflow: ellipsis;
1531
- overflow: hidden;
1532
- }
1533
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1534
- opacity: 0.6;
1535
- }
1536
- .multicamera[data-multicamera] li a {
1537
- color: #444;
1538
- padding: 2px 10px;
1539
- display: block;
1540
- text-decoration: none;
1541
- }
1542
- .multicamera[data-multicamera] li a:hover {
1543
- background-color: #555;
1544
- color: white;
1545
- }
1546
- .multicamera[data-multicamera] li a:hover a {
1547
- color: white;
1548
- text-decoration: none;
1549
- }
1550
- .multicamera[data-multicamera] li.current a {
1551
- color: #f00;
1552
- }.media-control-skin-1 .media-control-item.media-control-pip {
1553
- order: 95;
1554
- }
1555
- .media-control-skin-1 .media-control-item.media-control-pip button {
1556
- height: 20px;
1557
- }
1558
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
1559
- height: 20px;
1560
1529
  }.player-poster {
1561
1530
  display: flex;
1562
1531
  justify-content: center;
@@ -1591,6 +1560,47 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1591
1560
  }
1592
1561
  .player-poster .play-wrapper svg path {
1593
1562
  fill: #fff;
1563
+ }.media-control-skin-1 .media-control-item.media-control-pip {
1564
+ order: 95;
1565
+ }
1566
+ .media-control-skin-1 .media-control-item.media-control-pip button {
1567
+ height: 20px;
1568
+ }
1569
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
1570
+ height: 20px;
1571
+ }.seek-time {
1572
+ position: absolute;
1573
+ white-space: nowrap;
1574
+ height: 20px;
1575
+ line-height: 20px;
1576
+ font-size: 0;
1577
+ left: -100%;
1578
+ bottom: 55px;
1579
+ background-color: rgba(2, 2, 2, 0.5);
1580
+ z-index: 9999;
1581
+ transition: opacity 0.1s ease;
1582
+ }
1583
+ .seek-time.hidden {
1584
+ opacity: 0;
1585
+ }
1586
+ .seek-time .seek-time__pos {
1587
+ display: inline-block;
1588
+ color: white;
1589
+ font-size: 10px;
1590
+ padding-left: 7px;
1591
+ padding-right: 7px;
1592
+ vertical-align: top;
1593
+ }
1594
+ .seek-time .seek-time__duration {
1595
+ display: inline-block;
1596
+ color: rgba(255, 255, 255, 0.5);
1597
+ font-size: 10px;
1598
+ padding-right: 7px;
1599
+ vertical-align: top;
1600
+ }
1601
+ .seek-time .seek-time__duration::before {
1602
+ content: "|";
1603
+ margin-right: 7px;
1594
1604
  }.quality-levels li.disabled {
1595
1605
  opacity: 0.5;
1596
1606
  pointer-events: none;
@@ -1680,60 +1690,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1680
1690
  display: inline-block;
1681
1691
  margin-right: 5px;
1682
1692
  cursor: pointer;
1683
- }.container-with-poster-clickable .mc-skip-time {
1684
- height: 0;
1685
- }
1686
-
1687
- .mc-skip-time {
1688
- position: absolute;
1689
- width: 100%;
1690
- height: calc(100% - 50px);
1691
- z-index: 9998;
1692
- background-color: transparent;
1693
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1694
- }
1695
- .mc-skip-time .skip-container {
1696
- width: 100%;
1697
- height: 100%;
1698
- display: flex;
1699
- justify-content: space-between;
1700
- }
1701
- .mc-skip-time .skip-container .skip-item {
1702
- flex: 1 0 0px;
1703
- height: 100%;
1704
- }.seek-time {
1705
- position: absolute;
1706
- white-space: nowrap;
1707
- height: 20px;
1708
- line-height: 20px;
1709
- font-size: 0;
1710
- left: -100%;
1711
- bottom: 55px;
1712
- background-color: rgba(2, 2, 2, 0.5);
1713
- z-index: 9999;
1714
- transition: opacity 0.1s ease;
1715
- }
1716
- .seek-time.hidden {
1717
- opacity: 0;
1718
- }
1719
- .seek-time .seek-time__pos {
1720
- display: inline-block;
1721
- color: white;
1722
- font-size: 10px;
1723
- padding-left: 7px;
1724
- padding-right: 7px;
1725
- vertical-align: top;
1726
- }
1727
- .seek-time .seek-time__duration {
1728
- display: inline-block;
1729
- color: rgba(255, 255, 255, 0.5);
1730
- font-size: 10px;
1731
- padding-right: 7px;
1732
- vertical-align: top;
1733
- }
1734
- .seek-time .seek-time__duration::before {
1735
- content: "|";
1736
- margin-right: 7px;
1737
1693
  }.spinner-three-bounce[data-spinner] {
1738
1694
  position: absolute;
1739
1695
  width: 70px;
@@ -1772,53 +1728,50 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1772
1728
  40% {
1773
1729
  transform: scale(1);
1774
1730
  }
1775
- }.media-control-skin-1 .media-control-cc button.media-control-button {
1776
- display: flex;
1777
- justify-content: center;
1778
- padding: 0;
1779
- align-items: center;
1780
- vertical-align: top;
1781
- }
1782
- .media-control-skin-1 .media-control-cc button.media-control-button:hover {
1783
- color: white;
1784
- }
1785
- .media-control-skin-1 .media-control-cc ul li {
1786
- text-align: center;
1787
- }
1788
- .media-control-skin-1 .media-control-cc ul li a {
1789
- height: 30px;
1790
- padding: 5px 10px;
1791
- color: #fffffe;
1792
- }
1793
- .media-control-skin-1 .media-control-cc ul li a:hover {
1794
- background-color: rgba(0, 0, 0, 0.4);
1731
+ }.container-with-poster-clickable .mc-skip-time {
1732
+ height: 0;
1795
1733
  }
1796
- .media-control-skin-1 .media-control-cc ul li.current a {
1797
- background-color: rgba(0, 0, 0, 0.4);
1734
+
1735
+ .mc-skip-time {
1736
+ position: absolute;
1737
+ width: 100%;
1738
+ height: calc(100% - 50px);
1739
+ z-index: 9998;
1740
+ background-color: transparent;
1741
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1798
1742
  }
1799
- .media-control-skin-1 .media-control-cc ul li:first-child a {
1800
- border-bottom-left-radius: 4px;
1801
- border-bottom-right-radius: 4px;
1743
+ .mc-skip-time .skip-container {
1744
+ width: 100%;
1745
+ height: 100%;
1746
+ display: flex;
1747
+ justify-content: space-between;
1802
1748
  }
1803
- .media-control-skin-1 .media-control-cc ul li:last-child a {
1804
- border-top-left-radius: 4px;
1805
- border-top-right-radius: 4px;
1749
+ .mc-skip-time .skip-container .skip-item {
1750
+ flex: 1 0 0px;
1751
+ height: 100%;
1752
+ }@charset "UTF-8";
1753
+ .gplayer-mc-clips {
1754
+ display: flex;
1755
+ gap: 6px;
1806
1756
  }
1807
- .media-control-skin-1 .media-control-cc {
1757
+ .gplayer-mc-clips .gplayer-mc-clips-text {
1758
+ text-overflow: ellipsis;
1759
+ white-space: nowrap;
1760
+ overflow: hidden;
1761
+ display: inline-block;
1762
+ text-overflow: ellipsis;
1763
+ color: white;
1764
+ cursor: default;
1765
+ line-height: var(--bottom-panel);
1808
1766
  position: relative;
1809
- order: 85;
1767
+ max-width: 150px;
1810
1768
  }
1811
-
1812
- .container .gplayer-cc-line {
1813
- position: absolute;
1814
- bottom: calc(var(--bottom-panel) + 5px);
1815
- width: 100%;
1769
+ .gplayer-mc-clips .gplayer-mc-clips-text::before {
1770
+ content: "•";
1771
+ padding-right: 6px;
1816
1772
  }
1817
- .container .gplayer-cc-line p {
1818
- width: auto;
1819
- background-color: rgba(0, 0, 0, 0.4);
1820
- color: white;
1821
- display: inline-block;
1773
+ .gplayer-mc-clips .gplayer-mc-clips-text.compact {
1774
+ max-width: 100px;
1822
1775
  }.scrub-thumbnails {
1823
1776
  position: absolute;
1824
1777
  bottom: 52px;
@@ -1882,6 +1835,63 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1882
1835
  }
1883
1836
  .scrub-thumbnails .backdrop .carousel img {
1884
1837
  width: auto;
1838
+ }.media-control-skin-1 .media-control-cc button.media-control-button {
1839
+ display: flex;
1840
+ justify-content: center;
1841
+ padding: 0;
1842
+ align-items: center;
1843
+ vertical-align: top;
1844
+ }
1845
+ .media-control-skin-1 .media-control-cc button.media-control-button:hover {
1846
+ color: white;
1847
+ }
1848
+ .media-control-skin-1 .media-control-cc ul li {
1849
+ text-align: center;
1850
+ }
1851
+ .media-control-skin-1 .media-control-cc ul li a {
1852
+ height: 30px;
1853
+ padding: 5px 10px;
1854
+ color: #fffffe;
1855
+ }
1856
+ .media-control-skin-1 .media-control-cc ul li a:hover {
1857
+ background-color: rgba(0, 0, 0, 0.4);
1858
+ }
1859
+ .media-control-skin-1 .media-control-cc ul li.current a {
1860
+ background-color: rgba(0, 0, 0, 0.4);
1861
+ }
1862
+ .media-control-skin-1 .media-control-cc ul li:first-child a {
1863
+ border-bottom-left-radius: 4px;
1864
+ border-bottom-right-radius: 4px;
1865
+ }
1866
+ .media-control-skin-1 .media-control-cc ul li:last-child a {
1867
+ border-top-left-radius: 4px;
1868
+ border-top-right-radius: 4px;
1869
+ }
1870
+ .media-control-skin-1 .media-control-cc {
1871
+ position: relative;
1872
+ order: 85;
1873
+ }
1874
+
1875
+ ::cue {
1876
+ visibility: hidden !important;
1877
+ font-size: 0 !important;
1878
+ }
1879
+
1880
+ .ios-fullscreen::cue {
1881
+ visibility: visible !important;
1882
+ font-size: 1em !important;
1883
+ }
1884
+
1885
+ .container .gplayer-cc-line {
1886
+ position: absolute;
1887
+ bottom: calc(var(--bottom-panel) + 5px);
1888
+ width: 100%;
1889
+ }
1890
+ .container .gplayer-cc-line p {
1891
+ width: auto;
1892
+ background-color: rgba(0, 0, 0, 0.4);
1893
+ color: white;
1894
+ display: inline-block;
1885
1895
  }.player-logo[data-logo] {
1886
1896
  position: absolute;
1887
1897
  z-index: 2;