jappixmini/jappix/css/popup.css

   1 /*
   2
   3 Jappix - An open social platform
   4 This is the popup CSS stylesheet for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 02/05/11
  11
  12 */
  13
  14 .lock {
  15         background-color: rgb(0,0,0);
  16         background-color: rgba(0,0,0,0.6);
  17         left: 0;
  18         right: 0;
  19         top: 0;
  20         bottom: 0;
  21         position: fixed;
  22         z-index: 9999;
  23 }
  24
  25 .popup {
  26         background-color: rgb(20,20,20);
  27         background-color: rgba(20,20,20,0.95);
  28         margin-top: -250px;
  29         margin-left: -330px;
  30         width: 640px;
  31         height: 500px;
  32         padding: 0 10px;
  33         position: absolute;
  34         z-index: 10000;
  35         left: 50%;
  36         top: 50%;
  37         border-radius: 5px;
  38         -moz-border-radius: 5px;
  39         -webkit-border-radius: 5px;
  40         box-shadow: 0 0 35px #232323;
  41         -moz-box-shadow: 0 0 35px #232323;
  42         -webkit-box-shadow: 0 0 35px #232323;
  43 }
  44
  45 .popup.large {
  46         margin-left: -460px;
  47         width: 920px;
  48 }
  49
  50 .popup .top {
  51         width: 600px;
  52         height: 45px;
  53         font-size: 1.2em;
  54         padding-top: 9px;
  55         color: white;
  56         margin: 14px 0 0 40px;
  57         text-transform: uppercase;
  58         text-decoration: none;
  59         font-weight: bold;
  60         text-shadow: 0 2px 2px black;
  61 }
  62
  63 .popup .tab {
  64         width: 620px;
  65         height: 25px;
  66         margin: -5px 10px 0 10px;
  67         position: relative;
  68         z-index: 1;
  69 }
  70
  71 .popup .tab a {
  72         background-color: #d9e7ea;
  73         color: #204249;
  74         width: 180px;
  75         height: 17px;
  76         padding: 4px 4px 4px 16px;
  77         margin-left: 5px;
  78         font-size: 0.94em;
  79         overflow: hidden;
  80         float: left;
  81         border-top-right-radius: 3px;
  82         border-top-left-radius: 3px;
  83         -moz-border-radius-topright: 3px;
  84         -moz-border-radius-topleft: 3px;
  85         -webkit-border-top-right-radius: 3px;
  86         -webkit-border-top-left-radius: 3px;
  87 }
  88
  89 .popup .tab a:hover,
  90 .popup .tab a:focus {
  91         background-color: #cedee1;
  92         text-decoration: none;
  93 }
  94
  95 .popup .tab a:active {
  96         background-color: #c3d3d7;
  97         text-decoration: none;
  98 }
  99
 100 .popup .tab a.tab-active {
 101         background-color: #e4eef9 !important;
 102 }
 103
 104 .popup .one-lap {
 105         display: none;
 106 }
 107
 108 .popup .one-lap.lap-active {
 109         display: block;
 110 }
 111
 112 .popup .content {
 113         background: #e4eef9;
 114         background: -moz-linear-gradient(top, #e4eef9, #D0E5FA);
 115         background: -webkit-gradient(linear, left top, left bottom, from(#e4eef9), to(#D0E5FA));
 116         height: 358px;
 117         width: 640px;
 118         position: absolute;
 119         left: 10px;
 120         border-radius: 3px;
 121         -moz-border-radius: 3px;
 122         -webkit-border-radius: 3px;
 123         box-shadow: 0 0 20px black;
 124         -moz-box-shadow: 0 0 20px black;
 125         -webkit-box-shadow: 0 0 20px black;
 126 }
 127
 128 .popup .content,
 129 .popup .content a {
 130         color: #112a2f;
 131 }
 132
 133 .popup.large div.comments {
 134         background-color: #f4f4f4;
 135         width: 272px;
 136         margin: 0;
 137         position: absolute;
 138         right: 10px;
 139         top: 63px;
 140         bottom: 10px;
 141         overflow-x: hidden;
 142         overflow-y: auto;
 143         border-radius: 3px;
 144         -moz-border-radius: 3px;
 145         -webkit-border-radius: 3px;
 146 }
 147
 148 .popup.large div.comments div.comments-content {
 149         font-size: 0.8em;
 150 }
 151
 152 .popup.large div.comments input {
 153         width: 185px;
 154         min-width: 0;
 155 }
 156
 157 .popup.large div.comments .one-comment {
 158         padding-bottom: 4px;
 159 }
 160
 161 .popup.large div.comments .one-comment a {
 162         text-decoration: underline;
 163 }
 164
 165 .popup.large div.comments div.comments-content {
 166         border-top-right-radius: 3px;
 167         border-top-left-radius: 3px;
 168         -moz-border-radius-topright: 3px;
 169         -moz-border-radius-topleft: 3px;
 170         -webkit-border-top-right-radius: 3px;
 171         -webkit-border-top-left-radius: 3px;
 172 }
 173
 174 .popup .head {
 175         background: #f1f6fd;
 176         border: 1px #9dc4fc solid;
 177         width: 606px;
 178         height: 24px;
 179         margin: 0 10px 10px 10px;
 180         padding: 6px;
 181 }
 182
 183 .popup .head-text {
 184         float: left;
 185         font-size: 0.9em;
 186         margin: 3px;
 187 }
 188
 189 .popup .head-actions {
 190         float: right;
 191         margin-top: 2px;
 192 }
 193
 194 .popup .head-actions a {
 195         font-size: 0.9em;
 196         margin: 0 4px;
 197 }
 198
 199 .popup .actions a {
 200         color: #30575f;
 201         font-size: 0.9em;
 202         margin-left: 5px;
 203 }
 204
 205 .popup .head .head-input {
 206         float: right;
 207         width: 200px;
 208         padding: 2px;
 209 }
 210
 211 .popup .head .head-select {
 212         float: right;
 213         height: 24px;
 214 }
 215
 216 .popup .forms {
 217         width: 390px;
 218         height: 328px;
 219         margin: 15px;
 220         float: left;
 221 }
 222
 223 .popup fieldset {
 224         border: 1px #547177 solid;
 225         margin: 0 0 15px 0;
 226         padding: 8px 2px 3px 2px;
 227         border-radius: 3px;
 228         -moz-border-radius: 3px;
 229         -webkit-border-radius: 3px;
 230 }
 231
 232 .popup legend {
 233         font-size: 0.9em;
 234         margin: 0 0 0 15px;
 235         padding: 0 2px;
 236         text-transform: uppercase;
 237 }
 238
 239 .popup label {
 240         color: #1b1b1b;
 241         width: 150px;
 242         margin: 0 0 10px 12px;
 243         clear: both;
 244         float: left;
 245 }
 246
 247 .popup input,
 248 .popup select {
 249         margin: 0 10px 10px 0;
 250         float: left;
 251 }
 252
 253 .popup input[type=text] {
 254         min-width: 174px;
 255 }
 256
 257 .popup select {
 258         min-height: 20px;
 259 }
 260
 261 .popup .results {
 262         height: 310px;
 263         width: 620px;
 264         margin: -5px 0 0 10px;
 265         padding: 6px 0 0 0;
 266         overflow: auto;
 267 }
 268
 269 .popup .results .no-results {
 270         margin: 6px 0;
 271         font-size: 0.85em;
 272         font-weight: bold;
 273 }
 274
 275 .popup .results label {
 276         width: 180px;
 277         margin: 6px 4px 4px 4px;
 278 }
 279
 280 .popup .results input,
 281 .popup .results textarea,
 282 .popup .results select {
 283         margin: 4px;
 284 }
 285
 286 .popup .results input,
 287 .popup .results select {
 288         min-width: 180px;
 289 }
 290
 291 .popup .results input[type=checkbox],
 292 .popup .results input[type=radio] {
 293         margin-top: 7px;
 294 }
 295
 296 .popup .results textarea {
 297         width: 380px;
 298 }
 299
 300 .popup .results .avatar-container {
 301         float: left;
 302         width: 60px;
 303         height: 60px;
 304         margin: 5px 12px 5px 9px;
 305         text-align: center;
 306         background-repeat: no-repeat;
 307 }
 308
 309 .popup .results img.avatar {
 310         max-width: 60px;
 311         max-height: 60px;
 312 }
 313
 314 .popup .results .one-icon {
 315         height: 16px;
 316         width: 16px;
 317         margin: 10px 3px 0 8px;
 318         float: left;
 319 }
 320
 321 .popup .results .one-icon.account,
 322 .popup .results .one-icon.auth {
 323         background-position: 0 -777px;
 324 }
 325
 326 .popup .results .one-icon.automation,
 327 .popup .results .one-icon.client {
 328         background-position: 0 -1500px;
 329 }
 330
 331 .popup .results .one-icon.collaboration {
 332         background-position: 0 -1520px;
 333 }
 334
 335 .popup .results .one-icon.proxy,
 336 .popup .results .one-icon.server,
 337 .popup .results .one-icon.others {
 338         background-position: 0 -1540px;
 339 }
 340
 341 .popup .results .one-icon.component,
 342 .popup .results .one-icon.gateway {
 343         background-position: 0 -1560px;
 344 }
 345
 346 .popup .results .one-icon.conference {
 347         background-position: 0 -1082px;
 348 }
 349
 350 .popup .results .one-icon.directory {
 351         background-position: 0 -876px;
 352 }
 353
 354 .popup .results .one-icon.headline,
 355 .popup .results .one-icon.hierarchy {
 356         background-position: 0 -1580px;
 357 }
 358
 359 .popup .results .one-icon.pubsub,
 360 .popup .results .one-icon.store {
 361         background-position: 0 -1600px;
 362 }
 363
 364 .popup .results .one-icon.loading {
 365         background-position: 0 -1620px;
 366 }
 367
 368 .popup .results .one-icon.down {
 369         background-position: 0 -1640px;
 370 }
 371
 372 .popup .results .one-host {
 373         font-weight: bold;
 374         width: 170px;
 375 }
 376
 377 .popup .results .one-type {
 378         width: 210px;
 379 }
 380
 381 .popup .results .one-type,
 382 .popup .results .one-host {
 383         float: left;
 384         overflow: hidden;
 385         margin: 9px 8px;
 386 }
 387
 388 .popup .results .one-jid,
 389 .popup .results .one-ctry,
 390 .popup .results .one-fn {
 391         margin: 4px;
 392         width: 400px;
 393 }
 394
 395 .popup .results .one-fn {
 396         font-weight: bold;
 397 }
 398
 399 .popup .results .one-jid {
 400         margin-top: 8px;
 401         font-size: 0.9em;
 402 }
 403
 404 .popup .results .one-name {
 405         float: left;
 406         margin: 4px;
 407 }
 408
 409 .popup a.one-button {
 410         display: none;
 411         background-color: #f1f6fd;
 412         border: 1px solid #b9cbcf;
 413         margin-top: 1px;
 414         padding: 4px 8px;
 415         text-decoration: none;
 416         border-radius: 2px;
 417         -moz-border-radius: 2px;
 418         -webkit-border-radius: 2px;
 419 }
 420
 421 .popup a.one-button:hover,
 422 .popup a.one-button:focus {
 423         border: 1px solid #95b1b7;
 424 }
 425
 426 .popup a.one-button:active {
 427         border: 1px solid #77989f;
 428 }
 429
 430 .popup .results .oneresult:hover a.one-button {
 431         display: block;
 432 }
 433
 434 .popup .results a.one-button,
 435 #inbox .one-message a.one-button {
 436         float: right;
 437         padding: 3px 6px;
 438         margin-right: 4px;
 439 }
 440
 441 .popup .results a.one-vjud {
 442         position: absolute;
 443         right: 4px;
 444 }
 445
 446 .popup .results a.one-add {
 447         top: 8px;
 448 }
 449
 450 .popup .results a.one-chat {
 451         top: 42px;
 452 }
 453
 454 .popup .results .one-next {
 455         float: right;
 456         margin: 4px 8px 4px 4px;
 457         font-weight: bold;
 458 }
 459
 460 .popup .results .one-actions {
 461         width: 148px;
 462         margin: 4px;
 463         float: left;
 464 }
 465
 466 .popup .results .one-actions a {
 467         width: 16px;
 468         height: 16px;
 469         padding: 2px 2px 4px 5px !important;
 470         margin-top: 2px;
 471 }
 472
 473 .popup .results .one-actions a.browse {
 474         background-position: 3px -1396px;
 475 }
 476
 477 .popup .results .one-actions a.command {
 478         background-position: 3px -1415px;
 479 }
 480
 481 .popup .results .one-actions a.subscribe {
 482         background-position: 4px -1435px;
 483 }
 484
 485 .popup .results .one-actions a.join {
 486         background-position: 3px -1455px;
 487 }
 488
 489 .popup .results .one-actions a.search {
 490         background-position: 4px -1475px;
 491 }
 492
 493 .popup .results a.submit,
 494 .popup .results a.cancel,
 495 .popup .results a.back {
 496         margin-right: 8px;
 497         float: right;
 498 }
 499
 500 .popup .onetitle {
 501         font-size: 0.9em;
 502         padding: 4px;
 503         font-weight: bold;
 504 }
 505
 506 .popup .oneinstructions {
 507         font-size: 0.9em;
 508         padding: 4px;
 509         margin: 8px 0;
 510 }
 511
 512 .popup .oneresult {
 513         font-size: 0.9em;
 514         padding: 3px 0 4px 4px;
 515         border-bottom: 1px #9dc4fc solid;
 516         overflow: hidden;
 517         position: relative;
 518 }
 519
 520 .popup .oneresult:hover {
 521         background: #e9f1fd;
 522 }
 523
 524 .popup .oneresult[onclick]:hover {
 525         cursor: pointer;
 526 }
 527
 528 .popup .oneresult[onclick]:active {
 529         background: #f1f6fd;
 530 }
 531
 532 .popup .infos {
 533         background-color: rgb(255,239,104);
 534         background-color: rgba(255,239,104,0.8);
 535         border: 1px #decb2f solid;
 536         color: #3f3f3f;
 537         padding: 8px;
 538         margin: 10px;
 539         font-size: 0.8em;
 540 }
 541
 542 .popup .infos p {
 543         margin-top: 10px;
 544 }
 545
 546 .popup .infos p.infos-title {
 547         font-weight: bold;
 548 }
 549
 550 .popup .bottom {
 551         width: 640px;
 552         height: 40px;
 553         position: absolute;
 554         bottom: 8px;
 555 }
 556
 557 .popup .wait {
 558         display: none;
 559         margin: 8px 0 0 3px;
 560         float: left;
 561 }
 562
 563 a.finish {
 564         border: 1px solid white;
 565         background-color: rgb(255,255,255);
 566         background-color: rgba(255,255,255,0.1);
 567         color: white;
 568         padding: 4px 8px;
 569         margin-right: 7px;
 570         font-size: 0.95em;
 571         text-align: center;
 572         text-decoration: none;
 573         text-shadow: 0 1px 1px black;
 574         border-radius: 3px;
 575         -moz-border-radius: 3px;
 576         -webkit-border-radius: 3px;
 577         box-shadow: 0 0 5px black;
 578         -moz-box-shadow: 0 0 5px black;
 579         -webkit-box-shadow: 0 0 5px black;
 580 }
 581
 582 a.finish:hover,
 583 a.finish:focus {
 584         cursor: pointer;
 585         background-color: rgb(255,255,255);
 586         background-color: rgba(255,255,255,0.2);
 587         box-shadow: 0 0 15px black;
 588         -moz-box-shadow: 0 0 15px black;
 589         -webkit-box-shadow: 0 0 15px black;
 590 }
 591
 592 a.finish:active {
 593         background-color: rgb(255,255,255);
 594         background-color: rgba(255,255,255,0.3);
 595 }
 596
 597 a.finish.disabled {
 598         opacity: 0.2;
 599 }
 600
 601 a.finish.disabled:hover,
 602 a.finish.disabled:focus,
 603 a.finish.disabled:active {
 604         cursor: default;
 605         background-color: rgb(255,255,255);
 606         background-color: rgba(255,255,255,0.1);
 607 }
 608
 609 .popup a.finish {
 610         margin-top: 6px;
 611         float: right;
 612 }