From 9d36ef0808060631dbc5d8ac2c5b4a05fca21222 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 6 Mar 2019 16:28:09 +0000 Subject: [PATCH 1/3] Fix background color of phone field label on dark theme This adds extra styles to reset the field label background color on registration even if dark theme is used. --- res/css/views/auth/_AuthBody.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index e7a6e04e8b..709c4224f4 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -52,10 +52,15 @@ limitations under the License. color: $authpage-primary-color; } -.mx_AuthBody .mx_Field input:focus + label, -.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label, -.mx_AuthBody .mx_Field select + label /* Always show a select's label on top to not collide with the value */ { - background-color: $authpage-body-bg-color; +.mx_AuthBody { + .mx_Field input:focus + label, + .mx_Field input:not(:placeholder-shown) + label, + .mx_Field textarea:focus + label, + .mx_Field textarea:not(:placeholder-shown) + label, + .mx_Field select + label /* Always show a select's label on top to not collide with the value */, + .mx_Field_labelAlwaysTopLeft label { + background-color: $authpage-body-bg-color; + } } .mx_AuthBody input.error { From 8beab589187a18f8f1446b6d52c91b050374d7cf Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 6 Mar 2019 16:33:15 +0000 Subject: [PATCH 2/3] Use more nesting for auth body style overrides No styles are changed here. This just groups them under one parent block to avoid repeating `.mx_AuthBody`. --- res/css/views/auth/_AuthBody.scss | 78 +++++++++++++++---------------- 1 file changed, 38 insertions(+), 40 deletions(-) diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 709c4224f4..62575f4e7b 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -22,37 +22,42 @@ limitations under the License. box-sizing: border-box; font-size: 12px; color: $authpage-secondary-color; -} -.mx_AuthBody h2 { - font-size: 24px; - font-weight: 600; - margin-top: 8px; - color: $authpage-primary-color; -} + h2 { + font-size: 24px; + font-weight: 600; + margin-top: 8px; + color: $authpage-primary-color; + } -.mx_AuthBody h3 { - font-size: 14px; - font-weight: 600; - color: $authpage-primary-color; -} + h3 { + font-size: 14px; + font-weight: 600; + color: $authpage-primary-color; + } -.mx_AuthBody input[type=text], -.mx_AuthBody input[type=password] { - color: $authpage-primary-color; -} + a:link, + a:hover, + a:visited { + color: $accent-color; + text-decoration: none; + } -.mx_AuthBody .mx_Field input, -.mx_AuthBody .mx_Field select { - color: $authpage-primary-color; - background-color: $authpage-body-bg-color; -} + input[type=text], + input[type=password] { + color: $authpage-primary-color; + } -.mx_AuthBody .mx_Field label { - color: $authpage-primary-color; -} + .mx_Field input, + .mx_Field select { + color: $authpage-primary-color; + background-color: $authpage-body-bg-color; + } + + .mx_Field label { + color: $authpage-primary-color; + } -.mx_AuthBody { .mx_Field input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, @@ -61,10 +66,15 @@ limitations under the License. .mx_Field_labelAlwaysTopLeft label { background-color: $authpage-body-bg-color; } -} -.mx_AuthBody input.error { - color: $warning-color; + input.error { + color: $warning-color; + } + + .mx_Field input { + width: 100%; + box-sizing: border-box; + } } .mx_AuthBody_editServerDetails { @@ -73,11 +83,6 @@ limitations under the License. font-weight: normal; } -.mx_AuthBody .mx_Field input { - width: 100%; - box-sizing: border-box; -} - .mx_AuthBody_fieldRow { display: flex; margin-bottom: 10px; @@ -96,13 +101,6 @@ limitations under the License. margin-right: 0; } -.mx_AuthBody a:link, -.mx_AuthBody a:hover, -.mx_AuthBody a:visited { - color: $accent-color; - text-decoration: none; -} - .mx_AuthBody_changeFlow { display: block; text-align: center; From 6441b2ed9870995d53dbdad96f18fb9971cb75a6 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 6 Mar 2019 16:43:04 +0000 Subject: [PATCH 3/3] Ensure country dropdown uses light styling on auth If the dark theme is activated, the country dropdown defaults to those colors where it doesn't fit in with the always-light auth flow. This restyles its colors to be light. --- res/css/views/auth/_AuthBody.scss | 12 ++++++++++++ res/themes/light/css/_light.scss | 1 + 2 files changed, 13 insertions(+) diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 62575f4e7b..c074a656db 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -75,6 +75,18 @@ limitations under the License. width: 100%; box-sizing: border-box; } + + .mx_Dropdown_arrow { + background: $authpage-primary-color; + } + + .mx_Dropdown_menu { + background-color: $authpage-body-bg-color; + + .mx_Dropdown_option_highlight { + background-color: $authpage-focus-bg-color; + } + } } .mx_AuthBody_editServerDetails { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 76dc49a838..4d8e4fa40e 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -246,6 +246,7 @@ $memberstatus-placeholder-color: $roomtile-name-color; $authpage-bg-color: #2e3649; $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); $authpage-body-bg-color: #ffffff; +$authpage-focus-bg-color: #dddddd; $authpage-lang-color: #4e5054; $authpage-primary-color: #232f32; $authpage-secondary-color: #61708b;