From 9745d6ee3ac91c51bf0aae81ff3beab9f8683fc5 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Sun, 9 Jun 2024 22:47:06 -0700 Subject: [PATCH] Fixed verification styling and button transitions. --- modules/menus/power/verification.js | 12 +++++----- scss/bar/power.scss | 4 ---- scss/common/widget-button.scss | 5 ++-- scss/menus/powermenu.scss | 28 ++++++++++++++++++---- style.css | 36 +++++++++++++++++++++++------ style.css.map | 2 +- 6 files changed, 62 insertions(+), 25 deletions(-) diff --git a/modules/menus/power/verification.js b/modules/menus/power/verification.js index b66849d..f1f4214 100644 --- a/modules/menus/power/verification.js +++ b/modules/menus/power/verification.js @@ -19,7 +19,7 @@ export default () => }), Widget.Label({ class_name: "desc", - label: "Are you sure?", + label: powermenu.bind("title").as(p => `Are you sure you want to ${p.toLowerCase()}?`), }), ], }), @@ -29,16 +29,16 @@ export default () => vpack: "end", homogeneous: true, children: [ - Widget.Button({ - class_name: "verification-button bar-verification_no", - child: Widget.Label("No"), - on_clicked: () => App.toggleWindow("verification"), - }), Widget.Button({ class_name: "verification-button bar-verification_yes", child: Widget.Label("Yes"), on_clicked: powermenu.exec, }), + Widget.Button({ + class_name: "verification-button bar-verification_no", + child: Widget.Label("No"), + on_clicked: () => App.toggleWindow("verification"), + }), ], }), ], diff --git a/scss/bar/power.scss b/scss/bar/power.scss index fcc6dc4..f316212 100644 --- a/scss/bar/power.scss +++ b/scss/bar/power.scss @@ -4,7 +4,3 @@ color: $red; margin-right: 2px; } - -.bar-powermenu { - // margin: 8px; -} diff --git a/scss/common/widget-button.scss b/scss/common/widget-button.scss index 0cfe486..657db61 100644 --- a/scss/common/widget-button.scss +++ b/scss/common/widget-button.scss @@ -39,15 +39,14 @@ $radius: 11px; margin-top: $spacing; } - &:focus, &:active { image { opacity: .3; - transition: opacity .3s ease-in-out; + transition: opacity .3s ease-in-out; } label { opacity: .3; - transition: opacity .3s ease-in-out; + transition: opacity .3s ease-in-out; } } } diff --git a/scss/menus/powermenu.scss b/scss/menus/powermenu.scss index b837bed..62d6c50 100644 --- a/scss/menus/powermenu.scss +++ b/scss/menus/powermenu.scss @@ -23,11 +23,15 @@ window#verification .verification { .title { font-size: 1.6em; + color: $maroon; + margin-bottom: 10px; } .desc { - color: transparentize($primary_fg, 0.1); + color: $lavender; font-size: 1.1em; + margin-bottom: 10px; + padding: 15px 30px; } } @@ -103,6 +107,11 @@ window#powermenu .powermenu { } .widget-button { + border-color: $crust; + opacity: 1; + transition: border-color 0.2s ease-in-out; + transition: opacity .3s ease-in-out; + &:hover { &.powermenu-button-shutdown { border-color: $red; @@ -117,9 +126,20 @@ window#powermenu .powermenu { border-color: $peach; } } - - &:focus, - &:active { + &:focus { + &.powermenu-button-shutdown { + border-color: $red; + } + &.powermenu-button-logout { + border-color: $green; + } + &.powermenu-button-sleep { + border-color: $sky; + } + &.powermenu-button-reboot { + border-color: $peach; + } + } &:active { &.powermenu-button-shutdown { border-color: rgba($red, .5); } diff --git a/style.css b/style.css index 463c887..5748a66 100644 --- a/style.css +++ b/style.css @@ -263,11 +263,11 @@ spinner:checked { .widget-button label { margin-top: 12px; } -.widget-button:focus image, .widget-button:active image { +.widget-button:active image { opacity: 0.3; transition: opacity 0.3s ease-in-out; } -.widget-button:focus label, .widget-button:active label { +.widget-button:active label { opacity: 0.3; transition: opacity 0.3s ease-in-out; } @@ -443,10 +443,14 @@ window#verification .verification .text-box { } window#verification .verification .text-box .title { font-size: 1.6em; + color: #eba0ac; + margin-bottom: 10px; } window#verification .verification .text-box .desc { - color: rgba(146, 120, 182, 0.9); + color: #b4befe; font-size: 1.1em; + margin-bottom: 10px; + padding: 15px 30px; } window#verification .verification .verification-button { background: #11111b; @@ -513,6 +517,12 @@ window#powermenu .powermenu.box { padding: 22.4px; } +.widget-button { + border-color: #11111b; + opacity: 1; + transition: border-color 0.2s ease-in-out; + transition: opacity 0.3s ease-in-out; +} .widget-button:hover.powermenu-button-shutdown { border-color: #f38ba8; } @@ -525,16 +535,28 @@ window#powermenu .powermenu.box { .widget-button:hover.powermenu-button-reboot { border-color: #fab387; } -.widget-button:focus.powermenu-button-shutdown, .widget-button:active.powermenu-button-shutdown { +.widget-button:focus.powermenu-button-shutdown { + border-color: #f38ba8; +} +.widget-button:focus.powermenu-button-logout { + border-color: #a6e3a1; +} +.widget-button:focus.powermenu-button-sleep { + border-color: #89dceb; +} +.widget-button:focus.powermenu-button-reboot { + border-color: #fab387; +} +.widget-button:active.powermenu-button-shutdown { border-color: rgba(243, 139, 168, 0.5); } -.widget-button:focus.powermenu-button-logout, .widget-button:active.powermenu-button-logout { +.widget-button:active.powermenu-button-logout { border-color: rgba(166, 227, 161, 0.5); } -.widget-button:focus.powermenu-button-sleep, .widget-button:active.powermenu-button-sleep { +.widget-button:active.powermenu-button-sleep { border-color: rgba(137, 220, 235, 0.5); } -.widget-button:focus.powermenu-button-reboot, .widget-button:active.powermenu-button-reboot { +.widget-button:active.powermenu-button-reboot { border-color: rgba(250, 179, 135, 0.5); } diff --git a/style.css.map b/style.css.map index dc4f74c..a6ae448 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common/common.scss","scss/colors.scss","scss/common/widget-button.scss","scss/bar/menu.scss","scss/bar/audio.scss","scss/bar/media.scss","scss/bar/network.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/power.scss","scss/bar/bar.scss","scss/menus/powermenu.scss","scss/common/floating-widget.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC7CW;;;ADgDb;AAAA;AAAA;EAGE;EACA,kBCpDW;;;ADuDb;AAAA;AAAA;EAGE;EACA,kBC3DW;;;AD8Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC1EW;;;AD6Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCxHW;;;AD2Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC1IW;ED2IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AE/NF;EACE,YDmCM;EClCN;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cD2BM;EC1BN;EACA;;AAEA;EACE;EACA,cDSO;ECRP;;AAGF;EAEE;EACA,cDEO;;ACCT;EACE;EACA;EACA;EACA;;AAGF;EACE,YApCM;;AAyCN;EACE;EACJ;;AAEE;EACE;EACJ;;;AC/CF;EACE,OFsBK;EErBL;EACA;;;ACFA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,OHRM;;;AGWR;EACE,OHZM;;;AIpBR;EACE;EACA,OJoBM;;;AIjBR;EACE;EACA,OJeM;;;AKtBR;EACE,OLgBM;;;AMjBR;EACE;EACA,ONsBI;;;AMnBN;EACE,ONkBI;;;AOxBN;EACE,OPeK;;;AQfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBRmBO;;AQjBP;EACE,kBRQG;EQPH;EACA;;AAGF;EACE,kBROA;EQNA;EACA;;;AAMN;EACE;;;AC1BF;EACE,OTeK;;;AUhBP;EACE;;;AAGF;EACE,YViCO;;;AU/BT;EACE;EACA,OVkBS;;;AUfX;EACE,kBVsBS;;;AUnBX;EACE,kBVmBS;EUlBT;;;AAGF;EACE,kBVKS;;;AW3BX;EACE,OXiBI;EWhBJ;;;ACFF;EACE,YZqCO;EYpCP;EACA;;;AAGF;EACE,YZ6BS;EY5BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACzBF;AAAA;EAGI;;;AAQJ;ECTI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;EDMA;EACA;EACA;EACA;;AAEA;EACI,eAXE;;AAaF;EACI;;AAGJ;EACI;EACA;;AAIR;EACI,YbOA;EaNA;EACA;EACA;EACA,cbGA;EaFA,eA5BC;EA6BD;EACA;EACA;;AAGI;EACI,cbtBR;EauBQ;;AAEJ;EACI,cb9BV;Ea+BU;;AAIJ;EACI,cbhCR;EaiCQ;;AAEJ;EACI,cbxCV;EayCU;;AAKJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAIZ;EACI,OblEF;;AaoEF;EACI,ObjEA;;;AaqER;ECzFI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;;ADsFA;EACI;;AAGJ;EACI;;;AAMA;EACI,cbvFN;;AayFE;EACI,cbtFJ;;AawFA;EACI,cbvFN;;AayFE;EACI,cb9FJ;;AaoGA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKR;EACI,ObtHF;;AawHF;EACI,ObrHA;;AauHJ;EACI,Ob1HA;;Aa4HJ;EACI,ObzHF;;;Aa8HF;EACI,ObrIF;;AauIF;EACI,ObpIA;;AasIJ;EACI,ObzIA;;Aa2IJ;EACI,ObxIF","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common/common.scss","scss/colors.scss","scss/common/widget-button.scss","scss/bar/menu.scss","scss/bar/audio.scss","scss/bar/media.scss","scss/bar/network.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/power.scss","scss/bar/bar.scss","scss/menus/powermenu.scss","scss/common/floating-widget.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC7CW;;;ADgDb;AAAA;AAAA;EAGE;EACA,kBCpDW;;;ADuDb;AAAA;AAAA;EAGE;EACA,kBC3DW;;;AD8Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC1EW;;;AD6Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCxHW;;;AD2Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC1IW;ED2IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AE/NF;EACE,YDmCM;EClCN;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cD2BM;EC1BN;EACA;;AAEA;EACE;EACA,cDSO;ECRP;;AAGF;EAEE;EACA,cDEO;;ACCT;EACE;EACA;EACA;EACA;;AAGF;EACE,YApCM;;AAwCN;EACE;EACA;;AAEF;EACE;EACA;;;AC9CN;EACE,OFsBK;EErBL;EACA;;;ACFA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,OHRM;;;AGWR;EACE,OHZM;;;AIpBR;EACE;EACA,OJoBM;;;AIjBR;EACE;EACA,OJeM;;;AKtBR;EACE,OLgBM;;;AMjBR;EACE;EACA,ONsBI;;;AMnBN;EACE,ONkBI;;;AOxBN;EACE,OPeK;;;AQfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBRmBO;;AQjBP;EACE,kBRQG;EQPH;EACA;;AAGF;EACE,kBROA;EQNA;EACA;;;AAMN;EACE;;;AC1BF;EACE,OTeK;;;AUhBP;EACE;;;AAGF;EACE,YViCO;;;AU/BT;EACE;EACA,OVkBS;;;AUfX;EACE,kBVsBS;;;AUnBX;EACE,kBVmBS;EUlBT;;;AAGF;EACE,kBVKS;;;AW3BX;EACE,OXiBI;EWhBJ;;;ACFF;EACE,YZqCO;EYpCP;EACA;;;AAGF;EACE,YZ6BS;EY5BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACzBF;AAAA;EAGI;;;AAQJ;ECTI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;EDMA;EACA;EACA;EACA;;AAEA;EACI,eAXE;;AAaF;EACI;EACA,ObJH;EaKG;;AAGJ;EACI,ObDD;EaEC;EACA;EACA;;AAIR;EACI,YbGA;EaFA;EACA;EACA;EACA,cbDA;EaEA,eAhCC;EAiCD;EACA;EACA;;AAGI;EACI,cb1BR;Ea2BQ;;AAEJ;EACI,cblCV;EamCU;;AAIJ;EACI,cbpCR;EaqCQ;;AAEJ;EACI,cb5CV;Ea6CU;;AAKJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAIZ;EACI,ObtEF;;AawEF;EACI,ObrEA;;;AayER;EC7FI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;;AD0FA;EACI;;AAGJ;EACI;;;AAIR;EACI,cbpEI;EaqEJ;EACA;EACA;;AAGI;EACI,cbhGN;;AakGE;EACI,cb/FJ;;AaiGA;EACI,cbhGN;;AakGE;EACI,cbvGJ;;Aa2GA;EACI,cb9GN;;AagHE;EACI,cb7GJ;;Aa+GA;EACI,cb9GN;;AagHE;EACI,cbrHJ;;AawHA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKR;EACI,Ob1IF;;Aa4IF;EACI,ObzIA;;Aa2IJ;EACI,Ob9IA;;AagJJ;EACI,Ob7IF;;;AakJF;EACI,ObzJF;;Aa2JF;EACI,ObxJA;;Aa0JJ;EACI,Ob7JA;;Aa+JJ;EACI,Ob5JF","file":"style.css"} \ No newline at end of file