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