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