CSS fixes to match matrix-org/matrix-react-sdk#30b4b91.

This mostly works, but there is some weirdness with the status bar being too
high by default, and getting smaller when it has content in it.
This commit is contained in:
Richard van der Hoff 2016-02-09 14:44:59 +00:00
parent 15fec7f27c
commit bab9de1899
2 changed files with 89 additions and 110 deletions

View File

@ -0,0 +1,89 @@
.mx_RoomStatusBar {
margin-top: 5px;
margin-left: 65px;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_RoomStatusBar_indicator {
padding-left: 18px;
padding-right: 12px;
margin-left: -73px;
float: left;
}
.mx_RoomStatusBar_placeholderIndicator {
color: #4a4a4a;
opacity: 0.5;
}
.mx_RoomStatusBar_scrollDownIndicator {
cursor: pointer;
}
.mx_RoomStatusBar_unreadMessagesBar {
color: #ff0064;
cursor: pointer;
}
.mx_RoomStatusBar_connectionLostBar {
margin-top: 19px;
height: 58px;
}
.mx_RoomStatusBar_connectionLostBar img {
padding-left: 10px;
padding-right: 22px;
vertical-align: middle;
float: left;
}
.mx_RoomStatusBar_connectionLostBar_title {
color: #ff0064;
}
.mx_RoomStatusBar_connectionLostBar_desc {
color: #454545;
font-size: 13px;
opacity: 0.5;
}
.mx_RoomStatusBar_resend_link {
color: #454545 ! important;
text-decoration: underline ! important;
cursor: pointer;
}
.mx_RoomStatusBar_tabCompleteBar {
color: #4a4a4a;
}
.mx_RoomStatusBar_typingBar {
color: #4a4a4a;
opacity: 0.5;
overflow-y: hidden;
display: block;
}
.mx_RoomStatusBar_tabCompleteWrapper {
display: flex;
display: -webkit-flex;
height: 24px;
}
.mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
.mx_RoomStatusBar_tabCompleteEol {
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
color: #76CFA6;
}
.mx_RoomStatusBar_tabCompleteEol object {
vertical-align: middle;
margin-right: 8px;
margin-top: -2px;
}

View File

@ -232,116 +232,6 @@ hr.mx_RoomView_myReadMarker {
pointer-events: none; pointer-events: none;
} }
.mx_RoomView_unreadMessagesBar,
.mx_RoomView_scrollToBottomBar
{
color: #ff0064;
cursor: pointer;
margin-top: 5px;
}
.mx_RoomView_unreadMessagesBar img,
.mx_RoomView_scrollToBottomBar img {
padding-left: 10px;
padding-right: 31px;
vertical-align: middle;
}
.mx_RoomView_scrollToBottomBar {
color: rgba(69,69,69,0.5);
}
.mx_RoomView_callBar {
margin-top: 5px;
}
.mx_RoomView_callBar img {
padding-left: 13px;
padding-right: 30px;
vertical-align: middle;
}
.mx_RoomView_connectionLostBar {
margin-top: 19px;
height: 58px;
}
.mx_RoomView_connectionLostBar img {
padding-left: 10px;
padding-right: 22px;
vertical-align: middle;
float: left;
}
.mx_RoomView_connectionLostBar_title {
color: #ff0064;
}
.mx_RoomView_connectionLostBar_desc {
color: #454545;
font-size: 13px;
opacity: 0.5;
}
.mx_RoomView_resend_link {
color: #454545 ! important;
text-decoration: underline ! important;
cursor: pointer;
}
.mx_RoomView_tabCompleteBar {
margin-top: 5px;
margin-left: 65px;
color: #4a4a4a;
}
.mx_RoomView_typingBar {
margin-top: 6px;
margin-left: 65px;
color: #4a4a4a;
opacity: 0.5;
}
.mx_RoomView_tabCompleteImage,
.mx_RoomView_typingImage {
display: inline;
margin-left: -50px;
margin-top: -4px;
float: left;
}
.mx_RoomView_tabCompleteImage {
opacity: 0.5;
}
.mx_RoomView_typingText {
overflow-y: hidden;
display: block;
}
.mx_RoomView_tabCompleteWrapper {
display: flex;
display: -webkit-flex;
height: 24px;
}
.mx_RoomView_tabCompleteWrapper .mx_TabCompleteBar {
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
.mx_RoomView_tabCompleteEol {
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
color: #76CFA6;
}
.mx_RoomView_tabCompleteEol object {
vertical-align: middle;
margin-right: 8px;
margin-top: -2px;
}
.mx_RoomView .mx_MessageComposer { .mx_RoomView .mx_MessageComposer {
-webkit-box-ordinal-group: 5; -webkit-box-ordinal-group: 5;
-moz-box-ordinal-group: 5; -moz-box-ordinal-group: 5;