From bab9de1899d7bdeebb50f737116685b4246e42a8 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 9 Feb 2016 14:44:59 +0000 Subject: [PATCH 1/2] 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. --- .../structures/RoomStatusBar.css | 89 ++++++++++++++ .../matrix-react-sdk/structures/RoomView.css | 110 ------------------ 2 files changed, 89 insertions(+), 110 deletions(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css new file mode 100644 index 0000000000..8f258b9001 --- /dev/null +++ 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; +} + diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 071b0275ba..1de8c75df7 100644 --- 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; From 27222a54c716611aec4321eadf3f36334ca70192 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 17 Feb 2016 18:54:46 +0000 Subject: [PATCH 2/2] somewhat cryptic hack to make empty RoomStatusBars not take up 41px rather than 36px of height --- .../vector/css/matrix-react-sdk/structures/RoomStatusBar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css index 8f258b9001..1cb920dd21 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css @@ -1,5 +1,5 @@ .mx_RoomStatusBar { - margin-top: 5px; + padding-top: 5px; margin-left: 65px; }