main
parent
753b748135
commit
2c80712ff0
217
css/app.css
217
css/app.css
|
|
@ -12,6 +12,10 @@ body {
|
|||
background-color: #1E1F21 !important;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
.dotblock {
|
||||
background-image: url(../images/dotline.png);
|
||||
max-height: 80px;
|
||||
|
|
@ -133,6 +137,35 @@ body {
|
|||
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 {
|
||||
|
|
@ -324,7 +357,11 @@ body {
|
|||
}
|
||||
|
||||
#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 {
|
||||
|
|
@ -333,12 +370,11 @@ body {
|
|||
position: absolute;
|
||||
height: 94px;
|
||||
width: 94px;
|
||||
background: black;
|
||||
/* background: black; */
|
||||
right: -47px;
|
||||
bottom: -47px;
|
||||
border-radius: 100px;
|
||||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||||
|
||||
}
|
||||
|
||||
#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 {
|
||||
background-color: #1BC8F3;
|
||||
text-shadow:
|
||||
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;
|
||||
/* background: linear-gradient(90deg,#1BC8F3,#2ca8c7) */
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: #000;
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
.redio-switche .btn-check:checked+.btn {
|
||||
background-color: #1BC8F3;
|
||||
background-color: #000;
|
||||
border: 0px;
|
||||
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 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* ====滑动条================== */
|
||||
.volume-slider-box .volume-slider {
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
width: 30px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 300px;
|
||||
height: 200px;
|
||||
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 {
|
||||
border: none;
|
||||
background: #000;
|
||||
width: 18px;
|
||||
width: 12px;
|
||||
border-color: #343440;
|
||||
border-radius: 10px;
|
||||
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 {
|
||||
border: none;
|
||||
background: #343440;
|
||||
width: 18px;
|
||||
width: 12px;
|
||||
border-color: #343440;
|
||||
border-radius: 10px;
|
||||
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 {
|
||||
border: none;
|
||||
background: #343440;
|
||||
width: 18px;
|
||||
width: 12px;
|
||||
border-color: #343440;
|
||||
border-radius: 10px;
|
||||
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 {
|
||||
left: 16px;
|
||||
left: 12px;
|
||||
bottom: 3px;
|
||||
position: absolute;
|
||||
background: linear-gradient(dodgerblue, #1BC8F3);
|
||||
pointer-events: none;
|
||||
width: 13px;
|
||||
width: 7px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.volume-slider-box .range-slider-thumb {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 45px;
|
||||
height: 59px;
|
||||
left: 2px;
|
||||
width: 35px;
|
||||
height: 34px;
|
||||
line-height: 30px;
|
||||
color: #777;
|
||||
font-size: 50%;
|
||||
pointer-events: none;
|
||||
background-image: url(../images/button.png);
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
border: none;
|
||||
background: #000;
|
||||
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
|
||||
color: #555;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
color: rgb(119, 118, 118);
|
||||
border-radius: 5px;
|
||||
font-size: 85%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
/* === 标尺 ============ */
|
||||
|
||||
.volume-ruler {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 250px;
|
||||
height: 165px;
|
||||
margin-top: 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;
|
||||
border-top: 1px solid #555;
|
||||
height: 10%;
|
||||
width: 14px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 80%;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.volume-ruler .cm:after {
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: -5px;
|
||||
font: 11px/1 sans-serif;
|
||||
top: 80%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: absolute;
|
||||
right: -25px;
|
||||
top: -7px;
|
||||
font: 11px/1 sans-serif;
|
||||
right: -18px;
|
||||
top: -6px;
|
||||
font: 9px/1 sans-serif;
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue