mediagoblin/static/css/base.css

   1 body {
   2   background-color: #111;
   3   background-image: url("../images/background.png");
   4   color: #999;
   5   font-family: sans-serif;
   6   padding: none;
   7   margin: 0px;
   8   height: 100%;
   9   font: 16px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
  10 }
  11
  12 form {
  13   margin: 0px;
  14   padding: 0px;
  15 }
  16
  17 /* text styles */
  18
  19 h1{
  20   margin-bottom: 15px;
  21   margin-top: 15px;
  22   color: #fff;
  23   font-size: 1.875em;
  24 }
  25
  26 h2{
  27   margin-top: 20px;
  28   color: #fff;
  29 }
  30
  31 h3{
  32   border-bottom: 1px solid #333;
  33   font-size: 1.125em;
  34 }
  35
  36 a {
  37   color: #86D4B1;
  38 }
  39
  40 a.highlight {
  41   color: #fff;
  42 }
  43
  44 label {
  45   font-weight: normal;
  46 }
  47
  48 /* website structure */
  49
  50 .mediagoblin_body {
  51   position: relative;
  52   min-height: 100%;
  53 }
  54
  55 .mediagoblin_header {
  56   height: 36px;
  57   padding-top: 14px;
  58   margin-bottom: 20px;
  59   border-bottom: 1px solid #333;
  60 }
  61
  62 a.mediagoblin_logo{
  63   color: #fff;
  64   font-weight: bold;
  65 }
  66
  67 .header_submit{
  68   color: #272727;
  69   background-color: #aaa;
  70   background-image: -webkit-gradient(linear, left top, left bottom, from(##D2D2D2), to(#aaa));
  71   background-image: -webkit-linear-gradient(top, #D2D2D2, #aaa);
  72   background-image:    -moz-linear-gradient(top, #D2D2D2, #aaa);
  73   background-image:     -ms-linear-gradient(top, #D2D2D2, #aaa);
  74   background-image:      -o-linear-gradient(top, #D2D2D2, #aaa);
  75   background-image:         linear-gradient(top, #D2D2D2, #aaa);
  76   box-shadow: 0px 0px 4px #000;
  77   border-radius: 3px;
  78   margin: 8px;
  79   padding: 3px 8px;
  80   text-decoration: none;
  81   border: medium none;
  82 }
  83
  84 .mediagoblin_footer {
  85   height: 30px;
  86   border-top: 1px solid #333;
  87   bottom: 0px;
  88   padding-top: 8px;
  89   text-align: center;
  90   font-size: 0.8125em;
  91   color: #999;
  92 }
  93
  94 .mediagoblin_content {
  95   padding-bottom: 74px;
  96 }
  97
  98 .mediagoblin_header_right {
  99   float: right;
 100 }
 101
 102 /* common website elements */
 103
 104 .button {
 105   height: 32px;
 106   min-width: 99px;
 107   background-color: #86d4b1;
 108   background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2));
 109   background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2);
 110   background-image:    -moz-linear-gradient(top, #86d4b1, #62caa2);
 111   background-image:     -ms-linear-gradient(top, #86d4b1, #62caa2);
 112   background-image:      -o-linear-gradient(top, #86d4b1, #62caa2);
 113   background-image:         linear-gradient(top, #86d4b1, #62caa2);
 114   box-shadow: 0px 0px 4px #000;
 115   border-radius: 3px;
 116   border: none;
 117   color: #272727;
 118   margin: 10px 0px 10px 15px;
 119   text-align: center;
 120   padding-left: 11px;
 121   padding-right: 11px;
 122   text-decoration: none;
 123 }
 124
 125 .pagination{
 126 text-align: center;
 127 }
 128
 129 .pagination_arrow{
 130   margin: 5px;
 131 }
 132
 133 /* forms */
 134
 135 .form_box {
 136   background-color: #222;
 137   background-image: url("../images/background_lines.png");
 138   background-repeat: repeat-x;
 139   padding-bottom: 30px;
 140   padding-top: 30px;
 141   margin-left: auto;
 142   margin-right: auto;
 143   display: block;
 144   float: none;
 145 }
 146
 147 .edit_box {
 148   background-image: url("../images/background_edit.png");
 149 }
 150
 151 .form_field_input input, .form_field_input textarea {
 152   width: 100%;
 153 }
 154
 155 .form_field_box {
 156   margin-bottom: 24px;
 157 }
 158
 159 .form_field_label,.form_field_input {
 160   margin-bottom: 4px;
 161 }
 162
 163 .form_field_error {
 164   background-color: #87453b;
 165   color: #fff;
 166   border: none;
 167   padding: 9px;
 168   margin-top: 8px;
 169   margin-bottom: 8px;
 170 }
 171
 172 .form_submit_buttons {
 173   text-align: right;
 174 }
 175
 176 /* comments */
 177
 178 .comment_author {
 179   margin-bottom: 40px;
 180   padding-top: 4px;
 181   font-size: 0.9em;
 182 }
 183
 184 .comment_content p {
 185   margin-bottom: 4px;
 186 }
 187
 188 /* media galleries */
 189
 190 .media_thumbnail {
 191   padding: 0px;
 192   width: 180px;
 193   height: 180px;
 194   overflow: hidden;
 195   float: left;
 196   margin: 0px 4px 10px 4px;
 197   text-align: center;
 198 }
 199
 200 /* media detail */
 201
 202 h2.media_title{
 203   margin-bottom: 0px;
 204 }
 205
 206 p.media_uploader{
 207   font-size: 0.9em;
 208 }
 209
 210 /* icons */
 211
 212 img.media_icon{
 213   margin: 0 4px;
 214   vertical-align: sub;
 215 }
 216
 217 /* navigation */
 218
 219 .navigation_button{
 220   width: 139px;
 221   display: block;
 222   float: left;
 223   text-align: center;
 224   background-color: #333;
 225   text-decoration: none;
 226   padding: 12px 0pt;
 227   font-size: 2em;
 228   margin: 0 0 20px
 229 }
 230
 231 p.navigation_button{
 232   color: #272727;
 233 }
 234
 235 .navigation_left{
 236   margin-right: 2px;
 237 }
 238
 239 /* messages */
 240
 241 ul.mediagoblin_messages {
 242   list-style: none inside;
 243   color: #f7f7f7;
 244 }
 245
 246 .mediagoblin_messages li {
 247   margin: 5px 0;
 248   padding: 8px;
 249   text-align: center;
 250 }
 251
 252 .message_success {
 253   background-color: #378566;
 254 }
 255
 256 .message_warning {
 257   background-color: #87453b;
 258 }
 259
 260 .message_error {
 261   background-color: #87453b;
 262 }
 263
 264 .message_info {
 265   background-color: #378566;
 266 }
 267
 268 .message_debug {
 269   background-color: #f7f7f7;
 270   color: #272727;
 271 }
 272
 273 ul.mediaentry_tags {
 274   list-style-type: none;
 275 }
 276
 277 ul.mediaentry_tags li {
 278   display: inline;
 279   margin: 0px 5px 0px 0px;
 280   padding: 0px;
 281 }