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 header {
 109   width: 100%;
 110   padding: 0;
 111   margin-bottom: 42px;
 112   border-bottom: 1px solid #333;
 113 }
 114
 115 .header_right {
 116   margin: 8px;
 117   display: inline-block;
 118   float: right;
 119 }
 120
 121 .header_dropdown {
 122   margin-bottom: 20px;
 123   padding: 0px 10px 0px 10px;
 124 }
 125
 126 .header_dropdown li {
 127   margin: 4px 0;
 128   list-style: none;
 129 }
 130
 131 .header_dropdown p {
 132   margin-top: 12px;
 133   margin-bottom: 10px;
 134 }
 135
 136 .dropdown_title {
 137   font-size: 20px;
 138 }
 139
 140 a.logo {
 141   color: #fff;
 142   font-weight: bold;
 143 }
 144
 145 .logo img {
 146   vertical-align: middle;
 147   margin: 6px 8px 6px 0;
 148 }
 149
 150 .fine_print {
 151   font-size: 0.8em;
 152 }
 153
 154 .mediagoblin_content {
 155   width: 100%;
 156   padding-bottom: 74px;
 157 }
 158
 159 footer {
 160   width: 100%;
 161   height: 30px;
 162   border-top: 1px solid #333;
 163   bottom: 0px;
 164   padding: 8px 0;
 165   text-align: center;
 166   font-size: 0.875em;
 167   clear: both;
 168 }
 169
 170 .thumb_gallery {
 171   margin-left: 10px;
 172   margin-right: 10px;
 173 }
 174
 175 .profile_showcase .thumb_gallery {
 176   margin-left: 0;
 177   margin-right: 0;
 178 }
 179
 180 .media_image {
 181   max-width: 100%;
 182   margin-left:auto;
 183   margin-right:auto;
 184   display:block;
 185 }
 186
 187 /* common website elements */
 188
 189 .button_action, .button_action_highlight, .button_form {
 190   display: inline-block;
 191   color: #c3c3c3;
 192   background-color: #363636;
 193   border: 1px solid;
 194   border-color: #464646 #2B2B2B #252525;
 195   border-radius: 4px;
 196   padding: 3px 8px;
 197   font-size: 16px;
 198   text-decoration: none;
 199   font-style: normal;
 200   font-weight: bold;
 201   cursor: pointer;
 202 }
 203
 204 .button_action_highlight, .button_form {
 205   background-color: #86D4B1;
 206   border-color: #A2DEC3 #6CAA8E #5C9179;
 207   color: #283F35;
 208 }
 209
 210
 211 .button_form {
 212   min-width: 99px;
 213   margin: 10px 0px 10px 15px;
 214   text-align: center;
 215   font-family: 'Lato', sans-serif;
 216 }
 217
 218 .pagination {
 219 text-align: center;
 220 }
 221
 222 .pagination_arrow {
 223   margin: 5px;
 224 }
 225
 226 .empty_space {
 227   background-image: url("../images/empty_back.png");
 228   font-style: italic;
 229   text-align: center;
 230   height: 160px;
 231   padding-top: 70px;
 232 }
 233
 234 .right_align {
 235   float: right;
 236 }
 237
 238 .left_align {
 239   float: right;
 240 }
 241
 242 .pull-right {
 243   float: right !important;
 244 }
 245 .pull-left {
 246   float: left !important;
 247 }
 248
 249 .clear {
 250   clear: both;
 251   display: block;
 252   overflow: hidden;
 253   visibility: hidden;
 254   width: 0;
 255   height: 0;
 256 }
 257
 258 .hidden {
 259   display: none;
 260 }
 261
 262 .media_sidebar h3 {
 263         font-size: 1em;
 264         margin: 0 0 5px;
 265         border: none;
 266 }
 267
 268 .media_sidebar p {
 269         margin-left: 8px;
 270 }
 271
 272 .alpha {
 273   margin-left:0;
 274 }
 275
 276 .omega {
 277   margin-right:0;
 278 }
 279
 280 .heaven {
 281   margin-top:0;
 282 }
 283
 284 .hell {
 285   margin-bottom:0;
 286 }
 287
 288 /* forms */
 289
 290 .form_box,.form_box_xl {
 291   background-color: #222;
 292   border-top: 6px solid #D49086;
 293   padding: 3% 5%;
 294   display: block;
 295   float: none;
 296   width: 90%;
 297   max-width: 340px;
 298   margin-left: auto;
 299   margin-right: auto;
 300 }
 301
 302 .form_box_xl {
 303   max-width: 460px;
 304 }
 305
 306 .blog_form_box_xl  {
 307   background-color: #222;
 308   border-top: 6px solid #D49086;
 309   padding: 3% 5%;
 310   display: block;
 311   float: none;
 312   width: 90%;
 313   max-width: 800px;
 314   min-height: 500px;
 315   margin-left: auto;
 316   margin-right: auto;
 317 }
 318
 319 .b_listing_title {
 320   height: 30px;
 321   width: 100%;
 322   padding: 0px;
 323   background-color: #86D4B1;
 324   text-transform:capitalize;
 325   text-decoration: none;
 326   #border-radius: 4px;
 327 }
 328
 329 .b_listing_title > a {
 330   text-decoration: none;
 331 }
 332
 333 .b_list_owner {
 334   height: 100px;
 335   width: 100%;
 336   padding: 0em;
 337   margin-right: auto;
 338   background-color: #DDA0DD;
 339   #border-radius: 4px;
 340   text-transform: capitalize;
 341 }
 342
 343 .b_list_des {
 344   text-align:justify;
 345 }
 346
 347
 348 .edit_box {
 349   border-top: 6px dashed #D49086
 350 }
 351
 352 .form_field_input input, .form_field_input textarea {
 353   width: 100%;
 354 }
 355
 356 .blog_form_field_input input, .blog_form_field_input textarea {
 357   width: 100%;
 358 }
 359
 360 .form_field_input {
 361   margin-bottom: 10px;
 362 }
 363
 364 .form_field_label {
 365   margin-bottom: 4px;
 366 }
 367
 368 .form_field_label {
 369   font-size:1.125em;
 370 }
 371
 372 .form_field_description {
 373   font-style: italic;
 374 }
 375
 376 .form_field_error {
 377   background-color: #87453b;
 378   color: #fff;
 379   border: none;
 380   padding: 9px;
 381   margin-top: 8px;
 382   margin-bottom: 8px;
 383 }
 384
 385 .form_submit_buttons {
 386   text-align: right;
 387 }
 388
 389 .subform {
 390   margin: 2em;
 391 }
 392
 393 #password_boolean {
 394   margin-top: 4px;
 395   width: 20px;
 396 }
 397
 398 .boolean {
 399   margin-bottom: 8px;
 400   }
 401
 402 textarea#description, textarea#bio {
 403   resize: vertical;
 404   height: 100px;
 405 }
 406
 407 .delete {
 408   margin-top: 36px;
 409   display: block;
 410   text-align: center;
 411 }
 412
 413 /* comments */
 414
 415 .comment_wrapper, .report_wrapper {
 416   margin-top: 20px;
 417   margin-bottom: 20px;
 418 }
 419
 420 .comment_wrapper p, .report_wrapper p {
 421   margin-bottom: 2px;
 422 }
 423
 424 .comment_author, .report_author {
 425   padding-top: 4px;
 426   font-size: 0.9em;
 427 }
 428
 429 a.comment_authorlink, a.report_authorlink {
 430   text-decoration: none;
 431   padding-right: 5px;
 432   font-weight: bold;
 433   padding-left: 2px;
 434 }
 435
 436 a.comment_authorlink:hover, a.report_authorlink:hover {
 437   text-decoration: underline;
 438 }
 439
 440 a.comment_whenlink, a.report_whenlink {
 441   text-decoration: none;
 442 }
 443
 444 a.comment_whenlink:hover, a.report_whenlink:hover {
 445   text-decoration: underline;
 446 }
 447
 448 .comment_content, .report_content {
 449   margin-left: 8px;
 450   margin-top: 8px;
 451 }
 452
 453 .comment_active {
 454   box-shadow: 0px 0px 15px 15px #378566;
 455   background: #378566;
 456   color: #f7f7f7;
 457 }
 458
 459 textarea#comment_content {
 460   resize: vertical;
 461   width: 100%;
 462   height: 90px;
 463   border: none;
 464   background-color: #f1f1f1;
 465   padding: 3px;
 466 }
 467
 468 #form_comment .form_field_input {
 469         padding-right: 6px;
 470 }
 471
 472
 473 a.report_authorlink, a.report_whenlink {
 474   color: #D486B1;
 475 }
 476
 477 ul#action_to_resolve {list-style:none; margin-left:10px;}
 478
 479 /* media galleries */
 480
 481 .media_thumbnail {
 482   float: left;
 483   padding: 0px;
 484   width: 180px;
 485   overflow: hidden;
 486   margin: 0px 3px 10px;
 487   text-align: center;
 488   font-size: 0.875em;
 489   background-color: #222;
 490   border-radius: 0 0 5px 5px;
 491   padding: 0 0 6px;
 492   text-overflow: ellipsis;
 493   white-space: nowrap;
 494   overflow: hidden;
 495   border-color: #0D0D0D;
 496   border-style: solid;
 497   border-width: 1px 1px 2px;
 498 }
 499
 500 .media_thumbnail a {
 501   color: #eee;
 502   text-decoration: none;
 503   display: block;
 504 }
 505
 506 .media_thumbnail a.remove {
 507   color: #86D4B1;
 508   text-decoration: underline;
 509 }
 510
 511 a.thumb_entry_title {
 512   padding: 8px;
 513 }
 514
 515 /* For now, this is commented out since our thumbnails are actually 180px high.
 516  *
 517  * .media_thumbnail img {
 518  *   max-height: 135px;
 519  * }
 520  */
 521
 522 .thumb_entry_last {
 523   margin-right: 0px;
 524 }
 525
 526 /* media detail */
 527
 528 h2.media_title {
 529   margin-bottom: 0px;
 530   display: inline-block;
 531 }
 532
 533 p.context {
 534         display: inline-block;
 535         padding-top: 4px;
 536 }
 537
 538 p.media_specs {
 539   font-size: 0.9em;
 540   border-top: 1px solid #222;
 541   padding: 10px 0px;
 542   color: #888;
 543 }
 544
 545 .no_html5 {
 546   background: black;
 547   color: white;
 548   text-align: center;
 549   height: 160px;
 550   padding: 130px 10px 20px 10px;
 551 }
 552
 553 a img.media_image {
 554   cursor: -webkit-zoom-in;
 555   cursor: -moz-zoom-in;
 556   cursor: zoom-in;
 557 }
 558
 559 /* icons */
 560
 561 img.media_icon {
 562   margin: 0 4px;
 563   vertical-align: sub;
 564 }
 565
 566 /* EXIF information */
 567
 568 #exif_content h3 {
 569    border-bottom: 1px solid #333;
 570 }
 571
 572 #exif_camera_information {
 573    margin-bottom: 20px;
 574 }
 575
 576 #exif_additional_info {
 577    display: none;
 578 }
 579
 580 #exif_additional_info table {
 581    font-size: 11px;
 582    margin-top: 10px;
 583 }
 584
 585 #exif_additional_info td {
 586    vertical-align: top;
 587    padding-bottom: 5px;
 588 }
 589
 590 #exif_content .col1 {
 591    padding-right: 20px;
 592 }
 593
 594 #exif_additional_info table tr {
 595    margin-bottom: 10px;
 596 }
 597
 598 /* navigation */
 599
 600 .navigation {
 601 }
 602
 603 .navigation_button {
 604   width: 48%;
 605   display: inline-block;
 606   text-align: center;
 607   background-color: #1d1d1d;
 608   border: 1px solid;
 609   border-color: #2c2c2c #232323 #1a1a1a;
 610   border-radius: 4px;
 611   text-decoration: none;
 612   padding: 4px 0 8px;
 613   margin: 0 0 6px;
 614 }
 615
 616 .navigation_left {
 617   margin-right: 3px;
 618 }
 619
 620 /* messages */
 621
 622 ul.mediagoblin_messages {
 623   list-style: none inside;
 624   color: #f7f7f7;
 625   padding: 0;
 626 }
 627
 628 .mediagoblin_messages li {
 629   margin: 5px 0;
 630   padding: 8px;
 631   text-align: center;
 632 }
 633
 634 .message_success {
 635   background-color: #378566;
 636 }
 637
 638 .message_warning {
 639   background-color: #87453b;
 640 }
 641
 642 .message_error {
 643   background-color: #87453b;
 644 }
 645
 646 .message_info {
 647   background-color: #378566;
 648 }
 649
 650 .message_debug {
 651   background-color: #f7f7f7;
 652   color: #272727;
 653 }
 654
 655 ul.mediaentry_tags {
 656   list-style-type: none;
 657 }
 658
 659 ul.mediaentry_tags li {
 660   display: inline;
 661   margin: 0px 5px 0px 0px;
 662   padding: 0px;
 663 }
 664
 665
 666 /* media processing panel */
 667
 668 table.media_panel {
 669   width: 100%;
 670 }
 671
 672 table.media_panel th {
 673   font-weight: bold;
 674   padding-bottom: 4px;
 675   text-align: left;
 676 }
 677
 678 /* moderator panels */
 679
 680 table.admin_panel {
 681   width: 100%
 682 }
 683
 684 table.admin_side_panel {
 685   width: 90%;
 686   margin-bottom: 10px;
 687 }
 688
 689 table.admin_panel th, table.admin_side_panel th {
 690   font-weight: bold;
 691   padding-bottom: 4px;
 692   text-align: left;
 693   color: #fff;
 694 }
 695
 696 table td.user_with_privilege {
 697   font-weight: bold;
 698   color: #86D4B1;
 699 }
 700
 701 table td.user_without_privilege {
 702   font-weight: bold;
 703   color: #D486B1;
 704 }
 705
 706 .return_to_panel    {
 707   text-align:right;
 708   float: right;
 709   font-size:1.2em
 710 }
 711
 712 /* Delete panel */
 713
 714 .delete_checkbox_box {
 715   margin-top: 10px;
 716   margin-left: 10px;
 717 }
 718
 719 /* code of conduct */
 720
 721 #code_of_conduct_list  {
 722     margin-left:25px;
 723     margin-bottom: 10px;
 724 }
 725 #code_of_conduct_list li {
 726     margin:5px 0 15px 25px;
 727 }
 728 #code_of_conduct_list strong{
 729     color:#fff;
 730 }
 731
 732 .nested_sublist {
 733     margin: 5px 0 10px 25px;
 734     font-size:80%;
 735 }
 736 .nested_sublist li {
 737     margin-bottom: 10px;
 738 }
 739
 740 /* ASCII art and code */
 741
 742 @font-face {
 743   font-family: Inconsolata;
 744   src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
 745 }
 746
 747 pre, code {
 748   font-family: Inconsolata, monospace;
 749   line-height: 1em;
 750 }
 751
 752 pre {
 753   overflow: auto;
 754   margin-bottom: 20px;
 755 }
 756
 757 .comment_wrapper pre {
 758   margin-bottom: 2px;
 759 }
 760
 761 .ascii-wrapper pre {
 762   /* but it should not affect the ASCII art */
 763   margin: 0;
 764 }
 765
 766 /* Media queries and other responsivisivity */
 767 /* initial GMG max 940 */
 768 @media screen and (max-width: 960px) {
 769
 770   img.media_image {
 771     max-width: 100%;
 772 /*    display: inline;*/
 773   }
 774
 775   .media_thumbnail {
 776     width: 21%;
 777   }
 778
 779   .profile_sidebar {
 780     width: 100%;
 781     margin: 0px;
 782   }
 783
 784   .profile_showcase {
 785     width: 100%;
 786     margin: 0px;
 787   }
 788
 789   .navigation {
 790     float: none;
 791   }
 792
 793   .navigation_button {
 794     float: right;
 795     padding: 10px 0 14px;
 796   }
 797
 798   .navigation_left {
 799     margin-right: 0;
 800     float: left;
 801   }
 802
 803   .button_action, .button_action_highlight, .button_form {
 804     padding: 9px 14px;
 805   }
 806
 807   header {
 808 /*    text-align: center;*/
 809   }
 810
 811   .header_right {
 812 /*    margin-right: 2%;*/
 813 /*    float: none;*/
 814   }
 815
 816   a.logo {
 817 /*    margin-left: 2%;*/
 818   }
 819
 820 }
 821 /* desktop resolutions */
 822 @media screen and (min-width: 960px) {
 823   .container .three.columns { /* this needs to be more specific - inplace for the gallery... */
 824     width:180px;
 825     margin-left:3px;
 826     margin-right:3px;
 827   }
 828 }
 829 /* Tablet Portrait size to standard 960 (devices and browsers) */
 830 @media only screen and (min-width: 768px) and (max-width: 959px) {
 831   .container .three.columns { /* this needs to be more specific - inplace for the gallery... */
 832     width:147px;
 833     margin-left:2px;
 834     margin-right:2px;
 835   }
 836   .thumb_gallery {
 837     margin-left: 0;
 838     margin-right: 0;
 839   }
 840   .navigation_button {
 841   }
 842 }
 843 /* All Mobile Sizes (devices and browser) */
 844 @media screen and (max-width: 767px) {
 845   .thumb_row {
 846     margin-bottom: 0;
 847   }
 848   .thumb_gallery {
 849     margin-left: 0;
 850     margin-right: 0;
 851   }
 852   h1,h2,h3,p {
 853     margin-bottom: 10px !important;
 854   }
 855
 856   header {
 857     text-align: center;
 858   }
 859
 860   .header_right {
 861     float: none;
 862   }
 863 }
 864
 865 /* Exif display */
 866 #exif_content h3 {
 867    border-bottom: 1px solid #333;
 868 }
 869 #exif_camera_information {
 870    margin-bottom: 20px;
 871 }
 872
 873 #exif_additional_info {
 874    display: none;
 875 }
 876 #exif_additional_info table {
 877    font-size: 11px;
 878    margin-top: 10px;
 879 }
 880 #exif_additional_info td {
 881    vertical-align: top;
 882    padding-bottom: 5px;
 883 }
 884 #exif_content .col1 {
 885    padding-right: 20px;
 886 }
 887 #exif_additional_info table tr {
 888    margin-bottom: 10px;
 889 }
 890
 891 p.verifier {
 892     text-align:center;
 893     font-size:50px;
 894     none repeat scroll 0% 0% rgb(221, 221, 221);
 895     padding: 1em 0px;
 896 }