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