Alertify buttons and inputs added to sidebar layout

customize.dist/src/less2/include/alertify.less

@@ -219,21 +219,6 @@
             ::-ms-input-placeholder { /* Microsoft Edge */
                 color: @cryptpad_color_grey;
             }
-            input:not(.form-control), textarea {
-                background-color: @alertify-input-fg;
-                color: @cryptpad_text_col;
-                border: 1px solid @alertify-input-bg;
-                margin-bottom: 15px;
-                width: 100%;
-                font-size: 100%;
-                padding: @alertify_padding-base;
-                &[readonly] {
-                    background-color: @alertify-light-bg;
-                    color: @cryptpad_text_col;
-                    border-color: @alertify-input-fg;
-                }
-            }
-
             span.cp-password-container {
                 display: flex;
                 align-items: center;
@@ -262,6 +247,17 @@
             }
 
             .buttons_main();
+            input:not(.form-control), textarea {
+                margin-bottom: 15px;
+            }
+
+            button {
+                display: inline-block;
+                position: relative;
+                margin: 6px 8px;
+                min-height: 36px;
+                min-width: 88px;
+            }
 
             nav {
                 padding: @alertify_padding-base;

customize.dist/src/less2/include/buttons.less

@@ -1,24 +1,37 @@
 @import (reference) "./colortheme-all.less";
+@import (reference) "./variables.less";
 
 .buttons_main() {
     @alertify-fore: @colortheme_modal-fg;
     @alertify-btn-fg: @alertify-fore;
     @alertify-light-bg: fade(@alertify-fore, 25%);
+    @alertify_padding-base: @variables_padding;
+    @alertify-input-bg: @colortheme_modal-input;
+    @alertify-input-fg: @colortheme_modal-input-fg;
+
+    input:not(.form-control), textarea {
+        background-color: @alertify-input-fg;
+        color: @cryptpad_text_col;
+        border: 1px solid @alertify-input-bg;
+        width: 100%;
+        font-size: 100%;
+        padding: @alertify_padding-base;
+        &[readonly] {
+            background-color: @alertify-light-bg;
+            color: @cryptpad_text_col;
+            border-color: @alertify-input-fg;
+        }
+    }
 
-    button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
+    button:not(.pure-button):not(.md-button):not(.mdl-button) {
 
         background-color: @colortheme_alertify-cancel;
         box-sizing: border-box;
-        position: relative;
         outline: 0;
-        display: inline-block;
         align-items: center;
         padding: 0 6px;
-        margin: 6px 8px;
         line-height: 36px;
-        min-height: 36px;
         white-space: nowrap;
-        min-width: 88px;
         text-align: center;
         text-transform: uppercase;
         font-size: 14px;
@@ -41,12 +54,12 @@
             background-color: lighten(@alertify-fore, 35%);
         }
 
-        &.safe, &.danger {
+        &.safe, &.danger, &.btn-safe, &.btn-danger {
             color: @colortheme_old-base;
             white-space: normal;
             font-weight: bold;
         }
-        &.danger {
+        &.danger, &.btn-danger {
             background-color: @colortheme_alertify-red;
             border-color: @colortheme_alertify-red-border;
             color: @colortheme_alertify-red-color;
@@ -55,7 +68,7 @@
             }
         }
 
-        &.safe {
+        &.safe, &.btn-safe {
             background-color: @colortheme_alertify-green;
             border-color: @colortheme_alertify-green-border;
             color: @colortheme_alertify-green-color;
@@ -64,7 +77,7 @@
             }
         }
 
-        &.primary {
+        &.primary, &.btn-primary {
             background-color: @colortheme_alertify-primary;
             color: @colortheme_alertify-primary-text;
             border-color: @colortheme_alertify-primary-border;
@@ -74,7 +87,7 @@
             }
         }
 
-        &.cancel {
+        &.cancel, &.btn-cancel {
             border-color: @colortheme_alertify-cancel-border;
             color: @colortheme_alertify-cancel-border;
             &:hover, &:hover {

customize.dist/src/less2/include/sidebar-layout.less

@@ -1,5 +1,6 @@
 @import (reference) "/customize/src/less2/include/colortheme-all.less";
 @import (reference) "/customize/src/less2/include/leftside-menu.less";
+@import (reference) "/customize/src/less2/include/buttons.less";
 
 @sidebar_button-width: 400px;
 
@@ -98,6 +99,7 @@
             }
             [type="text"], [type="password"], button {
                 vertical-align: middle;
+                min-width: 40px;
                 height: 40px;
                 box-sizing: border-box;
             }
@@ -106,12 +108,12 @@
                 width: @sidebar_button-width;
                 input {
                     flex: 1;
-                    border-radius: 0.25em 0 0 0.25em;
+                    //border-radius: 0.25em 0 0 0.25em;
                     border: 1px solid #adadad;
                     border-right: 0px;
                 }
                 button {
-                    border-radius: 0 0.25em 0.25em 0;
+                    //border-radius: 0 0.25em 0.25em 0;
                     //border: 1px solid #adadad;
                     border-left: 0px;
                 }
@@ -119,6 +121,14 @@
             &>div {
                 margin: 10px 0;
             }
+            .buttons_main();
+            button.btn {
+                margin: 0 5px 0 0;
+            }
+            span.cp-password-container {
+                margin-bottom: 1px;
+            }
+/*
             button.btn {
                 @button-bg: @colortheme_sidebar-button-bg;
                 @button-red-bg: @colortheme_sidebar-button-red-bg;
@@ -149,6 +159,7 @@
                     }
                 }
             }
+*/
         }
     }
 }

www/profile/app-profile.less

@@ -66,8 +66,9 @@
             }
         }
         button {
+            min-width: 40px;
             height: 40px;
-            margin: 5px;
+            margin: 5px !important;
         }
     }
     .cp-app-profile-resizer {
@@ -110,7 +111,7 @@
             display: none;
         }
         & > button:empty {
-            margin-left: 25px;
+            margin-left: 25px !important;
         }
     }
 
@@ -136,9 +137,6 @@
         margin-bottom: 20px;
         float: right;
         margin-left: 5px;
-        &> span {
-            margin-left: 10px;
-        }
     }
     #cp-app-profile-description {
         position: relative;
@@ -176,13 +174,6 @@
                 line-height: inherit;
             }
         }
-        .cp-app-profile-description-edit {
-            & > button {
-                span {
-                    margin-left: 10px;
-                }
-            }
-        }
     }
     #cp-app-profile-create {
         height: 100%;