post.module.css
1 .content { 2 margin-bottom: 15px; 3 overflow-x: hidden; 4 } 5 6 .error { 7 color: red; 8 padding: 5px; 9 display: block; 10 } 11 12 .thread { 13 clear: both; 14 } 15 16 .hrWrapper hr { 17 margin: 0; /* margin bugs Virtuoso scrolling */ 18 } 19 20 .postDesktop .hrWrapper { 21 padding: 0.5em 0; /* instead of using margin, wrap with padding */ 22 } 23 24 .hideButtonWrapper { 25 height: 15px; 26 width: 18px; 27 padding-right: 5px; 28 float: left; 29 } 30 31 .postDesktop .hideButton { 32 background-repeat: no-repeat; 33 background-position: center; 34 width: 18px; 35 height: 18px; 36 display: inline-block; 37 image-rendering: pixelated; 38 cursor: pointer; 39 transform: translateY(-1px); 40 } 41 42 .postDesktopHidden { 43 opacity: 0.5; 44 } 45 46 /* clearfix to contain float elements */ 47 .postDesktop::after { 48 content: ""; 49 display: table; 50 clear: both; 51 } 52 53 .postDesktop .hideThread { 54 background-image: var(--post-hide-button-background-image); 55 } 56 57 .postDesktop .unhideThread { 58 background-image: var(--post-unhide-button-background-image); 59 } 60 61 .postDesktop .fileText a { 62 color: var(--post-link-text-color); 63 text-decoration: var(--post-link-text-decoration); 64 } 65 66 .postDesktop .fileText a:hover { 67 color: var(--post-link-text-color-hover); 68 text-decoration: var(--post-link-text-decoration-hover); 69 } 70 71 .postDesktop .postInfo { 72 width: 100%; 73 } 74 75 .userAddress { 76 padding: 0 5px; 77 border-radius: 6px; 78 font-size: 0.8em; 79 cursor: pointer; 80 } 81 82 .userAddress:hover { 83 color: var(--post-quotelink-text-color-hover) !important; 84 } 85 86 .postDesktop .subject { 87 color: var(--post-subject-text-color); 88 font-weight: var(--post-subject-font-weight); 89 } 90 91 .postDesktop .name, .replyDesktop .name { 92 color: var(--post-name-text-color); 93 font-weight: var(--post-name-font-weight); 94 } 95 96 .postDesktop .postNumLink a, .postDesktop .postNumLink span, .replyDesktop .postNumLink a, .replyDesktop .postNumLink span { 97 color: unset; 98 text-decoration: unset; 99 } 100 101 .postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover { 102 color: var(--button-desktop-text-color-hover); 103 } 104 105 .postDesktop .stickyIconWrapper, .replyDesktop .stickyIconWrapper { 106 padding-left: 5px; 107 padding-right: 10px; 108 } 109 110 .postDesktop .closedIconWrapper { 111 padding-left: 5px; 112 padding-right: 10px; 113 } 114 115 .postDesktop .addPaddingInBetween { 116 padding-left: 8px; 117 } 118 119 .stickyIconWrapper img, .closedIconWrapper img { 120 position: absolute; 121 width: 16px; 122 height: 16px; 123 image-rendering: pixelated; 124 } 125 126 .postDesktop .addPaddingBeforeReply { 127 padding-right: 15px; 128 } 129 130 .postDesktop .closeMedia { 131 color: var(--button-desktop-text-color); 132 text-decoration: underline; 133 text-transform: capitalize; 134 } 135 136 .postDesktop .closeMedia:hover { 137 cursor: pointer; 138 color: var(--button-desktop-text-color-hover); 139 } 140 141 .postDesktop .replyButton { 142 padding-left: 10px; 143 } 144 145 .postDesktop .replyButton a { 146 color: var(--button-desktop-text-color); 147 text-decoration: var(--button-desktop-text-decoration); 148 text-transform: capitalize; 149 } 150 151 .postDesktop .replyButton a:hover { 152 cursor: pointer; 153 color: var(--button-desktop-text-color-hover); 154 } 155 156 .postDesktop .spacer { 157 width: 100%; 158 padding: 5px; 159 } 160 161 .postDesktop .postMessage, .replyDesktop .postMessage { 162 padding: 1em 40px; 163 overflow: hidden; 164 word-break: break-word; 165 } 166 167 .rulesMessage { 168 font-weight: 700 !important; 169 } 170 171 .postDesktop .abbr { 172 color: var(--post-mobile-abbr-text-color); 173 font-size: var(--post-mobile-abbr-font-size); 174 } 175 176 .postDesktop .abbr a, .postDesktop .abbr span { 177 color: var(--post-link-text-color); 178 text-decoration: var(--post-content-link-text-decoration); 179 } 180 181 .postDesktop .abbr a:hover, .postDesktop .abbr span:hover { 182 cursor: pointer; 183 color: var(--post-link-text-color-hover); 184 text-decoration: var(--post-content-link-text-decoration-hover); 185 } 186 187 .postDesktop .summary { 188 padding-top: 10px; 189 padding-left: 23px; 190 position: relative; 191 color: var(--post-mobile-abbr-text-color); 192 } 193 194 .stateString { 195 color: var(--post-mobile-abbr-text-color); 196 } 197 198 .loadingString { 199 display: block; 200 color: var(--post-mobile-abbr-text-color); 201 } 202 203 .postDesktop .summary .omittedRepliesButtonWrapper { 204 position: absolute; 205 top: 8px; 206 left: 2px; 207 } 208 209 .postDesktop .summary .omittedRepliesButtonWrapper { 210 background-repeat: no-repeat; 211 background-position: center; 212 width: 18px; 213 height: 18px; 214 display: inline-block; 215 image-rendering: pixelated; 216 cursor: pointer; 217 } 218 219 .postDesktop .summary .hideOmittedReplies { 220 background-image: var(--post-hide-button-background-image); 221 } 222 223 .postDesktop .summary .showOmittedReplies { 224 background-image: var(--post-unhide-button-background-image); 225 } 226 227 .postDesktop .summary a { 228 color: var(--post-link-text-color); 229 text-decoration: var(--post-content-link-text-decoration); 230 } 231 232 .postDesktop .summary a:hover { 233 color: var(--post-link-text-color-hover); 234 text-decoration: var(--post-content-link-text-decoration-hover); 235 } 236 237 /* clearfix to contain float elements */ 238 .postMobile .postOp::after { 239 content: ""; 240 display: table; 241 clear: both; 242 } 243 244 .postMobile hr { 245 padding-bottom: 30px; 246 } 247 248 .postMobile .thread { 249 border-top: none; 250 margin: 0; 251 clear: both; 252 padding-bottom: 30px; 253 } 254 255 .mobileUnhideButton { 256 padding: 10px 0; 257 display: flex; 258 justify-content: center; 259 } 260 261 .mobileUnhideButton span { 262 padding: 5px 18px 5px; 263 } 264 265 .unhideButtonHr { 266 margin: 0; 267 } 268 269 .quotePreview { 270 padding: 3px; 271 } 272 273 .postMobile .postContainer { 274 background-color: var(--post-mobile-background-color); 275 } 276 277 .postMobile .postOp { 278 display: inline; 279 } 280 281 .postMobile .postInfo { 282 overflow: hidden; 283 border-bottom: var(--post-mobile-info-border-bottom); 284 border-top: var(--post-mobile-info-border-top); 285 background-color: var(--post-mobile-info-background-color); 286 color: var(--post-mobile-info-text-color); 287 padding: 5px; 288 clear: left; 289 } 290 291 .postMobile .nameBlock { 292 clear: none; 293 } 294 295 .postMobile .nameBlock .name { 296 color: var(--post-mobile-name-text-color); 297 font-weight: var(--post-mobile-name-font-weight); 298 } 299 300 .postMobile .stickyIconWrapper { 301 padding: 0 5px; 302 } 303 304 .postMobile .closedIconWrapper { 305 padding: 0 5px; 306 } 307 308 .postMobile .addPaddingInBetween { 309 padding: 0 13px; 310 } 311 312 .postMobile .nameBlock .subjectWrapper { 313 display: block; 314 } 315 316 .postMobile .nameBlock .subject { 317 color: var(--post-mobile-subject-text-color); 318 font-weight: var(--post-mobile-subject-font-weight); 319 white-space: nowrap; 320 overflow: hidden; 321 text-overflow: ellipsis; 322 } 323 324 .postMobile .dateTimePostNum { 325 display: block; 326 text-align: right; 327 } 328 329 .postMobile .postNumLink a { 330 color: unset; 331 text-decoration: unset; 332 } 333 334 .postMobile .postMessage { 335 padding: 10px; 336 font-size: var(--post-mobile-content-font-size); 337 overflow: hidden; 338 word-break: break-word; 339 } 340 341 .postMobile .postLink { 342 clear: both; 343 background-color: var(--post-mobile-link-background-color); 344 border-top: var(--post-mobile-link-border-top); 345 border-bottom: var(--post-mobile-link-border-bottom); 346 padding: 5px; 347 overflow: hidden; 348 display: flex; 349 justify-content: space-between; 350 align-items: center; 351 } 352 353 .postMobile .postLink .info { 354 color: var(--post-mobile-link-info-text-color); 355 } 356 357 .postMobile .abbr { 358 color: var(--post-mobile-abbr-text-color); 359 font-size: var(--post-mobile-abbr-font-size); 360 } 361 362 .postMobile .abbr a, .postMobile .abbr span { 363 color: var(--post-link-text-color); 364 text-decoration: var(--post-content-link-text-decoration); 365 366 } 367 368 .postMobile .abbr a:hover, .postMobile .abbr span:hover { 369 cursor: pointer; 370 color: var(--post-link-text-color-hover); 371 text-decoration: var(--post-content-link-text-decoration-hover); 372 } 373 374 .replyDesktop { 375 padding-top: 4px; 376 } 377 378 .replyDesktop .sideArrows { 379 color: var(--side-arrows-color); 380 float: left; 381 padding: 0 2px; 382 } 383 384 .replyDesktop .reply { 385 background-color: var(--reply-desktop-background-color); 386 border: var(--reply-desktop-border); 387 border-top: var(--reply-desktop-border-top, revert); 388 border-left: var(--reply-desktop-border-left, revert); 389 display: table; 390 padding: 0 2px 2px 2px; 391 } 392 393 .replyDesktop .postInfo { 394 padding: 3px 3px 0 0; 395 } 396 397 .quoteLink { 398 color: var(--post-quotelink-text-color); 399 text-decoration: var(--post-quotelink-text-decoration); 400 } 401 402 .quoteLink:hover { 403 color: var(--post-quotelink-text-color-hover); 404 text-decoration: var(--post-quotelink-text-decoration-hover); 405 cursor: pointer; 406 } 407 408 .replyMobile { 409 padding-top: 7px; 410 } 411 412 .replyMobile .replyContainer { 413 background-color: var(--post-mobile-background-color); 414 border-bottom: var(--post-mobile-border-bottom); 415 } 416 417 /* clearfix to contain float elements */ 418 .replyMobile .replyContainer::after { 419 content: ""; 420 display: table; 421 clear: both; 422 } 423 424 .replyMobile .postInfo { 425 padding: 5px; 426 border-top: var(--post-mobile-info-border-top); 427 border-bottom: var(--post-mobile-info-border-bottom); 428 background-color: var(--post-mobile-info-background-color); 429 color: var(--post-mobile-info-text-color); 430 } 431 432 .replyMobile .nameBlock { 433 display: inline; 434 float: left; 435 } 436 437 .replyMobile .dateTimePostNum { 438 float: right; 439 text-align: right; 440 } 441 442 .capcodeMod { 443 color: var(--post-capcode-mod-text-color) !important; 444 } 445 446 .pendingCid { 447 color: red !important; 448 font-weight: 700 !important; 449 } 450 451 .replyToPost { 452 cursor: pointer; 453 } 454 455 .redEditMessage { 456 text-transform: uppercase; 457 font-weight: 700; 458 color: red; 459 } 460 461 .grayEditMessage { 462 color: var(--post-mobile-abbr-text-color); 463 } 464 465 .backlink, .backlinkHash { 466 font-size: 0.8em; 467 } 468 469 .backlink { 470 padding-left: 5px; 471 } 472 473 .backlink, .backlinkHash { 474 color: var(--post-backlink-text-color); 475 text-decoration: var(--post-backlink-text-decoration); 476 } 477 478 .backlink:hover, .backlinkHash:hover { 479 color: var(--post-backlink-text-color-hover); 480 text-decoration: var(--post-backlink-text-decoration-hover); 481 cursor: pointer; 482 } 483 484 .mobileReplyBacklinks { 485 padding: 0 0; 486 padding-bottom: 3px; 487 line-height: 2; 488 background-color: var(--reply-backlink-mobile-background-color); 489 border-top: var(--reply-backlink-mobile-border-top); 490 clear: both; 491 } 492 493 .highlight { 494 background: var(--reply-highlight-background-color) !important; 495 } 496 497 .replyQuotePreview { 498 background: var(--quote-preview-background); 499 border: var(--quote-preview-border); 500 border-right: var(--quote-preview-border-right); 501 border-bottom: var(--quote-preview-border-bottom); 502 } 503 504 .postDesktop .replyQuotePreviewSpacer { 505 padding: 1.5px 0; 506 } 507 508 .editedInfo { 509 color: var(--post-mobile-abbr-text-color); 510 } 511 512 .showOriginal { 513 color: var(--post-link-text-color); 514 text-decoration: var(--post-content-link-text-decoration); 515 } 516 517 .showOriginal:hover { 518 cursor: pointer; 519 color: var(--post-link-text-color-hover); 520 text-decoration: var(--post-content-link-text-decoration-hover); 521 } 522 523 .authorAvatar { 524 width: 24px; 525 display: inline-block; 526 position: relative; 527 padding-right: 2px; 528 } 529 530 .authorAvatar img { 531 width: 24px; 532 max-height: 24px; 533 position: absolute; 534 bottom: -5px; 535 } 536 537 @media (max-width: 640px) { 538 .replyQuotePreview { 539 margin-right: 10px; 540 } 541 542 .postDesktop { 543 display: none; 544 } 545 546 .replyDesktop { 547 display: none; 548 } 549 550 .loadingString { 551 margin-top: 10px; 552 margin-left: 5px; 553 } 554 555 .authorAvatar { 556 width: 20px; 557 } 558 559 .authorAvatar img { 560 width: 20px; 561 max-height: 20px; 562 bottom: -3px; 563 } 564 } 565 566 @media (min-width: 640px) { 567 .error { 568 padding-left: 0; 569 padding-bottom: 0; 570 } 571 572 .replyQuotePreview { 573 padding-right: 7px; 574 padding-left: 2px; 575 } 576 577 .postMobile { 578 display: none; 579 } 580 581 .replyMobile { 582 display: none; 583 } 584 }