diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index d1cd099224..876c5b97e3 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 3b9ab39df5..f6341dd6cd 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 aae572e8d7..84b8306a74 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 4b1abead9e..5888820e0d 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 5b78703aa6..8dbad92a44 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 52013a6bf4..4013af4c7c 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 6df64cb8e7..a8bb4d89e1 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 c9af7c8ae8..fcbc2e17b9 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 e8bfae2f47..fa2a64c7da 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 {