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: 96px;
 213     right: 10px;
 214 }
 215
 216 #content {
 217         border-radius: 4px;
 218         -moz-border-radius: 4px;
 219         -webkit-border-radius: 4px;
 220         border-radius-topright: 0px;\r
 221         -moz-border-radius-topright: 0px;
 222         -webkit-border-top-right-radius: 0px;
 223         padding-left: 10px;
 224         padding-right: 10px;
 225     padding-top: 14px;
 226     width: 541px;
 227     margin-right: 0;
 228     background-color: #e2e2e2;
 229 }
 230
 231 #aside_primary {
 232         padding: 0px;
 233     margin-top: -20px;
 234     padding-top: 15px;
 235     background-color: #222;
 236         border-radius-bottomright: 6px;\r
 237         -moz-border-radius-bottomright: 6px;
 238         -webkit-border-bottom-right-radius: 6px;
 239 }
 240
 241 #aside_primary .section {
 242         border-radius: 4px;
 243         -moz-border-radius: 4px;
 244         -webkit-border-radius: 4px;
 245         padding: 6px;
 246         border: 1px solid #f9f9f9;
 247         box-shadow: 1px 1px 2px #444;
 248         -moz-box-shadow: 1px 1px 2px #444;
 249         -webkit-box-shadow: 1px 1px 2px #444;
 250     background-color: rgba(255,255,255, 0.4);
 251     float: left;
 252     width: 248px;
 253 }
 254
 255 #aside_primary .section H2 {\r
 256         font-size: 1.1em;\r
 257         font-weight: normal;\r
 258         letter-spacing: 0.2em;\r
 259         margin-bottom: 10px;
 260     margin-left: -4px;
 261         padding: 6px;
 262         margin-top: 2px;
 263         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 264         line-height: 1.1em;
 265 }
 266
 267 #site_nav_local_views {\r
 268         position: relative;\r
 269         z-index: 9;\r
 270         float: right;\r
 271         margin: 0px 10px 20px 0px;\r
 272     width: 271px;
 273 }\r
 274 \r
 275 #site_nav_local_views li {\r
 276         width:100%;\r
 277         margin-right:0;\r
 278         margin-bottom: 0px;
 279         text-align: right;
 280 }
 281
 282 #site_nav_local_views a {\r
 283         display:block;\r
 284     width: 242px;\r
 285         padding-right: 10px;\r
 286         padding-left:10%;
 287         border: 1px solid #fff;\r
 288         border-color: transparent;\r
 289         padding-top: 4px;\r
 290         padding-bottom: 4px;
 291         font-size: 1.1em;
 292         font-weight: normal;
 293         letter-spacing: 0.2em;
 294         text-transform: uppercase;
 295         color: #f2f2f2 !important;
 296     background-color: #4b4b4b;
 297         border-bottom: 1px solid #999;
 298         border-left: none;
 299         text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
 300         border-radius:0;\r
 301         -moz-border-radius:0;\r
 302         -webkit-border-radius:0;
 303     text-decoration: none;
 304 }
 305
 306
 307 #site_nav_local_views li:first-child a {
 308         border-radius-topright:4px;\r
 309         -moz-border-radius-topright:4px;
 310         -webkit-border-top-right-radius:4px;
 311 }\r
 312
 313 #site_nav_local_views a:hover {\r
 314         color: #4d424c !important;
 315         background-color: #c6c6c6;
 316         text-shadow: 0 1px 0 rgba(255,255,255,0.75);
 317 }
 318
 319 #site_nav_local_views .current a {
 320         display: block;
 321         color: #4d424c !important;
 322     margin-left: -1px;
 323     width: 243px;
 324     box-shadow: 1px 0px 1px #444;
 325         -moz-box-shadow: 1px 0px 1px #444;
 326         -webkit-box-shadow: 1px 0px 1px #444;\r
 327         border-bottom: 1px solid #fff;
 328         text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
 329     background-color: #e2e2e2;
 330     text-decoration: none;
 331 }
 332
 333 #aside_primary .notice {
 334     background: none;
 335     border: none;
 336 }
 337
 338 #content .notices li {
 339     border-top: 1px dotted #bbb;
 340     padding-top: 16px;
 341     margin-bottom: 16px;
 342 }
 343
 344 .notice {
 345     line-height: 1.35em;
 346 }
 347
 348 #content .notice .author .photo {
 349     top: 18px;
 350     left: 0px;
 351 }
 352
 353 #content .notice .entry-title {
 354     min-height: 27px;
 355 }
 356
 357 #showstream .notice .entry-title {
 358     min-height: 0px;
 359 }
 360
 361 #shownotice .notice .entry-title {
 362     min-height:123px;
 363 }
 364
 365 .notice div.entry-content {
 366     font-size: 0.9em;
 367     line-height: 1em;
 368     margin-top: 10px;
 369 }
 370
 371 .notice-options {
 372     margin-top: 6px;
 373 }
 374
 375 .user_in .notice div.entry-content {
 376     max-width: 360px;
 377     opacity: 0.6;
 378 }
 379
 380 .user_in .notice div.entry-content:hover {
 381     opacity: 1;
 382 }
 383
 384 div.entry-content a.response:before {
 385         content: "(";
 386 }
 387
 388 div.entry-content a.response:after {
 389         content: ")";
 390 }
 391
 392 #footer {
 393     background: none;
 394 }
 395
 396 }/*end of @media screen, projection, tv*/