PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

change look of right panel header buttons

Browse source
This commit is contained in:
Bruno Windels 2020-07-14 21:09:18 +02:00
parent 2da7d17a5d
commit 936f24eb15
1 changed files with 23 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
res/css/structures/_RightPanel.scss
View file

@ -51,20 +51,18 @@ limitations under the License.
.mx_RightPanel_headerButton { .mx_RightPanel_headerButton {
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
vertical-align: top; margin-left: 1px;
margin-left: 5px; margin-right: 1px;
margin-right: 5px; height: 32px;
text-align: center; width: 32px;
border-bottom: 2px solid transparent;
height: 20px;
width: 20px;
position: relative; position: relative;
border-radius: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 6px; // center with parent of 32px
left: 0; left: 6px; // center with parent of 32px
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: $rightpanel-button-color; background-color: $rightpanel-button-color;
@ -98,14 +96,22 @@ limitations under the License.
mask-position: center; mask-position: center;
} }
.mx_RightPanel_headerButton_highlight::after { .mx_RightPanel_headerButton_highlight {
content: ''; background: rgba($accent-color, 0.25);
position: absolute; // make the icon the accent color too
bottom: -6px; &::before {
left: 0; background-color: $accent-color;
right: 0; }
height: 2px; }
background-color: $button-bg-color;
.mx_RightPanel_headerButton:not(.mx_RightPanel_headerButton_highlight) {
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
} }
.mx_RightPanel_headerButton_badge { .mx_RightPanel_headerButton_badge {