theme/cleaner/css/display.css

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