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: #222;
  16     font-family: "DejaVu Sans", "Bitstream Vera Sans", Geneva, Verdana, sans-serif;
  17     font-size: 86%;
  18 }
  19
  20 #wrap {
  21     width: 860px;
  22     margin: 0px auto;
  23     padding: 10px;
  24     padding-top: 0px;
  25     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  26     -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  27     -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  28         background-color: rgba(165,168,167,0.6);
  29 }
  30
  31 a {
  32         color: #333;
  33 }
  34
  35 address {
  36     float: left;
  37     margin-right: 20px;
  38     margin-top: 0px;
  39 }
  40
  41 #content h1 {
  42         text-transform: uppercase;
  43         letter-spacing: 0.2em;
  44         font-size: 1.4em;
  45         margin-left: 2px;
  46         margin-bottom: 16px;
  47         font-weight: bold;
  48         text-shadow:0 1px 0 rgba(255,255,255,0.4);
  49 }
  50
  51 #header {
  52         margin: 0px;
  53     padding-top: 60px;
  54 }
  55
  56 .poweredby {
  57     background: url(../images/sn-tiny.png) no-repeat top left;
  58     height: 40px;
  59     font-size: 0.8em;
  60     color: #fff;
  61     line-height: 32px;
  62     padding-left: 50px;
  63     position: absolute;
  64     top: 2px;
  65     left: 0;
  66     z-index: 99;
  67     font-style: normal;
  68 }
  69
  70 .poweredby a {
  71     color: #fff !important;
  72     font-weight: bold;
  73 }
  74
  75 #site_nav_global_primary {
  76         padding-top: 8px;
  77         padding-bottom: 2px;
  78         height: 30px;
  79     box-shadow:0px 2px 2px rgba(194, 194, 194, 0.3);
  80     -moz-box-shadow:0px 2px 2px rgba(194, 194, 194, 0.3);
  81     -webkit-box-shadow:0px 2px 2px rgba(194, 194, 194, 0.3);
  82         z-index: 98;
  83         border-bottom-right-radius: 8px;
  84         -moz-border-radius-bottomright: 8px;
  85         -webkit-border-bottom-right-radius: 8px;
  86         border-bottom-left-radius: 8px;
  87         -moz-border-radius-bottomleft: 8px;
  88         -webkit-border-bottom-left-radius: 8px;
  89         letter-spacing: 0.1em;
  90         font-size: 0.8em;
  91         background: url(../images/global_bg.png) repeat-x top left;
  92     position: absolute;
  93     top: -20px;
  94     width: 890px;
  95     left: 50%;
  96     margin-left: -445px;
  97 }
  98
  99 #site_nav_global_primary ul.nav {
 100         float: right;
 101         padding-right: 20px;
 102         text-transform: uppercase;
 103         padding-right: 16px;
 104 }
 105
 106 #site_nav_global_primary ul.nav li {
 107     margin-right: 0px;
 108     margin-left: 0px;
 109 }
 110
 111 #site_nav_global_primary ul.nav a {
 112         padding: 4px 8px;
 113         line-height: 1.8em;
 114         border-radius: 4px;
 115         -moz-border-radius: 4px;
 116         -webkit-border-radius: 4px;
 117     color: #fff !important;
 118         text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
 119     border-bottom: 1px solid transparent;
 120     border-left: 1px solid transparent;
 121 }
 122
 123 #site_nav_global_primary ul.nav a:hover {
 124         color: #fff;
 125         background: #000;
 126         border-bottom: 1px solid #666;
 127     border-left: 1px solid #666;
 128     text-decoration: none;
 129 }
 130
 131 #site_nav_global_primary li {
 132     margin-left: 8px;
 133 }
 134
 135 #anon_notice {
 136     clear: both;
 137         border-radius: 4px;
 138         -moz-border-radius: 4px;
 139         -webkit-border-radius: 4px;
 140         border-color: #333;
 141         border-top-color: #ddd;
 142         border-left-color: #ddd;
 143     border-width: 1px;
 144         border-style: solid;
 145         color: #ccc;
 146         padding-left: 10px;
 147         padding-right: 10px;
 148         font-size: 1.1em;
 149     margin-top: 16px;
 150         margin-bottom: 12px;
 151         background-color: #4b4b4b;
 152         text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
 153 }
 154
 155 #anon_notice a {
 156         color: #fff;
 157 }
 158
 159 #anon_notice a:hover {
 160         text-decoration: underline;
 161 }
 162
 163 #site_notice {
 164     float: right;
 165     width: 266px;
 166     margin-left: 40px;
 167         background: none;
 168         border-radius: 4px;
 169         -moz-border-radius: 4px;
 170         -webkit-border-radius: 4px;
 171         border-color: #ccc;
 172         border-bottom-color: #999;
 173         border-right-color: #999;
 174         border-width: 1px;
 175         border-style: solid;
 176 }
 177
 178 .form_notice {
 179     float: right;
 180     width: 500px;
 181     margin-top: 0px;
 182         background: #ccc;
 183         border-radius: 4px;
 184         -moz-border-radius: 4px;
 185         -webkit-border-radius: 4px;
 186         padding: 10px;
 187 }
 188
 189 .form_notice fieldset {
 190     width: 510px;
 191 }
 192
 193 .form_notice textarea {
 194     width: 374px;
 195     height: 54px;
 196     border-radius:7px;
 197     -moz-border-radius:7px;
 198     -webkit-border-radius:7px;
 199     position:relative;
 200 }
 201
 202 .form_notice #notice_data-geo_wrap label,
 203 .form_notice #notice_data-geo_wrap input {
 204     top: 48px;
 205 }
 206
 207 .form_notice #notice_action-submit {
 208     font-size: 0.9em;
 209     top: 74px;
 210     right:0;
 211     height: 2.4em;
 212     width: 106px;
 213 }
 214
 215 #content {
 216         border-radius: 4px;
 217         -moz-border-radius: 4px;
 218         -webkit-border-radius: 4px;
 219         border-radius-topright: 0px;\r
 220         -moz-border-radius-topright: 0px;
 221         -webkit-border-top-right-radius: 0px;
 222         padding-left: 10px;
 223         padding-right: 10px;
 224     padding-top: 14px;
 225     width: 541px;
 226     margin-right: 0;
 227     background-color: #e2e2e2;
 228 }
 229
 230 #aside_primary {
 231         padding: 0px;
 232     margin-top: -20px;
 233     padding-top: 15px;
 234     background-color: #222;
 235         border-radius-bottomright: 6px;\r
 236         -moz-border-radius-bottomright: 6px;
 237         -webkit-border-bottom-right-radius: 6px;
 238 }
 239
 240 #aside_primary .section {
 241         border-radius: 4px;
 242         -moz-border-radius: 4px;
 243         -webkit-border-radius: 4px;
 244         padding: 6px;
 245         border: 1px solid #f9f9f9;
 246         box-shadow: 1px 1px 2px #444;
 247         -moz-box-shadow: 1px 1px 2px #444;
 248         -webkit-box-shadow: 1px 1px 2px #444;
 249     background-color: rgba(255,255,255, 0.4);
 250     float: left;
 251     width: 248px;
 252 }
 253
 254 #aside_primary .section H2 {\r
 255         font-size: 1.1em;\r
 256         font-weight: normal;\r
 257         letter-spacing: 0.2em;\r
 258         margin-bottom: 10px;
 259     margin-left: -4px;
 260         padding: 6px;
 261         margin-top: 2px;
 262         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 263         line-height: 1.1em;
 264 }
 265
 266 #site_nav_local_views {\r
 267         position: relative;\r
 268         z-index: 9;\r
 269         float: right;\r
 270         margin: 0px 10px 20px 0px;\r
 271     width: 271px;
 272 }\r
 273 \r
 274 #site_nav_local_views li {\r
 275         width:100%;\r
 276         margin-right:0;\r
 277         margin-bottom: 0px;
 278         text-align: right;
 279 }
 280
 281 #site_nav_local_views a {\r
 282         display:block;\r
 283     width: 242px;\r
 284         padding-right: 10px;\r
 285         padding-left:10%;
 286         border: 1px solid #fff;\r
 287         border-color: transparent;\r
 288         padding-top: 4px;\r
 289         padding-bottom: 4px;
 290         font-size: 1.1em;
 291         font-weight: normal;
 292         letter-spacing: 0.2em;
 293         text-transform: uppercase;
 294         color: #f2f2f2 !important;
 295     background-color: #4b4b4b;
 296         border-bottom: 1px solid #999;
 297         border-left: none;
 298         text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
 299         border-radius:0;\r
 300         -moz-border-radius:0;\r
 301         -webkit-border-radius:0;
 302     text-decoration: none;
 303 }
 304
 305
 306 #site_nav_local_views li:first-child a {
 307         border-radius-topright:4px;\r
 308         -moz-border-radius-topright:4px;
 309         -webkit-border-top-right-radius:4px;
 310 }\r
 311
 312 #site_nav_local_views a:hover {\r
 313         color: #4d424c !important;
 314         background-color: #c6c6c6;
 315         text-shadow: 0 1px 0 rgba(255,255,255,0.75);
 316 }
 317
 318 #site_nav_local_views .current a {
 319         display: block;
 320         color: #4d424c !important;
 321     margin-left: -1px;
 322     width: 243px;
 323     box-shadow: 1px 0px 1px #444;
 324         -moz-box-shadow: 1px 0px 1px #444;
 325         -webkit-box-shadow: 1px 0px 1px #444;\r
 326         border-bottom: 1px solid #fff;
 327         text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
 328     background-color: #e2e2e2;
 329     text-decoration: none;
 330 }
 331
 332 #aside_primary .notice {
 333     background: none;
 334     border: none;
 335 }
 336
 337 #content .notices li {
 338     border-top: 1px dotted #bbb;
 339     padding-top: 16px;
 340     margin-bottom: 16px;
 341 }
 342
 343 .notice {
 344     line-height: 1.35em;
 345 }
 346
 347 #content .notice .author .photo {
 348     top: 18px;
 349     left: 0px;
 350 }
 351
 352 #content .notice .entry-title {
 353     min-height: 27px;
 354 }
 355
 356 #showstream .notice .entry-title {
 357     min-height: 0px;
 358 }
 359
 360 #shownotice .notice .entry-title {
 361     min-height:123px;
 362 }
 363
 364 .notice div.entry-content {
 365     font-size: 0.9em;
 366     line-height: 1em;
 367     margin-top: 10px;
 368 }
 369
 370 .notice-options {
 371     margin-top: 6px;
 372 }
 373
 374 .user_in .notice div.entry-content {
 375     max-width: 360px;
 376     opacity: 0.6;
 377 }
 378
 379 .user_in .notice div.entry-content:hover {
 380     opacity: 1;
 381 }
 382
 383 div.entry-content a.response:before {
 384         content: "(";
 385 }
 386
 387 div.entry-content a.response:after {
 388         content: ")";
 389 }
 390
 391 #footer {
 392     background: none;
 393 }
 394
 395 }/*end of @media screen, projection, tv*/