snippet/1.0.1/styles/app.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     cursor: pointer;
  40     min-height: 45px;
  41     color: rgba(0, 0, 0, .87);
  42     border-bottom: 1px solid rgba(0, 0, 0, .08);
  43     outline: 0
  44 }
  45
  46 #chat-app .center .content-card .chat .chat-toolbar .title {
  47     color: #fff;
  48     font-size: 18px
  49 }
  50
  51 #chat-app .center .content-card .chat .chat-toolbar md-icon {
  52     color: rgba(0, 0, 0, .87)
  53 }
  54
  55 #chat-app .center .content-card .chat .chat-toolbar .responsive-chats-button {
  56     padding: 0
  57 }
  58
  59 #chat-app .center .content-card .chat .chat-toolbar .chat-contact .avatar {
  60     margin-right: 16px
  61 }
  62
  63 #chat-app .center .content-card .chat .input-title {
  64     font-size: 15px
  65 }
  66
  67 #chat-app .center .content-card .chat md-input-container {
  68     margin-top: 15;
  69     margin-bottom: 0
  70 }
  71
  72 #chat-app .center .content-card .chat #chat-content-form {
  73     height: 380px;
  74     padding: 30px
  75 }
  76
  77 #chat-app .center .content-card .chat #chat-content {
  78     background: 0 0;
  79     height: 305px
  80 }
  81
  82 #chat-app .center .content-card .chat #chat-content .chat-error {
  83     background: #f44336;
  84     border-radius: 5px
  85 }
  86
  87 #chat-app .center .content-card .chat #chat-content .chat-error .chat-error-message {
  88     white-space: nowrap;
  89     overflow: hidden;
  90     text-overflow: ellipsis;
  91     font-size: 15px;
  92     padding: 5px;
  93     margin-left: 0;
  94     color: #fff
  95 }
  96
  97 #chat-app .center .content-card .chat #chat-content .message-row {
  98     padding: 3px
  99 }
 100
 101 #chat-app .center .content-card .chat #chat-content .message-row .bubble {
 102     word-wrap: break-word;
 103     position: relative;
 104     max-width: 268px;
 105     padding: 6px 7px 8px 9px;
 106     background-color: #fff;
 107     box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
 108     border-radius: 6px
 109 }
 110
 111 #chat-app .center .content-card .chat #chat-content .message-row .bubble .message-done {
 112     color: #dcdcdc
 113 }
 114
 115 #chat-app .center .content-card .chat #chat-content .message-row .bubble .message-done-all {
 116     color: #00bfff
 117 }
 118
 119 #chat-app .center .content-card .chat #chat-content .message-row .bubble:before {
 120     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=);
 121     content: '';
 122     position: absolute;
 123     left: -11px;
 124     bottom: 3px;
 125     width: 12px;
 126     height: 19px;
 127     background-position: 50% 50%;
 128     background-repeat: no-repeat;
 129     background-size: contain
 130 }
 131
 132 #chat-app .center .content-card .chat #chat-content .message-row .bubble .message {
 133     white-space: pre-wrap
 134 }
 135
 136 #chat-app .center .content-card .chat #chat-content .message-row .bubble .time {
 137     font-size: 10px;
 138     text-align: right;
 139     margin-bottom: 5px
 140 }
 141
 142 #chat-app .center .content-card .chat #chat-content .message-row.out .avatar {
 143     margin: 0 16px 0 0;
 144     width: 40px;
 145     min-width: 40px;
 146     height: 40px;
 147     line-height: 40px;
 148     border-radius: 50%;
 149     font-weight: 500;
 150     text-align: center;
 151     color: #fff
 152 }
 153
 154 #chat-app .center .content-card .chat #chat-content .message-row.auto {
 155     align-items: flex-end;
 156     font-style: italic
 157 }
 158
 159 #chat-app .center .content-card .chat #chat-content .message-row.auto .avatar {
 160     margin: 0 16px 0 0;
 161     width: 40px;
 162     min-width: 40px;
 163     height: 40px;
 164     line-height: 40px;
 165     border-radius: 50%;
 166     font-size: 17px;
 167     font-style: italic;
 168     font-weight: 500;
 169     text-align: center;
 170     color: #fff
 171 }
 172
 173 #chat-app .center .content-card .chat #chat-content .message-row.in {
 174     align-items: flex-end;
 175     font-size: 12px
 176 }
 177
 178 #chat-app .center .content-card .chat #chat-content .message-row.out {
 179     align-items: flex-end;
 180     font-size: 12px
 181 }
 182
 183 #chat-app .center .content-card .chat #chat-content .message-row.in .avatar {
 184     order: 2;
 185     margin: 0 0 0 16px;
 186     width: 40px;
 187     min-width: 40px;
 188     height: 40px;
 189     line-height: 40px;
 190     border-radius: 50%;
 191     font-weight: 500;
 192     text-align: center;
 193     color: #fff
 194 }
 195
 196 #chat-app .center .content-card .chat #chat-content .message-row.in .bubble {
 197     margin-left: auto;
 198     background-color: #e8f5e9;
 199     border: 1px solid #dfebe0;
 200     order: 1
 201 }
 202
 203 #chat-app .center .content-card .chat #chat-content .message-row.in .bubble:before {
 204     right: -11px;
 205     left: auto;
 206     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=)
 207 }
 208
 209 #chat-app .center .content-card .chat .chat-footer {
 210     min-height: 64px;
 211     max-height: 90px;
 212     background-color: #f3f4f5;
 213     color: rgba(0, 0, 0, .87);
 214     border-top: 1px solid rgba(0, 0, 0, .08);
 215     padding: 8px 8px 8px 16px;
 216     position: fixed;
 217     bottom: 0;
 218     width: 100%
 219 }
 220
 221 #chat-app .center .content-card .chat .chat-footer .reply-form md-input-container {
 222     margin: 0;
 223     padding-right: 16px
 224 }
 225
 226 #chat-app .center .content-card .chat .chat-footer .reply-form md-input-container textarea {
 227     overflow: auto;
 228     max-height: 80px;
 229     transition: height .2s ease
 230 }
 231
 232 #chat-app .center .content-card .chat .chat-footer .reply-form md-input-container textarea.grow {
 233     height: 80px
 234 }
 235
 236 #chat-app .center .content-card .chat .chat-footer .reply-form md-input-container .md-errors-spacer {
 237     display: none
 238 }
 239
 240 #chat-app .center .content-card .chat .chat-footer .reply-form .md-button {
 241     margin: 0
 242 }
 243
 244 #chat-app .center .content-card .start-point {
 245     background: linear-gradient(to bottom, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .6) 20%, rgba(255, 255, 255, .8))
 246 }
 247
 248 #chat-app .center .content-card .start-point .big-circle {
 249     background: linear-gradient(to bottom, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .6) 20%, rgba(255, 255, 255, .8));
 250     border-radius: 50%;
 251     width: 300px;
 252     height: 300px;
 253     line-height: 300px;
 254     text-align: center
 255 }
 256
 257 #chat-app .center .content-card .start-point .secondary-text {
 258     font-size: 16px
 259 }
 260
 261 #chat-app .center .content-card .sidenav md-toolbar {
 262     border-bottom: 1px solid rgba(0, 0, 0, .08);
 263     outline: 0
 264 }
 265
 266 #chat-app .center .content-card .sidenav md-list.chat-list,
 267 #chat-app .center .content-card .sidenav md-list.contact-list {
 268     position: relative;
 269     transition: all .2s ease-out
 270 }
 271
 272 #chat-app .center .content-card .sidenav md-list.chat-list .subheader,
 273 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item,
 274 #chat-app .center .content-card .sidenav md-list.contact-list .subheader,
 275 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item {
 276     position: absolute;
 277     right: 0;
 278     left: 0;
 279     width: 100%;
 280     transition: transform .2s ease-out;
 281     background: #fff;
 282     will-change: transform
 283 }
 284
 285 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-leave,
 286 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-leave,
 287 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-leave,
 288 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-leave {
 289     transform: translateY(0);
 290     display: none
 291 }
 292
 293 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-leave.ng-leave-active,
 294 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-leave.ng-leave-active,
 295 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-leave.ng-leave-active,
 296 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-leave.ng-leave-active {
 297     transform: translateY(-100%)
 298 }
 299
 300 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-hide,
 301 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-hide,
 302 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-hide,
 303 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-hide {
 304     display: none
 305 }
 306
 307 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-hide-add-active,
 308 #chat-app .center .content-card .sidenav md-list.chat-list .subheader.ng-hide-remove-active,
 309 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-hide-add-active,
 310 #chat-app .center .content-card .sidenav md-list.chat-list md-list-item.ng-hide-remove-active,
 311 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-hide-add-active,
 312 #chat-app .center .content-card .sidenav md-list.contact-list .subheader.ng-hide-remove-active,
 313 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-hide-add-active,
 314 #chat-app .center .content-card .sidenav md-list.contact-list md-list-item.ng-hide-remove-active {
 315     display: block;
 316     transition-property: all
 317 }
 318
 319 #chat-app .center .content-card .sidenav md-list.chat-list .subheader,
 320 #chat-app .center .content-card .sidenav md-list.contact-list .subheader {
 321     padding-left: 16px;
 322     font-size: 20px;
 323     font-weight: 300;
 324     height: 88px;
 325     line-height: 88px
 326 }
 327
 328 #chat-app .center .content-card .sidenav .no-results-message {
 329     position: absolute;
 330     width: 100%;
 331     height: 88px;
 332     padding: 16px;
 333     background: #fff;
 334     font-size: 15px;
 335     font-weight: 400
 336 }
 337
 338 #chat-app .avatar-wrapper {
 339     position: relative;
 340     bottom: -3px;
 341     right: 5px
 342 }
 343
 344 #chat-app .avatar-wrapper .avatar {
 345     max-width: 40px
 346 }
 347
 348 #chat-app .status {
 349     position: absolute;
 350     top: 28px;
 351     left: 28px;
 352     border-radius: 50%
 353 }
 354
 355 #chat-app .status.online {
 356     color: #4caf50
 357 }
 358
 359 #chat-app .status.online:before {
 360     content: "\e709"
 361 }
 362
 363 #chat-app .status.do-not-disturb {
 364     color: #f44336
 365 }
 366
 367 #chat-app .status.do-not-disturb:before {
 368     content: "\e912"
 369 }
 370
 371 #chat-app .status.away {
 372     background-color: #ffc107;
 373     color: #fff
 374 }
 375
 376 #chat-app .status.away:before {
 377     content: "\e727"
 378 }
 379
 380 #chat-app .status.offline {
 381     color: #4caf50;
 382     background-color: #fff
 383 }
 384
 385 #chat-app .status.offline:before {
 386     content: "\e704"
 387 }
 388
 389 #chat-app .editable-wrap {
 390     position: relative
 391 }
 392
 393 #chat-app .editable-wrap .editable-controls {
 394     display: flex;
 395     flex-direction: row;
 396     align-items: center;
 397     width: 100%
 398 }
 399
 400 #chat-app .editable-wrap .editable-controls .editable-input {
 401     width: inherit;
 402     background-color: #fff;
 403     padding: 8px;
 404     border: 1px solid rgba(0, 0, 0, .12)
 405 }
 406
 407 #chat-app .editable-wrap .editable-controls .editable-buttons {
 408     display: inherit
 409 }
 410
 411 #chat-app .editable-wrap .editable-controls .editable-buttons .md-button {
 412     margin: 0
 413 }
 414
 415 #chat-app .editable-wrap .editable-controls .editable-buttons .md-button:first-of-type {
 416     padding-right: 0
 417 }
 418
 419 #chat-app .editable-wrap .editable-controls .editable-buttons .md-button .icon-cancel {
 420     color: rgba(0, 0, 0, .32)
 421 }
 422
 423 #chat-app .editable-click {
 424     cursor: pointer;
 425     text-decoration: none;
 426     color: inherit;
 427     border-bottom: none
 428 }
 429
 430 #chat-app .thumb>.md-ink-ripple {
 431     display: none
 432 }
 433
 434 #waiting {
 435     overflow: visible;
 436     height: 400px;
 437     background: #fff;
 438     text-align: center;
 439     flex: 1 0 auto;
 440     padding: 32px
 441 }
 442
 443 #waiting .title {
 444     font-size: 17px;
 445     margin-top: 16px
 446 }
 447
 448 #waiting .subtitle {
 449     margin: 16px 0;
 450     max-width: 300px;
 451     color: rgba(0, 0, 0, .54);
 452     font-size: 15px
 453 }
 454
 455 .ngrateit-star {
 456     background-size: 32px
 457 }
 458
 459 .ngrateit-star:focus {
 460     outline: 0
 461 }
 462
 463 .green {
 464     color: green
 465 }
 466
 467 .red {
 468     color: red
 469 }
 470
 471 .sk-fading-circle {
 472     margin: 100px auto;
 473     width: 40px;
 474     height: 40px;
 475     position: relative
 476 }
 477
 478 .sk-fading-circle .sk-circle {
 479     width: 100%;
 480     height: 100%;
 481     position: absolute;
 482     left: 0;
 483     top: 0
 484 }
 485
 486 .sk-fading-circle .sk-circle:before {
 487     content: '';
 488     display: block;
 489     margin: 0 auto;
 490     width: 15%;
 491     height: 15%;
 492     background-color: #333;
 493     border-radius: 100%;
 494     -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
 495     animation: sk-circleFadeDelay 1.2s infinite ease-in-out both
 496 }
 497
 498 .sk-fading-circle .sk-circle2 {
 499     -webkit-transform: rotate(30deg);
 500     -ms-transform: rotate(30deg);
 501     transform: rotate(30deg)
 502 }
 503
 504 .sk-fading-circle .sk-circle3 {
 505     -webkit-transform: rotate(60deg);
 506     -ms-transform: rotate(60deg);
 507     transform: rotate(60deg)
 508 }
 509
 510 .sk-fading-circle .sk-circle4 {
 511     -webkit-transform: rotate(90deg);
 512     -ms-transform: rotate(90deg);
 513     transform: rotate(90deg)
 514 }
 515
 516 .sk-fading-circle .sk-circle5 {
 517     -webkit-transform: rotate(120deg);
 518     -ms-transform: rotate(120deg);
 519     transform: rotate(120deg)
 520 }
 521
 522 .sk-fading-circle .sk-circle6 {
 523     -webkit-transform: rotate(150deg);
 524     -ms-transform: rotate(150deg);
 525     transform: rotate(150deg)
 526 }
 527
 528 .sk-fading-circle .sk-circle7 {
 529     -webkit-transform: rotate(180deg);
 530     -ms-transform: rotate(180deg);
 531     transform: rotate(180deg)
 532 }
 533
 534 .sk-fading-circle .sk-circle8 {
 535     -webkit-transform: rotate(210deg);
 536     -ms-transform: rotate(210deg);
 537     transform: rotate(210deg)
 538 }
 539
 540 .sk-fading-circle .sk-circle9 {
 541     -webkit-transform: rotate(240deg);
 542     -ms-transform: rotate(240deg);
 543     transform: rotate(240deg)
 544 }
 545
 546 .sk-fading-circle .sk-circle10 {
 547     -webkit-transform: rotate(270deg);
 548     -ms-transform: rotate(270deg);
 549     transform: rotate(270deg)
 550 }
 551
 552 .sk-fading-circle .sk-circle11 {
 553     -webkit-transform: rotate(300deg);
 554     -ms-transform: rotate(300deg);
 555     transform: rotate(300deg)
 556 }
 557
 558 .sk-fading-circle .sk-circle12 {
 559     -webkit-transform: rotate(330deg);
 560     -ms-transform: rotate(330deg);
 561     transform: rotate(330deg)
 562 }
 563
 564 .sk-fading-circle .sk-circle2:before {
 565     -webkit-animation-delay: -1.1s;
 566     animation-delay: -1.1s
 567 }
 568
 569 .sk-fading-circle .sk-circle3:before {
 570     -webkit-animation-delay: -1s;
 571     animation-delay: -1s
 572 }
 573
 574 .sk-fading-circle .sk-circle4:before {
 575     -webkit-animation-delay: -.9s;
 576     animation-delay: -.9s
 577 }
 578
 579 .sk-fading-circle .sk-circle5:before {
 580     -webkit-animation-delay: -.8s;
 581     animation-delay: -.8s
 582 }
 583
 584 .sk-fading-circle .sk-circle6:before {
 585     -webkit-animation-delay: -.7s;
 586     animation-delay: -.7s
 587 }
 588
 589 .sk-fading-circle .sk-circle7:before {
 590     -webkit-animation-delay: -.6s;
 591     animation-delay: -.6s
 592 }
 593
 594 .sk-fading-circle .sk-circle8:before {
 595     -webkit-animation-delay: -.5s;
 596     animation-delay: -.5s
 597 }
 598
 599 .sk-fading-circle .sk-circle9:before {
 600     -webkit-animation-delay: -.4s;
 601     animation-delay: -.4s
 602 }
 603
 604 .sk-fading-circle .sk-circle10:before {
 605     -webkit-animation-delay: -.3s;
 606     animation-delay: -.3s
 607 }
 608
 609 .sk-fading-circle .sk-circle11:before {
 610     -webkit-animation-delay: -.2s;
 611     animation-delay: -.2s
 612 }
 613
 614 .sk-fading-circle .sk-circle12:before {
 615     -webkit-animation-delay: -.1s;
 616     animation-delay: -.1s
 617 }
 618
 619 @-webkit-keyframes sk-circleFadeDelay {
 620     0%,
 621     100%,
 622     39% {
 623         opacity: 0
 624     }
 625     40% {
 626         opacity: 1
 627     }
 628 }
 629
 630 @keyframes sk-circleFadeDelay {
 631     0%,
 632     100%,
 633     39% {
 634         opacity: 0
 635     }
 636     40% {
 637         opacity: 1
 638     }
 639 }
 640
 641 md-select-menu {
 642     transition: none!important;
 643     transition-duration: 0s!important;
 644     transition-delay: 0s!important
 645 }