snippet/styles/app.22f48eff.css

   1 #chat-app {
   2     height: 100%!important
   3 }
   4
   5 #chat-app ui-view {
   6     height: 100%;
   7     background-color: #fafafa
   8 }
   9
  10 #chat-app .center {
  11     max-width: 1400px;
  12     height: 100%;
  13     margin: 0 auto
  14 }
  15
  16 #chat-app .hint {
  17     position: absolute;
  18     left: 2px;
  19     right: auto;
  20     bottom: 7px;
  21     font-size: 12px;
  22     line-height: 14px;
  23     transition: all .3s cubic-bezier(.55, 0, .55, .2);
  24     color: grey
  25 }
  26
  27 #chat-app .center .content-card {
  28     position: relative;
  29     height: 100%
  30 }
  31
  32 #chat-app .center .content-card .chat .chat-toolbar {
  33     min-height: 55px;
  34     color: rgba(0, 0, 0, .87);
  35     border-bottom: 1px solid rgba(0, 0, 0, .08)
  36 }
  37
  38 #chat-app .center .content-card .chat .chat-toolbar md-icon {
  39     color: rgba(0, 0, 0, .87)
  40 }
  41
  42 #chat-app .center .content-card .chat .chat-toolbar .responsive-chats-button {
  43     padding: 0
  44 }
  45
  46 #chat-app .center .content-card .chat .chat-toolbar .chat-contact .avatar {
  47     margin-right: 16px
  48 }
  49
  50 #chat-app .center .content-card .chat #chat-content {
  51     background: 0 0;
  52     height: 354px
  53 }
  54
  55 #chat-app .center .content-card .chat #chat-content .chat-error {
  56     background: #f44336;
  57     border-radius: 5px
  58 }
  59
  60 #chat-app .center .content-card .chat #chat-content .chat-error .chat-error-message {
  61     white-space: nowrap;
  62     overflow: hidden;
  63     text-overflow: ellipsis;
  64     font-size: 15px;
  65     padding: 5px;
  66     margin-left: 0;
  67     color: #fff
  68 }
  69
  70 #chat-app .center .content-card .chat #chat-content .message-row .bubble {
  71     word-wrap: break-word;
  72     position: relative;
  73     max-width: 268px;
  74     padding: 6px 7px 8px 9px;
  75     background-color: #fff;
  76     box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
  77     border-radius: 6px
  78 }
  79
  80 #chat-app .center .content-card .chat #chat-content .message-row .bubble .message-done {
  81     color: #dcdcdc
  82 }
  83
  84 #chat-app .center .content-card .chat #chat-content .message-row .bubble .message-done-all {
  85     color: #00bfff
  86 }
  87
  88 #chat-app .center .content-card .chat #chat-content .message-row .bubble:before {
  89     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=);
  90     content: '';
  91     position: absolute;
  92     left: -11px;
  93     bottom: 3px;
  94     width: 12px;
  95     height: 19px;
  96     background-position: 50% 50%;
  97     background-repeat: no-repeat;
  98     background-size: contain
  99 }
 100
 101 #chat-app .center .content-card .chat #chat-content .message-row .bubble .message {
 102     white-space: pre-wrap
 103 }
 104
 105 #chat-app .center .content-card .chat #chat-content .message-row .bubble .time {
 106     font-size: 11px;
 107     margin-top: 8px;
 108     text-align: right
 109 }
 110
 111 #chat-app .center .content-card .chat #chat-content .message-row.out .avatar {
 112     margin: 0 16px 0 0;
 113     width: 40px;
 114     min-width: 40px;
 115     height: 40px;
 116     line-height: 40px;
 117     border-radius: 50%;
 118     font-size: 17px;
 119     font-weight: 500;
 120     text-align: center;
 121     color: #fff
 122 }
 123
 124 #chat-app .center .content-card .chat #chat-content .message-row.auto {
 125     align-items: flex-end;
 126     font-style: italic
 127 }
 128
 129 #chat-app .center .content-card .chat #chat-content .message-row.auto .avatar {
 130     margin: 0 16px 0 0;
 131     width: 40px;
 132     min-width: 40px;
 133     height: 40px;
 134     line-height: 40px;
 135     border-radius: 50%;
 136     font-size: 17px;
 137     font-style: italic;
 138     font-weight: 500;
 139     text-align: center;
 140     color: #fff
 141 }
 142
 143 #chat-app .center .content-card .chat #chat-content .message-row.in {
 144     align-items: flex-end
 145 }
 146
 147 #chat-app .center .content-card .chat #chat-content .message-row.in .avatar {
 148     order: 2;
 149     margin: 0 0 0 16px;
 150     width: 40px;
 151     min-width: 40px;
 152     height: 40px;
 153     line-height: 40px;
 154     border-radius: 50%;
 155     font-size: 17px;
 156     font-weight: 500;
 157     text-align: center;
 158     color: #fff
 159 }
 160
 161 #chat-app .center .content-card .chat #chat-content .message-row.in .bubble {
 162     margin-left: auto;
 163     background-color: #e8f5e9;
 164     border: 1px solid #dfebe0;
 165     order: 1
 166 }
 167
 168 #chat-app .center .content-card .chat #chat-content .message-row.in .bubble:before {
 169     right: -11px;
 170     left: auto;
 171     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=)
 172 }
 173
 174 #chat-app .center .content-card .chat .chat-footer {
 175     min-height: 64px;
 176     max-height: 96px;
 177     background-color: #f3f4f5;
 178     color: rgba(0, 0, 0, .87);
 179     border-top: 1px solid rgba(0, 0, 0, .08);
 180     padding: 8px 8px 8px 16px;
 181     position: fixed;
 182     bottom: 0;
 183     width: 100%
 184 }
 185
 186 #chat-app .center .content-card .chat .chat-footer .reply-form md-input-container {
 187     margin: 0;
 188     padding-right: 16px
 189 }
 190
 191 #chat-app .center .content-card .chat .chat-footer .reply-form md-input-container textarea {
 192     overflow: auto;
 193     max-height: 80px;
 194     transition: height .2s ease
 195 }
 196
 197 #chat-app .center .content-card .chat .chat-footer .reply-form md-input-container textarea.grow {
 198     height: 80px
 199 }
 200
 201 #chat-app .center .content-card .chat .chat-footer .reply-form md-input-container .md-errors-spacer {
 202     display: none
 203 }
 204
 205 #chat-app .center .content-card .chat .chat-footer .reply-form .md-button {
 206     margin: 0
 207 }
 208
 209 #chat-app .center .content-card .start-point {
 210     background: linear-gradient(to bottom, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .6) 20%, rgba(255, 255, 255, .8))
 211 }
 212
 213 #chat-app .center .content-card .start-point .big-circle {
 214     background: linear-gradient(to bottom, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .6) 20%, rgba(255, 255, 255, .8));
 215     border-radius: 50%;
 216     width: 300px;
 217     height: 300px;
 218     line-height: 300px;
 219     text-align: center
 220 }
 221
 222 #chat-app .center .content-card .start-point .app-title {
 223     font-weight: 500;
 224     font-size: 32px;
 225     margin: 12px 0
 226 }
 227
 228 #chat-app .center .content-card .start-point .secondary-text {
 229     font-size: 16px
 230 }
 231
 232 #chat-app .center .content-card .sidenav md-toolbar {
 233     border-bottom: 1px solid rgba(0, 0, 0, .08)
 234 }
 235
 236 #chat-app .center .content-card .sidenav md-toolbar .md-toolbar-tools-bottom .search {
 237     height: 36px;
 238     line-height: 36px;
 239     padding: 8px;
 240     background: #fff;
 241     font-size: 13px
 242 }
 243
 244 #chat-app .center .content-card .sidenav md-toolbar .md-toolbar-tools-bottom .search .icon {
 245     margin: 0;
 246     color: rgba(0, 0, 0, .54)
 247 }
 248
 249 #chat-app .center .content-card .sidenav md-toolbar .md-toolbar-tools-bottom .search input {
 250     padding-left: 12px;
 251     height: 36px;
 252     color: rgba(0, 0, 0, .54)
 253 }
 254
 255 #chat-app .center .content-card .sidenav md-list.chat-list,
 256 #chat-app .center .content-card .sidenav md-list.contact-list {
 257     position: relative;
 258     transition: all .2s ease-out
 259 }
 260
 261 #chat-app .center .content-card .sidenav md-list.chat-list .subheader,
 262 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item,
 263 #chat-app .center .content-card .sidenav md-list.contact-list .subheader,
 264 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item {
 265     position: absolute;
 266     right: 0;
 267     left: 0;
 268     width: 100%;
 269     transition: transform .2s ease-out;
 270     background: #fff;
 271     will-change: transform
 272 }
 273
 274 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-leave,
 275 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-leave,
 276 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-leave,
 277 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-leave {
 278     transform: translateY(0);
 279     display: none
 280 }
 281
 282 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-leave.ng-leave-active,
 283 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-leave.ng-leave-active,
 284 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-leave.ng-leave-active,
 285 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-leave.ng-leave-active {
 286     transform: translateY(-100%)
 287 }
 288
 289 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-hide,
 290 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-hide,
 291 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-hide,
 292 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-hide {
 293     display: none
 294 }
 295
 296 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-hide-add-active,
 297 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-hide-remove-active,
 298 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-hide-add-active,
 299 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-hide-remove-active,
 300 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-hide-add-active,
 301 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-hide-remove-active,
 302 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-hide-add-active,
 303 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-hide-remove-active {
 304     display: block;
 305     transition-property: all
 306 }
 307
 308 #chat-app .center .content-card .sidenav md-list.chat-list .subheader,
 309 #chat-app .center .content-card .sidenav md-list.contact-list .subheader {
 310     padding-left: 16px;
 311     font-size: 20px;
 312     font-weight: 300;
 313     height: 88px;
 314     line-height: 88px
 315 }
 316
 317 #chat-app .center .content-card .sidenav .no-results-message {
 318     position: absolute;
 319     width: 100%;
 320     height: 88px;
 321     padding: 16px;
 322     background: #fff;
 323     font-size: 15px;
 324     font-weight: 400
 325 }
 326
 327 #chat-app .avatar-wrapper {
 328     position: relative
 329 }
 330
 331 #chat-app .avatar-wrapper .avatar {
 332     margin-top: 0;
 333     margin-bottom: 0
 334 }
 335
 336 #chat-app .status {
 337     position: absolute;
 338     top: 28px;
 339     left: 28px;
 340     border-radius: 50%
 341 }
 342
 343 #chat-app .status.online {
 344     color: #4caf50
 345 }
 346
 347 #chat-app .status.online:before {
 348     content: "\e709"
 349 }
 350
 351 #chat-app .status.do-not-disturb {
 352     color: #f44336
 353 }
 354
 355 #chat-app .status.do-not-disturb:before {
 356     content: "\e912"
 357 }
 358
 359 #chat-app .status.away {
 360     background-color: #ffc107;
 361     color: #fff
 362 }
 363
 364 #chat-app .status.away:before {
 365     content: "\e727"
 366 }
 367
 368 #chat-app .status.offline {
 369     color: #4caf50;
 370     background-color: #fff
 371 }
 372
 373 #chat-app .status.offline:before {
 374     content: "\e704"
 375 }
 376
 377 #chat-app .editable-wrap {
 378     position: relative
 379 }
 380
 381 #chat-app .editable-wrap .editable-controls {
 382     display: flex;
 383     flex-direction: row;
 384     align-items: center;
 385     width: 100%
 386 }
 387
 388 #chat-app .editable-wrap .editable-controls .editable-input {
 389     width: inherit;
 390     background-color: #fff;
 391     padding: 8px;
 392     border: 1px solid rgba(0, 0, 0, .12)
 393 }
 394
 395 #chat-app .editable-wrap .editable-controls .editable-buttons {
 396     display: inherit
 397 }
 398
 399 #chat-app .editable-wrap .editable-controls .editable-buttons .md-button {
 400     margin: 0
 401 }
 402
 403 #chat-app .editable-wrap .editable-controls .editable-buttons .md-button:first-of-type {
 404     padding-right: 0
 405 }
 406
 407 #chat-app .editable-wrap .editable-controls .editable-buttons .md-button .icon-cancel {
 408     color: rgba(0, 0, 0, .32)
 409 }
 410
 411 #chat-app .editable-click {
 412     cursor: pointer;
 413     text-decoration: none;
 414     color: inherit;
 415     border-bottom: none
 416 }
 417
 418 #chat-app .emoji-picker-icon {
 419     cursor: pointer;
 420     right: 10px;
 421     top: 1px
 422 }