_MessageComposer.scss (4359B)
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_MessageComposer_wrapper { 19 vertical-align: middle; 20 margin: auto; 21 border-top: 1px solid $primary-hairline-color; 22 position: relative; 23 } 24 25 .mx_MessageComposer_autocomplete_wrapper { 26 position: relative; 27 height: 0; 28 } 29 30 .mx_MessageComposer_row { 31 display: flex; 32 flex-direction: row; 33 align-items: center; 34 width: 100%; 35 } 36 37 .mx_MessageComposer .mx_MessageComposer_avatar { 38 padding-left: 10px; 39 padding-right: 28px; 40 } 41 42 .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { 43 display: block; 44 } 45 46 .mx_MessageComposer_composecontrols { 47 width: 100%; 48 } 49 50 .mx_MessageComposer_e2eIcon { 51 position: absolute; 52 left: 44px; 53 } 54 55 .mx_MessageComposer_noperm_error { 56 width: 100%; 57 height: 60px; 58 text-align: center; 59 font-style: italic; 60 color: $greyed-fg-color; 61 } 62 63 .mx_MessageComposer_input_wrapper { 64 flex: 1; 65 display: flex; 66 flex-direction: column; 67 } 68 69 .mx_MessageComposer_input { 70 flex: 1; 71 vertical-align: middle; 72 display: flex; 73 flex-direction: column; 74 min-height: 60px; 75 justify-content: center; 76 align-items: flex-start; 77 font-size: 14px; 78 margin-right: 6px; 79 } 80 81 .mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root { 82 display: none; 83 } 84 85 .mx_MessageComposer_input .DraftEditor-root { 86 width: 100%; 87 flex: 1; 88 max-height: 120px; 89 overflow: auto; 90 } 91 92 .mx_MessageComposer_input blockquote { 93 color: $blockquote-fg-color; 94 margin: 0 0 16px; 95 padding: 0 15px; 96 border-left: 4px solid $blockquote-bar-color; 97 } 98 99 .mx_MessageComposer_input textarea { 100 display: block; 101 width: 100%; 102 padding: 0px; 103 margin-top: 6px; 104 margin-bottom: 6px; 105 border: 0px; 106 resize: none; 107 outline: none; 108 box-shadow: none; 109 color: $primary-fg-color; 110 background-color: $primary-bg-color; 111 font-size: 14px; 112 max-height: 120px; 113 overflow: auto; 114 /* needed for FF */ 115 font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; 116 } 117 118 /* hack for FF as vertical alignment of custom placeholder text is broken */ 119 .mx_MessageComposer_input textarea::-moz-placeholder { 120 line-height: 100%; 121 color: $accent-color; 122 opacity: 1.0; 123 } 124 .mx_MessageComposer_input textarea::-webkit-input-placeholder { 125 color: $accent-color; 126 } 127 128 .mx_MessageComposer_upload, 129 .mx_MessageComposer_hangup, 130 .mx_MessageComposer_voicecall, 131 .mx_MessageComposer_videocall { 132 /*display: table-cell;*/ 133 /*vertical-align: middle;*/ 134 /*padding-left: 10px;*/ 135 padding-right: 5px; 136 cursor: pointer; 137 padding-top: 4px; 138 } 139 140 .mx_MessageComposer_upload object, 141 .mx_MessageComposer_hangup object, 142 .mx_MessageComposer_voicecall object, 143 .mx_MessageComposer_videocall object { 144 pointer-events: none; 145 } 146 147 .mx_MessageComposer_formatting { 148 cursor: pointer; 149 margin: 0 11px; 150 } 151 152 .mx_MessageComposer_formatbar_wrapper { 153 width: 100%; 154 background-color: $menu-bg-color; 155 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08); 156 } 157 158 .mx_MessageComposer_formatbar { 159 margin: auto; 160 max-width: 960px; 161 display: flex; 162 163 height: 30px; 164 165 box-sizing: border-box; 166 padding-left: 62px; 167 168 flex-direction: row; 169 align-items: center; 170 font-size: 10px; 171 color: $greyed-fg-color; 172 } 173 174 .mx_MessageComposer_formatbar * { 175 margin-right: 4px; 176 } 177 178 .mx_MessageComposer_format_button, 179 .mx_MessageComposer_formatbar_cancel, 180 .mx_MessageComposer_formatbar_markdown { 181 cursor: pointer; 182 } 183 184 .mx_MessageComposer_format_button_disabled { 185 cursor: not-allowed; 186 opacity: 0.5; 187 } 188 189 .mx_MessageComposer_formatbar_cancel { 190 margin-right: 22px; 191 } 192 193 .mx_MessageComposer_formatbar_markdown { 194 margin-right: 64px; 195 } 196 197 .mx_MessageComposer_input_markdownIndicator { 198 cursor: pointer; 199 height: 10px; 200 padding: 4px 4px 4px 0; 201 opacity: 0.8; 202 } 203 204 .mx_MatrixChat_useCompactLayout { 205 .mx_MessageComposer_input { 206 min-height: 50px; 207 } 208 209 .mx_MessageComposer_noperm_error { 210 height: 50px; 211 } 212 }