Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-28 19:49:20 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revamp login screens by moving login icons to the left,

Browse source 
due to issues with browser plugins like LastPass which place buttons on the right.
And added a TOTP icon
This commit is contained in:
djmaze 2021-11-16 12:35:11 +01:00
parent c46d4b8c02
commit 3bad2d5dbd
17 changed files with 118 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dev/Styles/@Admin.less
View file

@ -32,6 +32,4 @@
@import "Admin/Plugin.less";
@import "Admin/About.less";
@import "Animations.less";
@import "_End.less";

1
dev/Styles/@Main.less
View file

@ -53,6 +53,5 @@
@import "User/SquireUI.less";
@import "User/Animations.less";
@import "Animations.less";
@import "_End.less";

2
dev/Styles/Admin/Layout.less
View file

@ -15,6 +15,7 @@
flex-shrink: 0;
overflow: auto;
padding-top: 50px + @rlLowMargin + 10px;
transition: width 0.3s ease-out;
width: @rlLeftWidth;
nav {
@ -42,6 +43,7 @@
#rl-right {
flex-grow: 1;
transition: left 0.3s ease-out, right 0.3s ease-out;
z-index: 1;
}

36
dev/Styles/Animations.less
View file

@ -1,36 +0,0 @@
@keyframes login-form-shake {
0% {transform: translateX(0);}
12.5% {transform: translateX(-6px)}
37.5% {transform: translateX(5px)}
62.5% {transform: translateX(-3px)}
87.5% {transform: translateX(2px)}
100% {transform: translateX(0)}
}
#rl-left {
transition: width 0.3s ease-out;
}
#rl-right {
transition: left 0.3s ease-out, right 0.3s ease-out;
}
html.rl-started-trigger .LoginView {
/*transform: scale(1.1);*/
transform: translateY(-20px);
opacity: 0.5;
}
.LoginView .errorAnimated {
animation: login-form-shake 400ms ease-in-out;
}
.LoginView .errorAnimated .buttonLogin {
color: #b94a48;
font-weight: bold;
}
.LoginView {
transition: all 0.3s ease-out;
}

4
dev/Styles/Components.less
View file

@ -50,10 +50,6 @@
outline: 1px dotted;
}
.e-checkbox-icon {
padding: 1px 0 0 1px;
}
&.disabled {
cursor: not-allowed;
opacity: 0.5;

134
dev/Styles/Login.less
View file

@ -6,6 +6,7 @@
width: 100%;
min-width: 250px;
max-width: 600px;
transition: all 0.3s ease-out;
z-index: 5;
}
@ -15,8 +16,6 @@
.LoginView {
position: relative;
.descWrapper {
color: var(--loading-color, #000);
font-size: 30px;
@ -25,10 +24,6 @@
text-shadow: var(--loading-text-shadow);
}
.controls, .control-group {
margin-bottom: 25px;
}
form {
background-color: var(--login-bg-color, rgba(0, 0, 0, .5));
border: var(--login-border, 1px solid rgba(255, 255, 255, .2));
@ -43,16 +38,9 @@
color: var(--login-color, @glass-m-color);
}
.controls.error {
.input-append .add-on,
.input-append .add-on * {
color: @glass-error-color;
}
input {
color: @glass-error-color;
border-color: @glass-error-color;
}
.controls.error * {
color: @glass-error-color;
border-color: @glass-error-color;
}
&.submitting > * {
@ -78,61 +66,64 @@
}
}
.controls {
.input-block-level {
font-size: 18px;
height: 40px;
padding-left: 12px;
}
.inputIcon {
padding-right: 35px;
}
.controls, .control-group {
margin-bottom: 25px;
position: relative;
}
input, .btn {
background: none !important;
border: 1px solid @glass-m-color;
input {
font-size: 18px;
height: 40px;
padding-right: 30px;
&:placeholder {
color: @glass-color;
}
input {
&:placeholder {
color: @glass-color;
}
&:focus, &:hover {
border-color: @glass-color;
}
}
.btn {
text-transform: uppercase;
font-size: 13px;
&:hover, &:active {
border-color: @glass-color;
}
&:focus, &:hover {
border-color: @glass-color;
}
}
.signMeLabel .e-checkbox {
margin-top: 5px;
input, .btn {
background: none !important;
border: 1px solid @glass-m-color;
color: @glass-color;
}
.input-append .add-on {
margin-left: -1.5em;
.fontastic + input {
padding-left: 30px;
}
.controls > .fontastic:first-child {
position: absolute;
font-size: 17px;
line-height: 29px;
right: 6px;
top: 6px;
z-index: 6;
line-height: 38px;
left: 6px;
}
.input-append .add-on * {
input + button {
border: none;
background: none;
cursor: pointer;
display: inline-block;
font-size: 17px;
line-height: 29px;
line-height: 38px;
margin: 0;
padding: 0;
position: absolute;
right: 6px;
top: 0;
}
.btn {
text-transform: uppercase;
font-size: 13px;
&:hover, &:active {
border-color: @glass-color;
}
}
.buttonLogin {
@ -162,6 +153,15 @@
padding: 5px;
text-decoration: none;
}
.errorAnimated {
animation: login-form-shake 400ms ease-in-out;
}
.errorAnimated .buttonLogin {
color: #b94a48;
font-weight: bold;
}
}
@media screen and (max-width: 480px) {
@ -176,11 +176,17 @@
to {transform: rotate(1turn);}
}
.btn-submit-icon-wrp {
border: none;
background: none;
display: inline-block;
margin: 0;
padding: 0;
cursor: pointer;
@keyframes login-form-shake {
0% {transform: translateX(0);}
12.5% {transform: translateX(-6px)}
37.5% {transform: translateX(5px)}
62.5% {transform: translateX(-3px)}
87.5% {transform: translateX(2px)}
100% {transform: translateX(0)}
}
html.rl-started-trigger .LoginView {
/*transform: scale(1.1);*/
transform: translateY(-20px);
opacity: 0.5;
}