web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Alertify buttons and inputs added to sidebar layout

Browse Source
This commit is contained in:
yflory 2019-12-16 12:51:12 +01:00
parent fb8be19657
commit 9e08a97d72
4 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
customize.dist/src/less2/include/alertify.less
View File

@ -219,21 +219,6 @@
::-ms-input-placeholder { /* Microsoft Edge */ ::-ms-input-placeholder { /* Microsoft Edge */
color: @cryptpad_color_grey; 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 { span.cp-password-container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -262,6 +247,17 @@
} }
.buttons_main(); .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 { nav {
padding: @alertify_padding-base; padding: @alertify_padding-base;

35
customize.dist/src/less2/include/buttons.less
View File

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

15
customize.dist/src/less2/include/sidebar-layout.less
View File

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

15
www/profile/app-profile.less
View File

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