wcfsetup/install/files/style/ui/message.scss

   1 .messageList {
   2         &:not(.messageReducedList) {
   3                 @include screen-md-up {
   4                         border-top: 1px solid $wcfContentBorder;
   5
   6                         > li {
   7                                 border-bottom: 1px solid $wcfContentBorder;
   8                                 padding: 30px 0;
   9
  10                                 &.messageListPagination:last-child {
  11                                         border-bottom-width: 0;
  12                                 }
  13                         }
  14                 }
  15
  16                 @include screen-sm-down {
  17                         .messageSidebar {
  18                                 border-top: 1px solid $wcfContentBorder;
  19                         }
  20
  21                         > .messageListPagination {
  22                                 border-top: 1px solid $wcfContentBorder;
  23                                 margin: 0 -10px;
  24                                 padding: 20px 10px;
  25                         }
  26                 }
  27
  28                 > .messageListNotice > .info {
  29                         margin-top: 0;
  30                 }
  31         }
  32
  33         &.messageReducedList {
  34                 @include screen-md-up {
  35                         > li:not(:last-child) {
  36                                 padding-bottom: 30px;
  37                         }
  38                 }
  39         }
  40
  41         > .anchorFixedHeader:not(.disableAnchorFixedHeader):target {
  42                 margin-top: -49px;
  43                 pointer-events: none;
  44                 position: relative;
  45                 z-index: 10;
  46
  47                 &::after {
  48                         content: "";
  49                         display: block;
  50                         height: 50px;
  51                 }
  52
  53                 > .message {
  54                         pointer-events: all;
  55                         transform: translateY(49px);
  56                 }
  57         }
  58
  59         @include screen-sm-down {
  60                 > li:not(:last-child) {
  61                         padding-bottom: 30px;
  62                 }
  63         }
  64 }
  65
  66 .messageCheckboxLabel {
  67         cursor: pointer;
  68         display: block;
  69         position: relative;
  70
  71         &::before {
  72                 content: $fa-var-square-o;
  73                 display: block;
  74                 font-family: FontAwesome;
  75                 position: absolute;
  76         }
  77
  78         &::after {
  79                 color: rgb(0, 150, 0);
  80                 content: $fa-var-check;
  81                 display: none;
  82                 font-family: FontAwesome;
  83                 position: absolute;
  84         }
  85
  86         > input[type="checkbox"] {
  87                 display: none;
  88         }
  89 }
  90
  91 .message {
  92         @include screen-md-up {
  93                 display: flex;
  94         }
  95
  96         .messageClipboardCheckbox {
  97                 height: 24px;
  98                 width: 24px;
  99
 100                 @extend .messageCheckboxLabel;
 101
 102                 &::before {
 103                         font-size: 25px;
 104                         left: 2px;
 105                         top: -6px;
 106                 }
 107         }
 108
 109         &.jsMarked .messageClipboardCheckbox::after {
 110                 display: block;
 111                 font-size: 14px;
 112                 left: 5px;
 113                 top: 1px;
 114         }
 115 }
 116
 117 /* sidebar */
 118 .messageSidebar {
 119         background-color: $wcfSidebarBackground;
 120         color: $wcfSidebarText;
 121         position: relative;
 122
 123         @include screen-md-up {
 124                 align-self: flex-start;
 125                 border-radius: 3px;
 126                 flex: 0 0 240px;
 127                 padding: 20px;
 128                 text-align: center;
 129
 130                 & + .messageContent {
 131                         flex-basis: calc(100% - 270px);
 132                         margin-left: 30px;
 133                         max-width: calc(100% - 270px);
 134                 }
 135
 136                 .username {
 137                         /* required to fix wrapping behavior in combination with
 138                            `overflow-wrap` / `word-wrap` */
 139                         display: block;
 140                 }
 141         }
 142
 143         @include screen-sm-down {
 144                 margin: 0 -10px;
 145                 padding: 10px;
 146
 147                 .messageAuthor {
 148                         flex: 0 0 auto;
 149                         /* equals the height of the avatar */
 150                         min-height: 48px;
 151                         position: relative;
 152
 153                         .userAvatar {
 154                                 display: block;
 155                                 margin: 0;
 156                                 position: absolute;
 157                                 top: 50%;
 158                                 transform: translateY(-50%);
 159
 160                                 .userAvatarImage {
 161                                         max-height: 48px;
 162                                         max-width: 48px;
 163                                 }
 164                         }
 165
 166                         .messageAuthorContainer,
 167                         .userTitle,
 168                         .userRank {
 169                                 margin-left: 58px;
 170                         }
 171
 172                         /* force username to be vertically centered for quick reply */
 173                         .messageAuthorContainer:last-child {
 174                                 align-items: center;
 175                                 display: flex;
 176                                 height: 100%;
 177                                 position: absolute;
 178                         }
 179                 }
 180
 181                 .userCredits {
 182                         display: none;
 183                 }
 184
 185                 + .messageContent {
 186                         margin-top: 20px;
 187                 }
 188         }
 189
 190         a {
 191                 color: $wcfSidebarLink;
 192
 193                 &:hover {
 194                         color: $wcfSidebarLinkActive;
 195                 }
 196         }
 197
 198         .dataList {
 199                 @include wcfFontSmall;
 200         }
 201
 202         .userAvatar {
 203                 display: inline-block;
 204                 position: relative;
 205                 margin-bottom: 10px;
 206
 207                 > a {
 208                         display: inline-block;
 209                 }
 210         }
 211
 212         .username {
 213                 display: inline-block;
 214
 215                 @include wcfFontHeadline;
 216         }
 217
 218         .badgeOnline {
 219                 left: 0;
 220                 pointer-events: none;
 221                 position: absolute;
 222
 223                 @include screen-md-up {
 224                         bottom: 0;
 225                 }
 226
 227                 @include screen-sm-down {
 228                         color: transparent;
 229                         padding: 0;
 230                         top: 0;
 231                         width: 0;
 232
 233                         &::before {
 234                                 background-color: inherit;
 235                                 border: 1px solid rgba(255, 255, 255, 1);
 236                                 border-radius: 50%;
 237                                 content: "";
 238                                 height: 16px;
 239                                 left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
 240                                 position: absolute;
 241                                 width: 16px;
 242                         }
 243                 }
 244         }
 245
 246         .userTitle + .userRank {
 247                 margin-top: 3px;
 248         }
 249 }
 250
 251 .messageAuthor + * {
 252         margin-top: 20px;
 253
 254         &:before {
 255                 content: "";
 256                 left: 0;
 257                 margin-top: -10px;
 258                 position: absolute;
 259                 right: 0;
 260         }
 261 }
 262
 263 /* Prevents username overflow in the message sidebar */
 264 .messageAuthorContainer {
 265         overflow: hidden;
 266 }
 267
 268 .messageAuthorContainer:not(:last-child) {
 269         @include screen-md-up {
 270                 margin-bottom: 5px;
 271         }
 272 }
 273
 274 // sidebar right
 275 .messageSidebarOrientationRight {
 276         .messageContent {
 277                 order: 1;
 278         }
 279
 280         .messageSidebar {
 281                 order: 2;
 282         }
 283
 284         .messageSidebar + .messageContent {
 285                 margin-left: 20px;
 286                 margin-right: 30px;
 287         }
 288 }
 289
 290 /* content */
 291 .messageContent {
 292         @include screen-sm-down {
 293                 position: relative;
 294         }
 295
 296         @include screen-md-up {
 297                 display: flex;
 298                 /* do not use `flex: 1 1 0%` as it causes Mobile Safari to fail */
 299                 flex: 1;
 300                 flex-direction: column;
 301         }
 302
 303         &.loading {
 304                 position: relative;
 305
 306                 > .messageContentLoadingOverlay {
 307                         align-items: center;
 308                         background-color: $wcfContentBackground;
 309                         bottom: -1px;
 310                         display: flex;
 311                         justify-content: center;
 312                         left: 0;
 313                         position: absolute;
 314                         right: 0;
 315                         top: 0;
 316
 317                         > .icon {
 318                                 flex: 0 0 auto;
 319                         }
 320                 }
 321         }
 322 }
 323
 324 /* content - header */
 325 .messageHeader {
 326         display: flex;
 327         justify-content: flex-end;
 328
 329         @include screen-md-up {
 330                 flex: 0 0 auto;
 331         }
 332
 333         + .messageBody {
 334                 margin-top: 20px;
 335         }
 336
 337         > .messageQuickOptions {
 338                 flex: 0 0 auto;
 339         }
 340
 341         > .messageHeaderWrapper {
 342                 align-items: center;
 343                 flex: 1 1 auto;
 344         }
 345 }
 346
 347 .messageHeaderBox {
 348         align-items: center;
 349         display: flex;
 350         flex: 1 1 auto;
 351         flex-wrap: wrap;
 352
 353         > .messageTitle {
 354                 flex: 0 0 100%;
 355         }
 356
 357         > .messageHeaderMetaData,
 358         > .messageStatus {
 359                 flex: 0 0 auto;
 360         }
 361 }
 362
 363 .messageTitle {
 364         color: $wcfContentHeadlineText;
 365
 366         a {
 367                 color: $wcfContentHeadlineLink;
 368
 369                 &:hover {
 370                         color: $wcfContentHeadlineLinkActive;
 371                 }
 372         }
 373 }
 374
 375 .messageHeaderMetaData {
 376         align-items: center;
 377
 378         @include inlineList;
 379         @include dotSeparated;
 380         @include wcfFontSmall;
 381
 382         .messagePublicationTime {
 383                 color: $wcfContentDimmedText;
 384         }
 385
 386         + .messageStatus {
 387                 margin-left: 5px;
 388         }
 389 }
 390
 391 .messageStatus {
 392         align-items: center;
 393
 394         @include inlineList;
 395         @include wcfFontSmall;
 396 }
 397
 398 .messageQuickOptions {
 399         @include screen-md-up {
 400                 @include inlineList;
 401         }
 402
 403         @include screen-sm-down {
 404                 flex: 0 0 24px !important;
 405                 height: 1.5em;
 406                 opacity: 0;
 407                 position: relative;
 408                 transition: opacity 0.12s linear, visibility 0s linear 0.12s;
 409                 visibility: hidden;
 410
 411                 &::before {
 412                         content: $fa-var-ellipsis-v;
 413                         font-family: FontAwesome;
 414                         font-size: 18px;
 415                         height: 24px;
 416                         position: absolute;
 417                         right: 0;
 418                         text-align: center;
 419                         top: -2px;
 420                         width: 24px;
 421                 }
 422
 423                 &.active {
 424                         opacity: 1;
 425                         transition-delay: 0s;
 426                         visibility: visible;
 427                 }
 428
 429                 > li {
 430                         display: none;
 431                 }
 432         }
 433 }
 434
 435 /* content - body */
 436 .messageBody {
 437         @include screen-md-up {
 438                 flex: 1 1 auto;
 439         }
 440
 441         &.editor {
 442                 align-items: center;
 443                 display: flex;
 444                 justify-content: center;
 445
 446                 > .icon {
 447                         flex: 0 0 auto;
 448                 }
 449
 450                 > .editorContainer {
 451                         flex: 1 1 auto;
 452                 }
 453         }
 454
 455         > .messageText {
 456                 @extend .htmlContent;
 457
 458                 img {
 459                         height: auto !important;
 460                         max-width: 100%;
 461                 }
 462         }
 463
 464         > *:first-child {
 465                 margin-top: 0;
 466         }
 467 }
 468
 469 /* content - footer */
 470 .messageFooter {
 471         @include screen-md-up {
 472                 flex: 0 0 auto;
 473         }
 474
 475         .formSubmit {
 476                 margin-top: 20px;
 477         }
 478 }
 479
 480 .messageFooterNote {
 481         border-left: 5px solid $wcfContentBorderInner;
 482         color: $wcfContentDimmedText;
 483         margin-top: 20px;
 484         padding: 5px 10px;
 485
 486         @include wcfFontSmall;
 487
 488         a {
 489                 color: $wcfContentDimmedLink;
 490
 491                 &:hover {
 492                         color: $wcfContentDimmedLinkActive;
 493                         text-decoration: underline;
 494                 }
 495         }
 496 }
 497
 498 .messageFooterGroup {
 499         align-items: center;
 500         display: flex;
 501         flex-wrap: wrap;
 502
 503         &:not(:first-child) {
 504                 > .reactionSummaryList,
 505                 > .messageFooterButtons,
 506                 > .messageFooterButtonsExtra {
 507                         margin-top: 20px;
 508                 }
 509         }
 510
 511         > .reactionSummaryList {
 512                 flex: 0 1 auto;
 513
 514                 @include wcfFontSmall;
 515         }
 516
 517         > .messageFooterButtons {
 518                 @include screen-md-up {
 519                         flex: 1 1 auto;
 520                 }
 521
 522                 @include screen-sm-down {
 523                         margin-left: auto;
 524
 525                         .button:not(.reactButton) {
 526                                 display: none;
 527                         }
 528
 529                         .button.reactButton {
 530                                 border-radius: 2px;
 531                         }
 532                 }
 533         }
 534
 535         > .messageFooterButtonsExtra {
 536                 @include screen-md-up {
 537                         flex: 1 1 auto;
 538
 539                         & + .messageFooterButtons {
 540                                 flex: 0 auto;
 541
 542                                 > li:first-child {
 543                                         margin-left: 20px;
 544                                 }
 545                         }
 546                 }
 547
 548                 @include screen-sm-down {
 549                         display: none;
 550                 }
 551         }
 552 }
 553
 554 .messageSignature > div {
 555         @extend .htmlContent;
 556 }
 557
 558 .messageSignature img,
 559 .messageSignatureConstraints img {
 560         max-height: #{$wcf_option_signature_max_image_height}px;
 561 }
 562
 563 @include screen-sm-down {
 564         .messageSignature {
 565                 display: none;
 566         }
 567 }
 568
 569 @include screen-md-up {
 570         .messageSignature {
 571                 border-top: 1px solid $wcfContentBorderInner;
 572                 margin-top: 20px;
 573                 opacity: 0.6;
 574                 padding-top: 10px;
 575                 transition: opacity 0.12s linear;
 576
 577                 /* fix flicker in Safari on message hover */
 578                 transform: translateZ(0);
 579         }
 580
 581         .message:hover .messageSignature {
 582                 opacity: 1;
 583         }
 584 }
 585
 586 .messageFooterButtons,
 587 .messageFooterButtonsExtra {
 588         @extend .buttonGroup;
 589
 590         justify-content: flex-end;
 591
 592         > li {
 593                 display: flex;
 594
 595                 > a {
 596                         align-items: center;
 597                 }
 598         }
 599
 600         .icon + span:not(.invisible) {
 601                 margin-left: 5px;
 602         }
 603 }
 604
 605 .messageCollapsed {
 606         @include screen-sm-down {
 607                 border-top: 1px solid $wcfContentBorderInner;
 608                 margin: 0 -10px;
 609                 padding: 30px 10px 0;
 610         }
 611 }
 612
 613 .messageReduced {
 614         .messageHeader {
 615                 background-color: $wcfSidebarBackground;
 616                 color: $wcfSidebarText;
 617
 618                 @include screen-sm-down {
 619                         margin: 0 -10px;
 620                         padding: 10px;
 621                 }
 622
 623                 @include screen-md-up {
 624                         padding: 10px 20px;
 625                 }
 626         }
 627
 628         .messageTitle {
 629                 color: $wcfSidebarHeadlineText;
 630
 631                 a {
 632                         color: $wcfSidebarHeadlineLink;
 633
 634                         &:hover {
 635                                 color: $wcfSidebarHeadlineLinkActive;
 636                         }
 637                 }
 638         }
 639
 640         @include screen-md-up {
 641                 .messageBody,
 642                 .messageFooter {
 643                         padding: 0 20px;
 644                 }
 645         }
 646 }
 647
 648 /* margin between items in the list of quoted messages */
 649 #messageQuoteList .messageReduced + .messageReduced {
 650         margin-top: 20px;
 651 }
 652
 653 .messageQuoteItemList {
 654         /* we need `!important` here to override defaults used for `.htmlContent`
 655            and `.messageText` */
 656         list-style-type: none !important;
 657         margin-left: 0 !important;
 658
 659         > li {
 660                 display: flex;
 661
 662                 > span {
 663                         flex: 0 0 auto;
 664                         margin-right: 10px;
 665                 }
 666
 667                 > .jsQuote {
 668                         flex: 1 1 auto;
 669                 }
 670
 671                 > .jsFullQuote {
 672                         display: none;
 673                 }
 674         }
 675 }
 676
 677 /* allow tables to overflow on all screens */
 678 .messageTableOverflow {
 679         overflow: auto;
 680 }