yxw
/
AudioHTML
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

1

main
Seany 2023-11-02 01:05:29 +08:00
parent 753b748135
commit 2c80712ff0
1 changed files with 85 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
css/app.css
View File

@ -12,6 +12,10 @@ body {
background-color: #1E1F21 !important; background-color: #1E1F21 !important;
} }
.content-container {
max-width: 980px;
}
.dotblock { .dotblock {
background-image: url(../images/dotline.png); background-image: url(../images/dotline.png);
max-height: 80px; max-height: 80px;
@ -133,6 +137,35 @@ body {
color: #fff; color: #fff;
} }
.redio-btn {
font-size: 12px !important;
padding: 2px 10px;
margin: 0px;
line-height: 1.5;
}
.state-btn {
border: 1px solid #191919;
background-color: #303030;
color: #eee;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.35);
}
.btn-check:hover+.state-btn{
color: #eee;
border: 1px solid #191919;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.btn-check:checked+.state-btn{
color: #1BC8F2;
border: 1px solid #000;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.35);
}
.ruleraxisy { .ruleraxisy {
@ -324,7 +357,11 @@ body {
} }
#handle1 .rs-handle { #handle1 .rs-handle {
background-color: #000000; background-color: transparent;
border: 8px solid transparent;
border-right-color: #1BC8F3;
margin: -6px 0px 0px 14px !important;
border-width: 6px 50px 6px 4px;
} }
#handle1 .rs-handle:before { #handle1 .rs-handle:before {
@ -333,12 +370,11 @@ body {
position: absolute; position: absolute;
height: 94px; height: 94px;
width: 94px; width: 94px;
background: black; /* background: black; */
right: -47px; right: -47px;
bottom: -47px; bottom: -47px;
border-radius: 100px; border-radius: 100px;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
} }
#handle1 .rs-tooltip { #handle1 .rs-tooltip {
@ -368,15 +404,7 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
#handle1 .rs-range-color { #handle1 .rs-range-color {
background-color: #1BC8F3; background-color: #1BC8F3;
text-shadow: /* background: linear-gradient(90deg,#1BC8F3,#2ca8c7) */
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa,
0 0 92px #0fa,
0 0 102px #0fa,
0 0 151px #0fa;
} }
#handle1 .rs-path-color { #handle1 .rs-path-color {
@ -394,20 +422,6 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
background-color: #1E1F21 !important; background-color: #1E1F21 !important;
} }
.progress-4 {
width: 120px;
height: 20px;
-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
background:
linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
animation: p4 2s infinite steps(6);
}
@keyframes p4 {
100% {
background-size: 120%
}
}
@ -445,27 +459,46 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
.redio-switche { .redio-switche {
background-color: #000; background-color: #000;
padding: 2px; padding: 2px;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15); /* box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15); */
border-radius: 5px; border-radius: 5px;
} }
.redio-switche .btn-check:checked+.btn { .redio-switche .btn-check:checked+.btn {
background-color: #1BC8F3; background-color: #000;
border: 0px; border: 0px;
color: #1BC8F3; color: #1BC8F3;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35) box-shadow: #1BC8F2 0px 0px 14px 0px inset;
background: linear-gradient(90deg,#1BC8F3,#000)
}
.redio-switche .btn-check:checked+.on-btn {
/* background-color: #000; */
border: 0px;
color: #1BC8F3;
box-shadow: #225b6b 0px 0px 2px 0px inset;
background: linear-gradient(90deg,#1bc8f381,rgba(0, 0, 0, 0.438))
}
.redio-switche .btn-check:checked+.off-btn {
border: 0px;
color: #1BC8F3;
box-shadow: #225b6b 0px 0px 2px 0px inset;
background: linear-gradient(270deg,#1bc8f381,#000)
} }
.redio-switche .btn { .redio-switche .btn {
color: #fff; color: #fff;
} }
/* ====滑动条================== */
.volume-slider-box .volume-slider { .volume-slider-box .volume-slider {
display: inline-block; display: inline-block;
width: 45px; width: 30px;
position: relative; position: relative;
text-align: center; text-align: center;
height: 300px; height: 200px;
max-height: 100%; max-height: 100%;
} }
@ -488,7 +521,7 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
.volume-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track { .volume-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none; border: none;
background: #000; background: #000;
width: 18px; width: 12px;
border-color: #343440; border-color: #343440;
border-radius: 10px; border-radius: 10px;
box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px; box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px;
@ -497,7 +530,7 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
.volume-slider input[type=range][orient=vertical]::-moz-range-track { .volume-slider input[type=range][orient=vertical]::-moz-range-track {
border: none; border: none;
background: #343440; background: #343440;
width: 18px; width: 12px;
border-color: #343440; border-color: #343440;
border-radius: 10px; border-radius: 10px;
box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px; box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px;
@ -506,7 +539,7 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
.volume-slider input[type=range][orient=vertical]::-ms-track { .volume-slider input[type=range][orient=vertical]::-ms-track {
border: none; border: none;
background: #343440; background: #343440;
width: 18px; width: 12px;
border-color: #343440; border-color: #343440;
border-radius: 10px; border-radius: 10px;
box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px; box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px;
@ -539,34 +572,36 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
} }
.volume-slider-box .range-slider-bar { .volume-slider-box .range-slider-bar {
left: 16px; left: 12px;
bottom: 3px; bottom: 3px;
position: absolute; position: absolute;
background: linear-gradient(dodgerblue, #1BC8F3); background: linear-gradient(dodgerblue, #1BC8F3);
pointer-events: none; pointer-events: none;
width: 13px; width: 7px;
border-radius: 10px; border-radius: 10px;
} }
.volume-slider-box .range-slider-thumb { .volume-slider-box .range-slider-thumb {
position: absolute; position: absolute;
left: 0px; left: 2px;
width: 45px; width: 35px;
height: 59px; height: 34px;
line-height: 30px; line-height: 30px;
color: #777; color: #777;
font-size: 50%; font-size: 50%;
pointer-events: none; pointer-events: none;
background-image: url(../images/button.png); background-image: url(../images/button.png);
background-size: 75%;
background-repeat: no-repeat;
} }
.slider-value { .slider-value {
border: none; border: none;
background: #000; background: #000;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.15);
color: #555; color: rgb(119, 118, 118);
border-radius: 5px; border-radius: 5px;
font-size: 85%; font-size: 12px;
} }
.slider-value:focus { .slider-value:focus {
@ -578,12 +613,12 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
outline: none; outline: none;
} }
/* === 标尺 ============ */
.volume-ruler { .volume-ruler {
position: relative; position: relative;
width: 14px; width: 14px;
height: 250px; height: 165px;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -592,7 +627,7 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
position: absolute; position: absolute;
border-top: 1px solid #555; border-top: 1px solid #555;
height: 10%; height: 10%;
width: 14px; width: 10px;
} }
.volume-ruler .mm { .volume-ruler .mm {
@ -600,13 +635,7 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
border-top: 1px solid #555; border-top: 1px solid #555;
height: 80%; height: 80%;
width: 14px; width: 14px;
} top: 80%;
.volume-ruler .cm:after {
position: absolute;
right: -15px;
top: -5px;
font: 11px/1 sans-serif;
} }
.volume-ruler .mm { .volume-ruler .mm {
@ -648,87 +677,9 @@ box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.3
.volume-ruler .cm>span { .volume-ruler .cm>span {
position: absolute; position: absolute;
right: -25px; right: -18px;
top: -7px; top: -6px;
font: 11px/1 sans-serif; font: 9px/1 sans-serif;
color: #555; color: #555;
} }
/* ============ */
.item {
position: absolute;
width: 8px;
/* border-radius: 6px; */
background-color: #1f94ea;
-webkit-mask: linear-gradient(180deg, #000 70%, #0000 0) 0/20%;
}
.music .one {
height: 100px;
transform: translateX(-60px);
}
.music .two {
height: 53px;
transform: translateX(-40px);
}
.music .three {
height: 36px;
transform: translateX(-20px);
}
.music .four {
height: 70px;
transform: translateX(0);
}
.music .five {
height: 30px;
transform: translateX(20px);
}
.music .six {
height: 40px;
transform: translateX(40px);
}
.music .seven {
height: 50px;
transform: translateX(60px);
}
@keyframes radius-animation {
100% {
height: 10px;
/* border-radius: 50%; */
filter: contrast(2);
}
}
.music .one {
animation: radius-animation .3s ease;
}
.music .two {
animation: radius-animation .6s ease;
}
.music .three {
animation: radius-animation .57s ease;
}
.music .four {
animation: radius-animation .52s ease;
}
.music .five {
animation: radius-animation .4s ease;
}
.music .six {
animation: radius-animation .3s ease;
}
.music .seven {
animation: radius-animation .7s ease;
}
.music .item {
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-direction: alternate;
-webkit-animation-direction: alternate;
}