OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Update _MessageActionBar.scss 

Refine UI of message action bar to increase usability and focus on bar content.
pull/21833/head
Nique Woodhouse 2021-05-19 10:25:54 +01:00
parent 55eddae096
commit 8a3db3b40a
1 changed files with 15 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
res/css/views/messages/_MessageActionBar.scss
View File

@ -20,11 +20,12 @@ limitations under the License.
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 24px; height: 28px;
line-height: $font-24px; line-height: $font-24px;
border-radius: 4px; border-radius: 8px;
background: $message-action-bar-bg-color; background: $primary-bg-color;
top: -26px; border: 1px solid $input-border-color;
top: -28px;
right: 8px; right: 8px;
user-select: none; user-select: none;
// Ensure the action bar appears above over things, like the read marker. // Ensure the action bar appears above over things, like the read marker.
@ -51,31 +52,19 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
position: relative; position: relative;
border: 1px solid $message-action-bar-border-color; margin: 2px;
margin-left: -1px;
&:hover { &:hover {
border-color: $message-action-bar-hover-border-color; background: $roomlist-button-bg-color;
border-radius: 6px;
z-index: 1; z-index: 1;
} }
&:first-child {
border-radius: 3px 0 0 3px;
}
&:last-child {
border-radius: 0 3px 3px 0;
}
&:only-child {
border-radius: 3px;
}
} }
} }
.mx_MessageActionBar_maskButton { .mx_MessageActionBar_maskButton {
width: 27px; width: 24px;
height: 24px;
} }
.mx_MessageActionBar_maskButton::after { .mx_MessageActionBar_maskButton::after {
@ -88,7 +77,11 @@ limitations under the License.
mask-size: 18px; mask-size: 18px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $message-action-bar-fg-color; background-color: $secondary-fg-color;
}
.mx_MessageActionBar_maskButton:hover:after {
background-color: $primary-fg-color;
} }
.mx_MessageActionBar_reactButton::after { .mx_MessageActionBar_reactButton::after {