Browse Source

cosmetic fixes & hoverovers

pull/5578/head
Matthew Hodgson 5 years ago
parent
commit
1798bff8f5
  1. 8
      src/skins/vector/css/_common.scss
  2. 4
      src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
  3. 7
      src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
  4. 4
      src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
  5. 4
      src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
  6. 6
      src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
  7. 3
      src/skins/vector/css/themes/_base.scss
  8. 11
      src/skins/vector/themes/status/css/_StatusLogin.scss
  9. 11
      src/skins/vector/themes/status/css/_status.scss

8
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;
}

4
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;
}

7
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 {

4
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;
}

4
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;
}

6
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;

3
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;

11
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 {

11
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 {

Loading…
Cancel
Save