diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 63f483a5..dca14225 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -223,7 +223,6 @@ limitations under the License. height: 16px; flex-shrink: 1; min-width: 0px; - border-radius: 3px; } .mx_Login_phoneNumberField { diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index a32251f5..44a9e0a2 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -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 { diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index ceffa7a9..b3680f7e 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -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; +}