finishish login page
This commit is contained in:
parent
b053f08991
commit
73e7fe2764
|
@ -223,7 +223,6 @@ limitations under the License.
|
||||||
height: 16px;
|
height: 16px;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_phoneNumberField {
|
.mx_Login_phoneNumberField {
|
||||||
|
|
|
@ -54,6 +54,10 @@ limitations under the License.
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_StatusLogin_subtitle a {
|
||||||
|
color: $riot-link-color;
|
||||||
|
}
|
||||||
|
|
||||||
.mx_StatusLogin_footer {
|
.mx_StatusLogin_footer {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
@ -73,22 +77,22 @@ limitations under the License.
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// overrides of .mx_Login
|
// overrides of .mx_Login
|
||||||
|
|
||||||
.mx_Login_box {
|
.mx_Login_box {
|
||||||
width: 350px;
|
width: 330px;
|
||||||
min-height: initial;
|
min-height: initial;
|
||||||
padding-top: 20px;
|
padding-top: 40px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 20px;
|
||||||
padding-left: 33px;
|
padding-left: 10px;
|
||||||
padding-right: 33px;
|
padding-right: 10px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: $form-bg-color;
|
background-color: $form-bg-color;
|
||||||
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
|
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_logo {
|
.mx_Login_logo {
|
||||||
|
@ -123,15 +127,31 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_field {
|
.mx_Login_field {
|
||||||
width: 280px;
|
width: 260px;
|
||||||
border-radius: 3px;
|
height: 27px;
|
||||||
border: 1px solid $strong-input-border-color;
|
padding: 9px 20px 9px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: left;
|
||||||
|
border: none;
|
||||||
|
background-color: $form-field-bg-color;
|
||||||
|
color: $form-field-fg-color;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-size: 13px;
|
font-size: 15px;
|
||||||
padding: 9px;
|
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_Login_field::-webkit-input-placeholder {
|
||||||
|
font-family: $font-family;
|
||||||
|
color: $form-field-fg-color;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_Login_field::-moz-placeholder {
|
||||||
|
font-family: $font-family;
|
||||||
|
color: $form-field-fg-color;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
.mx_Login_field_disabled {
|
.mx_Login_field_disabled {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
@ -145,15 +165,10 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_submit {
|
.mx_Login_submit {
|
||||||
margin-top: 35px;
|
@mixin mx_DialogButton;
|
||||||
margin-bottom: 24px;
|
width: 200px;
|
||||||
width: 100%;
|
margin-top: 13px;
|
||||||
border-radius: 40px;
|
margin-bottom: 18px;
|
||||||
height: 40px;
|
|
||||||
border: 0px;
|
|
||||||
background-color: $accent-color;
|
|
||||||
font-size: 15px;
|
|
||||||
color: $accent-fg-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_submit:disabled {
|
.mx_Login_submit:disabled {
|
||||||
|
@ -174,18 +189,19 @@ limitations under the License.
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 13px;
|
font-size: 15px;
|
||||||
opacity: 0.8;
|
opacity: 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_create:link {
|
.mx_Login_create:link {
|
||||||
color: $primary-fg-color;
|
color: $form-fg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_links {
|
.mx_Login_links {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 15px;
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
@ -202,12 +218,13 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_forgot {
|
.mx_Login_forgot {
|
||||||
|
display: block;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_forgot:link {
|
.mx_Login_forgot:link {
|
||||||
color: $primary-fg-color;
|
color: $form-fg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_loader {
|
.mx_Login_loader {
|
||||||
|
@ -228,13 +245,12 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_Login_error {
|
.mx_Login_error {
|
||||||
color: $warning-color;
|
color: $warning-color;
|
||||||
font-weight: bold;
|
font-size: 18px;
|
||||||
|
width: 250px;
|
||||||
|
margin: auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
/*
|
|
||||||
height: 24px;
|
|
||||||
*/
|
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_type_container {
|
.mx_Login_type_container {
|
||||||
|
@ -286,10 +302,8 @@ limitations under the License.
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_username {
|
.mx_Login_username {
|
||||||
height: 16px;
|
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Login_phoneNumberField {
|
.mx_Login_phoneNumberField {
|
||||||
|
|
|
@ -31,6 +31,12 @@ $header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
|
||||||
|
|
||||||
$footer-color: #8D99A4;
|
$footer-color: #8D99A4;
|
||||||
|
|
||||||
|
$riot-link-color: #A26988;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
h1,h2,h3,h4,h5 {
|
h1,h2,h3,h4,h5 {
|
||||||
color: $header-color;
|
color: $header-color;
|
||||||
font-family: $header-font-family;
|
font-family: $header-font-family;
|
||||||
|
@ -42,8 +48,12 @@ $callout-color: #4360DF; // or #4957b8 from status.im homepage
|
||||||
$form-bg-color: $callout-color;
|
$form-bg-color: $callout-color;
|
||||||
$form-fg-color: #ffffff;
|
$form-fg-color: #ffffff;
|
||||||
|
|
||||||
|
$form-field-bg-color: rgba(244, 242, 247, 0.12);
|
||||||
|
$form-field-fg-color: #ffffff;
|
||||||
|
|
||||||
// ***** End of Status theme specifics ******
|
// ***** End of Status theme specifics ******
|
||||||
|
|
||||||
|
|
||||||
// used for dialog box text
|
// used for dialog box text
|
||||||
$light-fg-color: #747474;
|
$light-fg-color: #747474;
|
||||||
|
|
||||||
|
@ -52,14 +62,14 @@ $focus-bg-color: #dddddd;
|
||||||
|
|
||||||
// button UI (white-on-green in light skin)
|
// button UI (white-on-green in light skin)
|
||||||
$accent-fg-color: #ffffff;
|
$accent-fg-color: #ffffff;
|
||||||
$accent-color: #76CFA6;
|
$accent-color: #6CC1F6;
|
||||||
|
|
||||||
$selection-fg-color: $primary-bg-color;
|
$selection-fg-color: $primary-bg-color;
|
||||||
|
|
||||||
$focus-brightness: 125%;
|
$focus-brightness: 125%;
|
||||||
|
|
||||||
// red warning colour
|
// red warning colour
|
||||||
$warning-color: #ff0064;
|
$warning-color: #F69E98;
|
||||||
$mention-user-pill-bg-color: #ff0064;
|
$mention-user-pill-bg-color: #ff0064;
|
||||||
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
|
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
@ -162,3 +172,15 @@ $lightbox-border-color: #ffffff;
|
||||||
|
|
||||||
// unused?
|
// unused?
|
||||||
$progressbar-color: #000;
|
$progressbar-color: #000;
|
||||||
|
|
||||||
|
@define-mixin mx_DialogButton {
|
||||||
|
border-radius: 8px;
|
||||||
|
height: 45px;
|
||||||
|
border: 1px solid rgba(199, 206, 209, 0.12);
|
||||||
|
background-color: $accent-color;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: $header-font-family;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: $accent-fg-color;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue