mirror of
https://github.com/scorpion-26/gBar.git
synced 2024-11-24 12:12:09 +00:00
Update scss & css
Forgot the first updates
This commit is contained in:
scorpion-26
parent
ed32d70916
commit
ab36f51f6a
3 changed files with 215 additions and 3 deletions
107
css/style.css
107
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;
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
109
css/style.scss
109
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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue