AudioHTML/css/app.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;
}


input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
 
}
 
input::-webkit-outer-spin-button{
  -webkit-appearance: none !important;
 
}
 
input[type="number"]{
  -moz-appearance: textfield;
 
}

.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-bar{
  background-color: #282828;
}

.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;
  padding: 10px 25px;
  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;
}

input:disabled {
  background-color: #333 !important;
  color: #000 !important;
}

.form-control:disabled {
  background-color: #000;
}

.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.left-ruler {
  right: 0;
}

.volume-ruler.left-ruler .mm {
  position: absolute;
  border-top: 1px solid #555;
  height: 80%;
  width: 8px;
  top: 80%;
  right: 0;
} 

.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.home .cm:nth-of-type(1) {
  top: 0%;
}


.volume-ruler.home .cm:nth-of-type(2) {
  top: 7.14285%;
}


.volume-ruler.home .cm:nth-of-type(3) {
  top: 14.28571%;
}


.volume-ruler.home .cm:nth-of-type(4) {
  top: 21.428571%;
}


.volume-ruler.home .cm:nth-of-type(5) {
  top: 28.571428%;
}

.volume-ruler.home .cm:nth-of-type(6) {
  top: 35.7142857%;
}

.volume-ruler.home .cm:nth-of-type(7) {
  top: 42.8571428%;
}

.volume-ruler.home .cm:nth-of-type(8) {
  top: 50%;
}

.volume-ruler.home .cm:nth-of-type(9) {
  top: 57.14285714%;
}

.volume-ruler.home .cm:nth-of-type(10) {
  top: 64.2857142%;
}

.volume-ruler.home .cm:nth-of-type(11) {
  top: 71.4285714%;
}

.volume-ruler.home .cm:nth-of-type(12) {
  top: 78.57142857%;
}

.volume-ruler.home .cm:nth-of-type(13) {
  top: 85.71428571%;
}

.volume-ruler.home .cm:nth-of-type(14) {
  top: 92.85714285%;
}

.volume-ruler.home .cm:nth-of-type(15) {
  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: #333;
}