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