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