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