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