diff --git a/src/skins/vector/css/molecules/TabCompleteBar.css b/src/skins/vector/css/molecules/TabCompleteBar.css new file mode 100644 index 0000000000..51ac41980d --- /dev/null +++ b/src/skins/vector/css/molecules/TabCompleteBar.css @@ -0,0 +1,35 @@ +/* +Copyright 2015 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_TabCompleteBar { + overflow: hidden; +} + +.mx_TabCompleteBar_item { + display: inline-block; + margin-right: 15px; +} + +.mx_TabCompleteBar_item img { + border-radius: 24px; + margin-right: 8px; + vertical-align: middle; +} + +.mx_TabCompleteBar_text { + color: #4a4a4a; + opacity: 0.5; +} diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index 8dff990094..3ec5bbdcd0 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -182,7 +182,7 @@ limitations under the License. } .mx_RoomView_inCall .mx_RoomView_statusAreaBox { - background-color: #76CFA6; + background-color: #76CFA6; color: #fff; position: relative; } @@ -249,6 +249,12 @@ limitations under the License. cursor: pointer; } +.mx_RoomView_tabCompleteBar { + margin-top: 5px; + margin-left: 65px; + color: #4a4a4a; +} + .mx_RoomView_typingBar { margin-top: 6px; margin-left: 65px; @@ -256,18 +262,46 @@ limitations under the License. opacity: 0.5; } +.mx_RoomView_tabCompleteImage, .mx_RoomView_typingImage { display: inline; - margin-left: -47px; + 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 img { + vertical-align: middle; + margin-right: 8px; + margin-top: -2px; +} + .mx_RoomView .mx_MessageComposer { -webkit-box-ordinal-group: 5; -moz-box-ordinal-group: 5; diff --git a/src/skins/vector/img/eol.svg b/src/skins/vector/img/eol.svg new file mode 100644 index 0000000000..a331b3e49c --- /dev/null +++ b/src/skins/vector/img/eol.svg @@ -0,0 +1,16 @@ + + + + icon_eol + Created with sketchtool. + + + + + + + + + + +