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: #161616;
  30   color: #C3C3C3;
  31   padding: 0;
  32   margin: 0px;
  33   height: 100%;
  34   font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
  35 }
  36
  37 form {
  38   margin: 0px;
  39   padding: 0px;
  40 }
  41
  42 /* text styles */
  43
  44 h1,h2,h3,p {
  45   margin-bottom: 20px;
  46 }
  47
  48 h1,h2,h3 {
  49   font-weight: bold;
  50 }
  51
  52 h1 {
  53   margin-top: 15px;
  54   color: #fff;
  55   font-size: 1.875em;
  56 }
  57
  58 h2 {
  59   font-size: 1.375em;
  60   margin-top: 20px;
  61   color: #fff;
  62 }
  63
  64 h3 {
  65   border-bottom: 1px solid #333;
  66   font-size: 1.125em;
  67 }
  68
  69 p {
  70   margin-top: 0px;
  71 }
  72
  73 a {
  74   color: #86D4B1;
  75 }
  76
  77 a.highlight {
  78   color: #fff;
  79 }
  80
  81 em {
  82   font-style: italic;
  83 }
  84
  85 strong {
  86   font-weight: bold;
  87 }
  88
  89 ul {
  90   list-style: disc inside;
  91 }
  92
  93 ol {
  94   list-style: decimal inside;
  95 }
  96
  97 label {
  98   font-weight: normal;
  99 }
 100
 101 input, textarea {
 102   font-size:1em;
 103   font-family:'Lato', sans-serif;
 104 }
 105
 106 /* website structure */
 107
 108 .container {
 109   margin: auto;
 110   width: 96%;
 111   max-width: 940px;
 112 }
 113
 114 header {
 115   width: 100%;
 116   max-width: 940px;
 117   margin-left: auto;
 118   margin-right: auto;
 119   padding: 0;
 120   margin-bottom: 42px;
 121   border-bottom: 1px solid #333;
 122 }
 123
 124 .header_right {
 125   margin: 8px;
 126   display: inline-block;
 127   float: right;
 128 }
 129
 130 .header_dropdown {
 131   margin-bottom: 20px;
 132   padding: 0px 10px 0px 10px;
 133 }
 134
 135 .header_dropdown li {
 136   margin: 4px 0;
 137   list-style: none;
 138 }
 139
 140 .header_dropdown p {
 141   margin-top: 12px;
 142   margin-bottom: 10px;
 143 }
 144
 145 .dropdown_title {
 146   font-size: 20px;
 147 }
 148
 149 a.logo {
 150   color: #fff;
 151   font-weight: bold;
 152 }
 153
 154 .logo img {
 155   vertical-align: middle;
 156   margin: 6px 8px 6px 0;
 157 }
 158
 159 .mediagoblin_content {
 160   width: 100%;
 161   padding-bottom: 74px;
 162 }
 163
 164 footer {
 165   width: 100%;
 166   height: 30px;
 167   border-top: 1px solid #333;
 168   bottom: 0px;
 169   padding: 8px 0;
 170   text-align: center;
 171   font-size: 0.875em;
 172   clear: both;
 173 }
 174
 175 .media_pane {
 176   width: 640px;
 177   margin-left: 0px;
 178   margin-right: 10px;
 179   float: left;
 180 }
 181
 182 .media_sidebar {
 183   width: 280px;
 184   margin-left: 10px;
 185   float: left;
 186 }
 187
 188 .profile_sidebar {
 189   width: 340px;
 190   margin-right: 10px;
 191   float: left;
 192 }
 193
 194 .profile_showcase {
 195   width: 580px;
 196   margin-left: 10px;
 197   float: left;
 198 }
 199
 200 /* common website elements */
 201
 202 .button_action, .button_action_highlight, .button_form {
 203   display: inline-block;
 204   color: #c3c3c3;
 205   background-color: #363636;
 206   border: 1px solid;
 207   border-color: #464646 #2B2B2B #252525;
 208   border-radius: 4px;
 209   padding: 3px 8px;
 210   font-size: 16px;
 211   text-decoration: none;
 212   font-style: normal;
 213   font-weight: bold;
 214   cursor: pointer;
 215 }
 216
 217 .button_action_highlight, .button_form {
 218   background-color: #86D4B1;
 219   border-color: #A2DEC3 #6CAA8E #5C9179;
 220   color: #283F35;
 221 }
 222
 223 .button_form {
 224   min-width: 99px;
 225   margin: 10px 0px 10px 15px;
 226   text-align: center;
 227   font-family: 'Lato', sans-serif;
 228 }
 229
 230 .pagination {
 231 text-align: center;
 232 }
 233
 234 .pagination_arrow {
 235   margin: 5px;
 236 }
 237
 238 .empty_space {
 239   background-image: url("../images/empty_back.png");
 240   font-style: italic;
 241   text-align: center;
 242   height: 160px;
 243   padding-top: 70px;
 244 }
 245
 246 .right_align {
 247   float: right;
 248 }
 249
 250 .clear {
 251   clear: both;
 252   display: block;
 253   overflow: hidden;
 254   visibility: hidden;
 255   width: 0;
 256   height: 0;
 257 }
 258
 259 .hidden {
 260   display: none;
 261 }
 262
 263 .media_sidebar h3 {
 264         font-size: 1em;
 265         margin: 0 0 5px;
 266         border: none;
 267 }
 268
 269 .media_sidebar p {
 270         margin-left: 8px;
 271 }
 272
 273 /* forms */
 274
 275 .form_box,.form_box_xl {
 276   background-color: #222;
 277   border-top: 6px solid #D49086;
 278   padding: 3% 5%;
 279   display: block;
 280   float: none;
 281   width: 90%;
 282   max-width: 340px;
 283   margin-left: auto;
 284   margin-right: auto;
 285 }
 286
 287 .form_box_xl {
 288   max-width: 460px;
 289 }
 290
 291 .edit_box {
 292   border-top: 6px dashed #D49086
 293 }
 294
 295 .form_field_input input, .form_field_input textarea {
 296   width: 100%;
 297 }
 298
 299 .form_field_input {
 300   margin-bottom: 10px;
 301 }
 302
 303 .form_field_label {
 304   margin-bottom: 4px;
 305 }
 306
 307 .form_field_label {
 308   font-size:1.125em;
 309 }
 310
 311 .form_field_description {
 312   font-style: italic;
 313 }
 314
 315 .form_field_error {
 316   background-color: #87453b;
 317   color: #fff;
 318   border: none;
 319   padding: 9px;
 320   margin-top: 8px;
 321   margin-bottom: 8px;
 322 }
 323
 324 .form_submit_buttons {
 325   text-align: right;
 326 }
 327
 328 .subform {
 329   margin: 2em;
 330 }
 331
 332 #password_boolean {
 333   margin-top: 4px;
 334   width: 20px;
 335 }
 336
 337 .boolean {
 338   margin-bottom: 8px;
 339   }
 340
 341 textarea#description, textarea#bio {
 342   resize: vertical;
 343   height: 100px;
 344 }
 345
 346 .delete {
 347   margin-top: 36px;
 348   display: block;
 349   text-align: center;
 350 }
 351
 352 /* comments */
 353
 354 .comment_wrapper {
 355   margin-top: 20px;
 356   margin-bottom: 20px;
 357 }
 358
 359 .comment_wrapper p {
 360   margin-bottom: 2px;
 361 }
 362
 363 .comment_author {
 364   padding-top: 4px;
 365   font-size: 0.9em;
 366 }
 367
 368 a.comment_authorlink {
 369   text-decoration: none;
 370   padding-right: 5px;
 371   font-weight: bold;
 372   padding-left: 2px;
 373 }
 374
 375 a.comment_authorlink:hover {
 376   text-decoration: underline;
 377 }
 378
 379 a.comment_whenlink {
 380   text-decoration: none;
 381 }
 382
 383 a.comment_whenlink:hover {
 384   text-decoration: underline;
 385 }
 386
 387 .comment_content {
 388   margin-left: 8px;
 389   margin-top: 8px;
 390 }
 391
 392 .comment_active {
 393   box-shadow: 0px 0px 15px 15px #378566;
 394   background: #378566;
 395   color: #f7f7f7;
 396 }
 397
 398 textarea#comment_content {
 399   resize: vertical;
 400   width: 100%;
 401   height: 90px;
 402   border: none;
 403   background-color: #f1f1f1;
 404   padding: 3px;
 405 }
 406
 407 #form_comment .form_field_input {
 408         padding-right: 6px;
 409 }
 410
 411 /* media galleries */
 412
 413 .media_thumbnail {
 414   float: left;
 415   padding: 0px;
 416   width: 180px;
 417   overflow: hidden;
 418   margin: 0px 3px 10px;
 419   text-align: center;
 420   font-size: 0.875em;
 421   background-color: #222;
 422   border-radius: 0 0 5px 5px;
 423   padding: 0 0 6px;
 424   text-overflow: ellipsis;
 425   white-space: nowrap;
 426   overflow: hidden;
 427   border-color: #0D0D0D;
 428   border-style: solid;
 429   border-width: 1px 1px 2px;
 430 }
 431
 432 .media_thumbnail a {
 433   color: #eee;
 434   text-decoration: none;
 435   display: block;
 436 }
 437
 438 .media_thumbnail a.remove {
 439   color: #86D4B1;
 440   text-decoration: underline;
 441 }
 442
 443 a.thumb_entry_title {
 444   padding: 8px;
 445 }
 446
 447 /* For now, this is commented out since our thumbnails are actually 180px high.
 448  *
 449  * .media_thumbnail img {
 450  *   max-height: 135px;
 451  * }
 452  */
 453
 454 .thumb_entry_last {
 455   margin-right: 0px;
 456 }
 457
 458 /* media detail */
 459
 460 h2.media_title {
 461   margin-bottom: 0px;
 462   display: inline-block;
 463 }
 464
 465 p.context {
 466         display: inline-block;
 467         padding-top: 4px;
 468 }
 469
 470 p.media_specs {
 471   font-size: 0.9em;
 472   border-top: 1px solid #222;
 473   padding: 10px 0px;
 474   color: #888;
 475 }
 476
 477 .no_html5 {
 478   background: black;
 479   color: white;
 480   text-align: center;
 481   height: 160px;
 482   padding: 130px 10px 20px 10px;
 483 }
 484
 485 a img.media_image {
 486   cursor: -webkit-zoom-in;
 487   cursor: -moz-zoom-in;
 488   cursor: zoom-in;
 489 }
 490
 491 /* icons */
 492
 493 img.media_icon {
 494   margin: 0 4px;
 495   vertical-align: sub;
 496 }
 497
 498 /* EXIF information */
 499
 500 #exif_content h3 {
 501    border-bottom: 1px solid #333;
 502 }
 503
 504 #exif_camera_information {
 505    margin-bottom: 20px;
 506 }
 507
 508 #exif_additional_info {
 509    display: none;
 510 }
 511
 512 #exif_additional_info table {
 513    font-size: 11px;
 514    margin-top: 10px;
 515 }
 516
 517 #exif_additional_info td {
 518    vertical-align: top;
 519    padding-bottom: 5px;
 520 }
 521
 522 #exif_content .col1 {
 523    padding-right: 20px;
 524 }
 525
 526 #exif_additional_info table tr {
 527    margin-bottom: 10px;
 528 }
 529
 530 /* navigation */
 531
 532 .navigation {
 533         float: right;
 534 }
 535
 536 .navigation_button {
 537   width: 135px;
 538   display: inline-block;
 539   text-align: center;
 540   background-color: #1d1d1d;
 541   border: 1px solid;
 542   border-color: #2c2c2c #232323 #1a1a1a;
 543   border-radius: 4px;
 544   text-decoration: none;
 545   padding: 4px 0 8px;
 546   margin: 0 0 6px;
 547 }
 548
 549 .navigation_left {
 550   margin-right: 6px;
 551 }
 552
 553 /* messages */
 554
 555 ul.mediagoblin_messages {
 556   list-style: none inside;
 557   color: #f7f7f7;
 558   padding: 0;
 559 }
 560
 561 .mediagoblin_messages li {
 562   margin: 5px 0;
 563   padding: 8px;
 564   text-align: center;
 565 }
 566
 567 .message_success {
 568   background-color: #378566;
 569 }
 570
 571 .message_warning {
 572   background-color: #87453b;
 573 }
 574
 575 .message_error {
 576   background-color: #87453b;
 577 }
 578
 579 .message_info {
 580   background-color: #378566;
 581 }
 582
 583 .message_debug {
 584   background-color: #f7f7f7;
 585   color: #272727;
 586 }
 587
 588 ul.mediaentry_tags {
 589   list-style-type: none;
 590 }
 591
 592 ul.mediaentry_tags li {
 593   display: inline;
 594   margin: 0px 5px 0px 0px;
 595   padding: 0px;
 596 }
 597
 598
 599 /* media processing panel */
 600
 601 table.media_panel {
 602   width: 100%;
 603 }
 604
 605 table.media_panel th {
 606   font-weight: bold;
 607   padding-bottom: 4px;
 608   text-align: left;
 609 }
 610
 611
 612 /* Delete panel */
 613
 614 .delete_checkbox_box {
 615   margin-top: 10px;
 616   margin-left: 10px;
 617 }
 618
 619 /* ASCII art and code */
 620
 621 @font-face {
 622   font-family: Inconsolata;
 623   src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
 624 }
 625
 626 pre, code {
 627   font-family: Inconsolata, monospace;
 628   line-height: 1em;
 629 }
 630
 631 pre {
 632   overflow: auto;
 633   margin-bottom: 20px;
 634 }
 635
 636 .comment_wrapper pre {
 637   margin-bottom: 2px;
 638 }
 639
 640 .ascii-wrapper pre {
 641   /* but it should not affect the ASCII art */
 642   margin: 0;
 643 }
 644
 645 /* Media queries and other responsivisivity */
 646 @media screen and (max-width: 940px) {
 647   .media_pane {
 648     width: 100%;
 649     margin: 0px;
 650   }
 651
 652   .media_sidebar {
 653           width: 100%;
 654           margin: 0px;
 655         }
 656
 657   img.media_image {
 658     width: 100%;
 659     display: inline;
 660   }
 661
 662   .media_thumbnail {
 663     width: 21%;
 664   }
 665
 666   .profile_sidebar {
 667     width: 100%;
 668     margin: 0px;
 669   }
 670
 671   .profile_showcase {
 672     width: 100%;
 673     margin: 0px;
 674   }
 675
 676         .navigation {
 677           float: none;
 678         }
 679
 680         .navigation_button {
 681           width: 49%;
 682                 float: right;
 683         }
 684
 685         .navigation_left {
 686           margin-right: 0;
 687           float: left;
 688   }
 689
 690   .navigation {
 691     float: none;
 692   }
 693
 694   .navigation_button {
 695     width: 49%;
 696     float: right;
 697     padding: 10px 0 14px;
 698   }
 699
 700   .navigation_left {
 701     margin-right: 0;
 702     float: left;
 703   }
 704
 705   .button_action, .button_action_highlight, .button_form {
 706     padding: 9px 14px;
 707   }
 708
 709   header {
 710     text-align: center;
 711   }
 712
 713   .header_right {
 714     margin-right: 2%;
 715     float: none;
 716   }
 717
 718   a.logo {
 719     margin-left: 2%;
 720   }
 721 }
 722
 723 @media screen and (max-width: 570px) {
 724   .media_thumbnail {
 725     width: 29%;
 726   }
 727 }
 728
 729 @media screen and (max-width: 380px) {
 730   .media_thumbnail {
 731     width: 46%;
 732   }
 733 }
 734
 735 /* Exif display */
 736 #exif_content h3 {
 737    border-bottom: 1px solid #333;
 738 }
 739 #exif_camera_information {
 740    margin-bottom: 20px;
 741 }
 742
 743 #exif_additional_info {
 744    display: none;
 745 }
 746 #exif_additional_info table {
 747    font-size: 11px;
 748    margin-top: 10px;
 749 }
 750 #exif_additional_info td {
 751    vertical-align: top;
 752    padding-bottom: 5px;
 753 }
 754 #exif_content .col1 {
 755    padding-right: 20px;
 756 }
 757 #exif_additional_info table tr {
 758    margin-bottom: 10px;
 759 }
 760
 761 p.verifier {
 762     text-align:center;
 763     font-size:50px;
 764     none repeat scroll 0% 0% rgb(221, 221, 221);
 765     padding: 1em 0px;
 766 }