754 lines
15 KiB
CSS
754 lines
15 KiB
CSS
body,
|
||
html {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
background-color: #1B1D1E;
|
||
color: #fff;
|
||
}
|
||
|
||
.content-warp {
|
||
background-color: #1E1F21 !important;
|
||
}
|
||
|
||
.content-container {
|
||
max-width: 980px;
|
||
}
|
||
|
||
.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;
|
||
display: block;
|
||
}
|
||
|
||
.nav a:visited，a:active {
|
||
color: #fff;
|
||
}
|
||
|
||
.nav .active a {
|
||
color: #1BC8F3;
|
||
}
|
||
|
||
.password-form {
|
||
width: 800px;
|
||
}
|
||
|
||
.select{
|
||
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;
|
||
color: #888888;
|
||
outline:none;
|
||
}
|
||
|
||
.select: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;
|
||
color: #888888;
|
||
}
|
||
|
||
.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;
|
||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
|
||
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);
|
||
}
|
||
|
||
.btn-close:checked+.state-btn {
|
||
color: red;
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
|
||
|
||
.roundSlider .rs-handle {
|
||
background-color: transparent;
|
||
border: 8px solid transparent;
|
||
border-right-color: #1BC8F3;
|
||
margin: -6px 0px 0px 14px !important;
|
||
border-width: 6px 50px 6px 4px;
|
||
}
|
||
|
||
.roundSlider .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);
|
||
}
|
||
|
||
.roundSlider .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);
|
||
|
||
}
|
||
|
||
|
||
.roundSlider .rs-tooltip div {
|
||
text-align: center;
|
||
background: orange;
|
||
color: white;
|
||
border-radius: 4px;
|
||
padding: 1px 5px 2px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.roundSlider .rs-range-color {
|
||
background-color: #1BC8F3;
|
||
/* background: linear-gradient(90deg,#1BC8F3,#2ca8c7) */
|
||
}
|
||
|
||
.roundSlider .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;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.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: #000;
|
||
border: 0px;
|
||
color: #1BC8F3;
|
||
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: 30px;
|
||
position: relative;
|
||
text-align: center;
|
||
height: 200px;
|
||
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: 12px;
|
||
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: 12px;
|
||
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: 12px;
|
||
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: 12px;
|
||
bottom: 3px;
|
||
position: absolute;
|
||
background: linear-gradient(dodgerblue, #1BC8F3);
|
||
pointer-events: none;
|
||
width: 7px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.volume-slider-box .range-slider-thumb {
|
||
position: absolute;
|
||
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 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: 12px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
|
||
.input-reduce {
|
||
border: none;
|
||
padding: 0px 8px;
|
||
line-height: 1;
|
||
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);
|
||
}
|
||
|
||
.input-add {
|
||
border: none;
|
||
padding: 0px 8px;
|
||
line-height: 1;
|
||
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);
|
||
}
|
||
|
||
/* === 标尺 ============ */
|
||
|
||
.volume-ruler {
|
||
position: relative;
|
||
width: 14px;
|
||
height: 165px;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.volume-ruler .cm {
|
||
position: absolute;
|
||
border-top: 1px solid #555;
|
||
height: 10%;
|
||
width: 10px;
|
||
}
|
||
|
||
.volume-ruler .mm {
|
||
position: absolute;
|
||
border-top: 1px solid #555;
|
||
height: 80%;
|
||
width: 14px;
|
||
top: 80%;
|
||
}
|
||
|
||
.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: -18px;
|
||
top: -6px;
|
||
font: 9px/1 sans-serif;
|
||
color: #555;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========== */
|
||
.pinpu-box {
|
||
width: 10px;
|
||
height: 100%;
|
||
padding-top: 5px;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.equalizer {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 10rem;
|
||
margin-top: 4rem;
|
||
}
|
||
|
||
.equalizer-bar {
|
||
width: 14px;
|
||
margin: 0 3px;
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
.equalizer-bar span {
|
||
display: block;
|
||
height: 4px;
|
||
border-radius: 1px;
|
||
width: 100%;
|
||
margin: 2px 0;
|
||
background-color: #FFF;
|
||
transition: .2s ease all;
|
||
/* opacity: 1; */
|
||
}
|
||
|
||
.equalizer-bar:nth-child(1) span {
|
||
background: #a7dce9;
|
||
} |