Commit | Line | Data |
---|---|---|
7baaea38 JS |
1 | /* @font-face */ |
2 | ||
3 | @font-face { | |
4 | font-family: 'Lato'; | |
5 | font-style: normal; | |
6 | font-weight: 700; | |
ab613cb3 | 7 | src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/Lato-Bold.ttf') format('truetype'); |
7baaea38 JS |
8 | } |
9 | @font-face { | |
10 | font-family: 'Lato'; | |
11 | font-style: italic; | |
12 | font-weight: 400; | |
ab613cb3 | 13 | src: local('Lato Italic'), local('Lato-Italic'), url('../fonts/Lato-Italic.ttf') format('truetype'); |
7baaea38 JS |
14 | } |
15 | @font-face { | |
16 | font-family: 'Lato'; | |
17 | font-style: italic; | |
18 | font-weight: 700; | |
ab613cb3 | 19 | src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('../fonts/Lato-BoldItalic.ttf') format('truetype'); |
7baaea38 JS |
20 | } |
21 | @font-face { | |
22 | font-family: 'Lato'; | |
23 | font-style: normal; | |
24 | font-weight: 400; | |
cfb7ed7d | 25 | src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/Lato-Regular.ttf') format('truetype'); |
7baaea38 JS |
26 | } |
27 | ||
881b6e2c | 28 | body { |
2d65b473 | 29 | background-color: #161616; |
f5782fac | 30 | color: #C3C3C3; |
e8be1d7a | 31 | padding: 0; |
7c9d1a2b CAW |
32 | margin: 0px; |
33 | height: 100%; | |
8c7701f9 | 34 | font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; |
9f661642 JS |
35 | } |
36 | ||
37 | form { | |
7c9d1a2b CAW |
38 | margin: 0px; |
39 | padding: 0px; | |
881b6e2c JS |
40 | } |
41 | ||
cb1e4a3d JS |
42 | /* text styles */ |
43 | ||
62f2557c JS |
44 | h1,h2,h3,p { |
45 | margin-bottom: 20px; | |
46 | } | |
47 | ||
48 | h1,h2,h3 { | |
49 | font-weight: bold; | |
50 | } | |
51 | ||
3ea6a305 | 52 | h1 { |
7c9d1a2b CAW |
53 | margin-top: 15px; |
54 | color: #fff; | |
a97e5bb2 | 55 | font-size: 1.875em; |
881b6e2c JS |
56 | } |
57 | ||
3ea6a305 | 58 | h2 { |
f5782fac | 59 | font-size: 1.375em; |
7c9d1a2b CAW |
60 | margin-top: 20px; |
61 | color: #fff; | |
06a5f21e JS |
62 | } |
63 | ||
3ea6a305 | 64 | h3 { |
9ecf7cd1 | 65 | border-bottom: 1px solid #333; |
a97e5bb2 | 66 | font-size: 1.125em; |
38f71d47 JS |
67 | } |
68 | ||
3ea6a305 JS |
69 | p { |
70 | margin-top: 0px; | |
71 | } | |
72 | ||
881b6e2c | 73 | a { |
9ecf7cd1 | 74 | color: #86D4B1; |
881b6e2c JS |
75 | } |
76 | ||
996b3bf7 JS |
77 | a.highlight { |
78 | color: #fff; | |
79 | } | |
80 | ||
937c7ea5 JS |
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 | ||
983aa712 JS |
97 | label { |
98 | font-weight: normal; | |
99 | } | |
100 | ||
03b058b7 | 101 | input, textarea { |
4826f626 JS |
102 | font-size:1em; |
103 | font-family:'Lato', sans-serif; | |
104 | } | |
105 | ||
983aa712 JS |
106 | /* website structure */ |
107 | ||
7945cd21 | 108 | .container { |
7df9f45c JS |
109 | margin: auto; |
110 | width: 96%; | |
141f14e2 | 111 | max-width: 940px; |
9f661642 JS |
112 | } |
113 | ||
7945cd21 | 114 | header { |
d317d9d6 JS |
115 | width: 100%; |
116 | padding: 0; | |
c5a9ecf2 | 117 | margin-bottom: 42px; |
d317d9d6 | 118 | background-color: #303030; |
d317d9d6 | 119 | border-bottom: 1px solid #252525; |
9ecf7cd1 JS |
120 | } |
121 | ||
7945cd21 | 122 | .header_right { |
d317d9d6 | 123 | margin: 8px; |
d297d8e8 JS |
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; | |
1bb8eb89 JS |
170 | } |
171 | ||
7945cd21 | 172 | a.logo { |
a97e5bb2 JS |
173 | color: #fff; |
174 | font-weight: bold; | |
881b6e2c JS |
175 | } |
176 | ||
7945cd21 | 177 | .logo img { |
3ea6a305 | 178 | vertical-align: middle; |
30a89a57 | 179 | margin: 6px 8px; |
3ea6a305 JS |
180 | } |
181 | ||
1bb8eb89 | 182 | .mediagoblin_content { |
426808cc | 183 | width: 100%; |
1bb8eb89 JS |
184 | padding-bottom: 74px; |
185 | } | |
186 | ||
7945cd21 | 187 | footer { |
426808cc | 188 | width: 100%; |
7c9d1a2b | 189 | height: 30px; |
9ecf7cd1 | 190 | border-top: 1px solid #333; |
7c9d1a2b | 191 | bottom: 0px; |
afcb0855 | 192 | padding: 8px 0; |
7c9d1a2b | 193 | text-align: center; |
f51b65d5 | 194 | font-size: 0.875em; |
42a7c010 | 195 | clear: both; |
9f661642 JS |
196 | } |
197 | ||
42a7c010 | 198 | .media_pane { |
141f14e2 | 199 | width: 640px; |
42a7c010 JS |
200 | margin-left: 0px; |
201 | margin-right: 10px; | |
202 | float: left; | |
9f661642 | 203 | } |
fb1dc4f5 | 204 | |
42a7c010 | 205 | .media_sidebar { |
141f14e2 | 206 | width: 280px; |
630dd794 | 207 | margin-left: 10px; |
42a7c010 JS |
208 | float: left; |
209 | } | |
38aa4a40 | 210 | |
3ea6a305 JS |
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; | |
38aa4a40 JS |
221 | } |
222 | ||
69dadf42 JS |
223 | /* common website elements */ |
224 | ||
f4cbe074 | 225 | .button_action, .button_action_highlight, .button_form { |
bb3b9e40 | 226 | display: inline-block; |
13423daa JS |
227 | color: #c3c3c3; |
228 | background-color: #363636; | |
229 | border: 1px solid; | |
230 | border-color: #464646 #2B2B2B #252525; | |
231 | border-radius: 4px; | |
13423daa | 232 | padding: 3px 8px; |
bb3b9e40 | 233 | font-size: 16px; |
13423daa JS |
234 | text-decoration: none; |
235 | font-style: normal; | |
236 | font-weight: bold; | |
75a12d63 | 237 | cursor: pointer; |
13423daa JS |
238 | } |
239 | ||
f4cbe074 | 240 | .button_action_highlight, .button_form { |
88f20b58 JS |
241 | background-color: #86D4B1; |
242 | border-color: #A2DEC3 #6CAA8E #5C9179; | |
243 | color: #283F35; | |
13423daa JS |
244 | } |
245 | ||
b6a68691 | 246 | .button_form { |
7c9d1a2b | 247 | min-width: 99px; |
7c9d1a2b | 248 | margin: 10px 0px 10px 15px; |
7c9d1a2b | 249 | text-align: center; |
ce5db609 | 250 | font-family: 'Lato', sans-serif; |
677f55cc CAW |
251 | } |
252 | ||
75a12d63 | 253 | .pagination { |
7c9d1a2b | 254 | text-align: center; |
bf332e82 JS |
255 | } |
256 | ||
75a12d63 | 257 | .pagination_arrow { |
7c9d1a2b | 258 | margin: 5px; |
0a45fa59 JS |
259 | } |
260 | ||
75a12d63 | 261 | .empty_space { |
5bd523eb | 262 | background-image: url("../images/empty_back.png"); |
1d03221d JS |
263 | font-style: italic; |
264 | text-align: center; | |
265 | height: 160px; | |
266 | padding-top: 70px; | |
267 | } | |
268 | ||
75a12d63 JS |
269 | .right_align { |
270 | float: right; | |
271 | } | |
272 | ||
3ea6a305 JS |
273 | .clear { |
274 | clear: both; | |
275 | display: block; | |
276 | overflow: hidden; | |
277 | visibility: hidden; | |
278 | width: 0; | |
279 | height: 0; | |
75a12d63 JS |
280 | } |
281 | ||
4c417c59 | 282 | .media_sidebar h3 { |
ee9a0e3c | 283 | font-size: 1em; |
4c417c59 JS |
284 | margin: 0 0 5px; |
285 | border: none; | |
286 | } | |
287 | ||
288 | .media_sidebar p { | |
339105fa | 289 | margin-left: 8px; |
ee9a0e3c JS |
290 | } |
291 | ||
491b9109 JS |
292 | /* forms */ |
293 | ||
3ea6a305 | 294 | .form_box,.form_box_xl { |
7c9d1a2b | 295 | background-color: #222; |
00996b92 | 296 | border-top: 6px solid #D49086; |
7df9f45c | 297 | padding: 3% 5%; |
7c9d1a2b CAW |
298 | display: block; |
299 | float: none; | |
7df9f45c JS |
300 | width: 90%; |
301 | max-width: 340px; | |
302 | margin-left: auto; | |
303 | margin-right: auto; | |
f0e621c8 JS |
304 | } |
305 | ||
3ea6a305 | 306 | .form_box_xl { |
7df9f45c | 307 | max-width: 460px; |
f0e621c8 JS |
308 | } |
309 | ||
bb1f2f89 | 310 | .edit_box { |
00996b92 | 311 | border-top: 6px dashed #D49086 |
bb1f2f89 JS |
312 | } |
313 | ||
353f927e | 314 | .form_field_input input, .form_field_input textarea { |
7c9d1a2b | 315 | width: 100%; |
491b9109 JS |
316 | } |
317 | ||
aea6d577 JS |
318 | .form_field_input { |
319 | margin-bottom: 10px; | |
320 | } | |
321 | ||
322 | .form_field_label { | |
7c9d1a2b | 323 | margin-bottom: 4px; |
491b9109 JS |
324 | } |
325 | ||
feb3c4c3 JS |
326 | .form_field_label { |
327 | font-size:1.125em; | |
328 | } | |
329 | ||
330 | .form_field_description { | |
331 | font-style: italic; | |
332 | } | |
333 | ||
716a0ac3 | 334 | .form_field_error { |
7c9d1a2b CAW |
335 | background-color: #87453b; |
336 | color: #fff; | |
337 | border: none; | |
7c9d1a2b CAW |
338 | padding: 9px; |
339 | margin-top: 8px; | |
340 | margin-bottom: 8px; | |
491b9109 | 341 | } |
37a00748 | 342 | |
69dadf42 | 343 | .form_submit_buttons { |
7c9d1a2b | 344 | text-align: right; |
69dadf42 JS |
345 | } |
346 | ||
dab1d702 JS |
347 | #password_boolean { |
348 | margin-top: 4px; | |
349 | width: 20px; | |
350 | } | |
351 | ||
f5d837fe | 352 | textarea#description, textarea#bio { |
7fc782bb | 353 | resize: vertical; |
47ab857f | 354 | height: 100px; |
7fc782bb JS |
355 | } |
356 | ||
270dca58 JS |
357 | /* comments */ |
358 | ||
e4898f43 JS |
359 | .comment_wrapper { |
360 | margin-top: 20px; | |
361 | margin-bottom: 20px; | |
362 | } | |
363 | ||
364 | .comment_wrapper p { | |
365 | margin-bottom: 2px; | |
366 | } | |
367 | ||
270dca58 | 368 | .comment_author { |
7c9d1a2b | 369 | padding-top: 4px; |
a97e5bb2 | 370 | font-size: 0.9em; |
270dca58 JS |
371 | } |
372 | ||
157c6026 | 373 | .comment_content { |
55dbaa9b JS |
374 | margin-left: 8px; |
375 | margin-top: 8px; | |
376 | } | |
377 | ||
3ea6a305 | 378 | textarea#comment_content { |
ee9a0e3c JS |
379 | resize: vertical; |
380 | width: 100%; | |
3ea6a305 JS |
381 | height: 90px; |
382 | border: none; | |
383 | background-color: #f1f1f1; | |
384 | padding: 3px; | |
385 | } | |
386 | ||
ee9a0e3c JS |
387 | #form_comment .form_field_input { |
388 | padding-right: 6px; | |
389 | } | |
390 | ||
a54e5be7 JS |
391 | /* media galleries */ |
392 | ||
e854a128 | 393 | .media_thumbnail { |
b01a3b93 | 394 | float: left; |
7c9d1a2b CAW |
395 | padding: 0px; |
396 | width: 180px; | |
fcc0f4e8 | 397 | height: 156px; |
7c9d1a2b | 398 | overflow: hidden; |
b01a3b93 | 399 | margin: 0px 4px 10px; |
92ed2892 | 400 | text-align: center; |
970cea18 | 401 | font-size: 0.875em; |
fcc0f4e8 JS |
402 | background-color: #222; |
403 | border-radius: 0 0 5px 5px; | |
404 | padding: 0 0 6px; | |
92ed2892 CAW |
405 | } |
406 | ||
ec451724 CAW |
407 | .media_thumbnail a { |
408 | color: #eee; | |
409 | text-decoration: none; | |
410 | } | |
411 | ||
c4370069 | 412 | .media_thumbnail img { |
fcc0f4e8 | 413 | max-height: 135px; |
c4370069 JS |
414 | } |
415 | ||
92ed2892 CAW |
416 | /* media detail */ |
417 | ||
b2706737 | 418 | h2.media_title { |
a97e5bb2 | 419 | margin-bottom: 0px; |
ee9a0e3c JS |
420 | display: inline-block; |
421 | } | |
422 | ||
423 | p.context { | |
424 | display: inline-block; | |
425 | padding-top: 4px; | |
fb1dc4f5 JS |
426 | } |
427 | ||
b2706737 | 428 | p.media_specs { |
a97e5bb2 | 429 | font-size: 0.9em; |
b2706737 | 430 | border-top: 1px solid #222; |
b2706737 JS |
431 | padding: 10px 0px; |
432 | color: #888; | |
9ecf7cd1 JS |
433 | } |
434 | ||
6c191eb3 KR |
435 | .no_html5 { |
436 | background: black; | |
437 | color: white; | |
438 | text-align: center; | |
439 | height: 160px; | |
440 | padding: 130px 10px 20px 10px; | |
441 | } | |
442 | ||
6ef36a15 JS |
443 | /* icons */ |
444 | ||
b2706737 | 445 | img.media_icon { |
7c9d1a2b CAW |
446 | margin: 0 4px; |
447 | vertical-align: sub; | |
6ef36a15 | 448 | } |
8dc43810 JS |
449 | |
450 | /* navigation */ | |
451 | ||
ee9a0e3c JS |
452 | .navigation { |
453 | float: right; | |
454 | } | |
455 | ||
b2706737 | 456 | .navigation_button { |
80c9a7ee | 457 | width: 135px; |
ee9a0e3c | 458 | display: inline-block; |
7c9d1a2b | 459 | text-align: center; |
80c9a7ee JS |
460 | background-color: #1d1d1d; |
461 | border: 1px solid; | |
462 | border-color: #2c2c2c #232323 #1a1a1a; | |
909dda1f | 463 | border-radius: 4px; |
7c9d1a2b | 464 | text-decoration: none; |
ee9a0e3c JS |
465 | padding: 4px 0 8px; |
466 | margin: 0 0 6px; | |
8dc43810 JS |
467 | } |
468 | ||
b2706737 | 469 | .navigation_left { |
80c9a7ee | 470 | margin-right: 6px; |
8dc43810 | 471 | } |
62e2f458 JS |
472 | |
473 | /* messages */ | |
474 | ||
475 | ul.mediagoblin_messages { | |
7c9d1a2b CAW |
476 | list-style: none inside; |
477 | color: #f7f7f7; | |
3ea6a305 | 478 | padding: 0; |
62e2f458 JS |
479 | } |
480 | ||
481 | .mediagoblin_messages li { | |
7c9d1a2b CAW |
482 | margin: 5px 0; |
483 | padding: 8px; | |
484 | text-align: center; | |
62e2f458 JS |
485 | } |
486 | ||
487 | .message_success { | |
488 | background-color: #378566; | |
489 | } | |
490 | ||
491 | .message_warning { | |
492 | background-color: #87453b; | |
493 | } | |
494 | ||
495 | .message_error { | |
496 | background-color: #87453b; | |
497 | } | |
498 | ||
499 | .message_info { | |
500 | background-color: #378566; | |
b51c5741 | 501 | } |
62e2f458 JS |
502 | |
503 | .message_debug { | |
504 | background-color: #f7f7f7; | |
7c9d1a2b | 505 | color: #272727; |
62e2f458 | 506 | } |
5d900647 CAW |
507 | |
508 | ul.mediaentry_tags { | |
509 | list-style-type: none; | |
510 | } | |
511 | ||
512 | ul.mediaentry_tags li { | |
513 | display: inline; | |
514 | margin: 0px 5px 0px 0px; | |
515 | padding: 0px; | |
516 | } | |
01c75c7e CAW |
517 | |
518 | ||
519 | /* media processing panel */ | |
520 | ||
521 | table.media_panel { | |
522 | width: 100%; | |
523 | } | |
524 | ||
525 | table.media_panel th { | |
526 | font-weight: bold; | |
527 | padding-bottom: 4px; | |
58335110 | 528 | } |
e8b51792 CAW |
529 | |
530 | ||
531 | /* Delete panel */ | |
532 | ||
533 | .delete_checkbox_box { | |
534 | margin-top: 10px; | |
535 | margin-left: 10px; | |
ab613cb3 | 536 | } |
a246ccca JW |
537 | |
538 | /* ASCII art */ | |
539 | ||
540 | @font-face { | |
541 | font-family: Inconsolata; | |
542 | src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype') | |
543 | } | |
544 | ||
545 | .ascii-wrapper pre { | |
546 | font-family: Inconsolata, monospace; | |
547 | line-height: 1em; | |
7fc782bb | 548 | } |
173999a7 | 549 | |
7646e695 | 550 | /* Media queries and other responsivisivity */ |
141f14e2 | 551 | @media screen and (max-width: 940px) { |
173999a7 JS |
552 | .media_pane { |
553 | width: 100%; | |
7646e695 | 554 | margin: 0px; |
173999a7 | 555 | } |
ee9a0e3c JS |
556 | |
557 | .media_sidebar { | |
558 | width: 100%; | |
559 | margin: 0px; | |
560 | } | |
561 | ||
173999a7 JS |
562 | img.media_image { |
563 | width: 100%; | |
23f87661 | 564 | display: inline; |
173999a7 | 565 | } |
7646e695 | 566 | |
6c2e5730 JS |
567 | .media_thumbnail { |
568 | width: 21%; | |
569 | } | |
570 | ||
7646e695 JS |
571 | .profile_sidebar { |
572 | width: 100%; | |
573 | margin: 0px; | |
574 | } | |
ee9a0e3c | 575 | |
7646e695 JS |
576 | .profile_showcase { |
577 | width: 100%; | |
578 | margin: 0px; | |
579 | } | |
ee9a0e3c JS |
580 | |
581 | .navigation { | |
582 | float: none; | |
583 | } | |
584 | ||
585 | .navigation_button { | |
586 | width: 49%; | |
587 | float: right; | |
588 | } | |
589 | ||
590 | .navigation_left { | |
591 | margin-right: 0; | |
592 | float: left; | |
593 | } | |
f2ca3ad6 JS |
594 | |
595 | .navigation { | |
596 | float: none; | |
597 | } | |
598 | ||
599 | .navigation_button { | |
600 | width: 49%; | |
92e8ca79 | 601 | float: right; |
3d44c01a | 602 | padding: 10px 0 14px; |
f2ca3ad6 JS |
603 | } |
604 | ||
605 | .navigation_left { | |
606 | margin-right: 0; | |
92e8ca79 | 607 | float: left; |
f2ca3ad6 | 608 | } |
f4cbe074 JS |
609 | |
610 | .button_action, .button_action_highlight, .button_form { | |
611 | padding: 9px 14px; | |
612 | } | |
2b7b7010 | 613 | |
d297d8e8 JS |
614 | header { |
615 | text-align: center; | |
616 | } | |
617 | ||
d317d9d6 JS |
618 | .header_right { |
619 | margin-right: 2%; | |
d297d8e8 | 620 | float: none; |
d317d9d6 JS |
621 | } |
622 | ||
623 | a.logo { | |
624 | margin-left: 2%; | |
2b7b7010 | 625 | } |
7646e695 | 626 | } |
6c2e5730 JS |
627 | |
628 | @media screen and (max-width: 570px) { | |
629 | .media_thumbnail { | |
630 | width: 29%; | |
631 | } | |
632 | } | |
633 | ||
634 | @media screen and (max-width: 380px) { | |
635 | .media_thumbnail { | |
636 | width: 46%; | |
637 | } | |
638 | } |