Merge pull request #2763 from jryans/dark-theme-auth-r2
Tweak auth components when dark theme is default
This commit is contained in:
commit
19edc5c5a4
2 changed files with 59 additions and 43 deletions
res
|
@ -22,44 +22,71 @@ 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_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_Field label {
|
||||
color: $authpage-primary-color;
|
||||
}
|
||||
|
||||
.mx_AuthBody input.error {
|
||||
color: $warning-color;
|
||||
.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;
|
||||
}
|
||||
|
||||
input.error {
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_Field input {
|
||||
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 {
|
||||
|
@ -68,11 +95,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;
|
||||
|
@ -91,13 +113,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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue