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