Update scss & css

Forgot the first updates

css/style.css

@@ -3,7 +3,7 @@
   font-family: "CaskaydiaCove Nerd Font";
 }
 
-.bar {
+.bar, tooltip {
   background-color: #282a36;
   border-radius: 16px;
 }
@@ -154,6 +154,111 @@
   font-size: 16px;
 }
 
+@keyframes connectanim {
+  from {
+    background-image: radial-gradient(circle farthest-side at center, #1793D1 0%, transparent 0%, transparent 100%);
+  }
+  to {
+    background-image: radial-gradient(circle farthest-side at center, #1793D1 0%, #1793D1 100%, transparent 100%);
+  }
+}
+@keyframes disconnectanim {
+  from {
+    background-image: radial-gradient(circle farthest-side at center, transparent 0%, #1793D1 0%, #1793D1 100%);
+  }
+  to {
+    background-image: radial-gradient(circle farthest-side at center, transparent 0%, transparent 100%, #1793D1 100%);
+  }
+}
+@keyframes scanonanim {
+  from {
+    color: #f1fa8c;
+  }
+  to {
+    color: #50fa7b;
+  }
+}
+@keyframes scanoffanim {
+  from {
+    color: #50fa7b;
+  }
+  to {
+    color: #f1fa8c;
+  }
+}
+.bt-bg {
+  background-color: #282a36;
+  border-radius: 16px;
+}
+
+.bt-header-box {
+  margin-top: 4px;
+  margin-right: 8px;
+  margin-left: 8px;
+  font-size: 24px;
+  color: #1793D1;
+}
+
+.bt-body-box {
+  margin-right: 8px;
+  margin-left: 8px;
+}
+
+.bt-button {
+  border-radius: 16px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+  margin-top: 4px;
+  font-size: 16px;
+}
+.bt-button.active {
+  animation-name: connectanim;
+  animation-duration: 50ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+.bt-button.inactive {
+  animation-name: disconnectanim;
+  animation-duration: 50ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+.bt-button.failed {
+  color: #ff5555;
+}
+
+.bt-close {
+  color: #ff5555;
+  background-color: #44475a;
+  border-radius: 16px;
+  padding: 0px 8px 0px 7px;
+  margin: 0px 0px 0px 8px;
+}
+
+.bt-scan {
+  color: #f1fa8c;
+  background-color: #44475a;
+  border-radius: 16px;
+  padding: 2px 11px 0px 7px;
+  margin: 0px 0px 0px 10px;
+  font-size: 18px;
+}
+.bt-scan.active {
+  animation-name: scanonanim;
+  animation-duration: 50ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+.bt-scan.inactive {
+  animation-name: scanoffanim;
+  animation-duration: 50ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
 trough {
   border-radius: 3px;
   border-width: 1px;

css/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAkBA;EACI;EACA;;;AAQJ;EACI,kBA5BC;EA6BD;;;AAGJ;EACI;EACA;;;AAGJ;EACI,WAvBO;;;AA0BX;EACI;EAEA;EAEA,OA3CO;;;AA6CX;EACI;EAGA,OAjDO;;;AAmDX;EACI;EAGA,OAvDO;;;AA0DX;EACI;EAGA,OAxDE;;;AA8DN;EACI;;;AAGJ;EACI;EACA,OAvEK;EAwEL;;;AAGJ;EACI,WAnEO;EAoEP,OAtEK;EAuEL;;;AAEJ;EACI;EACA,OA3EK;EA4EL;;;AAEJ;EACI;EACA,OAhFK;EAiFL;;;AAEJ;EACI;EACA,OArFK;EAsFL;;;AAGJ;EACI,OA/FK;EAgGL,kBAtGO;EAuGP,WA1FO;;;AA4FX;EACI,OApGK;EAqGL;EACA,WA/FO;;;AAkGX;EACI,OA5GK;EA6GL,kBAjHO;;;AAmHX;EACI,OAhHK;EAiHL;EACA,WAzGO;;;AA4GX;EACI,OAlHK;EAmHL,kBA3HO;;;AA6HX;EACI,OAtHK;EAuHL;EACA,WAnHO;;;AAsHX;EACI,OAlIG;EAmIH,kBArIO;;;AAuIX;EACI,OAtIG;EAuIH;EACA,WA7HO;;;AAgIX;EACI,OA3II;EA4IJ,kBA/IO;EAgJP,WAnIO;;;AAqIX;EACI,OAhJI;EAiJJ;EACA,WAxIO;;;AA2IX;EACI,OAzJO;EA0JP,WA7IO;;;AA+IX;EACI,OA5JO;EA6JP,WAjJO;;;AAmJX;EACI,OA/JG;EAgKH,WArJO;;;AAuJX;EACI,OA7JK;EA8JL,WAzJO;;;AA2JX;EACI,OAtKI;EAuKJ,WA7JO;;;AAiKX;EACI;EACA;EACH;EACG,kBAlLO;EAmLP;EACH;EACA;;;AAGD;EAEC;EACG;EACH;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACG;EACH;EACG;EACH,kBApMQ","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAkBA;EACI;EACA;;;AASJ;EACI,kBA7BC;EA8BD;;;AAGJ;EACI;EACA;;;AAGJ;EACI,WAxBO;;;AA2BX;EACI;EAEA;EAEA,OA5CO;;;AA8CX;EACI;EAGA,OAlDO;;;AAoDX;EACI;EAGA,OAxDO;;;AA2DX;EACI;EAGA,OAzDE;;;AA+DN;EACI;;;AAGJ;EACI;EACA,OAxEK;EAyEL;;;AAGJ;EACI,WApEO;EAqEP,OAvEK;EAwEL;;;AAEJ;EACI;EACA,OA5EK;EA6EL;;;AAEJ;EACI;EACA,OAjFK;EAkFL;;;AAEJ;EACI;EACA,OAtFK;EAuFL;;;AAGJ;EACI,OAhGK;EAiGL,kBAvGO;EAwGP,WA3FO;;;AA6FX;EACI,OArGK;EAsGL;EACA,WAhGO;;;AAmGX;EACI,OA7GK;EA8GL,kBAlHO;;;AAoHX;EACI,OAjHK;EAkHL;EACA,WA1GO;;;AA6GX;EACI,OAnHK;EAoHL,kBA5HO;;;AA8HX;EACI,OAvHK;EAwHL;EACA,WApHO;;;AAuHX;EACI,OAnIG;EAoIH,kBAtIO;;;AAwIX;EACI,OAvIG;EAwIH;EACA,WA9HO;;;AAiIX;EACI,OA5II;EA6IJ,kBAhJO;EAiJP,WApIO;;;AAsIX;EACI,OAjJI;EAkJJ;EACA,WAzIO;;;AA4IX;EACI,OA1JO;EA2JP,WA9IO;;;AAgJX;EACI,OA7JO;EA8JP,WAlJO;;;AAoJX;EACI,OAhKG;EAiKH,WAtJO;;;AAwJX;EACI,OA9JK;EA+JL,WA1JO;;;AA4JX;EACI,OAvKI;EAwKJ,WA9JO;;;AAkKX;EACI;IACI;;EAEJ;IACI;;;AAGR;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;IACI,OA1LC;;EA4LL;IACI,OAlMA;;;AAqMR;EACI;IACI,OAvMA;;EAyMJ;IACI,OArMC;;;AAyMT;EACI,kBApNC;EAqND;;;AAEJ;EACI;EACA;EACA;EACA;EACA,OA/MK;;;AAiNT;EACI;EACA;;;AAEJ;EAgBI;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;;AAxBA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI,OAvOF;;;AAqPN;EACI,OAtPE;EAuPF,kBA9PO;EA+PP;EACH;EACA;;;AAED;EAaI,OAxQK;EAyQL,kBAjRO;EAkRP;EACA;EACH;EACG;;AAjBA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;;AAWR;EACI;EACA;EACH;EACG,kBA7RO;EA8RP;EACH;EACA;;;AAGD;EAEC;EACG;EACH;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACG;EACH;EACG;EACH,kBA/SQ","file":"style.css"}

css/style.scss

@@ -27,7 +27,8 @@ $textsize: 16px;
     //background-color: #00cc00
 }
 
-.bar {
+
+.bar,tooltip{
     background-color: $bg;
     border-radius: 16px;
 }
@@ -175,6 +176,112 @@ $textsize: 16px;
     font-size: $textsize;
 }
 
+// Bluetooth Widget
+@keyframes connectanim {
+    from {
+        background-image: radial-gradient(circle farthest-side at center, $btblue 0%, transparent 0%, transparent 100%)
+    }
+    to {
+        background-image: radial-gradient(circle farthest-side at center, $btblue 0%, $btblue 100%, transparent 100%)
+    }
+}
+@keyframes disconnectanim {
+    from {
+        background-image: radial-gradient(circle farthest-side at center, transparent 0%, $btblue 0%, $btblue 100%)
+    }
+    to {
+        background-image: radial-gradient(circle farthest-side at center, transparent 0%, transparent 100%, $btblue 100%)
+    }
+}
+
+@keyframes scanonanim {
+    from {
+        color: $yellow;
+    }
+    to {
+        color: $green;
+    }
+}
+@keyframes scanoffanim {
+    from {
+        color: $green;
+    }
+    to {
+        color: $yellow;
+    }
+}
+
+.bt-bg {
+    background-color: $bg;
+    border-radius: 16px;
+}
+.bt-header-box {
+    margin-top: 4px;
+    margin-right: 8px;
+    margin-left: 8px;
+    font-size: 24px;
+    color: $btblue;
+} 
+.bt-body-box {
+    margin-right: 8px;
+    margin-left: 8px;
+}
+.bt-button {
+    &.active {
+        animation-name: connectanim;
+        animation-duration: 50ms;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+    }
+    &.inactive {
+        animation-name: disconnectanim;
+        animation-duration: 50ms;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+    }
+    &.failed {
+        color: $red;
+    }
+    border-radius: 16px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+
+    margin-bottom: 4px;
+    margin-top: 4px;
+
+    font-size: 16px;
+    // color: $green;
+}
+.bt-close {
+    color: $red;
+    background-color: $inactive;
+    border-radius: 16px;
+	padding: 0px 8px 0px 7px;
+	margin: 0px 0px 0px 8px;
+}
+.bt-scan {
+    &.active {
+        animation-name: scanonanim;
+        animation-duration: 50ms;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+    }
+    &.inactive {
+        animation-name: scanoffanim;
+        animation-duration: 50ms;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+    }
+    color: $yellow;
+    background-color: $inactive;
+    border-radius: 16px;
+    padding: 2px 11px 0px 7px;
+	margin: 0px 0px 0px 10px;
+    font-size: 18px;
+}
+
 // Sliders
 trough {
     border-radius: 3px;