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