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