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 {\r
 293         position: relative;\r
 294         z-index: 9;\r
 295         float: right;\r
 296     margin: 0px 0px 20px 0px;
 297     width: 290px;
 298 }\r
 299 \r
 300 #site_nav_local_views li {\r
 301         width: 100%;\r
 302         margin-right: 0;\r
 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;\r
 310         padding-right: 10px;\r
 311         border: 1px solid #fff;\r
 312         border-color: transparent;\r
 313         padding-top: 4px;\r
 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;\r
 325         -moz-border-radius:0;\r
 326         -webkit-border-radius:0;
 327     text-decoration: none;
 328 }
 329
 330 #site_nav_local_views li:first-child a {
 331         border-radius-topright:4px;\r
 332         -moz-border-radius-topright:4px;
 333         -webkit-border-top-right-radius:4px;
 334 }\r
 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);\r
 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-radius-topright: 0px;\r
 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     margin-top: -20px;
 383     background-color: #262626;
 384         border-radius-bottomright: 6px;\r
 385         -moz-border-radius-bottomright: 6px;
 386         -webkit-border-bottom-right-radius: 6px;
 387 }
 388
 389 #aside_primary .section {
 390         border-radius: 4px;
 391         -moz-border-radius: 4px;
 392         -webkit-border-radius: 4px;
 393         padding: 6px;
 394     padding-bottom: 12px;
 395     border: 1px solid #ddd;
 396         box-shadow: 1px 1px 2px #444;
 397         -moz-box-shadow: 1px 1px 2px #444;
 398         -webkit-box-shadow: 1px 1px 2px #444;
 399     background-color: rgba(201, 203, 202, 0.5);
 400     margin-left: 4px;
 401     width: 248px;
 402 }
 403
 404 #aside_primary .section H2 {\r
 405         font-size: 1.1em;\r
 406         font-weight: normal;\r
 407         letter-spacing: 0.2em;\r
 408         margin-bottom: 10px;
 409     margin-left: -4px;
 410         padding: 6px;
 411         margin-top: 2px;
 412         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 413         line-height: 1.1em;
 414 }
 415
 416 #aside_primary .notice {
 417     background: none;
 418     border: none;
 419 }
 420
 421 .section ul.entities {
 422     width: 270px;
 423 }
 424
 425 .section .entities li {
 426     margin-right: 13px;
 427     margin-bottom: 10px;
 428     width: 24px;
 429 }
 430
 431 #notices_primary {
 432     padding-top: 2px;
 433 }
 434
 435 #content .notices .notice {
 436     border-top: 1px dotted #bbb;
 437     padding-top: 14px;
 438     margin-bottom: 14px;
 439 }
 440
 441 #content .notices .notices .notice {
 442     margin-bottom: 0px;
 443     padding-bottom: 14px;
 444 }
 445
 446 #content .notices .notices .notice + .notice {
 447     margin-bottom: -10px;
 448 }
 449
 450 .notice {
 451     line-height: 1.35em;
 452 }
 453
 454 #content .notice .author .photo {
 455     top: 18px;
 456     left: 0px;
 457 }
 458
 459 #content .notice .entry-title {
 460     min-height: 26px;
 461 }
 462
 463 #shownotice .notice .entry-title {
 464     min-height:123px;
 465 }
 466
 467 .notice div.entry-content {
 468     font-size: 0.9em;
 469     line-height: 1em;
 470     margin-top: 10px;
 471     opacity: 0.6;
 472 }
 473
 474 .notice:hover div.entry-content {
 475     opacity: 1;
 476 }
 477
 478 .notice-options {
 479     margin-top: 7px;
 480 }
 481
 482 .user_in .notice div.entry-content {
 483     max-width: 360px;
 484 }
 485
 486 div.entry-content a.response:before {
 487         content: "(";
 488 }
 489
 490 div.entry-content a.response:after {
 491         content: ")";
 492 }
 493
 494 #footer {
 495     background: none;
 496 }
 497
 498 .form_settings input {
 499     border-radius: 4px;
 500     -moz-border-radius: 4px;
 501     -webkit-border-radius: 4px;
 502     border: 1px solid #bbb;
 503     padding: 4px;
 504     margin-bottom: 4px;
 505 }
 506
 507 .form_settings input:focus {
 508     border: 1px solid #9495b7;
 509 }
 510
 511 .form_settings fieldset fieldset legend {
 512     line-height:0;
 513     font-size: 1.2em;
 514     letter-spacing: 0.2em;
 515 }
 516
 517 #jOverlayContent #content {
 518     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
 519     -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
 520     -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
 521 }
 522
 523 #jOverlayContent button {
 524     top: 10px;
 525     right: 36px;
 526 }
 527
 528 .entity_profile {
 529     width: 365px;
 530 }
 531
 532 .entity_actions {
 533     min-width: 140px;
 534 }
 535
 536 .entity_actions a, .entity_actions input, .entity_actions p {
 537         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 538     border-radius: 4px;
 539     -moz-border-radius: 4px;
 540     -webkit-border-radius: 4px;
 541 }
 542
 543 .entity_moderation:hover ul,
 544 .entity_role:hover ul {
 545     border-radius: 4px;
 546     -moz-border-radius: 4px;
 547     -webkit-border-radius: 4px;
 548 }
 549
 550 .pagination {
 551     background: none;
 552 }
 553
 554 }/*end of @media screen, projection, tv*/