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   padding: 0;
 117   margin-bottom: 42px;
 118   background-color: #303030;
 119   border-bottom: 1px solid #252525;
 120 }
 121
 122 .header_right {
 123   margin: 8px;
 124   display: inline-block;
 125   float: right;
 126 }
 127
 128 .header_right ul {
 129         display: none;
 130         position: absolute;
 131         top: 42px;
 132         right: 0px;
 133         background: #252525;
 134         padding: 20px;
 135 }
 136
 137 .header_right li {
 138   list-style: none;
 139 }
 140
 141 .dropdown {
 142   display: inline-block;
 143   color: #c3c3c3;
 144   background-color: #424242;
 145   border: 1px solid;
 146   border-color: #464646 #2B2B2B #252525;
 147   border-radius: 4px;
 148   padding: 3px 8px;
 149   font-size: 16px;
 150   text-decoration: none;
 151   font-style: normal;
 152   font-weight: bold;
 153   cursor: pointer;
 154   position: relative;
 155 }
 156
 157 .dropdown_items {
 158   position: absolute;
 159   right: 0px;
 160   top: 25px;
 161   background-color: #424242;
 162   padding: 10px;
 163   width: 160px;
 164   border-radius: 5px 0 5px 5px;
 165   box-shadow: 0 2px 1px black;
 166 }
 167
 168 .dropdown_items a {
 169   display: block;
 170 }
 171
 172 a.logo {
 173   color: #fff;
 174   font-weight: bold;
 175 }
 176
 177 .logo img {
 178   vertical-align: middle;
 179   margin: 6px 8px;
 180 }
 181
 182 .mediagoblin_content {
 183   width: 100%;
 184   padding-bottom: 74px;
 185 }
 186
 187 footer {
 188   width: 100%;
 189   height: 30px;
 190   border-top: 1px solid #333;
 191   bottom: 0px;
 192   padding: 8px 0;
 193   text-align: center;
 194   font-size: 0.875em;
 195   clear: both;
 196 }
 197
 198 .media_pane {
 199   width: 640px;
 200   margin-left: 0px;
 201   margin-right: 10px;
 202   float: left;
 203 }
 204
 205 .media_sidebar {
 206   width: 280px;
 207   margin-left: 10px;
 208   float: left;
 209 }
 210
 211 .profile_sidebar {
 212   width: 340px;
 213   margin-right: 10px;
 214   float: left;
 215 }
 216
 217 .profile_showcase {
 218   width: 580px;
 219   margin-left: 10px;
 220   float: left;
 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_form {
 247   min-width: 99px;
 248   margin: 10px 0px 10px 15px;
 249   text-align: center;
 250   font-family: 'Lato', sans-serif;
 251 }
 252
 253 .button_collect {
 254     background-image: url("../images/icon_collect.png");
 255     background-repeat: no-repeat;
 256     background-position:top center;
 257     height: 30px;
 258     width: 30px;
 259     margin: 0px;
 260     padding: 3px 3px 2px 3px;
 261     position: relative;
 262 }
 263
 264 .pagination {
 265 text-align: center;
 266 }
 267
 268 .pagination_arrow {
 269   margin: 5px;
 270 }
 271
 272 .empty_space {
 273   background-image: url("../images/empty_back.png");
 274   font-style: italic;
 275   text-align: center;
 276   height: 160px;
 277   padding-top: 70px;
 278 }
 279
 280 .right_align {
 281   float: right;
 282 }
 283
 284 .clear {
 285   clear: both;
 286   display: block;
 287   overflow: hidden;
 288   visibility: hidden;
 289   width: 0;
 290   height: 0;
 291 }
 292
 293 .media_sidebar h3 {
 294         font-size: 1em;
 295         margin: 0 0 5px;
 296         border: none;
 297 }
 298
 299 .media_sidebar p {
 300         margin-left: 8px;
 301 }
 302
 303 /* forms */
 304
 305 .form_box,.form_box_xl {
 306   background-color: #222;
 307   border-top: 6px solid #D49086;
 308   padding: 3% 5%;
 309   display: block;
 310   float: none;
 311   width: 90%;
 312   max-width: 340px;
 313   margin-left: auto;
 314   margin-right: auto;
 315 }
 316
 317 .form_box_xl {
 318   max-width: 460px;
 319 }
 320
 321 .edit_box {
 322   border-top: 6px dashed #D49086
 323 }
 324
 325 .form_field_input input, .form_field_input textarea {
 326   width: 100%;
 327 }
 328
 329 .form_field_input {
 330   margin-bottom: 10px;
 331 }
 332
 333 .form_field_label {
 334   margin-bottom: 4px;
 335 }
 336
 337 .form_field_label {
 338   font-size:1.125em;
 339 }
 340
 341 .form_field_description {
 342   font-style: italic;
 343 }
 344
 345 .form_field_error {
 346   background-color: #87453b;
 347   color: #fff;
 348   border: none;
 349   padding: 9px;
 350   margin-top: 8px;
 351   margin-bottom: 8px;
 352 }
 353
 354 .form_submit_buttons {
 355   text-align: right;
 356 }
 357
 358 .subform {
 359   margin: 2em;
 360 }
 361
 362 #password_boolean {
 363   margin-top: 4px;
 364   width: 20px;
 365 }
 366
 367 textarea#description, textarea#bio {
 368   resize: vertical;
 369   height: 100px;
 370 }
 371
 372 /* comments */
 373
 374 .comment_wrapper {
 375   margin-top: 20px;
 376   margin-bottom: 20px;
 377 }
 378
 379 .comment_wrapper p {
 380   margin-bottom: 2px;
 381 }
 382
 383 .comment_author {
 384   padding-top: 4px;
 385   font-size: 0.9em;
 386 }
 387
 388 .comment_content {
 389   margin-left: 8px;
 390   margin-top: 8px;
 391 }
 392
 393 textarea#comment_content {
 394   resize: vertical;
 395   width: 100%;
 396   height: 90px;
 397   border: none;
 398   background-color: #f1f1f1;
 399   padding: 3px;
 400 }
 401
 402 #form_comment .form_field_input {
 403         padding-right: 6px;
 404 }
 405
 406 /* media galleries */
 407
 408 .media_thumbnail {
 409   float: left;
 410   padding: 0px;
 411   width: 212px;
 412   height: 156px;
 413   overflow: hidden;
 414   margin: 0px 28px 24px 0px;
 415   text-align: center;
 416   font-size: 0.875em;
 417   background-color: #222;
 418   border-radius: 0 0 5px 5px;
 419   padding: 0 0 6px;
 420   text-overflow: ellipsis;
 421   white-space: nowrap;
 422   overflow: hidden;
 423 }
 424
 425 .media_thumbnail a {
 426   color: #eee;
 427   text-decoration: none;
 428 }
 429
 430 .media_thumbnail img {
 431   max-height: 135px;
 432 }
 433
 434 .thumb_entry_last {
 435   margin-right: 0px;
 436 }
 437
 438 /* collection media */
 439
 440 .collection_thumbnail {
 441   float: left;
 442   padding: 0px;
 443   width: 180px;
 444   margin: 0px 4px 10px;
 445   text-align: left;
 446   font-size: 0.875em;
 447   background-color: #222;
 448   border-radius: 0 0 5px 5px;
 449   padding: 0 0 6px;
 450   text-overflow: ellipsis;
 451 }
 452
 453 .collection_thumbnail a {
 454   color: #eee;
 455   text-decoration: none;
 456 }
 457
 458 .collection_thumbnail a.remove {
 459   color: #86D4B1;
 460 }
 461
 462 .collection_thumbnail img {
 463   max-height: 135px;
 464 }
 465
 466 /* media detail */
 467
 468 h2.media_title {
 469   margin-bottom: 0px;
 470   display: inline-block;
 471 }
 472
 473 p.context {
 474         display: inline-block;
 475         padding-top: 4px;
 476 }
 477
 478 p.media_specs {
 479   font-size: 0.9em;
 480   border-top: 1px solid #222;
 481   padding: 10px 0px;
 482   color: #888;
 483 }
 484
 485 .no_html5 {
 486   background: black;
 487   color: white;
 488   text-align: center;
 489   height: 160px;
 490   padding: 130px 10px 20px 10px;
 491 }
 492
 493 img.media_image {
 494   cursor: -webkit-zoom-in;
 495   cursor: -moz-zoom-in;
 496   cursor: zoom-in;
 497 }
 498
 499 /* icons */
 500
 501 img.media_icon {
 502   margin: 0 4px;
 503   vertical-align: sub;
 504 }
 505
 506 /* navigation */
 507
 508 .navigation {
 509         float: right;
 510 }
 511
 512 .navigation_button {
 513   width: 135px;
 514   display: inline-block;
 515   text-align: center;
 516   background-color: #1d1d1d;
 517   border: 1px solid;
 518   border-color: #2c2c2c #232323 #1a1a1a;
 519   border-radius: 4px;
 520   text-decoration: none;
 521   padding: 4px 0 8px;
 522   margin: 0 0 6px;
 523 }
 524
 525 .navigation_left {
 526   margin-right: 6px;
 527 }
 528
 529 /* messages */
 530
 531 ul.mediagoblin_messages {
 532   list-style: none inside;
 533   color: #f7f7f7;
 534   padding: 0;
 535 }
 536
 537 .mediagoblin_messages li {
 538   margin: 5px 0;
 539   padding: 8px;
 540   text-align: center;
 541 }
 542
 543 .message_success {
 544   background-color: #378566;
 545 }
 546
 547 .message_warning {
 548   background-color: #87453b;
 549 }
 550
 551 .message_error {
 552   background-color: #87453b;
 553 }
 554
 555 .message_info {
 556   background-color: #378566;
 557 }
 558
 559 .message_debug {
 560   background-color: #f7f7f7;
 561   color: #272727;
 562 }
 563
 564 ul.mediaentry_tags {
 565   list-style-type: none;
 566 }
 567
 568 ul.mediaentry_tags li {
 569   display: inline;
 570   margin: 0px 5px 0px 0px;
 571   padding: 0px;
 572 }
 573
 574
 575 /* media processing panel */
 576
 577 table.media_panel {
 578   width: 100%;
 579 }
 580
 581 table.media_panel th {
 582   font-weight: bold;
 583   padding-bottom: 4px;
 584 }
 585
 586
 587 /* Delete panel */
 588
 589 .delete_checkbox_box {
 590   margin-top: 10px;
 591   margin-left: 10px;
 592 }
 593
 594 /* ASCII art and code */
 595
 596 @font-face {
 597   font-family: Inconsolata;
 598   src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
 599 }
 600
 601 pre, code {
 602   font-family: Inconsolata, monospace;
 603   line-height: 1em;
 604 }
 605
 606 pre {
 607   overflow: auto;
 608   margin-bottom: 20px;
 609 }
 610
 611 .comment_wrapper pre {
 612   margin-bottom: 2px;
 613 }
 614
 615 .ascii-wrapper pre {
 616   /* but it should not affect the ASCII art */
 617   margin: 0;
 618 }
 619
 620 /* Media queries and other responsivisivity */
 621 @media screen and (max-width: 940px) {
 622   .media_pane {
 623     width: 100%;
 624     margin: 0px;
 625   }
 626
 627   .media_sidebar {
 628           width: 100%;
 629           margin: 0px;
 630         }
 631
 632   img.media_image {
 633     width: 100%;
 634     display: inline;
 635   }
 636
 637   .media_thumbnail {
 638     width: 21%;
 639   }
 640
 641   .profile_sidebar {
 642     width: 100%;
 643     margin: 0px;
 644   }
 645
 646   .profile_showcase {
 647     width: 100%;
 648     margin: 0px;
 649   }
 650
 651         .navigation {
 652           float: none;
 653         }
 654
 655         .navigation_button {
 656           width: 49%;
 657                 float: right;
 658         }
 659
 660         .navigation_left {
 661           margin-right: 0;
 662           float: left;
 663   }
 664
 665   .navigation {
 666     float: none;
 667   }
 668
 669   .navigation_button {
 670     width: 49%;
 671     float: right;
 672     padding: 10px 0 14px;
 673   }
 674
 675   .navigation_left {
 676     margin-right: 0;
 677     float: left;
 678   }
 679
 680   .button_action, .button_action_highlight, .button_form {
 681     padding: 9px 14px;
 682   }
 683
 684   header {
 685     text-align: center;
 686   }
 687
 688   .header_right {
 689     margin-right: 2%;
 690     float: none;
 691   }
 692
 693   a.logo {
 694     margin-left: 2%;
 695   }
 696 }
 697
 698 @media screen and (max-width: 570px) {
 699   .media_thumbnail {
 700     width: 29%;
 701   }
 702 }
 703
 704 @media screen and (max-width: 380px) {
 705   .media_thumbnail {
 706     width: 46%;
 707   }
 708 }