mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 20:38:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

Design update to match the new Zeplin designs

Browse source
This commit is contained in:
wmwragg 2016-08-03 11:21:00 +01:00
parent ee8572559f
commit 8e0f7f18a0
3 changed files with 17 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View file

@ -17,10 +17,9 @@ limitations under the License.
.mx_RoomTile { .mx_RoomTile {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
/* This fixes wrapping of long room names, but breaks drag & drop previews */
/* display: table-row; */
font-size: 13px; font-size: 13px;
display: block; display: block;
height: 34px;
} }
.mx_RoomTile .mx_RoomTile_mute { .mx_RoomTile .mx_RoomTile_mute {
@ -29,14 +28,14 @@ limitations under the License.
.mx_RoomTile_nameContainer { .mx_RoomTile_nameContainer {
display: inline-block; display: inline-block;
width: 170px; width: 180px;
height: 24px; height: 24px;
} }
.mx_RoomTile_avatar { .mx_RoomTile_avatar {
display: inline-block; display: inline-block;
padding-top: 6px; padding-top: 5px;
padding-bottom: 6px; padding-bottom: 5px;
padding-left: 18px; padding-left: 18px;
padding-right: 6px; padding-right: 6px;
width: 24px; width: 24px;
@ -47,7 +46,7 @@ limitations under the License.
.mx_RoomTile_name { .mx_RoomTile_name {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 157px; width: 165px;
vertical-align: middle; vertical-align: middle;
padding-left: 6px; padding-left: 6px;
padding-right: 6px; padding-right: 6px;
@ -69,10 +68,6 @@ limitations under the License.
*/ */
} }
.collapsed .mx_RoomTile {
height: 36px;
}
.collapsed .mx_RoomTile_nameContainer { .collapsed .mx_RoomTile_nameContainer {
height: 0; height: 0;
} }
@ -129,7 +124,7 @@ limitations under the License.
min-width: 14px; min-width: 14px;
height: 17px; height: 17px;
position: absolute; position: absolute;
right: 9px; right: 8px; /*gutter */
top: 9px; top: 9px;
border-radius: 14px; border-radius: 14px;
color: #fff; color: #fff;
@ -154,6 +149,7 @@ limitations under the License.
letter-spacing: 0.1em; letter-spacing: 0.1em;
opacity: 1; opacity: 1;
top: 9px; top: 9px;
right: 8px; /* gutter */
} }
/* Position mute icon when room muted */ /* Position mute icon when room muted */
@ -161,6 +157,7 @@ limitations under the License.
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
opacity: 1; opacity: 1;
top: 11px; top: 11px;
right: 6px;
} }
.mx_RoomTile_unreadNotify .mx_RoomTile_badge { .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@ -180,7 +177,7 @@ limitations under the License.
font-weight: 600; font-weight: 600;
} }
.mx_RoomTile_selected .mx_RoomTile_name { .mx_RoomTile_selected {
background-color: rgba(118,207,166,0.2); background-color: rgba(118,207,166,0.2);
} }
@ -188,10 +185,6 @@ limitations under the License.
width: 144px; width: 144px;
} }
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 136px;
}
.mx_RoomTile_arrow { .mx_RoomTile_arrow {
position: absolute; position: absolute;
right: 0px; right: 0px;

8
src/skins/vector/css/vector-web/structures/LeftPanel.css
View file

@ -63,8 +63,8 @@ limitations under the License.
order: 3; order: 3;
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-left: 18px; margin-left: 16px; /* gutter */
margin-right: 18px; margin-right: 16px; /* gutter */
-webkit-flex: 0 0 60px; -webkit-flex: 0 0 60px;
flex: 0 0 60px; flex: 0 0 60px;
z-index: 1; z-index: 1;
@ -100,3 +100,7 @@ limitations under the License.
.mx_LeftPanel .mx_BottomLeftMenu_settings { .mx_LeftPanel .mx_BottomLeftMenu_settings {
float: right; float: right;
} }
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
float: none;
}

4
src/skins/vector/css/vector-web/structures/RoomSubList.css
View file

@ -25,8 +25,8 @@ limitations under the License.
color: #3d3b39; color: #3d3b39;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
padding-left: 18px; padding-left: 16px; /* gutter */
padding-right: 18px; padding-right: 16px; /* gutter */
margin-top: 8px; margin-top: 8px;
margin-bottom: 4px; margin-bottom: 4px;
cursor: pointer; cursor: pointer;