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