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 .pagination {
 254 text-align: center;
 255 }
 256
 257 .pagination_arrow {
 258   margin: 5px;
 259 }
 260
 261 .empty_space {
 262   background-image: url("../images/empty_back.png");
 263   font-style: italic;
 264   text-align: center;
 265   height: 160px;
 266   padding-top: 70px;
 267 }
 268
 269 .right_align {
 270   float: right;
 271 }
 272
 273 .clear {
 274   clear: both;
 275   display: block;
 276   overflow: hidden;
 277   visibility: hidden;
 278   width: 0;
 279   height: 0;
 280 }
 281
 282 .media_sidebar h3 {
 283         font-size: 1em;
 284         margin: 0 0 5px;
 285         border: none;
 286 }
 287
 288 .media_sidebar p {
 289         margin-left: 8px;
 290 }
 291
 292 /* forms */
 293
 294 .form_box,.form_box_xl {
 295   background-color: #222;
 296   border-top: 6px solid #D49086;
 297   padding: 3% 5%;
 298   display: block;
 299   float: none;
 300   width: 90%;
 301   max-width: 340px;
 302   margin-left: auto;
 303   margin-right: auto;
 304 }
 305
 306 .form_box_xl {
 307   max-width: 460px;
 308 }
 309
 310 .edit_box {
 311   border-top: 6px dashed #D49086
 312 }
 313
 314 .form_field_input input, .form_field_input textarea {
 315   width: 100%;
 316 }
 317
 318 .form_field_input {
 319   margin-bottom: 10px;
 320 }
 321
 322 .form_field_label {
 323   margin-bottom: 4px;
 324 }
 325
 326 .form_field_label {
 327   font-size:1.125em;
 328 }
 329
 330 .form_field_description {
 331   font-style: italic;
 332 }
 333
 334 .form_field_error {
 335   background-color: #87453b;
 336   color: #fff;
 337   border: none;
 338   padding: 9px;
 339   margin-top: 8px;
 340   margin-bottom: 8px;
 341 }
 342
 343 .form_submit_buttons {
 344   text-align: right;
 345 }
 346
 347 #password_boolean {
 348   margin-top: 4px;
 349   width: 20px;
 350 }
 351
 352 textarea#description, textarea#bio {
 353   resize: vertical;
 354   height: 100px;
 355 }
 356
 357 /* comments */
 358
 359 .comment_wrapper {
 360   margin-top: 20px;
 361   margin-bottom: 20px;
 362 }
 363
 364 .comment_wrapper p {
 365   margin-bottom: 2px;
 366 }
 367
 368 .comment_author {
 369   padding-top: 4px;
 370   font-size: 0.9em;
 371 }
 372
 373 .comment_content {
 374   margin-left: 8px;
 375   margin-top: 8px;
 376 }
 377
 378 textarea#comment_content {
 379   resize: vertical;
 380   width: 100%;
 381   height: 90px;
 382   border: none;
 383   background-color: #f1f1f1;
 384   padding: 3px;
 385 }
 386
 387 #form_comment .form_field_input {
 388         padding-right: 6px;
 389 }
 390
 391 /* media galleries */
 392
 393 .media_thumbnail {
 394   float: left;
 395   padding: 0px;
 396   width: 180px;
 397   height: 156px;
 398   overflow: hidden;
 399   margin: 0px 4px 10px;
 400   text-align: center;
 401   font-size: 0.875em;
 402   background-color: #222;
 403   border-radius: 0 0 5px 5px;
 404   padding: 0 0 6px;
 405   text-overflow: ellipsis;
 406   white-space: nowrap;
 407   overflow: hidden;
 408 }
 409
 410 .media_thumbnail a {
 411   color: #eee;
 412   text-decoration: none;
 413 }
 414
 415 .media_thumbnail img {
 416   max-height: 135px;
 417 }
 418
 419 /* media detail */
 420
 421 h2.media_title {
 422   margin-bottom: 0px;
 423   display: inline-block;
 424 }
 425
 426 p.context {
 427         display: inline-block;
 428         padding-top: 4px;
 429 }
 430
 431 p.media_specs {
 432   font-size: 0.9em;
 433   border-top: 1px solid #222;
 434   padding: 10px 0px;
 435   color: #888;
 436 }
 437
 438 .no_html5 {
 439   background: black;
 440   color: white;
 441   text-align: center;
 442   height: 160px;
 443   padding: 130px 10px 20px 10px;
 444 }
 445
 446 img.media_image {
 447   cursor: -webkit-zoom-in;
 448   cursor: -moz-zoom-in;
 449   cursor: zoom-in;
 450 }
 451
 452 /* icons */
 453
 454 img.media_icon {
 455   margin: 0 4px;
 456   vertical-align: sub;
 457 }
 458
 459 /* navigation */
 460
 461 .navigation {
 462         float: right;
 463 }
 464
 465 .navigation_button {
 466   width: 135px;
 467   display: inline-block;
 468   text-align: center;
 469   background-color: #1d1d1d;
 470   border: 1px solid;
 471   border-color: #2c2c2c #232323 #1a1a1a;
 472   border-radius: 4px;
 473   text-decoration: none;
 474   padding: 4px 0 8px;
 475   margin: 0 0 6px;
 476 }
 477
 478 .navigation_left {
 479   margin-right: 6px;
 480 }
 481
 482 /* messages */
 483
 484 ul.mediagoblin_messages {
 485   list-style: none inside;
 486   color: #f7f7f7;
 487   padding: 0;
 488 }
 489
 490 .mediagoblin_messages li {
 491   margin: 5px 0;
 492   padding: 8px;
 493   text-align: center;
 494 }
 495
 496 .message_success {
 497   background-color: #378566;
 498 }
 499
 500 .message_warning {
 501   background-color: #87453b;
 502 }
 503
 504 .message_error {
 505   background-color: #87453b;
 506 }
 507
 508 .message_info {
 509   background-color: #378566;
 510 }
 511
 512 .message_debug {
 513   background-color: #f7f7f7;
 514   color: #272727;
 515 }
 516
 517 ul.mediaentry_tags {
 518   list-style-type: none;
 519 }
 520
 521 ul.mediaentry_tags li {
 522   display: inline;
 523   margin: 0px 5px 0px 0px;
 524   padding: 0px;
 525 }
 526
 527
 528 /* media processing panel */
 529
 530 table.media_panel {
 531   width: 100%;
 532 }
 533
 534 table.media_panel th {
 535   font-weight: bold;
 536   padding-bottom: 4px;
 537 }
 538
 539
 540 /* Delete panel */
 541
 542 .delete_checkbox_box {
 543   margin-top: 10px;
 544   margin-left: 10px;
 545 }
 546
 547 /* ASCII art and code */
 548
 549 @font-face {
 550   font-family: Inconsolata;
 551   src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
 552 }
 553
 554 pre, code {
 555   font-family: Inconsolata, monospace;
 556   line-height: 1em;
 557 }
 558
 559 pre {
 560   overflow: auto;
 561   margin-bottom: 20px;
 562 }
 563
 564 .comment_wrapper pre {
 565   margin-bottom: 2px;
 566 }
 567
 568 .ascii-wrapper pre {
 569   /* but it should not affect the ASCII art */
 570   margin: 0;
 571 }
 572
 573 /* Media queries and other responsivisivity */
 574 @media screen and (max-width: 940px) {
 575   .media_pane {
 576     width: 100%;
 577     margin: 0px;
 578   }
 579
 580   .media_sidebar {
 581           width: 100%;
 582           margin: 0px;
 583         }
 584
 585   img.media_image {
 586     width: 100%;
 587     display: inline;
 588   }
 589
 590   .media_thumbnail {
 591     width: 21%;
 592   }
 593
 594   .profile_sidebar {
 595     width: 100%;
 596     margin: 0px;
 597   }
 598
 599   .profile_showcase {
 600     width: 100%;
 601     margin: 0px;
 602   }
 603
 604         .navigation {
 605           float: none;
 606         }
 607
 608         .navigation_button {
 609           width: 49%;
 610                 float: right;
 611         }
 612
 613         .navigation_left {
 614           margin-right: 0;
 615           float: left;
 616   }
 617
 618   .navigation {
 619     float: none;
 620   }
 621
 622   .navigation_button {
 623     width: 49%;
 624     float: right;
 625     padding: 10px 0 14px;
 626   }
 627
 628   .navigation_left {
 629     margin-right: 0;
 630     float: left;
 631   }
 632
 633   .button_action, .button_action_highlight, .button_form {
 634     padding: 9px 14px;
 635   }
 636
 637   header {
 638     text-align: center;
 639   }
 640
 641   .header_right {
 642     margin-right: 2%;
 643     float: none;
 644   }
 645
 646   a.logo {
 647     margin-left: 2%;
 648   }
 649 }
 650
 651 @media screen and (max-width: 570px) {
 652   .media_thumbnail {
 653     width: 29%;
 654   }
 655 }
 656
 657 @media screen and (max-width: 380px) {
 658   .media_thumbnail {
 659     width: 46%;
 660   }
 661 }