| 1 | /*************************************************************************** |
| 2 | |
| 3 | TOYHOUSE UTILITY CSS |
| 4 | |
| 5 | These are small tweaks that are meant to be |
| 6 | used with the default layout, but should |
| 7 | work otherwise...probably... |
| 8 | Feel free to use/incorporate any part of this |
| 9 | in a separate stylesheet, credit optional. |
| 10 | |
| 11 | Last updated 28/8/15 |
| 12 | |
| 13 | http://toyhou.se/aleator |
| 14 | |
| 15 | ***************************************************************************/ |
| 16 | |
| 17 | /*************************************************************************** |
| 18 | |
| 19 | [PROFILE][CHARACTER] |
| 20 | = padding and margins |
| 21 | |
| 22 | Some divs could use a bit more padding |
| 23 | and wider margins |
| 24 | |
| 25 | |
| 26 | ***************************************************************************/ |
| 27 | |
| 28 | /* separate main page content from the recent panels */ |
| 29 | .profile-characters .profile-characters-content.panel |
| 30 | { |
| 31 | margin-top: 20px; |
| 32 | } |
| 33 | |
| 34 | /* bring content slightly further away from the sides */ |
| 35 | #content |
| 36 | { |
| 37 | padding-left: 30px; |
| 38 | padding-right: 30px; |
| 39 | } |
| 40 | |
| 41 | /* move the bulletin comment link slightly lower*/ |
| 42 | .bulletin-post .text-center |
| 43 | { |
| 44 | padding-top: 30px; |
| 45 | } |
| 46 | |
| 47 | /* space out the IC switch and hidden stuff for comments |
| 48 | use with comment box tweaks below for better effect */ |
| 49 | .forums-ic-switch |
| 50 | { |
| 51 | margin-bottom: 10px; |
| 52 | } |
| 53 | .forums-ic-select |
| 54 | { |
| 55 | padding: 0px; |
| 56 | margin: 0px 20px 10px 20px; |
| 57 | } |
| 58 | |
| 59 | /*************************************************************************** |
| 60 | |
| 61 | [PROFILE][CHARACTER] |
| 62 | = removing parts |
| 63 | |
| 64 | Removes various parts of the layout |
| 65 | You can choose only the ones you need; |
| 66 | all of them are disabled by default. |
| 67 | Uncomment to turn it on. |
| 68 | |
| 69 | |
| 70 | ***************************************************************************/ |
| 71 | |
| 72 | /* === header === */ |
| 73 | |
| 74 | /* #header { display: none; } */ |
| 75 | |
| 76 | /* === footer === */ |
| 77 | |
| 78 | /* #footer, .profiler { display: none; } */ |
| 79 | |
| 80 | /* === sidebar header === |
| 81 | The blue thing in the sidebar */ |
| 82 | |
| 83 | /*.side-nav li.header { display: none; } */ |
| 84 | |
| 85 | /* === profile page recent panels === */ |
| 86 | /*.profile-characters .profile-characters-content.panel, |
| 87 | .profile-characters .profile-images-content.panel |
| 88 | { |
| 89 | display: none; |
| 90 | }*/ |
| 91 | |
| 92 | /* === character page user link in sidebar === */ |
| 93 | /*.side-nav .display-user-tiny, |
| 94 | .side-nav .display-user-tiny a |
| 95 | { |
| 96 | display: none; |
| 97 | }*/ |
| 98 | |
| 99 | /* === character page character stats === |
| 100 | See below for an alternative to getting |
| 101 | rid of the stats panel |
| 102 | */ |
| 103 | /*.character-stats { display: none; } */ |
| 104 | |
| 105 | /*************************************************************************** |
| 106 | |
| 107 | [PROFILE][CHARACTER] |
| 108 | = comment box |
| 109 | |
| 110 | Rearranges the things in the comment box, |
| 111 | mainly with regards to the IC commenting switch |
| 112 | and the buttons that appear when it's turned on |
| 113 | |
| 114 | The reasoning is that if you have long character |
| 115 | names and a small window it'll break the |
| 116 | layout and look quite bad, so here I'm |
| 117 | splitting them into different lines and/or |
| 118 | just rearranging them so it's less likely to happen. |
| 119 | |
| 120 | The left-aligned version is active by default, |
| 121 | comment it out and uncomment the right-aligned version |
| 122 | to use it. |
| 123 | |
| 124 | |
| 125 | ***************************************************************************/ |
| 126 | |
| 127 | /* |
| 128 | === left-aligned === |
| 129 | |
| 130 | IC switch on the left. Hidden parts appear |
| 131 | on the line underneath the switch. |
| 132 | |
| 133 | */ |
| 134 | |
| 135 | .forums-ic-switch |
| 136 | { |
| 137 | width: 15%; |
| 138 | float: left; |
| 139 | clear: both; |
| 140 | } |
| 141 | .forums-ic-select |
| 142 | { |
| 143 | float: left; |
| 144 | display: inline; |
| 145 | clear: both; |
| 146 | padding-left: 0px; |
| 147 | padding-right: 0px; |
| 148 | } |
| 149 | .character_display, |
| 150 | .character_display img |
| 151 | { |
| 152 | margin-right: 10px; |
| 153 | } |
| 154 | |
| 155 | |
| 156 | /* |
| 157 | === right-aligned === |
| 158 | |
| 159 | IC switch on the left. Hidden parts appear |
| 160 | on the right side, character name and buttons |
| 161 | split into two lines with the buttons |
| 162 | appearing underneath the character. |
| 163 | |
| 164 | "POST IC" text fits on one line instead of two. |
| 165 | |
| 166 | */ |
| 167 | |
| 168 | /* |
| 169 | .forums-ic-switch |
| 170 | { |
| 171 | float: left; |
| 172 | width: 4em; |
| 173 | padding-right: 0px; |
| 174 | padding-left: 0px; |
| 175 | |
| 176 | } |
| 177 | .forums-ic-select |
| 178 | { |
| 179 | float: right; |
| 180 | width: auto !important; |
| 181 | padding-right: 0px; |
| 182 | text-align: right; |
| 183 | } |
| 184 | .forums-ic-select .button |
| 185 | { |
| 186 | margin-right: 0px; |
| 187 | } |
| 188 | |
| 189 | .character_display |
| 190 | { |
| 191 | float: right; |
| 192 | clear: both; |
| 193 | margin-bottom: 10px; |
| 194 | } |
| 195 | |
| 196 | .select_character, .select_image |
| 197 | { |
| 198 | float: right; |
| 199 | } |
| 200 | |
| 201 | .select_character |
| 202 | { |
| 203 | clear: right; |
| 204 | } |
| 205 | */ |
| 206 | |
| 207 | /*************************************************************************** |
| 208 | |
| 209 | [PROFILE][CHARACTER] |
| 210 | = comment labels |
| 211 | |
| 212 | This is probably an overly specific thing but |
| 213 | it shifts the edit/delete labels on the |
| 214 | comment box above the box, rather than |
| 215 | stuck in the corner which looks ugly when |
| 216 | the comment content is long enough to go near it |
| 217 | It also makes the caption (posted by ___) break |
| 218 | into multiple lines if the user/character name is long. |
| 219 | |
| 220 | |
| 221 | ***************************************************************************/ |
| 222 | |
| 223 | .forum-post-content |
| 224 | { |
| 225 | margin-top: 2px; |
| 226 | } |
| 227 | .forum-post-caption |
| 228 | { |
| 229 | width: 50%; |
| 230 | } |
| 231 | .forum-post .label, |
| 232 | .forum-post .label.alert |
| 233 | { |
| 234 | margin-top: -21px; |
| 235 | } |
| 236 | |
| 237 | /* This sends the date onto a new line |
| 238 | which looks neater with long names, |
| 239 | but it's also excessively long, I |
| 240 | haven't figured out how to deal with this */ |
| 241 | /* |
| 242 | .forum-post-caption abbr |
| 243 | { |
| 244 | display: block; |
| 245 | } |
| 246 | .forum-post-caption .datetime |
| 247 | { |
| 248 | border-bottom: 0px; |
| 249 | margin-bottom: 3px; |
| 250 | } |
| 251 | */ |
| 252 | |
| 253 | /*************************************************************************** |
| 254 | |
| 255 | [PROFILE][CHARACTER] |
| 256 | = comment box fix |
| 257 | |
| 258 | Fixes a problem with the comment divs where the box stretches |
| 259 | under other boxes, mostly a problem if you're trying to style |
| 260 | the comments. |
| 261 | |
| 262 | ***************************************************************************/ |
| 263 | |
| 264 | .comment |
| 265 | { |
| 266 | overflow: hidden; |
| 267 | } |
| 268 | |
| 269 | /*************************************************************************** |
| 270 | |
| 271 | [PROFILE ONLY] |
| 272 | = character labels/details |
| 273 | |
| 274 | Tidies up the labels. |
| 275 | - Breaks character names into multiple lines |
| 276 | if they're too long, instead of stretching |
| 277 | into someone else's territory. |
| 278 | (Side effect: label now stretches the width of |
| 279 | the thumbnail even if the name is short) |
| 280 | - Separates short character/user names into two lines. |
| 281 | - Splits the edit icon onto another line. |
| 282 | - Splits the count icons onto multiple lines |
| 283 | if they're too long. |
| 284 | - Centres everything below the character. |
| 285 | |
| 286 | |
| 287 | ***************************************************************************/ |
| 288 | |
| 289 | .profile-characters .thumb-caption, |
| 290 | .profile-creations .thumb-caption |
| 291 | { |
| 292 | margin-left: auto; |
| 293 | margin-right; auto; |
| 294 | } |
| 295 | .profile-characters .thumb-caption .label.primary, |
| 296 | .profile-characters .thumb-caption .label.secondary, |
| 297 | .profile-characters .thumb-caption .nowrap, |
| 298 | .profile-creations .thumb-caption .label.primary, |
| 299 | .profile-creations .thumb-caption .label.secondary, |
| 300 | .profile-gallery .gallery-thumb .label, |
| 301 | .profile-characters .gallery-thumb .label.secondary |
| 302 | { |
| 303 | margin-left: auto; |
| 304 | margin-right: auto; |
| 305 | display: block; |
| 306 | white-space: normal !important; |
| 307 | } |
| 308 | |
| 309 | /* comment out this section if you don't want the |
| 310 | pencil on a different line */ |
| 311 | .profile-characters .thumb-caption div.label.muted |
| 312 | { |
| 313 | margin-top: 6px; |
| 314 | margin-bottom: 6px; |
| 315 | margin-left: auto; |
| 316 | margin-right: auto; |
| 317 | display: block; |
| 318 | white-space: normal !important; |
| 319 | } |
| 320 | |
| 321 | /*************************************************************************** |
| 322 | |
| 323 | [PROFILE ONLY] |
| 324 | = featured character images |
| 325 | |
| 326 | Centres the images under the featured character on the main |
| 327 | profile page. |
| 328 | Depending on the width of the section thumbnails might break |
| 329 | onto another line, so you might want to adjust the width slightly. |
| 330 | |
| 331 | ***************************************************************************/ |
| 332 | |
| 333 | .profile-feature .profile-feature-content.panel li |
| 334 | { |
| 335 | float: none; |
| 336 | display: inline-block; |
| 337 | /* width: 16%; */ |
| 338 | } |
| 339 | |
| 340 | /*************************************************************************** |
| 341 | |
| 342 | [CHARACTER ONLY] |
| 343 | = character stats hack |
| 344 | |
| 345 | * Only works on character main page. |
| 346 | |
| 347 | Turns the character stats panel into an image |
| 348 | centred above the fields section. |
| 349 | |
| 350 | The obvious downside is that you can't show |
| 351 | the character stats, but I've also been |
| 352 | unable to find a way to style the stats to |
| 353 | look good lol (especially since it's forced |
| 354 | to float right). |
| 355 | Also, the rest of the content has to float |
| 356 | left, or weird things will happen. |
| 357 | |
| 358 | |
| 359 | ***************************************************************************/ |
| 360 | |
| 361 | .character-stats |
| 362 | { |
| 363 | width: 100%; |
| 364 | background-color: transparent; |
| 365 | border: 0px; |
| 366 | display: block; |
| 367 | background-repeat: no-repeat; |
| 368 | background-position: center; |
| 369 | |
| 370 | /* change these two to match your image */ |
| 371 | /* it means you have to individually paste the css into every character */ |
| 372 | /* and modify it from there but I can't think of an easy way to do this */ |
| 373 | height: 300px; |
| 374 | background-image: url('http://placekitten.com/g/200/300'); |
| 375 | |
| 376 | } |
| 377 | |
| 378 | .character-stat-row, |
| 379 | .character-stat-row img, |
| 380 | .character-stat-title, |
| 381 | .character-stat-row .label, |
| 382 | .character-stats abbr |
| 383 | { |
| 384 | display: none; |
| 385 | } |
| 386 | |
| 387 | .character-fields, |
| 388 | .character-text, |
| 389 | .character-recent-images |
| 390 | { |
| 391 | display: block; |
| 392 | float: left; |
| 393 | clear: both; |
| 394 | width: 100%; |
| 395 | } |
