_RoomView.scss (4710B)
1 /* 2 Copyright 2015, 2016 OpenMarket Ltd 3 Copyright 2017 MTRNord <info@nordgedanken.de> 4 5 Licensed under the Apache License, Version 2.0 (the "License"); 6 you may not use this file except in compliance with the License. 7 You may obtain a copy of the License at 8 9 http://www.apache.org/licenses/LICENSE-2.0 10 11 Unless required by applicable law or agreed to in writing, software 12 distributed under the License is distributed on an "AS IS" BASIS, 13 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 See the License for the specific language governing permissions and 15 limitations under the License. 16 */ 17 18 .mx_RoomView { 19 word-wrap: break-word; 20 position: relative; 21 22 display: flex; 23 width: 100%; 24 25 flex-direction: column; 26 } 27 28 .mx_RoomView .mx_RoomHeader { 29 order: 1; 30 31 flex: 0 0 70px; 32 } 33 34 .mx_RoomView_fileDropTarget { 35 min-width: 0px; 36 max-width: 960px; 37 width: 100%; 38 font-size: 18px; 39 text-align: center; 40 41 pointer-events: none; 42 43 padding-left: 12px; 44 padding-right: 12px; 45 margin-left: -12px; 46 47 border-top-left-radius: 10px; 48 border-top-right-radius: 10px; 49 50 background-color: $droptarget-bg-color; 51 border: 2px #e1dddd solid; 52 border-bottom: none; 53 position: absolute; 54 top: 70px; 55 bottom: 0px; 56 z-index: 3000; 57 } 58 59 .mx_RoomView_fileDropTargetLabel { 60 top: 50%; 61 width: 100%; 62 margin-top: -50px; 63 position: absolute; 64 } 65 66 .mx_RoomView_auxPanel { 67 order: 2; 68 69 width: 100%; 70 margin: auto; 71 72 overflow: auto; 73 74 flex: 0 0 auto; 75 } 76 77 .mx_RoomView_topUnreadMessagesBar { 78 order: 3; 79 } 80 81 .mx_RoomView_messagePanel { 82 order: 4; 83 84 flex: 1 1 0; 85 86 width: 100%; 87 88 overflow-y: auto; 89 } 90 91 .mx_RoomView_messageListWrapper { 92 margin: auto; 93 94 min-height: 100%; 95 96 display: flex; 97 98 flex-direction: column; 99 100 justify-content: flex-end; 101 } 102 103 .mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper { 104 justify-content: flex-start; 105 } 106 107 .mx_RoomView_empty { 108 flex: 1 1 auto; 109 font-size: 13px; 110 padding-left: 3em; 111 padding-right: 3em; 112 margin-right: 20px; 113 margin-top: 33%; 114 text-align: center; 115 } 116 117 .mx_RoomView_MessageList { 118 width: 100%; 119 list-style-type: none; 120 padding: 0px; 121 } 122 123 .mx_RoomView_MessageList li { 124 clear: both; 125 } 126 127 .mx_RoomView_MessageList h2 { 128 clear: both; 129 margin-top: 32px; 130 margin-bottom: 8px; 131 margin-left: 63px; 132 padding-bottom: 6px; 133 border-bottom: 1px solid $primary-hairline-color; 134 } 135 136 .mx_RoomView_invitePrompt { 137 order: 2; 138 139 min-width: 0px; 140 max-width: 960px; 141 width: 100%; 142 margin: auto; 143 144 margin-top: 12px; 145 margin-bottom: 12px; 146 } 147 148 li.mx_RoomView_myReadMarker_container { 149 height: 0px; 150 margin: 0px; 151 padding: 0px; 152 border: 0px; 153 } 154 155 hr.mx_RoomView_myReadMarker { 156 border-top: solid 1px $accent-color; 157 border-bottom: solid 1px $accent-color; 158 margin-top: 0px; 159 position: relative; 160 top: -1px; 161 z-index: 1; 162 } 163 164 .mx_RoomView_statusArea { 165 order: 5; 166 167 width: 100%; 168 flex: 0 0 auto; 169 170 max-height: 0px; 171 background-color: $primary-bg-color; 172 z-index: 1000; 173 overflow: hidden; 174 175 -webkit-transition: all .2s ease-out; 176 -moz-transition: all .2s ease-out; 177 -ms-transition: all .2s ease-out; 178 -o-transition: all .2s ease-out; 179 } 180 181 .mx_RoomView_statusArea_expanded { 182 max-height: 100px; 183 } 184 185 .mx_RoomView_statusAreaBox { 186 margin: auto; 187 min-height: 50px; 188 } 189 190 .mx_RoomView_statusAreaBox_line { 191 margin-left: 65px; 192 border-top: 1px solid $primary-hairline-color; 193 height: 1px; 194 } 195 196 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner { 197 background-color: $primary-bg-color; 198 } 199 200 .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename { 201 color: $accent-fg-color; 202 opacity: 1.0; 203 } 204 205 .mx_RoomView_inCall .mx_RoomView_statusAreaBox_line { 206 margin-top: 2px; 207 border: none; 208 height: 0px; 209 } 210 211 .mx_RoomView_inCall .mx_MessageComposer_wrapper { 212 border-top: 2px hidden; 213 padding-top: 1px; 214 } 215 216 .mx_RoomView_inCall .mx_RoomView_statusAreaBox { 217 background-color: $accent-color; 218 color: $accent-fg-color; 219 position: relative; 220 } 221 222 .mx_RoomView_voipChevron { 223 position: absolute; 224 bottom: -11px; 225 right: 11px; 226 } 227 228 .mx_RoomView_voipButton { 229 float: right; 230 margin-right: 13px; 231 margin-top: 10px; 232 cursor: pointer; 233 } 234 235 .mx_RoomView_voipButton object { 236 pointer-events: none; 237 } 238 239 .mx_RoomView .mx_MessageComposer { 240 order: 6; 241 242 width: 100%; 243 flex: 0 0 auto; 244 margin-right: 2px; 245 } 246 247 .mx_RoomView_ongoingConfCallNotification { 248 width: 100%; 249 text-align: center; 250 background-color: $warning-color; 251 color: $accent-fg-color; 252 font-weight: bold; 253 padding: 6px 0; 254 cursor: pointer; 255 } 256 257 .mx_RoomView_ongoingConfCallNotification a { 258 color: $accent-fg-color ! important; 259 } 260 261 .mx_MatrixChat_useCompactLayout { 262 .mx_RoomView_MessageList { 263 margin-bottom: 4px; 264 } 265 266 .mx_RoomView_statusAreaBox { 267 min-height: 42px; 268 } 269 }