snippet/1.0.9/styles/app.css

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