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

Fix top right header button layout and hover consistency 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-07-16 14:38:46 +01:00
parent cb4f4c96b4
commit a2b5e5a6a1
3 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/structures/_HeaderButtons.scss
View File

@ -22,7 +22,7 @@ limitations under the License.
content: ""; content: "";
background-color: $header-divider-color; background-color: $header-divider-color;
opacity: 0.5; opacity: 0.5;
margin: 0 15px; margin: 6px 8px;
border-radius: 1px; border-radius: 1px;
width: 1px; width: 1px;
} }

8
res/css/structures/_RightPanel.scss
View File

@ -61,10 +61,10 @@ limitations under the License.
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 6px; // center with parent of 32px top: 4px; // center with parent of 32px
left: 6px; // center with parent of 32px left: 4px; // center with parent of 32px
height: 20px; height: 24px;
width: 20px; width: 24px;
background-color: $rightpanel-button-color; background-color: $rightpanel-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;

23
res/css/views/rooms/_RoomHeader.scss
View File

@ -75,7 +75,6 @@ limitations under the License.
.mx_RoomHeader_buttons { .mx_RoomHeader_buttons {
display: flex; display: flex;
background-color: $primary-bg-color; background-color: $primary-bg-color;
padding-right: 5px;
} }
.mx_RoomHeader_info { .mx_RoomHeader_info {
@ -209,20 +208,32 @@ limitations under the License.
.mx_RoomHeader_button { .mx_RoomHeader_button {
position: relative; position: relative;
margin-left: 10px; margin-left: 1px;
margin-right: 1px;
cursor: pointer; cursor: pointer;
height: 20px; height: 32px;
width: 20px; width: 32px;
border-radius: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
height: 20px; top: 4px; // center with parent of 32px
width: 20px; left: 4px; // center with parent of 32px
height: 24px;
width: 24px;
background-color: $roomheader-button-color; background-color: $roomheader-button-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
} }
.mx_RoomHeader_settingsButton::before { .mx_RoomHeader_settingsButton::before {