Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /***************************************************************************
- CSS skeleton for TH profile pages
- Contents:
- - General properties
- - Global IDs
- > .button variants
- > .display-user
- > .label variants
- > .panel
- > .th, .thumb
- > pagination
- > grids
- - Containers
- > #container
- > #main
- > #content
- > #footer
- - Header
- - Sidebar
- - Profile page [.profile-content]
- > .profile-column
- >> .profile-bulletin
- >> .profile-feature
- >> .profile-characters
- > .profile-column
- >> .profile-comments
- - Comments
- > .comment-create
- >> .forums-ic-panel
- > .reveal-modal
- > .forum-posts
- >> .forum-posts-sidebar
- >> .forum-post
- - Bulletins [.bulletins-index] and latest bulletins
- > .bulletins-post
- >> .bulletin-header
- >> .bulletin-post
- - Characters [.profile-characters]
- > .profile-characters-folders
- > .profile-characters-filters
- >> .sub-nav
- > .characters-gallery
- >> .thumb-character
- - Images
- > .profile-gallery
- - Links
- > .profile-links
- >> .character-links-row
- - Worlds
- > .profile-groups
- - Favourites
- > .profile-creations
- - Designs
- > .profile-creations
- - Art
- > .profile-gallery
- - Stats
- > .character-fields
- > #modal-default
- ***************************************************************************/
- /***************************************************************************
- General properties
- ***************************************************************************/
- /*
- Both must be overwritten or hover colour will be default blue.
- However, if [.display-user a] is set, that will take priority
- */
- a, a:link, a:visited {}
- a:hover {}
- /*
- All timestamps
- Attempts thus far to remove the dotted
- bottom line have been unsuccessful
- */
- abbr {}
- /*
- padding is asymmetrical by default. (9 20 0 19)
- */
- blockquote
- {
- padding-bottom: 9px;
- }
- /*
- Both the basic headers and the .panel headers need
- to be modified at the same time since it doesn't
- cascade into .panel, so bulletins etc. aren't affected
- Oddly, things such as links do gain the changes...
- */
- h1, .panel h1 { padding-left: 0px; } /* .panel h1 has extra left padding? */
- h2, .panel h2 {}
- h3, .panel h3{}
- h4, .panel h4{}
- h5, .panel h5{}
- h6, .panel h6{}
- /*
- If hr doesn't work, add <p></p> tags
- It seems to work fine for content,
- but not in the sidebar blurb
- default values:
- margin-top: 20px;
- border-top: 1px;
- margin-bottom: 19px;
- */
- hr {}
- /*
- p seems to crop up every now and then, so best to remove any
- padding whatsoever...
- */
- p { padding: 0px; }
- /***************************************************************************
- Global IDs
- ***************************************************************************/
- /************************************************
- .button variants
- - [button] by itself cannot be modified
- - modal buttons are more specific
- ************************************************/
- /*
- .button affected areas:
- - only the "Post Comment" buttons
- */
- .button {}
- .button:hover {}
- /*
- .button.secondary affected areas:
- - Worlds: "Save Worlds"
- - Comments: "Select Character", "Select Image"
- */
- .button.secondary {}
- .button.secondary:hover {}
- /************************************************
- .display-user
- ************************************************/
- /* this affects any usernames */
- .display-user a {}
- .display-user a:hover {}
- /************************************************
- .label variants
- :hover (without using a:hover) is enough
- for changing the hover text colour.
- [a] does not affect label text
- ************************************************/
- /*
- I've found that using .label in specific places will affect
- all labels in that container, but using the generic [.label]
- will affect only certain labels.
- .label affected areas:
- - Profile: "Edit" labels, character name labels
- - Bulletins: "Edit" labels (both main and individual posts)
- - Characters: character name labels
- - Designs: character name labels
- - Images: character name labels
- - Favourites: character name labels
- - Comments: "Edit" labels
- To do hover text colour for character names, use [.label a]
- To do hover text colour for edit labels, use [.label] (same for .alert)
- Or: if the label itself isn't a link, use [.label a].
- */
- .label {}
- .label a {}
- .label:hover {}
- .label a :hover{}
- /*
- .label.primary affected areas:
- - Profile: recent characters character name labels (but not featured)
- - Characters: character name labels
- - Designs: character name labels
- - Favourites: character name labels
- .label is a better choice unless specificity is required.
- */
- .label.primary {}
- .label.primary:hover {}
- /*
- .label.secondary affected areas:
- - Profile: latest bulletin "# Comments" label,
- recent characters username labels
- - Bulletins: "# Comments" label (both main and individual posts)
- - Characters: username labels
- - Worlds: member rank label
- - Designs: username labels
- - Images: "Edit" labels
- - Favourites: username labels
- */
- .label.secondary {}
- .label.secondary:hover {}
- /*
- .label.alert affected areas:
- - Profile: all the labels that say "Delete"
- - Bulletins: "Delete" labels
- - Comments: "Delete" labels
- To do hover text colour, don't use [a]
- */
- .label.alert {}
- .label.alert:hover {}
- /*
- only appears on characters page;
- one each for each counter icon + number
- */
- .label.muted {}
- /************************************************
- .panel
- ************************************************/
- /*
- .panel affected areas:
- - Profile: latest bulletin, featured character, recent characters
- - Bulletins: bulletin backgrounds
- - Comments: comments (comment boxes)
- - Modals: character selection (scrolling area),
- image selection (scrolling area)
- */
- .panel {}
- /************************************************
- .th, .thumb
- ************************************************/
- /*
- .th affected areas:
- - all character/world thumbnail image boxes
- Use this to modify box-shadow and the fat white border,
- as well as constrain the image's size
- */
- .th {}
- .th:hover {}
- /*
- .thumb affected areas:
- - the entire section enclosing a character/world
- - 3 versions: padded (no padding-top), margin-bottom, no padding/margin
- - Profile: featured (images only (margin-bottom); excludes character),
- recent characters
- - Characters: characters
- - Worlds: worlds (no padding)
- - Images: images (margin-bottom)
- - everything else is padded
- */
- .thumb {}
- /************************************************
- pagination
- ************************************************/
- /* non-active page numbers */
- ul.pagination li a {}
- ul.pagination li a:hover {}
- /* current page number, modify background colour here */
- ul.pagination li.current a {}
- ul.pagination li.current a:hover {}
- /* note that these are different */
- ul.pagination li {}
- ul.pagination li:hover {}
- ul.pagination li.current {}
- ul.pagination li.current:hover {}
- /************************************************
- grids
- ************************************************/
- /*
- ul.small-block-grid-6
- Used for all the pages.
- 6 to a row, width of each li is then 16.6%.
- With fixed margins ~16.3% seems to work fine.
- For some reason, has -10px left and right margins.
- (To push it past #content's padding all the way to the edges?)
- On the Characters page, it's contained within
- an uneditable fieldset that has 20px margins,
- so it's padded an extra 10px from #content's edges by default.
- To overcome this and reach #content, margins should be -20px
- instead of the forced 0px here.
- Generally, styling the grids means finishing
- Worlds/Designs/Images/Favourites all at once, or at least
- very quickly.
- */
- ul.small-block-grid-6
- {
- margin-left: 0px;
- margin-right: 0px;
- }
- /*
- ul.small-block-grid-6 li
- In the galleries, is a better option than .thumb and
- has more power than .thumb does.
- It's a better option because the padding is consistent.
- However, it doesn't affect the profile page.
- Profile recent characters uses small-block-grid-3
- Profile featured character uses large-block-grid-6 (images only)
- remember that Characters page has the extra
- 10px of padding all round though
- */
- ul.small-block-grid-6 li
- {
- padding-top: 10px;
- }
- /***************************************************************************
- Containers
- ***************************************************************************/
- /*
- Contains everything on the page.
- Shrinking this causes stuff to overflow.
- Nice for backgrounds but don't touch the width/height.
- */
- #container {}
- /*
- Contains everything except the header and footer.
- (i.e. it contains #sidebar and #content)
- Can squash for a narrower content area.
- */
- #main {}
- /*
- Contains the main content of the page.
- Note that the padding is compounded with the container
- that represents the current page's content.
- Doing things like changing the text colour here will affect
- text in created divs, but not text in panels and etc.
- It also affects world names on the Worlds page.
- Better to do text colour changes in specific places.
- */
- #content {}
- /*
- Generally not useful for layouts unless something to meet
- the lower part of the page is required.
- It contains the profiler which I'll also turn off here.
- */
- #footer { display: none; }
- .profiler { display: none; }
- /***************************************************************************
- Header
- ***************************************************************************/
- /*
- I have no idea what to do with this sometimes;
- it contains important functions so getting rid of it
- isn't a good idea but it's also too thick for layouts sometimes.
- */
- #header {}
- /*
- All header buttons including the dropdown
- If transparent, background colour will show through.
- However, dropdown li will also become transparent
- and will need to be set with [.dropdown li]
- Both [#header a] and [#header li] need to be transparent.
- Background colour can then be set on #header.
- */
- #header a, #header li { /*background-color: transparent;*/ }
- #header a:hover {}
- /* Dropdown links */
- #header .dropdown li {}
- /* Vertical divider; border-right */
- #header li.divider { /*border-right: 1px solid #000;*/ }
- /* top-left homepage link */
- #header .title-area {}
- /* user icon */
- #header img {}
- /*
- To change the size of the bar visually
- (padding and font sizes not included)
- all these need to be changed
- Even if #header a is transparent it needs
- to be resized otherwise dropdowns will be
- impossible to use
- Issue: I don't know how to deal with the dropdown arrow
- */
- /*#header, #header a, #header li, #header .title-area
- {
- height: 30px;
- }*/
- /*
- Contains all the header bar stuff.
- With some resizing of #header it's possible to
- set up a header image while preserving the header bar.
- #header's background goes under this.
- I haven't yet figured out how to adjust the padding
- of the dropdown buttons.
- */
- .top-bar-section {}
- /*
- Only the left side of the header bar items,
- excluding the top left homepage link.
- Floats left.
- */
- .top-bar-section .left {}
- /*
- Only the right side of the header bar items.
- Floats right.
- At the moment there's only one item so
- #header .user-link does the same thing.
- */
- .top-bar-section .right {}
- /***************************************************************************
- Sidebar
- ***************************************************************************/
- /*
- The whole sidebar.
- All the li are transparent, so changing the
- background colour affects everything except
- for the box that says "User" (.header).
- Changing the text colour affects blurb text.
- Padding pads all the content.
- Default width is 16.6667%.
- */
- #sidebar {}
- /*
- Changing the colour affects all the link text in the sidebar.
- Note that [.side-nav a] doesn't do the same.
- Neither does [.side-nav li a].
- */
- #sidebar a {}
- #sidebar a:hover {}
- /*
- Changing the background colour affects only the .header,
- user link, blurb, and buttons.
- Inserting padding here will also affect the .dividers so
- be careful...
- Changing colour on hover here will affect every li in the
- sidebar, including the blurb (which is probably not the
- intended effect). So, the hover is put in [a] rather than [li].
- */
- #sidebar li {}
- /*
- This contains only the part of the sidebar that has any content
- (as opposed to #sidebar which stretches the length of the page)
- It has padding at the top and bottom. #sidebar has no padding.
- */
- .side-nav {}
- /*
- The box that says "User".
- */
- #sidebar .header {}
- /*
- The username + avatar box.
- I recall having weird problems when doing up Jay's CSS,
- but at the moment there doesn't seem to be any problem setting
- a background image for this.
- */
- #sidebar .display-user a {}
- /*
- The blurb.
- <hr> seems to require being between <p></p> tags.
- Note! Links in the blurb will appear like the other
- buttons in the sidebar, i.e. they will stretch the
- length of the sidebar and have padding. If this is not
- what you want, add this (will affect ALL links in the blurb):
- #sidebar .blurb a {display: inline; padding: 0px;}
- */
- #sidebar .blurb {}
- /*
- The dividers.
- 5px of padding on top and below, border is border-top.
- */
- #sidebar .divider {}
- /*
- It's not possible to touch any of the other buttons individually.
- However it's possible to mess with the little icons...
- */
- #sidebar i {}
- /*
- The currently active page.
- Use [.active a] to change the text colour.
- */
- #sidebar .active {}
- /***************************************************************************
- Profile page
- ***************************************************************************/
- /*
- .profile-content
- Main editable content of the profile.
- Separate from the columns below.
- I usually throw in an extra div inside, just in case
- I want to make more to abuse later.
- By default it's padded 10 10 10 10, but to maintain
- consistency I usually turn off the padding and add it
- in #content instead.
- */
- .profile-content { padding: 0px; }
- /************************************************
- .profile-column
- ************************************************/
- /*
- The two columns below the editable profile content.
- Not a part of [.profile-content].
- There doesn't seem to be a way to differentiate between the two.
- Merging them into a straight line is simple: width: 100%;
- It may be a good idea to apply thumbnail/label
- styling in here.
- */
- .profile-column {}
- /*
- .profile-column headings
- This overwrites the default h1.
- However, it also overwrites the h1 in the panel, so
- overwrite it again.
- */
- .profile-column h1 {}
- .profile-column .panel h1 {}
- /*
- .profile-column .panel
- Simply, all the panels in the columns.
- */
- .profile-column .panel {}
- /************************************************
- .profile-bulletin
- ************************************************/
- /*
- .profile-column .profile-bulletin
- The bulletin section, which is in the same column as
- featured and recent characters. Includes the header.
- .profile-bulletin-content is the panel that
- contains everything but the header.
- The divs appear to be the same as the bulletin pages',
- so any styling done on those and not specific to only
- the bulletin pages will apply here as well.
- I'm unsure if ".profile-column" is required,
- but just to be safe...
- */
- .profile-column .profile-bulletin {}
- .profile-column .profile-bulletin-content {}
- /************************************************
- .profile-feature
- ************************************************/
- /*
- The featured character section.
- Only the images are in a grid.
- The character itself isn't bounded by anything.
- The dividing line is a hr.
- The images are inside [.profile-feature-gallery].
- Trivia: the image gallery thumbs don't have rounded corners
- .profile-feature .th - all thumbnails
- .profile-feature .profile-feature-gallery .th - only image gallery thumbs
- .profile-column .th - all thumbs on the profile page
- ^ may be convenient
- */
- .profile-column .profile-feature {}
- /************************************************
- .profile-characters
- ************************************************/
- /*
- The recent characters section.
- Much like the above...
- Character names are .label,
- usernames are .label.secondary.
- */
- .profile-column .profile-characters {}
- /************************************************
- .profile-comments
- ************************************************/
- /*
- Not much has to be done here since it's handled
- in the regular comments styling.
- The column that holds this floats right and
- can't be forced to float left or none.
- Since the columns aren't differentiated it also
- means that column locations can't be switched.
- */
- .profile-column .profile-comments {}
- /***************************************************************************
- Comments
- ***************************************************************************/
- /*
- > .comment-create
- >> .forums-ic-panel
- > .reveal-modal
- > .forum-posts
- >> .forum-posts-sidebar
- >> .forum-post
- */
- /*
- Comments container.
- If the divider hr needs to be modified, do it here (.comments hr)
- Note that no styling is applied to specific bulletin pages,
- so nothing will happen on there...
- */
- .comments {}
- /*
- The section for making comments.
- The important part is the IC switch + hidden components.
- */
- .comment-create {}
- /************************************************
- .forums-ic-panel
- ************************************************/
- /*
- The entire section containing the IC switch.
- */
- .comment-create .forums-ic-panel {}
- /*
- It didn't use to be, but now it's of an appropriate width.
- The switch area can be reached with [.switch],
- but there's no point since the colour is dependent on
- [label], which cannot be edited (I think).
- Things to think of: colour, font.
- */
- .comment-create .forums-ic-switch {}
- /*
- The selection area that contains the character
- and the relevant buttons.
- */
- .comment-create .forums-ic-select {}
- /*
- The thing that shows the picture and current
- selected character. No padding.
- */
- .comment-create .forums-ic-select #character_display {}
- /*
- Affects both buttons.
- */
- .comment-create .forums-ic-select .button {}
- .comment-create .forums-ic-select .button:hover {}
- /*
- Affects a specific button only.
- Can use for playing with alignment/line breaks.
- */
- .comment-create .forums-ic-select #select_character {}
- .comment-create .forums-ic-select #select_image {}
- .comment-create .forums-ic-select #select_character:hover {}
- .comment-create .forums-ic-select #select_image:hover {}
- /*
- Can be used to style the textbox.
- Things to think about:
- padding, margins, colour, border-radius, box-shadow
- It's possible to make it entirely borderless/put
- a background image on it, but note that users can
- change the size of the textbox on their screen
- (not that this is a deterrent for doing cute things...)
- If a background colour is specified (even transparent),
- it does not darken when the user clicks on it.
- A fixed-sized textbox will be necessary if alignment's
- important, since we don't want it to deform too much when
- the user changes the window size...this is best used
- only with small textboxes tbh
- */
- .comment-create .form-control {}
- /*
- The "Post Comment" button.
- Ideally all buttons should be styled the same, and
- all in one place though.
- */
- .comment-create .button {}
- .comment-create .button:hover {}
- /************************************************
- .reveal-modal
- ************************************************/
- /*
- These are the things that pop up for selecting characters
- and images...and also affect the ones that do things
- like submit images for characters and stuff
- The latter don't need to be styled completely,
- but may be worth checking for how readable they are
- especially when working with a dark background
- .reveal-modal{} affects all modals;
- here I'll use their specific ids for comments.
- */
- #select_character_panel,
- #select_image_panel {}
- /* title of the modal */
- #select_character_panel h4,
- #select_image_panel h4 {}
- /* selection area of the modal */
- #select_character_panel .panel,
- #select_image_panel .panel {}
- /* more specific versions */
- #select_character_panel .character-select-panel {}
- #select_image_panel .image-select-panel {}
- /* character selection */
- #select_character_panel .character-select-row {}
- #select_character_panel.character-select-row:hover {}
- /* image selection */
- #select_image_panel .image-select-cell {}
- #select_image_panel .image-select-cell:hover {}
- /* .button doesn't work, so use these */
- #select_character_panel .character-select-button {}
- #select_image_panel .image-select-button {}
- #select_character_panel .character-select-button:hover {}
- #select_image_panel .image-select-button:hover {}
- /************************************************
- .forum-posts
- ************************************************/
- /*
- A container that holds each individual comment.
- Adjust the padding here, add a line to
- differentiate individual comments...
- */
- .forum-posts {}
- /*
- Holds the user's avatar. Can be used to crop
- the image by way of overflow: hidden;.
- */
- .forum-posts .forum-posts-sidebar {}
- /* Holds the main content of the post. */
- .forum-posts .forum-post {}
- /*
- Notes who (and which character if applicable) posted
- the comment, and when.
- The date can be styled with abbr.
- */
- .forum-posts .forum-post .forum-post-caption {}
- /*
- For styling the Edit/Delete buttons.
- [.label] gets both of them, while [.label.alert]
- only gets the delete button.
- */
- .forum-posts .forum-post .label {}
- .forum-posts .forum-post .label.alert {}
- .forum-posts .forum-post .label:hover {}
- .forum-posts .forum-post .label.alert:hover {}
- /*
- Main text content.
- If there's no universal styling for .panel,
- the background/border etc. can be changed here.
- */
- .forum-posts .forum-post-content {}
- /***************************************************************************
- Bulletins
- ***************************************************************************/
- /* The container for the bulletins page */
- .bulletins-index {}
- /************************************************
- .bulletins-post
- ************************************************/
- /*
- The div for each individual post on the
- bulletins page.
- It's also a panel so any [.panel] styling
- will apply to it.
- I'm leaving out [.bulletins-index] so that the
- styling will apply to both the main profile page's
- latest bulletin as well. If that's not the
- desired effect, then add it in and throw in a
- [.profile-content] version for the front page.
- */
- .bulletins-post {}
- /************************************************
- .bulletin-header
- ************************************************/
- /*
- Giving this section its own comment header because
- it consists of a fair bit of stuff.
- The header consists of everything that is not in
- the content of the post.
- Note that the padding is a little weird:
- 0 20 10 20, so padding the top may be a good idea
- especially on the front page where the title runs off
- the top of the panel (50 seems
- like a good amount)
- */
- .bulletin-header {}
- /*
- Why does the title run off the top of the panel?
- It's because this div is set to position: absolute;
- in order to keep it aligned with the bottom of the
- icon image. (The same {position: absolute; bottom: 0px;}
- in {position: relative} trick I used for Jay's header bar)
- However, if the icon image is too small, the text too long
- and the column too narrow (which occurs only on the front page)
- it will be pushed upwards and out of the box.
- Inserting position: relative; here will fix the front
- page problem, but also make it not align with the bottom
- of the icon.
- */
- .bulletin-header .bulletin-header-content {}
- /*
- The icon used in the header.
- */
- .bulletin-header .forum-thread-avatar {}
- /*
- The bulletin title.
- */
- .bulletin-header .bulletin-title {}
- .bulletin-header .bulletin-title:hover {}
- /*
- The part that says who posted it and when.
- Contains the labels.
- */
- .bulletin-header .bulletin-caption {}
- /*
- The labels.
- .label touches both,
- .label.alert only touches the "Delete" one.
- */
- .bulletin-header .bulletin-caption .label {}
- .bulletin-header .bulletin-caption .label.alert {}
- /************************************************
- .bulletin-post
- ************************************************/
- /*
- Whatever in the post that isn't contained by the header.
- */
- .bulletin-post {}
- /*
- The bar that contains the comments label and centres it.
- */
- .bulletin-post .text-center {}
- /*
- The comments label.
- Use [a] to change the text colour.
- */
- .bulletin-post .text-center .label {}
- .bulletin-post .text-center .label a {}
- .bulletin-post .text-center .label:hover {}
- .bulletin-post .text-center .label a:hover {}
- /***************************************************************************
- Characters
- ***************************************************************************/
- /* The container for the characters page */
- .profile-characters {}
- /*
- The content is split into multiple rows:
- 1. Folder h1 ("UNSORTED") and folder icons
- 2. Filters, not including h1 ("FILTERS")
- 3. Gallery + pagination
- */
- .profile-characters .row {}
- /*
- The hr dividing the filters and the gallery itself.
- */
- .profile-characters hr {}
- /************************************************
- .profile-characters-folders
- ************************************************/
- /*
- Folder row
- Contains the title. Folder icons are a [.small-block-grid-6].
- Padding is applied on [.text-center]/[li].
- */
- .profile-characters .profile-characters-folders {}
- /*
- The little container in the top right that contains the
- labels.
- Probably of not much practical use to style, but could
- probably use for nudging the labels or something...
- */
- .profile-characters .profile-characters-folders .right {}
- /*
- Labels on the top right. (View Unsorted/View All)
- [.right] forces a float: right; so they're stuck there.
- There's no way to differentiate them.
- */
- .profile-characters .profile-characters-folders .right .label{}
- .profile-characters .profile-characters-folders .right .label:hover{}
- /* Back label */
- .profile-characters .profile-characters-folders h1 .label{}
- .profile-characters .profile-characters-folders h1 .label:hover{}
- /*
- Folder buttons
- Tricks:
- 1. { visibility: hidden; } for [i] to retain
- text alignment but hide folder icon
- 2. background-image a custom folder icon
- (probably not possible to do custom for each one)
- */
- .profile-characters .profile-characters-folders .button {}
- .profile-characters .profile-characters-folders .button:hover {}
- /************************************************
- .profile-characters-filters
- ************************************************/
- /*
- The row that contains the filters.
- Each filter/sort category has a div to itself
- that contains a .sub-nav.
- */
- .profile-characters .profile-characters-filters {}
- /*
- "FILTERS" text.
- */
- .profile-characters .profile-characters-filters h1 {}
- /*
- The tags filter.
- This is also a [.row].
- */
- .profile-characters .profile-characters-filters-tags {}
- /*
- The ordering filter.
- This is also a [.row].
- */
- .profile-characters .profile-characters-filters-orderby {}
- /*
- Each [.sub-nav] contains a dt and a bunch of dds...
- At the moment I haven't figured out a nice way
- to style them neatly, since nothing contains only the dds.
- A specific [.sub-nav] can be styled by using the specific
- div from above:
- .profile-characters .profile-characters-filters-tags .sub-nav
- .profile-characters .profile-characters-filters-orderby .sub-nav
- I imagine it isn't going to be necessary to be that specific though.
- Ideas:
- 1. {float: left;} the dt and {float: right;} the dd.
- 2. {padding-top: 1.5em;} in [.sub-nav], {margin-top: -1.2em} in dt.
- 3. More interesting: {float: left; clear: both;} in dd, but
- I haven't found a practical use for this yet
- (.row can't be resized because it has a min-width
- of 100%, making it impossible to arrange the tag
- stacks next to each other)
- */
- .profile-characters .sub-nav {}
- /*
- This is the description of the filter.
- */
- .profile-characters .sub-nav dt {}
- /*
- These are the filter options.
- [dd] has margins, while [dd a] has padding.
- The background colour for active dds is in [dd a]
- rather than [dd].
- Basically, make changes to [dd a] rather than [dd]
- unless the margins need to be changed.
- Changes made to dd will affect dd.active, unless
- dd.active is styled.
- */
- .profile-characters .sub-nav dd {}
- .profile-characters .sub-nav dd a {}
- .profile-characters .sub-nav dd a:hover {}
- .profile-characters .sub-nav dd.active {}
- .profile-characters .sub-nav dd.active a {}
- .profile-characters .sub-nav dd.active a:hover {}
- /*
- The tag search textbox.
- Unless !important is added, it'll probably get
- overwritten (even for border and box-shadow properties).
- */
- .profile-characters .sub-nav .inline-tiny {}
- /************************************************
- .characters-gallery
- ************************************************/
- /*
- The structure of the gallery is like this:
- - .characters-gallery
- > fieldset
- >> .small-block-grid-6
- >>> .thumb-character
- */
- .profile-characters .characters-gallery {}
- /*
- Remember that the uneditable fieldset has
- 20px of padding left and right, and
- that the grid has -10px margins on the same sides,
- so to cancel that out this needs -20px on
- left and right.
- Incidentally, this won't align with the dts
- because dt has margins. (10px left and right)
- */
- .profile-characters ul.small-block-grid-6
- {
- margin-left: -20px;
- margin-right: -20px;
- }
- /*
- Character thumbs.
- Exactly the same thing as [.thumb].
- Contains in this order:
- [.th]
- [.thumb-caption]
- Where [.thumb-caption] contains
- [.label.primary][.label.secondary][.label.muted][.nowrap]
- all on the same line,
- and where [.nowrap] contains all the little count icons in
- individual [.label.muted]s.
- */
- .profile-characters .thumb-character {}
- /*
- These will override the global specifications.
- Remember that .th is the image box itself and has the border
- and box-shadow.
- */
- .profile-characters .thumb {}
- .profile-characters .th {}
- .profile-characters .th:hover {}
- /* Everything below the thumbnail */
- .profile-characters .thumb-caption {}
- /*
- It bothers me when labels are sometimes on the same line
- and sometimes on different lines, so I'm breaking
- them into different lines.
- [div.label] ensures that the counter icons aren't split up;
- only the major labels are affected (the counter icons are
- in a span and not a div).
- */
- .profile-characters .thumb-caption div.label { display: block; }
- /*
- Meanwhile, force long names with multiple words to break into
- more than one line. If there are too many counter icons in one line
- they'll also be split into two.
- */
- .profile-characters .thumb-caption .label { white-space: normal; }
- /*
- Name labels.
- Should be obvious but [.label.primary] is character name,
- [.label.secondary] is username.
- */
- .profile-characters .thumb-caption .label.primary {}
- .profile-characters .thumb-caption .label.secondary {}
- .profile-characters .thumb-caption .label.primary a {}
- .profile-characters .thumb-caption .label.primary a:hover {}
- .profile-characters .thumb-caption .label.secondary a {}
- .profile-characters .thumb-caption .label.secondary a:hover {}
- /*
- Small icons.
- No need to use [i] to change colour of the icon.
- */
- .profile-characters .thumb-caption .label.muted {}
- .profile-characters .thumb-caption .label.muted .favorited{}
- /*
- I feel an inexplicable pointlessness in documenting this
- but it may have a point eventually
- The box that contains the pagination at the top and bottom
- of the gallery...
- */
- .profile-characters .pagination-centered {}
- /***************************************************************************
- Images
- ***************************************************************************/
- /* The container for the gallery page */
- .profile-gallery {}
- /*
- Thumbnails.
- Also the same as [.thumb].
- Contains only the image + the "Edit" label.
- */
- .profile-gallery .gallery-thumb {}
- .profile-gallery .gallery-thumb .th {}
- .profile-gallery .gallery-thumb .th:hover {}
- /*
- The labels.
- */
- .profile-gallery .label { white-space: normal; }
- .profile-gallery .label a {}
- .profile-gallery .label a:hover {}
- /*
- Only the edit label.
- To push it into the exact corner of the image,
- remove the bottom margin of .th and the margins
- for .label.secondary.
- There strictly isn't a need to style it, but just
- in case it's hard to see...
- */
- .profile-gallery .label.secondary {}
- /***************************************************************************
- Links
- ***************************************************************************/
- /*
- The links page.
- The structure is exactly the same as the character
- links page minus the character selection bar at the top,
- so you can copy and paste any code for character links
- and change [.character-links] to [.profile-links]
- and vice versa.
- This is probably one of the harder pages to style because
- there aren't very many unique ids and changing one thing
- is likely to break another thing...
- */
- .profile-links {}
- /************************************************
- .character-links-row
- ************************************************/
- /*
- Each row of links.
- It contains everything in a single link.
- */
- .profile-links .character-links-row {}
- /*
- This one is probably going to be troublesome to style,
- but it might be useful depending on what you're trying
- to do...
- Affects 3 things:
- 1. A container around the character icons/names/delete link label
- 2. A container around the links text
- 3. The links text panels
- Might be easier to understand visually if you add a
- margin to separate them.
- 3 can easily be styled separately. 1 and 2 are harder
- to distinguish and require a lot of small fixes.
- */
- .profile-links .character-links-row .clearfix {}
- /*
- This shows up 4 times in a [.character-links-row].
- 1. left side character icon/names
- 2. right side character icon/names/delete label
- 3. left side character text (containing the [.panel])
- 4. right side character text (containing the [.panel])
- Comes with 5px of padding all around.
- */
- .profile-links .character-links-link {}
- /*
- Contains the LEFT side icon and names in the row.
- It's presumably text-right because it's text-alignment right...
- Side effect: styling this will affect the box containing
- the edit button in the [.panel] under the text box.
- Fix with [.profile-links .character-links-link .panel .text-right].
- */
- .profile-links .character-links-link .text-right {}
- /*
- Contains the RIGHT side icon, names and the delete label.
- Again, it's probably text-left because text-alignment left.
- No side effect for this one.
- */
- .profile-links .character-links-link .text-left {}
- /*
- The character icons.
- Has a max height of 100px, no min-height.
- */
- .profile-links .character-links-link .icon-100 {}
- /*
- Affects all the labels. That is,
- 1. The delete label
- 2. The small link icon
- 3. Character name label
- 4. Username label
- This is necessary because you can't affect
- only the character name labels. Everything else
- can be specifically modified.
- */
- .profile-links .label {}
- .profile-links .label:hover {}
- /* The delete labels alone. */
- .profile-links .label.alert {}
- .profile-links .label.alert:hover {}
- /* The link icons alone. */
- .profile-links .label.muted {}
- .profile-links .label.muted:hover {}
- /*
- The username label alone.
- Note that changing the text colour here will not work;
- you need to use [a].
- */
- .profile-links .label.secondary {}
- .profile-links .label.secondary a {}
- .profile-links .label.secondary:hover {}
- .profile-links .label.secondary a:hover {}
- /*
- The panels that contain the text box and edit buttons.
- */
- .profile-links .character-links-link .panel {}
- /* The textboxes. */
- .profile-links .character-links-link .panel .form-control {}
- /*
- A row inside the panel that contains the
- "Notify (username) of change?" text as well as
- the [.text-right] that contains the button.
- */
- .profile-links .character-links-link .panel .row {}
- /* The edit button. */
- .profile-links .character-links-link .panel button.tiny {}
- .profile-links .character-links-link .panel button.tiny:hover {}
- /***************************************************************************
- Worlds
- ***************************************************************************/
- /*
- The container for the world page.
- */
- .profile-groups {}
- /*
- This controls the default padding on each thumb.
- [.text-center.clearboth] refers to only the leftmost one,
- and could probably be used for making dividing borders...
- Note though that this won't be a consistent design since
- not all the pages have .clearboth...
- */
- .profile-groups .text-center {}
- .profile-groups .text-center.clearboth {}
- /*
- These are contained within .text-center inside a small-block-grid-6,
- which has -10px margins as usual. Each one has some
- padding on the left and right sides, as a note.
- This is also reached with the global [.thumb].
- The change on b is to make the label split onto the next line.
- */
- .profile-groups .gallery-thumb {}
- .profile-groups .gallery-thumb b { display: block; }
- .profile-groups .gallery-thumb .th {}
- .profile-groups .gallery-thumb .th:hover {}
- /*
- The rank label.
- */
- .profile-groups .label {}
- /*
- The "Save Worlds" button.
- Apply background colour directly.
- */
- .profile-groups .button {}
- .profile-groups .button:hover {}
- /*
- Another pointless discovery.
- There's a div 250 pixels high below the save button...
- Might be cute for an image, but I also don't know if there
- are any special conditions for it appearing/not appearing.
- */
- .profile-groups .spacer-250 {}
- /***************************************************************************
- Favourites
- ***************************************************************************/
- /*
- For some reason, the container for this page is also
- [.profile-creations] (same as the Designs page).
- I imagine there isn't going to be any huge difference
- and anyway there isn't really a way to differentiate the
- things...
- */
- /***************************************************************************
- Designs
- ***************************************************************************/
- /* The container for the designs page */
- .profile-creations {}
- /*
- Thumbnails.
- Also the same as [.thumb].
- Includes the labels.
- */
- .profile-creations .thumb-character {}
- .profile-creations .thumb-character .th {}
- .profile-creations .thumb-character .th:hover {}
- /*
- The labels. Again, splitting onto different lines.
- */
- .profile-creations .thumb-character .label { display: block; white-space: normal; }
- .profile-creations .thumb-character .label.primary {}
- .profile-creations .thumb-character .label.secondary {}
- .profile-creations .thumb-character .label.primary a {}
- .profile-creations .thumb-character .label.primary a:hover {}
- .profile-creations .thumb-character .label.secondary a {}
- .profile-creations .thumb-character .label.secondary a:hover {}
- /***************************************************************************
- Art
- ***************************************************************************/
- /*
- The container here is the same as the one used for the
- Images page (.profile-gallery). I imagine there's no
- need to go through this since there's nothing new here...
- */
- /***************************************************************************
- Stats
- ***************************************************************************/
- /*
- Class name is literally the same as the one used for
- fields on character pages...
- If you're modifying your profile css for character css,
- be sure to check this section.
- */
- .character-fields {}
- /*
- Each row of the stats.
- */
- .character-fields .character-field-row {}
- /*
- The title of the field.
- Text aligned right, uppercase by default.
- */
- .character-fields .character-field-row .character-field-title {}
- /*
- The value of the field.
- Spacing between the title and the value is done here
- by way of padding (20px left and right).
- */
- .character-fields .character-field-row .character-field-value {}
- /*
- For modifying the appearance of dates specifically on this page.
- */
- .character-fields .character-field-row abbr {}
- /************************************************
- #modal-default
- ************************************************/
- /*
- The modal that appears when you click on either of the
- subscribed users/subscriber links.
- Can also be reached with [.reveal-modal], but this will
- affect the other modals (namely, the select character/image
- ones in comments).
- */
- #modal-default {}
- /* The title of the modal. */
- #modal-default h1 {}
- /*
- The grid that contains the users in the modal.
- */
- #modal-default .small-block-grid-8 {}
- /*
- Each of the li in the grid. 5px padding all round.
- */
- #modal-default .small-block-grid-8 li {}
- /*
- Each of the cells (1 per li) in the grid.
- 10px padding, 5px margins all round so it looks
- kind of cramped at small sizes...
- Unfortunately the padding and margins can't be changed.
- */
- #modal-default .small-block-grid-8 .character-select-cell {}
- #modal-default .small-block-grid-8 .character-select-cell:hover {}
- /*
- The username labels.
- */
- #modal-default .small-block-grid-8 .label {}
- #modal-default .small-block-grid-8 .label:hover {}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement