| 1 | /*************************************************************************** |
| 2 | |
| 3 | character 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 [.character-profile] |
| 23 | > .character-stats |
| 24 | > .character-fields |
| 25 | > .character-recent-images |
| 26 | - Gallery [.character-gallery] |
| 27 | - Worlds [.character-worlds] |
| 28 | - Links [.character-links] |
| 29 | - Comments [.comments] |
| 30 | |
| 31 | ***************************************************************************/ |
| 32 | |
| 33 | /*************************************************************************** |
| 34 | |
| 35 | Options |
| 36 | |
| 37 | Colours used (lightest to darkest): |
| 38 | #fff |
| 39 | #d7e9ec |
| 40 | #c1d7dd |
| 41 | #a4bdcd |
| 42 | #9398b3 |
| 43 | #625966 |
| 44 | |
| 45 | ***************************************************************************/ |
| 46 | |
| 47 | /* |
| 48 | |
| 49 | This is a simple layout, so there aren't any options really. |
| 50 | |
| 51 | You can of course replace colours in the order of darkest -> lightest |
| 52 | for a dark layout, but you may have to adjust the thumbnail bg/borders |
| 53 | so the contrast doesn't look atrocious. |
| 54 | |
| 55 | */ |
| 56 | |
| 57 | .th |
| 58 | { |
| 59 | /* |
| 60 | background-color: #000; |
| 61 | border-color: #000; |
| 62 | */ |
| 63 | } |
| 64 | |
| 65 | /*************************************************************************** |
| 66 | |
| 67 | General properties |
| 68 | |
| 69 | ***************************************************************************/ |
| 70 | |
| 71 | /* |
| 72 | Both must be overwritten or hover colour will be default blue. |
| 73 | However, if [.display-user a] is set, that will take priority |
| 74 | */ |
| 75 | a, a:link, a:visited |
| 76 | { |
| 77 | color: #a4bdcd; |
| 78 | } |
| 79 | a:hover |
| 80 | { |
| 81 | color: #c1d7dd; |
| 82 | } |
| 83 | #sidebar a:focus, #sidebar a:active, #sidebar a:hover |
| 84 | { |
| 85 | background-color: transparent; |
| 86 | } |
| 87 | |
| 88 | /* |
| 89 | All timestamps |
| 90 | Attempts thus far to remove the dotted |
| 91 | bottom line have been unsuccessful |
| 92 | */ |
| 93 | abbr |
| 94 | { |
| 95 | color: #9398b3; |
| 96 | border-bottom: 1px dotted #9398b3; |
| 97 | } |
| 98 | abbr[title] |
| 99 | { |
| 100 | border: 0px; |
| 101 | } |
| 102 | |
| 103 | /* |
| 104 | padding is asymmetrical by default. (9 20 0 19) |
| 105 | */ |
| 106 | blockquote |
| 107 | { |
| 108 | padding-bottom: 9px; |
| 109 | border-left: 10px solid #c1d7dd; |
| 110 | border-radius: 3px; |
| 111 | } |
| 112 | |
| 113 | /* |
| 114 | Both the basic headers and the .panel headers need |
| 115 | to be modified at the same time since it doesn't |
| 116 | cascade into .panel, so bulletins etc. aren't affected |
| 117 | Oddly, things such as links do gain the changes... |
| 118 | */ |
| 119 | h1, .panel h1 |
| 120 | { |
| 121 | padding-left: 0px; |
| 122 | color: #a4bdcd; |
| 123 | font-size: 2em; |
| 124 | } /* .panel h1 has extra left padding? */ |
| 125 | h2, .panel h2 |
| 126 | { |
| 127 | color: #a4bdcd; |
| 128 | font-size: 2em; |
| 129 | } |
| 130 | h3, .panel h3 |
| 131 | { |
| 132 | color: #a4bdcd; |
| 133 | } |
| 134 | h4, .panel h4 |
| 135 | { |
| 136 | color: #a4bdcd; |
| 137 | } |
| 138 | h5, .panel h5 |
| 139 | { |
| 140 | color: #a4bdcd; |
| 141 | } |
| 142 | h6, .panel h6 |
| 143 | { |
| 144 | color: #a4bdcd; |
| 145 | } |
| 146 | |
| 147 | /* |
| 148 | If hr doesn't work, add <p></p> tags |
| 149 | It seems to work fine for content, |
| 150 | but not in the sidebar blurb |
| 151 | |
| 152 | default values: |
| 153 | margin-top: 20px; |
| 154 | border-top: 1px; |
| 155 | margin-bottom: 19px; |
| 156 | */ |
| 157 | hr |
| 158 | { |
| 159 | border: 0px; |
| 160 | background-color: #d7e9ec; |
| 161 | border-radius: 3px; |
| 162 | height: 10px; |
| 163 | margin-top: 10px; |
| 164 | margin-bottom: 9px; |
| 165 | } |
| 166 | |
| 167 | /* |
| 168 | p seems to crop up every now and then, so best to remove any |
| 169 | padding whatsoever... |
| 170 | */ |
| 171 | p, .panel p |
| 172 | { |
| 173 | color: #625966; |
| 174 | } |
| 175 | |
| 176 | .wrap |
| 177 | { |
| 178 | color: #9398b3; |
| 179 | } |
| 180 | |
| 181 | /*************************************************************************** |
| 182 | |
| 183 | Global IDs |
| 184 | |
| 185 | ***************************************************************************/ |
| 186 | |
| 187 | /************************************************ |
| 188 | .button variants |
| 189 | - [button] by itself cannot be modified |
| 190 | - modal buttons are more specific |
| 191 | ************************************************/ |
| 192 | /* |
| 193 | .button affected areas: |
| 194 | - Worlds: "+ Add Character to a World" |
| 195 | - Links: "Request Link" |
| 196 | - Comments: "Post Comment" |
| 197 | */ |
| 198 | .button |
| 199 | { |
| 200 | background-color: #9398b3; |
| 201 | color: #d7e9ec; |
| 202 | border-radius: 3px; |
| 203 | } |
| 204 | .button:hover |
| 205 | { |
| 206 | background-color: #a4bdcd; |
| 207 | } |
| 208 | |
| 209 | /* |
| 210 | .button.secondary affected areas: |
| 211 | - Gallery: "Save Gallery" |
| 212 | - Links: "Select Character" |
| 213 | - Comments: "Select Character", "Select Image" |
| 214 | */ |
| 215 | .button.secondary |
| 216 | { |
| 217 | background-color: #9398b3; |
| 218 | color: #d7e9ec; |
| 219 | border-radius: 3px; |
| 220 | } |
| 221 | .button.secondary:hover |
| 222 | { |
| 223 | background-color: #a4bdcd; |
| 224 | color: #d7e9ec; |
| 225 | } |
| 226 | |
| 227 | /************************************************ |
| 228 | .display-user |
| 229 | ************************************************/ |
| 230 | |
| 231 | /* |
| 232 | This affects any usernames |
| 233 | On the main character profile page, |
| 234 | it only affects the Designer in the character |
| 235 | stats because "Owner" is a [.display-user-tiny] |
| 236 | rather than just [.display-user]. |
| 237 | */ |
| 238 | .display-user a {} |
| 239 | .display-user a:hover {} |
| 240 | |
| 241 | /************************************************ |
| 242 | .label variants |
| 243 | :hover (without using a:hover) is enough |
| 244 | for changing the hover text colour. |
| 245 | [a] does not affect label text |
| 246 | ************************************************/ |
| 247 | |
| 248 | /* |
| 249 | I've found that using .label in specific places will affect |
| 250 | all labels in that container, but using the generic [.label] |
| 251 | will affect only certain labels. |
| 252 | |
| 253 | .label affected areas: |
| 254 | - Profile: tags |
| 255 | - Links: character names |
| 256 | - Comments: "Edit" labels |
| 257 | |
| 258 | To do hover text colour for character names, use [.label a] |
| 259 | To do hover text colour for edit labels, use [.label] (same for .alert) |
| 260 | Or: if the label itself isn't a link, use [.label a]. |
| 261 | */ |
| 262 | .label, |
| 263 | #content .label |
| 264 | { |
| 265 | background-color: #9398b3; |
| 266 | color: #d7e9ec; |
| 267 | border-radius: 3px; |
| 268 | } |
| 269 | .label a, .label a:link, |
| 270 | #content .label a, #content .label a:link |
| 271 | { |
| 272 | color: #d7e9ec; |
| 273 | } |
| 274 | |
| 275 | .label:hover , |
| 276 | #content .label:hover |
| 277 | { |
| 278 | color: #d7e9ec; |
| 279 | background-color: #a4bdcd; |
| 280 | |
| 281 | } |
| 282 | .label a :hover, |
| 283 | #content .label a:hover |
| 284 | { |
| 285 | color: #d7e9ec; |
| 286 | } |
| 287 | |
| 288 | /* |
| 289 | .label.secondary affected areas: |
| 290 | - Gallery: "Edit" label |
| 291 | - Worlds: "Leave" label |
| 292 | - Links: username labels |
| 293 | */ |
| 294 | .label.secondary, |
| 295 | #content .label.secondary |
| 296 | { |
| 297 | background-color: #a4bdcd !important; |
| 298 | color: #fff; |
| 299 | border-radius: 3px; |
| 300 | } |
| 301 | .label.secondary:hover, |
| 302 | #content .label.secondary:hover |
| 303 | { |
| 304 | |
| 305 | background-color: #d7e9ec; |
| 306 | } |
| 307 | .label.secondary a, |
| 308 | #content .label.secondary a |
| 309 | { |
| 310 | color: #fff; |
| 311 | } |
| 312 | .label.secondary a:hover , |
| 313 | #content .label.secondary a:hover |
| 314 | { |
| 315 | color: #fff; |
| 316 | } |
| 317 | |
| 318 | /* |
| 319 | .label.alert affected areas: |
| 320 | - Links: "Delete Link" |
| 321 | - Comments: "Delete" label |
| 322 | |
| 323 | To do hover text colour, don't use [a] |
| 324 | */ |
| 325 | .label.alert, |
| 326 | #content .label.alert |
| 327 | { |
| 328 | background-color: #625966; |
| 329 | color: #d7e9ec; |
| 330 | } |
| 331 | .label.alert:hover , |
| 332 | #content .label.alert:hover |
| 333 | { |
| 334 | color: #c1d7dd; |
| 335 | } |
| 336 | |
| 337 | /************************************************ |
| 338 | .panel |
| 339 | ************************************************/ |
| 340 | |
| 341 | /* |
| 342 | .panel affected areas: |
| 343 | - Links: character selection bar at the top, |
| 344 | individual link boxes |
| 345 | - Comments: individual comment boxes |
| 346 | */ |
| 347 | .panel |
| 348 | { |
| 349 | background-color: transparent; |
| 350 | border: 0px; |
| 351 | padding: 0px; |
| 352 | margin: 0px; |
| 353 | } |
| 354 | |
| 355 | /************************************************ |
| 356 | .th, .thumb |
| 357 | ************************************************/ |
| 358 | |
| 359 | /* |
| 360 | .th affected areas: |
| 361 | - Profile: recent images |
| 362 | - Gallery: images |
| 363 | - Worlds: worlds |
| 364 | |
| 365 | Use this to modify box-shadow and the fat white border, |
| 366 | as well as constrain the image's size |
| 367 | */ |
| 368 | .th |
| 369 | { |
| 370 | box-shadow: 0px 0px 0px 1px #d7e9ec; |
| 371 | border-radius: 3px; |
| 372 | border: 4px solid #fff; |
| 373 | } |
| 374 | .th:hover |
| 375 | { |
| 376 | box-shadow: 0px 0px 6px 1px #c1d7dd; |
| 377 | } |
| 378 | |
| 379 | /* |
| 380 | .thumb affected areas: |
| 381 | - the entire section enclosing a character/world |
| 382 | - no padding/margins |
| 383 | - Profile: recent images |
| 384 | - Gallery: images |
| 385 | - Worlds: worlds |
| 386 | */ |
| 387 | .thumb {} |
| 388 | |
| 389 | /************************************************ |
| 390 | pagination |
| 391 | ************************************************/ |
| 392 | |
| 393 | /* |
| 394 | There doesn't seem to be any pagination on character |
| 395 | pages but just in case... |
| 396 | */ |
| 397 | |
| 398 | /* non-active page numbers */ |
| 399 | ul.pagination li a |
| 400 | { |
| 401 | color: #a4bdcd; |
| 402 | } |
| 403 | ul.pagination li a:hover |
| 404 | { |
| 405 | background-color: #a4bdcd; |
| 406 | color: #d7e9ec; |
| 407 | } |
| 408 | |
| 409 | /* current page number, modify background colour here */ |
| 410 | ul.pagination li.current a |
| 411 | { |
| 412 | background-color: #9398b3; |
| 413 | color: #d7e9ec; |
| 414 | } |
| 415 | ul.pagination li.current a:hover |
| 416 | { |
| 417 | background-color: #a4bdcd; |
| 418 | color: #d7e9ec; |
| 419 | } |
| 420 | |
| 421 | /* note that these are different */ |
| 422 | ul.pagination li {} |
| 423 | ul.pagination li:hover {} |
| 424 | ul.pagination li.current {} |
| 425 | ul.pagination li.current:hover {} |
| 426 | |
| 427 | /************************************************ |
| 428 | grids |
| 429 | ************************************************/ |
| 430 | |
| 431 | /* |
| 432 | ul.large-block-grid-6 |
| 433 | |
| 434 | Used for the main profile, and gallery. |
| 435 | 6 to a row, width of each li is then 16.6%. |
| 436 | With fixed margins ~16.3% seems to work fine. |
| 437 | For some reason, has -10px left and right margins. |
| 438 | (To push it past #content's padding all the way to the edges?) |
| 439 | */ |
| 440 | ul.large-block-grid-6 |
| 441 | { |
| 442 | margin-left: 0px; |
| 443 | margin-right: 0px; |
| 444 | } |
| 445 | |
| 446 | /* |
| 447 | ul.small-block-grid-6 li |
| 448 | |
| 449 | In the galleries, is a better option than .thumb and |
| 450 | has more power than .thumb does. |
| 451 | It's a better option because the padding is consistent. |
| 452 | */ |
| 453 | ul.large-block-grid-6 li |
| 454 | { |
| 455 | padding-top: 10px; |
| 456 | } |
| 457 | |
| 458 | /* |
| 459 | ul.small-block-grid-4 |
| 460 | |
| 461 | Used on the Worlds page only. |
| 462 | */ |
| 463 | ul.small-block-grid-4 |
| 464 | { |
| 465 | margin-left: 0px; |
| 466 | margin-right: 0px; |
| 467 | } |
| 468 | ul.small-block-grid-4 li {} |
| 469 | |
| 470 | /*************************************************************************** |
| 471 | |
| 472 | Containers |
| 473 | |
| 474 | ***************************************************************************/ |
| 475 | |
| 476 | /* |
| 477 | Contains everything on the page. |
| 478 | Shrinking this causes stuff to overflow. |
| 479 | Nice for backgrounds but don't touch the width/height. |
| 480 | */ |
| 481 | #container |
| 482 | { |
| 483 | background-color: #fff; |
| 484 | } |
| 485 | |
| 486 | /* |
| 487 | Contains everything except the header and footer. |
| 488 | (i.e. it contains #sidebar and #content) |
| 489 | Can squash for a narrower content area. |
| 490 | */ |
| 491 | #main |
| 492 | { |
| 493 | margin-top: 70px; |
| 494 | width: 90%; |
| 495 | margin-left: auto; |
| 496 | margin-right: auto; |
| 497 | background-color: transparent; |
| 498 | } |
| 499 | |
| 500 | /* |
| 501 | Contains the main content of the page. |
| 502 | Note that the padding is compounded with the container |
| 503 | that represents the current page's content. |
| 504 | |
| 505 | Doing things like changing the text colour here will affect |
| 506 | text in created divs, but not text in panels and etc. |
| 507 | It also affects world names on the Worlds page. |
| 508 | Better to do text colour changes in specific places. |
| 509 | */ |
| 510 | #content |
| 511 | { |
| 512 | width: 74%; |
| 513 | color: #625966; |
| 514 | padding: 0px 0px 50px 0px; |
| 515 | } |
| 516 | |
| 517 | /* |
| 518 | Generally not useful for layouts unless something to meet |
| 519 | the lower part of the page is required. |
| 520 | It contains the profiler which I'll also turn off here. |
| 521 | */ |
| 522 | #footer { display: none; } |
| 523 | .profiler { display: none; } |
| 524 | |
| 525 | /*************************************************************************** |
| 526 | |
| 527 | Header |
| 528 | |
| 529 | ***************************************************************************/ |
| 530 | |
| 531 | /* |
| 532 | I have no idea what to do with this sometimes; |
| 533 | it contains important functions so getting rid of it |
| 534 | isn't a good idea but it's also too thick for layouts sometimes. |
| 535 | */ |
| 536 | #header |
| 537 | { |
| 538 | border: 0px; |
| 539 | width: 90%; |
| 540 | min-width: 800px; |
| 541 | background-color: #9398b3; |
| 542 | margin-left: auto; |
| 543 | margin-right: auto; |
| 544 | position: relative; |
| 545 | border-radius: 3px; |
| 546 | top: 50px; |
| 547 | } |
| 548 | |
| 549 | /* |
| 550 | All header buttons including the dropdown |
| 551 | If transparent, background colour will show through. |
| 552 | However, dropdown li will also become transparent |
| 553 | and will need to be set with [.dropdown li] |
| 554 | Both [#header a] and [#header li] need to be transparent. |
| 555 | Background colour can then be set on #header. |
| 556 | */ |
| 557 | #header a, #header li |
| 558 | { |
| 559 | background-color: transparent; |
| 560 | color: #d7e9ec; |
| 561 | } |
| 562 | #header li:hover |
| 563 | { |
| 564 | background-color: #a4bdcd; |
| 565 | } |
| 566 | #header .dropdown li |
| 567 | { |
| 568 | background-color: #9398b3; |
| 569 | } |
| 570 | |
| 571 | /* Dropdown links */ |
| 572 | #header .dropdown li:hover |
| 573 | { |
| 574 | background-color: #a4bdcd; |
| 575 | } |
| 576 | |
| 577 | /* Vertical divider; border-right */ |
| 578 | #header li.divider { display: none;/*border-right: 1px solid #000;*/ } |
| 579 | |
| 580 | /* top-left homepage link */ |
| 581 | #header .title-area |
| 582 | { |
| 583 | display: none; |
| 584 | } |
| 585 | |
| 586 | /* user icon */ |
| 587 | #header img {} |
| 588 | |
| 589 | /* |
| 590 | To change the size of the bar visually |
| 591 | (padding and font sizes not included) |
| 592 | all these need to be changed |
| 593 | Even if #header a is transparent it needs |
| 594 | to be resized otherwise dropdowns will be |
| 595 | impossible to use |
| 596 | |
| 597 | Issue: I don't know how to deal with the dropdown arrow |
| 598 | */ |
| 599 | #header, #header a, #header li, #header .title-area |
| 600 | { |
| 601 | /*height: 30px;*/ |
| 602 | } |
| 603 | |
| 604 | #header .button |
| 605 | { |
| 606 | background-color: #a4bdcd; |
| 607 | margin-right: 10px; |
| 608 | } |
| 609 | #header li:hover .button |
| 610 | { |
| 611 | background-color: #c1d7dd; |
| 612 | color: #fff; |
| 613 | } |
| 614 | |
| 615 | /* |
| 616 | Contains all the header bar stuff. |
| 617 | With some resizing of #header it's possible to |
| 618 | set up a header image while preserving the header bar. |
| 619 | #header's background goes under this. |
| 620 | |
| 621 | I haven't yet figured out how to adjust the padding |
| 622 | of the dropdown buttons. |
| 623 | */ |
| 624 | .top-bar-section |
| 625 | { |
| 626 | width: 100%; |
| 627 | background-color: #9398b3; |
| 628 | border-radius: 3px; |
| 629 | } |
| 630 | |
| 631 | /* |
| 632 | Only the left side of the header bar items, |
| 633 | excluding the top left homepage link. |
| 634 | Floats left. |
| 635 | */ |
| 636 | .top-bar-section .left {} |
| 637 | |
| 638 | /* |
| 639 | Only the right side of the header bar items. |
| 640 | Floats right. |
| 641 | |
| 642 | At the moment there's only one item so |
| 643 | #header .user-link does the same thing. |
| 644 | */ |
| 645 | .top-bar-section .right {} |
| 646 | |
| 647 | /*************************************************************************** |
| 648 | |
| 649 | Sidebar |
| 650 | |
| 651 | ***************************************************************************/ |
| 652 | |
| 653 | /* |
| 654 | The whole sidebar. |
| 655 | All the li are transparent, so changing the |
| 656 | background colour affects everything except |
| 657 | for the box that says "User" (.header). |
| 658 | |
| 659 | Changing the text colour affects blurb text. |
| 660 | Padding pads all the content. |
| 661 | Default width is 16.6667%. |
| 662 | */ |
| 663 | #sidebar |
| 664 | { |
| 665 | background-color: transparent; |
| 666 | width: 25%; |
| 667 | } |
| 668 | |
| 669 | /* |
| 670 | Changing the colour affects all the link text in the sidebar. |
| 671 | Note that [.side-nav a] doesn't do the same. |
| 672 | Neither does [.side-nav li a]. |
| 673 | */ |
| 674 | #sidebar a {} |
| 675 | #sidebar a:hover {} |
| 676 | |
| 677 | /* |
| 678 | Changing the background colour affects only the .header, |
| 679 | user link, blurb, and buttons. |
| 680 | Inserting padding here will also affect the .dividers so |
| 681 | be careful... |
| 682 | |
| 683 | Changing colour on hover here will affect every li in the |
| 684 | sidebar, including the blurb (which is probably not the |
| 685 | intended effect). So, the hover is put in [a] rather than [li]. |
| 686 | */ |
| 687 | #sidebar li |
| 688 | { |
| 689 | border: 0px; |
| 690 | border-radius: 3px; |
| 691 | } |
| 692 | |
| 693 | #sidebar li a |
| 694 | { |
| 695 | padding: 0px; |
| 696 | margin: 5 15 5 15; |
| 697 | padding: 5 0 5 0; |
| 698 | color: #a4bdcd; |
| 699 | } |
| 700 | |
| 701 | #sidebar li a:hover |
| 702 | { |
| 703 | color: #d7e9ec; |
| 704 | } |
| 705 | |
| 706 | #sidebar li:hover |
| 707 | { |
| 708 | background-color: #a4bdcd; |
| 709 | color: #d7e9ec; |
| 710 | } |
| 711 | |
| 712 | #sidebar li:hover a |
| 713 | { |
| 714 | color: #d7e9ec; |
| 715 | } |
| 716 | |
| 717 | #sidebar li.active |
| 718 | { |
| 719 | background-color: #9398b3; |
| 720 | border-radius: 3px; |
| 721 | padding: 5 0 5 0; |
| 722 | } |
| 723 | |
| 724 | #sidebar li.active a |
| 725 | { |
| 726 | color: #d7e9ec; |
| 727 | } |
| 728 | |
| 729 | /* |
| 730 | This contains only the part of the sidebar that has any content |
| 731 | (as opposed to #sidebar which stretches the length of the page) |
| 732 | |
| 733 | It has padding at the top and bottom. #sidebar has no padding. |
| 734 | */ |
| 735 | .side-nav |
| 736 | { |
| 737 | border-right: 0px; |
| 738 | padding-right: 25px; |
| 739 | padding-top: 0px; |
| 740 | } |
| 741 | |
| 742 | /* |
| 743 | The username + avatar box. |
| 744 | I recall having weird problems when doing up Jay's CSS, |
| 745 | but at the moment there doesn't seem to be any problem setting |
| 746 | a background image for this. |
| 747 | */ |
| 748 | #sidebar .display-user-tiny a |
| 749 | { |
| 750 | padding: 15px; |
| 751 | margin: 0px; |
| 752 | text-align: center; |
| 753 | } |
| 754 | #sidebar .display-user-tiny a:hover |
| 755 | { |
| 756 | padding: 15px; |
| 757 | margin: 0px; |
| 758 | text-align: center; |
| 759 | background-color: #fff; |
| 760 | } |
| 761 | #sidebar .display-user-tiny:hover |
| 762 | { |
| 763 | background-color: #fff; |
| 764 | } |
| 765 | |
| 766 | /* |
| 767 | The blurb. |
| 768 | <hr> seems to require being between <p></p> tags. |
| 769 | |
| 770 | Note! Links in the blurb will appear like the other |
| 771 | buttons in the sidebar, i.e. they will stretch the |
| 772 | length of the sidebar and have padding. If this is not |
| 773 | what you want, add this (will affect ALL links in the blurb): |
| 774 | |
| 775 | #sidebar .blurb a {display: inline; padding: 0px;} |
| 776 | */ |
| 777 | #sidebar .blurb |
| 778 | { |
| 779 | padding: 15px; |
| 780 | border-top: 0px; |
| 781 | margin: 0px; |
| 782 | border-radius: 3px; |
| 783 | } |
| 784 | #sidebar .blurb a |
| 785 | { |
| 786 | display: inline; |
| 787 | padding: 0px; |
| 788 | } |
| 789 | #sidebar .blurb:hover |
| 790 | { |
| 791 | background-color: #fff; |
| 792 | } |
| 793 | |
| 794 | /* |
| 795 | The box that contains the folder that the character is in. |
| 796 | Use [a] to customise the text. |
| 797 | */ |
| 798 | #sidebar .header |
| 799 | { |
| 800 | background-color: #a4bdcd; |
| 801 | } |
| 802 | #sidebar .header:hover |
| 803 | { |
| 804 | background-color: #c1d7dd; |
| 805 | } |
| 806 | #sidebar .header a |
| 807 | { |
| 808 | font-weight: normal; |
| 809 | color: #d7e9ec; |
| 810 | } |
| 811 | #sidebar .header:hover a |
| 812 | { |
| 813 | color: #fff; |
| 814 | } |
| 815 | |
| 816 | /* |
| 817 | The character's name and icon. |
| 818 | */ |
| 819 | |
| 820 | #sidebar .display-character a |
| 821 | { |
| 822 | padding: 15px; |
| 823 | margin: 0px; |
| 824 | text-align: center; |
| 825 | } |
| 826 | #sidebar .display-character a:hover |
| 827 | { |
| 828 | padding: 15px; |
| 829 | margin: 0px; |
| 830 | text-align: center; |
| 831 | background-color: #fff; |
| 832 | } |
| 833 | #sidebar .display-character:hover |
| 834 | { |
| 835 | background-color: #fff; |
| 836 | } |
| 837 | |
| 838 | /* |
| 839 | The dividers. |
| 840 | 5px of padding on top and below, border is border-top. |
| 841 | */ |
| 842 | #sidebar .divider |
| 843 | { |
| 844 | margin: 0px; |
| 845 | } |
| 846 | |
| 847 | /* |
| 848 | It's not possible to touch any of the other buttons individually. |
| 849 | However it's possible to mess with the little icons... |
| 850 | */ |
| 851 | #sidebar i {} |
| 852 | |
| 853 | /* |
| 854 | The currently active page. |
| 855 | Use [.active a] to change the text colour. |
| 856 | */ |
| 857 | #sidebar .active {} |
| 858 | |
| 859 | /*************************************************************************** |
| 860 | |
| 861 | Profile page |
| 862 | |
| 863 | ***************************************************************************/ |
| 864 | |
| 865 | /* |
| 866 | .character-profile |
| 867 | |
| 868 | Main editable content of the profile. |
| 869 | Separate from the columns below. |
| 870 | I usually throw in an extra div inside, just in case |
| 871 | I want to make more to abuse later. |
| 872 | There's no padding. |
| 873 | */ |
| 874 | .character-profile {} |
| 875 | |
| 876 | /************************************************ |
| 877 | .character-stats |
| 878 | ************************************************/ |
| 879 | |
| 880 | /* |
| 881 | The character stats box. |
| 882 | Forced to float right. It overlaps everything else |
| 883 | on the page. |
| 884 | Resembles a [.panel] but isn't one. |
| 885 | |
| 886 | I don't really know what to do with it sometimes... |
| 887 | */ |
| 888 | .character-profile .character-stats |
| 889 | { |
| 890 | border: 0px; |
| 891 | background-color: #c1d7dd; |
| 892 | border-radius: 3px; |
| 893 | } |
| 894 | |
| 895 | /* |
| 896 | Each row in the stats box. |
| 897 | Contains a [.character-stat-title] and |
| 898 | a [.character-stat-value]. |
| 899 | */ |
| 900 | .character-profile .character-stats .character-stat-row {} |
| 901 | |
| 902 | /* |
| 903 | Title of a row in the character stats. |
| 904 | */ |
| 905 | .character-profile .character-stats .character-stat-title |
| 906 | { |
| 907 | color: #fff; |
| 908 | } |
| 909 | |
| 910 | /* |
| 911 | Value of a row in the character stats. |
| 912 | */ |
| 913 | .character-profile .character-stats .character-stat-value, |
| 914 | .character-profile .character-stats .character-stat-value a , |
| 915 | .character-profile .character-stats .character-stat-value abbr |
| 916 | |
| 917 | { |
| 918 | text-align: right; |
| 919 | color: #fff; |
| 920 | } |
| 921 | .character-profile .character-stats .character-stat-value a:hover |
| 922 | { |
| 923 | color: #fff; |
| 924 | } |
| 925 | |
| 926 | /* |
| 927 | Username + picture in the character stats. |
| 928 | Can reach the image alone with [img] if you |
| 929 | want to hide it... |
| 930 | */ |
| 931 | .character-profile .character-stats .display-user {} |
| 932 | |
| 933 | /* |
| 934 | Character stats tags. |
| 935 | */ |
| 936 | .character-profile .character-stats .label {} |
| 937 | .character-profile .character-stats .label:hover {} |
| 938 | |
| 939 | /************************************************ |
| 940 | .character-fields |
| 941 | ************************************************/ |
| 942 | |
| 943 | /* |
| 944 | Fields. |
| 945 | Hierarchy: |
| 946 | > .character-fields |
| 947 | > .character-fields-title |
| 948 | > .character-field-row |
| 949 | > .character-field-title |
| 950 | > .character-field-value |
| 951 | */ |
| 952 | .character-profile .character-fields {} |
| 953 | |
| 954 | /* |
| 955 | The title of the character fields. |
| 956 | The dividing line between the title and the fields |
| 957 | is here. |
| 958 | Padding: 5 20 5 20 |
| 959 | Border: 0 0 1 0 |
| 960 | Margin: 0 0 15 0 |
| 961 | */ |
| 962 | .character-profile .character-fields .character-fields-title, |
| 963 | .character-profile .character-recent-images .character-recent-images-title, |
| 964 | .character-profile .character-text .character-text-title |
| 965 | { |
| 966 | padding-left: 0px; |
| 967 | color: #A4BDCD; |
| 968 | font-size: 2em; |
| 969 | border: 0px; |
| 970 | background-color: transparent; |
| 971 | } |
| 972 | |
| 973 | |
| 974 | /* |
| 975 | Each row of the stats. |
| 976 | */ |
| 977 | .character-profile .character-fields .character-field-row {} |
| 978 | |
| 979 | /* |
| 980 | The title of the field. |
| 981 | Text aligned right, uppercase by default. |
| 982 | */ |
| 983 | .character-profile .character-fields .character-field-title p |
| 984 | { |
| 985 | font-size: 9pt; |
| 986 | color: #9398B3; |
| 987 | font-weight: bold; |
| 988 | } |
| 989 | |
| 990 | /* |
| 991 | The value of the field. |
| 992 | Spacing between the title and the value is done here |
| 993 | by way of padding (20px left and right). |
| 994 | */ |
| 995 | .character-profile .character-fields .character-field-value p |
| 996 | { |
| 997 | color: #625966; |
| 998 | } |
| 999 | |
| 1000 | /************************************************ |
| 1001 | .character-recent-images |
| 1002 | ************************************************/ |
| 1003 | |
| 1004 | /* |
| 1005 | Recent images. |
| 1006 | Hierarchy: |
| 1007 | > .character-recent-images |
| 1008 | > .character-recent-images-title |
| 1009 | > .character-recent-images-gallery |
| 1010 | > .character-gallery |
| 1011 | */ |
| 1012 | .character-profile .character-recent-images {} |
| 1013 | |
| 1014 | /* |
| 1015 | The title of the recent images. |
| 1016 | The dividing line between the title and the gallery |
| 1017 | is here. |
| 1018 | Padding: 5 20 5 20 |
| 1019 | Border: 0 0 1 0 |
| 1020 | Margin: 0 0 15 0 |
| 1021 | */ |
| 1022 | .character-profile .character-recent-images .character-recent-images-title {} |
| 1023 | |
| 1024 | /* |
| 1025 | The fieldset that contains the container that contains |
| 1026 | the large-block-grid-6 gallery. |
| 1027 | 20px of padding all around, 5px margins top and bottom. |
| 1028 | */ |
| 1029 | .character-profile .character-recent-images .character-recent-images-gallery {} |
| 1030 | |
| 1031 | /* |
| 1032 | The container that contains the character gallery. |
| 1033 | No padding or margins. |
| 1034 | |
| 1035 | Since the character gallery is a grid, it has -10 margins |
| 1036 | on both left and right sides. |
| 1037 | */ |
| 1038 | .character-profile .character-recent-images .character-gallery {} |
| 1039 | |
| 1040 | /*************************************************************************** |
| 1041 | |
| 1042 | Gallery |
| 1043 | |
| 1044 | ***************************************************************************/ |
| 1045 | |
| 1046 | /* |
| 1047 | Character image gallery. |
| 1048 | The gallery is a large-block-grid-6. |
| 1049 | */ |
| 1050 | .character-gallery {} |
| 1051 | |
| 1052 | /* |
| 1053 | Thumbnails. |
| 1054 | Also the same as [.thumb]. |
| 1055 | Contains only the image + the "Edit" label. |
| 1056 | */ |
| 1057 | .character-gallery .gallery-thumb {} |
| 1058 | .character-gallery .gallery-thumb .th {} |
| 1059 | .character-gallery .gallery-thumb .th:hover {} |
| 1060 | |
| 1061 | /* |
| 1062 | Only the edit label. |
| 1063 | To push it into the exact corner of the image, |
| 1064 | remove the bottom margin of .th and the margins |
| 1065 | for .label.secondary. |
| 1066 | |
| 1067 | There strictly isn't a need to style it, but just |
| 1068 | in case it's hard to see... |
| 1069 | */ |
| 1070 | .character-gallery .label.secondary {} |
| 1071 | |
| 1072 | /* |
| 1073 | The save button. |
| 1074 | */ |
| 1075 | .character-gallery .button {} |
| 1076 | .character-gallery .button:hover {} |
| 1077 | |
| 1078 | /*************************************************************************** |
| 1079 | |
| 1080 | Worlds |
| 1081 | |
| 1082 | ***************************************************************************/ |
| 1083 | |
| 1084 | /* |
| 1085 | The worlds container. |
| 1086 | |
| 1087 | Worlds are contained in a small-block-grid-4. |
| 1088 | */ |
| 1089 | .character-worlds {} |
| 1090 | |
| 1091 | /* |
| 1092 | The "Add Character to a World" button. |
| 1093 | */ |
| 1094 | .character-worlds .button {} |
| 1095 | .character-worlds .button:hover {} |
| 1096 | |
| 1097 | /* |
| 1098 | The "Leave" label. One of those things that no one else |
| 1099 | will see so this is not strictly necessary... |
| 1100 | */ |
| 1101 | .character-worlds .label.secondary {} |
| 1102 | .character-worlds .label.secondary a {} |
| 1103 | |
| 1104 | .character-worlds .label.secondary:hover {} |
| 1105 | .character-worlds .label.secondary a:hover {} |
| 1106 | |
| 1107 | /*************************************************************************** |
| 1108 | |
| 1109 | Links |
| 1110 | |
| 1111 | ***************************************************************************/ |
| 1112 | |
| 1113 | /* |
| 1114 | The links page. |
| 1115 | The structure is exactly the same as the user profile |
| 1116 | links page minus the character selection bar at the top, |
| 1117 | so you can copy and paste any code for user profile links |
| 1118 | and change [.profile-links] to [.character-links] |
| 1119 | and vice versa. |
| 1120 | |
| 1121 | This is probably one of the harder pages to style because |
| 1122 | there aren't very many unique ids and changing one thing |
| 1123 | is likely to break another thing... |
| 1124 | */ |
| 1125 | .character-links {} |
| 1126 | |
| 1127 | /************************************************ |
| 1128 | .forums-ic-panel |
| 1129 | ************************************************/ |
| 1130 | |
| 1131 | /* |
| 1132 | This is named the same as the one used in comments, so |
| 1133 | be sure to add [.character-links] before it to avoid |
| 1134 | confusion... |
| 1135 | |
| 1136 | This is the entire bar at the top. |
| 1137 | Padding 2px all around, margin 20px bottom. |
| 1138 | */ |
| 1139 | .character-links .forums-ic-panel {} |
| 1140 | |
| 1141 | /* |
| 1142 | This part contains the character selection buttons and |
| 1143 | so on. |
| 1144 | */ |
| 1145 | .character-links .forums-ic-select {} |
| 1146 | |
| 1147 | /* |
| 1148 | Displays the selected character, just like for comments. |
| 1149 | */ |
| 1150 | .character-links #character_display {} |
| 1151 | |
| 1152 | /* |
| 1153 | The "Select Character" button. |
| 1154 | Padding: 10 20 11 20 |
| 1155 | Margin: 2 2 2 2 |
| 1156 | */ |
| 1157 | .character-links #select_character {} |
| 1158 | |
| 1159 | /* |
| 1160 | The "Request Link" button. |
| 1161 | Note that using just [.button] will also affect the |
| 1162 | "Select Character" button. |
| 1163 | Padding/margins are a bit weird: |
| 1164 | Padding: 10 20 11 20 |
| 1165 | Margin: 2 2 5 2 |
| 1166 | */ |
| 1167 | .character-links .forums-ic-select .button.radius {} |
| 1168 | |
| 1169 | /* |
| 1170 | The character select modal styling can be done |
| 1171 | below under the comments section, since they use |
| 1172 | the same id (#select_character_panel). |
| 1173 | */ |
| 1174 | |
| 1175 | /************************************************ |
| 1176 | .character-links-row |
| 1177 | ************************************************/ |
| 1178 | |
| 1179 | /* |
| 1180 | Each row of links. |
| 1181 | It contains everything in a single link. |
| 1182 | */ |
| 1183 | .character-links .character-links-row {} |
| 1184 | |
| 1185 | /* |
| 1186 | This one is probably going to be troublesome to style, |
| 1187 | but it might be useful depending on what you're trying |
| 1188 | to do... |
| 1189 | |
| 1190 | Affects 3 things: |
| 1191 | 1. A container around the character icons/names/delete link label |
| 1192 | 2. A container around the links text |
| 1193 | 3. The links text panels |
| 1194 | |
| 1195 | Might be easier to understand visually if you add a |
| 1196 | margin to separate them. |
| 1197 | 3 can easily be styled separately. 1 and 2 are harder |
| 1198 | to distinguish and require a lot of small fixes. |
| 1199 | */ |
| 1200 | .character-links .character-links-row .clearfix {} |
| 1201 | |
| 1202 | /* |
| 1203 | This shows up 4 times in a [.character-links-row]. |
| 1204 | 1. left side character icon/names |
| 1205 | 2. right side character icon/names/delete label |
| 1206 | 3. left side character text (containing the [.panel]) |
| 1207 | 4. right side character text (containing the [.panel]) |
| 1208 | |
| 1209 | Comes with 5px of padding all around. |
| 1210 | */ |
| 1211 | .character-links .character-links-link {} |
| 1212 | |
| 1213 | /* |
| 1214 | Contains the LEFT side icon and names in the row. |
| 1215 | It's presumably text-right because it's text-alignment right... |
| 1216 | |
| 1217 | Side effect: styling this will affect the box containing |
| 1218 | the edit button in the [.panel] under the text box. |
| 1219 | Fix with [.profile-links .character-links-link .panel .text-right]. |
| 1220 | */ |
| 1221 | .character-links .character-links-link .text-right {} |
| 1222 | |
| 1223 | /* |
| 1224 | Contains the RIGHT side icon, names and the delete label. |
| 1225 | Again, it's probably text-left because text-alignment left. |
| 1226 | |
| 1227 | No side effect for this one. |
| 1228 | */ |
| 1229 | .character-links .character-links-link .text-left {} |
| 1230 | |
| 1231 | /* |
| 1232 | The character icons. |
| 1233 | Has a max height of 100px, no min-height. |
| 1234 | */ |
| 1235 | .character-links .character-links-link .icon-100 {} |
| 1236 | |
| 1237 | /* |
| 1238 | Affects all the labels. That is, |
| 1239 | 1. The delete label |
| 1240 | 2. The small link icon |
| 1241 | 3. Character name label |
| 1242 | 4. Username label |
| 1243 | |
| 1244 | This is necessary because you can't affect |
| 1245 | only the character name labels. Everything else |
| 1246 | can be specifically modified. |
| 1247 | */ |
| 1248 | .character-links .label {} |
| 1249 | .character-links .label:hover {} |
| 1250 | |
| 1251 | /* The delete labels alone. */ |
| 1252 | .character-links .label.alert {} |
| 1253 | .character-links .label.alert:hover {} |
| 1254 | |
| 1255 | /* The link icons alone. */ |
| 1256 | .character-links .label.muted {} |
| 1257 | .character-links .label.muted:hover {} |
| 1258 | |
| 1259 | /* |
| 1260 | The username label alone. |
| 1261 | Note that changing the text colour here will not work; |
| 1262 | you need to use [a]. |
| 1263 | */ |
| 1264 | .character-links .label.secondary {} |
| 1265 | .character-links .label.secondary a {} |
| 1266 | |
| 1267 | .character-links .label.secondary:hover {} |
| 1268 | .character-links .label.secondary a:hover {} |
| 1269 | |
| 1270 | /* |
| 1271 | The panels that contain the text box and edit buttons. |
| 1272 | */ |
| 1273 | .character-links .character-links-link .panel {} |
| 1274 | |
| 1275 | /* The textboxes. */ |
| 1276 | .character-links .character-links-link .panel .form-control {} |
| 1277 | |
| 1278 | /* |
| 1279 | A row inside the panel that contains the |
| 1280 | "Notify (username) of change?" text as well as |
| 1281 | the [.text-right] that contains the button. |
| 1282 | */ |
| 1283 | .character-links .character-links-link .panel .row {} |
| 1284 | |
| 1285 | /* The edit button. */ |
| 1286 | .character-links .character-links-link .panel button.tiny {} |
| 1287 | .character-links .character-links-link .panel button.tiny:hover {} |
| 1288 | |
| 1289 | /*************************************************************************** |
| 1290 | |
| 1291 | Comments |
| 1292 | |
| 1293 | ***************************************************************************/ |
| 1294 | /* |
| 1295 | > .comment-create |
| 1296 | >> .forums-ic-panel |
| 1297 | > .reveal-modal |
| 1298 | > .forum-posts |
| 1299 | >> .forum-posts-sidebar |
| 1300 | >> .forum-post |
| 1301 | */ |
| 1302 | |
| 1303 | /* |
| 1304 | Comments container. |
| 1305 | If the divider hr needs to be modified, do it here (.comments hr) |
| 1306 | |
| 1307 | Note that no styling is applied to specific bulletin pages, |
| 1308 | so nothing will happen on there... |
| 1309 | */ |
| 1310 | .comments {} |
| 1311 | |
| 1312 | /* |
| 1313 | The section for making comments. |
| 1314 | The important part is the IC switch + hidden components. |
| 1315 | */ |
| 1316 | .comment-create {} |
| 1317 | |
| 1318 | /************************************************ |
| 1319 | .forums-ic-panel |
| 1320 | ************************************************/ |
| 1321 | |
| 1322 | /* |
| 1323 | The entire section containing the IC switch. |
| 1324 | */ |
| 1325 | .comment-create .forums-ic-panel |
| 1326 | { |
| 1327 | } |
| 1328 | |
| 1329 | .forums-ic-switch |
| 1330 | { |
| 1331 | width: 15%; |
| 1332 | float: left; |
| 1333 | clear: both; |
| 1334 | color: #a4bdcd; |
| 1335 | } |
| 1336 | .forums-ic-select |
| 1337 | { |
| 1338 | float: left; |
| 1339 | display: inline; |
| 1340 | clear: both; |
| 1341 | padding-left: 0px; |
| 1342 | padding-right: 0px; |
| 1343 | } |
| 1344 | #character_display, |
| 1345 | #character_display img |
| 1346 | { |
| 1347 | margin-right: 10px; |
| 1348 | } |
| 1349 | |
| 1350 | /* |
| 1351 | Affects both buttons. |
| 1352 | */ |
| 1353 | .comment-create .forums-ic-select .button |
| 1354 | { |
| 1355 | } |
| 1356 | .comment-create .forums-ic-select .button:hover {} |
| 1357 | |
| 1358 | /* |
| 1359 | Affects a specific button only. |
| 1360 | Can use for playing with alignment/line breaks. |
| 1361 | */ |
| 1362 | .comment-create .forums-ic-select #select_character {} |
| 1363 | .comment-create .forums-ic-select #select_image {} |
| 1364 | |
| 1365 | .comment-create .forums-ic-select #select_character:hover {} |
| 1366 | .comment-create .forums-ic-select #select_image:hover {} |
| 1367 | |
| 1368 | /* |
| 1369 | Can be used to style the textbox. |
| 1370 | Things to think about: |
| 1371 | padding, margins, colour, border-radius, box-shadow |
| 1372 | It's possible to make it entirely borderless/put |
| 1373 | a background image on it, but note that users can |
| 1374 | change the size of the textbox on their screen |
| 1375 | (not that this is a deterrent for doing cute things...) |
| 1376 | |
| 1377 | If a background colour is specified (even transparent), |
| 1378 | it does not darken when the user clicks on it. |
| 1379 | |
| 1380 | A fixed-sized textbox will be necessary if alignment's |
| 1381 | important, since we don't want it to deform too much when |
| 1382 | the user changes the window size...this is best used |
| 1383 | only with small textboxes tbh |
| 1384 | */ |
| 1385 | .form-control |
| 1386 | { |
| 1387 | background-color: #fff; |
| 1388 | border: 0px; |
| 1389 | box-shadow: 0px 0px 0px 1px #c1d7dd; |
| 1390 | color: #625966; |
| 1391 | } |
| 1392 | .form-control:focus |
| 1393 | { |
| 1394 | background-color: #fff; |
| 1395 | box-shadow: 0px 0px 6px 1px #c1d7dd; |
| 1396 | border: 0px; |
| 1397 | } |
| 1398 | |
| 1399 | /* |
| 1400 | The "Post Comment" button. |
| 1401 | Ideally all buttons should be styled the same, and |
| 1402 | all in one place though. |
| 1403 | */ |
| 1404 | .comment-create .button {} |
| 1405 | .comment-create .button:hover {} |
| 1406 | |
| 1407 | /************************************************ |
| 1408 | .reveal-modal |
| 1409 | ************************************************/ |
| 1410 | |
| 1411 | /* |
| 1412 | These are the things that pop up for selecting characters |
| 1413 | and images...and also affect the ones that do things |
| 1414 | like submit images for characters and stuff |
| 1415 | The latter don't need to be styled completely, |
| 1416 | but may be worth checking for how readable they are |
| 1417 | especially when working with a dark background |
| 1418 | |
| 1419 | .reveal-modal{} affects all modals; |
| 1420 | here I'll use their specific ids for comments. |
| 1421 | */ |
| 1422 | .select_character_panel, |
| 1423 | .select_image_panel {} |
| 1424 | |
| 1425 | /* title of the modal */ |
| 1426 | .select_character_panel h4, |
| 1427 | .select_image_panel h4 {} |
| 1428 | |
| 1429 | /* selection area of the modal */ |
| 1430 | .select_character_panel .panel, |
| 1431 | .select_image_panel .panel {} |
| 1432 | |
| 1433 | /* more specific versions */ |
| 1434 | .select_character_panel .character-select-panel {} |
| 1435 | .select_image_panel .image-select-panel {} |
| 1436 | |
| 1437 | /* character selection */ |
| 1438 | .select_character_panel .character-select-row {} |
| 1439 | .select_character_panel .character-select-row:hover |
| 1440 | { |
| 1441 | background-color: #d7e9ec; |
| 1442 | } |
| 1443 | |
| 1444 | /* image selection */ |
| 1445 | .select_image_panel .image-select-cell {} |
| 1446 | .select_image_panel .image-select-cell:hover |
| 1447 | { |
| 1448 | background-color: #d7e9ec; |
| 1449 | } |
| 1450 | |
| 1451 | /* .button doesn't work, so use these */ |
| 1452 | .select_character_panel .character-select-button, |
| 1453 | .select_image_panel .image-select-button |
| 1454 | { |
| 1455 | background-color: #9398b3; |
| 1456 | color: #d7e9ec; |
| 1457 | border-radius: 3px; |
| 1458 | } |
| 1459 | |
| 1460 | .select_character_panel .character-select-button:hover, |
| 1461 | .select_image_panel .image-select-button:hover |
| 1462 | { |
| 1463 | background-color: #a4bdcd; |
| 1464 | } |
| 1465 | |
| 1466 | .select_image_panel .small-block-grid-5 |
| 1467 | { |
| 1468 | margin: 0px; |
| 1469 | } |
| 1470 | |
| 1471 | /************************************************ |
| 1472 | .forum-posts |
| 1473 | ************************************************/ |
| 1474 | |
| 1475 | /* |
| 1476 | A container that holds each individual comment. |
| 1477 | Adjust the padding here, add a line to |
| 1478 | differentiate individual comments... |
| 1479 | */ |
| 1480 | .forum-posts {} |
| 1481 | |
| 1482 | /* |
| 1483 | Holds the user's avatar. Can be used to crop |
| 1484 | the image by way of overflow: hidden;. |
| 1485 | */ |
| 1486 | .forum-posts .forum-posts-sidebar {} |
| 1487 | |
| 1488 | /* Holds the main content of the post. */ |
| 1489 | .forum-posts .forum-post {} |
| 1490 | |
| 1491 | /* |
| 1492 | Notes who (and which character if applicable) posted |
| 1493 | the comment, and when. |
| 1494 | The date can be styled with abbr. |
| 1495 | */ |
| 1496 | .forum-posts .forum-post .forum-post-caption |
| 1497 | { |
| 1498 | color: #9398b3; |
| 1499 | } |
| 1500 | |
| 1501 | /* |
| 1502 | For styling the Edit/Delete buttons. |
| 1503 | [.label] gets both of them, while [.label.alert] |
| 1504 | only gets the delete button. |
| 1505 | */ |
| 1506 | .forum-posts .forum-post .label {} |
| 1507 | .forum-posts .forum-post .label.alert {} |
| 1508 | |
| 1509 | .forum-posts .forum-post .label:hover {} |
| 1510 | .forum-posts .forum-post .label.alert:hover {} |
| 1511 | |
| 1512 | /* |
| 1513 | Main text content. |
| 1514 | If there's no universal styling for .panel, |
| 1515 | the background/border etc. can be changed here. |
| 1516 | */ |
| 1517 | .forum-posts .forum-post-content |
| 1518 | { |
| 1519 | padding: 9px 20px 9px 19px; |
| 1520 | border-left: 5px solid #d7e9ec; |
| 1521 | border-radius: 3px; |
| 1522 | } |
| 1523 | |
| 1524 | .comment-replies |
| 1525 | { |
| 1526 | margin-top: 10px; |
| 1527 | border-left: 10px solid #c1d7dd; |
| 1528 | border-radius: 3px; |
| 1529 | } |
| 1530 | .forum-post |
| 1531 | { |
| 1532 | margin-top: 10px; |
| 1533 | } |
| 1534 | .forum-post-content |
| 1535 | { |
| 1536 | margin-top: 2px; |
| 1537 | } |
| 1538 | .forum-post-caption |
| 1539 | { |
| 1540 | width: 50%; |
| 1541 | } |
| 1542 | .forum-post .label, |
| 1543 | .forum-post .label.alert |
| 1544 | { |
| 1545 | margin-top: -21px; |
| 1546 | } |
