From 06ae4419e4a023e5f7b30759cd47c1402ce24cd6 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:24:19 +0100
Subject: [PATCH] FIX: idle timer toggl style

---
 launcher/public/output.css                    | 142 ++++++++++++++++++
 .../UI/setting-page/components/IdleTimer.vue  |  53 ++-----
 2 files changed, 158 insertions(+), 37 deletions(-)

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 88d7fde67..f184f6dfd 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -887,6 +887,10 @@ video {
   left: 40%;
 }
 
+.left-\[50\%\]{
+  left: 50%;
+}
+
 .left-\[920px\]{
   left: 920px;
 }
@@ -983,6 +987,10 @@ video {
   top: 1px;
 }
 
+.top-\[25\%\]{
+  top: 25%;
+}
+
 .top-\[33\%\]{
   top: 33%;
 }
@@ -991,6 +999,10 @@ video {
   top: 42%;
 }
 
+.top-\[50\%\]{
+  top: 50%;
+}
+
 .top-\[56px\]{
   top: 56px;
 }
@@ -1035,6 +1047,10 @@ video {
   grid-column: span 10 / span 10;
 }
 
+.col-span-12{
+  grid-column: span 12 / span 12;
+}
+
 .col-span-2{
   grid-column: span 2 / span 2;
 }
@@ -1616,6 +1632,14 @@ video {
   height: 33.333333%;
 }
 
+.h-1\/4{
+  height: 25%;
+}
+
+.h-1\/5{
+  height: 20%;
+}
+
 .h-1\/6{
   height: 16.666667%;
 }
@@ -1844,6 +1868,10 @@ video {
   height: 80px;
 }
 
+.h-\[90\%\]{
+  height: 90%;
+}
+
 .h-\[90px\]{
   height: 90px;
 }
@@ -2086,6 +2114,10 @@ video {
   width: 25%;
 }
 
+.w-1\/5{
+  width: 20%;
+}
+
 .w-1\/6{
   width: 16.666667%;
 }
@@ -2098,6 +2130,10 @@ video {
   width: 83.333333%;
 }
 
+.w-11{
+  width: 2.75rem;
+}
+
 .w-11\/12{
   width: 91.666667%;
 }
@@ -2126,6 +2162,14 @@ video {
   width: 50%;
 }
 
+.w-2\/5{
+  width: 40%;
+}
+
+.w-2\/6{
+  width: 33.333333%;
+}
+
 .w-20{
   width: 5rem;
 }
@@ -2218,6 +2262,10 @@ video {
   width: 2rem;
 }
 
+.w-8\/12{
+  width: 66.666667%;
+}
+
 .w-9{
   width: 2.25rem;
 }
@@ -2226,6 +2274,10 @@ video {
   width: 75%;
 }
 
+.w-\[10\%\]{
+  width: 10%;
+}
+
 .w-\[100px\]{
   width: 100px;
 }
@@ -2278,6 +2330,10 @@ video {
   width: 200px;
 }
 
+.w-\[24\%\]{
+  width: 24%;
+}
+
 .w-\[27px\]{
   width: 27px;
 }
@@ -2346,6 +2402,10 @@ video {
   width: 8rem;
 }
 
+.w-\[90\%\]{
+  width: 90%;
+}
+
 .w-fit{
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -2473,6 +2533,18 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-90{
+  --tw-rotate: 90deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-\[270deg\]{
+  --tw-rotate: 270deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-100{
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -2866,6 +2938,12 @@ video {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -4244,6 +4322,14 @@ video {
   padding: 2rem;
 }
 
+.p-\[\.10rem\]{
+  padding: .10rem;
+}
+
+.p-\[0\.10rem\]{
+  padding: 0.10rem;
+}
+
 .p-\[1px\]{
   padding: 1px;
 }
@@ -4460,6 +4546,10 @@ video {
   line-height: 2.25rem;
 }
 
+.text-\[100\%\]{
+  font-size: 100%;
+}
+
 .text-\[10px\]{
   font-size: 10px;
 }
@@ -4492,10 +4582,42 @@ video {
   font-size: 26px;
 }
 
+.text-\[30\%\]{
+  font-size: 30%;
+}
+
+.text-\[40\%\]{
+  font-size: 40%;
+}
+
+.text-\[45\%\]{
+  font-size: 45%;
+}
+
+.text-\[50\%\]{
+  font-size: 50%;
+}
+
+.text-\[55\%\]{
+  font-size: 55%;
+}
+
+.text-\[60\%\]{
+  font-size: 60%;
+}
+
+.text-\[7px\]{
+  font-size: 7px;
+}
+
 .text-\[8px\]{
   font-size: 8px;
 }
 
+.text-\[90\%\]{
+  font-size: 90%;
+}
+
 .text-\[9px\]{
   font-size: 9px;
 }
@@ -4558,6 +4680,10 @@ video {
   font-weight: 600;
 }
 
+.font-thin{
+  font-weight: 100;
+}
+
 .uppercase{
   text-transform: uppercase;
 }
@@ -4654,6 +4780,11 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-300{
+  --tw-text-opacity: 1;
+  color: rgb(147 197 253 / var(--tw-text-opacity));
+}
+
 .text-blue-400{
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));
@@ -4744,6 +4875,11 @@ video {
   color: rgb(249 115 22 / var(--tw-text-opacity));
 }
 
+.text-orange-600{
+  --tw-text-opacity: 1;
+  color: rgb(234 88 12 / var(--tw-text-opacity));
+}
+
 .text-red-400{
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -5092,6 +5228,12 @@ video {
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.sepia{
+  --tw-sepia: sepia(100%);
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter{
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
diff --git a/launcher/src/components/UI/setting-page/components/IdleTimer.vue b/launcher/src/components/UI/setting-page/components/IdleTimer.vue
index 440a4c84e..c9f2e19a3 100644
--- a/launcher/src/components/UI/setting-page/components/IdleTimer.vue
+++ b/launcher/src/components/UI/setting-page/components/IdleTimer.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="toggle-container">
-    <label class="switch">
+    <label class="switch relative">
       <input type="checkbox" :checked="footerStore.idleTimer" @click="toggleIdleTimer" />
-      <div class="slider round"></div>
+      <div class="slider round w-full h-full cursor-pointer bg-gray-400"></div>
     </label>
   </div>
 </template>
@@ -60,17 +60,17 @@ onMounted(() => {
 </script>
 <style scoped>
 .toggle-container {
-  width: 50%;
+  width: 100%;
   height: 93%;
   position: relative;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
 }
+
 .switch {
-  width: 100%;
-  height: 100%;
-  position: relative;
+  width: 50px;
+  height: 24px;
 }
 
 .switch input {
@@ -78,52 +78,31 @@ onMounted(() => {
 }
 
 .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;
+  border-radius: 34px;
   transition: 0.4s;
+  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.3);
 }
 
 .slider:before {
   position: absolute;
   content: "";
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
   border: 2px solid #0686bd;
-  left: 7%;
-  bottom: 8.4%;
+  left: 3px;
+  bottom: 2px;
   background-color: #3183da;
-  -webkit-transition: 0.4s;
   transition: 0.4s;
+  border-radius: 50%;
 }
 
 input:checked + .slider {
   background-color: #e9e9e9;
 }
+
 input:checked + .slider:before {
-  width: 18px;
-  height: 18px;
-  border: 1px solid #157ca8;
+  transform: translateX(24px);
   background-color: #488f63;
   border: 1px solid #09794c;
 }
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(14px);
-  -ms-transform: translateX(14px);
-  transform: translateX(15px);
-}
-
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
 </style>