theme/neo/css/display.css

   1 /** theme: neo
   2  *
   3  * @package   StatusNet
   4  * @author    Samantha Doherty <sammy@status.net>
   5  * @copyright 2011 StatusNet, Inc.
   6  * @license   http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 Unported
   7  * @link      http://status.net/
   8  */
   9
  10
  11 @media screen, projection, tv {
  12
  13 body {
  14     background-color: #C6C8CC;
  15     background-image: url(../images/bg.png);
  16     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  17     font-size: 82%;
  18 }
  19
  20 a {color: #3e3e8c;}
  21
  22 h1 {font-size: 1.6em;}
  23 h2 {font-size: 1.6em;}
  24 h3 {font-size: 1.4em;}
  25 h4 {font-size: 1.4em;}
  26 h5 {font-size: 1.2em;}
  27 h6 {font-size: 1em;}
  28
  29 #wrap {
  30     width: 930px;
  31     margin: 0px auto;
  32     padding: 0px 15px 10px 15px;
  33     background-color: #fff;
  34     border-left: 10px solid #E0E0E0;
  35     border-right: 10px solid #E0E0E0;
  36 }
  37
  38 #header {
  39     width: 940px;
  40     padding: 0px;
  41     padding-top: 50px;
  42 }
  43
  44 address {
  45     float: left;
  46     margin-right: 20px;
  47     margin-top: 0px;
  48 }
  49
  50 .poweredby {
  51     background: url(../images/sn-tiny.png) no-repeat top left;
  52     height: 40px;
  53     font-size: 0.8em;
  54     color: #fff;
  55     line-height: 42px;
  56     padding-left: 50px;
  57     position: absolute;
  58     top: 6px;
  59     left: 0;
  60     z-index: 99;
  61     font-style: normal;
  62 }
  63
  64 .poweredby a {
  65     color: #fff !important;
  66     font-weight: bold;
  67 }
  68
  69 #site_nav_global_primary {
  70     display: block;
  71     position: absolute;
  72     top: 0;
  73     left: 0;
  74     z-index: 98;
  75     background-color: #364A84;
  76     width: 960px;
  77     margin-left: -15px;
  78     margin-top: 0px;
  79     height: 24px;
  80     line-height: 20px;
  81     border-top: 10px solid #fff;
  82     border-bottom: 1px solid #fff;
  83 }
  84
  85 #site_nav_global_primary ul {
  86     float: right;
  87 }
  88
  89 #site_nav_global_primary li {
  90     margin-right: 0px;
  91 }
  92
  93 #site_nav_global_primary li:last-child {
  94     margin-right: 16px;
  95 }
  96
  97 #site_nav_global_primary a {
  98     color: #fff !important;
  99     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
 100     padding: 2px 12px 2px 12px;
 101     height: 20px;
 102     display: block;
 103     float: left;
 104 }
 105
 106 #site_nav_global_primary a:hover {
 107     color: #fff !important;
 108     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
 109     background: #4c619c;
 110     text-decoration: none;
 111 }
 112
 113 #site_notice {
 114     color: #000;
 115     float: right;
 116     width: 280px;
 117     padding: 10px;
 118     margin-left: 40px;
 119     -webkit-border-radius: 6px;
 120     -moz-border-radius: 6px;
 121     border-radius: 6px;
 122 }
 123
 124 #site_notice a {
 125     color: #3e3e8c;
 126 }
 127
 128 #anon_notice {
 129     color: #000;
 130     clear: both;
 131     background: none;
 132     padding: 0px;
 133     margin-bottom: 10px;
 134 }
 135
 136 #anon_notice a {
 137     color: #3e3e8c;
 138 }
 139
 140 .form_notice {
 141     float: left;
 142     margin-top: 0px;
 143     width: 510px;
 144     padding: 10px;
 145     -webkit-border-radius: 6px;
 146     -moz-border-radius: 6px;
 147     border-radius: 6px;
 148     background: #cdd1dd;
 149 }
 150
 151 .form_notice fieldset {
 152     width: 100%;
 153 }
 154
 155 .form_notice textarea {
 156     width: 378px;
 157     height: 54px;
 158     -webkit-border-radius: 6px;
 159     -moz-border-radius: 6px;
 160     border-radius: 6px;
 161 }
 162
 163 .form_notice label.notice_data-attach {
 164     top: 27px;
 165     right: 86px;
 166 }
 167
 168 .form_notice #notice_data-geo_wrap label,
 169 .form_notice #notice_data-geo_wrap input {
 170     top: 52px;
 171     right: 86px;
 172 }
 173
 174 .form_notice #notice_action-submit {
 175     font-size: 0.9em;
 176     top: 80px;
 177         right: -2px;
 178     height: 2.4em;
 179     width: 106px;
 180 }
 181
 182 .form_notice .error,
 183 .form_notice .success {
 184     width: 341px;
 185 }
 186
 187 .form_notice .error {
 188     margin-left: 0px;
 189 }
 190
 191 #core {
 192     clear: both;
 193     margin: 0px;
 194     width: 930px;
 195     margin-left: 0px;
 196     margin-top: 8px;
 197 }
 198
 199 #content {
 200     width: 530px;
 201     margin-right: 0px;
 202     padding-left: 30px;
 203     padding-right: 30px;
 204 }
 205
 206 #site_nav_local_views {
 207     display: block;
 208     float: left;
 209     width: 130px;
 210     margin-top: 5px;
 211 }
 212
 213 #site_nav_local_views H3 {
 214     border-bottom: 3px solid #A6ADBF;
 215     color: #A6ADBF;
 216     font-size: 1.1em;
 217     letter-spacing: 2px;
 218     margin-bottom: 10px;
 219     text-transform: uppercase;
 220 }
 221
 222 #site_nav_local_views li {
 223     display: block;
 224     margin: 0px 0px 6px 0px;
 225 }
 226
 227 #site_nav_local_views li ul {
 228     margin-bottom: 20px;
 229 }
 230
 231 #site_nav_local_views a {
 232     padding: 2px 0px 2px 10px;
 233     display: block;
 234     -webkit-border-radius: 6px;
 235     -moz-border-radius: 6px;
 236     border-radius: 6px;
 237 }
 238
 239 #site_nav_local_views a:hover {
 240     background: #8e98b4 !important;
 241     color: #fff !important;
 242     text-decoration: none;
 243     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
 244 }
 245
 246 #site_nav_local_views .current a {
 247     text-decoration: none;
 248     background: #8e98b4 !important;
 249     color: #fff !important;
 250     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
 251 }
 252
 253 #aside_primary {
 254     background: none;
 255     width: 210px;
 256     padding-top: 0px;
 257     margin-top: 5px;
 258 }
 259
 260 #aside_primary .section {
 261     width: 100%;
 262     margin-left: 0px;
 263     margin-right: 0px;
 264 }
 265
 266 #aside_primary h2 {
 267     border-bottom: 3px solid #A6ADBF;
 268     color: #A6ADBF;
 269     font-size: 1.1em;
 270     letter-spacing: 2px;
 271     margin-bottom: 10px;
 272     text-transform: uppercase;
 273     text-align: right;
 274 }
 275
 276 .section ul.entities {
 277     width: 290px;
 278 }
 279
 280 .section .entities li {
 281     margin-right: 17px;
 282     margin-bottom: 10px;
 283     width: 24px;
 284 }
 285
 286 #popular_notices .avatar {
 287     position: relative;
 288     top: 2px;
 289     margin-bottom: 4px;
 290 }
 291
 292 #aside_primary td {
 293     padding-right: 20px;
 294     padding-bottom: 14px;
 295 }
 296
 297 #aside_primary td .nickname {
 298     line-height: 1.6em;
 299 }
 300
 301 .section .avatar {
 302     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 303     -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 304     -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 305 }
 306
 307 #content h1 {
 308     border-bottom: 3px solid #A6ADBF;
 309     color: #A6ADBF;
 310     font-size: 1.4em;
 311     letter-spacing: 4px;
 312     text-transform: uppercase;
 313 }
 314
 315 #notices_primary {
 316     margin-top: -5px;
 317 }
 318
 319 #content .notice {
 320     padding-bottom: 14px;
 321     border-bottom: 2px dotted #eee;
 322 }
 323
 324 .notice {
 325     line-height: 1.35em;
 326     margin-bottom: 10px;
 327 }
 328
 329 #content .notice .author .photo {
 330     left: 0px;
 331     top: 6px;
 332 }
 333
 334 #content .notice .entry-title {
 335     min-height: 34px;
 336 }
 337
 338 #showstream .notice .entry-title {
 339     min-height: 1px;
 340 }
 341
 342 #shownotice .notice .entry-title {
 343     min-height:123px;
 344 }
 345
 346 .notice div.entry-content {
 347     font-size: 0.9em;
 348     line-height: 1.2em;
 349     margin-top: 6px;
 350     opacity: 0.6;
 351 }
 352
 353 .notice:hover div.entry-content {
 354     opacity: 1;
 355 }
 356
 357 .user_in .notice div.entry-content {
 358     max-width: 440px;
 359 }
 360
 361 div.entry-content a.response:before {
 362         content: "(";
 363 }
 364
 365 div.entry-content a.response:after {
 366         content: ")";
 367 }
 368
 369 .notice-options {
 370     margin-top: 4px;
 371 }
 372
 373 .pagination {
 374     height: 1.2em;
 375 }
 376
 377 #jOverlayContent button {
 378     top: 20px;
 379     right: 36px;
 380 }
 381
 382 .entity_profile {
 383     float: left;
 384     width: 435px;
 385     margin-top: 4px;
 386 }
 387
 388 td.entity_profile { /* cf directory table */
 389     width: auto;
 390 }
 391
 392 .entity_profile .entity_depiction {
 393     margin-top: 4px;
 394 }
 395
 396 .entity_actions {
 397     width: 140px;
 398     margin-top: 8px;
 399     margin-bottom: 10px;
 400 }
 401
 402 .entity_actions a, .entity_actions p, .entity_actions .entity_subscribe input, .entity_actions .entity_block input, .entity_actions .entity_moderation input, .entity_actions .entity_role input, .entity_actions .entity_nudge input, .entity_actions .entity_delete input {
 403         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 404     border-radius: 4px;
 405     -moz-border-radius: 4px;
 406     -webkit-border-radius: 4px;
 407     background-color: #CDD1DD !important;
 408 }
 409
 410 .entity_moderation:hover ul,
 411 .entity_role:hover ul {
 412     border-radius: 4px;
 413     -moz-border-radius: 4px;
 414     -webkit-border-radius: 4px;
 415 }
 416
 417 .entity_send-a-message .form_notice legend {
 418         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 419 }
 420
 421 .entity_send-a-message .form_notice {
 422     border: 1px solid #7B4E82;
 423 }
 424
 425 .entity_send-a-message .form_notice #notice_action-submit {
 426     color: #fff !important;
 427     top: 46px;
 428 }
 429
 430 #aside_primary #entity_remote_subscribe a:hover {
 431     background-color: #fff !important;
 432 }
 433
 434 #entity_remote_subscribe .dialogbox {
 435     border: 1px solid #7B4E82;
 436     border-radius: 8px;
 437         -moz-border-radius: 8px;
 438         -webkit-border-radius: 8px;
 439 }
 440
 441 #entity_remote_subscribe input {
 442     padding-left: 4px;
 443 }
 444
 445 #entity_remote_subscribe .submit_dialogbox {
 446     margin-top: 10px;
 447     float: right;
 448 }
 449
 450 #filter_tags_item .submit {
 451   left: 6px;
 452   top: -3px;
 453 }
 454
 455 .pagination {
 456     height: 1.2em;
 457     padding-bottom: 12px;
 458     -webkit-border-radius: 6px;
 459     -moz-border-radius: 6px;
 460     border-radius: 6px;
 461 }
 462
 463 #footer {
 464     color: #000;
 465     margin-left: 0px;
 466     margin-right: 0px;
 467     -webkit-border-top-left-radius: 6px;
 468     -webkit-border-top-right-radius: 6px;
 469     -moz-border-radius-topleft: 6px;
 470     -moz-border-radius-topright: 6px;
 471     border-top-left-radius: 6px;
 472     border-top-right-radius: 6px;
 473 }
 474
 475 #footer a {
 476     color: #3e3e8c;
 477 }
 478
 479 #site_nav_global_secondary {
 480     margin-bottom: 10px;
 481 }
 482
 483 .error, .success {
 484     background-color: #F7E8E8;
 485     padding: 4px;
 486     -webkit-border-radius: 6px;
 487     -moz-border-radius: 6px;
 488     border-radius: 6px;
 489 }
 490 .success {
 491     background-color: #f2f2f2;
 492 }
 493
 494 .form_notice input.submit, .form_settings input.submit, .form_settings input.cancel {
 495     border-radius: 3px;
 496     -moz-border-radius: 3px;
 497     -webkit-border-radius: 3px;
 498     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
 499     color:#fff;
 500     font-weight: normal;
 501     font-size: 1em;
 502     height: 2.2em;
 503     padding-left: 1em;
 504     padding-right: 1em;
 505     background: #7080aa;
 506     background: -moz-linear-gradient(top, #7b8dbb , #7080aa);
 507     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b8dbb), color-stop(100%,#7080aa));
 508     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b8dbb', endColorstr='#7080aa',GradientType=0 );
 509     border-width: 1px;
 510 }
 511
 512 .form_notice input.submit:hover, .form_settings input.submit:hover, .form_settings input.cancel:hover {
 513     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8);
 514     background: #7b8dbb;
 515     background: -moz-linear-gradient(top, #7080aa , #7b8dbb);
 516     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7080aa), color-stop(100%,#7b8dbb));
 517     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7080aa', endColorstr='#7b8dbb',GradientType=0 );
 518 }
 519
 520 .form_settings input#settings_design_reset, .form_settings input.cancel {
 521     background: #e2e2e2;
 522     color: #8e181b;
 523     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 524 }
 525
 526 .form_settings input#settings_design_reset:hover, .form_settings input.cancel:hover {
 527     background: #f2f2f2;
 528     color: #8e181b;
 529     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 530 }
 531
 532 .form_settings input.checkbox, .form_settings input.radio {
 533     margin-left: 24%;
 534     margin-top: 2px;
 535     position: relative;
 536     left: -14px;
 537 }
 538
 539 .form_settings label.checkbox, .form_settings label.radio {
 540     width: auto;
 541     max-width: 60%;
 542     position: relative;
 543     left: -30px;
 544 }
 545
 546 .form_settings li input.radio {
 547     clear: left;
 548 }
 549
 550 .form_settings label.radio {
 551     margin-left: 10px;
 552     margin-right: 10px;
 553     text-align: left;
 554 }
 555
 556 #form_login p.form_guide, #form_register #settings_rememberme p.form_guide, #form_openid_login #settings_rememberme p.form_guide, #settings_twitter_remove p.form_guide, #design_background-image_onoff p.form_guide {
 557     margin-left: 26%;
 558 }
 559
 560 #form_search ul.form_data #q {
 561     margin-left: 10px;
 562 }
 563
 564 .form_settings fieldset fieldset {
 565     margin-bottom: 30px;
 566     padding-top: 25px;
 567 }
 568
 569
 570 #content thead th {
 571 text-align:left;
 572 }
 573 #content tbody th {
 574 vertical-align:top;
 575 text-align:left;
 576 font-weight:normal;
 577 padding-top:11px;
 578 padding-right:18px;
 579 }
 580 #content tbody tr {
 581     border-top: 1px dotted #bbb;
 582 }
 583 #content td {
 584 padding:11px 18px 11px 0;
 585 vertical-align:top;
 586 }
 587 #content td:last-child {
 588 padding-right:0;
 589 }
 590
 591
 592 #realtime_actions {
 593     position: relative !important;
 594     float: right;
 595     padding-top: 15px;
 596     margin-bottom: -8px !important;
 597 }
 598
 599 .realtime-popup #content {
 600     padding-left: 4px !important;
 601     padding-right: 4px !important;
 602     margin-right: 0px;
 603 }
 604
 605 .realtime-popup .form_notice textarea {
 606     width: 325px !important;
 607 }
 608
 609 .realtime-popup .form_notice #notice_action-submit {
 610     top: 59px !important;
 611     right: 6px !important;
 612 }
 613
 614 .realtime-popup .form_notice label.notice_data-attach, .realtime-popup .form_notice input.notice_data-attach {
 615     right: 74px;
 616     top: 3px !important;
 617 }
 618
 619 .realtime-popup .form_notice #notice_data-geo_wrap label, .realtime-popup .form_notice #notice_data-geo_wrap input {
 620     right: 8px;
 621     top: 3px !important;
 622 }
 623
 624
 625 /* Bookmark specific styles */
 626
 627 #content .bookmark .entry-title {
 628     margin-left: 0px;
 629 }
 630
 631 .bookmark h3 {
 632     margin: 0px 0px 8px 0px;
 633     float: left;
 634     line-height: 1.2em;
 635     max-width: 92%;
 636 }
 637
 638 .bookmark-notice-count {
 639     border-radius: 4px;
 640         -moz-border-radius: 4px;
 641         -webkit-border-radius: 4px;
 642     padding: 1px 6px;
 643     font-size: 1.2em;
 644     line-height: 1.2em;
 645     background: #fff;
 646     border: 1px solid #7b8dbb;
 647     color: #3e3e8c !important;
 648     position: relative;
 649     right: 4px;
 650     margin-left: 10px;
 651 }
 652
 653 .bookmark-notice-count:hover {
 654     text-decoration: none;
 655     background: #f2f2f2;
 656     border: 1px solid #7b8dbb;
 657     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 658 }
 659
 660 .notice .bookmark-description {
 661     clear: both;
 662     margin-left: 0px;
 663     margin-bottom: 0px;
 664 }
 665
 666 .notice .bookmark-author {
 667     margin-left: 0px;
 668     float: left;
 669 }
 670
 671 .bookmark-tags {
 672     clear: both;
 673     margin-bottom: 8px;
 674     line-height: 1.6em;
 675 }
 676
 677 ul.bookmark-tags a {
 678     border-radius: 4px;
 679         -moz-border-radius: 4px;
 680         -webkit-border-radius: 4px;
 681     padding: 1px 6px;
 682     background: #f2f2f2;
 683     color: #3e3e8c !important;
 684     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 685     font-size: 0.9em;
 686 }
 687
 688 ul.bookmark-tags a:hover {
 689     background-color: #cdd1dd;
 690     text-decoration: none;
 691 }
 692
 693 .bookmark-avatar {
 694     float: none !important;
 695     position: relative;
 696     top: 2px;
 697 }
 698
 699 .bookmark div.entry-content {
 700     font-size: 0.9em;
 701     line-height: 1.2em;
 702     margin-top: 6px;
 703     opacity: 0.6;
 704     margin-bottom: 0px;
 705 }
 706
 707 .bookmark:hover div.entry-content {
 708     opacity: 1;
 709 }
 710
 711 .bookmark .notice-options {
 712     margin-top: 16px;
 713 }
 714
 715 #bookmarkpopup {
 716     min-width: 600px;
 717     margin-top: 0px;
 718     height: 100%;
 719     border: 10px solid #364A84;
 720     background: #364A84;
 721 }
 722
 723 #bookmarkpopup #wrap {
 724     width: auto;
 725     min-width: 560px;
 726     padding: 40px 0px 25px 0px;
 727     margin-right: 2px;
 728     background: #fff url(../mobilelogo.png) no-repeat 6px 6px;
 729 }
 730
 731 #bookmarkpopup #header {
 732     width: auto;
 733     padding: 0px 10px;
 734 }
 735
 736 #bookmarkpopup .form_settings label {
 737     margin-top: 2px;
 738     text-align: right;
 739     width: 24%;
 740     font-size: 1.2em;
 741 }
 742
 743 #bookmarkpopup .form_settings .form_data input {
 744     width: 60%;
 745 }
 746
 747 #bookmarkpopup .form_guide {
 748     color: #777;
 749 }
 750
 751 #bookmarkpopup #submit {
 752     float: right;
 753     margin-right: 0px;
 754 }
 755
 756 #bookmarkpopup fieldset fieldset {
 757     margin-bottom: 10px;
 758 }
 759
 760 /* Onboard specific styles */
 761
 762 .onboard-flash {
 763     border-radius: 6px;
 764         -moz-border-radius: 6px;
 765         -webkit-border-radius: 6px;
 766     font-size: 1.1em;
 767     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
 768     -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
 769     -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
 770 }
 771
 772 .onboard-flash p {
 773     margin-bottom: 10px;
 774 }
 775
 776 .onboard-flash .next:before {
 777     content: '\00BB';
 778     padding-right: 6px;
 779 }
 780
 781 .onboard-breadcrumbs {
 782     margin-bottom: 16px !important;
 783 }
 784
 785 .onboard-breadcrumbs li {
 786     background: none !important;
 787     border-top: none !important;
 788     padding: 6px 12px 2px 0px !important;
 789 }
 790
 791 .onboard-breadcrumbs li:last-child {
 792     padding-right: 0px !important;
 793 }
 794
 795 .onboard-breadcrumbs a {
 796     text-decoration: none;
 797 }
 798
 799 .onboard-breadcrumbs a:hover {
 800     color: #3e3e8c !important;
 801 }
 802
 803 /* Billing specific styles */
 804
 805 #content table.billing_info {
 806     margin-top: 10px;
 807     background:rgba(240, 240, 240, 0.4);
 808 }
 809
 810 #content table.billing_info th {
 811     text-align: right;
 812     width: 50%;
 813 }
 814
 815 .invalid {
 816     border: solid 2px red !important;
 817 }
 818
 819 #payment_history table {
 820     width: 100%;
 821 }
 822
 823 #billingadminpanel .form_settings input {
 824     margin-right: 0px;
 825 }
 826
 827 }/*end of @media screen, projection, tv*/