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