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