server/components/xchatty/xchatty.css

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