Merge pull request #697 from vector-im/matthew/roompreview
Lots of CSS bugfixes and polishing
This commit is contained in:
commit
f4a2b6ab7e
12 changed files with 151 additions and 87 deletions
|
@ -143,6 +143,13 @@ limitations under the License.
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mx_UserSettings_changePasswordButton {
|
||||
float: right;
|
||||
margin-right: 32px;
|
||||
margin-left: 32px;
|
||||
margin-top: -54px;
|
||||
}
|
||||
|
||||
.mx_UserSettings_logout {
|
||||
float: right;
|
||||
margin-right: 32px;
|
||||
|
@ -156,10 +163,6 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_UserSettings_avatarPicker .mx_RoomAvatar {
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.mx_UserSettings_avatarPicker_edit {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
|
|
|
@ -25,9 +25,10 @@ limitations under the License.
|
|||
text-align: center;
|
||||
speak: none;
|
||||
pointer-events: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 20px;
|
||||
border-radius: 40px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
|
@ -1,28 +0,0 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomAvatar {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_RoomAvatar_initial {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: normal ! important;
|
||||
speak: none;
|
||||
pointer-events: none;
|
||||
}
|
|
@ -25,10 +25,7 @@ limitations under the License.
|
|||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mx_EntityTile:hover .mx_MessageTimestamp {
|
||||
display: block;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.mx_EntityTile_avatar {
|
||||
|
@ -43,6 +40,14 @@ limitations under the License.
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.mx_EntityTile_power {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
top: 0px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.mx_EntityTile_name {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
@ -83,4 +88,11 @@ limitations under the License.
|
|||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.mx_EntityTile_unknown .mx_EntityTile_avatar,
|
||||
.mx_EntityTile_unknown .mx_EntityTile_name,
|
||||
.mx_EntityTile_unknown .mx_EntityTile_name_hover
|
||||
{
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -31,11 +31,6 @@ limitations under the License.
|
|||
top: 0px;
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar img {
|
||||
border-radius: 20px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.mx_EventTile_continuation {
|
||||
margin-top: 8px ! important;
|
||||
}
|
||||
|
|
|
@ -32,10 +32,6 @@ limitations under the License.
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_avatar img {
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_profile {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
|
@ -44,25 +44,41 @@ limitations under the License.
|
|||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
.mx_MemberList_invite {
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 9px;
|
||||
color: #454545;
|
||||
margin-left: 3px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
width: 180px;
|
||||
.mx_MemberList .mx_SearchableEntityList {
|
||||
order: 1;
|
||||
flex: 0;
|
||||
-webkit-flex: 0;
|
||||
}
|
||||
|
||||
.mx_MemberList_invite::-moz-placeholder {
|
||||
color: #454545;
|
||||
opacity: 0.5;
|
||||
.mx_MemberList .mx_SearchableEntityList_expanded {
|
||||
flex: 1 1 0;
|
||||
-webkit-flex: 1 1 0;
|
||||
}
|
||||
.mx_MessageList_invite::-webkit-input-placeholder {
|
||||
color: #454545;
|
||||
opacity: 0.5;
|
||||
|
||||
.mx_MemberList_joined {
|
||||
order: 2;
|
||||
flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
.mx_MemberList_invited {
|
||||
order: 3;
|
||||
flex: 0 0 100px;
|
||||
-webkit-flex: 0 0 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_MemberList_bottom {
|
||||
order: 4;
|
||||
flex: 0 0 72px;
|
||||
-webkit-flex: 0 0 72px;
|
||||
|
||||
border-top: 2px solid #e1dddd;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.mx_MemberList_invited h2 {
|
||||
|
@ -76,8 +92,13 @@ limitations under the License.
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* we have to have display: table in order for the horizontal wrapping to work */
|
||||
.mx_MemberList_wrapper {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_MemberList_outerWrapper {
|
||||
height: 0px;
|
||||
}
|
||||
|
|
|
@ -194,7 +194,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomHeader_editable {
|
||||
border-bottom: 1px solid #c7c7c7 ! important;
|
||||
min-width: 70px;
|
||||
min-width: 150px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
|
@ -224,10 +224,6 @@ limitations under the License.
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_avatar .mx_RoomAvatar {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_avatarPicker_edit {
|
||||
position: absolute;
|
||||
margin-left: 16px;
|
||||
|
|
|
@ -60,7 +60,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_toggles label {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
@ -74,7 +74,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_tags {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_roomColor {
|
||||
|
@ -99,29 +99,48 @@ limitations under the License.
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_aliasLabel {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_aliasesTable {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0px;
|
||||
margin-left: 56px;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_aliasesRow {
|
||||
.mx_RoomSettings .mx_RoomSettings_aliasesTableRow {
|
||||
display: table-row;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_alias {
|
||||
display: table-cell;
|
||||
margin-bottom: 20px;
|
||||
max-width: 400px;
|
||||
margin-bottom: 16px;
|
||||
/*
|
||||
commented out so margin applies
|
||||
display: table-cell; */
|
||||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_addAlias,
|
||||
.mx_RoomSettings .mx_RoomSettings_deleteAlias {
|
||||
display: table-cell;
|
||||
padding-left: 0.5em;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_addAlias img,
|
||||
.mx_RoomSettings .mx_RoomSettings_deleteAlias img {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_addAlias img,
|
||||
.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_deleteAlias img {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_RoomSettings_editable {
|
||||
border: 0px;
|
||||
border-bottom: 1px solid #c7c7c7;
|
||||
|
@ -150,10 +169,6 @@ limitations under the License.
|
|||
color: #a2a2a2;
|
||||
}
|
||||
|
||||
.mx_RoomSettings .mx_RoomAvatar {
|
||||
border-radius: 120px;
|
||||
}
|
||||
|
||||
.mx_RoomSettings_buttons {
|
||||
text-align: right;
|
||||
margin-bottom: 16px;
|
||||
|
|
|
@ -33,10 +33,6 @@ limitations under the License.
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_RoomTile_avatar img {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_name {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
|
|
|
@ -14,10 +14,68 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_SearchableEntityList_list {
|
||||
border-bottom: 1px solid #e1dddd;
|
||||
.mx_SearchableEntityList {
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_list:empty {
|
||||
border-bottom: 0px;
|
||||
.mx_SearchableEntityList_query {
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 9px;
|
||||
color: #454545;
|
||||
margin-left: 3px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_query::-moz-placeholder {
|
||||
color: #454545;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_query::-webkit-input-placeholder {
|
||||
color: #454545;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_listWrapper {
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_list {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_list .mx_EntityTile_chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_hrWrapper {
|
||||
width: 100%;
|
||||
flex: 0px;
|
||||
-webkit-flex: 0;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList hr {
|
||||
height: 1px;
|
||||
border: 0px;
|
||||
color: #e1dddd;
|
||||
background-color: #e1dddd;
|
||||
margin-right: 15px;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
|
|
@ -41,7 +41,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_TabCompleteBar_item img {
|
||||
border-radius: 24px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue