jappixmini/jappix/css/home.css

   1 /*
   2
   3 Jappix - An open social platform
   4 This is the home CSS stylesheet for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 15/01/12
  11
  12 */
  13
  14 #home {
  15         position: absolute;
  16         top: 0;
  17         left: 0;
  18         right: 0;
  19         bottom: 0;
  20         min-height: 550px;
  21         min-width: 875px;
  22 }
  23
  24 #home .corporation,
  25 #home .corporation .corp_network,
  26 #home .locale,
  27 #home .obsolete {
  28         background-color: rgb(20,20,20);
  29         background-color: rgba(20,20,20,0.70);
  30         color: white;
  31         position: absolute;
  32         top: 0;
  33         text-shadow: 0 0 1px black;
  34         z-index: 100;
  35         border-bottom-left-radius: 3px;
  36         border-bottom-right-radius: 3px;
  37         -moz-border-radius-bottomleft: 3px;
  38         -moz-border-radius-bottomright: 3px;
  39         -webkit-border-bottom-left-radius: 3px;
  40         -webkit-border-bottom-right-radius: 3px;
  41 }
  42
  43 #home .corporation {
  44         background-position: 9px -357px;
  45         left: 12px;
  46         height: 26px;
  47         width: 34px;
  48 }
  49
  50 #home .corporation.hovered {
  51         height: 28px;
  52         border-radius: 0;
  53         -moz-border-radius: 0;
  54         -webkit-border-radius: 0;
  55 }
  56
  57 #home .corporation .corp_network {
  58         width: 180px;
  59         padding: 10px 12px;
  60         top: 28px;
  61         display: none;
  62         border-top-right-radius: 3px;
  63         -moz-border-radius-topright: 3px;
  64         -webkit-border-top-right-radius: 3px;
  65 }
  66
  67 #home .corporation.hovered .corp_network {
  68         display: block;
  69 }
  70
  71 #home .corporation .corp_network h2 {
  72         font-size: 1.1em;
  73         margin: 14px 0 4px 0;
  74 }
  75
  76 #home .corporation .corp_network h2.nomargin {
  77         margin-top: 0;
  78 }
  79
  80 #home .corporation .corp_network a {
  81         font-size: 0.8em;
  82         margin: 2px 0;
  83         padding: 2px 6px;
  84         border-radius: 2px;
  85         -moz-border-radius: 2px;
  86         -webkit-border-radius: 2px;
  87 }
  88
  89 #home .corporation .corp_network a span {
  90         margin: 2px 0;
  91         display: block;
  92 }
  93
  94 #home .corporation .corp_network a span.name {
  95         font-weight: bold;
  96 }
  97
  98 #home .corporation .corp_network a span.desc {
  99         font-size: 0.9em;
 100         margin-left: 2px;
 101 }
 102
 103 #home .locale {
 104         left: 52px;
 105         font-size: 0.8em;
 106 }
 107
 108 #home .locale .current {
 109         height: 19px;
 110         padding: 3px 12px 4px 12px;
 111         font-weight: bold;
 112 }
 113
 114 #home .locale .current:hover {
 115         cursor: default;
 116 }
 117
 118 #home .locale .current .current_align {
 119         height: 19px;
 120         vertical-align: middle;
 121         display: table-cell;
 122 }
 123
 124 #home .locale .list {
 125         margin: 2px 0 2px;
 126 }
 127
 128 #home .locale .list a,
 129 #home .corporation .corp_network a {
 130         color: white;
 131         text-decoration: none;
 132         display: block;
 133 }
 134
 135 #home .locale .list a {
 136         padding: 3px 10px;
 137 }
 138
 139 #home .locale .list a:hover,
 140 #home .locale .list a:focus,
 141 #home .corporation .corp_network a:hover,
 142 #home .corporation .corp_network a:focus {
 143         background-color: rgb(255,255,255);
 144         background-color: rgba(255,255,255,0.1);
 145         cursor: pointer;
 146 }
 147
 148 #home .locale .list a:active,
 149 #home .corporation .corp_network a:active {
 150         background-color: rgb(255,255,255);
 151         background-color: rgba(255,255,255,0.14);
 152 }
 153
 154 #home .obsolete {
 155         height: 60px;
 156         padding: 4px 10px;
 157         right: 12px;
 158         font-size: 0.9em;
 159         font-weight: bold;
 160         display: none;
 161 }
 162
 163 #home .obsolete a {
 164         height: 33px;
 165         width: 33px;
 166         margin: 5px 2px 0 0;
 167         float: left;
 168 }
 169
 170 #home .obsolete a:hover,
 171 #home .obsolete a:focus {
 172         opacity: 0.8;
 173 }
 174
 175 #home .obsolete a:active {
 176         opacity: 0.6;
 177 }
 178
 179 #home .obsolete a.firefox {
 180         background-position: 1px 0;
 181 }
 182
 183 #home .obsolete a.chrome {
 184         background-position: -34px 0;
 185 }
 186
 187 #home .obsolete a.safari {
 188         background-position: -68px 0;
 189 }
 190
 191 #home .obsolete a.opera {
 192         background-position: -101px 0;
 193 }
 194
 195 #home .obsolete a.ie {
 196         background-position: -135px 0;
 197 }
 198
 199 #home .plane {
 200         background-position: 0 -384px;
 201         width: 507px;
 202         height: 328px;
 203         position: absolute;
 204         left: 0;
 205         top: 60px;
 206 }
 207
 208 #home .main {
 209         background-color: rgb(20,20,20);
 210         background-color: rgba(20,20,20,0.85);
 211         position: absolute;
 212         top: 50%;
 213         margin-top: -200px;
 214         width: 800px;
 215         height: 400px;
 216         left: 50%;
 217         margin-left: -400px;
 218         z-index: 50;
 219         border-radius: 10px;
 220         -moz-border-radius: 10px;
 221         -webkit-border-radius: 10px;
 222         box-shadow: 0 0 35px #5c5c5c;
 223         -moz-box-shadow: 0 0 35px #5c5c5c;
 224         -webkit-box-shadow: 0 0 35px #5c5c5c;
 225 }
 226
 227 #home .left {
 228         float: left;
 229         width: 350px;
 230         height: 370px;
 231         margin: 15px 0 15px 15px;
 232         color: white;
 233         text-align: center;
 234         text-shadow: 0 1px 1px black;
 235 }
 236
 237 #home .left .logo {
 238         background-position: 0 0;
 239         float: left;
 240         margin: 30px 20px;
 241         width: 311px;
 242         height: 113px;
 243 }
 244
 245 #home .left p.upper {
 246         margin: 12px 0 20px 0;
 247 }
 248
 249 #home .left p.secondary {
 250         margin: 8px 0 0 16px;
 251         font-size: 0.9em;
 252         width: 320px;
 253 }
 254
 255 #home .right {
 256         background: #e4eef9;
 257         background: -moz-linear-gradient(top, #e4eef9, #C5E1FF);
 258         background: -webkit-gradient(linear, left top, left bottom, from(#e4eef9), to(#C5E1FF));
 259         float: right;
 260         width: 385px;
 261         height: 350px;
 262         margin: 15px 15px 15px 0;
 263         padding: 10px;
 264         font-size: 13px;
 265         text-align: justify;
 266         border-radius: 5px;
 267         -moz-border-radius: 5px;
 268         -webkit-border-radius: 5px;
 269         box-shadow: 0 0 20px black;
 270         -moz-box-shadow: 0 0 20px black;
 271         -webkit-box-shadow: 0 0 20px black;
 272 }
 273
 274 #home .right h1 {
 275         font-size: 16px;
 276         padding-bottom: 4px;
 277         border-bottom: 1px black dotted;
 278 }
 279
 280 #home .right p {
 281         margin-bottom: 4px;
 282 }
 283
 284 #home .right p a {
 285         border-width: 0 0 1px 0;
 286         border-style: dotted;
 287         border-color: black;
 288 }
 289
 290 #home .right p a:hover,
 291 #home .right p a:focus {
 292         border-style: solid;
 293         text-decoration: none;
 294 }
 295
 296 #home .right button {
 297         display: block;
 298         margin-left: 22px;
 299         width: 342px;
 300         height: 64px;
 301         text-decoration: none;
 302         font-weight: bold;
 303         border-radius: 4px;
 304         -moz-border-radius: 4px;
 305         -webkit-border-radius: 4px;
 306 }
 307
 308 #home .right button:hover {
 309         cursor: pointer;
 310 }
 311
 312 #home .right button span {
 313         float: left;
 314 }
 315
 316 #home .right button span.home-images {
 317         height: 16px;
 318         width: 16px;
 319         margin: 5px 7px 7px 24px;
 320 }
 321
 322 #home .right button span.text {
 323         padding-left: 20px;
 324         font-size: 1.5em;
 325 }
 326
 327 #home .right .login {
 328         background-color: #72d071;
 329         background-position: 0 0;
 330         border: 1px solid #5cb55c;
 331         margin-top: 22px;
 332         box-shadow: 0 0 10px #89e389;
 333         -moz-box-shadow: 0 0 10px #89e389;
 334         -webkit-box-shadow: 0 0 10px #89e389;
 335 }
 336
 337 #home .right .login:hover,
 338 #home .right .login:focus {
 339         border: 1px solid #419141;
 340         box-shadow: 0 0 15px #72d071;
 341         -moz-box-shadow: 0 0 15px #72d071;
 342         -webkit-box-shadow: 0 0 15px #72d071;
 343 }
 344
 345 #home .right .login:active {
 346         background-color: #97e896;
 347         background-position: 0 -80px;
 348 }
 349
 350 #home .right .login span.text {
 351         color: #2d612d;
 352         text-shadow: 1px 1px 1px #5cb55c;
 353 }
 354
 355 #home .right .login span.home-images {
 356         background-position: 0 -230px;
 357 }
 358
 359 #home .right .register {
 360         background-color: #f6ef82;
 361         background-position: 0 -160px;
 362         border: 1px solid #e3db56;
 363         margin-top: 15px;
 364         box-shadow: 0 0 15px #f1e968;
 365         -moz-box-shadow: 0 0 15px #f1e968;
 366         -webkit-box-shadow: 0 0 15px #f1e968;
 367 }
 368
 369 #home .right .register:hover,
 370 #home .right .register:focus {
 371         border: 1px solid #d2c93f;
 372         box-shadow: 0 0 15px #e0d743;
 373         -moz-box-shadow: 0 0 15px #e0d743;
 374         -webkit-box-shadow: 0 0 15px #e0d743;
 375 }
 376
 377 #home .right .register:active {
 378         background-color: #fdf7af;
 379         background-position: 0 -240px;
 380 }
 381
 382 #home .right .register span.text {
 383         color: #6d6813;
 384         text-shadow: 1px 1px 1px #dbd56e;
 385 }
 386
 387 #home .right .register span.home-images {
 388         background-position: 0 -204px;
 389 }
 390
 391 #home .right p.notice {
 392         margin-top: 24px;
 393         font-size: 0.9em;
 394 }
 395
 396 #home .right .navigation {
 397         clear: both;
 398         width: 385px;
 399         border-top: 1px black dotted;
 400         position: absolute;
 401         text-align: right;
 402         bottom: 25px;
 403         right: 25px;
 404         padding-top: 6px;
 405 }
 406
 407 #home .right .navigation a {
 408         margin-left: 9px;
 409         color: black;
 410         text-decoration: none;
 411         font-size: 0.9em;
 412         height: 12px;
 413         padding: 0 0 4px 20px;
 414         float: right;
 415 }
 416
 417 #home .right .navigation a:hover,
 418 #home .right .navigation a:focus {
 419         text-decoration: underline;
 420 }
 421
 422 #home .right .navigation a.unencrypted {
 423         background-position: 0 -256px;
 424 }
 425
 426 #home .right .navigation a.encrypted {
 427         background-position: 0 -282px;
 428 }
 429
 430 #home .right .navigation a.project {
 431         background-position: 0 -126px;
 432 }
 433
 434 #home .right .navigation a.manager {
 435         background-position: 0 -152px;
 436 }
 437
 438 #home .right .navigation a.mobile {
 439         background-position: 0 -178px;
 440 }
 441
 442 #home a.advanced {
 443         background-position: 0 -334px;
 444         font-size: 0.9em;
 445         height: 16px;
 446         margin-bottom: 10px;
 447         padding-left: 16px;
 448         display: block;
 449 }
 450
 451 #home fieldset.advanced {
 452         display: none;
 453 }
 454
 455 #home .anonymouser input[type=text] {
 456         width: 160px;
 457 }
 458
 459 #home .homediv.registerer .success a {
 460         font-weight: bold;
 461         text-decoration: underline;
 462 }
 463
 464 #home fieldset {
 465         border: 1px solid black;
 466         margin: 12px 0 12px 0;
 467         padding: 5px 0 4px 0;
 468         border-radius: 3px;
 469         -moz-border-radius: 3px;
 470         -webkit-border-radius: 3px;
 471 }
 472
 473 #home legend {
 474         font-size: 0.9em;
 475         margin: 0 0 0 15px;
 476         padding: 0 2px;
 477         text-transform: uppercase;
 478 }
 479
 480 #home label {
 481         width: 110px;
 482         display: block;
 483         float: left;
 484         clear: both;
 485         margin: 0 0 5px 12px;
 486 }
 487
 488 #home input,
 489 #home select {
 490         float: left;
 491         margin-bottom: 5px;
 492 }
 493
 494 #home input[type=text],
 495 #home input[type=password],
 496 #home select {
 497         width: 140px;
 498         margin-top: -2px;
 499 }
 500
 501 #home input[type=submit] {
 502         min-width: 120px;
 503         float: right;
 504 }
 505
 506 #home span.jid {
 507         display: block;
 508         float: left;
 509         margin: 0 4px;
 510 }
 511
 512 #home input.nick, #home input.server {
 513         width: 110px;
 514 }
 515
 516 #home .info {
 517         padding: 6px;
 518         position: absolute;
 519         bottom: 62px;
 520         right: 35px;
 521         border-width: 1px;
 522         border-style: dotted;
 523         clear: both;
 524         width: 350px;
 525 }
 526
 527 #home .info.success {
 528         background-color: #aee578;
 529         border-color: #85b05c;
 530         display: none;
 531 }
 532
 533 #home .info.fail {
 534         background-color: #f19d9d;
 535         border-color: #b34f4f;
 536 }
 537
 538 #home .info.report {
 539         background-color: #f3f48b;
 540         border-color: #c9c66b;
 541         display: none;
 542 }
 543
 544 #home .info.report span {
 545         text-decoration: underline;
 546 }
 547
 548 #home .notice.simple {
 549         background-color: rgb(20,20,20);
 550         background-color: rgba(20,20,20,0.7);
 551         color: white;
 552         font-size: 0.9em;
 553         text-decoration: none;
 554         text-shadow: 0 1px 0 black;
 555         position: fixed;
 556         bottom: 0;
 557         left: 0;
 558         right: 0;
 559         padding: 8px 20px;
 560         z-index: 100;
 561         box-shadow: 0 0 25px #ababab;
 562         -moz-box-shadow: 0 0 25px #ababab;
 563         -webkit-box-shadow: 0 0 25px #ababab;
 564 }
 565
 566 #home .notice.simple .title {
 567         background-color: rgb(20,20,20);
 568         background-color: rgba(20,20,20,0.4);
 569         background-position: 8px -299px;
 570         border-width: 0 1px 1px 1px;
 571         border-style: solid;
 572         border-color: #141414;
 573         font-weight: bold;
 574         padding: 8px 8px 8px 30px;
 575 }
 576
 577 #home .notice.simple .text {
 578         margin-left: 20px;
 579 }