PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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