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.
2016-02-09 14:44:59 +00:00 · 2016-02-09 14:44:59 +00:00 · bab9de1899
parent 15fec7f27c
commit bab9de1899
2 changed files with 89 additions and 110 deletions
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
@ -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;
+}
+
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@ -232,116 +232,6 @@ hr.mx_RoomView_myReadMarker {
    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 {
    -webkit-box-ordinal-group: 5;
    -moz-box-ordinal-group: 5;