jappixmini/jappix/css/pageengine.css

   1 /*
   2
   3 Jappix - An open social platform
   4 This is the page-engine CSS stylesheet for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 31/08/11
  11
  12 */
  13
  14 #page-engine {
  15         background-color: #f4f4f4;
  16         position: absolute;
  17         top: 40px;
  18         bottom: 6px;
  19         right: 6px;
  20         left: 6px;
  21         z-index: 8;
  22         border-radius: 3px;
  23         -moz-border-radius: 3px;
  24         -webkit-border-radius: 3px;
  25 }
  26
  27 #page-engine .top {
  28         background: #e8f1f3;
  29         background: -moz-linear-gradient(top, #e8f1f3, #dee8ea);
  30         background: -webkit-gradient(linear, left top, left bottom, from(#e8f1f3), to(#dee8ea));
  31         border-bottom: 1px solid #d0d0d0;
  32         color: black;
  33         position: absolute;
  34         top: 0;
  35         left: 0;
  36         right: 0;
  37         padding: 6px;
  38         height: 80px;
  39         border-top-right-radius: 3px;
  40         border-top-left-radius: 3px;
  41         -moz-border-radius-topright: 3px;
  42         -moz-border-radius-topleft: 3px;
  43         -webkit-border-top-right-radius: 3px;
  44         -webkit-border-top-left-radius: 3px;
  45 }
  46
  47 #page-engine .top .avatar-container {
  48         text-align: center;
  49         margin: 2px 0 0 10px;
  50         height: 76px;
  51         width: 76px;
  52         float: left;
  53 }
  54
  55 #page-engine .top .avatar {
  56         max-height: 76px;
  57         max-width: 76px;
  58 }
  59
  60 #page-engine .top .name {
  61         text-align: right;
  62         padding: 7px;
  63 }
  64
  65 #page-engine p.bc-name {
  66         font-size: 2.3em;
  67         margin-bottom: 5px;
  68 }
  69
  70 #page-engine p.bc-infos {
  71         font-size: 0.85em;
  72         height: 16px;
  73         overflow: hidden;
  74         position: absolute;
  75         left: 115px;
  76         right: 12px;
  77 }
  78
  79 #page-engine .page-engine-chan[data-type=groupchat] p.bc-infos {
  80         left: 12px;
  81 }
  82
  83 #page-engine p.bc-infos span.show {
  84         padding-left: 18px;
  85 }
  86
  87 #page-engine p.bc-infos a {
  88         text-decoration: underline;
  89 }
  90
  91 #page-engine div.bc-pep {
  92         float: right;
  93 }
  94
  95 #page-engine div.bc-pep a {
  96         height: 16px;
  97         width: 16px;
  98         margin-left: 4px;
  99         float: left;
 100 }
 101
 102 #page-engine div.bc-pep a:hover {
 103         cursor: default;
 104 }
 105
 106 #page-engine div.bc-pep a[href]:hover {
 107         cursor: pointer;
 108 }
 109
 110 #page-engine .content,
 111 #page-engine .list {
 112         font-size: 0.9em;
 113         position: absolute;
 114         top: 93px;
 115         right: 0;
 116         bottom: 29px;
 117         overflow: auto;
 118         box-shadow: inset 0 3px 10px #e8e8e8;
 119         -moz-box-shadow: inset 0 3px 10px #e8e8e8;
 120         -webkit-box-shadow: inset 0 3px 10px #e8e8e8;
 121 }
 122
 123 #page-engine .content {
 124         left: 0;
 125         padding: 12px 14px 0;
 126 }
 127
 128 #page-engine .content a {
 129         text-decoration: underline;
 130 }
 131
 132 #page-engine .page-engine-chan {
 133         display: none;
 134 }
 135
 136 #page-engine .chat .content,
 137 #page-engine .chat .list {
 138         bottom: 93px;
 139 }
 140
 141 #page-engine .chat .content {
 142         padding-bottom: 24px;
 143 }
 144
 145 #page-engine .groupchat-content {
 146         padding-bottom: 16px !important;
 147         right: 191px !important;
 148 }
 149
 150 #page-engine .list {
 151         border-left: 1px solid #c8c8c8;
 152         padding: 8px 0 0;
 153         width: 190px;
 154         right: 0;
 155 }
 156
 157 #page-engine .list .role {
 158         display: none;
 159         margin-bottom: 10px;
 160 }
 161
 162 #page-engine .list .title {
 163         font-weight: bold;
 164         color: #383838;
 165         margin-left: 8px;
 166 }
 167
 168 #page-engine .list .user {
 169         background: #eff2f2;
 170         background: -moz-linear-gradient(top, #eff2f2, #ecefef);
 171         background: -webkit-gradient(linear, left top, left bottom, from(#eff2f2), to(#ecefef));
 172         border-color: #c8c8c8;
 173         border-width: 1px 0;
 174         border-style: solid;
 175         color: #383838;
 176         margin-bottom: 3px;
 177         height: 32px;
 178         overflow: hidden;
 179 }
 180
 181 #page-engine .list .user:hover {
 182         background: #e9ecec;
 183         cursor: pointer;
 184 }
 185
 186 #page-engine .list .user:active {
 187         background: #e3e7e7;
 188 }
 189
 190 #page-engine .list .user.myself {
 191         background-color: #eff2f2;
 192         cursor: default;
 193 }
 194
 195 #page-engine .list .user .name {
 196         float: left;
 197         height: 18px;
 198         overflow: hidden;
 199         margin: 7px 0 7px 3px;
 200         padding-left: 18px;
 201 }
 202
 203 #page-engine .list .user .avatar-container {
 204         text-align: center;
 205         float: right;
 206         height: 32px;
 207         width: 32px;
 208 }
 209
 210 #page-engine .list .user .avatar {
 211         max-height: 32px;
 212         max-width: 32px;
 213 }
 214
 215 #page-engine .one-group,
 216 #archives .one-group {
 217         border-bottom: 1px dotted #d0d0d0;
 218         padding-bottom: 8px;
 219         margin-bottom: 10px;
 220 }
 221
 222 #page-engine .one-line,
 223 #archives .one-line,
 224 #page-engine .one-group b.name,
 225 #archives .one-group b.name {
 226         padding-left: 50px;
 227         word-wrap: break-word;
 228 }
 229
 230 #page-engine .one-group b.name,
 231 #archives .one-group b.name {
 232         display: block;
 233         margin-bottom: 4px;
 234 }
 235
 236 #page-engine .one-group b.name.me,
 237 #archives .one-group b.name.me {
 238         color: #123a5c;
 239 }
 240
 241 #page-engine .one-group b.name.him,
 242 #archives .one-group b.name.him {
 243         color: #801e1e;
 244 }
 245
 246 #page-engine .one-group span.date,
 247 #archives .one-group span.date {
 248         float: right;
 249         font-size: 0.9em;
 250 }
 251
 252 #page-engine .one-group .avatar-container,
 253 #archives .one-group .avatar-container {
 254         text-align: center;
 255         margin: 4px 0 0 6px;
 256         height: 30px;
 257         width: 30px;
 258         float: left;
 259 }
 260
 261 #page-engine .one-group .avatar,
 262 #archives .one-group .avatar {
 263         max-height: 30px;
 264         max-width: 30px;
 265 }
 266
 267 #page-engine b.name.talk-images {
 268         background-position: 50px -99px;
 269         padding-left: 68px;
 270 }
 271
 272 #page-engine .user-message,
 273 #archives .user-message {
 274         margin-bottom: 3px;
 275 }
 276
 277 #page-engine .system-message {
 278         color: #053805 !important;
 279         margin-bottom: 3px !important;
 280         padding-left: 0 !important;
 281 }
 282
 283 #page-engine .system-message a {
 284         color: #053805 !important;
 285 }
 286
 287 #page-engine .system-message p.help b {
 288         margin-bottom: 5px;
 289         text-decoration: underline;
 290         display: block;
 291 }
 292
 293 #page-engine .system-message p.help em {
 294         width: 240px;
 295         text-decoration: underline;
 296         margin-left: 5px;
 297         float: left;
 298 }
 299
 300 #page-engine .my-nick {
 301         font-weight: bold;
 302 }
 303
 304 #page-engine .old-message {
 305         font-size: 11px !important;
 306         margin-bottom: 1px !important;
 307 }
 308
 309 #page-engine .chatstate {
 310         background-color: rgb(234,234,234);
 311         background-color: rgba(234,234,234,0.8);
 312         color: #2c2c2c;
 313         padding: 3px 10px 2px 8px;
 314         position: absolute;
 315         bottom: 93px;
 316         left: 0;
 317         font-size: 0.75em;
 318         border-top-right-radius: 3px;
 319         -moz-border-radius-topright: 3px;
 320         -webkit-border-top-right-radius: 3px;
 321 }
 322
 323 #page-engine .text {
 324         height: 93px;
 325         position: absolute;
 326         bottom: 0;
 327         left: 0;
 328         right: 0;
 329 }
 330
 331 #page-engine .footer {
 332         background: #e8f1f3;
 333         background: -moz-linear-gradient(top, #dee8ea, #e8f1f3);
 334         background: -webkit-gradient(linear, left top, left bottom, from(#dee8ea), to(#e8f1f3));
 335         border-color: #d0d0d0;
 336         border-width: 1px 0 0;
 337         border-style: solid;
 338         color: black;
 339         position: absolute;
 340         left: 0;
 341         right: 0;
 342         padding: 6px;
 343         height: 16px;
 344 }
 345
 346 #page-engine .chat .footer {
 347         border-width: 1px 0;
 348         position: static;
 349 }
 350
 351 #page-engine .chat-tools-content {
 352         height: 16px;
 353         width: 16px;
 354         margin-right: 8px;
 355         float: left;
 356 }
 357
 358 #page-engine .tools-tooltip {
 359         display: block;
 360         height: 16px;
 361         width: 16px;
 362         overflow: hidden;
 363         float: left;
 364 }
 365
 366 #page-engine .text .chat-tools-smileys {
 367         margin-left: 4px;
 368 }
 369
 370 #page-engine .text .chat-tools-file {
 371         display: none;
 372 }
 373
 374 #page-engine .text .chat-tools-file.mini .bubble-file {
 375         z-index: 39;
 376 }
 377
 378 #page-engine .text .chat-tools-file.mini .tooltip-subitem {
 379         width: 22px;
 380         height: 20px;
 381 }
 382
 383 #page-engine .text .chat-tools-file.mini .wait {
 384         margin: -2px 0 0 -1px;
 385 }
 386
 387 #page-engine .text .tools-smileys {
 388         background-position: 0 -388px;
 389 }
 390
 391 #page-engine .text .tools-style {
 392         background-position: 0 -700px;
 393 }
 394
 395 #page-engine .text .tools-file {
 396         background-position: 0 -1956px;
 397 }
 398
 399 #page-engine .text .tools-save {
 400         background-position: 0 -719px;
 401 }
 402
 403 #page-engine .text .tools-clear {
 404         background-position: 0 -739px;
 405 }
 406
 407 #page-engine .text .tools-infos,
 408 #channel .top div.shortcuts a.profile {
 409         background-position: 0 -758px;
 410 }
 411
 412 #page-engine .text .tools-add,
 413 #page-engine .text .tools-archives,
 414 #page-engine .text .tools-mucadmin {
 415         display: none;
 416 }
 417
 418 #page-engine .text .tools-mucadmin {
 419         background-position: 0 -777px;
 420 }
 421
 422 #page-engine .bubble-style label.bold {
 423         font-weight: bold;
 424 }
 425
 426 #page-engine .bubble-style label.italic {
 427         font-style: italic;
 428 }
 429
 430 #page-engine .bubble-style label.underline {
 431         text-decoration: underline;
 432 }
 433
 434 #page-engine .bubble-style a.color {
 435         height: 18px;
 436         width: 18px;
 437         border-color: white;
 438         border-width: 1px;
 439         border-style: solid;
 440         margin: 6px 5px 0 0;
 441         float: left;
 442         opacity: 0.6;
 443         border-radius: 3px;
 444         -moz-border-radius: 3px;
 445         -webkit-border-radius: 3px;
 446         box-shadow: 0 0 5px black;
 447         -moz-box-shadow: 0 0 5px black;
 448         -webkit-box-shadow: 0 0 5px black;
 449 }
 450
 451 #page-engine .bubble-style a.color:hover,
 452 #page-engine .bubble-style a.color:focus {
 453         opacity: 0.7;
 454 }
 455
 456 #page-engine .bubble-style a.color.selected {
 457         opacity: 1;
 458         border-color: #ffb20d;
 459 }
 460
 461 #page-engine .bubble-file .tooltip-subitem {
 462         width: 240px;
 463 }
 464
 465 #page-engine .bubble-file input[type=file] {
 466         width: 220px;
 467 }
 468
 469 #page-engine .bubble-file input[type=submit],
 470 #page-engine .bubble-file input[type=reset] {
 471         margin: 4px 4px 0 0;
 472 }
 473
 474 #page-engine .text .compose,
 475 #page-engine .muc-ask {
 476         position: absolute;
 477         left: 0;
 478 }
 479
 480 #page-engine .text .compose {
 481         top: 29px;
 482         right: 12px;
 483         bottom: 12px;
 484 }
 485
 486 #page-engine .muc-ask {
 487         right: 0;
 488         bottom: 0;
 489 }
 490
 491 #page-engine .text textarea {
 492         border: 1px solid #c8c8c8;
 493         padding: 5px;
 494         height: 100%;
 495         width: 100%;
 496         font-size: 1.1em;
 497         border-radius: 3px;
 498         -moz-border-radius: 3px;
 499         -webkit-border-radius: 3px;
 500         border-top-right-radius: 0;
 501         border-top-left-radius: 0;
 502         -moz-border-radius-topright: 0;
 503         -moz-border-radius-topleft: 0;
 504         -webkit-border-top-right-radius: 0;
 505         -webkit-border-top-left-radius: 0;
 506 }
 507
 508 #page-engine .muc-ask {
 509         background-color: #e8f1f3;
 510         height: 64px;
 511         font-size: 0.9em;
 512         right: 0;
 513         z-index: 2;
 514         border-bottom-left-radius: 3px;
 515         border-bottom-right-radius: 3px;
 516         -moz-border-radius-bottomleft: 3px;
 517         -moz-border-radius-bottomright: 3px;
 518         -webkit-border-bottom-left-radius: 3px;
 519         -webkit-border-bottom-right-radius: 3px;
 520 }
 521
 522 #page-engine .muc-ask label {
 523         color: #224249;
 524         margin: 23px 10px 0 16px;
 525         font-weight: bold;
 526 }
 527
 528 #page-engine .muc-ask input {
 529         width: 200px;
 530         margin: 19px 10px 0 10px;
 531         padding: 3px;
 532 }
 533
 534 #page-engine .tooltip {
 535         position: absolute;
 536         bottom: 84px;
 537         margin-left: -13px;
 538         z-index: 40;
 539         font-size: 0.8em;
 540         color: white;
 541 }
 542
 543 #page-engine .tooltip a {
 544         color: white;
 545         text-decoration: underline;
 546 }
 547
 548 #page-engine .tooltip-subitem {
 549         background-color: rgb(0,0,0);
 550         background-color: rgba(0,0,0,0.8);
 551         padding: 10px;
 552         width: 200px;
 553         height: 110px;
 554         text-shadow: 0 1px 1px black;
 555         border-radius: 5px;
 556         -moz-border-radius: 5px;
 557         -webkit-border-radius: 5px;
 558 }
 559
 560 #page-engine .tooltip-subarrow {
 561         background-position: 0 -251px;
 562         opacity: 0.8;
 563         height: 10px;
 564         width: 18px;
 565         margin-left: 12px;
 566 }
 567
 568 #page-engine .tooltip .tooltip-top {
 569         margin-bottom: 8px;
 570         font-weight: bold;
 571 }
 572
 573 #page-engine .tooltip label {
 574         margin-bottom: 4px;
 575         float: left;
 576         clear: both;
 577 }
 578
 579 #page-engine .tooltip label input[type=checkbox] {
 580         margin: 0 6px 0 0;
 581         float: left;
 582 }
 583
 584 #page-engine .tooltip label.select {
 585         margin-top: 5px;
 586 }
 587
 588 #page-engine .tooltip input,
 589 #page-engine .tooltip select {
 590         float: left;
 591 }
 592
 593 #page-engine .tooltip select {
 594         width: 100px;
 595 }
 596
 597 #page-engine .tooltip .tooltip-actionlog:hover,
 598 #page-engine .tooltip .tooltip-actionlog:focus {
 599         cursor: pointer;
 600         text-decoration: underline;
 601 }