gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

switch to lozenges, and improve overlap behaviour

This commit is contained in:
Matthew Hodgson 2016-05-17 19:52:56 +01:00
parent 5feb31911a
commit 2b3606d44d
1 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View File

@ -40,7 +40,7 @@ limitations under the License.
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
padding-right: 19px; padding-right: 15px;
color: rgba(69, 69, 69, 0.8); color: rgba(69, 69, 69, 0.8);
} }
@ -70,12 +70,12 @@ limitations under the License.
right: 16px; right: 16px;
top: 50%; top: 50%;
margin-top: -8px; margin-top: -8px;
border-radius: 3px; border-radius: 16px;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
padding: 0px 2px 0px 2px; padding: 0px 4px 0px 4px;
} }
.mx_RoomTile_unreadNotify .mx_RoomTile_badge { .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@ -91,26 +91,22 @@ limitations under the License.
font-weight: bold; font-weight: bold;
} }
/* the inner highlight span has 4px of padding on it, so we shrink the _avatar by 4pm and grow the _name by 4pm to fit it in */
.mx_RoomTile_selected .mx_RoomTile_name {
padding-right: 19px;
}
.mx_RoomTile_selected .mx_RoomTile_avatar {
padding-right: 7px;
}
/* leave room for the badge, if present.
N.B. this has to come after the above _selected width tweaks */
.mx_RoomTile_unreadNotify .mx_RoomTile_name, .mx_RoomTile_unreadNotify .mx_RoomTile_name,
.mx_RoomTile_highlight .mx_RoomTile_name { .mx_RoomTile_highlight .mx_RoomTile_name {
padding-right: 36px; padding-right: 36px;
} }
.mx_RoomTile_selected .mx_RoomTile_name { .mx_RoomTile_selected .mx_RoomTile_name span {
padding-right: 23px;
}
/*
.mx_RoomTile_highlight .mx_RoomTile_name {
color: #ff0064 ! important;
}
*/
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar {
padding-right: 7px;
}
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name span {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 100%; width: 100%;
@ -121,13 +117,11 @@ limitations under the License.
background-color: rgba(118,207,166,0.2); background-color: rgba(118,207,166,0.2);
} }
/* /* stop the span from overlapping with the badge */
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name { .mx_RoomTile_unreadNotify.mx_RoomTile_selected .mx_RoomTile_name span,
background: url('img/selected.png'); .mx_RoomTile_highlight.mx_RoomTile_selected .mx_RoomTile_name span {
background-repeat: no-repeat; padding-right: 22px;
background-position: right center;
} }
*/
.mx_RoomTile_arrow { .mx_RoomTile_arrow {
position: absolute; position: absolute;