new styles for alertify dialogs

customize.dist/main.css

@@ -61,11 +61,25 @@
   top: 50%;
   transform: translateY(-50%);
 }
+.alertify .dialog .bright,
+.alertify .alert .bright {
+  color: #ffffff;
+}
 .alertify .dialog > div,
 .alertify .alert > div {
   background-color: #444;
   border-radius: 5px;
 }
+.alertify .dialog > div.half,
+.alertify .alert > div.half {
+  width: 50%;
+}
+@media (max-width: 600px) {
+  .alertify .dialog > div.half,
+  .alertify .alert > div.half {
+    width: 100%;
+  }
+}
 .alertify .dialog > *,
 .alertify .alert > * {
   width: 30%;
@@ -123,6 +137,34 @@
   border: 1px solid #302B28;
   border-radius: 5px;
 }
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe,
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger {
+  color: #302B28;
+  white-space: normal;
+  font-weight: bold;
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger {
+  background-color: #FA5858;
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger:hover,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger:hover,
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger:active,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger:active {
+  background-color: #fb7171;
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe {
+  background-color: #46E981;
+}
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe:hover,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe:hover,
+.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe:active,
+.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe:active {
+  background-color: #74eea0;
+}
 .alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
 .alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
 .alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active,

customize.dist/src/less/alertify.less

@@ -61,10 +61,19 @@
     }
 
     .dialog, .alert {
+        .bright {
+            color: @light-base;
+        }
 
         & > div {
             background-color: @alertify-dialog-bg;
             border-radius: 5px;
+            &.half {
+                width: 50%;
+                @media (max-width: @media-medium-screen) {
+                    width: 100%;
+                }
+            }
         }
 
         width: 100%;
@@ -138,16 +147,23 @@
 
                 &.safe, &.danger {
                     color: @old-base;
+                    white-space: normal;
+                    font-weight: bold;
                 }
                 &.danger {
                     background-color: @cp-red;
+                    &:hover, &:active {
+                        background-color: lighten(@cp-red, 5%);
+                    }
                 }
 
                 &.safe {
                     background-color: @cp-green;
+                    &:hover, &:active {
+                        background-color: lighten(@cp-green, 10%);
+                    }
                 }
 
-
                 &:hover, &:active {
                     background-color: @alertify-btn-bg-hover;
                 }