1 | /*************************************************************************** |
2 | |
3 | profile css by cy @ toyhou.se |
4 | |
5 | Contents: |
6 | - General properties |
7 | - Global IDs |
8 | > .button variants |
9 | > .display-user |
10 | > .label variants |
11 | > .panel |
12 | > .th, .thumb |
13 | > pagination |
14 | > grids |
15 | - Containers |
16 | > #container |
17 | > #main |
18 | > #content |
19 | > #footer |
20 | - Header |
21 | - Sidebar |
22 | - Profile page [.profile-content] |
23 | > .profile-column |
24 | >> .profile-bulletin |
25 | >> .profile-feature |
26 | >> .profile-characters |
27 | > .profile-column |
28 | >> .profile-comments |
29 | - Comments |
30 | > .comment-create |
31 | >> .forums-ic-panel |
32 | > .reveal-modal |
33 | > .forum-posts |
34 | >> .forum-posts-sidebar |
35 | >> .forum-post |
36 | - Bulletins [.bulletins-index] and latest bulletins |
37 | > .bulletins-post |
38 | >> .bulletin-header |
39 | >> .bulletin-post |
40 | - Characters [.profile-characters] |
41 | > .profile-characters-folders |
42 | > .profile-characters-filters |
43 | >> .sub-nav |
44 | > .characters-gallery |
45 | >> .thumb-character |
46 | - Images |
47 | > .profile-gallery |
48 | - Links |
49 | > .profile-links |
50 | >> .character-links-row |
51 | - Worlds |
52 | > .profile-groups |
53 | - Favourites |
54 | > .profile-creations |
55 | - Designs |
56 | > .profile-creations |
57 | - Art |
58 | > .profile-gallery |
59 | - Stats |
60 | > .character-fields |
61 | > #modal-default |
62 | |
63 | ***************************************************************************/ |
64 | |
65 | /*************************************************************************** |
66 | |
67 | Options |
68 | |
69 | Colours used |
70 | |
71 | Greys: |
72 | #111 |
73 | #151515 |
74 | #222 |
75 | #777 |
76 | #ddd |
77 | #eee |
78 | |
79 | Orange: |
80 | #f08a24 |
81 | #f7ac29 |
82 | |
83 | Blue: |
84 | #008CBA |
85 | #1CC7FF |
86 | |
87 | ***************************************************************************/ |
88 | |
89 | /* |
90 | |
91 | Profile boxes! |
92 | |
93 | How to use: |
94 | 1. Comment and uncomment the following sections. |
95 | What this does is make the main profile content transparent |
96 | and adjust the margins so the boxes align nicely. |
97 | 2. Use the classes layout-box and layout-header (if you want headers), |
98 | here's an example: |
99 | |
100 | <div class="layout-box"> |
101 | <div class="layout-header"> |
102 | <h1>HEADER TEXT GOES HERE</h1> |
103 | </div> |
104 | BOX CONTENT GOES HERE |
105 | </div> |
106 | |
107 | * Please note that you should only comment/uncomment the |
108 | following sections if you're sure there's going to be |
109 | content in the character's profile, otherwise the layout |
110 | will mess up! |
111 | |
112 | */ |
113 | |
114 | /* comment out ******************/ |
115 | .profile-content |
116 | { |
117 | background-color: #fff; |
118 | } |
119 | /********************************/ |
120 | |
121 | /* uncomment ********************/ |
122 | /* |
123 | .profile-column |
124 | { |
125 | margin-top: -90px; |
126 | margin-bottom: 100px; |
127 | } |
128 | */ |
129 | /********************************/ |
130 | |
131 | /* |
132 | Background colours/images |
133 | */ |
134 | #container |
135 | { |
136 | background-color: #c3dad8; |
137 | /*background-image: url('http://i.imgur.com/PMFQpKB.png');*/ |
138 | } |
139 | #header /* 900 x 145 */ |
140 | { |
141 | /* |
142 | Default bg credit: http://-justinnyurr.tumblr.com/ |
143 | */ |
144 | background-image: url('http://i.imgur.com/PMFQpKB.png'); |
145 | /*background-color: #c3dad8;*/ |
146 | } |
147 | |
148 | /*************************************************************************** |
149 | |
150 | General properties |
151 | |
152 | ***************************************************************************/ |
153 | |
154 | /* |
155 | Both must be overwritten or hover colour will be default blue. |
156 | However, if [.display-user a] is set, that will take priority |
157 | */ |
158 | a, a:link, a:visited |
159 | { |
160 | color: #008CBA; |
161 | } |
162 | a:hover |
163 | { |
164 | color: #1CC7FF; |
165 | } |
166 | |
167 | /* |
168 | All timestamps |
169 | Attempts thus far to remove the dotted |
170 | bottom line have been unsuccessful |
171 | */ |
172 | abbr |
173 | { |
174 | |
175 | } |
176 | |
177 | /* |
178 | padding is asymmetrical by default. (9 20 0 19) |
179 | */ |
180 | blockquote |
181 | { |
182 | padding-bottom: 9px; |
183 | } |
184 | |
185 | /* |
186 | Both the basic headers and the .panel headers need |
187 | to be modified at the same time since it doesn't |
188 | cascade into .panel, so bulletins etc. aren't affected |
189 | Oddly, things such as links do gain the changes... |
190 | */ |
191 | #content h1, .panel h1 |
192 | { |
193 | font-size: 25px; |
194 | } |
195 | #content h1, .panel h1, |
196 | #content h2, .panel h2, |
197 | #content h3, .panel h3, |
198 | #content h4, .panel h4, |
199 | #content h5, .panel h5, |
200 | #content h6, .panel h6 |
201 | { |
202 | font-family: georgia; |
203 | text-transform: lowercase; |
204 | font-weight: normal; |
205 | } |
206 | |
207 | .layout-header h1, |
208 | .layout-header h2, |
209 | .layout-header h3, |
210 | .layout-header h4, |
211 | .layout-header h5, |
212 | .layout-header h6 |
213 | { |
214 | color: #fff; |
215 | font-style: italic; |
216 | } |
217 | |
218 | .layout-header |
219 | { |
220 | margin-left: -30px; |
221 | margin-right: -30px; |
222 | margin-top: -30px; |
223 | margin-bottom: 30px; |
224 | padding: 20px 30px 20px 30px; |
225 | background-color: #111; |
226 | display: block; |
227 | } |
228 | |
229 | .layout-box |
230 | { |
231 | background-color: #fff; |
232 | display: block; |
233 | margin-left: -30px; |
234 | margin-right: -30px; |
235 | margin-top: -30px; |
236 | margin-bottom: 40px; |
237 | padding: 30px; |
238 | } |
239 | |
240 | /* |
241 | If hr doesn't work, add <p></p> tags |
242 | It seems to work fine for content, |
243 | but not in the sidebar blurb |
244 | |
245 | default values: |
246 | margin-top: 20px; |
247 | border-top: 1px; |
248 | margin-bottom: 19px; |
249 | */ |
250 | hr |
251 | { |
252 | border-top: 1px dotted #777; |
253 | } |
254 | |
255 | /* |
256 | p seems to crop up every now and then, so best to remove any |
257 | padding whatsoever... |
258 | */ |
259 | p, #content p |
260 | { |
261 | padding: 0px; |
262 | font-size: 12px; |
263 | } |
264 | #content |
265 | { |
266 | font-size: 12px; |
267 | } |
268 | |
269 | i, u, s, b, |
270 | p i, p u, p s, p b |
271 | { |
272 | color: #777; |
273 | } |
274 | |
275 | .th.radius, .panel.radius |
276 | { |
277 | border-radius: 0px; |
278 | } |
279 | |
280 | #sidebar .divider , |
281 | #sidebar .display-user a |
282 | { |
283 | background-color: #111; |
284 | } |
285 | .profile-bulletin-content, |
286 | .profile-feature, |
287 | .profile-column .profile-characters, |
288 | .comment-create, |
289 | .bulletins-post, |
290 | .bulletin .bulletin-post, |
291 | .profile-characters-folders, |
292 | .profile-characters-filters, |
293 | .characters-gallery, |
294 | .character-links-row, |
295 | .profile-groups, |
296 | .profile-creations, |
297 | .profile-gallery, |
298 | .character-fields |
299 | { |
300 | padding: 30px; |
301 | background-color: #fff; |
302 | margin-bottom: 10px; |
303 | } |
304 | |
305 | /*************************************************************************** |
306 | |
307 | Global IDs |
308 | |
309 | ***************************************************************************/ |
310 | |
311 | /************************************************ |
312 | .button variants |
313 | - [button] by itself cannot be modified |
314 | - modal buttons are more specific |
315 | ************************************************/ |
316 | /* |
317 | .button affected areas: |
318 | - only the "Post Comment" buttons |
319 | */ |
320 | .button {} |
321 | .button:hover {} |
322 | |
323 | /* |
324 | .button.secondary affected areas: |
325 | - Worlds: "Save Worlds" |
326 | - Comments: "Select Character", "Select Image" |
327 | */ |
328 | .button.secondary {} |
329 | .button.secondary:hover {} |
330 | |
331 | /************************************************ |
332 | .display-user |
333 | ************************************************/ |
334 | |
335 | /* this affects any usernames */ |
336 | .display-user a {} |
337 | .display-user a:hover {} |
338 | |
339 | /************************************************ |
340 | .label variants |
341 | :hover (without using a:hover) is enough |
342 | for changing the hover text colour. |
343 | [a] does not affect label text |
344 | ************************************************/ |
345 | |
346 | #content .label.radius, |
347 | #content .label.radius a, |
348 | #content .label.radius:hover, |
349 | #content .label.radius:hover a, |
350 | { |
351 | color: #fff; |
352 | } |
353 | |
354 | #content .profile-characters .thumb-caption .label.muted.favorited, |
355 | #content .profile-characters .thumb-caption .label.muted.favorited i |
356 | { |
357 | color: #f7ac29; |
358 | } |
359 | |
360 | #content .profile-characters .thumb-caption .label.muted, |
361 | #content .profile-characters .thumb-caption .label.muted i |
362 | { |
363 | color: #777; |
364 | } |
365 | |
366 | |
367 | /* |
368 | I've found that using .label in specific places will affect |
369 | all labels in that container, but using the generic [.label] |
370 | will affect only certain labels. |
371 | |
372 | .label affected areas: |
373 | - Profile: "Edit" labels, character name labels |
374 | - Bulletins: "Edit" labels (both main and individual posts) |
375 | - Characters: character name labels |
376 | - Designs: character name labels |
377 | - Images: character name labels |
378 | - Favourites: character name labels |
379 | - Comments: "Edit" labels |
380 | |
381 | To do hover text colour for character names, use [.label a] |
382 | To do hover text colour for edit labels, use [.label] (same for .alert) |
383 | Or: if the label itself isn't a link, use [.label a]. |
384 | */ |
385 | .label {} |
386 | .label a, #content .label, |
387 | #content .label a , |
388 | #content .label i, |
389 | #content .label span |
390 | { |
391 | color: #fff; |
392 | } |
393 | |
394 | .label:hover {} |
395 | .label:hover a , #content .label:hover, |
396 | #content .label:hover a, |
397 | #content .label:hover a i, |
398 | #content .label:hover a span |
399 | { |
400 | color: #1CC7FF; |
401 | } |
402 | |
403 | /* |
404 | .label.primary affected areas: |
405 | - Profile: recent characters character name labels (but not featured) |
406 | - Characters: character name labels |
407 | - Designs: character name labels |
408 | - Favourites: character name labels |
409 | |
410 | .label is a better choice unless specificity is required. |
411 | */ |
412 | .label.primary {} |
413 | .label.primary:hover {} |
414 | |
415 | /* |
416 | .label.secondary affected areas: |
417 | - Profile: latest bulletin "# Comments" label, |
418 | recent characters username labels |
419 | - Bulletins: "# Comments" label (both main and individual posts) |
420 | - Characters: username labels |
421 | - Worlds: member rank label |
422 | - Designs: username labels |
423 | - Images: "Edit" labels |
424 | - Favourites: username labels |
425 | */ |
426 | .label.secondary |
427 | { |
428 | background-color: #f08a24; |
429 | } |
430 | #content .label.secondary:hover a, |
431 | #content .label.secondary:hover a i, |
432 | #content .label.secondary:hover a span |
433 | { |
434 | color: #fdcf2e; |
435 | } |
436 | |
437 | /* |
438 | .label.alert affected areas: |
439 | - Profile: all the labels that say "Delete" |
440 | - Bulletins: "Delete" labels |
441 | - Comments: "Delete" labels |
442 | |
443 | To do hover text colour, don't use [a] |
444 | */ |
445 | .label.alert {} |
446 | #content .label.alert:hover |
447 | { |
448 | color: #fff; |
449 | } |
450 | |
451 | /* |
452 | only appears on characters page; |
453 | one each for each counter icon + number |
454 | */ |
455 | .label.muted {} |
456 | |
457 | /************************************************ |
458 | .panel |
459 | ************************************************/ |
460 | |
461 | /* |
462 | .panel affected areas: |
463 | - Profile: latest bulletin, featured character, recent characters |
464 | - Bulletins: bulletin backgrounds |
465 | - Comments: comments (comment boxes) |
466 | - Modals: character selection (scrolling area), |
467 | image selection (scrolling area) |
468 | */ |
469 | .panel {} |
470 | |
471 | /************************************************ |
472 | .th, .thumb |
473 | ************************************************/ |
474 | |
475 | /* |
476 | .th affected areas: |
477 | - all character/world thumbnail image boxes |
478 | |
479 | Use this to modify box-shadow and the fat white border, |
480 | as well as constrain the image's size |
481 | */ |
482 | .th {} |
483 | .th:hover {} |
484 | |
485 | /* |
486 | .thumb affected areas: |
487 | - the entire section enclosing a character/world |
488 | - 3 versions: padded (no padding-top), margin-bottom, no padding/margin |
489 | - Profile: featured (images only (margin-bottom); excludes character), |
490 | recent characters |
491 | - Characters: characters |
492 | - Worlds: worlds (no padding) |
493 | - Images: images (margin-bottom) |
494 | - everything else is padded |
495 | */ |
496 | .thumb {} |
497 | |
498 | /************************************************ |
499 | pagination |
500 | ************************************************/ |
501 | |
502 | /* non-active page numbers */ |
503 | ul.pagination li a {} |
504 | ul.pagination li a:hover {} |
505 | |
506 | /* current page number, modify background colour here */ |
507 | ul.pagination li.current a {} |
508 | ul.pagination li.current a:hover {} |
509 | |
510 | /* note that these are different */ |
511 | ul.pagination li {} |
512 | ul.pagination li:hover {} |
513 | ul.pagination li.current {} |
514 | ul.pagination li.current:hover {} |
515 | |
516 | /************************************************ |
517 | grids |
518 | ************************************************/ |
519 | |
520 | /* |
521 | ul.small-block-grid-6 |
522 | |
523 | Used for all the pages. |
524 | 6 to a row, width of each li is then 16.6%. |
525 | With fixed margins ~16.3% seems to work fine. |
526 | For some reason, has -10px left and right margins. |
527 | (To push it past #content's padding all the way to the edges?) |
528 | |
529 | On the Characters page, it's contained within |
530 | an uneditable fieldset that has 20px margins, |
531 | so it's padded an extra 10px from #content's edges by default. |
532 | To overcome this and reach #content, margins should be -20px |
533 | instead of the forced 0px here. |
534 | |
535 | Generally, styling the grids means finishing |
536 | Worlds/Designs/Images/Favourites all at once, or at least |
537 | very quickly. |
538 | */ |
539 | ul.small-block-grid-6 |
540 | { |
541 | margin-left: 0px; |
542 | margin-right: 0px; |
543 | margin-top: 20px; |
544 | margin-bottom: 20px; |
545 | } |
546 | |
547 | /* |
548 | ul.small-block-grid-6 li |
549 | |
550 | In the galleries, is a better option than .thumb and |
551 | has more power than .thumb does. |
552 | It's a better option because the padding is consistent. |
553 | However, it doesn't affect the profile page. |
554 | |
555 | Profile recent characters uses small-block-grid-3 |
556 | Profile featured character uses large-block-grid-6 (images only) |
557 | |
558 | remember that Characters page has the extra |
559 | 10px of padding all round though |
560 | */ |
561 | ul.small-block-grid-6 li |
562 | { |
563 | padding-top: 10px; |
564 | } |
565 | |
566 | /*************************************************************************** |
567 | |
568 | Containers |
569 | |
570 | ***************************************************************************/ |
571 | |
572 | /* |
573 | Contains everything on the page. |
574 | Shrinking this causes stuff to overflow. |
575 | Nice for backgrounds but don't touch the width/height. |
576 | */ |
577 | #container |
578 | { |
579 | min-width: 1000px; |
580 | } |
581 | |
582 | /* |
583 | Contains everything except the header and footer. |
584 | (i.e. it contains #sidebar and #content) |
585 | Can squash for a narrower content area. |
586 | */ |
587 | #main |
588 | { |
589 | width: 900px; |
590 | margin-left: auto; |
591 | margin-right: auto; |
592 | margin-top: 20px; |
593 | background-color: transparent; |
594 | } |
595 | |
596 | /* |
597 | Contains the main content of the page. |
598 | Note that the padding is compounded with the container |
599 | that represents the current page's content. |
600 | |
601 | Doing things like changing the text colour here will affect |
602 | text in created divs, but not text in panels and etc. |
603 | It also affects world names on the Worlds page. |
604 | Better to do text colour changes in specific places. |
605 | */ |
606 | #content |
607 | { |
608 | width: 685px; |
609 | padding: 0px; |
610 | } |
611 | |
612 | /* |
613 | Generally not useful for layouts unless something to meet |
614 | the lower part of the page is required. |
615 | It contains the profiler which I'll also turn off here. |
616 | */ |
617 | #footer { display: none; } |
618 | .profiler { display: none; } |
619 | |
620 | /*************************************************************************** |
621 | |
622 | Header |
623 | |
624 | ***************************************************************************/ |
625 | |
626 | /* |
627 | I have no idea what to do with this sometimes; |
628 | it contains important functions so getting rid of it |
629 | isn't a good idea but it's also too thick for layouts sometimes. |
630 | */ |
631 | #header |
632 | { |
633 | width: 900px; |
634 | margin-left: auto; |
635 | margin-right: auto; |
636 | padding-top: 100px; |
637 | height: 145px; |
638 | padding-left: 15px; |
639 | padding-right: 15px; |
640 | border-width: 0px 1px 1px 1px; |
641 | border-style: dotted; |
642 | border-color: #777; |
643 | } |
644 | |
645 | /* |
646 | All header buttons including the dropdown |
647 | If transparent, background colour will show through. |
648 | However, dropdown li will also become transparent |
649 | and will need to be set with [.dropdown li] |
650 | Both [#header a] and [#header li] need to be transparent. |
651 | Background colour can then be set on #header. |
652 | */ |
653 | #header a, #header li |
654 | { |
655 | background-color: transparent; |
656 | font-size: 30px; |
657 | font-family: georgia; |
658 | text-transform: lowercase; |
659 | padding-left: 0px; |
660 | font-style: italic; |
661 | } |
662 | #header a:hover, |
663 | #header .dropdown li:hover > a |
664 | { |
665 | color: #fdcf2e; |
666 | } |
667 | |
668 | /* Dropdown links */ |
669 | #header .dropdown li |
670 | { |
671 | background-color: #151515; |
672 | border-top: 1px dotted #777; |
673 | text-align: left; |
674 | line-height: 1.2em; |
675 | min-height: 25px; |
676 | padding: 5px 7px 5px 7px; |
677 | } |
678 | #header .dropdown li a |
679 | { |
680 | font-size: 15px; |
681 | line-height: 1.2em; |
682 | font-style: normal; |
683 | } |
684 | #header .dropdown li:hover |
685 | { |
686 | background-color: #222; |
687 | } |
688 | |
689 | /* Vertical divider; border-right */ |
690 | #header li.divider |
691 | { |
692 | /*border-right: 1px solid #000;*/ |
693 | display: none; |
694 | } |
695 | |
696 | /* top-left homepage link */ |
697 | #header .title-area a |
698 | { |
699 | padding-left: 0px; |
700 | color: #f08a24; |
701 | } |
702 | |
703 | /* user icon */ |
704 | .top-bar-section .left span, |
705 | #header img, |
706 | #header a ::after, |
707 | #header li ::after |
708 | { |
709 | display: none; |
710 | padding: 0px !important; |
711 | } |
712 | |
713 | /* |
714 | To change the size of the bar visually |
715 | (padding and font sizes not included) |
716 | all these need to be changed |
717 | Even if #header a is transparent it needs |
718 | to be resized otherwise dropdowns will be |
719 | impossible to use |
720 | |
721 | Issue: I don't know how to deal with the dropdown arrow |
722 | */ |
723 | /*#header, #header a, #header li, #header .title-area |
724 | { |
725 | height: 30px; |
726 | }*/ |
727 | |
728 | /* |
729 | Notif buttons. |
730 | Padding: 5 10 5 10 |
731 | Margin: 5 0 0 0 |
732 | */ |
733 | #header .button, #header .buttons |
734 | { |
735 | line-height: 35px; |
736 | } |
737 | #header .buttons |
738 | { |
739 | margin-top: -2px; |
740 | } |
741 | #header .button |
742 | { |
743 | padding: 0px; |
744 | margin: 0px 10px 0px 0px; |
745 | color: #F08A24; |
746 | } |
747 | #header .button:hover |
748 | { |
749 | color: #fdcf2e; |
750 | } |
751 | |
752 | /* |
753 | Contains all the header bar stuff. |
754 | With some resizing of #header it's possible to |
755 | set up a header image while preserving the header bar. |
756 | #header's background goes under this. |
757 | |
758 | I haven't yet figured out how to adjust the padding |
759 | of the dropdown buttons. |
760 | */ |
761 | .top-bar-section |
762 | { |
763 | background-color: transparent; |
764 | } |
765 | |
766 | /* |
767 | Only the left side of the header bar items, |
768 | excluding the top left homepage link. |
769 | Floats left. |
770 | */ |
771 | .top-bar-section .left li a |
772 | { |
773 | padding-left: 0px; |
774 | } |
775 | |
776 | /* |
777 | Only the right side of the header bar items. |
778 | Floats right. |
779 | |
780 | At the moment there's only one item so |
781 | #header .user-link does the same thing. |
782 | */ |
783 | #header .user-link |
784 | { |
785 | margin-right: -35px; |
786 | text-align: right; |
787 | } |
788 | |
789 | /*************************************************************************** |
790 | |
791 | Sidebar |
792 | |
793 | ***************************************************************************/ |
794 | |
795 | /* |
796 | The whole sidebar. |
797 | All the li are transparent, so changing the |
798 | background colour affects everything except |
799 | for the box that says "User" (.header). |
800 | |
801 | Changing the text colour affects blurb text. |
802 | Padding pads all the content. |
803 | Default width is 16.6667%. |
804 | */ |
805 | #sidebar |
806 | { |
807 | width: 200px; |
808 | padding: 0px; |
809 | background-color: transparent; |
810 | } |
811 | |
812 | /* |
813 | Changing the colour affects all the link text in the sidebar. |
814 | Note that [.side-nav a] doesn't do the same. |
815 | Neither does [.side-nav li a]. |
816 | */ |
817 | #sidebar a {} |
818 | #sidebar a:hover {} |
819 | |
820 | #sidebar li i |
821 | { |
822 | display: none; |
823 | } |
824 | |
825 | /* |
826 | Changing the background colour affects only the .header, |
827 | user link, blurb, and buttons. |
828 | Inserting padding here will also affect the .dividers so |
829 | be careful... |
830 | |
831 | Changing colour on hover here will affect every li in the |
832 | sidebar, including the blurb (which is probably not the |
833 | intended effect). So, the hover is put in [a] rather than [li]. |
834 | */ |
835 | #sidebar li |
836 | { |
837 | background-color: #fff; |
838 | padding: 0px 5px 0px 5px; |
839 | } |
840 | #sidebar li a |
841 | { |
842 | border-top: 1px dotted #ddd; |
843 | font-family: georgia; |
844 | line-height: 1.2em; |
845 | padding: 5px 10px 5px 10px; |
846 | } |
847 | |
848 | /* |
849 | This contains only the part of the sidebar that has any content |
850 | (as opposed to #sidebar which stretches the length of the page) |
851 | |
852 | It has padding at the top and bottom. #sidebar has no padding. |
853 | */ |
854 | .side-nav |
855 | { |
856 | padding: 0px; |
857 | } |
858 | |
859 | /* |
860 | The box that says "User". |
861 | */ |
862 | #sidebar .header |
863 | { |
864 | display: none; |
865 | } |
866 | |
867 | /* |
868 | The username + avatar box. |
869 | I recall having weird problems when doing up Jay's CSS, |
870 | but at the moment there doesn't seem to be any problem setting |
871 | a background image for this. |
872 | */ |
873 | #sidebar .display-user a |
874 | { |
875 | font-size: 0px; |
876 | padding: 10px 0px 10px 0px; |
877 | text-align: center; |
878 | border: 0px; |
879 | margin: 0px -5px 0px -5px; |
880 | min-height: 110px; |
881 | } |
882 | #sidebar .display-user img |
883 | { |
884 | margin-left: auto; |
885 | margin-right: auto; |
886 | border: 5px solid #fff; |
887 | background-color: #fff; |
888 | min-width: 100px; |
889 | min-height: 100px; |
890 | } |
891 | |
892 | /* |
893 | The blurb. |
894 | <hr> seems to require being between <p></p> tags. |
895 | |
896 | Note! Links in the blurb will appear like the other |
897 | buttons in the sidebar, i.e. they will stretch the |
898 | length of the sidebar and have padding. If this is not |
899 | what you want, add this (will affect ALL links in the blurb): |
900 | |
901 | #sidebar .blurb a {display: inline; padding: 0px;} |
902 | */ |
903 | #sidebar .blurb |
904 | { |
905 | background-color: #fff; |
906 | background-image: none; |
907 | margin: 0px; |
908 | border: 1px solid #eee; |
909 | padding: 15px 10px 15px 10px; |
910 | } |
911 | #sidebar .blurb i |
912 | { |
913 | display: inline-block; |
914 | } |
915 | #sidebar .blurb p |
916 | { |
917 | line-height: 1.15em; |
918 | } |
919 | |
920 | /* |
921 | The dividers. |
922 | 5px of padding on top and below, border is border-top. |
923 | */ |
924 | #sidebar .divider |
925 | { |
926 | margin-top: 10px; |
927 | height: 32px; |
928 | margin-bottom: 0px; |
929 | border: 0px; |
930 | } |
931 | |
932 | /* |
933 | It's not possible to touch any of the other buttons individually. |
934 | However it's possible to mess with the little icons... |
935 | */ |
936 | #sidebar i {} |
937 | |
938 | /* |
939 | The currently active page. |
940 | Use [.active a] to change the text colour. |
941 | */ |
942 | #sidebar .active a |
943 | { |
944 | background-image: url('http://i.imgur.com/7tXSD1Y.png'); |
945 | background-repeat: no-repeat; |
946 | background-position: left center; |
947 | |
948 | padding-left: 25px; |
949 | } |
950 | |
951 | /*************************************************************************** |
952 | |
953 | Profile page |
954 | |
955 | ***************************************************************************/ |
956 | |
957 | /* |
958 | .profile-content |
959 | |
960 | Main editable content of the profile. |
961 | Separate from the columns below. |
962 | I usually throw in an extra div inside, just in case |
963 | I want to make more to abuse later. |
964 | By default it's padded 10 10 10 10, but to maintain |
965 | consistency I usually turn off the padding and add it |
966 | in #content instead. |
967 | */ |
968 | .profile-content |
969 | { |
970 | padding: 30px; |
971 | margin-bottom: 30px; |
972 | } |
973 | |
974 | /************************************************ |
975 | .profile-column |
976 | ************************************************/ |
977 | /* |
978 | The two columns below the editable profile content. |
979 | Not a part of [.profile-content]. |
980 | There doesn't seem to be a way to differentiate between the two. |
981 | Merging them into a straight line is simple: width: 100%; |
982 | |
983 | It may be a good idea to apply thumbnail/label |
984 | styling in here. |
985 | */ |
986 | .profile-column |
987 | { |
988 | width: 100%; |
989 | padding: 0px; |
990 | } |
991 | |
992 | /* |
993 | .profile-column headings |
994 | This overwrites the default h1. |
995 | However, it also overwrites the h1 in the panel, so |
996 | overwrite it again. |
997 | */ |
998 | .profile-column h1 {} |
999 | .profile-column .panel h1 {} |
1000 | |
1001 | /* |
1002 | .profile-column .panel |
1003 | Simply, all the panels in the columns. |
1004 | */ |
1005 | .profile-column .panel {} |
1006 | |
1007 | /************************************************ |
1008 | .profile-bulletin |
1009 | ************************************************/ |
1010 | |
1011 | /* |
1012 | .profile-column .profile-bulletin |
1013 | |
1014 | The bulletin section, which is in the same column as |
1015 | featured and recent characters. Includes the header. |
1016 | .profile-bulletin-content is the panel that |
1017 | contains everything but the header. |
1018 | |
1019 | The divs appear to be the same as the bulletin pages', |
1020 | so any styling done on those and not specific to only |
1021 | the bulletin pages will apply here as well. |
1022 | I'm unsure if ".profile-column" is required, |
1023 | but just to be safe... |
1024 | */ |
1025 | .profile-column .profile-bulletin {} |
1026 | .profile-column .profile-bulletin h1 |
1027 | { |
1028 | display: none; |
1029 | } |
1030 | .profile-column .profile-bulletin .panel h1 |
1031 | { |
1032 | display: block; |
1033 | } |
1034 | .profile-column .profile-bulletin-content {} |
1035 | |
1036 | /************************************************ |
1037 | .profile-feature |
1038 | ************************************************/ |
1039 | /* |
1040 | The featured character section. |
1041 | Only the images are in a grid. |
1042 | The character itself isn't bounded by anything. |
1043 | The dividing line is a hr. |
1044 | The images are inside [.profile-feature-gallery]. |
1045 | Trivia: the image gallery thumbs don't have rounded corners |
1046 | |
1047 | .profile-feature .th - all thumbnails |
1048 | .profile-feature .profile-feature-gallery .th - only image gallery thumbs |
1049 | |
1050 | .profile-column .th - all thumbs on the profile page |
1051 | ^ may be convenient |
1052 | */ |
1053 | .profile-column .profile-feature {} |
1054 | .profile-column .profile-feature h1, |
1055 | .profile-column .profile-characters h1 |
1056 | { |
1057 | color: #fff; |
1058 | margin-left: -30px; |
1059 | margin-right: -30px; |
1060 | margin-top: -30px; |
1061 | margin-bottom: 30px; |
1062 | padding: 30px 20px 20px 30px; |
1063 | background-color: #111; |
1064 | display: block; |
1065 | font-style: italic; |
1066 | } |
1067 | .profile-column .profile-comments > h1 |
1068 | { |
1069 | color: #fff; |
1070 | padding: 30px 20px 20px 30px; |
1071 | background-color: #111; |
1072 | display: block; |
1073 | font-style: italic; |
1074 | margin-bottom: 0px; |
1075 | } |
1076 | |
1077 | .profile-feature .profile-feature-content.panel li |
1078 | { |
1079 | float: none; |
1080 | display: inline-block; |
1081 | width: 16%; |
1082 | } |
1083 | |
1084 | /************************************************ |
1085 | .profile-characters |
1086 | ************************************************/ |
1087 | /* |
1088 | The recent characters section. |
1089 | Much like the above... |
1090 | Character names are .label, |
1091 | usernames are .label.secondary. |
1092 | */ |
1093 | .profile-column .profile-characters {} |
1094 | |
1095 | .profile-column .profile-characters-content, |
1096 | .profile-column .profile-feature-content |
1097 | { |
1098 | background-color: transparent; |
1099 | border: 0px; |
1100 | padding: 0px; |
1101 | margin: 0px; |
1102 | } |
1103 | |
1104 | /************************************************ |
1105 | .profile-comments |
1106 | ************************************************/ |
1107 | /* |
1108 | Not much has to be done here since it's handled |
1109 | in the regular comments styling. |
1110 | The column that holds this floats right and |
1111 | can't be forced to float left or none. |
1112 | Since the columns aren't differentiated it also |
1113 | means that column locations can't be switched. |
1114 | */ |
1115 | .profile-column .profile-comments .comments |
1116 | { |
1117 | border: 0px; |
1118 | } |
1119 | |
1120 | /*************************************************************************** |
1121 | |
1122 | Comments |
1123 | |
1124 | ***************************************************************************/ |
1125 | /* |
1126 | > .comment-create |
1127 | >> .forums-ic-panel |
1128 | > .reveal-modal |
1129 | > .forum-posts |
1130 | >> .forum-posts-sidebar |
1131 | >> .forum-post |
1132 | */ |
1133 | |
1134 | /* |
1135 | Comments container. |
1136 | If the divider hr needs to be modified, do it here (.comments hr) |
1137 | |
1138 | Note that no styling is applied to specific bulletin pages, |
1139 | so nothing will happen on there... |
1140 | */ |
1141 | .comments |
1142 | { |
1143 | border-top: 50px solid #111; |
1144 | } |
1145 | .comments hr |
1146 | { |
1147 | display: none; |
1148 | } |
1149 | |
1150 | .comment |
1151 | { |
1152 | overflow: hidden; |
1153 | } |
1154 | |
1155 | .comments > .comment |
1156 | { |
1157 | margin-bottom: 15px; |
1158 | } |
1159 | |
1160 | .comment .small-11 |
1161 | { |
1162 | width: 100%; |
1163 | } |
1164 | .comment .indent |
1165 | { |
1166 | padding-left: 20px; |
1167 | } |
1168 | |
1169 | .comment-replies |
1170 | { |
1171 | border-left: 0px; |
1172 | } |
1173 | |
1174 | /* |
1175 | The section for making comments. |
1176 | The important part is the IC switch + hidden components. |
1177 | */ |
1178 | .comment-create {} |
1179 | |
1180 | /************************************************ |
1181 | .forums-ic-panel |
1182 | ************************************************/ |
1183 | |
1184 | /* |
1185 | The entire section containing the IC switch. |
1186 | */ |
1187 | .comment-create .forums-ic-panel {} |
1188 | |
1189 | /* |
1190 | It didn't use to be, but now it's of an appropriate width. |
1191 | The switch area can be reached with [.switch], |
1192 | but there's no point since the colour is dependent on |
1193 | [label], which cannot be edited (I think). |
1194 | Things to think of: colour, font. |
1195 | */ |
1196 | .forums-ic-switch |
1197 | { |
1198 | float: left; |
1199 | width: 4em; |
1200 | padding-right: 0px; |
1201 | padding-left: 0px; |
1202 | |
1203 | } |
1204 | .forums-ic-select |
1205 | { |
1206 | float: right; |
1207 | width: auto !important; |
1208 | padding-right: 0px; |
1209 | text-align: right; |
1210 | } |
1211 | .forums-ic-select .button |
1212 | { |
1213 | margin-right: 0px; |
1214 | } |
1215 | |
1216 | .character_display |
1217 | { |
1218 | float: right; |
1219 | clear: both; |
1220 | margin-bottom: 10px; |
1221 | margin-right: 10px; |
1222 | } |
1223 | |
1224 | .select_character, .select_image |
1225 | { |
1226 | float: right; |
1227 | } |
1228 | |
1229 | .select_character |
1230 | { |
1231 | clear: right; |
1232 | } |
1233 | |
1234 | /* |
1235 | The selection area that contains the character |
1236 | and the relevant buttons. |
1237 | */ |
1238 | .comment-create .forums-ic-select {} |
1239 | |
1240 | /* |
1241 | The thing that shows the picture and current |
1242 | selected character. No padding. |
1243 | */ |
1244 | .comment-create .forums-ic-select #character_display {} |
1245 | |
1246 | /* |
1247 | Affects both buttons. |
1248 | */ |
1249 | .comment-create .forums-ic-select .button {} |
1250 | .comment-create .forums-ic-select .button:hover {} |
1251 | |
1252 | /* |
1253 | Affects a specific button only. |
1254 | Can use for playing with alignment/line breaks. |
1255 | */ |
1256 | .comment-create .forums-ic-select #select_character {} |
1257 | .comment-create .forums-ic-select #select_image {} |
1258 | |
1259 | .comment-create .forums-ic-select #select_character:hover {} |
1260 | .comment-create .forums-ic-select #select_image:hover {} |
1261 | |
1262 | /* |
1263 | Can be used to style the textbox. |
1264 | Things to think about: |
1265 | padding, margins, colour, border-radius, box-shadow |
1266 | It's possible to make it entirely borderless/put |
1267 | a background image on it, but note that users can |
1268 | change the size of the textbox on their screen |
1269 | (not that this is a deterrent for doing cute things...) |
1270 | |
1271 | If a background colour is specified (even transparent), |
1272 | it does not darken when the user clicks on it. |
1273 | |
1274 | A fixed-sized textbox will be necessary if alignment's |
1275 | important, since we don't want it to deform too much when |
1276 | the user changes the window size...this is best used |
1277 | only with small textboxes tbh |
1278 | */ |
1279 | .comment-create .form-control {} |
1280 | |
1281 | /* |
1282 | The "Post Comment" button. |
1283 | Ideally all buttons should be styled the same, and |
1284 | all in one place though. |
1285 | */ |
1286 | .comment-create .button {} |
1287 | .comment-create .button:hover {} |
1288 | |
1289 | /************************************************ |
1290 | .reveal-modal |
1291 | ************************************************/ |
1292 | |
1293 | /* |
1294 | These are the things that pop up for selecting characters |
1295 | and images...and also affect the ones that do things |
1296 | like submit images for characters and stuff |
1297 | The latter don't need to be styled completely, |
1298 | but may be worth checking for how readable they are |
1299 | especially when working with a dark background |
1300 | |
1301 | .reveal-modal{} affects all modals; |
1302 | here I'll use their specific ids for comments. |
1303 | */ |
1304 | .select_character_panel, |
1305 | .select_image_panel {} |
1306 | |
1307 | /* title of the modal */ |
1308 | .select_character_panel h4, |
1309 | .select_image_panel h4 {} |
1310 | |
1311 | /* selection area of the modal */ |
1312 | .select_character_panel .panel, |
1313 | .select_image_panel .panel {} |
1314 | |
1315 | /* more specific versions */ |
1316 | .select_character_panel .character-select-panel {} |
1317 | .select_image_panel .image-select-panel {} |
1318 | |
1319 | /* character selection */ |
1320 | .select_character_panel .character-select-row {} |
1321 | .select_character_panel .character-select-row:hover {} |
1322 | |
1323 | /* image selection */ |
1324 | .select_image_panel .image-select-cell {} |
1325 | .select_image_panel .image-select-cell:hover {} |
1326 | |
1327 | /* .button doesn't work, so use these */ |
1328 | .select_character_panel .character-select-button {} |
1329 | .select_image_panel .image-select-button {} |
1330 | |
1331 | .select_character_panel .character-select-button:hover {} |
1332 | .select_image_panel .image-select-button:hover {} |
1333 | |
1334 | /************************************************ |
1335 | .forum-posts |
1336 | ************************************************/ |
1337 | |
1338 | /* |
1339 | A container that holds each individual comment. |
1340 | Adjust the padding here, add a line to |
1341 | differentiate individual comments... |
1342 | */ |
1343 | .forum-posts |
1344 | { |
1345 | background-color: #111; |
1346 | margin-bottom: 10px; |
1347 | } |
1348 | |
1349 | /* |
1350 | Holds the user's avatar. Can be used to crop |
1351 | the image by way of overflow: hidden;. |
1352 | */ |
1353 | .forum-posts .forum-posts-sidebar img |
1354 | { |
1355 | border: 5px solid #fff; |
1356 | background-color: #fff; |
1357 | margin-left: auto; |
1358 | margin-right; auto; |
1359 | } |
1360 | |
1361 | .forum-posts .forum-posts-sidebar |
1362 | { |
1363 | padding-left: 10px; |
1364 | padding-right: 10px; |
1365 | padding-top: 10px; |
1366 | } |
1367 | |
1368 | /* Holds the main content of the post. */ |
1369 | .forum-posts .forum-post |
1370 | { |
1371 | background-color: #fff; |
1372 | padding: 10px; |
1373 | } |
1374 | |
1375 | /* |
1376 | Notes who (and which character if applicable) posted |
1377 | the comment, and when. |
1378 | The date can be styled with abbr. |
1379 | */ |
1380 | .forum-post-caption |
1381 | { |
1382 | width: 50%; |
1383 | font-size: 0px; |
1384 | } |
1385 | .forum-post-caption a |
1386 | { |
1387 | font-size: 10px; |
1388 | font-family: georgia; |
1389 | } |
1390 | .forum-post-caption .display-user a |
1391 | { |
1392 | display: block; |
1393 | text-transform: lowercase; |
1394 | font-size: 30px; |
1395 | font-style: italic; |
1396 | line-height: 1.1em; |
1397 | } |
1398 | .forum-post-caption .display-user a .fi-star, |
1399 | .forum-post-caption .display-user a .fi-torso, |
1400 | .forum-post-caption .display-user a .fi-crown |
1401 | { |
1402 | color: #008CBA; |
1403 | } |
1404 | .forum-post-caption .display-user a:hover, |
1405 | .forum-post-caption .display-user a:hover .fi-star, |
1406 | .forum-post-caption .display-user a:hover .fi-torso, |
1407 | .forum-post-caption .display-user a:hover .fi-crown |
1408 | { |
1409 | color: #1CC7FF; |
1410 | } |
1411 | .forum-post-caption .datetime |
1412 | { |
1413 | font-size: 10px; |
1414 | border-bottom: 0px; |
1415 | color: #777; |
1416 | } |
1417 | .forum-post-caption .fi-link |
1418 | { |
1419 | margin-right: 5px; |
1420 | } |
1421 | |
1422 | /* |
1423 | For styling the Edit/Delete buttons. |
1424 | [.label] gets both of them, while [.label.alert] |
1425 | only gets the delete button. |
1426 | */ |
1427 | .forum-posts .forum-post .label {} |
1428 | .forum-posts .forum-post .label.alert {} |
1429 | |
1430 | .forum-posts .forum-post .label:hover {} |
1431 | .forum-posts .forum-post .label.alert:hover {} |
1432 | |
1433 | /* |
1434 | Main text content. |
1435 | If there's no universal styling for .panel, |
1436 | the background/border etc. can be changed here. |
1437 | */ |
1438 | .forum-post-content |
1439 | { |
1440 | margin-top: 2px; |
1441 | background-color: transparent; |
1442 | border-width: 1px 0px 0px 0px; |
1443 | border-top: 1px dotted #777; |
1444 | margin-top: 10px; |
1445 | } |
1446 | |
1447 | .forum-post .label, |
1448 | .forum-post .label.alert |
1449 | { |
1450 | margin-top: -21px; |
1451 | } |
1452 | |
1453 | /*************************************************************************** |
1454 | |
1455 | Bulletins |
1456 | |
1457 | ***************************************************************************/ |
1458 | |
1459 | /* The container for the bulletins page */ |
1460 | .bulletins-index {} |
1461 | |
1462 | /************************************************ |
1463 | .bulletins-post |
1464 | ************************************************/ |
1465 | |
1466 | /* |
1467 | The div for each individual post on the |
1468 | bulletins page. |
1469 | It's also a panel so any [.panel] styling |
1470 | will apply to it. |
1471 | |
1472 | I'm leaving out [.bulletins-index] so that the |
1473 | styling will apply to both the main profile page's |
1474 | latest bulletin as well. If that's not the |
1475 | desired effect, then add it in and throw in a |
1476 | [.profile-content] version for the front page. |
1477 | */ |
1478 | .profile-bulletin-content, |
1479 | .bulletins-post |
1480 | { |
1481 | border: 0px; |
1482 | } |
1483 | |
1484 | /************************************************ |
1485 | .bulletin-header |
1486 | ************************************************/ |
1487 | |
1488 | /* |
1489 | Giving this section its own comment header because |
1490 | it consists of a fair bit of stuff. |
1491 | |
1492 | The header consists of everything that is not in |
1493 | the content of the post. |
1494 | Note that the padding is a little weird: |
1495 | 0 20 10 20, so padding the top may be a good idea |
1496 | especially on the front page where the title runs off |
1497 | the top of the panel (50 seems |
1498 | like a good amount) |
1499 | */ |
1500 | .bulletin-header |
1501 | { |
1502 | background-color: #111; |
1503 | padding: 30px; |
1504 | font-family: georgia; |
1505 | } |
1506 | .panel .bulletin-header |
1507 | { |
1508 | margin: -30px -30px 0px -30px; |
1509 | |
1510 | } |
1511 | |
1512 | |
1513 | /* |
1514 | Why does the title run off the top of the panel? |
1515 | It's because this div is set to position: absolute; |
1516 | in order to keep it aligned with the bottom of the |
1517 | icon image. (The same {position: absolute; bottom: 0px;} |
1518 | in {position: relative} trick I used for Jay's header bar) |
1519 | However, if the icon image is too small, the text too long |
1520 | and the column too narrow (which occurs only on the front page) |
1521 | it will be pushed upwards and out of the box. |
1522 | |
1523 | Inserting position: relative; here will fix the front |
1524 | page problem, but also make it not align with the bottom |
1525 | of the icon. |
1526 | */ |
1527 | .bulletin-header-content |
1528 | { |
1529 | position: relative; |
1530 | } |
1531 | |
1532 | /* |
1533 | The icon used in the header. |
1534 | */ |
1535 | .forum-thread-avatar |
1536 | { |
1537 | background-color: #fff; |
1538 | border: 5px solid #fff; |
1539 | } |
1540 | |
1541 | /* |
1542 | The bulletin title. |
1543 | */ |
1544 | .panel .bulletin-title, |
1545 | .bulletin .bulletin-title |
1546 | { |
1547 | margin-top: 0px; |
1548 | } |
1549 | .panel .bulletin-title a , |
1550 | .bulletin .bulletin-title a |
1551 | { |
1552 | font-weight: normal; |
1553 | font-size: 30px; |
1554 | font-style: italic; |
1555 | color: #fff; |
1556 | } |
1557 | .panel .bulletin-title a:hover, |
1558 | .bulletin .bulletin-title a:hover |
1559 | { |
1560 | color: #ddd; |
1561 | } |
1562 | |
1563 | /* |
1564 | The part that says who posted it and when. |
1565 | Contains the labels. |
1566 | */ |
1567 | .bulletin-caption |
1568 | { |
1569 | width: 100%; |
1570 | font-size: 0px; |
1571 | } |
1572 | .bulletin-caption a |
1573 | { |
1574 | font-size: 10px; |
1575 | font-family: georgia; |
1576 | } |
1577 | .bulletin-caption .display-user a |
1578 | { |
1579 | display: block; |
1580 | text-transform: lowercase; |
1581 | font-size: 15px; |
1582 | line-height: 1.1em; |
1583 | } |
1584 | .bulletin-caption .display-user a .fi-star, |
1585 | .bulletin-caption .display-user a .fi-torso, |
1586 | .bulletin-caption .display-user a .fi-crown |
1587 | { |
1588 | color: #008CBA; |
1589 | } |
1590 | .bulletin-caption .display-user a:hover, |
1591 | .bulletin-caption .display-user a:hover .fi-star, |
1592 | .bulletin-caption .display-user a:hover .fi-torso, |
1593 | .bulletin-caption .display-user a:hover .fi-crown |
1594 | { |
1595 | color: #1CC7FF; |
1596 | } |
1597 | .bulletin-caption .datetime |
1598 | { |
1599 | font-size: 10px; |
1600 | border-bottom: 0px; |
1601 | color: #777; |
1602 | display: block; |
1603 | margin-bottom: 5px; |
1604 | } |
1605 | |
1606 | /* |
1607 | The labels. |
1608 | .label touches both, |
1609 | .label.alert only touches the "Delete" one. |
1610 | */ |
1611 | .bulletin-header .bulletin-caption .label { margin-right: 5px; } |
1612 | .bulletin-header .bulletin-caption .label.alert {} |
1613 | |
1614 | /************************************************ |
1615 | .bulletin-post |
1616 | ************************************************/ |
1617 | |
1618 | /* |
1619 | Whatever in the post that isn't contained by the header. |
1620 | */ |
1621 | .bulletin-post { padding: 0px; } |
1622 | .bulletins-post .bulletin-post |
1623 | { |
1624 | padding-top: 30px; |
1625 | } |
1626 | |
1627 | /* |
1628 | The bar that contains the comments label and centres it. |
1629 | */ |
1630 | .bulletin-post .text-center |
1631 | { |
1632 | border-top: 1px dotted #777; |
1633 | padding-top: 20px; |
1634 | margin-top: 20px; |
1635 | } |
1636 | |
1637 | /* |
1638 | The comments label. |
1639 | Use [a] to change the text colour. |
1640 | */ |
1641 | .bulletin-post .text-center .label |
1642 | { |
1643 | background-color: transparent; |
1644 | } |
1645 | #content .bulletin-post .text-center .label a |
1646 | { |
1647 | font-family: georgia; |
1648 | font-size: 30px; |
1649 | color: #008CBA; |
1650 | } |
1651 | |
1652 | #content .bulletin-post .text-center .label:hover {} |
1653 | #content .bulletin-post .text-center .label a:hover |
1654 | { |
1655 | color: #1CC7FF; |
1656 | } |
1657 | |
1658 | /*************************************************************************** |
1659 | |
1660 | Characters |
1661 | |
1662 | ***************************************************************************/ |
1663 | |
1664 | /* The container for the characters page */ |
1665 | .profile-characters {} |
1666 | |
1667 | /* |
1668 | The content is split into multiple rows: |
1669 | 1. Folder h1 ("UNSORTED") and folder icons |
1670 | 2. Filters, not including h1 ("FILTERS") |
1671 | 3. Gallery + pagination |
1672 | */ |
1673 | .profile-characters .characters-gallery |
1674 | { |
1675 | border-top: 50px solid #111; |
1676 | } |
1677 | |
1678 | /* |
1679 | The hr dividing the filters and the gallery itself. |
1680 | */ |
1681 | .profile-characters hr |
1682 | { |
1683 | display: none; |
1684 | } |
1685 | |
1686 | /************************************************ |
1687 | .profile-characters-folders |
1688 | ************************************************/ |
1689 | |
1690 | /* |
1691 | Folder row |
1692 | |
1693 | Contains the title. Folder icons are a [.small-block-grid-6]. |
1694 | Padding is applied on [.text-center]/[li]. |
1695 | */ |
1696 | .profile-characters .profile-characters-folders {} |
1697 | |
1698 | /* |
1699 | The little container in the top right that contains the |
1700 | labels. |
1701 | Probably of not much practical use to style, but could |
1702 | probably use for nudging the labels or something... |
1703 | */ |
1704 | .profile-characters .profile-characters-folders .right {} |
1705 | |
1706 | /* |
1707 | Labels on the top right. (View Unsorted/View All) |
1708 | [.right] forces a float: right; so they're stuck there. |
1709 | There's no way to differentiate them. |
1710 | */ |
1711 | .profile-characters .profile-characters-folders .right .label{} |
1712 | .profile-characters .profile-characters-folders .right .label:hover{} |
1713 | |
1714 | /* Back label */ |
1715 | .profile-characters .profile-characters-folders h1 .label{} |
1716 | .profile-characters .profile-characters-folders h1 .label:hover{} |
1717 | |
1718 | /* |
1719 | Folder buttons |
1720 | Tricks: |
1721 | 1. { visibility: hidden; } for [i] to retain |
1722 | text alignment but hide folder icon |
1723 | 2. background-image a custom folder icon |
1724 | (probably not possible to do custom for each one) |
1725 | */ |
1726 | .profile-characters .profile-characters-folders .button {} |
1727 | .profile-characters .profile-characters-folders .button:hover {} |
1728 | |
1729 | /************************************************ |
1730 | .profile-characters-filters |
1731 | ************************************************/ |
1732 | |
1733 | /* |
1734 | The row that contains the filters. |
1735 | |
1736 | Each filter/sort category has a div to itself |
1737 | that contains a .sub-nav. |
1738 | */ |
1739 | .profile-characters .profile-characters-filters {} |
1740 | |
1741 | /* |
1742 | "FILTERS" text. |
1743 | */ |
1744 | .profile-characters .profile-characters-folders h1, |
1745 | .profile-characters .profile-characters-filters h1 |
1746 | { |
1747 | margin-left: -30px; |
1748 | margin-right: -30px; |
1749 | margin-top: -30px; |
1750 | margin-bottom: 30px; |
1751 | padding: 20px 30px 20px 30px; |
1752 | background-color: #111; |
1753 | display: block; |
1754 | font-family: georgia; |
1755 | font-style: italic; |
1756 | font-size: 30px; |
1757 | color: #fff; |
1758 | } |
1759 | |
1760 | /* |
1761 | The tags filter. |
1762 | This is also a [.row]. |
1763 | */ |
1764 | .profile-characters .profile-characters-filters-tags {} |
1765 | |
1766 | /* |
1767 | The ordering filter. |
1768 | This is also a [.row]. |
1769 | */ |
1770 | .profile-characters .profile-characters-filters-orderby {} |
1771 | |
1772 | /* |
1773 | Each [.sub-nav] contains a dt and a bunch of dds... |
1774 | At the moment I haven't figured out a nice way |
1775 | to style them neatly, since nothing contains only the dds. |
1776 | |
1777 | A specific [.sub-nav] can be styled by using the specific |
1778 | div from above: |
1779 | .profile-characters .profile-characters-filters-tags .sub-nav |
1780 | .profile-characters .profile-characters-filters-orderby .sub-nav |
1781 | |
1782 | I imagine it isn't going to be necessary to be that specific though. |
1783 | |
1784 | Ideas: |
1785 | 1. {float: left;} the dt and {float: right;} the dd. |
1786 | 2. {padding-top: 1.5em;} in [.sub-nav], {margin-top: -1.2em} in dt. |
1787 | 3. More interesting: {float: left; clear: both;} in dd, but |
1788 | I haven't found a practical use for this yet |
1789 | (.row can't be resized because it has a min-width |
1790 | of 100%, making it impossible to arrange the tag |
1791 | stacks next to each other) |
1792 | */ |
1793 | .profile-characters .sub-nav |
1794 | { |
1795 | } |
1796 | |
1797 | /* |
1798 | This is the description of the filter. |
1799 | */ |
1800 | .profile-characters .sub-nav dt |
1801 | { |
1802 | color: #777; |
1803 | font-family: georgia; |
1804 | float: left; |
1805 | } |
1806 | |
1807 | /* |
1808 | These are the filter options. |
1809 | [dd] has margins, while [dd a] has padding. |
1810 | The background colour for active dds is in [dd a] |
1811 | rather than [dd]. |
1812 | Basically, make changes to [dd a] rather than [dd] |
1813 | unless the margins need to be changed. |
1814 | |
1815 | Changes made to dd will affect dd.active, unless |
1816 | dd.active is styled. |
1817 | */ |
1818 | .profile-characters .sub-nav dd |
1819 | { |
1820 | float: right; |
1821 | } |
1822 | .profile-characters .sub-nav dd a {} |
1823 | .profile-characters .sub-nav dd a:hover {} |
1824 | |
1825 | .profile-characters .sub-nav dd.active {} |
1826 | .profile-characters .sub-nav dd.active a {} |
1827 | .profile-characters .sub-nav dd.active a:hover {} |
1828 | |
1829 | /* |
1830 | The tag search textbox. |
1831 | Unless !important is added, it'll probably get |
1832 | overwritten (even for border and box-shadow properties). |
1833 | */ |
1834 | .profile-characters .sub-nav .inline-tiny {} |
1835 | |
1836 | /************************************************ |
1837 | .characters-gallery |
1838 | ************************************************/ |
1839 | |
1840 | /* |
1841 | The structure of the gallery is like this: |
1842 | - .characters-gallery |
1843 | > fieldset |
1844 | >> .small-block-grid-6 |
1845 | >>> .thumb-character |
1846 | */ |
1847 | .profile-characters .characters-gallery {} |
1848 | |
1849 | /* |
1850 | Remember that the uneditable fieldset has |
1851 | 20px of padding left and right, and |
1852 | that the grid has -10px margins on the same sides, |
1853 | so to cancel that out this needs -20px on |
1854 | left and right. |
1855 | |
1856 | Incidentally, this won't align with the dts |
1857 | because dt has margins. (10px left and right) |
1858 | */ |
1859 | .profile-characters ul.small-block-grid-6 |
1860 | { |
1861 | margin-left: -20px; |
1862 | margin-right: -20px; |
1863 | } |
1864 | |
1865 | /* |
1866 | Character thumbs. |
1867 | Exactly the same thing as [.thumb]. |
1868 | Contains in this order: |
1869 | [.th] |
1870 | [.thumb-caption] |
1871 | |
1872 | Where [.thumb-caption] contains |
1873 | [.label.primary][.label.secondary][.label.muted][.nowrap] |
1874 | all on the same line, |
1875 | and where [.nowrap] contains all the little count icons in |
1876 | individual [.label.muted]s. |
1877 | */ |
1878 | .profile-characters .thumb-character {} |
1879 | |
1880 | /* |
1881 | These will override the global specifications. |
1882 | Remember that .th is the image box itself and has the border |
1883 | and box-shadow. |
1884 | */ |
1885 | .profile-characters .thumb {} |
1886 | .profile-characters .th {} |
1887 | .profile-characters .th:hover {} |
1888 | |
1889 | /* Everything below the thumbnail */ |
1890 | .profile-characters .thumb-caption {} |
1891 | |
1892 | /* |
1893 | It bothers me when labels are sometimes on the same line |
1894 | and sometimes on different lines, so I'm breaking |
1895 | them into different lines. |
1896 | [div.label] ensures that the counter icons aren't split up; |
1897 | only the major labels are affected (the counter icons are |
1898 | in a span and not a div). |
1899 | */ |
1900 | |
1901 | .profile-characters .thumb-caption div.label { display: block; } |
1902 | |
1903 | /* |
1904 | Meanwhile, force long names with multiple words to break into |
1905 | more than one line. If there are too many counter icons in one line |
1906 | they'll also be split into two. |
1907 | */ |
1908 | .profile-characters .thumb-caption .label { white-space: normal; } |
1909 | |
1910 | /* |
1911 | Name labels. |
1912 | Should be obvious but [.label.primary] is character name, |
1913 | [.label.secondary] is username. |
1914 | */ |
1915 | .profile-characters .thumb-caption .label.primary {} |
1916 | .profile-characters .thumb-caption .label.secondary {} |
1917 | |
1918 | .profile-characters .thumb-caption .label.primary a {} |
1919 | .profile-characters .thumb-caption .label.primary a:hover {} |
1920 | .profile-characters .thumb-caption .label.secondary a {} |
1921 | .profile-characters .thumb-caption .label.secondary a:hover {} |
1922 | |
1923 | /* |
1924 | Small icons. |
1925 | No need to use [i] to change colour of the icon. |
1926 | */ |
1927 | #content .profile-characters .thumb-caption .label.muted |
1928 | { |
1929 | color: #777; |
1930 | } |
1931 | #content .profile-characters .thumb-caption .label.muted .favorited |
1932 | { |
1933 | color: #f7ac29; |
1934 | } |
1935 | |
1936 | /* |
1937 | I feel an inexplicable pointlessness in documenting this |
1938 | but it may have a point eventually |
1939 | |
1940 | The box that contains the pagination at the top and bottom |
1941 | of the gallery... |
1942 | */ |
1943 | .profile-characters .pagination-centered {} |
1944 | |
1945 | /*************************************************************************** |
1946 | |
1947 | Images |
1948 | |
1949 | ***************************************************************************/ |
1950 | |
1951 | /* The container for the gallery page */ |
1952 | .profile-gallery |
1953 | { |
1954 | border-top: 50px solid #111; |
1955 | } |
1956 | |
1957 | /* |
1958 | Thumbnails. |
1959 | Also the same as [.thumb]. |
1960 | Contains only the image + the "Edit" label. |
1961 | */ |
1962 | .profile-gallery .gallery-thumb {} |
1963 | .profile-gallery .gallery-thumb .th {} |
1964 | .profile-gallery .gallery-thumb .th:hover {} |
1965 | |
1966 | /* |
1967 | The labels. |
1968 | */ |
1969 | .profile-gallery .label { white-space: normal; } |
1970 | .profile-gallery .label a {} |
1971 | .profile-gallery .label a:hover {} |
1972 | |
1973 | /* |
1974 | Only the edit label. |
1975 | To push it into the exact corner of the image, |
1976 | remove the bottom margin of .th and the margins |
1977 | for .label.secondary. |
1978 | |
1979 | There strictly isn't a need to style it, but just |
1980 | in case it's hard to see... |
1981 | */ |
1982 | .profile-gallery .label.secondary {} |
1983 | |
1984 | /*************************************************************************** |
1985 | |
1986 | Links |
1987 | |
1988 | ***************************************************************************/ |
1989 | |
1990 | /* |
1991 | The links page. |
1992 | The structure is exactly the same as the character |
1993 | links page minus the character selection bar at the top, |
1994 | so you can copy and paste any code for character links |
1995 | and change [.character-links] to [.profile-links] |
1996 | and vice versa. |
1997 | |
1998 | This is probably one of the harder pages to style because |
1999 | there aren't very many unique ids and changing one thing |
2000 | is likely to break another thing... |
2001 | */ |
2002 | .profile-links {} |
2003 | |
2004 | /************************************************ |
2005 | .character-links-row |
2006 | ************************************************/ |
2007 | |
2008 | /* |
2009 | Each row of links. |
2010 | It contains everything in a single link. |
2011 | */ |
2012 | .profile-links .character-links-row |
2013 | { |
2014 | border-top: 50px solid #111; |
2015 | } |
2016 | |
2017 | /* |
2018 | This one is probably going to be troublesome to style, |
2019 | but it might be useful depending on what you're trying |
2020 | to do... |
2021 | |
2022 | Affects 3 things: |
2023 | 1. A container around the character icons/names/delete link label |
2024 | 2. A container around the links text |
2025 | 3. The links text panels |
2026 | |
2027 | Might be easier to understand visually if you add a |
2028 | margin to separate them. |
2029 | 3 can easily be styled separately. 1 and 2 are harder |
2030 | to distinguish and require a lot of small fixes. |
2031 | */ |
2032 | .profile-links .character-links-row .clearfix {} |
2033 | |
2034 | /* |
2035 | This shows up 4 times in a [.character-links-row]. |
2036 | 1. left side character icon/names |
2037 | 2. right side character icon/names/delete label |
2038 | 3. left side character text (containing the [.panel]) |
2039 | 4. right side character text (containing the [.panel]) |
2040 | |
2041 | Comes with 5px of padding all around. |
2042 | */ |
2043 | .profile-links .character-links-link {} |
2044 | |
2045 | /* |
2046 | Contains the LEFT side icon and names in the row. |
2047 | It's presumably text-right because it's text-alignment right... |
2048 | |
2049 | Side effect: styling this will affect the box containing |
2050 | the edit button in the [.panel] under the text box. |
2051 | Fix with [.profile-links .character-links-link .panel .text-right]. |
2052 | */ |
2053 | .profile-links .character-links-link .text-right {} |
2054 | |
2055 | /* |
2056 | Contains the RIGHT side icon, names and the delete label. |
2057 | Again, it's probably text-left because text-alignment left. |
2058 | |
2059 | No side effect for this one. |
2060 | */ |
2061 | .profile-links .character-links-link .text-left {} |
2062 | |
2063 | /* |
2064 | The character icons. |
2065 | Has a max height of 100px, no min-height. |
2066 | */ |
2067 | .profile-links .character-links-link .icon-100 {} |
2068 | |
2069 | /* |
2070 | Affects all the labels. That is, |
2071 | 1. The delete label |
2072 | 2. The small link icon |
2073 | 3. Character name label |
2074 | 4. Username label |
2075 | |
2076 | This is necessary because you can't affect |
2077 | only the character name labels. Everything else |
2078 | can be specifically modified. |
2079 | */ |
2080 | .profile-links .label {} |
2081 | .profile-links .label:hover {} |
2082 | |
2083 | /* The delete labels alone. */ |
2084 | .profile-links .label.alert {} |
2085 | .profile-links .label.alert:hover {} |
2086 | |
2087 | /* The link icons alone. */ |
2088 | .profile-links .label.muted {} |
2089 | .profile-links .label.muted:hover {} |
2090 | |
2091 | /* |
2092 | The username label alone. |
2093 | Note that changing the text colour here will not work; |
2094 | you need to use [a]. |
2095 | */ |
2096 | .profile-links .label.secondary {} |
2097 | .profile-links .label.secondary a {} |
2098 | |
2099 | .profile-links .label.secondary:hover {} |
2100 | .profile-links .label.secondary a:hover {} |
2101 | |
2102 | /* |
2103 | The panels that contain the text box and edit buttons. |
2104 | */ |
2105 | .profile-links .character-links-link .panel {} |
2106 | |
2107 | /* The textboxes. */ |
2108 | .profile-links .character-links-link .panel .form-control {} |
2109 | |
2110 | /* |
2111 | A row inside the panel that contains the |
2112 | "Notify (username) of change?" text as well as |
2113 | the [.text-right] that contains the button. |
2114 | */ |
2115 | .profile-links .character-links-link .panel .row {} |
2116 | |
2117 | /* The edit button. */ |
2118 | .profile-links .character-links-link .panel button.tiny {} |
2119 | .profile-links .character-links-link .panel button.tiny:hover {} |
2120 | |
2121 | /*************************************************************************** |
2122 | |
2123 | Worlds |
2124 | |
2125 | ***************************************************************************/ |
2126 | |
2127 | /* |
2128 | The container for the world page. |
2129 | */ |
2130 | .profile-groups |
2131 | { |
2132 | border-top: 50px solid #111; |
2133 | } |
2134 | |
2135 | /* |
2136 | This controls the default padding on each thumb. |
2137 | [.text-center.clearboth] refers to only the leftmost one, |
2138 | and could probably be used for making dividing borders... |
2139 | |
2140 | Note though that this won't be a consistent design since |
2141 | not all the pages have .clearboth... |
2142 | */ |
2143 | .profile-groups .text-center {} |
2144 | .profile-groups .text-center.clearboth {} |
2145 | |
2146 | /* |
2147 | These are contained within .text-center inside a small-block-grid-6, |
2148 | which has -10px margins as usual. Each one has some |
2149 | padding on the left and right sides, as a note. |
2150 | This is also reached with the global [.thumb]. |
2151 | |
2152 | The change on b is to make the label split onto the next line. |
2153 | */ |
2154 | .profile-groups .gallery-thumb {} |
2155 | .profile-groups .gallery-thumb b { display: block; } |
2156 | |
2157 | .profile-groups .gallery-thumb .th {} |
2158 | .profile-groups .gallery-thumb .th:hover {} |
2159 | |
2160 | /* |
2161 | The rank label. |
2162 | */ |
2163 | .profile-groups .label {} |
2164 | |
2165 | /* |
2166 | The "Save Worlds" button. |
2167 | Apply background colour directly. |
2168 | */ |
2169 | .profile-groups .button {} |
2170 | .profile-groups .button:hover {} |
2171 | |
2172 | /* |
2173 | Another pointless discovery. |
2174 | There's a div 250 pixels high below the save button... |
2175 | Might be cute for an image, but I also don't know if there |
2176 | are any special conditions for it appearing/not appearing. |
2177 | */ |
2178 | .profile-groups .spacer-250 {} |
2179 | |
2180 | /*************************************************************************** |
2181 | |
2182 | Favourites |
2183 | |
2184 | ***************************************************************************/ |
2185 | |
2186 | /* |
2187 | For some reason, the container for this page is also |
2188 | [.profile-creations] (same as the Designs page). |
2189 | I imagine there isn't going to be any huge difference |
2190 | and anyway there isn't really a way to differentiate the |
2191 | things... |
2192 | */ |
2193 | |
2194 | /*************************************************************************** |
2195 | |
2196 | Designs |
2197 | |
2198 | ***************************************************************************/ |
2199 | |
2200 | /* The container for the designs page */ |
2201 | .profile-creations |
2202 | { |
2203 | border-top: 50px solid #111; |
2204 | } |
2205 | |
2206 | /* |
2207 | Thumbnails. |
2208 | Also the same as [.thumb]. |
2209 | Includes the labels. |
2210 | */ |
2211 | .profile-creations .thumb-character {} |
2212 | |
2213 | .profile-creations .thumb-character .th {} |
2214 | .profile-creations .thumb-character .th:hover {} |
2215 | |
2216 | /* |
2217 | The labels. Again, splitting onto different lines. |
2218 | */ |
2219 | .profile-creations .thumb-character .label { display: block; white-space: normal; } |
2220 | |
2221 | .profile-creations .thumb-character .label.primary {} |
2222 | .profile-creations .thumb-character .label.secondary {} |
2223 | |
2224 | .profile-creations .thumb-character .label.primary a {} |
2225 | .profile-creations .thumb-character .label.primary a:hover {} |
2226 | .profile-creations .thumb-character .label.secondary a {} |
2227 | .profile-creations .thumb-character .label.secondary a:hover {} |
2228 | |
2229 | /*************************************************************************** |
2230 | |
2231 | Art |
2232 | |
2233 | ***************************************************************************/ |
2234 | |
2235 | /* |
2236 | The container here is the same as the one used for the |
2237 | Images page (.profile-gallery). I imagine there's no |
2238 | need to go through this since there's nothing new here... |
2239 | */ |
2240 | |
2241 | /*************************************************************************** |
2242 | |
2243 | Stats |
2244 | |
2245 | ***************************************************************************/ |
2246 | |
2247 | /* |
2248 | Class name is literally the same as the one used for |
2249 | fields on character pages... |
2250 | If you're modifying your profile css for character css, |
2251 | be sure to check this section. |
2252 | */ |
2253 | .character-fields |
2254 | { |
2255 | border-top: 50px solid #111; |
2256 | } |
2257 | |
2258 | /* |
2259 | Each row of the stats. |
2260 | */ |
2261 | .character-fields .character-field-row |
2262 | {} |
2263 | |
2264 | /* |
2265 | The title of the field. |
2266 | Text aligned right, uppercase by default. |
2267 | */ |
2268 | .character-fields .character-field-row .character-field-title {} |
2269 | |
2270 | /* |
2271 | The value of the field. |
2272 | Spacing between the title and the value is done here |
2273 | by way of padding (20px left and right). |
2274 | */ |
2275 | .character-fields .character-field-row .character-field-value {} |
2276 | |
2277 | /* |
2278 | For modifying the appearance of dates specifically on this page. |
2279 | */ |
2280 | .character-fields .character-field-row abbr {} |
2281 | |
2282 | /************************************************ |
2283 | #modal-default |
2284 | ************************************************/ |
2285 | |
2286 | /* |
2287 | The modal that appears when you click on either of the |
2288 | subscribed users/subscriber links. |
2289 | Can also be reached with [.reveal-modal], but this will |
2290 | affect the other modals (namely, the select character/image |
2291 | ones in comments). |
2292 | */ |
2293 | #modal-default {} |
2294 | |
2295 | /* The title of the modal. */ |
2296 | #modal-default h1 {} |
2297 | |
2298 | /* |
2299 | The grid that contains the users in the modal. |
2300 | */ |
2301 | #modal-default .small-block-grid-8 {} |
2302 | |
2303 | /* |
2304 | Each of the li in the grid. 5px padding all round. |
2305 | */ |
2306 | #modal-default .small-block-grid-8 li {} |
2307 | |
2308 | /* |
2309 | Each of the cells (1 per li) in the grid. |
2310 | 10px padding, 5px margins all round so it looks |
2311 | kind of cramped at small sizes... |
2312 | Unfortunately the padding and margins can't be changed. |
2313 | */ |
2314 | #modal-default .small-block-grid-8 .character-select-cell {} |
2315 | #modal-default .small-block-grid-8 .character-select-cell:hover {} |
2316 | |
2317 | /* |
2318 | The username labels. |
2319 | */ |
2320 | #modal-default .small-block-grid-8 .label {} |
2321 | #modal-default .small-block-grid-8 .label:hover {} |