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

.nav a:visited {
  color: #fff;
}

.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: transparent;
  border: 8px solid transparent;
  border-right-color: black;
  margin: -6px 0px 0px 14px !important;
  border-width: 6px 104px 6px 4px;
}

#handle1 .rs-handle:before {
  display: block;
  content: " ";
  position: absolute;
  height: 22px;
  width: 22px;
  background: black;
  right: -11px;
  bottom: -11px;
  border-radius: 100px;
}

#handle1 .rs-tooltip {
  top: 75%;
  font-size: 11px;
}

#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: #DB5959;
}

#handle1 .rs-path-color {
  background-color: #F0C5C5;
}



.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);
}



.volume-ruler {
  position: relative;
  width: 14px;
  height: 300px;
}

.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(1):after {
  content: "0";
}

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

.volume-ruler .cm:nth-of-type(2):after {
  content: "1";
}

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

.volume-ruler .cm:nth-of-type(3):after {
  content: "2";
}

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

.volume-ruler .cm:nth-of-type(4):after {
  content: "3";
}

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

.volume-ruler .cm:nth-of-type(5):after {
  content: "4";
}

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

.volume-ruler .cm:nth-of-type(6):after {
  content: "5";
}

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

.volume-ruler .cm:nth-of-type(7):after {
  content: "6";
}