Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 1 | /** Variable and font definitions */ |
Adrien Beraud | 8e25afb | 2017-04-19 01:38:57 +0200 | [diff] [blame] | 2 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 3 | :root { |
| 4 | /* color definitions */ |
| 5 | --ring-light-blue: rgba(59, 193, 211, 0.3); |
| 6 | --ring-dark-blue: #003b4e; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 7 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 8 | /* main properties */ |
| 9 | --bg-color: #f2f2f2; /* same as macOS client */ |
Sébastien Blin | f4f9028 | 2017-10-03 14:07:16 -0400 | [diff] [blame] | 10 | |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 11 | /* navbar properties */ |
| 12 | --navbar-height: 40px; |
| 13 | --navbar-padding-top: 8px; |
| 14 | --navbar-padding-bottom: var(--navbar-padding-top); |
Hugo Lefeuvre | 368c47c | 2018-05-29 15:50:07 -0400 | [diff] [blame] | 15 | |
| 16 | /* message bar properties */ |
| 17 | --textarea-max-height: 150px; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 18 | --placeholder-text-color: #d3d3d3; |
Sébastien Blin | f4f9028 | 2017-10-03 14:07:16 -0400 | [diff] [blame] | 19 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 20 | /* button properties */ |
| 21 | --action-icon-color: var(--ring-dark-blue); |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 22 | --deactivated-icon-color: #BEBEBE; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 23 | --action-icon-hover-color: var(--ring-light-blue); |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 24 | --action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of ring light blue */ |
| 25 | --action-critical-icon-press-color: rgba(211, 77, 59, 0.5); |
| 26 | --action-critical-icon-color: #4E1300; |
| 27 | --non-action-icon-color: #212121; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 28 | --action-icon-press-color: rgba(59, 193, 211, 0.5); |
Sébastien Blin | f4f9028 | 2017-10-03 14:07:16 -0400 | [diff] [blame] | 29 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 30 | /* hairline properties */ |
| 31 | --hairline-color: #d9d9d9; |
| 32 | --hairline-thickness: 0.2px; |
aviau | 32b8dd6 | 2016-11-02 00:36:57 -0400 | [diff] [blame] | 33 | } |
| 34 | |
Hugo Lefeuvre | 9186c60 | 2018-05-03 10:44:15 -0400 | [diff] [blame] | 35 | @font-face { |
| 36 | font-family: emoji; |
| 37 | |
| 38 | /* Fonts for text outside emoji blocks */ |
| 39 | src: local('Open sans'), |
| 40 | local('Helvetica'), |
| 41 | local('Segoe UI'), |
| 42 | local('sans-serif'); |
| 43 | } |
| 44 | |
| 45 | @font-face { |
| 46 | font-family: emoji; |
| 47 | |
| 48 | src: local('Noto Color Emoji'), |
| 49 | local('Android Emoji'), |
| 50 | local('Twitter Color Emoji'); |
| 51 | |
| 52 | /* Emoji unicode blocks */ |
| 53 | unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF; |
| 54 | } |
| 55 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 56 | /** Body */ |
| 57 | |
| 58 | body { |
Hugo Lefeuvre | 368c47c | 2018-05-29 15:50:07 -0400 | [diff] [blame] | 59 | --navbar-size: calc(var(--navbar-height) + var(--navbar-padding-top) + var(--navbar-padding-bottom)); |
| 60 | --messagebar-size: 57px; /* FIXME clean this up */ |
| 61 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 62 | margin: 0; |
| 63 | overflow: hidden; |
| 64 | background-color: var(--bg-color); |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 65 | padding-top: var(--navbar-size); |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 66 | padding-bottom: var(--messagebar-size); |
Hugo Lefeuvre | 368c47c | 2018-05-29 15:50:07 -0400 | [diff] [blame] | 67 | |
| 68 | /* disable selection highlight because it looks very bad */ |
| 69 | -webkit-user-select: none; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 70 | } |
| 71 | |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 72 | /** Navbar */ |
| 73 | |
| 74 | .navbar-wrapper { |
| 75 | /* on top, over everything and full width */ |
| 76 | position: fixed; |
| 77 | left:0; right:0; |
| 78 | z-index: 500; |
| 79 | top: 0; |
| 80 | } |
| 81 | |
| 82 | #navbar { |
| 83 | background-color: var(--bg-color); |
| 84 | padding-right: 8px; |
| 85 | padding-left: 8px; |
| 86 | padding-top: var(--navbar-padding-top); |
| 87 | padding-bottom: var(--navbar-padding-bottom); |
| 88 | height: var(--navbar-height); |
| 89 | overflow: hidden; |
| 90 | align-items: center; |
| 91 | |
| 92 | /* takes whole width */ |
| 93 | left:0; right:0; |
| 94 | |
| 95 | /* hairline */ |
| 96 | border-bottom: var(--hairline-thickness) solid var(--hairline-color); |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 97 | |
| 98 | display: flex; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 99 | } |
| 100 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 101 | .hiddenState { |
| 102 | /* Used to hide navbar and message bar */ |
| 103 | display: none !important; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 104 | } |
| 105 | |
| 106 | .svgicon { |
| 107 | display: block; |
| 108 | margin: auto; |
| 109 | height: 100%; |
| 110 | } |
| 111 | |
| 112 | .nav-button { |
| 113 | width: 40px; |
| 114 | height: 40px; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 115 | display: flex; |
| 116 | cursor: pointer; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 117 | align-self: center; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 118 | border-radius: 50%; |
| 119 | } |
| 120 | |
| 121 | .nav-button.deactivated { |
| 122 | width: 40px; |
| 123 | height: 40px; |
| 124 | align-self: center; |
| 125 | display: flex; |
| 126 | border-radius: 50%; |
| 127 | cursor: auto; |
| 128 | } |
| 129 | |
| 130 | .nav-right { |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 131 | align-self: flex-end; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 132 | } |
| 133 | |
| 134 | .nav-left { |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 135 | align-self: flex-start; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 136 | } |
| 137 | |
| 138 | #nav-contactid { |
| 139 | margin: 0px; |
| 140 | margin-left: 5px; |
| 141 | padding: 0px; |
| 142 | height: 100%; |
| 143 | font-family: emoji; |
| 144 | |
Hugo Lefeuvre | 368c47c | 2018-05-29 15:50:07 -0400 | [diff] [blame] | 145 | /* enable selection (it is globally disabled in the body) */ |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 146 | -webkit-user-select: auto; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 147 | |
| 148 | /* contactid field should take as much place as possible, but it should |
| 149 | also be the first one to shrink if necesary. */ |
| 150 | flex-grow: 2; |
| 151 | flex-shrink: 2; |
| 152 | min-width: 0; /* necessary for child to be able to shrink correctly */ |
| 153 | |
| 154 | /* center vertically */ |
| 155 | display: flex; |
| 156 | align-items: center; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 157 | } |
| 158 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 159 | #nav-contactid-wrapper { |
| 160 | width: 100%; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 161 | } |
| 162 | |
| 163 | #nav-contactid-alias { |
| 164 | font-size: 14px; |
| 165 | font-weight: bold; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 166 | margin-bottom: 3px; |
| 167 | |
| 168 | width: 100%; |
| 169 | white-space: nowrap; |
| 170 | overflow: hidden; |
| 171 | text-overflow: ellipsis; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 172 | } |
| 173 | |
| 174 | #nav-contactid-bestId { |
| 175 | font-size: 11px; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 176 | |
| 177 | width: 100%; |
| 178 | white-space: nowrap; |
| 179 | overflow: hidden; |
| 180 | text-overflow: ellipsis; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 181 | } |
| 182 | |
| 183 | .oneEntry #nav-contactid-bestId { |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 184 | display: none; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 185 | } |
| 186 | |
| 187 | .action-button svg { |
| 188 | fill: var(--action-icon-color); |
| 189 | } |
| 190 | |
| 191 | .action-button.deactivated svg { |
| 192 | fill: var(--deactivated-icon-color); |
| 193 | } |
| 194 | |
| 195 | .non-action-button svg { |
| 196 | fill: var(--non-action-icon-color); |
| 197 | } |
| 198 | |
| 199 | .non-action-button:hover, .action-button:hover { |
| 200 | background: var(--action-icon-hover-color); |
| 201 | } |
| 202 | |
| 203 | .non-action-button:active, .action-button:active { |
| 204 | background: var(--action-icon-press-color); |
| 205 | } |
| 206 | |
| 207 | .action-button.deactivated:hover, .action-button.deactivated:active { |
| 208 | background: none; |
| 209 | } |
| 210 | |
| 211 | .action-critical-button svg { |
| 212 | fill: var(--action-critical-icon-color); |
| 213 | } |
| 214 | |
| 215 | .action-critical-button:hover { |
| 216 | background: var(--action-critical-icon-hover-color); |
| 217 | } |
| 218 | |
| 219 | .action-critical-button:active { |
| 220 | background: var(--action-critical-icon-press-color); |
| 221 | } |
| 222 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 223 | #callButtons { |
| 224 | display: flex; |
| 225 | } |
| 226 | |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 227 | #navbar #addBannedContactButton, #navbar #addToConversationsButton { |
| 228 | display: none; |
| 229 | } |
| 230 | |
| 231 | #navbar.onBannedState #addToConvButton, #navbar.onBannedState #callButtons, #navbar.onBannedState #addToConversationsButton { |
| 232 | display: none; |
| 233 | } |
| 234 | |
| 235 | #navbar.onBannedState #addBannedContactButton { |
| 236 | display: flex; |
| 237 | } |
| 238 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 239 | /** Invitation bar */ |
| 240 | |
| 241 | #invitation { |
| 242 | visibility: hidden; |
| 243 | background: var(--ring-light-blue); |
| 244 | position: absolute; |
| 245 | width: 100%; |
| 246 | |
| 247 | /* hairline */ |
| 248 | border-bottom: var(--hairline-thickness) solid var(--hairline-color); |
| 249 | } |
| 250 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 251 | #invitation #actions { |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 252 | margin: 10px; |
| 253 | list-style: none; |
| 254 | display: flex; |
| 255 | align-items: center; |
| 256 | justify-content: center; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 257 | |
| 258 | /* enable selection (it is globally disabled in the body) */ |
| 259 | -webkit-user-select: auto; |
| 260 | } |
| 261 | |
| 262 | #invitation #text h1 { |
| 263 | font-size: 1.5em; |
| 264 | } |
| 265 | |
| 266 | #invitation #text { |
| 267 | text-align: center; |
| 268 | width: 90%; |
| 269 | margin: auto; |
| 270 | margin-top: 10px; |
| 271 | font-size: 0.8em; |
| 272 | |
| 273 | /* enable selection (it is globally disabled in the body) */ |
| 274 | -webkit-user-select: auto; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 275 | } |
| 276 | |
| 277 | .invitation-button, |
| 278 | .flat-button { |
| 279 | margin: 5px; |
| 280 | border: 0; |
| 281 | border-radius: 5px; |
| 282 | transition: all 0.3s ease; |
Hugo Lefeuvre | edad883 | 2018-05-14 16:36:06 -0400 | [diff] [blame] | 283 | color: #f9f9f9; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 284 | padding: 10px 20px 10px 20px; |
| 285 | vertical-align: middle; |
| 286 | cursor: pointer; |
| 287 | } |
| 288 | |
| 289 | .button-green { |
| 290 | background: #27ae60; |
| 291 | } |
| 292 | |
| 293 | .button-green:hover { |
| 294 | background: #1f8b4c; |
| 295 | } |
| 296 | |
| 297 | .button-red { |
| 298 | background: #dc3a37; |
| 299 | } |
| 300 | |
| 301 | .button-red:hover { |
| 302 | background: #b02e2c; |
| 303 | } |
| 304 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 305 | /** Messaging bar */ |
| 306 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 307 | #sendMessage { |
| 308 | background-color: var(--bg-color); |
| 309 | display: flex; |
| 310 | position: relative; |
| 311 | padding-right: 10px; |
| 312 | padding-left: 8px; |
| 313 | overflow: hidden; |
| 314 | padding-top: 8px; |
| 315 | padding-bottom: 8px; |
| 316 | align-items: center; |
| 317 | |
| 318 | position: fixed; |
| 319 | left:0; right:0; |
| 320 | z-index: 500; |
| 321 | bottom: 0; |
| 322 | /* hairline */ |
| 323 | border-top: var(--hairline-thickness) solid var(--hairline-color); |
| 324 | } |
| 325 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 326 | #message { |
Hugo Lefeuvre | 368c47c | 2018-05-29 15:50:07 -0400 | [diff] [blame] | 327 | font-family: emoji; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 328 | flex: 1; |
| 329 | background-color: var(--bg-color); |
| 330 | border: 0; |
| 331 | overflow-y: scroll; |
| 332 | color: black; |
Hugo Lefeuvre | 368c47c | 2018-05-29 15:50:07 -0400 | [diff] [blame] | 333 | max-height: var(--textarea-max-height); |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 334 | margin-right: 10px; |
| 335 | resize: none; |
Hugo Lefeuvre | 368c47c | 2018-05-29 15:50:07 -0400 | [diff] [blame] | 336 | |
| 337 | /* enable selection (it is globally disabled in the body) */ |
| 338 | -webkit-user-select: auto; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 339 | } |
| 340 | |
| 341 | #message:focus, |
| 342 | #message.focus { |
| 343 | outline: none; |
| 344 | } |
| 345 | |
| 346 | #container[disabled] { |
| 347 | background-color: #ccc; |
| 348 | } |
| 349 | |
| 350 | input[placeholder], [placeholder], *[placeholder] { |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 351 | color: var(--placeholder-text-color); |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 352 | } |
| 353 | |
| 354 | /** Main chat view */ |
| 355 | |
Hugo Lefeuvre | f9bb72b | 2018-07-03 14:11:17 -0400 | [diff] [blame] | 356 | #lazyloading-icon { |
| 357 | margin: auto; |
| 358 | margin-bottom: 10px; |
| 359 | margin-top: 5px; |
| 360 | vertical-align: center; |
| 361 | width: 30px; |
| 362 | display: flex; |
| 363 | } |
| 364 | |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 365 | #container { |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 366 | position: relative; |
| 367 | height: 100%; |
| 368 | width: 100%; |
| 369 | margin: 0; |
| 370 | padding: 0; |
| 371 | |
| 372 | display: flex; |
| 373 | flex-direction: column; |
| 374 | |
| 375 | /* When there are not enough messages to occupy full height of the |
| 376 | container, make sure they are displayed at the bottom, not at the |
| 377 | top. */ |
| 378 | justify-content: flex-end; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 379 | } |
| 380 | |
| 381 | a:link { |
| 382 | text-decoration: none; |
| 383 | color: #0e649b; |
| 384 | transition: all 0.2s ease-in-out; |
| 385 | border-bottom: dotted 1px; |
| 386 | } |
| 387 | |
| 388 | a:hover { |
| 389 | border: 0; |
| 390 | } |
| 391 | |
| 392 | #messages { |
| 393 | position: relative; |
| 394 | z-index: 0; |
| 395 | width: 100%; |
| 396 | overflow-y: scroll; |
| 397 | height: auto; |
| 398 | padding-top: 0.5em; |
Hugo Lefeuvre | 0babe2b | 2018-06-27 12:14:27 -0400 | [diff] [blame] | 399 | } |
| 400 | |
| 401 | .last-message { |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 402 | /* The last message gets a bigger bottom padding so that it is not |
| 403 | "glued" to the message bar. */ |
Hugo Lefeuvre | f9bb72b | 2018-07-03 14:11:17 -0400 | [diff] [blame] | 404 | padding-bottom: 1.5em !important; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 405 | } |
| 406 | |
| 407 | /* General messages */ |
| 408 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 409 | .internal_mes_wrapper { |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 410 | max-width: 70%; |
| 411 | margin: 8px 0 0 0; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 412 | |
| 413 | display: flex; |
| 414 | flex-direction: column; |
| 415 | |
| 416 | /* If a message is smaller (in width) than the timestamp, do not fill |
| 417 | full width and pack message at the left. */ |
| 418 | align-items: flex-start; |
| 419 | align-content: flex-start; |
| 420 | } |
| 421 | |
| 422 | .message_out > .internal_mes_wrapper { |
| 423 | /* If message is in the outgoing direction, pack at the right. */ |
| 424 | align-items: flex-end; |
| 425 | align-content: flex-end; |
| 426 | } |
| 427 | |
| 428 | .message_wrapper { |
| 429 | max-width: calc(100% - 2em); |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 430 | border-radius: 10px; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 431 | padding: 1em; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 432 | position: relative; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 433 | |
| 434 | display: flex; |
| 435 | flex-direction: row; |
| 436 | } |
| 437 | |
| 438 | .message_type_data_transfer .message_wrapper { |
| 439 | display: flex; |
| 440 | flex-direction: column; |
| 441 | padding: 0; |
| 442 | width: 450px; |
| 443 | max-width: none; |
| 444 | } |
| 445 | |
| 446 | .transfer_info_wrapper { |
| 447 | display: flex; |
| 448 | flex-direction: row; |
Hugo Lefeuvre | 8127fe1 | 2018-05-23 10:53:12 -0400 | [diff] [blame] | 449 | } |
| 450 | |
aviau | 32b8dd6 | 2016-11-02 00:36:57 -0400 | [diff] [blame] | 451 | .message { |
Hugo Lefeuvre | 9186c60 | 2018-05-03 10:44:15 -0400 | [diff] [blame] | 452 | font: 0.875em emoji; |
aviau | 32b8dd6 | 2016-11-02 00:36:57 -0400 | [diff] [blame] | 453 | margin: 0; |
| 454 | display: flex; |
| 455 | justify-content: flex-start; |
| 456 | align-items: top; |
| 457 | overflow: hidden; |
Hugo Lefeuvre | 368c47c | 2018-05-29 15:50:07 -0400 | [diff] [blame] | 458 | |
| 459 | /* enable selection (it is globally disabled in the body) */ |
| 460 | -webkit-user-select: auto; |
aviau | 32b8dd6 | 2016-11-02 00:36:57 -0400 | [diff] [blame] | 461 | } |
| 462 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 463 | .message_in { |
| 464 | padding-left: 25%; |
| 465 | } |
| 466 | |
| 467 | .message_out { |
| 468 | padding-right: 25%; |
| 469 | |
| 470 | /* Message sent by the user should be displayed at the right side of |
| 471 | the screen. */ |
| 472 | flex-direction: row-reverse; |
| 473 | } |
| 474 | |
| 475 | .message_delivery_status { |
| 476 | margin: 10px 10px; |
| 477 | color: #A0A0A0; |
| 478 | } |
| 479 | |
| 480 | .message_sender { |
| 481 | display: none; |
| 482 | } |
| 483 | |
| 484 | .sender_image { |
| 485 | border-radius: 50%; |
| 486 | margin: 10px; |
| 487 | } |
| 488 | |
| 489 | .message_out .message_wrapper { |
| 490 | border-top-right-radius: 0; |
| 491 | transform-origin: top right; |
| 492 | } |
| 493 | |
| 494 | .message_in .message_wrapper { |
| 495 | border-top-left-radius: 0; |
| 496 | transform-origin: top left; |
| 497 | } |
| 498 | |
| 499 | .message_out .message_wrapper { |
| 500 | background-color: #cfd8dc; |
| 501 | } |
| 502 | |
| 503 | .message_in .message_wrapper { |
| 504 | background-color: #fdfdfd; |
| 505 | } |
| 506 | |
| 507 | /* Only the first message of a serie of messages has an angular |
| 508 | * top-right / top-left corner. Others get a rounded one. |
| 509 | * Same for avatars: do not show it for every single message, |
| 510 | * only for the first one of a serie. */ |
| 511 | |
| 512 | .message_out + .message_out .message_wrapper { |
| 513 | border-top-right-radius: 10px; |
| 514 | } |
| 515 | |
| 516 | .message_in + .message_in .message_wrapper { |
| 517 | border-top-left-radius: 10px; |
| 518 | } |
| 519 | |
| 520 | .message_in + .message_in .sender_image { |
| 521 | visibility: hidden; |
| 522 | } |
| 523 | |
| 524 | .message_out + .message_out .sender_image { |
| 525 | visibility: hidden; |
| 526 | } |
| 527 | |
| 528 | @-webkit-keyframes fade-in { |
| 529 | from { |
| 530 | opacity: 0; |
| 531 | } |
| 532 | to { |
| 533 | opacity: 1; |
| 534 | } |
| 535 | } |
| 536 | |
| 537 | .timestamp { |
| 538 | display: inline-flex; |
| 539 | justify-content: flex-start; |
| 540 | align-self:stretch; |
| 541 | color: #333; |
| 542 | font-size: 10px; |
| 543 | padding: 5px; |
| 544 | } |
| 545 | |
| 546 | .timestamp_out { |
| 547 | flex-direction: row-reverse; |
| 548 | } |
| 549 | |
| 550 | .timestamp_action { |
| 551 | margin: auto; |
| 552 | padding: 0; |
| 553 | vertical-align: center; |
| 554 | opacity:0; |
| 555 | transition: visibility 0.3s linear, opacity 0.3s linear; |
| 556 | } |
| 557 | |
| 558 | .message_type_contact .message_wrapper:hover .timestamp_action, |
| 559 | .message_type_call .message_wrapper:hover .timestamp_action { |
| 560 | opacity: 1; |
| 561 | } |
| 562 | |
| 563 | /* Ellipsis - dropdown menu */ |
| 564 | |
| 565 | input[type=checkbox]{ |
| 566 | display: none; |
| 567 | } |
| 568 | |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 569 | .menu_interaction |
| 570 | { |
| 571 | margin: 5px; |
| 572 | padding: 10px; |
| 573 | padding-top: 0; |
| 574 | opacity: 0; |
| 575 | height: 20px; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 576 | transition:visibility 0.3s linear, opacity 0.3s linear; |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 577 | } |
| 578 | |
| 579 | .message_type_contact .menu_interaction |
| 580 | { |
| 581 | display: none; |
| 582 | visibility: hidden; |
| 583 | } |
| 584 | |
| 585 | .message_type_call .menu_interaction |
| 586 | { |
| 587 | margin: auto; |
| 588 | padding: 0; |
| 589 | vertical-align: center; |
| 590 | } |
| 591 | |
| 592 | .message_type_call .menu_interaction .dropdown |
| 593 | { |
| 594 | margin-top: -17px; |
| 595 | } |
| 596 | |
| 597 | .message:hover .menu_interaction |
| 598 | { |
| 599 | display: block; |
| 600 | opacity: 1; |
| 601 | } |
| 602 | |
| 603 | .dropdown { |
| 604 | display: none; |
| 605 | z-index: 1; |
| 606 | position: absolute; |
| 607 | background-color: #fff; |
| 608 | padding-top: 3px; |
| 609 | padding-bottom: 3px; |
| 610 | } |
| 611 | |
| 612 | .dropdown div |
| 613 | { |
| 614 | color: #111; |
| 615 | padding: 10px; |
| 616 | } |
| 617 | |
| 618 | .dropdown div:hover |
| 619 | { |
| 620 | background-color: #ddd; |
| 621 | } |
| 622 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 623 | .showmenu:checked ~ .dropdown{ |
| 624 | display: block; |
aviau | 32b8dd6 | 2016-11-02 00:36:57 -0400 | [diff] [blame] | 625 | } |
| 626 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 627 | /* Buttons */ |
| 628 | |
| 629 | .flat-button { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 630 | flex: 1; |
| 631 | padding: 0; |
aviau | 32b8dd6 | 2016-11-02 00:36:57 -0400 | [diff] [blame] | 632 | } |
| 633 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 634 | .left_buttons { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 635 | align-self: center; |
| 636 | max-width: 90px; |
| 637 | padding-left: 1em; |
aviau | 32b8dd6 | 2016-11-02 00:36:57 -0400 | [diff] [blame] | 638 | } |
| 639 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 640 | /* Status */ |
| 641 | |
| 642 | .status_circle { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 643 | fill: #A0A0A0; |
| 644 | -webkit-animation: circle-dance; |
| 645 | -webkit-animation-duration: 0.8s; |
| 646 | -webkit-animation-iteration-count: infinite; |
| 647 | -webkit-animation-direction: alternate; |
| 648 | -webkit-animation-timing-function: ease-in-out; |
aviau | 32b8dd6 | 2016-11-02 00:36:57 -0400 | [diff] [blame] | 649 | } |
Sébastien Blin | f4f9028 | 2017-10-03 14:07:16 -0400 | [diff] [blame] | 650 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 651 | .anim-first { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 652 | -webkit-animation-delay: 0.7s; |
Sébastien Blin | f4f9028 | 2017-10-03 14:07:16 -0400 | [diff] [blame] | 653 | } |
| 654 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 655 | .anim-second { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 656 | -webkit-animation-delay: 0.9s; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 657 | } |
| 658 | |
| 659 | .anim-third { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 660 | -webkit-animation-delay: 1.1s; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 661 | } |
| 662 | |
| 663 | @-webkit-keyframes circle-dance { |
| 664 | 0%,50% { |
| 665 | -webkit-transform: translateY(0); |
| 666 | fill: #A0A0A0; |
| 667 | } |
| 668 | 100% { |
| 669 | -webkit-transform: translateY(-8px); |
| 670 | fill: #000; |
| 671 | } |
| 672 | } |
| 673 | |
| 674 | .status-x { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 675 | stroke-dasharray: 12; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 676 | } |
| 677 | |
| 678 | /* Contact + Call interactions */ |
| 679 | .message_type_contact .message_wrapper, |
| 680 | .message_type_call .message_wrapper { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 681 | width: auto; |
| 682 | margin-left: 30%; |
| 683 | margin-right: 30%; |
| 684 | display: flex; |
| 685 | flex-wrap: wrap; |
| 686 | background-color: #f2f2f2; |
| 687 | padding: 0; |
Sébastien Blin | f4f9028 | 2017-10-03 14:07:16 -0400 | [diff] [blame] | 688 | } |
| 689 | |
Sébastien Blin | f4f9028 | 2017-10-03 14:07:16 -0400 | [diff] [blame] | 690 | .message_type_contact .message_wrapper:before, |
| 691 | .message_type_call .message_wrapper:before { |
| 692 | display: none; |
| 693 | } |
| 694 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 695 | .message_type_contact .text, |
| 696 | .message_type_call .text { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 697 | align-self: center; |
| 698 | font-size: 1.2em; |
| 699 | padding: 1em; |
Sébastien Blin | f4f9028 | 2017-10-03 14:07:16 -0400 | [diff] [blame] | 700 | } |
| 701 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 702 | /* file interactions */ |
Sébastien Blin | f4f9028 | 2017-10-03 14:07:16 -0400 | [diff] [blame] | 703 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 704 | .message_type_data_transfer .internal_mes_wrapper { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 705 | padding: 0; |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 706 | display: flex; |
| 707 | flex-wrap: wrap; |
Guillaume Roguez | 5b137be | 2018-02-21 10:44:58 -0500 | [diff] [blame] | 708 | } |
| 709 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 710 | .accept, .refuse { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 711 | border-radius: 50%; |
| 712 | cursor: pointer; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 713 | } |
| 714 | |
| 715 | .accept svg, |
| 716 | .refuse svg { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 717 | padding: 8px; |
| 718 | width: 24px; |
| 719 | height: 24px; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 720 | } |
| 721 | |
| 722 | .accept { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 723 | fill: #219d55; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 724 | } |
| 725 | |
| 726 | .accept:hover { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 727 | fill: white; |
| 728 | background: #219d55; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 729 | } |
| 730 | |
| 731 | .refuse { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 732 | fill: #dc2719; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 733 | } |
| 734 | |
| 735 | .refuse:hover { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 736 | fill: white; |
| 737 | background: #dc2719; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 738 | } |
| 739 | |
| 740 | .message_type_data_transfer .text { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 741 | text-align: left; |
| 742 | align-self: left; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 743 | padding: 1em; |
| 744 | } |
| 745 | |
| 746 | .truncate-ellipsis { |
| 747 | display: table; |
| 748 | table-layout: fixed; |
| 749 | width: 100%; |
| 750 | white-space: nowrap; |
| 751 | } |
| 752 | |
| 753 | .truncate-ellipsis > * { |
| 754 | display: table-cell; |
| 755 | overflow: hidden; |
| 756 | text-overflow: ellipsis; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 757 | } |
| 758 | |
| 759 | .message_type_data_transfer .filename { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 760 | cursor: pointer; |
| 761 | font-size: 1.1em; |
Guillaume Roguez | 5b137be | 2018-02-21 10:44:58 -0500 | [diff] [blame] | 762 | } |
| 763 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 764 | .message_type_data_transfer .informations { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 765 | color: #555; |
| 766 | font-size: 0.8em; |
Guillaume Roguez | 5b137be | 2018-02-21 10:44:58 -0500 | [diff] [blame] | 767 | } |
| 768 | |
| 769 | .message_progress_bar { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 770 | width: 100%; |
| 771 | height: 1em; |
| 772 | position: relative; |
| 773 | overflow: hidden; |
| 774 | background-color: #eee; |
| 775 | border-radius: 0; |
| 776 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; |
Guillaume Roguez | 5b137be | 2018-02-21 10:44:58 -0500 | [diff] [blame] | 777 | } |
| 778 | |
| 779 | .message_progress_bar > span { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 780 | display: inline; |
| 781 | height: 100%; |
| 782 | background-color: #01a2b8; |
| 783 | position: absolute; |
| 784 | overflow: hidden; |
Guillaume Roguez | 5b137be | 2018-02-21 10:44:58 -0500 | [diff] [blame] | 785 | } |
| 786 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 787 | /* text interactions */ |
| 788 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 789 | .message_type_text .internal_mes_wrapper { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 790 | padding: 0px; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 791 | } |
| 792 | |
| 793 | .message_text { |
| 794 | hyphens: auto; /* When webkitgtk+ will supports this, intelligent word-breaking */ |
| 795 | word-break: break-word; |
| 796 | word-wrap: break-word; |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 797 | max-width: 100%; |
| 798 | } |
| 799 | |
| 800 | .message_text pre { |
| 801 | display: inline; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 802 | } |
| 803 | |
| 804 | pre { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 805 | font : inherit; |
| 806 | font-family : inherit; |
| 807 | font-size : inherit; |
| 808 | font-style : inherit; |
| 809 | font-variant : inherit; |
| 810 | font-weight : inherit; |
| 811 | margin: 0; |
| 812 | padding: 0; |
Guillaume Roguez | 5b137be | 2018-02-21 10:44:58 -0500 | [diff] [blame] | 813 | } |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 814 | |
| 815 | /* Media interactions */ |
| 816 | .media_wrapper img { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 817 | max-width: 800px; |
| 818 | max-height: 700px; |
| 819 | margin: 5px 0 0 0; |
| 820 | border-radius: 10px; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 821 | } |
| 822 | |
| 823 | .playVideo { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 824 | background-color: rgba(0, 0, 0, 0.6); |
| 825 | height: 50px; |
| 826 | width: 50px; |
| 827 | border-radius: 5px; |
| 828 | float: right; |
| 829 | position: absolute; |
| 830 | top: calc(50% - 25px); |
| 831 | left: calc(50% - 25px); |
| 832 | z-index: 3; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 833 | } |
| 834 | |
| 835 | .containerVideo { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 836 | width: 100%; |
| 837 | position: relative; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 838 | } |
| 839 | |
| 840 | .playVideo svg { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 841 | height: 40px; |
| 842 | width: 40px; |
| 843 | margin: 5px; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 844 | } |
| 845 | |
| 846 | /* Text interaction */ |
| 847 | .failure, |
| 848 | .sending { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 849 | margin: 10px 10px; |
| 850 | color: #A0A0A0; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 851 | } |
| 852 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 853 | /* classic screens */ |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 854 | @media screen and (max-width: 1920px), screen and (max-height: 1080px) { |
| 855 | .message_in { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 856 | padding-left: 15%; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 857 | } |
| 858 | |
| 859 | .message_out { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 860 | padding-right: 15%; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 861 | } |
| 862 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 863 | .internal_mes_wrapper { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 864 | max-width: 60%; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 865 | } |
| 866 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 867 | .media_wrapper img { |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 868 | /* It is perfectly fine to specify max-widths in px when the |
| 869 | wrapper's max-width is in %, as long as the max-width in px |
| 870 | doesn't exceed the one in %. */ |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 871 | max-width: 450px; |
| 872 | max-height: 450px; |
| 873 | } |
| 874 | |
| 875 | .menu_interaction |
| 876 | { |
| 877 | margin: 5px; |
| 878 | padding: 2px; |
| 879 | height: 10px; |
| 880 | font-size: 0.7em; |
| 881 | transition:visibility 0.3s linear,opacity 0.3s linear; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 882 | } |
| 883 | } |
| 884 | |
| 885 | /* lower resolutions */ |
| 886 | @media screen and (max-width: 1000px), screen and (max-height: 480px) { |
| 887 | .message_in { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 888 | padding-left: 0; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 889 | } |
| 890 | |
| 891 | .message_out { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 892 | padding-right: 0; |
| 893 | } |
| 894 | |
| 895 | .message_type_contact, |
| 896 | .message_type_call { |
| 897 | max-width: 100%; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 898 | } |
| 899 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 900 | .internal_mes_wrapper { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 901 | max-width: 90%; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 902 | } |
| 903 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 904 | /* Media interactions */ |
| 905 | .media_wrapper img { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 906 | max-width: 200px; |
| 907 | max-height: 200px; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 908 | } |
| 909 | } |
| 910 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 911 | @media screen and (max-width: 550px) { |
| 912 | .message_type_data_transfer .message_wrapper { |
| 913 | width: 250px; |
| 914 | } |
| 915 | } |
| 916 | |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 917 | /* Special case */ |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 918 | @media screen and (max-width: 350px) { |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 919 | .sender_image { |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 920 | display: none; |
| 921 | } |
| 922 | |
| 923 | /* File interactions */ |
| 924 | .message_type_data_transfer .left_buttons { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 925 | max-width: 100%; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 926 | } |
| 927 | |
| 928 | .message_type_data_transfer .text { |
Sébastien Blin | d2ea6dd | 2018-04-18 11:35:33 -0400 | [diff] [blame] | 929 | max-width: 100%; |
| 930 | padding-left: 0; |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 931 | } |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 932 | |
Hugo Lefeuvre | 61cd079 | 2018-07-05 17:35:09 -0400 | [diff] [blame] | 933 | .message_type_data_transfer .message_wrapper { |
| 934 | width: 200px; |
| 935 | } |
Sébastien Blin | 82d0d2d | 2018-03-14 17:21:42 -0400 | [diff] [blame] | 936 | } |