snippet/1.0.13/styles/app.css

   1 .emojionearea {
   2     width: 100%
   3 }
   4
   5 #chat-app {
   6     height: auto;
   7     width: 375px;
   8     background-color: transparent
   9 }
  10
  11 #chat-app .header-button {
  12     padding: 0;
  13     margin: 0;
  14     font-size: 18px;
  15     cursor: pointer
  16 }
  17
  18 #chat-app .chat-toolbar {
  19     top: 0;
  20     min-height: 50px;
  21     width: 375px;
  22     position: fixed;
  23     cursor: pointer;
  24     outline: 0
  25 }
  26
  27 #chat-app .chat-content {
  28     top: 56px;
  29     bottom: 0;
  30     height: auto;
  31     background: #fff;
  32     border: 1px solid #d3d3d3;
  33     -ms-overflow-style: none;
  34     overflow: auto
  35 }
  36
  37 #chat-app .chat-content .chat-messages {
  38     height: 342px;
  39     overflow: auto;
  40     border-bottom: 1px solid #d3d3d3
  41 }
  42
  43 #chat-app .chat-content .chat-online {
  44     height: 392px;
  45     padding: 20px
  46 }
  47
  48 #chat-app .chat-content .chat-unmanaged {
  49     height: 392px;
  50     padding: 20px
  51 }
  52
  53 #chat-app .avatar-wrapper {
  54     position: relative;
  55     bottom: -3px;
  56     right: 5px
  57 }
  58
  59 #chat-app .chat-content .message-row .bubble {
  60     word-wrap: break-word;
  61     position: relative;
  62     max-width: 268px;
  63     padding: 6px 7px 8px 9px;
  64     background-color: #fff;
  65     border-radius: 6px
  66 }
  67
  68 #chat-app .chat-content .message-row .bubble .message {
  69     white-space: pre-wrap
  70 }
  71
  72 #chat-app .chat-content .message-row .bubble .message-done {
  73     color: #dcdcdc
  74 }
  75
  76 #chat-app .chat-content .message-row .bubble .message-done-all {
  77     color: #00bfff
  78 }
  79
  80 #chat-app .chat-content .message-row .bubble:before {
  81     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=);
  82     content: '';
  83     position: absolute;
  84     left: -11px;
  85     bottom: 3px;
  86     width: 12px;
  87     height: 19px;
  88     background-position: 50% 50%;
  89     background-repeat: no-repeat;
  90     background-size: contain
  91 }
  92
  93 #chat-app .chat-content .message-row .bubble .time {
  94     font-size: 10px;
  95     text-align: right;
  96     margin-bottom: 5px
  97 }
  98
  99 #chat-app .chat-content .message-row.out .avatar {
 100     margin: 0 16px 0 0;
 101     width: 40px;
 102     min-width: 40px;
 103     height: 40px;
 104     line-height: 40px;
 105     border-radius: 50%;
 106     font-weight: 500;
 107     text-align: center;
 108     color: #fff
 109 }
 110
 111 #chat-app .chat-content .message-row.auto {
 112     align-items: flex-end;
 113     font-style: italic
 114 }
 115
 116 #chat-app .chat-content .message-row.auto .avatar {
 117     margin: 0 16px 0 0;
 118     width: 40px;
 119     min-width: 40px;
 120     height: 40px;
 121     line-height: 40px;
 122     border-radius: 50%;
 123     font-size: 17px;
 124     font-style: italic;
 125     font-weight: 500;
 126     text-align: center;
 127     color: #fff
 128 }
 129
 130 #chat-app .chat-content .message-row.in {
 131     align-items: flex-end
 132 }
 133
 134 #chat-app .chat-content .message-row.in2 {
 135     align-items: flex-end
 136 }
 137
 138 #chat-app .chat-content .message-row.out {
 139     align-items: flex-end
 140 }
 141
 142 #chat-app .chat-content .message-row.in2 .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 .chat-content .message-row.in2 .bubble {
 155     margin-right: auto;
 156     background-color: #e8f5e9;
 157     border: 1px solid #dfebe0;
 158     order: 1
 159 }
 160
 161 #chat-app .chat-content .message-row.in2 .bubble:before {
 162     left: -11px;
 163     right: auto;
 164     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=);
 165     -webkit-transform: rotate(180deg);
 166     transform: rotate(180deg)
 167 }
 168
 169 #chat-app .chat-content .message-row.in .avatar {
 170     order: 2;
 171     margin: 0 0 0 16px;
 172     width: 40px;
 173     min-width: 40px;
 174     height: 40px;
 175     line-height: 40px;
 176     border-radius: 50%;
 177     font-weight: 500;
 178     text-align: center;
 179     color: #fff
 180 }
 181
 182 #chat-app .chat-content .message-row.in .bubble {
 183     margin-left: auto;
 184     background-color: #e8f5e9;
 185     border: 1px solid #dfebe0;
 186     order: 1
 187 }
 188
 189 #chat-app .chat-content .message-row.in .bubble:before {
 190     right: -11px;
 191     left: auto;
 192     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=)
 193 }
 194
 195 #chat-app .chat-footer {
 196     width: 100%;
 197     top: -100px !important
 198 }
 199
 200 #waiting {
 201     overflow: visible;
 202     height: 385px;
 203     background: #fff;
 204     text-align: center;
 205     flex: 1 0 auto;
 206     padding: 32px
 207 }
 208
 209 #waiting .subtitle {
 210     margin: 16px 0;
 211     max-width: 300px;
 212     color: rgba(0, 0, 0, .54)
 213 }
 214
 215 .sk-fading-circle {
 216     width: 40px;
 217     height: 40px;
 218     position: relative
 219 }
 220
 221 .sk-fading-circle .sk-circle {
 222     width: 100%;
 223     height: 100%;
 224     position: absolute;
 225     left: 0;
 226     top: 0
 227 }
 228
 229 .sk-fading-circle .sk-circle:before {
 230     content: '';
 231     display: block;
 232     margin: 0 auto;
 233     width: 15%;
 234     height: 15%;
 235     background-color: #333;
 236     border-radius: 100%;
 237     -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
 238     animation: sk-circleFadeDelay 1.2s infinite ease-in-out both
 239 }
 240
 241 .sk-fading-circle .sk-circle2 {
 242     -webkit-transform: rotate(30deg);
 243     -ms-transform: rotate(30deg);
 244     transform: rotate(30deg)
 245 }
 246
 247 .sk-fading-circle .sk-circle3 {
 248     -webkit-transform: rotate(60deg);
 249     -ms-transform: rotate(60deg);
 250     transform: rotate(60deg)
 251 }
 252
 253 .sk-fading-circle .sk-circle4 {
 254     -webkit-transform: rotate(90deg);
 255     -ms-transform: rotate(90deg);
 256     transform: rotate(90deg)
 257 }
 258
 259 .sk-fading-circle .sk-circle5 {
 260     -webkit-transform: rotate(120deg);
 261     -ms-transform: rotate(120deg);
 262     transform: rotate(120deg)
 263 }
 264
 265 .sk-fading-circle .sk-circle6 {
 266     -webkit-transform: rotate(150deg);
 267     -ms-transform: rotate(150deg);
 268     transform: rotate(150deg)
 269 }
 270
 271 .sk-fading-circle .sk-circle7 {
 272     -webkit-transform: rotate(180deg);
 273     -ms-transform: rotate(180deg);
 274     transform: rotate(180deg)
 275 }
 276
 277 .sk-fading-circle .sk-circle8 {
 278     -webkit-transform: rotate(210deg);
 279     -ms-transform: rotate(210deg);
 280     transform: rotate(210deg)
 281 }
 282
 283 .sk-fading-circle .sk-circle9 {
 284     -webkit-transform: rotate(240deg);
 285     -ms-transform: rotate(240deg);
 286     transform: rotate(240deg)
 287 }
 288
 289 .sk-fading-circle .sk-circle10 {
 290     -webkit-transform: rotate(270deg);
 291     -ms-transform: rotate(270deg);
 292     transform: rotate(270deg)
 293 }
 294
 295 .sk-fading-circle .sk-circle11 {
 296     -webkit-transform: rotate(300deg);
 297     -ms-transform: rotate(300deg);
 298     transform: rotate(300deg)
 299 }
 300
 301 .sk-fading-circle .sk-circle12 {
 302     -webkit-transform: rotate(330deg);
 303     -ms-transform: rotate(330deg);
 304     transform: rotate(330deg)
 305 }
 306
 307 .sk-fading-circle .sk-circle2:before {
 308     -webkit-animation-delay: -1.1s;
 309     animation-delay: -1.1s
 310 }
 311
 312 .sk-fading-circle .sk-circle3:before {
 313     -webkit-animation-delay: -1s;
 314     animation-delay: -1s
 315 }
 316
 317 .sk-fading-circle .sk-circle4:before {
 318     -webkit-animation-delay: -.9s;
 319     animation-delay: -.9s
 320 }
 321
 322 .sk-fading-circle .sk-circle5:before {
 323     -webkit-animation-delay: -.8s;
 324     animation-delay: -.8s
 325 }
 326
 327 .sk-fading-circle .sk-circle6:before {
 328     -webkit-animation-delay: -.7s;
 329     animation-delay: -.7s
 330 }
 331
 332 .sk-fading-circle .sk-circle7:before {
 333     -webkit-animation-delay: -.6s;
 334     animation-delay: -.6s
 335 }
 336
 337 .sk-fading-circle .sk-circle8:before {
 338     -webkit-animation-delay: -.5s;
 339     animation-delay: -.5s
 340 }
 341
 342 .sk-fading-circle .sk-circle9:before {
 343     -webkit-animation-delay: -.4s;
 344     animation-delay: -.4s
 345 }
 346
 347 .sk-fading-circle .sk-circle10:before {
 348     -webkit-animation-delay: -.3s;
 349     animation-delay: -.3s
 350 }
 351
 352 .sk-fading-circle .sk-circle11:before {
 353     -webkit-animation-delay: -.2s;
 354     animation-delay: -.2s
 355 }
 356
 357 .sk-fading-circle .sk-circle12:before {
 358     -webkit-animation-delay: -.1s;
 359     animation-delay: -.1s
 360 }
 361
 362 @-webkit-keyframes sk-circleFadeDelay {
 363
 364     0%,
 365     100%,
 366     39% {
 367         opacity: 0
 368     }
 369
 370     40% {
 371         opacity: 1
 372     }
 373 }
 374
 375 @keyframes sk-circleFadeDelay {
 376
 377     0%,
 378     100%,
 379     39% {
 380         opacity: 0
 381     }
 382
 383     40% {
 384         opacity: 1
 385     }
 386 }
 387
 388 md-toast.md-success-toast .md-toast-content {
 389     background-color: green
 390 }
 391
 392 md-toast.md-failure-toast .md-toast-content {
 393     background-color: red
 394 }