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