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('../fonts/Lato-Bold.ttf') format('truetype');
   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('../fonts/Lato-Italic.ttf') format('truetype');
  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('../fonts/Lato-BoldItalic.ttf') format('truetype');
  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('../fonts/Lato-Regular.ttf') format('truetype');
  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: #c3c3c3;
 103   background-color: #2d2d2d;
 104   border: 1px solid;
 105   border-color: #323232 #232323 #1F1F1F;
 106   border-radius: 4px;
 107   margin: 8px;
 108   padding: 3px 8px;
 109   text-decoration: none;
 110   font-style: normal;
 111   font-weight: bold;
 112   font-size: 1em;
 113 }
 114
 115 .header_submit_highlight{
 116 background-image: -moz-linear-gradient(center top , rgb(134, 212, 177), rgb(109, 173, 144));
 117 }
 118
 119 .mediagoblin_footer {
 120   height: 30px;
 121   border-top: 1px solid #333;
 122   bottom: 0px;
 123   padding-top: 8px;
 124   text-align: center;
 125   font-size: 0.875em;
 126 }
 127
 128 .mediagoblin_content {
 129   padding-bottom: 74px;
 130 }
 131
 132 .mediagoblin_header_right {
 133   float: right;
 134 }
 135
 136 /* common website elements */
 137
 138 .button, .cancel_link {
 139   height: 32px;
 140   min-width: 99px;
 141   background-color: #86d4b1;
 142   background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2));
 143   background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2);
 144   background-image:    -moz-linear-gradient(top, #86d4b1, #62caa2);
 145   background-image:     -ms-linear-gradient(top, #86d4b1, #62caa2);
 146   background-image:      -o-linear-gradient(top, #86d4b1, #62caa2);
 147   background-image:         linear-gradient(top, #86d4b1, #62caa2);
 148   box-shadow: 0px 0px 4px #000;
 149   border-radius: 3px;
 150   border: none;
 151   color: #272727;
 152   margin: 10px 0px 10px 15px;
 153   text-align: center;
 154   padding-left: 11px;
 155   padding-right: 11px;
 156   text-decoration: none;
 157   font-family: 'Lato', sans-serif;
 158   font-weight: bold;
 159 }
 160
 161 .cancel_link {
 162   background-color: #aaa;
 163   background-image: -webkit-gradient(linear, left top, left bottom, from(##D2D2D2), to(#aaa));
 164   background-image: -webkit-linear-gradient(top, #D2D2D2, #aaa);
 165   background-image:    -moz-linear-gradient(top, #D2D2D2, #aaa);
 166   background-image:     -ms-linear-gradient(top, #D2D2D2, #aaa);
 167   background-image:      -o-linear-gradient(top, #D2D2D2, #aaa);
 168   background-image:         linear-gradient(top, #D2D2D2, #aaa);
 169 }
 170
 171 .pagination{
 172 text-align: center;
 173 }
 174
 175 .pagination_arrow{
 176   margin: 5px;
 177 }
 178
 179 .empty_space{
 180   background-image: url("../images/empty_back.png");
 181   font-style: italic;
 182   text-align: center;
 183   height: 160px;
 184   padding-top: 70px;
 185 }
 186
 187 /* forms */
 188
 189 .form_box {
 190   background-color: #222;
 191   background-image: url("../images/background_lines.png");
 192   background-repeat: repeat-x;
 193   padding-bottom: 30px;
 194   padding-top: 30px;
 195   margin-left: auto;
 196   margin-right: auto;
 197   display: block;
 198   float: none;
 199 }
 200
 201 .edit_box {
 202   background-image: url("../images/background_edit.png");
 203 }
 204
 205 .form_field_input input, .form_field_input textarea {
 206   width: 100%;
 207 }
 208
 209 .form_field_input {
 210   margin-bottom: 10px;
 211 }
 212
 213 .form_field_label {
 214   margin-bottom: 4px;
 215 }
 216
 217 .form_field_label {
 218   font-size:1.125em;
 219 }
 220
 221 .form_field_description {
 222   font-style: italic;
 223 }
 224
 225 .form_field_error {
 226   background-color: #87453b;
 227   color: #fff;
 228   border: none;
 229   padding: 9px;
 230   margin-top: 8px;
 231   margin-bottom: 8px;
 232 }
 233
 234 .form_submit_buttons {
 235   text-align: right;
 236 }
 237
 238 /* comments */
 239
 240 .comment_author {
 241   margin-bottom: 40px;
 242   padding-top: 4px;
 243   font-size: 0.9em;
 244 }
 245
 246 .comment_content {
 247   margin-bottom: 30px;
 248 }
 249
 250 .comment_content p {
 251   margin-bottom: 0px;
 252 }
 253
 254 /* media galleries */
 255
 256 .media_thumbnail {
 257   padding: 0px;
 258   width: 180px;
 259   overflow: hidden;
 260   float: left;
 261   margin: 0px 4px 10px 4px;
 262   text-align: center;
 263   font-size: 0.875em;
 264 }
 265
 266 .media_thumbnail a {
 267   color: #eee;
 268   text-decoration: none;
 269 }
 270
 271 /* media detail */
 272
 273 h2.media_title{
 274   margin-bottom: 0px;
 275 }
 276
 277 p.media_uploader{
 278   font-size: 0.9em;
 279 }
 280
 281 /* icons */
 282
 283 img.media_icon{
 284   margin: 0 4px;
 285   vertical-align: sub;
 286 }
 287
 288 /* navigation */
 289
 290 .navigation_button{
 291   width: 135px;
 292   display: block;
 293   float: left;
 294   text-align: center;
 295   background-color: #1d1d1d;
 296   border: 1px solid;
 297   border-color: #2c2c2c #232323 #1a1a1a;
 298   border-radius: 4px;
 299   text-decoration: none;
 300   padding: 8px 0px 14px;
 301   font-size: 2em;
 302   margin: 0 0 20px
 303 }
 304
 305 p.navigation_button{
 306   color: #272727;
 307 }
 308
 309 .navigation_left{
 310   margin-right: 6px;
 311 }
 312
 313 /* messages */
 314
 315 ul.mediagoblin_messages {
 316   list-style: none inside;
 317   color: #f7f7f7;
 318 }
 319
 320 .mediagoblin_messages li {
 321   margin: 5px 0;
 322   padding: 8px;
 323   text-align: center;
 324 }
 325
 326 .message_success {
 327   background-color: #378566;
 328 }
 329
 330 .message_warning {
 331   background-color: #87453b;
 332 }
 333
 334 .message_error {
 335   background-color: #87453b;
 336 }
 337
 338 .message_info {
 339   background-color: #378566;
 340 }
 341
 342 .message_debug {
 343   background-color: #f7f7f7;
 344   color: #272727;
 345 }
 346
 347 ul.mediaentry_tags {
 348   list-style-type: none;
 349 }
 350
 351 ul.mediaentry_tags li {
 352   display: inline;
 353   margin: 0px 5px 0px 0px;
 354   padding: 0px;
 355 }
 356
 357
 358 /* media processing panel */
 359
 360 table.media_panel {
 361   width: 100%;
 362 }
 363
 364 table.media_panel th {
 365   font-weight: bold;
 366   padding-bottom: 4px;
 367 }
 368
 369
 370 /* Delete panel */
 371
 372 .delete_checkbox_box {
 373   margin-top: 10px;
 374   margin-left: 10px;
 375 }