diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index d1cd0992..876c5b97 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -211,6 +211,10 @@ textarea {
background-color: $accent-fg-color;
}
+.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
+ @mixin mx_DialogButton_hover;
+}
+
.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
filter: brightness($focus-brightness);
}
@@ -277,6 +281,10 @@ textarea {
@mixin mx_DialogButton_small;
}
+.mx_textButton:hover {
+ @mixin mx_DialogButton_hover;
+}
+
.mx_button_row {
margin-top: 69px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index 3b9ab39d..f6341dd6 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -69,6 +69,10 @@ limitations under the License.
margin: auto;
}
+.mx_UserSettings_button:hover {
+ @mixin mx_DialogButton_hover;
+}
+
.mx_UserSettings_button.danger {
background-color: $warning-color;
}
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 aae572e8..84b8306a 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
@@ -85,6 +85,10 @@ limitations under the License.
margin-bottom: 24px;
}
+.mx_Login_submit:hover {
+ @mixin mx_DialogButton_hover;
+}
+
.mx_Login_submit:disabled {
opacity: 0.3;
}
@@ -131,8 +135,7 @@ limitations under the License.
}
.mx_Login_forgot {
- font-size: 13px;
- opacity: 0.8;
+ font-size: 15px;
}
.mx_Login_forgot:link {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
index 4b1abead..5888820e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
@@ -31,6 +31,10 @@ limitations under the License.
flex: 1;
}
+.mx_MemberDeviceInfo_textButton:hover {
+ @mixin mx_DialogButton_hover;
+}
+
.mx_MemberDeviceInfo_deviceId {
font-size: 13px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
index 5b78703a..8dbad92a 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -48,6 +48,10 @@ limitations under the License.
order: 2;
}
+.mx_RoomHeader_textButton:hover {
+ @mixin mx_DialogButton_hover;
+}
+
.mx_RoomHeader_textButton_danger {
background-color: $warning-color;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
index 52013a6b..4013af4c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
@@ -26,6 +26,12 @@ limitations under the License.
position: relative;
margin-right: 8px;
}
+
+.mx_RoomSettings_leaveButton:hover,
+.mx_RoomSettings_unbanButton:hover {
+ @mixin mx_DialogButton_hover;
+}
+
.mx_RoomSettings_integrationsButton_error {
position: relative;
cursor: not-allowed;
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index 6df64cb8..a8bb4d89 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -154,6 +154,9 @@ $progressbar-color: #000;
display: inline-block;
}
+@define-mixin mx_DialogButton_hover {
+}
+
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
font-size: 15px;
diff --git a/src/skins/vector/themes/status/css/_StatusLogin.scss b/src/skins/vector/themes/status/css/_StatusLogin.scss
index c9af7c8a..fcbc2e17 100644
--- a/src/skins/vector/themes/status/css/_StatusLogin.scss
+++ b/src/skins/vector/themes/status/css/_StatusLogin.scss
@@ -102,7 +102,7 @@ limitations under the License.
width: 74px;
height: 74px;
border-radius: 37px;
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
+ box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.2);
position: absolute;
top: -36px;
left: 50%;
@@ -134,6 +134,12 @@ limitations under the License.
font-weight: 300;
font-size: 15px;
margin-bottom: 14px;
+ transition: background-color .2s ease;
+ }
+
+ .mx_Login_field:focus {
+ border: 1px solid transparent;
+ background-color: $form-field-bg-hover-color;
}
.mx_Login_field::-webkit-input-placeholder {
@@ -190,8 +196,7 @@ limitations under the License.
.mx_Login_forgot {
display: block;
- font-size: 13px;
- opacity: 0.8;
+ font-size: 15px;
}
.mx_Login_forgot:link {
diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss
index e8bfae2f..fa2a64c7 100644
--- a/src/skins/vector/themes/status/css/_status.scss
+++ b/src/skins/vector/themes/status/css/_status.scss
@@ -37,6 +37,10 @@ a {
text-decoration: none;
}
+a:hover {
+ text-decoration: underline;
+}
+
h1,h2,h3,h4,h5 {
color: $header-color;
font-family: $header-font-family;
@@ -49,6 +53,7 @@ $form-bg-color: $callout-color;
$form-fg-color: #ffffff;
$form-field-bg-color: rgba(244, 242, 247, 0.12);
+$form-field-bg-hover-color: rgba(255, 255, 255, 0.2);
$form-field-fg-color: #ffffff;
// ***** End of Status theme specifics ******
@@ -63,6 +68,7 @@ $focus-bg-color: #dddddd;
// button UI (white-on-green in light skin)
$accent-fg-color: #ffffff;
$accent-color: #6CC1F6;
+$accent-hover-color: #84cfff;
$selection-fg-color: $primary-bg-color;
@@ -195,6 +201,11 @@ $progressbar-color: #000;
padding-left: 1.5em;
padding-right: 1.5em;
display: inline-block;
+ transition: background-color .2s ease;
+}
+
+@define-mixin mx_DialogButton_hover {
+ background-color: $accent-hover-color;
}
@define-mixin mx_DialogButton_small {