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