server/components/xchatty/xchatty.css

   1 .xc_label {
   2   display: inline-block;
   3   max-width: 100%;
   4   margin-bottom: 5px;
   5   font-weight: bold;
   6 }
   7
   8 .xc_online_message {
   9   text-align: center;
  10 }
  11
  12 .xc_div_group {
  13         margin: 10px 0 10px 0;
  14 }
  15
  16 .xc_footer
  17 {
  18         text-align: center;
  19         padding-bottom: 5px;
  20 }
  21
  22 .xc_powered
  23 {
  24         color: grey;
  25   font: 10px/16px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
  26         padding-bottom: 5px;
  27 }
  28
  29 .xc_chat_container
  30 {
  31         width:379px;
  32         position:fixed;
  33         bottom:0;
  34         right:50px;
  35         z-index:9999;
  36         background-color:transparent;
  37 }
  38
  39 .xc_chat_container *
  40 {
  41         font-family:Arial,Helvetica,sans-serif;
  42         font-size:13px;
  43         margin:0;
  44         padding:0;
  45 }
  46
  47 .xc_chat_container p
  48 {
  49         margin:5px 0;
  50 }
  51
  52 .xc_signup_wrapper
  53 {
  54         max-height:375px;
  55 }
  56
  57 .xc_conversation_container
  58 {
  59         max-height:375px;
  60         list-style:none;
  61         overflow:auto;
  62         margin:0;
  63         padding:20px 10px;
  64 }
  65
  66 .xc_conversation_container a
  67 {
  68         color:#036;
  69 }
  70
  71 .xc_conversation_container a.xc_btn_style
  72 {
  73         color:#fff;
  74 }
  75
  76 div.xc_chat_head
  77 {
  78         color:#fff;
  79         background:{{color}};
  80         /*border-radius: 20px 20px 0px 0px !important;*/
  81         height:52px;
  82         line-height:55px;
  83         cursor:pointer;
  84 }
  85
  86 div.xc_chat_head.rounded
  87 {
  88         border-radius: 20px 20px 0px 0px !important;
  89 }
  90
  91 div.xc_chat_head.squared
  92 {
  93         /*border-radius: 20px 20px 0px 0px !important;*/
  94 }
  95
  96 .xc_chat_head-title
  97 {
  98         margin:5px 0 0 15px;
  99         color: #fff;
 100 }
 101
 102 .xc_header_icon
 103 {
 104         display:block;
 105         background-image:url({{& assetBase}}?resource=images/icon_visitorchat.png);
 106         width:21px;
 107         height:16px;
 108         float:right;
 109         margin:20px 20px 0 0;
 110 }
 111
 112 .xc_header_icon span.xc_notification_badge span
 113 {
 114         display:block;
 115         height:16px;
 116         width:15px;
 117         text-align:center;
 118         font-size:9px;
 119         color:#555;
 120         position:relative;
 121         top:-20px;
 122         left:4px;
 123         margin:0;
 124         padding:0;
 125 }
 126
 127 .xc_sub-head-spacer
 128 {
 129         padding:1px;
 130 }
 131
 132 .xc_conversation
 133 {
 134         display:none;
 135         margin:0 12px 0 11px;
 136 }
 137
 138 .xc_chat_toggle_container
 139 {
 140         /*background:mediumslateblue center -52px;*/
 141         background: white;
 142         border-style: solid;
 143   border-width: 1px;
 144         border-color: {{color}};
 145         display:none;
 146 }
 147
 148 .xc_signup_wrapper,.xc_notifications_wrapper,.xc_enquiry_wrapper
 149 {
 150         display:none;
 151         overflow:auto;
 152         line-height:1;
 153         padding:25px;
 154 }
 155
 156 .xc_exit_chat_container
 157 {
 158         text-align:right;
 159         width:95%;
 160         margin:0 auto;
 161         padding:5px 1px 0 0;
 162 }
 163
 164 .xc_exit_chat_container span,.xc_exit_chat_container a
 165 {
 166         font-size:80%;
 167         color:#666;
 168         text-decoration:none;
 169 }
 170
 171 .xc_exit_chat_container a:hover
 172 {
 173         color:#333;
 174 }
 175
 176 a.xc_btn_exit_chat_confirm:hover
 177 {
 178         color:red;
 179 }
 180
 181 a.xc_btn_exit_chat_cancel:hover
 182 {
 183         color:#0c0;
 184 }
 185
 186 form.xc_form_reply
 187 {
 188         position:relative;
 189 }
 190
 191 .xc_form_reply
 192 {
 193         /*background-color:#e3e3e3;*/
 194         text-align:center;
 195         /*border-top:1px solid #d3d3d3;*/
 196 }
 197
 198 .xc_input_message
 199 {
 200         height:100px;
 201         margin:10px auto 5px;
 202 }
 203
 204 .xc_input_enquiry_message
 205 {
 206         height:100px;
 207 }
 208
 209 .xc_form_signup,.xc_form_enquiry
 210 {
 211         /*text-align:center;*/
 212 }
 213
 214 .xc_chat_container textarea,
 215 .xc_chat_container input[type=text],
 216 .xc_chat_container select
 217 {
 218         width:95%;
 219         min-width:95%;
 220         max-width:95%;
 221         -webkit-box-sizing:border-box;
 222         -moz-box-sizing:border-box;
 223         box-sizing:border-box;
 224         background-color:#fff;
 225         border:1px solid #ccc;
 226         -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
 227         -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
 228         box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
 229         -webkit-transition:border linear .2s, box-shadow linear .2s;
 230         -moz-transition:border linear .2s, box-shadow linear .2s;
 231         -o-transition:border linear .2s, box-shadow linear .2s;
 232         transition:border linear .2s, box-shadow linear .2s;
 233         display:inline-block;
 234         font-size:14px;
 235         line-height:20px;
 236         color:#555;
 237         -webkit-border-radius:4px;
 238         -moz-border-radius:4px;
 239         border-radius:4px;
 240         vertical-align:middle;
 241         margin:3px 0;
 242         padding:4px 6px;
 243         resize: none;
 244 }
 245
 246 .xc_chat_container textarea:focus,.xc_chat_container input[type=text]:focus
 247 {
 248         outline: {{colorFocus}} auto 5px;
 249 }
 250
 251 .xc_chat_container input[type=text]
 252 {
 253         height: 30px;
 254 }
 255
 256 .xc_message_sending textarea, .xc_enquiry_sending textarea
 257 {
 258         background: #fff url({{& assetBase}}?resource=images/loading.gif) 98% 5px no-repeat;
 259 }
 260
 261 .xc_chatrow
 262 {
 263         display:block;
 264         border-top:1px dashed #e3e3e3;
 265         margin:5px 0;
 266         clear: both;
 267 }
 268
 269 .xc_chatrow p
 270 {
 271         color:#444;
 272         word-wrap:break-word;
 273 }
 274
 275 .xc_time
 276 {
 277         float:right;
 278         font-size:80%;
 279         color:#ccc;
 280         padding-left:12px;
 281         margin:3px;
 282 }
 283
 284 .xc_submission_pending
 285 {
 286         background:transparent url({{& assetBase}}?resource=images/bullet_clock.png) left center no-repeat;
 287 }
 288
 289 .xc_submission_confirmed
 290 {
 291         background:transparent url({{& assetBase}}?resource=images/bullet_tick.png) left center no-repeat;
 292 }
 293
 294 .xc_fullname
 295 {
 296         font-weight:700;
 297 }
 298
 299 .xc_fullname:after
 300 {
 301         content:":";
 302 }
 303
 304 .xc_avatar
 305 {
 306         float: left;
 307         margin: 0 5px 5px 0;
 308         display: inline-block;
 309         width: 40px;
 310         height: 40px;
 311         border-radius: 5px;
 312         -moz-border-radius: 5px;
 313         -webkit-border-radius: 5px;
 314 }
 315
 316 .xc_smilie
 317 {
 318         background-repeat:no-repeat;
 319         display:inline-block;
 320         width:18px;
 321         height:18px;
 322         text-indent:-9999px;
 323         white-space:nowrap;
 324 }
 325
 326 .xc_btn_load_more
 327 {
 328         width:100%!important;
 329 }
 330
 331 .xc_notifications_wrapper
 332 {
 333         text-shadow:0 1px 0 rgba(255,255,255,0.5);
 334 }
 335
 336 .xc_notification_success
 337 {
 338         color:#468847;
 339 }
 340
 341 .xc_notification_error
 342 {
 343         color:#b94a48;
 344 }
 345
 346 .xc_errorlist
 347 {
 348         margin:0 0 0 25px;
 349         padding:0;
 350 }
 351
 352 i.xc_btn_notifications_close
 353 {
 354         float:right;
 355         font-weight:700;
 356         font-size:20px;
 357         color:#ccc;
 358         cursor:pointer;
 359         margin:-15px 0 0;
 360         padding:0;
 361 }
 362
 363 .xc_btn_style
 364 {
 365         width:95%;
 366         text-align:center;
 367         line-height:1.2;
 368         font-size:90%;
 369         -moz-box-shadow:inset 0 1px 0 0 {{colorButton}};
 370         -webkit-box-shadow:inset 0 1px 0 0 {{colorButton}};
 371         box-shadow:inset 0 1px 0 0 {{colorButton}};
 372         background:0;
 373         background-color:{{colorButton}};
 374         -moz-border-radius:4px;
 375         -webkit-border-radius:4px;
 376         border-radius:4px;
 377         border:1px solid {{colorButton}};
 378         display:inline-block;
 379         color:#fff;
 380         font-weight:700;
 381         text-decoration:none;
 382         text-shadow:1px 1px 0 #000c17;
 383         margin:5px auto 5px;
 384         padding:2px 0;
 385 }
 386
 387 .xc_btn_style:hover
 388 {
 389         background:0;
 390         background-color:{{colorButton}};
 391     color: #fff;
 392         text-decoration: none;
 393 }
 394
 395 .xc_btn_style:active
 396 {
 397         position:relative;
 398         top:1px;
 399 }
 400
 401 .xc_composing_container
 402 {
 403         display: none;
 404   width: 95%;
 405   margin: 0 auto;
 406   background: transparent url({{& assetBase}}?resource=images/bullet_pencil.png) 6px center no-repeat;
 407   padding-left: 19px;
 408   font-style: italic;
 409 }
 410
 411 @media only screen and (max-height: 620px) {
 412         .xc_conversation_container
 413         {
 414                 max-height:300px!important;
 415         }
 416 }
 417
 418 @media only screen and (max-height: 545px) {
 419         .xc_conversation_container
 420         {
 421                 max-height:200px!important;
 422         }
 423 }
 424
 425 @media only screen and (max-height: 445px) {
 426         .xc_conversation_container
 427         {
 428                 max-height:150px!important;
 429         }
 430 }
 431
 432 @media only screen and (max-width: 480px) {
 433         .xc_chat_container
 434         {
 435                 width:95%!important;
 436                 right:auto!important;
 437                 -webkit-border-top-left-radius:15px;
 438                 -webkit-border-top-right-radius:15px;
 439                 -moz-border-radius-topleft:15px;
 440                 -moz-border-radius-topright:15px;
 441                 border-top-left-radius:15px;
 442                 border-top-right-radius:15px;
 443                 box-shadow:0 0 5px rgba(0,0,0,.5);
 444                 -webkit-box-shadow:0 0 5px rgba(0,0,0,.5);
 445                 -moz-box-shadow:0 0 5px rgba(0,0,0,.5);
 446         }
 447
 448         div.xc_chat_head
 449         {
 450                 background-color:#036;
 451                 background-image:none;
 452                 line-height:25px;
 453                 height:auto;
 454                 -webkit-border-top-left-radius:15px;
 455                 -webkit-border-top-right-radius:15px;
 456                 -moz-border-radius-topleft:15px;
 457                 -moz-border-radius-topright:15px;
 458                 border-top-left-radius:15px;
 459                 border-top-right-radius:15px;
 460                 padding:10px;
 461         }
 462
 463         .xc_chat_toggle_container
 464         {
 465                 background-color:#fff;
 466                 background-image:none;
 467                 border-color:#036;
 468                 border-style:solid;
 469                 border-width:0 1px;
 470         }
 471
 472         .xc_header_icon
 473         {
 474                 background-image:url({{& assetBase}}?resource=images/icon_visitorchat.png);
 475                 margin:0;
 476         }
 477
 478         .xc_header_icon span.xc_notification_badge span
 479         {
 480                 top:-5px;
 481                 left:5px;
 482         }
 483
 484         .xc_notification_success
 485         {
 486                 background-color:#dff0d8;
 487                 border:1px solid #d6e9c6;
 488         }
 489
 490         .xc_conversation_container
 491         {
 492                 max-height:375px;
 493                 border-color:#036;
 494         }
 495
 496         .xc_notification_error
 497         {
 498                 background-color:#f2dede;
 499                 border:1px solid #eed3d7;
 500         }
 501
 502         .xc_sub-head-spacer
 503         {
 504                 display:none;
 505                 padding:0;
 506         }
 507
 508         .xc_chat_head-title,.xc_conversation
 509         {
 510                 margin:0;
 511         }
 512 }