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