mediagoblin/static/css/base.css

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