734 lines
14 KiB
CSS
734 lines
14 KiB
CSS
body,
|
||
html {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
background-color: #1B1D1E;
|
||
color: #fff;
|
||
}
|
||
|
||
.content-warp {
|
||
background-color: #1E1F21 !important;
|
||
}
|
||
|
||
.dotblock {
|
||
background-image: url(../images/dotline.png);
|
||
max-height: 80px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
background-size: cover;
|
||
}
|
||
|
||
.login {
|
||
width: 600px;
|
||
background-color: #1E1E1E;
|
||
}
|
||
|
||
.login-title {
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.login-form {
|
||
width: 400px;
|
||
}
|
||
|
||
.login input {
|
||
/* background-color: #000; */
|
||
color: #fff;
|
||
}
|
||
|
||
.login input::placeholder {
|
||
color: #888888;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.login input {
|
||
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: #fff;
|
||
}
|
||
|
||
.login button {
|
||
border: none;
|
||
background: #191919;
|
||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||
color: #fff;
|
||
}
|
||
|
||
.nav {
|
||
border-top: 2px solid black;
|
||
border-bottom: 2px solid black;
|
||
background-color: #282828;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.nav>div {
|
||
border-left: 2px solid black;
|
||
padding: 10px 25px;
|
||
}
|
||
|
||
.nav>div.last {
|
||
border-right: 2px solid black;
|
||
}
|
||
|
||
.nav>div.active {
|
||
background-color: #000;
|
||
/*设置发光效果*/
|
||
box-shadow: #1BC8F2 0px 0px 14px inset;
|
||
color: #1BC8F2;
|
||
background: linear-gradient(to bottom, #000, #353535, #000);
|
||
}
|
||
|
||
|
||
.nav>div:hover {
|
||
background-color: #000;
|
||
/*设置发光效果*/
|
||
/* box-shadow: #1BC8F2 0px 0px 14px inset; */
|
||
color: #1BC8F2;
|
||
background: linear-gradient(to bottom, #000, #353535, #000);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav a {
|
||
text-decoration: none;
|
||
color: #fff;
|
||
}
|
||
|
||
.nav a:visited，a:active {
|
||
color: #fff;
|
||
}
|
||
|
||
.nav .active a {
|
||
color: #1BC8F3;
|
||
}
|
||
|
||
.password-form {
|
||
width: 800px;
|
||
}
|
||
|
||
.form input {
|
||
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: #fff;
|
||
}
|
||
|
||
.form input::placeholder {
|
||
color: #888888;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
.col-form-label {
|
||
text-align: end;
|
||
}
|
||
|
||
.form button {
|
||
border: none;
|
||
background: #191919;
|
||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
|
||
.ruleraxisy {
|
||
/* position: absolute; */
|
||
background-color: #303030;
|
||
background-size: 20px 50px;
|
||
background-image: linear-gradient(0deg, #696969 0, #696969 2%, transparent 2%), linear-gradient(90deg, #303030 50%, transparent 50%), linear-gradient(0deg, transparent 50%, #696969 50%, #696969 52%, transparent 52%), linear-gradient(90deg, #303030 70%, transparent 70%), linear-gradient(0deg, transparent 10%, #696969 10%, #696969 12%, transparent 12%, transparent 20%, #696969 20%, #696969 22%, transparent 22%, transparent 30%, #696969 30%, #696969 32%, transparent 32%, transparent 40%, #696969 40%, #696969 42%, transparent 42%, transparent 60%, #696969 60%, #696969 62%, transparent 62%, transparent 70%, #696969 70%, #696969 72%, transparent 72%, transparent 80%, #696969 80%, #696969 82%, transparent 82%, transparent 90%, #696969 90%, #696969 92%, transparent 92%);
|
||
background-repeat: repeat-y;
|
||
width: 20px;
|
||
height: 300px;
|
||
/* left: 30px; */
|
||
/* top: 50px; */
|
||
min-height: 20px;
|
||
}
|
||
|
||
.scaley {
|
||
list-style-type: none;
|
||
/* position: absolute; */
|
||
left: 0px;
|
||
top: -25px;
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 50px;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
color: #b1b4b4;
|
||
font-size: 0;
|
||
text-shadow: 0px 1px 1px #000;
|
||
-moz-user-select: none;
|
||
/*火狐*/
|
||
-webkit-user-select: none;
|
||
/*webkit浏览器*/
|
||
-ms-user-select: none;
|
||
/*IE10*/
|
||
-khtml-user-select: none;
|
||
/*早期浏览器*/
|
||
user-select: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.scaley li {
|
||
writing-mode: vertical-lr;
|
||
height: 50px;
|
||
text-align: center;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.container {
|
||
padding-top: 40px;
|
||
position: relative;
|
||
display: inline-block;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translate(-50%, -100%);
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
@media (min-height: 500px) {
|
||
.container {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.range-slider {
|
||
display: inline-block;
|
||
width: 40px;
|
||
position: relative;
|
||
text-align: center;
|
||
height: 300px;
|
||
max-height: 100%;
|
||
}
|
||
|
||
.range-slider:before {
|
||
position: absolute;
|
||
top: -2em;
|
||
left: 0.5em;
|
||
content: attr(data-slider-value) "%";
|
||
color: white;
|
||
font-size: 90%;
|
||
}
|
||
|
||
.range-slider__thumb {
|
||
position: absolute;
|
||
left: 5px;
|
||
width: 30px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background: white;
|
||
color: #777;
|
||
font-size: 50%;
|
||
box-shadow: 0 0 0 4px #3d3d4a;
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.range-slider__bar {
|
||
left: 16px;
|
||
bottom: 0;
|
||
position: absolute;
|
||
background: linear-gradient(dodgerblue, blue);
|
||
pointer-events: none;
|
||
width: 8px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.range-slider input[type=range][orient=vertical] {
|
||
position: relative;
|
||
margin: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
display: inline-block;
|
||
position: relative;
|
||
writing-mode: bt-lr;
|
||
-webkit-appearance: slider-vertical;
|
||
}
|
||
|
||
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
|
||
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
|
||
border: none;
|
||
background: #343440;
|
||
width: 8px;
|
||
border-color: #343440;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 0 2px #3d3d4a;
|
||
}
|
||
|
||
.range-slider input[type=range][orient=vertical]::-moz-range-track {
|
||
border: none;
|
||
background: #343440;
|
||
width: 8px;
|
||
border-color: #343440;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 0 2px #3d3d4a;
|
||
}
|
||
|
||
.range-slider input[type=range][orient=vertical]::-ms-track {
|
||
border: none;
|
||
background: #343440;
|
||
width: 8px;
|
||
border-color: #343440;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 0 2px #3d3d4a;
|
||
color: transparent;
|
||
height: 100%;
|
||
}
|
||
|
||
.range-slider input[type=range][orient=vertical]::-ms-fill-lower,
|
||
.range-slider input[type=range][orient=vertical]::-ms-fill-upper,
|
||
.range-slider input[type=range][orient=vertical]::-ms-tooltip {
|
||
display: none;
|
||
}
|
||
|
||
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.range-slider input[type=range][orient=vertical]::-ms-thumb {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.theme1 {
|
||
background: linear-gradient(pink, deeppink);
|
||
}
|
||
|
||
.theme2 {
|
||
background: linear-gradient(tomato, red);
|
||
}
|
||
|
||
.theme3 {
|
||
background: linear-gradient(yellow, orange);
|
||
}
|
||
|
||
#handle1 .rs-handle {
|
||
background-color: #000000;
|
||
}
|
||
|
||
#handle1 .rs-handle:before {
|
||
display: block;
|
||
content: " ";
|
||
position: absolute;
|
||
height: 94px;
|
||
width: 94px;
|
||
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 {
|
||
top: 57px;
|
||
font-size: 11px;
|
||
height: 40px;
|
||
width: 40px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
border-radius: 25px;
|
||
background: #000;
|
||
color: white;
|
||
display: inline-block;
|
||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||
|
||
}
|
||
|
||
|
||
#handle1 .rs-tooltip div {
|
||
text-align: center;
|
||
background: orange;
|
||
color: white;
|
||
border-radius: 4px;
|
||
padding: 1px 5px 2px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
#handle1 .rs-path-color {
|
||
background-color: #000;
|
||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||
|
||
}
|
||
|
||
.rs-border {
|
||
border: 1px solid #000 !important;
|
||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
.rs-bg-color {
|
||
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%
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
.divider {
|
||
display: block;
|
||
text-align: center;
|
||
/* margin: 1rem 0; */
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
top: -12px;
|
||
position: relative;
|
||
}
|
||
|
||
.divider .divider-text {
|
||
position: relative;
|
||
display: inline-block;
|
||
font-size: 0.8rem;
|
||
/* padding: 0rem 1rem; */
|
||
}
|
||
|
||
.divider .divider-text:before {
|
||
right: 100%;
|
||
}
|
||
|
||
.divider .divider-text:before,
|
||
.divider .divider-text:after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 100vw;
|
||
border-top: 2px solid #000;
|
||
}
|
||
|
||
.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);
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.redio-switche .btn-check:checked+.btn {
|
||
background-color: #1BC8F3;
|
||
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)
|
||
}
|
||
|
||
.redio-switche .btn {
|
||
color: #fff;
|
||
}
|
||
|
||
.volume-slider-box .volume-slider {
|
||
display: inline-block;
|
||
width: 45px;
|
||
position: relative;
|
||
text-align: center;
|
||
height: 300px;
|
||
max-height: 100%;
|
||
}
|
||
|
||
.volume-slider input[type=range][orient=vertical] {
|
||
position: relative;
|
||
margin: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
display: inline-block;
|
||
position: relative;
|
||
writing-mode: bt-lr;
|
||
-webkit-appearance: slider-vertical;
|
||
}
|
||
|
||
.volume-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
|
||
.volume-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.volume-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
|
||
border: none;
|
||
background: #000;
|
||
width: 18px;
|
||
border-color: #343440;
|
||
border-radius: 10px;
|
||
box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px;
|
||
}
|
||
|
||
.volume-slider input[type=range][orient=vertical]::-moz-range-track {
|
||
border: none;
|
||
background: #343440;
|
||
width: 18px;
|
||
border-color: #343440;
|
||
border-radius: 10px;
|
||
box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px;
|
||
}
|
||
|
||
.volume-slider input[type=range][orient=vertical]::-ms-track {
|
||
border: none;
|
||
background: #343440;
|
||
width: 18px;
|
||
border-color: #343440;
|
||
border-radius: 10px;
|
||
box-shadow: rgba(255, 255, 255, 0.25) 5px 0 5px -5px;
|
||
color: transparent;
|
||
height: 100%;
|
||
}
|
||
|
||
.volume-slider input[type=range][orient=vertical]::-ms-fill-lower,
|
||
.volume-slider input[type=range][orient=vertical]::-ms-fill-upper,
|
||
.volume-slider input[type=range][orient=vertical]::-ms-tooltip {
|
||
display: none;
|
||
}
|
||
|
||
.volume-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.volume-slider input[type=range][orient=vertical]::-moz-range-thumb {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.volume-slider input[type=range][orient=vertical]::-ms-thumb {
|
||
width: 30px;
|
||
height: 30px;
|
||
opacity: 0;
|
||
}
|
||
|
||
.volume-slider-box .range-slider-bar {
|
||
left: 16px;
|
||
bottom: 3px;
|
||
position: absolute;
|
||
background: linear-gradient(dodgerblue, #1BC8F3);
|
||
pointer-events: none;
|
||
width: 13px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.volume-slider-box .range-slider-thumb {
|
||
position: absolute;
|
||
left: 0px;
|
||
width: 45px;
|
||
height: 59px;
|
||
line-height: 30px;
|
||
color: #777;
|
||
font-size: 50%;
|
||
pointer-events: none;
|
||
background-image: url(../images/button.png);
|
||
}
|
||
|
||
.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;
|
||
border-radius: 5px;
|
||
font-size: 85%;
|
||
}
|
||
|
||
.slider-value:focus {
|
||
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: #fff;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
}
|
||
|
||
|
||
|
||
.volume-ruler {
|
||
position: relative;
|
||
width: 14px;
|
||
height: 250px;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.volume-ruler .cm {
|
||
position: absolute;
|
||
border-top: 1px solid #555;
|
||
height: 10%;
|
||
width: 14px;
|
||
}
|
||
|
||
.volume-ruler .mm {
|
||
position: absolute;
|
||
border-top: 1px solid #555;
|
||
height: 80%;
|
||
width: 14px;
|
||
}
|
||
|
||
.volume-ruler .cm:after {
|
||
position: absolute;
|
||
right: -15px;
|
||
top: -5px;
|
||
font: 11px/1 sans-serif;
|
||
}
|
||
|
||
.volume-ruler .mm {
|
||
width: 5px;
|
||
}
|
||
|
||
.volume-ruler .cm:nth-of-type(1) {
|
||
top: 0%;
|
||
}
|
||
|
||
|
||
.volume-ruler .cm:nth-of-type(2) {
|
||
top: 16.6666%;
|
||
}
|
||
|
||
|
||
.volume-ruler .cm:nth-of-type(3) {
|
||
top: 33.3333%;
|
||
}
|
||
|
||
|
||
.volume-ruler .cm:nth-of-type(4) {
|
||
top: 50%;
|
||
}
|
||
|
||
|
||
.volume-ruler .cm:nth-of-type(5) {
|
||
top: 66.6666%;
|
||
}
|
||
|
||
.volume-ruler .cm:nth-of-type(6) {
|
||
top: 83.3333%;
|
||
}
|
||
|
||
.volume-ruler .cm:nth-of-type(7) {
|
||
top: 100%;
|
||
}
|
||
|
||
|
||
.volume-ruler .cm>span {
|
||
position: absolute;
|
||
right: -25px;
|
||
top: -7px;
|
||
font: 11px/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;
|
||
} |