|
@@ -60,7 +60,7 @@
|
|
|
pointer-events: initial !important;
|
|
|
.plyr__controls__item.plyr__progress__container{
|
|
|
input[type=range]{
|
|
|
- color: #01c1b5;
|
|
|
+ color: #ffffff;
|
|
|
height: 10px;
|
|
|
}
|
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
|
@@ -74,8 +74,8 @@
|
|
|
}
|
|
|
.plyr__progress__buffer{
|
|
|
height: 2px;
|
|
|
- color: rgba(1, 193, 181, 0.8);
|
|
|
- background-color: #fff;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
margin-top: -1px;
|
|
|
}
|
|
|
}
|
|
@@ -314,6 +314,23 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &.isLandscapeScreen2 {
|
|
|
+ :global {
|
|
|
+ .plyr {
|
|
|
+ .plyr__controls{
|
|
|
+ .plyr__controls__item.plyr__progress__container {
|
|
|
+ input[type="range"] {
|
|
|
+ color: #01c1b5 !important;
|
|
|
+ }
|
|
|
+ .plyr__progress__buffer {
|
|
|
+ color: rgba(1, 193, 181, 0.8);
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.musicSection {
|
|
@@ -881,6 +898,7 @@
|
|
|
// 横屏样式
|
|
|
.creation.creationTablet{
|
|
|
.playSection.isLandscapeScreen{
|
|
|
+ position: relative;
|
|
|
.audioBox {
|
|
|
.audioBga{
|
|
|
width: 72%;
|
|
@@ -900,6 +918,16 @@
|
|
|
height: 100%;
|
|
|
min-height: 100vh;
|
|
|
z-index: 1000;
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 115px;
|
|
|
+ content: "";
|
|
|
+ background: linear-gradient(0, rgba(255, 255, 255, 0) 0%, rgba(3, 3, 3, 0.2) 45%, rgba(0, 0, 0, 0.7) 100%);
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
.landscapeScreen{
|
|
|
display: none;
|
|
|
}
|
|
@@ -945,7 +973,7 @@
|
|
|
.plyr__controls__item.plyr__progress__container{
|
|
|
margin-left: 9px;
|
|
|
input[type=range]{
|
|
|
- color: #01c1b5;
|
|
|
+ color: #ffffff;
|
|
|
height: 20px;
|
|
|
}
|
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
|
@@ -956,10 +984,11 @@
|
|
|
height: 12px;
|
|
|
margin-top: -4px;
|
|
|
box-shadow: initial;
|
|
|
+ background: #ffffff;
|
|
|
}
|
|
|
.plyr__progress__buffer{
|
|
|
height: 4px;
|
|
|
- color: rgba(1, 193, 181, 0.8);
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
background-color: #fff;
|
|
|
margin-top: -2px;
|
|
|
}
|
|
@@ -1051,6 +1080,20 @@
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
+ .plyr__controls__item.plyr__progress__container{
|
|
|
+ input[type="range"]::-webkit-slider-thumb {
|
|
|
+ background-color: #2DC7AA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plyr__controls__item.plyr__time {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #131415;
|
|
|
+ display: initial;
|
|
|
+ &.plyr__time--current {
|
|
|
+ margin-left: 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|