From 2c80712ff05318bffa60b4582607d4ff36b58cca Mon Sep 17 00:00:00 2001
From: Seany <17074267@qq.com>
Date: Thu, 2 Nov 2023 01:05:29 +0800
Subject: [PATCH] 1

---
 css/app.css | 219 ++++++++++++++++++++--------------------------------
 1 file changed, 85 insertions(+), 134 deletions(-)

diff --git a/css/app.css b/css/app.css
index aee3453..c5e39ad 100644
--- a/css/app.css
+++ b/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 {
@@ -352,7 +388,7 @@ body {
   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);
+  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
 
 }
 
@@ -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; 
-}
\ No newline at end of file