Headliner (CSS: profile)

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