Fix settings

luckydiamond/src/assets/css/PagesStyles/settings.css

@@ -1,31 +1,78 @@
 .settings {
-    display: flex;
+    /* display: flex; */
     grid-area: profile;
-    height: 95%;
+    /* height: 86vh; */
+    /* width: 86vh; */
+
     border-radius: 50px;
     background: #17181C;
     box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
     margin: 10px 39px 18px 13px;
 }
+
 #volume-control {
-    display: flex;
-    align-items: center;
+  margin: 5vh;
+    /* display: flex; */
+    /* align-items: center; */
+    /* top: 0; 
+    left: 0; */
+    
+    /* z-index: 1000; */
+  }
+  .volume-section{
+  margin: 5vh;
+  }
+  .volume-text{
+
+    text-decoration: none;
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+    font-size: 25px;
+  }
+  .volume-text--grey{
+
+    text-decoration: none;
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+    font-size: 25px;
+    color: #3D3F48;
   }
 
-  #volume-up, #volume-down {
-    width: 30px;
-    height: 30px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    background-color: #fff;
-    cursor: pointer;
-  }
+/* Стилизация трека ползунка */
+#volumeControl {
+  -webkit-appearance: none; /* Убирает стандартный стиль для Webkit браузеров */
+  width: 40vh;
 
-  #volume-indicator {
-    width: 100px;
-    height: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    background-color: #ccc;
-  }
+  height: 8px; /* Можно изменить для изменения высоты трека */
+  background: #EF4444; /* Цвет фона трека */
+  outline: none; /* Убирает контур при выборе */
+  opacity: 1; /* Можно изменить для изменения прозрачности трека */
+  -webkit-transition: .2s; /* Плавное изменение для Webkit браузеров */
+  transition: opacity .2s;
+  border-radius: 10px;
+}
 
+/* Стилизация тумблера ползунка */
+#volumeControl::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Убирает стандартный стиль для Webkit браузеров */
+  appearance: none;
+  width: 15px; /* Ширина тумблера */
+  height: 15px; /* Высота тумблера */
+  background: #fff; /* Цвет фона тумблера */
+  cursor: pointer; /* Курсор в виде указателя */
+  border-radius: 60%; /* Круглый тумблер */
+}
+
+#volumeControl::-moz-range-thumb {
+  width: 25px; /* Ширина тумблера */
+  height: 25px; /* Высота тумблера */
+  background: #fff; /* Цвет фона тумблера */
+  cursor: pointer; /* Курсор в виде указателя */
+  border-radius: 50%; /* Круглый тумблер */
+  border: 2px solid red; /* Граница тумблера */
+}
+
+#volumeControl::-moz-range-track {
+  background: red; /* Цвет фона трека для Firefox */
+  height: 8px; /* Высота трека для Firefox */
+}

luckydiamond/src/pages/SettingsPage.vue

@@ -12,16 +12,20 @@
     <button id="volume-down" @click="volumeDown">-</button>
   </div>
      -->
+      <div class="volume-section">
+        <h1 class="volume-text">Звук</h1>
+        <input
+          id="volumeControl"
+          type="range"
+          min="0"
+          max="10"
+          v-model="volume"
+          @input="handleVolumeChange"
+          ref="volumeControl"
+        />
+        <h1 class="volume-text--grey">Данная страница находится в разработке, и будет полностью переделанна</h1>
 
-      <input
-        id="volumeControl"
-        type="range"
-        min="0"
-        max="10"
-        v-model="volume"
-        @input="handleVolumeChange"
-        ref="volumeControl"
-      />
+      </div>
     </section>
   </div>
 </template>
@@ -30,7 +34,10 @@
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
-import {SaveToLocalStorage,GetFromLocalStorage } from "@/assets/js/storage/LocalStorage";
+import {
+  SaveToLocalStorage,
+  GetFromLocalStorage,
+} from "@/assets/js/storage/LocalStorage";
 
 import "@/assets/css/PagesStyles/settings.css";
 export default {
@@ -47,7 +54,7 @@ export default {
   methods: {
     handleVolumeChange() {
       const volume = this.$refs.volumeControl.value;
-      SaveToLocalStorage("volume",volume);
+      SaveToLocalStorage("volume", volume);
 
       // Транслировать изменение громкости глобально
     },
@@ -57,6 +64,6 @@ export default {
     if (storedVolume !== null) {
       this.volume = storedVolume;
     }
-  }
+  },
 };
 </script>