FIX: time timer style

launcher/public/output.css

@@ -4508,6 +4508,10 @@ video {
   padding-top: 2rem;
 }
 
+.pr-3{
+  padding-right: 0.75rem;
+}
+
 .text-left{
   text-align: left;
 }

launcher/src/components/UI/setting-page/components/IdleTimerTime.vue

@@ -1,8 +1,11 @@
 <template>
-  <div>
-    <label>
-      <input type="text" :value="footerStore.idleTimerTime" @change="onChange($event)" />
-    </label>
+  <div class="TimerTime-parent w-full h-full justify-center items-center flex">
+    <input
+      type="number"
+      :value="footerStore.idleTimerTime"
+      class="lang-btn-parent w-full h-full bg-[#33393E] rounded-md flex justify-center items-center cursor-pointer border border-[#33393E] uppercase pl-3 pr-3 text-gray-200 text-base"
+      @change="onChange($event)"
+    />
   </div>
 </template>
 
@@ -55,72 +58,21 @@ onMounted(() => {
   checkSettings();
 });
 </script>
-<style scoped>
-.toggle-container {
-  width: 50%;
-  height: 93%;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.switch {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.switch input {
-  display: none;
-}
-
-.slider {
-  width: 80%;
-  height: 80%;
-  margin-top: 2px;
-  margin-right: 3px;
-  margin: 2px 3px;
-  cursor: pointer;
-  background-color: rgb(215, 215, 215);
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
 
-.slider:before {
-  position: absolute;
-  content: "";
-  width: 18px;
-  height: 18px;
-  border: 2px solid #0686bd;
-  left: 7%;
-  bottom: 8.4%;
-  background-color: #3183da;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-input:checked + .slider {
-  background-color: #e9e9e9;
-}
-input:checked + .slider:before {
-  width: 18px;
-  height: 18px;
-  border: 1px solid #157ca8;
-  background-color: #488f63;
-  border: 1px solid #09794c;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(14px);
-  -ms-transform: translateX(14px);
-  transform: translateX(15px);
+<style scoped>
+input[type="number"] {
+  text-align: center;
 }
 
-.slider.round {
-  border-radius: 34px;
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
-.slider.round:before {
-  border-radius: 50%;
+.TimerTime-parent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>