From 7f668c16536a590a577fff9c8336e25717861a56 Mon Sep 17 00:00:00 2001 From: Donald Cheng Hong Zou Date: Fri, 22 Apr 2022 00:12:22 -0400 Subject: [PATCH] Some changes to dark mode css --- src/static/css/theme/dark.css | 10 +++++++++- src/static/css/theme/dark.css.map | 2 +- src/static/css/theme/dark.min.css | 2 +- src/static/css/theme/dark.min.css.map | 1 + src/static/css/theme/dark.scss | 13 ++++++++++++- 5 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 src/static/css/theme/dark.min.css.map diff --git a/src/static/css/theme/dark.css b/src/static/css/theme/dark.css index 296a89e..e13ee09 100644 --- a/src/static/css/theme/dark.css +++ b/src/static/css/theme/dark.css @@ -141,11 +141,15 @@ body { } .form-control { - background: #272727 !important; + background-color: #272727 !important; border-color: transparent !important; color: hsl(0deg, 0%, 80%) !important; } +.form-control:disabled { + color: #777777 !important; +} + .card .form-control { background: #2c2c2c !important; } @@ -303,4 +307,8 @@ div.toast div.toast-progressbar { border-color: #333333 !important; } +.btn-outline-primary.focus, .btn-outline-primary:focus, .btn-primary.focus, .btn-primary:focus { + box-shadow: 0 0 0 0.2rem rgba(144, 153, 255, 0.29) !important; +} + /*# sourceMappingURL=dark.css.map */ diff --git a/src/static/css/theme/dark.css.map b/src/static/css/theme/dark.css.map index d074bca..8e752c3 100644 --- a/src/static/css/theme/dark.css.map +++ b/src/static/css/theme/dark.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AA8BA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YArCS;EAsCT,OAdS;;;AAiBX;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE,OA1LS;;AA4LT;AAAA;EACE,YArNO;;;AAyNX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YA/NS;;;AAkOX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cAlQU;;;AAqQZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cAzRS;;;AA4RX;EACE,kBAjSS;;;AAoSX;AAAA;EAEE,kBAvSS;EAwST,cAnSS;;;AAsSX;EACE,OAtRY;;;AAyRd;EACE,OAvRS;EAwRT;;AAEA;EACE,OA1RO;;;AA8RX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE","file":"dark.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YAvCS;EAwCT,OAdS;;;AAiBX;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE,OA9LS;;AAgMT;AAAA;EACE,YA3NO;;;AA+NX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YArOS;;;AAwOX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cAvQU;;;AA0QZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cA/RS;;;AAkSX;EACE,kBAvSS;;;AA0SX;AAAA;EAEE,kBA7SS;EA8ST,cAzSS;;;AA4SX;EACE,OA1RY;;;AA6Rd;EACE,OA3RS;EA4RT;;AAEA;EACE,OA9RO;;;AAkSX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE;;;AAKJ;EACE","file":"dark.css"} \ No newline at end of file diff --git a/src/static/css/theme/dark.min.css b/src/static/css/theme/dark.min.css index c0ffb17..0346ca8 100644 --- a/src/static/css/theme/dark.min.css +++ b/src/static/css/theme/dark.min.css @@ -1 +1 @@ -:root{--green:hsl(120deg,30%,50%)!important;--blue:hsl(235deg,60%,60%)!important;--red:hsl(0deg,60%,60%)!important;--magenta:hsl(315deg,60%,60%)!important}body{background:#222;color:hsl(0deg,0%,80%)}.btn-primary{color:hsl(0deg,0%,90%)!important;border-color:hsl(235deg,60%,60%)!important;background:hsl(235deg,60%,60%)!important}.btn-primary:hover{background-color:hsl(235deg,60%,50%)!important;border-color:hsl(235deg,60%,50%)!important}.btn-outline-primary{color:hsl(235deg,60%,60%)!important;border-color:hsl(235deg,60%,60%)!important;background:transparent!important}.btn-outline-primary:hover,.btn-outline-primary.active{color:hsl(0deg,0%,90%)!important}.btn-outline-primary.active{background-color:hsl(235deg,60%,60%)!important;border-color:hsl(235deg,60%,60%)!important}.btn-outline-primary:hover{background-color:hsl(235deg,60%,50%)!important;border-color:hsl(235deg,60%,50%)!important}.btn-success{color:hsl(0deg,0%,90%)!important;border-color:hsl(120deg,30%,50%)!important;background:hsl(120deg,30%,50%)!important}.btn-success:hover{background-color:hsl(120deg,30%,40%)!important;border-color:hsl(120deg,30%,40%)!important}.btn-outline-success{color:hsl(120deg,30%,50%)!important;border-color:hsl(120deg,30%,50%)!important;background:transparent!important}.btn-outline-success:hover,.btn-outline-success.active{color:hsl(0deg,0%,90%)!important}.btn-outline-success.active{background-color:hsl(120deg,30%,50%)!important;border-color:hsl(120deg,30%,50%)!important}.btn-outline-success:hover{background-color:hsl(120deg,30%,40%)!important;border-color:hsl(120deg,30%,40%)!important}.btn-danger{color:hsl(0deg,0%,90%)!important;border-color:hsl(0deg,60%,60%)!important;background:hsl(0deg,60%,60%)!important}.btn-danger:hover{background-color:hsl(0deg,60%,50%)!important;border-color:hsl(0deg,60%,50%)!important}.btn-outline-danger{color:hsl(0deg,60%,60%)!important;border-color:hsl(0deg,60%,60%)!important;background:transparent!important}.btn-outline-danger:hover,.btn-outline-danger.active{color:hsl(0deg,0%,90%)!important}.btn-outline-danger.active{background-color:hsl(0deg,60%,60%)!important;border-color:hsl(0deg,60%,60%)!important}.btn-outline-danger:hover{background-color:hsl(0deg,60%,50%)!important;border-color:hsl(0deg,60%,50%)!important}.btn-secondary{color:hsl(0deg,0%,90%)!important;border-color:#424242!important;background:#424242!important}.btn-secondary:hover{background-color:#383838!important;border-color:#383838!important}.btn-outline-secondary{color:#424242!important;border-color:#424242!important;background:transparent!important}.btn-outline-secondary:hover,.btn-outline-secondary.active{color:hsl(0deg,0%,90%)!important}.btn-outline-secondary.active{background-color:#424242!important;border-color:#424242!important}.btn-outline-secondary:hover{background-color:#383838!important;border-color:#383838!important}.btn-control.btn-lock-peer.lock{color:hsl(0deg,60%,60%)!important}.btn-control.btn-lock-peer.lock:hover{color:hsl(0deg,60%,50%)!important}.btn-control:hover{background-color:transparent!important}.btn-control:hover.btn-outline-primary{color:hsl(235deg,60%,50%)!important}.btn-control:hover.btn-outline-success{color:hsl(120deg,30%,40%)!important}.btn-control:hover.btn-outline-danger{color:hsl(0deg,60%,50%)!important}.btn-control:hover.btn-outline-secondary{color:#383838!important}.form-control{background:#272727!important;border-color:transparent!important;color:hsl(0deg,0%,80%)!important}.card .form-control{background:#2c2c2c!important}.sidebar .nav-link,.bottomNavContainer .nav-link{color:hsl(0deg,0%,80%)}.sidebar .nav-link:hover,.bottomNavContainer .nav-link:hover{background:#222}nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse,.navbar-brand,.bg-dark{background-color:#1e1e1e!important;background:#1e1e1e!important}.card{background:#272727}.text-muted{color:hsl(0deg,0%,50%)!important}.text-danger{color:hsl(0deg,60%,60%)!important}.text-success{color:hsl(120deg,30%,50%)!important}.text-primary{color:hsl(235deg,60%,60%)!important}.text-info{color:hsl(190deg,60%,60%)!important}a.text-success:focus,a.text-success:hover{color:hsl(120deg,30%,40%)!important}a.text-danger:focus,a.text-danger:hover{color:hsl(0deg,60%,50%)!important}a.text-info:focus,a.text-info:hover{color:hsl(190deg,60%,50%)!important}.dot-running{background-color:hsl(120deg,30%,50%)!important}.card-running{border-color:hsl(120deg,30%,50%)}.toggle--switch:checked + .toggleLabel::before{background-color:hsl(235deg,60%,60%)!important}.toggle--switch:checked + .toggleLabel{background-color:#2e336b!important;border-color:hsl(235deg,60%,60%)!important}.sidebar .nav-link.active,.bottomNavContainer .nav-link.active{color:hsl(235deg,60%,60%)!important}hr{border-color:#2e2e2e}.modal-content{background-color:#222}.modal-header,.modal-footer{background-color:#1e1e1e;border-color:#2e2e2e}code{color:hsl(315deg,60%,60%)}.close{color:hsl(0deg,0%,80%);text-shadow:none}.close:hover{color:hsl(0deg,0%,70%)}.chartContainer.fullScreen{background-color:#222!important}.popover{background-color:#333!important;border:none!important}.popover-body{color:hsl(0deg,0%,80%)!important}div.toast{background-color:#424242!important}div.toast div.toast-header{background-color:#333!important;color:hsl(0deg,0%,80%)!important;border-bottom-color:#424242!important}div.toast div.toast-body{background-color:#383838!important;color:hsl(0deg,0%,80%)!important}div.toast div.toast-progressbar{background-color:hsl(235deg,60%,60%)!important}.bs-popover-auto[x-placement^=right] > .arrow::after,.bs-popover-right > .arrow::after{border-right-color:#333!important}.btn-manage-group .setting_btn_menu{background-color:#2c2c2c!important}.setting_btn_menu a:hover{background-color:#333!important}.table{color:hsl(0deg,0%,80%)!important}.table th,.table td{border-color:#333!important} \ No newline at end of file +:root{--green: hsl(120deg, 30%, 50%) !important;--blue: hsl(235deg, 60%, 60%) !important;--red: hsl(0deg, 60%, 60%) !important;--magenta: hsl(315deg, 60%, 60%) !important}body{background:#222;color:#ccc}.btn-primary{color:#e6e6e6 !important;border-color:#5c66d6 !important;background:#5c66d6 !important}.btn-primary:hover{background-color:#3340cc !important;border-color:#3340cc !important}.btn-outline-primary{color:#5c66d6 !important;border-color:#5c66d6 !important;background:rgba(0,0,0,0) !important}.btn-outline-primary:hover,.btn-outline-primary.active{color:#e6e6e6 !important}.btn-outline-primary.active{background-color:#5c66d6 !important;border-color:#5c66d6 !important}.btn-outline-primary:hover{background-color:#3340cc !important;border-color:#3340cc !important}.btn-success{color:#e6e6e6 !important;border-color:#59a659 !important;background:#59a659 !important}.btn-success:hover{background-color:#478547 !important;border-color:#478547 !important}.btn-outline-success{color:#59a659 !important;border-color:#59a659 !important;background:rgba(0,0,0,0) !important}.btn-outline-success:hover,.btn-outline-success.active{color:#e6e6e6 !important}.btn-outline-success.active{background-color:#59a659 !important;border-color:#59a659 !important}.btn-outline-success:hover{background-color:#478547 !important;border-color:#478547 !important}.btn-danger{color:#e6e6e6 !important;border-color:#d65c5c !important;background:#d65c5c !important}.btn-danger:hover{background-color:#c33 !important;border-color:#c33 !important}.btn-outline-danger{color:#d65c5c !important;border-color:#d65c5c !important;background:rgba(0,0,0,0) !important}.btn-outline-danger:hover,.btn-outline-danger.active{color:#e6e6e6 !important}.btn-outline-danger.active{background-color:#d65c5c !important;border-color:#d65c5c !important}.btn-outline-danger:hover{background-color:#c33 !important;border-color:#c33 !important}.btn-secondary{color:#e6e6e6 !important;border-color:#424242 !important;background:#424242 !important}.btn-secondary:hover{background-color:#383838 !important;border-color:#383838 !important}.btn-outline-secondary{color:#424242 !important;border-color:#424242 !important;background:rgba(0,0,0,0) !important}.btn-outline-secondary:hover,.btn-outline-secondary.active{color:#e6e6e6 !important}.btn-outline-secondary.active{background-color:#424242 !important;border-color:#424242 !important}.btn-outline-secondary:hover{background-color:#383838 !important;border-color:#383838 !important}.btn-control.btn-lock-peer.lock{color:#d65c5c !important}.btn-control.btn-lock-peer.lock:hover{color:#c33 !important}.btn-control:hover{background-color:rgba(0,0,0,0) !important}.btn-control:hover.btn-outline-primary{color:#3340cc !important}.btn-control:hover.btn-outline-success{color:#478547 !important}.btn-control:hover.btn-outline-danger{color:#c33 !important}.btn-control:hover.btn-outline-secondary{color:#383838 !important}.form-control{background-color:#272727 !important;border-color:rgba(0,0,0,0) !important;color:#ccc !important}.form-control:disabled{color:#777 !important}.card .form-control{background:#2c2c2c !important}.sidebar .nav-link,.bottomNavContainer .nav-link{color:#ccc}.sidebar .nav-link:hover,.bottomNavContainer .nav-link:hover{background:#222}nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse,.navbar-brand,.bg-dark{background-color:#1e1e1e !important;background:#1e1e1e !important}.card{background:#272727}.text-muted{color:gray !important}.text-danger{color:#d65c5c !important}.text-success{color:#59a659 !important}.text-primary{color:#5c66d6 !important}.text-info{color:#5cc2d6 !important}a.text-success:focus,a.text-success:hover{color:#478547 !important}a.text-danger:focus,a.text-danger:hover{color:#c33 !important}a.text-info:focus,a.text-info:hover{color:#33b3cc !important}.dot-running{background-color:#59a659 !important}.card-running{border-color:#59a659}.toggle--switch:checked+.toggleLabel::before{background-color:#5c66d6 !important}.toggle--switch:checked+.toggleLabel{background-color:#2e336b !important;border-color:#5c66d6 !important}.sidebar .nav-link.active,.bottomNavContainer .nav-link.active{color:#5c66d6 !important}hr{border-color:#2e2e2e}.modal-content{background-color:#222}.modal-header,.modal-footer{background-color:#1e1e1e;border-color:#2e2e2e}code{color:#d65cb8}.close{color:#ccc;text-shadow:none}.close:hover{color:#b3b3b3}.chartContainer.fullScreen{background-color:#222 !important}.popover{background-color:#333 !important;border:none !important}.popover-body{color:#ccc !important}div.toast{background-color:#424242 !important}div.toast div.toast-header{background-color:#333 !important;color:#ccc !important;border-bottom-color:#424242 !important}div.toast div.toast-body{background-color:#383838 !important;color:#ccc !important}div.toast div.toast-progressbar{background-color:#5c66d6 !important}.bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after{border-right-color:#333 !important}.btn-manage-group .setting_btn_menu{background-color:#2c2c2c !important}.setting_btn_menu a:hover{background-color:#333 !important}.table{color:#ccc !important}.table th,.table td{border-color:#333 !important}.btn-outline-primary.focus,.btn-outline-primary:focus,.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(144,153,255,.29) !important}/*# sourceMappingURL=dark.min.css.map */ diff --git a/src/static/css/theme/dark.min.css.map b/src/static/css/theme/dark.min.css.map new file mode 100644 index 0000000..91f6351 --- /dev/null +++ b/src/static/css/theme/dark.min.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA,MACE,0CACA,yCACA,sCACA,4CAGF,KACE,WAvCS,KAwCT,MAdS,KAiBX,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,YACE,yBACA,gCACA,8BAEA,kBACE,iCACA,6BAIJ,oBACE,yBACA,gCACA,oCAEA,qDAEE,yBAGF,2BACE,oCACA,gCAGF,0BACE,iCACA,6BAIJ,eACE,yBACA,gCACA,8BAEA,qBACE,oCACA,gCAIJ,uBACE,yBACA,gCACA,oCAEA,2DAEE,yBAGF,8BACE,oCACA,gCAGF,6BACE,oCACA,gCAKF,gCACE,yBACA,sCACE,sBAIJ,mBACE,0CAEA,uCACE,yBAGF,uCACE,yBAGF,sCACE,sBAGF,yCACE,yBAKN,cACE,oCACA,sCACA,sBAGF,uBACE,sBAGF,oBACE,8BAGF,iDAEE,MA9LS,KAgMT,6DACE,WA3NO,KA+NX,8FAGE,oCACA,8BAGF,MACE,WArOS,QAwOX,YACE,sBAGF,aACE,yBAGF,cACE,yBAGF,cACE,yBAGF,WACE,yBAGF,0CAEE,yBAGF,wCAEE,sBAGF,oCAEE,yBAGF,aACE,oCAGF,cACE,aAvQU,QA0QZ,6CACE,oCAEF,qCACE,oCACA,gCAGF,+DAEE,yBAGF,GACE,aA/RS,QAkSX,eACE,iBAvSS,KA0SX,4BAEE,iBA7SS,QA8ST,aAzSS,QA4SX,KACE,MA1RY,QA6Rd,OACE,MA3RS,KA4RT,iBAEA,aACE,MA9RO,QAkSX,2BACE,iCAGF,SACE,iCACA,uBAGF,cACE,sBAGF,UACE,oCAEA,2BACE,iCACA,sBACA,uCAGF,yBACE,oCACA,sBAGF,gCACE,oCAIJ,mFAEE,mCAGF,oCACE,oCAGF,0BACE,iCAGF,OACE,sBAEA,oBAEE,6BAKJ,4FACE","file":"dark.min.css"} \ No newline at end of file diff --git a/src/static/css/theme/dark.scss b/src/static/css/theme/dark.scss index c7a27b0..5395d97 100644 --- a/src/static/css/theme/dark.scss +++ b/src/static/css/theme/dark.scss @@ -7,6 +7,7 @@ $grey-600: #2e2e2e; $grey-700: #333333; $grey-800: #383838; $grey-900: #424242; +$grey-1000: #777777; $green-400: hsl(120deg, 30%, 40%); $green-500: hsl(120deg, 30%, 50%); @@ -16,6 +17,7 @@ $red-500: hsl(0deg, 60%, 60%); $blue-400: hsl(235deg, 60%, 50%); $blue-500: hsl(235deg, 60%, 60%); +$blue-400-clear: rgba(51, 64, 204, 0.25); $cyan-400: hsl(190deg, 60%, 50%); $cyan-500: hsl(190deg, 60%, 60%); @@ -198,11 +200,15 @@ body { } .form-control { - background: $grey-400 !important; + background-color: $grey-400 !important; border-color: transparent !important; color: $text-200 !important; } +.form-control:disabled{ + color: $grey-1000 !important; +} + .card .form-control { background: $grey-500 !important; } @@ -363,3 +369,8 @@ div.toast { border-color: $grey-700 !important; } } + + +.btn-outline-primary.focus, .btn-outline-primary:focus, .btn-primary.focus, .btn-primary:focus{ + box-shadow: 0 0 0 0.2rem rgb(144 153 255 / 29%) !important; +} \ No newline at end of file