diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss index 7cdc6939..a32251f5 100644 --- a/src/skins/vector/themes/status/css/_StatusLogin.scss +++ b/src/skins/vector/themes/status/css/_StatusLogin.scss @@ -18,304 +18,337 @@ limitations under the License. // Ideally this would be all Status prefixes for a Status specific version of the component // but given we're not doing Status as a dedicated 'skin' yet... -.mx_Login { - flex-direction: column; +.mx_StatusLogin { + + width: 100%; + height: 100%; + + display: flex; align-items: center; justify-content: center; -} -.mx_Login_box { - width: 350px; - min-height: initial; - padding-top: 20px; - padding-bottom: 10px; - padding-left: 33px; - padding-right: 33px; - border-radius: 8px; - margin: initial; - background-color: $form-bg-color; - box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); - position: relative; -} + overflow: auto; -.mx_Login_logo { - background-color: #fff; - width: 74px; - height: 74px; - border-radius: 37px; - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); - position: absolute; - top: -36px; - left: 50%; - margin-left: -36px; -} + .mx_StatusLogin_brand { + position: absolute; + top: 30px; + left: 30px; + } -.mx_Login_logo img { - width: 36px; - height: 36px; - padding: 19px; -} + .mx_StatusLogin_content { + margin: auto; + } -.mx_Login_box h2 { - text-align: center; - color: $form-fg-color; - font-size: 25px; -} + .mx_StatusLogin_header { + text-align: center; + margin-top: 70px; + margin-bottom: 50px; + } -.mx_LoginPageHeader_brand { - position: absolute; - top: 30px; - left: 30px; -} + .mx_StatusLogin_header h1 { + font-size: 29px; + margin-bottom: 3px; + } -.mx_LoginPageHeader_title { - text-align: center; - margin-top: 90px; - margin-bottom: 50px; -} + .mx_StatusLogin_subtitle { + font-size: 18px; + } -.mx_LoginPageHeader_title h1 { - font-size: 29px; - margin-bottom: 3px; -} + .mx_StatusLogin_footer { + margin-top: 30px; + margin-bottom: 30px; + text-align: center; + font-size: 16px; + color: $footer-color; + } -.mx_LoginPageHeader_subtitle { - font-size: 18px; -} + .mx_StatusLogin_footer p { + margin-top: 0.5em; + margin-bottom: 0.5em; + } -.mx_Login_support { - text-align: center; - font-size: 13px; - margin-top: 0px; - opacity: 0.7; -} + .mx_StatusLogin_footer_cta { + color: $callout-color; + font-family: $header-font-family; + letter-spacing: 1px; + font-size: 13px; + text-transform: uppercase; + text-decoration: none; + } -.mx_Login_field { - width: 280px; - border-radius: 3px; - border: 1px solid $strong-input-border-color; - font-weight: 300; - font-size: 13px; - padding: 9px; - margin-bottom: 14px; -} + // overrides of .mx_Login -.mx_Login_field_disabled { - opacity: 0.3; -} + .mx_Login_box { + width: 350px; + min-height: initial; + padding-top: 20px; + padding-bottom: 10px; + padding-left: 33px; + padding-right: 33px; + border-radius: 8px; + background-color: $form-bg-color; + box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16); + position: relative; + } -.mx_Login_fieldLabel { - margin-top: -10px; - margin-left: 8px; - margin-bottom: 14px; - font-size: 13px; - opacity: 0.8; -} + .mx_Login_logo { + background-color: #fff; + width: 74px; + height: 74px; + border-radius: 37px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); + position: absolute; + top: -36px; + left: 50%; + margin-left: -36px; + } -.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; -} + .mx_Login_logo img { + width: 36px; + height: 36px; + padding: 19px; + } -.mx_Login_submit:disabled { - opacity: 0.3; -} + .mx_Login_box h2 { + text-align: center; + color: $form-fg-color; + font-size: 25px; + } -.mx_Login_label { - font-size: 13px; - opacity: 0.8; -} + .mx_Login_support { + text-align: center; + font-size: 13px; + margin-top: 0px; + opacity: 0.7; + } -.mx_Login_checkbox, -.mx_Login_radio { - margin-right: 10px; -} + .mx_Login_field { + width: 280px; + border-radius: 3px; + border: 1px solid $strong-input-border-color; + font-weight: 300; + font-size: 13px; + padding: 9px; + margin-bottom: 14px; + } -.mx_Login_create { - display: block; - text-align: center; - width: 100%; - font-size: 13px; - opacity: 0.8; -} + .mx_Login_field_disabled { + opacity: 0.3; + } -.mx_Login_create:link { - color: $primary-fg-color; -} + .mx_Login_fieldLabel { + margin-top: -10px; + margin-left: 8px; + margin-bottom: 14px; + font-size: 13px; + opacity: 0.8; + } -.mx_Login_links { - display: block; - text-align: center; - margin-top: 15px; - width: 100%; - font-size: 13px; - opacity: 0.8; -} + .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; + } -.mx_Login_links a:link { - color: $primary-fg-color; -} + .mx_Login_submit:disabled { + opacity: 0.3; + } -.mx_Login_prompt { - padding-top: 15px; - padding-bottom: 15px; - font-size: 13px; -} + .mx_Login_label { + font-size: 13px; + opacity: 0.8; + } -.mx_Login_forgot { - font-size: 13px; - opacity: 0.8; -} + .mx_Login_checkbox, + .mx_Login_radio { + margin-right: 10px; + } -.mx_Login_forgot:link { - color: $primary-fg-color; -} + .mx_Login_create { + display: block; + text-align: center; + width: 100%; + font-size: 13px; + opacity: 0.8; + } -.mx_Login_loader { - display: inline; - position: relative; - top: 2px; - left: 8px; -} + .mx_Login_create:link { + color: $primary-fg-color; + } -.mx_Login_loader .mx_Spinner { - display: inline; -} + .mx_Login_links { + display: block; + text-align: center; + margin-top: 15px; + width: 100%; + font-size: 13px; + opacity: 0.8; + } -.mx_Login_loader .mx_Spinner img { - width: 16px; - height: 16px; -} + .mx_Login_links a:link { + color: $primary-fg-color; + } -.mx_Login_error { - color: $warning-color; - font-weight: bold; - text-align: center; -/* - height: 24px; -*/ - margin-top: 12px; - margin-bottom: 12px; -} + .mx_Login_prompt { + padding-top: 15px; + padding-bottom: 15px; + font-size: 13px; + } -.mx_Login_type_container { - display: flex; - margin-bottom: 14px; -} + .mx_Login_forgot { + font-size: 13px; + opacity: 0.8; + } -.mx_Login_type_label { - flex-grow: 1; - line-height: 35px; -} + .mx_Login_forgot:link { + color: $primary-fg-color; + } -.mx_Login_type_dropdown { - display: inline-block; - min-width: 170px; - align-self: flex-end; - flex: 1 1 auto; -} + .mx_Login_loader { + display: inline; + position: relative; + top: 2px; + left: 8px; + } -.mx_Login_field_group { - display: flex; -} + .mx_Login_loader .mx_Spinner { + display: inline; + } -.mx_Login_field_prefix { - height: 34px; - padding: 0px 5px; - line-height: 33px; + .mx_Login_loader .mx_Spinner img { + width: 16px; + height: 16px; + } - background-color: #eee; - border: 1px solid #c7c7c7; - border-right: 0px; - border-radius: 3px 0px 0px 3px; - - text-align: center; -} - -.mx_Login_field_suffix { - height: 34px; - padding: 0px 5px; - line-height: 33px; - - background-color: #eee; - border: 1px solid #c7c7c7; - border-left: 0px; - border-radius: 0px 3px 3px 0px; - - text-align: center; - flex-grow: 1; -} - -.mx_Login_username { - height: 16px; - flex-shrink: 1; - min-width: 0px; - border-radius: 3px; -} - -.mx_Login_phoneNumberField { - height: 16px; -} - -.mx_Login_field_has_prefix { - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; -} - -.mx_Login_field_has_suffix { - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; -} - -.mx_Login_phoneSection { - display:flex; -} - -.mx_Login_phoneCountry { - margin-bottom: 14px; - width: 150px; - - /* To override mx_Login_field_prefix */ - text-align: left; - padding: 0px; - background-color: $primary-bg-color; -} - -.mx_Login_field_prefix .mx_Dropdown_input { - /* To use prefix border instead of dropdown border */ - border: 0; -} - -.mx_Login_phoneCountry .mx_Dropdown_option { + .mx_Login_error { + color: $warning-color; + font-weight: bold; + text-align: center; /* - To match height of mx_Login_field - 33px + 2px border from mx_Dropdown_option = 35px + height: 24px; */ - height: 33px; - line-height: 33px; -} + margin-top: 12px; + margin-bottom: 12px; + } -.mx_Login_phoneCountry .mx_Dropdown_option img { - margin: 3px; - vertical-align: top; -} + .mx_Login_type_container { + display: flex; + margin-bottom: 14px; + } -.mx_Login_language { - margin-left: auto; - margin-right: auto; - min-width: 60%; -} + .mx_Login_type_label { + flex-grow: 1; + line-height: 35px; + } -.mx_Login_language_div { - display: flex; - margin-top: 12px; - margin-bottom: 12px; -} + .mx_Login_type_dropdown { + display: inline-block; + min-width: 170px; + align-self: flex-end; + flex: 1 1 auto; + } + .mx_Login_field_group { + display: flex; + } + + .mx_Login_field_prefix { + height: 34px; + padding: 0px 5px; + line-height: 33px; + + background-color: #eee; + border: 1px solid #c7c7c7; + border-right: 0px; + border-radius: 3px 0px 0px 3px; + + text-align: center; + } + + .mx_Login_field_suffix { + height: 34px; + padding: 0px 5px; + line-height: 33px; + + background-color: #eee; + border: 1px solid #c7c7c7; + border-left: 0px; + border-radius: 0px 3px 3px 0px; + + text-align: center; + flex-grow: 1; + } + + .mx_Login_username { + height: 16px; + flex-shrink: 1; + min-width: 0px; + border-radius: 3px; + } + + .mx_Login_phoneNumberField { + height: 16px; + } + + .mx_Login_field_has_prefix { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + } + + .mx_Login_field_has_suffix { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + } + + .mx_Login_phoneSection { + display:flex; + } + + .mx_Login_phoneCountry { + margin-bottom: 14px; + width: 150px; + + /* To override mx_Login_field_prefix */ + text-align: left; + padding: 0px; + background-color: $primary-bg-color; + } + + .mx_Login_field_prefix .mx_Dropdown_input { + /* To use prefix border instead of dropdown border */ + border: 0; + } + + .mx_Login_phoneCountry .mx_Dropdown_option { + /* + To match height of mx_Login_field + 33px + 2px border from mx_Dropdown_option = 35px + */ + height: 33px; + line-height: 33px; + } + + .mx_Login_phoneCountry .mx_Dropdown_option img { + margin: 3px; + vertical-align: top; + } + + .mx_Login_language { + margin-left: auto; + margin-right: auto; + min-width: 60%; + } + + .mx_Login_language_div { + display: flex; + margin-top: 12px; + margin-bottom: 12px; + } + +} diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss index eb8f1d94..ceffa7a9 100644 --- a/src/skins/vector/themes/status/css/_status.scss +++ b/src/skins/vector/themes/status/css/_status.scss @@ -29,13 +29,17 @@ $primary-bg-color: #EEF2F5; $header-color: #49555F; $header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; +$footer-color: #8D99A4; + h1,h2,h3,h4,h5 { color: $header-color; font-family: $header-font-family; font-weight: 400 ! important; } -$form-bg-color: #4360DF; +$callout-color: #4360DF; // or #4957b8 from status.im homepage + +$form-bg-color: $callout-color; $form-fg-color: #ffffff; // ***** End of Status theme specifics ******