Whew. This is a big update. I did some significant keeping work. I moved all of
[mediagoblin:mediagoblin.git] / 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, .report_wrapper {
350   margin-top: 20px;
351   margin-bottom: 20px;
352 }
353
354 .comment_wrapper p, .report_wrapper p {
355   margin-bottom: 2px;
356 }
357
358 .comment_author, .report_author {
359   padding-top: 4px;
360   font-size: 0.9em;
361 }
362
363 a.comment_authorlink, a.report_authorlink {
364   text-decoration: none;
365   padding-right: 5px;
366   font-weight: bold;
367   padding-left: 2px;
368 }
369
370 a.comment_authorlink:hover, a.report_authorlink:hover {
371   text-decoration: underline;
372 }
373
374 a.comment_whenlink, a.report_whenlink {
375   text-decoration: none;
376 }
377
378 a.comment_whenlink:hover, a.report_whenlink:hover {
379   text-decoration: underline;
380 }
381
382 .comment_content, .report_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
401 a.report_authorlink, a.report_whenlink {
402   color: #D486B1;
403 }
404
405 ul#action_to_resolve {list-style:none; margin-left:10px;}
406
407 /* media galleries */
408
409 .media_thumbnail {
410   float: left;
411   padding: 0px;
412   width: 180px;
413   overflow: hidden;
414   margin: 0px 3px 10px;
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   border-color: #0D0D0D;
424   border-style: solid;
425   border-width: 1px 1px 2px;
426 }
427
428 .media_thumbnail a {
429   color: #eee;
430   text-decoration: none;
431   display: block;
432 }
433
434 .media_thumbnail a.remove {
435   color: #86D4B1;
436   text-decoration: underline;
437 }
438
439 a.thumb_entry_title {
440   padding: 8px;
441 }
442
443 /* For now, this is commented out since our thumbnails are actually 180px high.
444  *
445  * .media_thumbnail img {
446  *   max-height: 135px;
447  * }
448  */
449
450 .thumb_entry_last {
451   margin-right: 0px;
452 }
453
454 /* media detail */
455
456 h2.media_title {
457   margin-bottom: 0px;
458   display: inline-block;
459 }
460
461 p.context {
462         display: inline-block;
463         padding-top: 4px;
464 }
465
466 p.media_specs {
467   font-size: 0.9em;
468   border-top: 1px solid #222;
469   padding: 10px 0px;
470   color: #888;
471 }
472
473 .no_html5 {
474   background: black;
475   color: white;
476   text-align: center;
477   height: 160px;
478   padding: 130px 10px 20px 10px;
479 }
480
481 a img.media_image {
482   cursor: -webkit-zoom-in;
483   cursor: -moz-zoom-in;
484   cursor: zoom-in;
485 }
486
487 /* icons */
488
489 img.media_icon {
490   margin: 0 4px;
491   vertical-align: sub;
492 }
493
494 /* EXIF information */
495
496 #exif_content h3 {
497    border-bottom: 1px solid #333;
498 }
499
500 #exif_camera_information {
501    margin-bottom: 20px;
502 }
503
504 #exif_additional_info {
505    display: none;
506 }
507
508 #exif_additional_info table {
509    font-size: 11px;
510    margin-top: 10px;
511 }
512
513 #exif_additional_info td {
514    vertical-align: top;
515    padding-bottom: 5px;
516 }
517
518 #exif_content .col1 {
519    padding-right: 20px;
520 }
521
522 #exif_additional_info table tr {
523    margin-bottom: 10px;
524 }
525
526 /* navigation */
527
528 .navigation {
529         float: right;
530 }
531
532 .navigation_button {
533   width: 135px;
534   display: inline-block;
535   text-align: center;
536   background-color: #1d1d1d;
537   border: 1px solid;
538   border-color: #2c2c2c #232323 #1a1a1a;
539   border-radius: 4px;
540   text-decoration: none;
541   padding: 4px 0 8px;
542   margin: 0 0 6px;
543 }
544
545 .navigation_left {
546   margin-right: 6px;
547 }
548
549 /* messages */
550
551 ul.mediagoblin_messages {
552   list-style: none inside;
553   color: #f7f7f7;
554   padding: 0;
555 }
556
557 .mediagoblin_messages li {
558   margin: 5px 0;
559   padding: 8px;
560   text-align: center;
561 }
562
563 .message_success {
564   background-color: #378566;
565 }
566
567 .message_warning {
568   background-color: #87453b;
569 }
570
571 .message_error {
572   background-color: #87453b;
573 }
574
575 .message_info {
576   background-color: #378566;
577 }
578
579 .message_debug {
580   background-color: #f7f7f7;
581   color: #272727;
582 }
583
584 ul.mediaentry_tags {
585   list-style-type: none;
586 }
587
588 ul.mediaentry_tags li {
589   display: inline;
590   margin: 0px 5px 0px 0px;
591   padding: 0px;
592 }
593
594
595 /* media processing panel */
596
597 table.media_panel {
598   width: 100%;
599 }
600
601 table.media_panel th {
602   font-weight: bold;
603   padding-bottom: 4px;
604   text-align: left;
605 }
606
607 /* admin panels */
608
609 table.admin_panel {
610   width: 100%
611 }
612
613 table.admin_side_panel {
614   width: 60%
615 }
616
617 table.admin_panel th, table.admin_side_panel th {
618   font-weight: bold;
619   padding-bottom: 4px;
620   text-align: left;
621 }
622
623 /* Delete panel */
624
625 .delete_checkbox_box {
626   margin-top: 10px;
627   margin-left: 10px;
628 }
629
630 /* ASCII art and code */
631
632 @font-face {
633   font-family: Inconsolata;
634   src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
635 }
636
637 pre, code {
638   font-family: Inconsolata, monospace;
639   line-height: 1em;
640 }
641
642 pre {
643   overflow: auto;
644   margin-bottom: 20px;
645 }
646
647 .comment_wrapper pre {
648   margin-bottom: 2px;
649 }
650
651 .ascii-wrapper pre {
652   /* but it should not affect the ASCII art */
653   margin: 0;
654 }
655
656 /* Media queries and other responsivisivity */
657 @media screen and (max-width: 940px) {
658   .media_pane {
659     width: 100%;
660     margin: 0px;
661   }
662   
663   .media_sidebar {
664           width: 100%;
665           margin: 0px;
666         }
667         
668   img.media_image {
669     width: 100%;
670     display: inline;
671   }
672
673   .media_thumbnail {
674     width: 21%;
675   }
676
677   .profile_sidebar {
678     width: 100%;
679     margin: 0px;
680   }
681
682   .profile_showcase {
683     width: 100%;
684     margin: 0px;
685   }
686
687         .navigation {
688           float: none;
689         }
690
691         .navigation_button {
692           width: 49%;
693                 float: right;
694         }
695
696         .navigation_left {
697           margin-right: 0;
698           float: left;
699   }
700   
701   .navigation {
702     float: none;
703   }
704   
705   .navigation_button {
706     width: 49%;
707     float: right;
708     padding: 10px 0 14px;
709   }
710   
711   .navigation_left {
712     margin-right: 0;
713     float: left;
714   }
715   
716   .button_action, .button_action_highlight, .button_form { 
717     padding: 9px 14px;
718   }
719   
720   header {
721     text-align: center;
722   }
723   
724   .header_right {
725     margin-right: 2%;
726     float: none;
727   }
728   
729   a.logo {
730     margin-left: 2%;
731   }
732 }
733
734 @media screen and (max-width: 570px) {
735   .media_thumbnail {
736     width: 29%;
737   }
738 }
739
740 @media screen and (max-width: 380px) {
741   .media_thumbnail {
742     width: 46%;
743   }
744 }
745
746 /* Exif display */
747 #exif_content h3 {
748    border-bottom: 1px solid #333;
749 }
750 #exif_camera_information {
751    margin-bottom: 20px;
752 }
753
754 #exif_additional_info {
755    display: none;
756 }
757 #exif_additional_info table {
758    font-size: 11px;
759    margin-top: 10px;
760 }
761 #exif_additional_info td {
762    vertical-align: top;
763    padding-bottom: 5px;
764 }
765 #exif_content .col1 {
766    padding-right: 20px;
767 }
768 #exif_additional_info table tr {
769    margin-bottom: 10px;
770 }