theme/shiny/css/display.css

   1 /** theme: shiny
   2  *
   3  * @package   StatusNet
   4  * @author    Samantha Doherty <sammy@status.net>
   5  * @copyright 2010 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: url(../images/page_bg1.png) no-repeat fixed 50% 100%;
  15     background-color: #181818;
  16     font-family: "DejaVu Sans", "Bitstream Vera Sans", Geneva, Verdana, sans-serif;
  17     font-size: 84%;
  18 }
  19
  20 #wrap {
  21     width: 867px;
  22     margin: 0px auto;
  23     padding: 0px 8px 10px 8px;
  24     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  25     -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  26     -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  27     background-color: rgba(201, 203, 202, 0.5);
  28 }
  29
  30 a {
  31     color: #24245c;
  32 }
  33
  34 address {
  35     float: left;
  36     margin-right: 20px;
  37     margin-top: 0px;
  38 }
  39
  40 h1, h2, h3, h4, h5, h6 {
  41     font-weight: normal;
  42     margin-bottom: 15px;
  43     margin-top: 10px;
  44 }
  45
  46 h1 {font-size: 1.4em;}
  47 h2 {font-size: 1.3em;}
  48 h3 {font-size: 1.2em;}
  49 h4 {font-size: 1.1em;}
  50 h5 {font-size: 1em;}
  51 h6 {font-size: 1em;}
  52
  53 #content h1 {
  54         letter-spacing: 0.2em;
  55         font-size: 1.4em;
  56         font-weight: normal;
  57         text-shadow:0 1px 0 rgba(255,255,255,0.4);
  58     margin: -4px 0px 15px 0px;
  59 }
  60
  61 #header {
  62     width: 851px;
  63     padding: 0px;
  64     padding-top: 60px;
  65         margin: 0px;
  66     margin-left: 8px;
  67 }
  68
  69 .poweredby {
  70     background: url(../images/sn-tiny.png) no-repeat top left;
  71     height: 40px;
  72     font-size: 0.8em;
  73     color: #fff;
  74     line-height: 16px;
  75     padding-left: 50px;
  76     position: absolute;
  77     top: 0px;
  78     left: -10px;
  79     z-index: 99;
  80     font-style: normal;
  81 }
  82
  83 .poweredby a {
  84     color: #fff !important;
  85     font-weight: bold;
  86     display: block;
  87     clear: left;
  88 }
  89
  90 #site_nav_global_primary {
  91         padding-top: 8px;
  92         padding-bottom: 2px;
  93         height: 30px;
  94     box-shadow:0px 2px 2px rgba(194, 194, 194, 0.3);
  95     -moz-box-shadow:0px 2px 2px rgba(194, 194, 194, 0.3);
  96     -webkit-box-shadow:0px 2px 2px rgba(194, 194, 194, 0.3);
  97         z-index: 98;
  98         border-bottom-right-radius: 8px;
  99         -moz-border-radius-bottomright: 8px;
 100         -webkit-border-bottom-right-radius: 8px;
 101         border-bottom-left-radius: 8px;
 102         -moz-border-radius-bottomleft: 8px;
 103         -webkit-border-bottom-left-radius: 8px;
 104         letter-spacing: 0.1em;
 105         font-size: 0.8em;
 106         background: url(../images/global_bg.png) repeat-x top left;
 107     float: right;
 108     position: absolute;
 109     width: 893px;
 110     top: -20px;
 111     left: 0;
 112     margin-left: -21px;
 113     text-transform: uppercase;
 114     padding-right: 10px;
 115 }
 116
 117 #site_nav_global_primary li {
 118     margin-right: 0px;
 119     margin-left: 0px;
 120 }
 121
 122 #site_nav_global_primary a {
 123         padding: 4px 8px;
 124         line-height: 1.8em;
 125         border-radius: 4px;
 126         -moz-border-radius: 4px;
 127         -webkit-border-radius: 4px;
 128     color: #fff !important;
 129         text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
 130     border-bottom: 1px solid transparent;
 131     border-left: 1px solid transparent;
 132 }
 133
 134 #site_nav_global_primary a:hover {
 135         color: #fff;
 136         background-color: #000;
 137         border-bottom: 1px solid #666;
 138     border-left: 1px solid #666;
 139     text-decoration: none;
 140 }
 141
 142 #site_nav_global_primary li {
 143     margin-left: 8px;
 144 }
 145
 146 #anon_notice {
 147     background: url(../images/overlay10.png) repeat-x top left;
 148     clear: both;
 149         border-radius: 4px;
 150         -moz-border-radius: 4px;
 151         -webkit-border-radius: 4px;
 152         border-color: #333;
 153         border-top-color: #aaa;
 154         border-left-color: #aaa;
 155     border-width: 1px;
 156         border-style: solid;
 157         color: #ccc;
 158         padding-left: 10px;
 159         padding-right: 10px;
 160         font-size: 1.1em;
 161     margin-top: 16px;
 162         margin-bottom: 12px;
 163     background-color: #444;
 164         text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
 165 }
 166
 167 #anon_notice a {
 168         color: #fff;
 169 }
 170
 171 #anon_notice a:hover {
 172         text-decoration: underline;
 173 }
 174
 175 #site_notice {
 176     float: right;
 177     width: 270px;
 178     padding: 10px;
 179     margin-left: 40px;
 180         background: none;
 181         border-radius: 4px;
 182         -moz-border-radius: 4px;
 183         -webkit-border-radius: 4px;
 184         border-color: #ccc;
 185         border-bottom-color: #999;
 186         border-right-color: #999;
 187         border-width: 1px;
 188         border-style: solid;
 189 }
 190
 191 .form_notice {
 192     float: right;
 193     width: 494px;
 194     margin-top: 0px;
 195     background: #ccc;
 196         border-radius: 4px;
 197         -moz-border-radius: 4px;
 198         -webkit-border-radius: 4px;
 199         padding: 10px;
 200     border: 1px solid #ddd;
 201     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 202     -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 203     -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 204 }
 205
 206 .form_notice label[for=notice_data-text], .form_notice label[for=to] {
 207         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 208     padding-left: 2px;
 209 }
 210
 211 .form_notice fieldset {
 212     width: 494px;
 213 }
 214
 215 .form_notice textarea {
 216     width: 362px;
 217     height: 54px;
 218     border: 1px solid #bbb;
 219     border-radius: 4px;
 220     -moz-border-radius: 4px;
 221     -webkit-border-radius: 4px;
 222     position:relative;
 223 }
 224
 225 .entity_send-a-message .form_notice legend {
 226         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 227 }
 228
 229 .form_notice textarea:focus {
 230     border: 1px solid #9495b7;
 231 }
 232
 233 .form_notice label[for=notice_data-attach],
 234 .form_notice #notice_data-attach {
 235     top: 27px;
 236     right: 86px;
 237 }
 238
 239 .form_notice #notice_data-geo_wrap label,
 240 .form_notice #notice_data-geo_wrap input {
 241     top: 50px;
 242     right: 86px;
 243 }
 244
 245 .form_notice #notice_action-submit {
 246     top: 79px;
 247     right: 0;
 248     width: 102px;
 249     right: 0px;
 250     height: 2.2em;
 251 }
 252
 253 .entity_send-a-message .form_notice #notice_action-submit {
 254     color: #fff !important;
 255 }
 256
 257 .form_notice input.submit, .form_settings input.submit {
 258         border: 1px solid #555;
 259     border-top: none;
 260     border-left: none;
 261     border-radius: 4px;
 262     -moz-border-radius: 4px;
 263     -webkit-border-radius: 4px;
 264     background: #666 url(../images/overlay25.png) repeat-x top left;
 265         text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
 266     color:#fff;
 267     font-weight: normal;
 268     font-size: 1em;
 269     height: 2.2em;
 270     padding-left: 1em;
 271     padding-right: 1em;
 272     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 273     -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 274     -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 275 }
 276
 277 .form_notice input.submit:hover, .form_settings input.submit:hover {
 278     background-color: #888;
 279 }
 280
 281 .form_notice .error,
 282 .form_notice .success {
 283     width: 373px;
 284     margin-left: 0px;
 285 }
 286
 287 .form_notice .error {
 288     width: 375px;
 289     margin-left: 1px;
 290 }
 291
 292 #site_nav_local_views {
 293         position: relative;
 294         z-index: 9;
 295         float: right;
 296     margin: 0px;
 297     width: 290px;
 298 }
 299
 300 #site_nav_local_views li {
 301         width: 100%;
 302         margin-right: 0;
 303         margin-bottom: 0px;
 304         text-align: right;
 305 }
 306
 307 #site_nav_local_views a {
 308     background: url(../images/overlay10.png) repeat-x top left;
 309         display:block;
 310         padding-right: 10px;
 311         border: 1px solid #fff;
 312         border-color: transparent;
 313         padding-top: 4px;
 314         padding-bottom: 4px;
 315         font-size: 1.1em;
 316         font-weight: normal;
 317         letter-spacing: 0.2em;
 318         text-transform: uppercase;
 319         color: #f2f2f2 !important;
 320     background-color: #444;
 321         border-bottom: 1px solid #999;
 322         border-left: none;
 323         text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
 324         border-radius:0;
 325         -moz-border-radius:0;
 326         -webkit-border-radius:0;
 327     text-decoration: none;
 328 }
 329
 330 #site_nav_local_views li:first-child a {
 331         border-top-right-radius:4px;
 332         -moz-border-radius-topright:4px;
 333         -webkit-border-top-right-radius:4px;
 334 }
 335
 336 #site_nav_local_views a:hover {
 337     background: url(../images/overlay20.png) repeat-x top left;
 338         color: #4d424c !important;
 339     background-color: #b3b3b3;
 340         text-shadow: 0 1px 0 rgba(255,255,255,0.75);
 341 }
 342
 343 #site_nav_local_views .current a {
 344     background: none;
 345         display: block;
 346     color: #4d4d4d !important;
 347     box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
 348     -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
 349         -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
 350         border-bottom: 1px solid #fff;
 351         text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
 352     background-color: #e2e2e2;
 353     text-decoration: none;
 354 }
 355
 356 #core {
 357     clear: both;
 358     margin: 0px;
 359     width: 851px;
 360     margin-left: 8px;
 361     margin-top: 4px;
 362 }
 363
 364 #content {
 365         border-radius: 4px;
 366         -moz-border-radius: 4px;
 367         -webkit-border-radius: 4px;
 368         border-top-right-radius: 0px;
 369         -moz-border-radius-topright: 0px;
 370         -webkit-border-top-right-radius: 0px;
 371     padding: 14px 10px 20px 10px;
 372     width: 541px;
 373     margin-right: 0px;
 374     background-color: #e2e2e2;
 375 }
 376
 377 #aside_primary {
 378     width: 280px;
 379         padding: 0px;
 380     padding-top: 16px;
 381     padding-left: 10px;
 382     background-color: #262626;
 383         border-bottom-right-radius: 6px;
 384         -moz-border-radius-bottomright: 6px;
 385         -webkit-border-bottom-right-radius: 6px;
 386 }
 387
 388 #aside_primary .section {
 389         border-radius: 4px;
 390         -moz-border-radius: 4px;
 391         -webkit-border-radius: 4px;
 392         padding: 6px;
 393     padding-bottom: 12px;
 394     border: 1px solid #ddd;
 395         box-shadow: 1px 1px 2px #444;
 396         -moz-box-shadow: 1px 1px 2px #444;
 397         -webkit-box-shadow: 1px 1px 2px #444;
 398     background-color: rgba(201, 203, 202, 0.5);
 399     margin-left: 4px;
 400     width: 248px;
 401 }
 402
 403 #aside_primary .section H2 {
 404         font-size: 1.1em;
 405         font-weight: normal;
 406         letter-spacing: 0.2em;
 407         margin-bottom: 10px;
 408     margin-left: -4px;
 409         padding: 6px;
 410         margin-top: 2px;
 411         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 412         line-height: 1.1em;
 413 }
 414
 415 #aside_primary .notice {
 416     background: none;
 417     border: none;
 418 }
 419
 420 .section ul.entities {
 421     width: 270px;
 422 }
 423
 424 .section .entities li {
 425     margin-right: 13px;
 426     margin-bottom: 10px;
 427     width: 24px;
 428 }
 429
 430 #notices_primary {
 431     padding-top: 2px;
 432 }
 433
 434 #content .notices .notice {
 435     border-top: 1px dotted #bbb;
 436     padding-top: 14px;
 437     margin-bottom: 14px;
 438 }
 439
 440 #content .notices .notices .notice {
 441     margin-bottom: 0px;
 442     padding-bottom: 14px;
 443 }
 444
 445 #content .notices .notices .notice + .notice {
 446     margin-bottom: -10px;
 447 }
 448
 449 .notice {
 450     line-height: 1.35em;
 451 }
 452
 453 #content .notice .author .photo {
 454     top: 18px;
 455     left: 0px;
 456 }
 457
 458 #content .notice .entry-title {
 459     min-height: 26px;
 460 }
 461
 462 #shownotice .notice .entry-title {
 463     min-height:123px;
 464 }
 465
 466 .notice div.entry-content {
 467     font-size: 0.9em;
 468     line-height: 1em;
 469     margin-top: 10px;
 470     opacity: 0.6;
 471 }
 472
 473 .notice:hover div.entry-content {
 474     opacity: 1;
 475 }
 476
 477 .notice-options {
 478     margin-top: 7px;
 479 }
 480
 481 .user_in .notice div.entry-content {
 482     max-width: 360px;
 483 }
 484
 485 div.entry-content a.response:before {
 486         content: "(";
 487 }
 488
 489 div.entry-content a.response:after {
 490         content: ")";
 491 }
 492
 493 #footer {
 494     background: none;
 495 }
 496
 497 .form_settings input {
 498     border-radius: 4px;
 499     -moz-border-radius: 4px;
 500     -webkit-border-radius: 4px;
 501     border: 1px solid #bbb;
 502     padding: 4px;
 503     margin-bottom: 4px;
 504 }
 505
 506 .form_settings input:focus {
 507     border: 1px solid #9495b7;
 508 }
 509
 510 .form_settings fieldset fieldset legend {
 511     line-height:0;
 512     font-size: 1.2em;
 513     letter-spacing: 0.2em;
 514 }
 515
 516 #jOverlayContent #content {
 517     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
 518     -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
 519     -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
 520 }
 521
 522 #jOverlayContent button {
 523     top: 10px;
 524     right: 36px;
 525 }
 526
 527 .entity_profile {
 528     width: 365px;
 529 }
 530
 531 .entity_actions {
 532     min-width: 140px;
 533 }
 534
 535 .entity_actions a, .entity_actions input, .entity_actions p {
 536         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 537     border-radius: 4px;
 538     -moz-border-radius: 4px;
 539     -webkit-border-radius: 4px;
 540 }
 541
 542 .entity_moderation:hover ul,
 543 .entity_role:hover ul {
 544     border-radius: 4px;
 545     -moz-border-radius: 4px;
 546     -webkit-border-radius: 4px;
 547 }
 548
 549 .pagination {
 550     background: none;
 551 }
 552
 553 }/*end of @media screen, projection, tv*/