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