Brand new switch button and toast UI

src/static/css/dashboard.css

@@ -9,7 +9,7 @@ body {
     vertical-align: text-bottom;
 }
 
-.btn-primary{
+.btn-primary {
     font-weight: bold;
 }
 
@@ -22,8 +22,10 @@ body {
     top: 0;
     bottom: 0;
     left: 0;
-    z-index: 100; /* Behind the navbar */
-    padding: 48px 0 0; /* Height of navbar */
+    z-index: 100;
+    /* Behind the navbar */
+    padding: 48px 0 0;
+    /* Height of navbar */
     box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }
 
@@ -33,7 +35,8 @@ body {
     height: calc(100vh - 48px);
     padding-top: .5rem;
     overflow-x: hidden;
-    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    overflow-y: auto;
+    /* Scrollable contents if viewport is shorter than content. */
 }
 
 @supports ((position: -webkit-sticky) or (position: sticky)) {
@@ -73,6 +76,7 @@ body {
     text-transform: uppercase;
 }
 
+
 /*
  * Navbar
  */
@@ -90,11 +94,11 @@ body {
     right: 1rem;
 }
 
-.form-control{
+.form-control {
     transition: all 0.2s ease-in-out;
 }
 
-.form-control:disabled{
+.form-control:disabled {
     cursor: not-allowed;
 }
 
@@ -115,7 +119,7 @@ body {
     box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
 
-.dot{
+.dot {
     width: 10px;
     height: 10px;
     border-radius: 50px;
@@ -123,157 +127,171 @@ body {
     margin-left: auto !important;
 }
 
-.dot-running{
+.dot-running {
     background-color: #28a745!important;
     box-shadow: 0 0 0 0.2rem #28a74545;
 }
 
-.h6-dot-running{
+.h6-dot-running {
     margin-left: 0.3rem;
 }
 
-.dot-stopped{
+.dot-stopped {
     background-color: #6c757d!important;
 }
 
-.card-running{
+.card-running {
     border-color: #28a745;
 }
 
-.info h6{
+.info h6 {
     line-break: anywhere;
-    transition: 0.2s ease-in-out;
+    transition: all 0.4s cubic-bezier(0.96, -0.07, 0.34, 1.01);
+    opacity: 1;
 }
 
-.info .row .col-sm{
+.info .row .col-sm {
     display: flex;
     flex-direction: column;
 }
 
-.info .row .col-sm small{
+.info .row .col-sm small {
     display: flex;
-
 }
 
-.info .row .col-sm small strong:last-child(1){
+.info .row .col-sm small strong:last-child(1) {
     margin-left: auto !important;
 }
 
-.btn-control{
+.btn-control {
     border: none !important;
     padding: 0 1rem 0 0;
 }
 
-.btn-control:active, .btn-control:focus{
+.btn-control:active,
+.btn-control:focus {
     background-color: transparent !important;
     border: none !important;
     box-shadow: none;
 }
 
-.btn-qrcode-peer{
+.btn-qrcode-peer {
     padding: 0 !important;
 }
 
-.btn-qrcode-peer:active, .btn-qrcode-peer:hover{
+.btn-qrcode-peer:active,
+.btn-qrcode-peer:hover {
     transform: scale(0.9) rotate(180deg);
     border: 0 !important;
 }
 
-.btn-download-peer:active, .btn-download-peer:hover{
+.btn-download-peer:active,
+.btn-download-peer:hover {
     color: #17a2b8 !important;
     transform: translateY(5px);
 }
 
-.share_peer_btn_group .btn-control{
+.share_peer_btn_group .btn-control {
     margin: 0 0 0 1rem;
     padding: 0 !important;
     transition: all 0.4s cubic-bezier(1, -0.43, 0, 1.37);
 }
 
-.btn-control:hover{
+.btn-control:hover {
     background: white;
 }
 
-.btn-delete-peer:hover{
+.btn-delete-peer:hover {
     color: #dc3545;
 }
 
-.btn-lock-peer:hover{
-    color: #6c757d;
+.btn-lock-peer:hover {
+    color: #28a745;
 }
 
-.btn-setting-peer:hover{
-    color:#007bff
+.btn-lock-peer.lock{
+    color: #6c757d
 }
 
-.btn-download-peer:hover{
+.btn-lock-peer.lock:hover{
+    color: #6c757d
+}
+
+.btn-setting-peer:hover {
+    color: #007bff
+}
+
+.btn-download-peer:hover {
     color: #17a2b8;
 }
 
-.login-container{
+.login-container {
     padding: 2rem;
 }
 
-@media (max-width: 992px){
-    .card-col{
+@media (max-width: 992px) {
+    .card-col {
         margin-bottom: 1rem;
     }
 }
 
-.switch{
+.switch {
     font-size: 2rem;
 }
-.switch:hover{
+
+.switch:hover {
     text-decoration: none
 }
 
-.btn-group-label:hover{
+.btn-group-label:hover {
     color: #007bff;
     border-color: #007bff;
     background: white;
 }
 
-.peer_data_group{
+.peer_data_group {
     text-align: right;
     display: flex;
     margin-bottom: 0.5rem
 }
 
-.peer_data_group p{
+.peer_data_group p {
     text-transform: uppercase;
     margin-bottom: 0;
     margin-right: 1rem
 }
 
 @media (max-width: 768px) {
-    .peer_data_group{
+    .peer_data_group {
         text-align: left;
     }
 }
 
-.index-switch{
+.index-switch {
     text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
 
-main{
+main {
     margin-bottom: 3rem;
 }
 
-.peer_list{
+.peer_list {
     margin-bottom: 7rem
 }
 
 @media (max-width: 768px) {
-    .add_btn{
+    .add_btn {
         bottom: 1.5rem !important;
     }
-
-    .peer_list{
+    .peer_list {
         margin-bottom: 7rem !important;
     }
 }
 
-.btn-manage-group{
+.btn-manage-group {
     z-index: 99;
     position: fixed;
     bottom: 3rem;
@@ -281,7 +299,7 @@ main{
     display: flex;
 }
 
-.btn-manage-group .setting_btn_menu{
+.btn-manage-group .setting_btn_menu {
     position: absolute;
     top: -124px;
     background-color: white;
@@ -296,16 +314,16 @@ main{
     transition: all 0.3s cubic-bezier(0.58, 0.03, 0.05, 1.28);
 }
 
-.btn-manage-group .setting_btn_menu.show{
+.btn-manage-group .setting_btn_menu.show {
     display: block;
 }
 
-.setting_btn_menu.showing{
+.setting_btn_menu.showing {
     transform: translateY(0px);
     opacity: 1;
 }
 
-.setting_btn_menu a{
+.setting_btn_menu a {
     display: flex;
     padding: 0.5rem 1rem;
     transition: all 0.1s ease-in-out;
@@ -314,36 +332,38 @@ main{
     cursor: pointer;
 }
 
-.setting_btn_menu a:hover{
+.setting_btn_menu a:hover {
     background-color: #efefef;
     text-decoration: none;
 }
 
-.setting_btn_menu a i{
+.setting_btn_menu a i {
     margin-right: auto !important;
 }
 
-.add_btn{
+.add_btn {
     height: 54px;
     z-index: 99;
     border-radius: 100px !important;
     padding: 0 14px;
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
     margin-right: 1rem;
     font-size: 1.5rem;
 }
 
-.setting_btn{
+.setting_btn {
     height: 54px;
     z-index: 99;
     border-radius: 100px !important;
     padding: 0 14px;
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
     font-size: 1.5rem;
 }
 
+@-webkit-keyframes rotating
+/* Safari and Chrome */
 
-@-webkit-keyframes rotating /* Safari and Chrome */ {
+{
     from {
         -webkit-transform: rotate(0deg);
         -o-transform: rotate(0deg);
@@ -355,6 +375,7 @@ main{
         transform: rotate(360deg);
     }
 }
+
 @keyframes rotating {
     from {
         -ms-transform: rotate(0deg);
@@ -380,7 +401,7 @@ main{
     animation: rotating 0.75s linear infinite;
 }
 
-.peer_private_key_textbox_switch{
+.peer_private_key_textbox_switch {
     position: absolute;
     right: 2rem;
     transform: translateY(-28px);
@@ -388,139 +409,153 @@ main{
     cursor: pointer;
 }
 
-#peer_private_key_textbox, #private_key, #public_key, #peer_preshared_key_textbox{
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+#peer_private_key_textbox,
+#private_key,
+#public_key,
+#peer_preshared_key_textbox {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.progress-bar{
+.progress-bar {
     transition: 0.3s ease-in-out;
 }
 
-.key{
+.key {
     transition: 0.2s ease-in-out;
     cursor: pointer;
 }
 
-.key:hover{
+.key:hover {
     color: #007bff;
 }
 
-.card{
+.card {
     border-radius: 10px;
 }
 
-.peer_list .card .button-group{
+.peer_list .card .button-group {
     height: 22px;
 }
 
-.form-control{
+.form-control {
     border-radius: 10px;
 }
 
-.btn{
+.btn {
     border-radius: 8px;
     /*padding: 0.6rem 0.9em;*/
 }
 
-#username, #password{
-    padding: 0.6rem calc( 0.9rem + 32px );
+#username,
+#password {
+    padding: 0.6rem calc( 0.9rem + 32px);
     height: inherit;
 }
 
-label[for="username"], label[for="password"]{
+label[for="username"],
+label[for="password"] {
     font-size: 1rem;
     margin: 0 !important;
     transform: translateY(30px) translateX(16px);
     padding: 0;
 }
 
+
 /*label[for="password"]{*/
+
+
 /*    transform: translateY(32px) translateX(16px);*/
+
+
 /*}*/
 
-
-.modal-content{
+.modal-content {
     border-radius: 10px;
 }
 
-.tooltip-inner{
+.tooltip-inner {
     font-size: 0.8rem;
 }
 
 @-webkit-keyframes loading {
-    0%{
+    0% {
         background-color: #dfdfdf;
     }
-    50%{
+    50% {
         background-color: #adadad;
     }
-    100%{
-        background-color: #dfdfdf;
-    }
-}
-@-moz-keyframes loading {
-    0%{
-        background-color: #dfdfdf;
-    }
-    50%{
-        background-color: #adadad;
-    }
-    100%{
+    100% {
         background-color: #dfdfdf;
     }
 }
 
-.conf_card{
+@-moz-keyframes loading {
+    0% {
+        background-color: #dfdfdf;
+    }
+    50% {
+        background-color: #adadad;
+    }
+    100% {
+        background-color: #dfdfdf;
+    }
+}
+
+.conf_card {
     transition: 0.2s ease-in-out;
 }
 
-.conf_card:hover{
+.conf_card:hover {
     border-color: #007bff;
     cursor: pointer;
 }
 
-.info_loading{
-    animation: loading 2s infinite ease-in-out;
-    border-radius: 5px;
-    height: 19px;
-    transition: 0.3s ease-in-out;
+.info_loading {
+    /* animation: loading 2s infinite ease-in-out;
+    /* border-radius: 5px; */
+    height: 19.19px;
+    /* transition: 0.3s ease-in-out; */
+
+    /* transform: translateX(40px); */
+    opacity: 0 !important;
 }
 
-#conf_status_btn{
+#conf_status_btn {
     transition: 0.2s ease-in-out;
 }
 
-#conf_status_btn.info_loading{
+#conf_status_btn.info_loading {
     height: 38px;
     border-radius: 5px;
     animation: loading 3s infinite ease-in-out;
 }
 
-#qrcode_img img{
+#qrcode_img img {
     width: 100%;
 }
 
-#selected_ip_list .badge, #selected_peer_list .badge{
+#selected_ip_list .badge,
+#selected_peer_list .badge {
     margin: 0.1rem
 }
 
-#add_modal.ip_modal_open{
+#add_modal.ip_modal_open {
     transition: filter 0.2s ease-in-out;
     filter: brightness(0.5);
 }
 
-#delete_bulk_modal .list-group a.active{
+#delete_bulk_modal .list-group a.active {
     background-color: #dc3545;
     border-color: #dc3545;
 }
 
-#selected_peer_list{
+#selected_peer_list {
     max-height: 80px;
     overflow-y: scroll;
     overflow-x: hidden;
 }
 
-.no-response{
+.no-response {
     width: 100%;
     height: 100%;
     position: fixed;
@@ -534,93 +569,195 @@ label[for="username"], label[for="password"]{
     transition: all 1s ease-in-out;
 }
 
-.no-response.active{
+.no-response.active {
     display: flex;
 }
 
-.no-response.active.show{
+.no-response.active.show {
     opacity: 100;
 }
 
-.no-response .container > *{
+.no-response .container>* {
     text-align: center;
 }
 
-.no-responding{
+.no-responding {
     transition: all 1s ease-in-out;
     filter: blur(10px);
 }
 
-pre.index-alert{
+pre.index-alert {
     margin-bottom: 0;
     padding: 1rem;
     background-color: #343a40;
-    border: 1px solid rgba(0,0,0,.125);
+    border: 1px solid rgba(0, 0, 0, .125);
     border-radius: .25rem;
     margin-top: 1rem;
     color: white;
 }
 
-.peerNameCol{
+.peerNameCol {
     display: flex;
     align-items: center;
     margin-bottom: 0.2rem
 }
 
-.peerName{
-    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+.peerName {
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.peerLightContainer{
-    text-transform: uppercase; margin: 0; margin-left: auto !important;
+.peerLightContainer {
+    text-transform: uppercase;
+    margin: 0;
+    margin-left: auto !important;
 }
 
-.conf_card .dot, .info .dot {
+.conf_card .dot,
+.info .dot {
     transform: translateX(10px);
 }
 
-#config_body{
+#config_body {
     transition: 0.3s ease-in-out;
 }
 
-#config_body.firstLoading{
+#config_body.firstLoading {
     opacity: 0.2;
 }
 
-.chartTitle{
+.chartTitle {
     display: flex;
 }
 
-.chartControl{
-   margin-bottom: 1rem;
+.chartControl {
+    margin-bottom: 1rem;
     display: flex;
     align-items: center;
 }
 
-.chartTitle h6{
+.chartTitle h6 {
     margin-bottom: 0;
     line-height: 1;
     margin-right: 0.5rem;
 }
 
-.chartContainer.fullScreen{
+.chartContainer.fullScreen {
     position: fixed;
     z-index: 9999;
     background-color: white;
     top: 0;
     left: 0;
-    width: calc( 100% + 15px );
+    width: calc( 100% + 15px);
     height: 100%;
     padding: 32px;
 }
 
-.chartContainer.fullScreen .col-sm{
+.chartContainer.fullScreen .col-sm {
     padding-right: 0;
     height: 100%;
 }
 
-.chartContainer.fullScreen .chartCanvasContainer{
+.chartContainer.fullScreen .chartCanvasContainer {
     width: 100%;
-    height: calc( 100% - 47px ) !important;
-    max-height: calc( 100% - 47px ) !important;
+    height: calc( 100% - 47px) !important;
+    max-height: calc( 100% - 47px) !important;
 }
+
+#switch{
+    transition: all 350ms ease-in;
+}
+
+.toggle--switch{
+    display: none;
+}
+
+.toggleLabel{
+    width: 64px;
+    height: 32px;
+    background-color: #6c757d17;
+    display: flex;
+    position: relative;
+    border: 2px solid #6c757d8c;
+    border-radius: 100px;
+    transition: all 350ms ease-in;
+    cursor: pointer;
+    margin: 0;
+}
+
+.toggle--switch.waiting + .toggleLabel{
+    opacity: 0.5;
+}
+
+.toggleLabel::before{
+    background-color: #6c757d;
+    height: 26px;
+    width: 26px;
+    content: "";
+    border-radius: 100px;
+    margin: 1px;
+    position: absolute;
+    animation-name: off;
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    transition: all 350ms ease-in;
+    cursor: pointer;
+}
+
+.toggle--switch:checked + .toggleLabel{
+    background-color: #007bff17 !important;
+    border: 2px solid #007bff8c;
+}
+
+.toggle--switch:checked + .toggleLabel::before{
+    background-color: #007bff;
+    animation-name: on;
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+}
+
+@keyframes on {
+    0%{
+        left: 0px;
+    }
+    60%{
+        left: 0px;
+        width: 40px; 
+    }
+    100%{
+        left: 32px;
+        width: 26px; 
+    }
+}
+
+@keyframes off {
+    0%{
+        left: 32px;
+    }
+    60%{
+        left: 18px;
+        width: 40px; 
+    }
+    100%{
+        left: 0px;
+        width: 26px; 
+    }
+}
+
+.toast{
+    min-width: 300px;
+    background-color: rgba(255,255,255,1);
+}
+
+.toast-header{
+    background-color: rgba(255,255,255);
+}
+
+.toast-progressbar{
+    width: 100%;
+    height: 4px;
+    background-color: #007bff;
+    border-bottom-left-radius: .25rem;
+}