jappixmini/jappix/css/mini.css

   1 /*
   2
   3 Jappix - An open social platform
   4 This is the Jappix Mini CSS stylesheet
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Authors: Vanaryon, Julien
  10 Last revision: 16/01/12
  11
  12 */
  13
  14 #jappix_mini,
  15 #jappix_popup {
  16         font: normal 11px helvetica, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
  17 }
  18
  19 #jappix_mini {
  20         margin-left: 130px;
  21         position: fixed;
  22         bottom: 0;
  23         right: 20px;
  24         z-index: 999;
  25 }
  26
  27 #jappix_mini *,
  28 #jappix_popup * {
  29         border: none;
  30         color: black;
  31         width: auto;
  32         height: auto;
  33         margin: 0;
  34         padding: 0;
  35         overflow: visible;
  36         font-size: 11px;
  37         text-align: left;
  38         text-transform: none;
  39         text-shadow: none;
  40         opacity: 1.0;
  41         border-radius: 0;
  42         -moz-border-radius: 0;
  43         -webkit-border-radius: 0;
  44         box-shadow: none;
  45         -moz-box-shadow: none;
  46         -webkit-box-shadow: none;
  47 }
  48
  49 #jappix_mini .jm_images {
  50         background-image: url(../img/sprites/mini.png);
  51         background-repeat: no-repeat;
  52 }
  53
  54 #jappix_mini .jm_images_animate {
  55         background-image: url(../img/sprites/animate.png);
  56         background-repeat: no-repeat;
  57 }
  58
  59 #jappix_mini a {
  60         text-decoration: none;
  61         cursor: pointer;
  62 }
  63
  64 #jappix_mini a:hover {
  65         cursor: pointer;
  66 }
  67
  68 #jappix_mini div.jm_position {
  69         float: right;
  70 }
  71
  72 #jappix_mini a.jm_pane {
  73         background-color: #f4f4f4;
  74         background-position: 0 -100px;
  75         background-repeat: repeat-x;
  76         border-color: #999999;
  77         border-style: solid;
  78         border-width: 1px 1px 0 1px;
  79         font-weight: bold;
  80         outline-style: none;
  81         display: block;
  82         padding: 6px;
  83         height: 13px;
  84 }
  85
  86 #jappix_mini a.jm_pane:hover {
  87         background: white;
  88 }
  89
  90 #jappix_mini a.jm_pane:hover,
  91 #jappix_mini a.jm_pane:focus {
  92         border-color: #666666;
  93 }
  94
  95 #jappix_mini div.jm_starter,
  96 #jappix_mini div.jm_conversations,
  97 #jappix_mini div.jm_conversation {
  98         float: left;
  99         position: relative;
 100 }
 101
 102 #jappix_mini div.jm_conversation {
 103         width: 153px;
 104 }
 105
 106 #jappix_mini a.jm_chat-tab {
 107         border-width: 1px 0 0 1px;
 108         width: 140px;
 109         float: right;
 110         overflow: hidden;
 111 }
 112
 113 #jappix_mini a.jm_chat-tab.jm_clicked {
 114         background: white;
 115         position: relative;
 116         border-top: none;
 117         border-left: 1px solid #999999;
 118         padding-top: 7px;
 119 }
 120
 121 #jappix_mini a.jm_chat-tab span.jm_notify {
 122         position: absolute;
 123         top: 6px;
 124         right: 9px;
 125 }
 126
 127 #jappix_mini a.jm_chat-tab span.jm_notify span {
 128         float: left;
 129 }
 130
 131 #jappix_mini a.jm_chat-tab span.jm_notify span.jm_notify_left {
 132         background-position: 0 -360px;
 133 }
 134
 135 #jappix_mini a.jm_chat-tab span.jm_notify span.jm_notify_right {
 136         background-position: -7px -360px;
 137 }
 138
 139 #jappix_mini a.jm_chat-tab span.jm_notify span.jm_notify_left,
 140 #jappix_mini a.jm_chat-tab span.jm_notify span.jm_notify_right {
 141         height: 16px;
 142         width: 7px;
 143 }
 144
 145 #jappix_mini a.jm_chat-tab span.jm_notify span.jm_notify_middle {
 146         background-color: #c60505;
 147         color: white;
 148         font-size: 0.85em;
 149         height: 14px;
 150         padding-top: 2px;
 151 }
 152
 153 #jappix_mini div.jm_conversation.jm_type_groupchat span.jm_name {
 154         margin-left: 4px;
 155 }
 156
 157 #jappix_mini div.jm_chat-content {
 158         background-color: white;
 159         border: 1px solid #999999;
 160         height: 300px;
 161         width: 260px;
 162         position: absolute;
 163         right: -1px;
 164         bottom: 25px;
 165         display: none;
 166 }
 167
 168 #jappix_mini div.jm_actions {
 169         background-color: #565d5e;
 170         border-bottom: 1px solid #3a3a3a;
 171         height: 14px;
 172         padding: 4px 6px;
 173         font-weight: bold;
 174         overflow: hidden;
 175 }
 176
 177 #jappix_mini div.jm_actions span.jm_nick {
 178         color: white;
 179         height: 16px;
 180         width: 225px;
 181         overflow: hidden;
 182         float: left;
 183 }
 184
 185 #jappix_mini div.jm_actions a.jm_one-action {
 186         background-color: #727879;
 187         margin: 0 -2px 0 5px;
 188         height: 15px;
 189         width: 15px;
 190         outline-style: none;
 191         float: right;
 192 }
 193
 194 #jappix_mini div.jm_actions a.jm_one-action:hover,
 195 #jappix_mini div.jm_actions a.jm_one-action:focus {
 196         background-color: #7f8788;
 197 }
 198
 199 #jappix_mini div.jm_actions a.jm_one-action:active {
 200         background-color: #8c9293;
 201 }
 202
 203 #jappix_mini div.jm_actions a.jm_logo {
 204         background-position: 7px 2px;
 205         width: 81px;
 206         height: 22px;
 207         margin: -4px 0 0 -2px;
 208         outline-style: none;
 209         float: left;
 210 }
 211
 212 #jappix_mini div.jm_actions a.jm_logo:hover,
 213 #jappix_mini div.jm_actions a.jm_logo:focus {
 214         background-color: #636a6b;
 215 }
 216
 217 #jappix_mini div.jm_actions a.jm_logo:active {
 218         background-color: #707677;
 219 }
 220
 221 #jappix_mini div.jm_actions a.jm_close {
 222         background-position: 1px -341px;
 223 }
 224
 225 #jappix_mini div.jm_actions a.jm_join {
 226         background-position: 0 -327px;
 227 }
 228
 229 #jappix_mini div.jm_received-messages {
 230         background-color: white;
 231         padding: 5px 0 4px;
 232         height: 242px;
 233         overflow: auto;
 234 }
 235
 236 #jappix_mini div.jm_received-messages p {
 237         margin: 3px 0;
 238         word-wrap: break-word;
 239 }
 240
 241 #jappix_mini div.jm_received-messages p,
 242 #jappix_mini div.jm_received-messages a {
 243         color: black !important;
 244 }
 245
 246 #jappix_mini div.jm_received-messages div.jm_group {
 247         margin: 2px 6px 9px 6px;
 248         padding-bottom: 8px;
 249         border-bottom: 1px solid #eaeaea;
 250 }
 251
 252 #jappix_mini div.jm_received-messages div.jm_system-message p,
 253 #jappix_mini div.jm_received-messages div.jm_system-message a {
 254         color: #053805 !important;
 255         font-style: italic !important;
 256 }
 257
 258 #jappix_mini div.jm_received-messages p a {
 259         text-decoration: underline;
 260 }
 261
 262 #jappix_mini div.jm_received-messages b {
 263         margin-bottom: 3px;
 264         display: block;
 265 }
 266
 267 #jappix_mini div.jm_received-messages b.jm_me {
 268         color: #123a5c;
 269 }
 270
 271 #jappix_mini div.jm_received-messages b.jm_him {
 272         color: #801e1e;
 273 }
 274
 275 #jappix_mini div.jm_received-messages span.jm_date {
 276         font-size: 0.8em;
 277         float: right;
 278         display: none;
 279 }
 280
 281 #jappix_mini div.jm_received-messages div.jm_group:hover span.jm_date {
 282         display: block;
 283 }
 284
 285 #jappix_mini input.jm_send-messages {
 286         background-color: white;
 287         border-color: #999999;
 288         border-style: solid;
 289         border-width: 1px 0 0 0;
 290         padding: 5px;
 291         width: 250px;
 292         min-height: 14px;
 293 }
 294
 295 #jappix_mini div.jm_disabled div.jm_chat-content,
 296 #jappix_mini div.jm_disabled input.jm_send-messages,
 297 #jappix_mini div.jm_disabled a.jm_pane {
 298         background: #f3f3f3 !important;
 299 }
 300
 301 #jappix_mini div.jm_disabled input.jm_send-messages {
 302         color: #9d9d9d;
 303 }
 304
 305 #jappix_mini div.jm_roster {
 306         background-color: white;
 307         border: 1px solid #999999;
 308         width: 160px;
 309         position: absolute;
 310         right: 0;
 311         bottom: 25px;
 312         display: none;
 313 }
 314
 315 #jappix_mini div.jm_roster div.jm_buddies {
 316         width: 100%;
 317         max-height: 300px;
 318         padding: 5px 0;
 319         overflow: auto;
 320 }
 321
 322 #jappix_mini div.jm_roster div.jm_grouped {
 323         margin: 2px 0;
 324 }
 325
 326 #jappix_mini div.jm_roster div.jm_grouped div.jm_name {
 327         margin-bottom: 2px;
 328         padding: 4px 8px 0;
 329         font-weight: bold;
 330 }
 331
 332 #jappix_mini a.jm_friend {
 333         border-color: white;
 334         border-style: solid;
 335         border-width: 1px 0;
 336         outline-style: none;
 337         padding: 6px;
 338         display: block;
 339 }
 340
 341 #jappix_mini a.jm_friend.jm_offline {
 342         display: none;
 343 }
 344
 345 #jappix_mini a.jm_friend:hover,
 346 #jappix_mini a.jm_friend:focus {
 347         background-color: #888888;
 348         border-color: #494949;
 349         color: white;
 350 }
 351
 352 #jappix_mini a.jm_friend:hover span.jm_presence,
 353 #jappix_mini a.jm_friend:focus span.jm_presence {
 354         background-position: 0 -84px;
 355 }
 356
 357 #jappix_mini a.jm_button {
 358         padding: 6px 10px;
 359         position: relative;
 360         z-index: 1;
 361 }
 362
 363 #jappix_mini a.jm_button.jm_clicked {
 364         background: white;
 365         border-top: none;
 366         border-left: 1px solid #999999;
 367         border-right: 1px solid #999999;
 368         padding: 7px 10px 6px 10px;
 369 }
 370
 371 #jappix_mini span.jm_animate {
 372         background-position: 0 0;
 373         width: 111px;
 374         height: 102px;
 375         position: absolute;
 376         top: -100px;
 377         left: -74px;
 378         z-index: 1;
 379         display: block;
 380 }
 381
 382 #jappix_mini span.jm_counter {
 383         background-position: 0 -288px;
 384         color: #333333;
 385         height: 16px;
 386         padding-left: 25px;
 387         display: block;
 388 }
 389
 390 #jappix_mini span.jm_counter.jm_error {
 391         background-position: 0 -305px;
 392 }
 393
 394 #jappix_mini span.jm_presence {
 395         display: block;
 396         height: 16px;
 397         width: 16px;
 398         margin-right: 4px;
 399         float: left;
 400 }
 401
 402 #jappix_mini span.jm_name {
 403         color: #272727;
 404         height: 14px;
 405         width: 105px;
 406         overflow: hidden;
 407         float: left;
 408 }
 409
 410 #jappix_mini .jm_available,
 411 #jappix_mini .jm_chat {
 412         background-position: 0 -20px;
 413 }
 414
 415 #jappix_mini .jm_away {
 416         background-position: 0 -36px;
 417 }
 418
 419 #jappix_mini .jm_xa,
 420 #jappix_mini .jm_dnd {
 421         background-position: 0 -52px;
 422 }
 423
 424 #jappix_mini .jm_unavailable {
 425         background-position: 0 -68px;
 426 }
 427
 428 #jappix_mini .jm_smiley {
 429         border: 0 none;
 430         height: 16px;
 431         width: 16px;
 432         vertical-align: bottom;
 433 }
 434
 435 #jappix_mini .jm_smiley-wink {
 436         background-position: 0 -148px;
 437 }
 438
 439 #jappix_mini .jm_smiley-waii {
 440         background-position: 0 -164px;
 441 }
 442
 443 #jappix_mini .jm_smiley-unhappy {
 444         background-position: 0 -180px;
 445 }
 446
 447 #jappix_mini .jm_smiley-tongue {
 448         background-position: 0 -196px;
 449 }
 450
 451 #jappix_mini .jm_smiley-surprised {
 452         background-position: 0 -212px;
 453 }
 454
 455 #jappix_mini .jm_smiley-smile {
 456         background-position: 0 -228px;
 457 }
 458
 459 #jappix_mini .jm_smiley-happy {
 460         background-position: 0 -244px;
 461 }
 462
 463 #jappix_mini .jm_smiley-grin {
 464         background-position: 0 -260px;
 465 }
 466
 467 #jappix_popup {
 468         background: url(../img/others/blank.gif) repeat;
 469         position: fixed;
 470         top: 0;
 471         bottom: 0;
 472         left: 0;
 473         right: 0;
 474         z-index: 999;
 475 }
 476
 477 #jappix_popup div.jm_prompt {
 478         background-color: #565d5e;
 479         border: 1px solid #3a3a3a;
 480         width: 346px;
 481         position: fixed;
 482         top: 50%;
 483         left: 50%;
 484         margin-left: -175px;
 485         padding: 16px 2px 2px 2px;
 486         border-top-right-radius: 4px;
 487         border-top-left-radius: 4px;
 488         -moz-border-radius-topright: 4px;
 489         -moz-border-radius-topleft: 4px;
 490         -webkit-border-top-right-radius: 4px;
 491         -webkit-border-top-left-radius: 4px;
 492         box-shadow: 0 0 35px #232323;
 493         -moz-box-shadow: 0 0 35px #232323;
 494         -webkit-box-shadow: 0 0 35px #232323;
 495 }
 496
 497 #jappix_popup div.jm_prompt form {
 498         background-color: white;
 499         border: 1px solid #3a3a3a;
 500         width: 332px;
 501         padding: 6px;
 502 }
 503
 504 #jappix_popup div.jm_prompt form input {
 505         background-color: #f9f9f9;
 506         border: 1px solid #666666;
 507         font-size: 1.1em;
 508         padding: 1px 2px;
 509 }
 510
 511 #jappix_popup div.jm_prompt form input:hover,
 512 #jappix_popup div.jm_prompt form input:focus {
 513         border: 1px solid #202020;
 514 }
 515
 516 #jappix_popup div.jm_prompt form input.jm_text {
 517         width: 326px;
 518         margin: 6px 0;
 519         display: block;
 520 }
 521
 522 #jappix_popup div.jm_prompt form input.jm_submit {
 523         text-align: center;
 524         margin-left: 3px;
 525         float: right;
 526 }
 527
 528 #jappix_popup div.jm_prompt form input.jm_submit:hover,
 529 #jappix_popup div.jm_prompt form input.jm_submit:focus {
 530         background-color: #f3f3f3;
 531         cursor: pointer;
 532 }
 533
 534 #jappix_popup div.jm_prompt form input.jm_submit:active {
 535         background-color: #e8e8e8;
 536 }
 537
 538 #jappix_popup div.jm_prompt div.jm_clear {
 539         clear: both;
 540 }