mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 10:15:43 +03:00
Code Issues Projects Releases Packages Wiki Activity

finishish login page

Browse source
This commit is contained in:
Matthew Hodgson 2017-10-25 01:30:39 +01:00
parent b053f08991
commit 73e7fe2764
3 changed files with 70 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
View file

@ -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 {

78
src/skins/vector/themes/status/css/_StatusLogin.scss
View file

@ -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 {

26
src/skins/vector/themes/status/css/_status.scss
View file

@ -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;
}