wcfsetup/install/files/style/message.less

   1 /* ### message groups ### */
   2 .messageGroupList {
   3         .columnSubject {
   4                 > .labelList {
   5                         float: right;
   6                         padding-left: 7px;
   7                 }
   8
   9                 > h3 {
  10                         > .messageGroupLink {
  11                                 font-size: @wcfTitleFontSize;
  12                         }
  13
  14                         > .badge.label {
  15                                 top: -2px;
  16                         }
  17                 }
  18
  19                 > small {
  20                         display: block;
  21                 }
  22
  23                 > nav {
  24                         font-size: @wcfSmallFontSize;
  25
  26                         > ul > li {
  27                                 display: inline;
  28                         }
  29                 }
  30         }
  31
  32         tr {
  33                 &.new .columnSubject > h3 > .messageGroupLink {
  34                         font-weight: bold;
  35                 }
  36
  37                 &.new .columnAvatar div > p > img,
  38                 &:hover .columnAvatar div > p > img {
  39                         opacity: 1;
  40                 }
  41
  42                 &.messageDisabled {
  43                         color: @wcfDisabledColor;
  44
  45                         > td {
  46                                 background-color: @wcfDisabledBackgroundColor !important;
  47                         }
  48
  49                         a:not(.badge) {
  50                                 color: @wcfDisabledColor;
  51                         }
  52                 }
  53
  54                 &.messageDeleted {
  55                         color: @wcfDeletedColor;
  56
  57                         > td {
  58                                 background-color: @wcfDeletedBackgroundColor !important;
  59                         }
  60
  61                         a:not(.badge) {
  62                                 color: @wcfDeletedColor;
  63                         }
  64                 }
  65
  66                 .columnSubject .statusDisplay .pageNavigation {
  67                         opacity: 0;
  68
  69                         .transition(opacity, .2s);
  70                 }
  71
  72                 &:hover .columnSubject .statusDisplay .pageNavigation {
  73                         opacity: 1;
  74                 }
  75
  76                 &.new .columnAvatar > div {
  77                         &::after {
  78                                 color: @wcfLinkColor;
  79                                 content: "\f069";
  80                                 font-family: FontAwesome;
  81                                 font-weight: normal !important;
  82                                 font-style: normal !important;
  83                                 font-size: 14px;
  84                                 position: absolute;
  85                                 text-decoration: none !important;
  86                                 top: -4px;
  87                                 right: -2px;
  88
  89                                 .textShadow(@wcfContainerBackgroundColor);
  90                         }
  91                 }
  92         }
  93
  94         .columnAvatar {
  95                 div {
  96                         position: relative;
  97                         width: 40px;
  98                         height: 38px;
  99
 100                         > p > img {
 101                                 opacity: .6;
 102
 103                                 .transition(opacity, .2s);
 104                         }
 105                 }
 106
 107                 .myAvatar {
 108                         position: absolute;
 109                         width: 16px;
 110                         height: 16px;
 111                         bottom: -2px;
 112                         left: 24px;
 113                         opacity: 1;
 114
 115                         .boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
 116                 }
 117         }
 118
 119         .columnLastPost {
 120                 white-space: nowrap;
 121                 word-wrap: normal;
 122
 123                 > div > div > small {
 124                         color: @wcfDimmedColor;
 125                 }
 126         }
 127 }
 128
 129 /* ### messages ### */
 130 @media only screen and (min-width: 801px) {
 131         .messageList {
 132                 .messageGroupStarter {
 133                         position: relative;
 134
 135                         > .message::after {
 136                                 content: "\f005";
 137                                 font-family: FontAwesome;
 138                                 font-size: 14px;
 139                                 display: block;
 140                                 left: 4px;
 141                                 position: absolute;
 142                                 top: 2px;
 143
 144                                 .textShadow(@wcfSidebarBackgroundColor);
 145                         }
 146
 147                         > .message.messageSidebarOrientationRight::after {
 148                                 left: auto;
 149                                 right: 4px;
 150                         }
 151                 }
 152         }
 153 }
 154
 155 .message {
 156         background-color: @wcfContainerHoverBackgroundColor;
 157         border: 1px solid @wcfContainerBorderColor;
 158         //overflow: hidden; /* todo: fixes floating issues when using message on pages with a sidebar */
 159         position: relative;
 160
 161         &:hover {
 162                 .messageHeader .messageQuickOptions > li {
 163                         opacity: 1;
 164                 }
 165
 166                 .messageOptions nav {
 167                         opacity: 1;
 168                 }
 169         }
 170
 171         &.messageDisabled:not(.messageReduced) {
 172                 background-color: @wcfDisabledBackgroundColor;
 173
 174                 .messageSidebar {
 175                         color: @wcfDisabledColor;
 176
 177                         a {
 178                                 color: @wcfDisabledColor;
 179                         }
 180                 }
 181         }
 182
 183         &.messageDeleted:not(.messageReduced) {
 184                 background-color: @wcfDeletedBackgroundColor;
 185
 186                 .messageSidebar {
 187                         color: @wcfDeletedColor;
 188
 189                         a {
 190                                 color: @wcfDeletedColor;
 191                         }
 192                 }
 193         }
 194
 195         &.jsMarked:not(.messageReduced) {
 196                 background-color: @wcfSelectedBackgroundColor;
 197
 198                 .messageSidebar {
 199                         color: @wcfSelectedColor;
 200
 201                         a {
 202                                 color: @wcfSelectedColor;
 203                         }
 204                 }
 205         }
 206
 207         .messageOptions {
 208                 font-size: @wcfSmallFontSize;
 209                 position: relative;
 210
 211                 &.forceHidden nav {
 212                         display: none !important;
 213                 }
 214
 215                 &.forceOpen nav {
 216                         opacity: 1;
 217                 }
 218
 219                 nav {
 220                         bottom: -2px;
 221                         opacity: 0;
 222                         position: absolute;
 223                         right: -22px;
 224                         text-align: right;
 225
 226                         .transition(opacity, .1s);
 227
 228                         ul.smallButtons {
 229                                 > li {
 230                                         a.button {
 231                                                 border-radius: 0;
 232                                         }
 233                                 }
 234                         }
 235                 }
 236         }
 237
 238         .messageHeader {
 239                 .messageQuickOptions {
 240                         float: right;
 241
 242                         > li {
 243                                 display: inline-block;
 244                                 opacity: .6;
 245
 246                                 .transition(opacity, .2s);
 247
 248                                 span.icon {
 249                                         color: @wcfDimmedColor;
 250
 251                                         .transition(color, .2s);
 252                                 }
 253
 254                                 > a:hover > span.icon {
 255                                         color: @wcfLinkColor;
 256                                 }
 257                         }
 258
 259                         input[type=checkbox] {
 260                                 position: relative;
 261                                 top: 1px;
 262                         }
 263                 }
 264
 265                 .permalink {
 266                         color: @wcfDimmedColor;
 267                 }
 268         }
 269
 270         &.dividers {
 271                 .userCredits {
 272                         border-top: 1px solid @wcfContainerBorderColor;
 273                 }
 274         }
 275 }
 276
 277 .touch .message .messageOptions nav {
 278         opacity: 1;
 279 }
 280
 281 @media only screen and (max-width: 800px) {
 282         .message {
 283                 border-width: 1px 0;
 284         }
 285 }
 286
 287 /* sidebars orientations */
 288 .message.messageSidebarOrientationLeft {
 289         .messageContent {
 290                 border-left: 1px solid @wcfContainerBorderColor;
 291                 margin: 0 0 0 211px;
 292         }
 293
 294         .messageSidebar {
 295                 float: left;
 296         }
 297 }
 298
 299 .message.messageSidebarOrientationRight {
 300         .messageContent {
 301                 border-right: 1px solid @wcfContainerBorderColor;
 302                 margin: 0 211px 0 0;
 303         }
 304
 305         .messageSidebar {
 306                 float: right;
 307         }
 308 }
 309
 310 /* pointer */
 311 .message.messageSidebarOrientationLeft,
 312 .message.messageSidebarOrientationRight {
 313         .messageHeader {
 314                 &::before,
 315                 &::after {
 316                         border-width: 20px;
 317                         content: "";
 318                         display: block;
 319                         height: 0;
 320                         position: absolute;
 321                         top: 35px;
 322                         width: 0;
 323                 }
 324
 325                 &::before {
 326                         z-index: 100;
 327                 }
 328
 329                 &::after {
 330                         z-index: 101;
 331                 }
 332         }
 333 }
 334
 335 .message.messageSidebarOrientationLeft {
 336         .messageHeader {
 337                 &::before,
 338                 &::after {
 339                         border-style: inset solid inset none;
 340                 }
 341
 342                 &::before {
 343                         border-color: transparent @wcfContainerBorderColor transparent transparent;
 344                         left: -20px;
 345                 }
 346
 347                 &::after {
 348                         border-color: transparent @wcfContainerBackgroundColor transparent transparent;
 349                         left: -19px;
 350                 }
 351         }
 352 }
 353
 354 .message.messageSidebarOrientationRight {
 355         .messageHeader {
 356                 &::before,
 357                 &::after {
 358                         border-style: inset none inset solid;
 359                 }
 360
 361                 &::before {
 362                         border-color: transparent transparent transparent @wcfContainerBorderColor;
 363                         right: -20px;
 364                 }
 365
 366                 &::after {
 367                         border-color: transparent transparent transparent @wcfContainerBackgroundColor;
 368                         right: -19px;
 369                 }
 370         }
 371 }
 372
 373 /* new message badge */
 374 .message .newMessageBadge {
 375         color: @wcfTabularBoxColor;
 376         display: block;
 377         font-size: @wcfSmallFontSize;
 378         font-weight: bold;
 379         padding: 6px 10px;
 380         position: absolute;
 381         text-transform: uppercase;
 382         top: 24px;
 383
 384         .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
 385         .linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%));
 386         .textShadow(darken(@wcfTabularBoxBackgroundColor, 10%));
 387
 388         &::before {
 389                 border-bottom: 4px solid darken(@wcfTabularBoxBackgroundColor, 20%);
 390                 content: "";
 391                 display: block;
 392                 position: absolute;
 393                 top: -4px;
 394         }
 395 }
 396
 397 .message.messageSidebarOrientationLeft .newMessageBadge {
 398         border-radius: 0 5px 5px 0;
 399         left: -219px;
 400
 401         &::before {
 402                 border-left: 6px solid transparent;
 403                 left: 0;
 404         }
 405 }
 406
 407 .message.messageSidebarOrientationRight .newMessageBadge {
 408         right: -219px;
 409 }
 410
 411 .message.messageReduced .newMessageBadge {
 412         right: -7px;
 413         top: 21px;
 414 }
 415
 416 .message.messageSidebarOrientationRight,
 417 .message.messageReduced {
 418         .newMessageBadge {
 419                 border-radius: 5px 0 0 5px;
 420
 421                 &::before {
 422                         border-right: 6px solid transparent;
 423                         right: 0;
 424                 }
 425         }
 426 }
 427
 428 .messageBody {
 429         color: @wcfColor;
 430         display: block;
 431         line-height: 1.5;
 432
 433         > div:not(.messageFooter) {
 434                 overflow: hidden;
 435                 padding-bottom: @wcfGapMedium;
 436         }
 437
 438         > footer {
 439                 padding-bottom: @wcfGapMedium;
 440         }
 441
 442         > .messageSignature {
 443                 color: @wcfDimmedColor;
 444
 445                 img {
 446                         max-height: ~"@{wcf_option_signature_max_image_height}px";
 447                 }
 448         }
 449
 450         .messageFooter {
 451                 > *:not(:first-child) {
 452                         margin-top: @wcfGapSmall;
 453                 }
 454         }
 455 }
 456
 457 .messageFooterNote {
 458         border-left: 2px solid @wcfContainerBorderColor;
 459         color: @wcfDimmedColor;
 460         font-size: @wcfSmallFontSize;
 461         padding: @wcfGapTiny @wcfGapSmall;
 462
 463         @messageFooterNoteGradientColor: fade(@wcfContainerBorderColor, 20%);
 464         .linearGradientNative(~"90deg, @{messageFooterNoteGradientColor} 0%, transparent 40%");
 465 }
 466
 467 .messageHeader + .messageBody > div:first-child,
 468 .messageBody > div:not(.messageFooter):not(:first-child) {
 469         border-top: 1px dotted @wcfContainerBorderColor;
 470         padding: @wcfGapMedium 0;
 471 }
 472
 473 .message .messageBody {
 474         padding: @wcfGapMedium @wcfGapLarge 1px;
 475 }
 476
 477 .message .messageContent {
 478         background-color: @wcfContainerBackgroundColor;
 479
 480         .messageHeader {
 481                 padding: @wcfGapMedium @wcfGapLarge 0;
 482                 position: relative;
 483
 484                 .messageHeadline {
 485                         > h1 {
 486                                 color: @wcfColor;
 487                                 font-size: @wcfSubHeadlineFontSize;
 488                                 font-weight: bold;
 489                                 overflow: hidden;
 490                                 padding-right: 21px; // reserved space for new badge
 491                                 text-overflow: ellipsis;
 492
 493                                 .textShadow(@wcfContainerBackgroundColor);
 494
 495                                 + p {
 496                                         margin-top: 2px;
 497                                 }
 498                         }
 499
 500                         > p {
 501                                 font-size: @wcfSmallFontSize;
 502
 503                                 > .likesBadge {
 504                                         margin: -2px 0 -1px 4px;
 505                                 }
 506
 507                                 > .username::after {
 508                                         content: " - ";
 509                                 }
 510                         }
 511                 }
 512
 513                 .box32 > .messageHeadline > p:first-child {
 514                         font-size: 1rem;
 515
 516                         > .username {
 517                                 font-size: @wcfTitleFontSize;
 518                                 font-weight: bold;
 519
 520                                 .textShadow(@wcfContainerBackgroundColor);
 521                         }
 522
 523                         > .username {
 524                                 display: block;
 525                         }
 526
 527                         > .username::after {
 528                                 content: "";
 529                         }
 530
 531                         > .likesBadge {
 532                                 font-size: @wcfSmallFontSize;
 533                                 top: -1px;
 534                         }
 535                 }
 536         }
 537 }
 538
 539 .message .messageSidebar {
 540         line-height: 1.3;
 541         margin-bottom: -1px;
 542         padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge;
 543         position: relative;
 544         text-align: center;
 545         width: 170px; /* Width toggle */
 546
 547         &::after {
 548                 clear: both;
 549                 content: '';
 550                 display: block;
 551         }
 552
 553         header .username {
 554                 color: @wcfLinkColor;
 555                 font-size: @wcfTitleFontSize;
 556                 font-weight: bold;
 557                 padding: 0 3px 1px;
 558
 559                 .textShadow(@wcfContainerHoverBackgroundColor);
 560
 561                 a {
 562                         text-decoration: none;
 563                 }
 564         }
 565
 566         .userTitle {
 567                 margin: 7px 0 0;
 568         }
 569
 570         .userRank {
 571                 margin: 2px 0 0;
 572         }
 573
 574         .userAvatar {
 575                 display: inline-block;
 576                 margin: @wcfGapSmall 0 0;
 577                 position: relative;
 578                 text-align: left;
 579
 580                 > .badgeOnline {
 581                         border-radius: 0 5px 5px 0;
 582                         color: rgba(238, 255, 238, 1);
 583                         bottom: 7px;
 584                         left: -5px;
 585                         position: absolute;
 586                         text-transform: uppercase;
 587
 588                         .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
 589                         .linearGradient(darken(rgba(0, 153, 0, 1), 10%), rgba(0, 153, 0, 1), darken(rgba(0, 153, 0, 1), 10%));
 590                         .textShadow(darken(rgba(0, 153, 0, 1), 10%));
 591
 592                         &::before {
 593                                 border-bottom: 4px solid darken(rgba(0, 153, 0, 1), 20%);
 594                                 border-left: 6px solid transparent;
 595                                 content: "";
 596                                 display: block;
 597                                 left: 0;
 598                                 position: absolute;
 599                                 top: -4px;
 600                         }
 601                 }
 602         }
 603
 604         .userCredits {
 605                 font-size: @wcfSmallFontSize;
 606                 margin: @wcfGapSmall 0 0;
 607                 overflow: hidden;
 608                 padding: @wcfGapSmall 0 0;
 609
 610                 .dataList {
 611                         > dt {
 612                                 width: 46%;
 613                         }
 614
 615                         > dd {
 616                                 margin-left: 49%;
 617                                 word-wrap: break-word;
 618                         }
 619                 }
 620         }
 621 }
 622
 623 .message:not(.messageReduced) .messageOptions {
 624         .clearfix();
 625 }
 626
 627 .message:not(.messageReduced) .messageBody {
 628         .clearfix();
 629 }
 630
 631 li:nth-child(2n+1) .message {
 632         &.messageSidebarOrientationLeft .messageHeader::after {
 633                 border-right-color: @wcfContainerAccentBackgroundColor;
 634         }
 635
 636         &.messageSidebarOrientationRight .messageHeader::after {
 637                 border-left-color: @wcfContainerAccentBackgroundColor;
 638         }
 639
 640         .messageContent {
 641                 background-color: @wcfContainerAccentBackgroundColor;
 642         }
 643 }
 644
 645 .messageReduced {
 646         .messageOptions > .breadcrumbs {
 647                 bottom: 10px;
 648                 left: 0;
 649                 opacity: 1;
 650                 position: relative;
 651         }
 652
 653         &.messageDisabled {
 654                 border-color: @wcfDisabledColor;
 655
 656                 .messageContent {
 657                         @wcfDisabledBackgroundGradientColor: fade(@wcfDisabledBackgroundColor, 0%);
 658                         .linearGradientNative(~"180deg, @{wcfDisabledBackgroundColor}, @{wcfDisabledBackgroundGradientColor} 90px");
 659                 }
 660         }
 661
 662         &.messageDeleted {
 663                 border-color: @wcfDeletedColor;
 664
 665                 .messageContent {
 666                         @wcfDeletedBackgroundGradientColor: fade(@wcfDeletedBackgroundColor, 0%);
 667                         .linearGradientNative(~"180deg, @{wcfDeletedBackgroundColor}, @{wcfDeletedBackgroundGradientColor} 90px");
 668                 }
 669         }
 670
 671         &.jsMarked {
 672                 border-color: @wcfSelectedColor;
 673
 674                 .messageContent {
 675                         @wcfSelectedBackgroundGradientColor: fade(@wcfSelectedBackgroundColor, 0%);
 676                         .linearGradientNative(~"180deg, @{wcfSelectedBackgroundColor}, @{wcfSelectedBackgroundGradientColor} 90px");
 677                 }
 678         }
 679 }
 680
 681 .messageCollapsed {
 682         color: @wcfDimmedColor;
 683         opacity: .8;
 684         padding: @wcfGapMedium @wcfGapLarge;
 685
 686         .transition(opacity, .1s);
 687
 688         &:hover {
 689                 opacity: 1;
 690         }
 691
 692         &.messageCollapsedExpandable {
 693                 cursor: pointer;
 694         }
 695
 696         h1 {
 697                 font-size: @wcfSmallFontSize;
 698         }
 699
 700         .messageCounter {
 701                 padding-top: 3px;
 702         }
 703
 704         &.jsMarked {
 705                 background-color: @wcfSelectedBackgroundColor !important;
 706                 color: @wcfColor;
 707
 708                 a {
 709                         color: @wcfColor;
 710                 }
 711         }
 712 }
 713
 714 @media only screen and (max-width: 800px) {
 715         .messageCollapsed {
 716                 padding: @wcfGapSmall;
 717         }
 718 }
 719
 720 @media only screen and (min-width: 641px) and (max-width: 800px) {
 721         .messageCollapsed {
 722                 padding: @wcfGapSmall @wcfGapMedium;
 723         }
 724 }
 725
 726 /* quick reply and inline editor */
 727 .messageBody > span.icon-spinner {
 728         left: 50%;
 729         margin: -21px -21px 0 0;
 730         position: absolute;
 731         top: 50%;
 732 }
 733
 734 #messageQuickReply {
 735         .formSubmit {
 736                 padding-bottom: @wcfGapMedium;
 737         }
 738 }
 739
 740 /* message quotes */
 741 #showQuotes {
 742         bottom: @wcfGapLarge + @wcfGapTiny;
 743         cursor: pointer;
 744         opacity: .7;
 745         position: fixed;
 746         right: @wcfGapLarge + @wcfGapTiny;
 747
 748         .transition(opacity, .2s);
 749
 750         &:hover {
 751                 opacity: 1;
 752         }
 753 }
 754
 755 #messageQuoteList {
 756         max-width: 800px !important;
 757
 758         li {
 759                 &:not(:first-child) {
 760                         margin-top: @wcfGapSmall;
 761                 }
 762
 763                 > span {
 764                         float: left;
 765                         width: 40px;
 766
 767                         > input {
 768                                 vertical-align: bottom;
 769                         }
 770
 771                         > span {
 772                                 cursor: pointer;
 773                                 vertical-align: middle;
 774                         }
 775                 }
 776
 777                 div.jsQuote {
 778                         margin-left: 60px;
 779                 }
 780
 781                 div.jsFullQuote {
 782                         display: none;
 783                 }
 784         }
 785 }
 786
 787 #quoteManagerCopy {
 788         cursor: pointer;
 789
 790         .pointer {
 791                 border-width: 5px 5px 0;
 792                 bottom: -5px;
 793                 margin-left: -5px;
 794                 top: auto;
 795         }
 796 }
 797
 798 /* share buttons */
 799 .messageShareButtons {
 800         > ul > li {
 801                 display: inline-block;
 802
 803                 > a {
 804                         text-decoration: none;
 805
 806                         > .icon {
 807                                 height: 28px;
 808                         }
 809                 }
 810
 811                 > .badge {
 812                         background-color: @wcfContainerBackgroundColor;
 813                         border: 1px solid @wcfContainerBorderColor;
 814                         border-radius: 3px;
 815                         color: @wcfColor;
 816                         line-height: 23px;
 817                         padding: 0 7px;
 818                         position: relative;
 819                         vertical-align: 1px;
 820
 821                         &::before {
 822                                 border: 6px solid @wcfContainerBorderColor;
 823                                 border-color: transparent @wcfContainerBorderColor transparent transparent;
 824                                 content: "";
 825                                 display: block;
 826                                 height: 0;
 827                                 margin-top: -6px;
 828                                 position: absolute;
 829                                 right: 100%;
 830                                 top: 50%;
 831                                 width: 0;
 832                         }
 833
 834                         &::after {
 835                                 border: 6px solid @wcfContainerBackgroundColor;
 836                                 border-color: transparent @wcfContainerBackgroundColor transparent transparent;
 837                                 content: "";
 838                                 display: block;
 839                                 height: 0;
 840                                 margin-right: -1px;
 841                                 margin-top: -6px;
 842                                 position: absolute;
 843                                 right: 100%;
 844                                 top: 50%;
 845                                 width: 0;
 846                         }
 847                 }
 848         }
 849
 850         .jsShareFacebook {
 851                 > a > .icon {
 852                         color: rgb(59, 89, 152);
 853                 }
 854         }
 855
 856         .jsShareTwitter {
 857                 > a > .icon {
 858                         color: rgb(64, 153, 255);
 859                 }
 860         }
 861
 862         .jsShareGoogle {
 863                 > a > .icon {
 864                         color: rgb(211, 72, 54);
 865                 }
 866         }
 867
 868         .jsShareReddit {
 869                 > a > img {
 870                         width: 24px;
 871                         height: 24px;
 872                         margin: 0 4px 4px;
 873                         box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
 874                         border-radius: 3px;
 875
 876                         /* smooth fixes */
 877                         background-color: rgba(255, 255, 255, .8);
 878                 }
 879         }
 880 }
 881
 882 .contentNavigation > .messageShareButtons {
 883         float: right;
 884         margin-right: @wcfGapMedium;
 885         margin-top: 0;
 886 }
 887
 888 .messageSearchResultList {
 889         > li > .box48 > div > .containerHeadline > h3 {
 890                 padding-right: 100px;
 891         }
 892 }
 893
 894 .likeButton.active {
 895         .icon {
 896                 color: rgba(0, 153, 0, 1);
 897         }
 898 }
 899
 900 .dislikeButton.active {
 901         .icon {
 902                 color: rgba(204, 0, 0, 1);
 903         }
 904 }
 905
 906 /* ckeditor fixes */
 907 .cke_editor_text {
 908         border-style: solid !important;
 909         padding: 0 !important;
 910 }
 911
 912 .cke_source,
 913 .cke_wysiwyg_div {
 914         padding: 8px !important;
 915 }
 916
 917 /* fixes textarea width */
 918 .cke_source {
 919         box-sizing: border-box !important;
 920         -moz-box-sizing: border-box !important;
 921         -webkit-box-sizing: border-box !important;
 922 }
 923
 924 .cke_combo__fontsize .cke_combo_text {
 925         width: auto !important;
 926 }
 927
 928 .cke_dialog_background_cover {
 929         background-color: #000 !important;
 930 }
 931
 932 .cke_wysiwyg_div,
 933 .cke_inner {
 934         background-color: transparent !important;
 935 }
 936
 937 /* fixes list styling */
 938 .cke_wysiwyg_div {
 939         ul,
 940         ol {
 941                 .nativeList;
 942         }
 943
 944         ul {
 945                 list-style-type: disc;
 946         }
 947
 948         ol {
 949                 list-style-type: decimal;
 950         }
 951 }
 952
 953 /* fixes table styling */
 954 .cke_wysiwyg_div td {
 955         border: 1px solid rgba(0, 0, 0, .2);
 956 }
 957
 958 @media screen and (max-width: 800px), print {
 959         .message.messageSidebarOrientationLeft,
 960         .message.messageSidebarOrientationRight {
 961                 .messageContent {
 962                         border: 0;
 963                         margin: 0;
 964                 }
 965
 966                 .messageSidebar {
 967                         float: none;
 968                         min-height: 37px;
 969                 }
 970
 971                 .messageHeader {
 972                         &::before,
 973                         &::after {
 974                                 display: none;
 975                         }
 976                 }
 977         }
 978
 979         .message .messageHeader .messageQuickOptions,
 980         .message .messageBody .messageSignature,
 981         .message .messageSidebar .userCredits {
 982                 display: none;
 983         }
 984
 985         .message .messageSidebar {
 986                 padding: 7px;
 987                 text-align: left;
 988                 width: auto;
 989
 990                 > div {
 991                         margin-left: 40px;
 992                 }
 993
 994                 .userAvatar {
 995                         left: 7px;
 996                         position: absolute;
 997                         top: 0;
 998
 999                         img {
1000                                 height: 32px !important;
1001                                 width: 32px !important;
1002                         }
1003
1004                         > .badgeOnline {
1005                                 display: none;
1006                         }
1007                 }
1008
1009                 .userTitle {
1010                         margin-top: -2px;
1011                 }
1012         }
1013
1014         /* reduce paddings */
1015         .message .messageContent .messageHeader {
1016                 padding: 7px 7px 0;
1017         }
1018
1019         .message .messageBody {
1020                 padding: 7px;
1021         }
1022
1023         .message .messageBody > div:not(.messageFooter) {
1024                 padding: 7px 0;
1025         }
1026
1027         .message .messageBody > footer {
1028                 padding: 0;
1029                 position: absolute;
1030                 right: 7px;
1031                 top: 7px;
1032         }
1033
1034         .message .messageOptions nav {
1035                 opacity: 1;
1036                 position: static;
1037                 text-align: left;
1038         }
1039
1040         .message .newMessageBadge {
1041                 display: none;
1042         }
1043 }
1044
1045 @media screen and (min-width: 641px) and (max-width: 800px), print {
1046         .message .messageSidebar,
1047         .message .messageContent .messageHeader,
1048         .message .messageBody {
1049                 padding-left: @wcfGapMedium;
1050                 padding-right: @wcfGapMedium;
1051         }
1052
1053         .message .messageSidebar {
1054                 .userAvatar {
1055                         left: @wcfGapMedium;
1056                 }
1057         }
1058
1059         .message .messageBody > footer {
1060                 right: @wcfGapMedium;
1061         }
1062 }
1063
1064 @media only screen and (max-width: 800px) {
1065         .moderationList {
1066                 thead {
1067                         display: none;
1068                 }
1069
1070                 tbody {
1071                         .columnAssignedUserID,
1072                         .columnLastChangeTime {
1073                                 display: none;
1074                         }
1075                 }
1076         }
1077 }