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   padding: none;
  33   margin: 0px;
  34   height: 100%;
  35   font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
  36 }
  37
  38 form {
  39   margin: 0px;
  40   padding: 0px;
  41 }
  42
  43 /* text styles */
  44
  45 h1,h2,h3,p {
  46   margin-bottom: 20px;
  47 }
  48
  49 h1,h2,h3 {
  50   font-weight: bold;
  51 }
  52
  53 h1 {
  54   margin-top: 15px;
  55   color: #fff;
  56   font-size: 1.875em;
  57 }
  58
  59 h2 {
  60   font-size: 1.375em;
  61   margin-top: 20px;
  62   color: #fff;
  63 }
  64
  65 h3 {
  66   border-bottom: 1px solid #333;
  67   font-size: 1.125em;
  68 }
  69
  70 p {
  71   margin-top: 0px;
  72 }
  73
  74 a {
  75   color: #86D4B1;
  76 }
  77
  78 a.highlight {
  79   color: #fff;
  80 }
  81
  82 em {
  83   font-style: italic;
  84 }
  85
  86 strong {
  87   font-weight: bold;
  88 }
  89
  90 ul {
  91   list-style: disc inside;
  92 }
  93
  94 ol {
  95   list-style: decimal inside;
  96 }
  97
  98 label {
  99   font-weight: normal;
 100 }
 101
 102 input, textarea {
 103   font-size:1em;
 104   font-family:'Lato', sans-serif;
 105 }
 106
 107 /* website structure */
 108
 109 .container {
 110   margin: auto;
 111   width: 96%;
 112   max-width: 940px;
 113 }
 114
 115 header {
 116   width: 100%;
 117   height: 36px;
 118   padding-top: 14px;
 119   margin-bottom: 20px;
 120   border-bottom: 1px solid #333;
 121 }
 122
 123 .header_right {
 124   float: right;
 125 }
 126
 127 a.logo {
 128   color: #fff;
 129   font-weight: bold;
 130   margin-right: 8px;
 131 }
 132
 133 .logo img {
 134   vertical-align: middle;
 135 }
 136
 137 .mediagoblin_content {
 138   width: 100%;
 139   padding-bottom: 74px;
 140 }
 141
 142 footer {
 143   width: 100%;
 144   height: 30px;
 145   border-top: 1px solid #333;
 146   bottom: 0px;
 147   padding-top: 8px;
 148   text-align: center;
 149   font-size: 0.875em;
 150   clear: both;
 151 }
 152
 153 .media_pane {
 154   width: 640px;
 155   margin-left: 0px;
 156   margin-right: 10px;
 157   float: left;
 158 }
 159
 160 .media_sidebar {
 161   width: 280px;
 162   margin-left: 10px;
 163   margin-right: 0px;
 164   float: left;
 165 }
 166
 167 .profile_sidebar {
 168   width: 340px;
 169   margin-right: 10px;
 170   float: left;
 171 }
 172
 173 .profile_showcase {
 174   width: 580px;
 175   margin-left: 10px;
 176   float: left;
 177 }
 178
 179 /* common website elements */
 180
 181 .button_action, .button_action_highlight {
 182   display: inline-block;
 183   color: #c3c3c3;
 184   background-color: #363636;
 185   border: 1px solid;
 186   border-color: #464646 #2B2B2B #252525;
 187   border-radius: 4px;
 188   padding: 3px 8px;
 189   font-size: 16px;
 190   text-decoration: none;
 191   font-style: normal;
 192   font-weight: bold;
 193   cursor: pointer;
 194 }
 195
 196 .button_action_highlight {
 197   background-color: #86D4B1;
 198   border-color: #A2DEC3 #6CAA8E #5C9179;
 199   color: #283F35;
 200 }
 201
 202 .button_form, .cancel_link {
 203   height: 32px;
 204   min-width: 99px;
 205   background-color: #86d4b1;
 206   background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2));
 207   background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2);
 208   background-image:    -moz-linear-gradient(top, #86d4b1, #62caa2);
 209   background-image:     -ms-linear-gradient(top, #86d4b1, #62caa2);
 210   background-image:      -o-linear-gradient(top, #86d4b1, #62caa2);
 211   background-image:         linear-gradient(top, #86d4b1, #62caa2);
 212   box-shadow: 0px 0px 4px #000;
 213   border-radius: 3px;
 214   border: none;
 215   color: #272727;
 216   margin: 10px 0px 10px 15px;
 217   text-align: center;
 218   padding-left: 11px;
 219   padding-right: 11px;
 220   text-decoration: none;
 221   font-family: 'Lato', sans-serif;
 222   font-weight: bold;
 223 }
 224
 225 .cancel_link {
 226   background-color: #aaa;
 227   background-image: -webkit-gradient(linear, left top, left bottom, from(##D2D2D2), to(#aaa));
 228   background-image: -webkit-linear-gradient(top, #D2D2D2, #aaa);
 229   background-image:    -moz-linear-gradient(top, #D2D2D2, #aaa);
 230   background-image:     -ms-linear-gradient(top, #D2D2D2, #aaa);
 231   background-image:      -o-linear-gradient(top, #D2D2D2, #aaa);
 232   background-image:         linear-gradient(top, #D2D2D2, #aaa);
 233 }
 234
 235 .pagination {
 236 text-align: center;
 237 }
 238
 239 .pagination_arrow {
 240   margin: 5px;
 241 }
 242
 243 .empty_space {
 244   background-image: url("../images/empty_back.png");
 245   font-style: italic;
 246   text-align: center;
 247   height: 160px;
 248   padding-top: 70px;
 249 }
 250
 251 .right_align {
 252   float: right;
 253 }
 254
 255 textarea#comment_content {
 256   resize: vertical;
 257   width: 634px;
 258   height: 90px;
 259   border: none;
 260   background-color: #f1f1f1;
 261   padding: 3px;
 262 }
 263
 264 .clear {
 265   clear: both;
 266   display: block;
 267   overflow: hidden;
 268   visibility: hidden;
 269   width: 0;
 270   height: 0;
 271 }
 272
 273 /* forms */
 274
 275 .form_box,.form_box_xl {
 276   background-color: #222;
 277   background-image: url("../images/background_lines.png");
 278   background-repeat: repeat-x;
 279   padding: 3% 5%;
 280   display: block;
 281   float: none;
 282   width: 90%;
 283   max-width: 340px;
 284   margin-left: auto;
 285   margin-right: auto;
 286 }
 287
 288 .form_box_xl {
 289   max-width: 460px;
 290 }
 291
 292 .edit_box {
 293   background-image: url("../images/background_edit.png");
 294 }
 295
 296 .form_field_input input, .form_field_input textarea {
 297   width: 100%;
 298 }
 299
 300 .form_field_input {
 301   margin-bottom: 10px;
 302 }
 303
 304 .form_field_label {
 305   margin-bottom: 4px;
 306 }
 307
 308 .form_field_label {
 309   font-size:1.125em;
 310 }
 311
 312 .form_field_description {
 313   font-style: italic;
 314 }
 315
 316 .form_field_error {
 317   background-color: #87453b;
 318   color: #fff;
 319   border: none;
 320   padding: 9px;
 321   margin-top: 8px;
 322   margin-bottom: 8px;
 323 }
 324
 325 .form_submit_buttons {
 326   text-align: right;
 327 }
 328
 329 #password_boolean {
 330   margin-top: 4px;
 331   width: 20px;
 332 }
 333
 334 textarea#description, textarea#bio {
 335   resize: vertical;
 336 }
 337
 338 /* comments */
 339
 340 .comment_author {
 341   margin-bottom: 40px;
 342   padding-top: 4px;
 343   font-size: 0.9em;
 344 }
 345
 346 .comment_content {
 347   margin-bottom: 30px;
 348 }
 349
 350 .comment_content p {
 351   margin-bottom: 0px;
 352 }
 353
 354 textarea#comment_content {
 355   width: 634px;
 356   height: 90px;
 357   border: none;
 358   background-color: #f1f1f1;
 359   padding: 3px;
 360 }
 361
 362 /* media galleries */
 363
 364 .media_thumbnail {
 365   padding: 0px;
 366   width: 180px;
 367   overflow: hidden;
 368   float: left;
 369   margin: 0px 4px 10px 4px;
 370   text-align: center;
 371   font-size: 0.875em;
 372 }
 373
 374 .media_thumbnail a {
 375   color: #eee;
 376   text-decoration: none;
 377 }
 378
 379 /* media detail */
 380
 381 h2.media_title {
 382   margin-bottom: 0px;
 383 }
 384
 385 p.media_specs {
 386   font-size: 0.9em;
 387   border-top: 1px solid #222;
 388   padding: 10px 0px;
 389   color: #888;
 390 }
 391
 392 .no_html5 {
 393     background: black;
 394     color: white;
 395     text-align: center;
 396     height: 160px;
 397     padding: 130px 10px 20px 10px;
 398 }
 399
 400 /* icons */
 401
 402 img.media_icon {
 403   margin: 0 4px;
 404   vertical-align: sub;
 405 }
 406
 407 /* navigation */
 408
 409 .navigation_button {
 410   width: 135px;
 411   display: block;
 412   float: left;
 413   text-align: center;
 414   background-color: #1d1d1d;
 415   border: 1px solid;
 416   border-color: #2c2c2c #232323 #1a1a1a;
 417   border-radius: 4px;
 418   text-decoration: none;
 419   padding: 12px 0 16px;
 420   font-size: 1.4em;
 421   margin: 0 0 20px
 422 }
 423
 424 .navigation_left {
 425   margin-right: 6px;
 426 }
 427
 428 /* messages */
 429
 430 ul.mediagoblin_messages {
 431   list-style: none inside;
 432   color: #f7f7f7;
 433   padding: 0;
 434 }
 435
 436 .mediagoblin_messages li {
 437   margin: 5px 0;
 438   padding: 8px;
 439   text-align: center;
 440 }
 441
 442 .message_success {
 443   background-color: #378566;
 444 }
 445
 446 .message_warning {
 447   background-color: #87453b;
 448 }
 449
 450 .message_error {
 451   background-color: #87453b;
 452 }
 453
 454 .message_info {
 455   background-color: #378566;
 456 }
 457
 458 .message_debug {
 459   background-color: #f7f7f7;
 460   color: #272727;
 461 }
 462
 463 ul.mediaentry_tags {
 464   list-style-type: none;
 465 }
 466
 467 ul.mediaentry_tags li {
 468   display: inline;
 469   margin: 0px 5px 0px 0px;
 470   padding: 0px;
 471 }
 472
 473
 474 /* media processing panel */
 475
 476 table.media_panel {
 477   width: 100%;
 478 }
 479
 480 table.media_panel th {
 481   font-weight: bold;
 482   padding-bottom: 4px;
 483 }
 484
 485
 486 /* Delete panel */
 487
 488 .delete_checkbox_box {
 489   margin-top: 10px;
 490   margin-left: 10px;
 491 }
 492
 493 /* ASCII art */
 494
 495 @font-face {
 496   font-family: Inconsolata;
 497   src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
 498 }
 499
 500 .ascii-wrapper pre {
 501   font-family: Inconsolata, monospace;
 502   line-height: 1em;
 503 }
 504
 505 /* Media queries and other responsivisivity */
 506 @media screen and (max-width: 680px) {
 507   .media_pane {
 508     width: 100%;
 509     margin: 0px;
 510   }
 511   img.media_image {
 512     width: 100%;
 513   }
 514 }
 515
 516 @media screen and (max-width: 960px) {
 517   .profile_sidebar {
 518     width: 100%;
 519     margin: 0px;
 520   }
 521   .profile_showcase {
 522     width: 100%;
 523     margin: 0px;
 524   }
 525 }