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

   1 .redactor-box {
   2         background-color: $wcfContentBackground;
   3         position: relative;
   4
   5         &:not(:first-child):not(.redactorBoxFullscreen) {
   6                 margin-top: 20px;
   7         }
   8
   9         & + .messageTabMenu {
  10                 padding: 0;
  11         }
  12
  13         & + .innerError,
  14         & + .innerSuccess,
  15         & + .innerWarning,
  16         > .innerError,
  17         > .innerSuccess,
  18         > .innerWarning {
  19                 border-radius: 0;
  20                 box-shadow: none;
  21                 display: block;
  22                 margin-top: -1px;
  23         }
  24
  25         > .innerError,
  26         > .innerSuccess,
  27         > .innerWarning {
  28                 margin: -1px 0;
  29         }
  30 }
  31
  32 .redactor-layer {
  33         border: 1px solid $wcfContentBorderInner;
  34         border-top-width: 0;
  35         max-height: 500px;
  36         padding: 10px;
  37         position: relative;
  38         outline: none;
  39         overflow: auto;
  40
  41         * {
  42                 // setting min-width to "0" inside contenteditable causes
  43                 // IE11 to do all sort of funny things
  44                 min-width: auto;
  45         }
  46
  47         &.redactor-placeholder::after {
  48                 color: $wcfContentDimmedText;
  49                 content: attr(placeholder);
  50                 display: block;
  51                 pointer-events: none;
  52                 position: absolute;
  53         }
  54
  55         & + textarea {
  56                 border-width: 0;
  57                 box-shadow: none;
  58                 outline: none;
  59                 padding: 10px;
  60                 resize: vertical;
  61
  62                 &:focus {
  63                         box-shadow: none;
  64                 }
  65         }
  66
  67         // enforce styles used in messages
  68         @extend .htmlContent;
  69
  70         > :not(p) {
  71                 &:first-child {
  72                         margin-top: 10px !important;
  73                 }
  74
  75                 &:last-child {
  76                         margin-bottom: 20px !important;
  77                 }
  78         }
  79
  80         // remove margin top for the first paragraph in the editor to avoid a weird looking offset a the top
  81         > p:first-child {
  82                 margin-top: 0;
  83         }
  84
  85         img {
  86                 max-width: 100%;
  87
  88                 &:not(.smiley) {
  89                         // show cursor to indicate editing capability excluding smilies
  90                         cursor: pointer;
  91                 }
  92
  93                 /* prevent flicker from pasted images */
  94                 &[src^="data:image"] {
  95                         display: none !important;
  96                 }
  97         }
  98
  99         table {
 100                 border-collapse: collapse;
 101                 line-height: 1.6em;
 102
 103                 th {
 104                         border: 1px solid #ddd;
 105                         border-bottom: 2px solid currentColor;
 106                 }
 107
 108                 td {
 109                         border: 1px solid #ddd;
 110                         padding: 5px;
 111                         vertical-align: top;
 112
 113                         &:empty::before {
 114                                 content: "";
 115                                 display: inline-block;
 116                         }
 117                 }
 118         }
 119
 120         /* This is a rather hacky work-around for Safari that makes the bottom margin clickable
 121            in order to recognize clicks in between two block elements. See #2533 */
 122         &.jsSafariMarginClickTarget {
 123                 pre,
 124                 woltlab-quote,
 125                 woltlab-spoiler {
 126                         &::after {
 127                                 content: "";
 128                                 height: 1em; // this is the value of `margin-bottom`
 129                                 left: 0;
 130                                 position: absolute;
 131                                 right: 0;
 132
 133                                 @include screen-md-up {
 134                                         transform: translateY(20px); // this is the value of `padding-bottom`
 135                                 }
 136
 137                                 @include screen-sm-down {
 138                                         transform: translateY(10px); // this is the value of `padding-bottom`
 139                                 }
 140                         }
 141                 }
 142
 143                 pre::after {
 144                         /* parent is `position: relative` */
 145                         bottom: 0;
 146                 }
 147         }
 148 }
 149
 150 .redactor-dropdown-menu {
 151         @include screen-lg {
 152         }
 153
 154         > li:hover {
 155                 background-color: transparent !important;
 156         }
 157
 158         a:hover {
 159                 background-color: $wcfDropdownBackgroundActive;
 160         }
 161
 162         .redactor-dropdown-link-inactive {
 163                 cursor: default;
 164                 opacity: 0.6;
 165
 166                 > a:hover {
 167                         background-color: $wcfDropdownBackground !important;
 168                         color: $wcfDropdownText !important;
 169                         cursor: default !important;
 170                 }
 171         }
 172 }
 173
 174 /* disable auto zoom in mobile safari */
 175 @include screen-md-down {
 176         .redactor-layer {
 177                 font-size: 16px;
 178                 max-height: 500px;
 179         }
 180 }
 181
 182 .redactor-toolbar {
 183         background-color: $wcfHeaderBackground;
 184         display: flex;
 185         flex-wrap: wrap;
 186
 187         > li {
 188                 flex: 0 0 auto;
 189
 190                 > a {
 191                         color: $wcfHeaderMenuLink;
 192                         display: block;
 193                         outline: none;
 194                         padding: 10px;
 195                         text-align: center;
 196
 197                         @include wcfFontSmall;
 198
 199                         &.redactor-button-disabled {
 200                                 background-color: transparent !important;
 201                                 color: $wcfButtonDisabledText !important;
 202                                 cursor: default;
 203                                 pointer-events: none;
 204                         }
 205
 206                         &.redactor-act,
 207                         &.dropact {
 208                                 background-color: $wcfHeaderMenuLinkBackgroundActive;
 209                                 color: $wcfHeaderMenuLinkActive;
 210                         }
 211
 212                         .icon {
 213                                 color: inherit;
 214                                 cursor: inherit !important;
 215
 216                                 &.redactorButtonImage {
 217                                         background: no-repeat center center;
 218                                         background-size: contain;
 219                                 }
 220                         }
 221
 222                         @include screen-lg {
 223                                 // hover-styles on mobile are misleading as they stay much longer
 224                                 // due to the click-like behavior
 225                                 &:hover {
 226                                         background-color: $wcfHeaderMenuLinkBackgroundActive;
 227                                         color: $wcfHeaderMenuLinkActive;
 228                                 }
 229                         }
 230
 231                         &:focus {
 232                                 background-color: $wcfHeaderMenuLinkBackgroundActive;
 233                                 color: $wcfHeaderMenuLinkActive;
 234                         }
 235                 }
 236
 237                 @include screen-sm-up {
 238                         &.redactor-toolbar-separator {
 239                                 margin-left: 11px;
 240                                 position: relative;
 241
 242                                 &::before {
 243                                         bottom: 7px;
 244                                         border-left: 1px solid $wcfHeaderMenuLink;
 245                                         content: "";
 246                                         left: -6px;
 247                                         opacity: 0.6;
 248                                         position: absolute;
 249                                         top: 7px;
 250                                 }
 251                         }
 252                 }
 253         }
 254
 255         @include screen-xs {
 256                 &:not(.redactorToolbarOverride) > li {
 257                         &[data-show-on-mobile="false"] {
 258                                 display: none;
 259                         }
 260                 }
 261
 262                 &.redactorToolbarOverride > .redactor-toolbar-separator {
 263                         position: relative;
 264
 265                         &::before {
 266                                 bottom: 7px;
 267                                 border-left: 1px solid $wcfHeaderMenuLink;
 268                                 content: "";
 269                                 left: 0;
 270                                 opacity: 0.6;
 271                                 position: absolute;
 272                                 top: 7px;
 273                         }
 274                 }
 275
 276                 .redactorToolbarToggle {
 277                         position: relative;
 278
 279                         &::before {
 280                                 bottom: 7px;
 281                                 border-left: 1px solid $wcfHeaderMenuLink;
 282                                 content: "";
 283                                 left: 0;
 284                                 opacity: 0.6;
 285                                 position: absolute;
 286                                 top: 7px;
 287                         }
 288                 }
 289         }
 290 }
 291
 292 .redactor-toolbar-tooltip {
 293         @extend .balloonTooltip;
 294
 295         opacity: 1;
 296         visibility: visible;
 297 }
 298
 299 .redactorAttachmentContainer {
 300         background-color: rgba(255, 255, 255, 1);
 301         border: 1px solid rgba(238, 238, 238, 1);
 302         border-top-width: 0;
 303         padding: 7px 14px 7px;
 304 }
 305
 306 .redactor-dropdown-menu-fontcolor {
 307         width: 200px;
 308
 309         > li.redactorColorPallet {
 310                 padding: 0 4px;
 311
 312                 &:hover {
 313                         background-color: $wcfDropdownBackground !important;
 314                 }
 315
 316                 > a {
 317                         border: 2px solid rgba(255, 255, 255, 1);
 318                         border-bottom-width: 0;
 319                         display: inline-block;
 320                         font-size: 0;
 321                         height: 20px;
 322                         padding: 0;
 323                         margin: 0;
 324                         width: 20px;
 325                 }
 326         }
 327 }
 328
 329 .redactorDropArea {
 330         align-items: center;
 331         background-color: $wcfStatusInfoBackground;
 332         border: 5px dashed currentColor;
 333         bottom: 0;
 334         color: $wcfStatusInfoText;
 335         display: flex;
 336         justify-content: center;
 337         left: 0;
 338         position: absolute;
 339         right: 0;
 340         z-index: 10;
 341
 342         @include wcfFontSection;
 343
 344         &::before {
 345                 content: attr(data-drop-here);
 346         }
 347
 348         &.active {
 349                 background-color: $wcfStatusSuccessBackground;
 350                 color: $wcfStatusSuccessText;
 351
 352                 &::before {
 353                         content: attr(data-drop-now);
 354                 }
 355         }
 356 }
 357
 358 .redactor-link-tooltip {
 359         background-color: $wcfTooltipBackground;
 360         border-radius: 2px;
 361         box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 362         color: $wcfTooltipText;
 363         padding: 5px 10px 7px;
 364         position: absolute;
 365         z-index: 800;
 366
 367         > a {
 368                 color: $wcfTooltipText;
 369         }
 370 }
 371
 372 .redactor-voice-label {
 373         display: none;
 374 }
 375
 376 /* format */
 377 .redactor-dropdown-h2 {
 378         @include wcfFontSection;
 379 }
 380
 381 .redactor-dropdown-h3 {
 382         @include wcfFontHeadline;
 383 }
 384
 385 /* alignment plugin */
 386 .text-center {
 387         text-align: center !important;
 388 }
 389
 390 .text-right {
 391         text-align: right !important;
 392 }
 393
 394 /* alignment plugin / custom value */
 395 .text-justify {
 396         text-align: justify !important;
 397
 398         -webkit-hyphens: auto;
 399         -moz-hyphens: auto;
 400         -ms-hyphens: auto;
 401         hyphens: auto;
 402 }
 403
 404 /* text color selection */
 405 .redactor-dropdown-menu-woltlabColor {
 406         display: flex !important;
 407         flex-wrap: wrap;
 408         width: 272px;
 409
 410         > .dropdownDivider,
 411         > .dropdownDivider + li {
 412                 flex: 0 0 100%;
 413         }
 414
 415         .woltlab-color-selection {
 416                 flex: 0 0 30px;
 417                 margin: 2px;
 418                 overflow: hidden;
 419
 420                 > a {
 421                         background-color: currentColor !important;
 422                         display: block;
 423                         height: 30px;
 424                         width: 30px;
 425                 }
 426         }
 427 }
 428
 429 /* font size */
 430 .woltlab-size-8 {
 431         font-size: 8pt;
 432 }
 433 .woltlab-size-10 {
 434         font-size: 10pt;
 435 }
 436 .woltlab-size-12 {
 437         font-size: 12pt;
 438 }
 439 .woltlab-size-14 {
 440         font-size: 14pt;
 441 }
 442 .woltlab-size-18 {
 443         font-size: 18pt;
 444 }
 445 .woltlab-size-24 {
 446         font-size: 24pt;
 447 }
 448 .woltlab-size-36 {
 449         font-size: 36pt;
 450 }
 451
 452 /* image float */
 453 .messageFloatObjectLeft {
 454         float: left;
 455         margin: 0 20px 20px 0;
 456 }
 457
 458 .messageFloatObjectRight {
 459         float: right;
 460         margin: 0 0 20px 20px;
 461 }
 462
 463 .smiley,
 464 .jsSmiley > img {
 465         &[src$="_emojione.png"] {
 466                 max-height: 20px;
 467         }
 468 }
 469
 470 .smiley {
 471         margin: 0 1px;
 472 }
 473
 474 @include screen-md-down {
 475         .jsSmiley {
 476                 display: inline-block;
 477                 padding: 10px;
 478         }
 479 }
 480
 481 .wysiwygTextarea {
 482         background-color: transparent !important;
 483         border: 1px solid $wcfContentBorderInner !important;
 484         color: transparent !important;
 485         display: block;
 486         height: 238px;
 487         width: 100%;
 488 }
 489
 490 .messageQuickReplyCollapsed {
 491         border-bottom-width: 0 !important;
 492
 493         @include screen-sm-down {
 494                 margin-left: -10px;
 495                 margin-right: -10px;
 496         }
 497
 498         .messageSidebar {
 499                 display: none;
 500         }
 501
 502         .messageQuickReplyContent {
 503                 background-color: $wcfSidebarBackground;
 504                 cursor: pointer;
 505                 display: inline-block !important;
 506                 margin: 0 !important;
 507                 max-width: 100% !important;
 508                 overflow: hidden;
 509                 padding: 10px 20px;
 510                 position: relative;
 511                 width: 100% !important;
 512
 513                 @include screen-md-up {
 514                         border-radius: 2px;
 515                 }
 516
 517                 &::before {
 518                         color: $wcfSidebarText;
 519                         content: $fa-var-reply;
 520                         font-family: FontAwesome;
 521                         font-size: 28px;
 522                         height: 32px;
 523                         line-height: 32px;
 524                         margin-right: 10px;
 525                         width: 32px;
 526                         vertical-align: -5px;
 527                 }
 528
 529                 &::after {
 530                         color: $wcfSidebarText;
 531                         content: attr(data-placeholder);
 532                 }
 533
 534                 > .messageBody {
 535                         left: 200%;
 536                         position: absolute;
 537                         top: -100%;
 538                 }
 539
 540                 > .messageFooter {
 541                         display: none;
 542                 }
 543         }
 544 }
 545
 546 .redactorAutosaveRestored {
 547         background-color: $wcfContentBackground;
 548         border-top: 1px solid $wcfContentBorderInner;
 549         bottom: 1px;
 550         display: flex;
 551         opacity: 0;
 552         position: absolute;
 553         right: 1px;
 554         transition: opacity 0.12s linear, visibility 0s linear 0.12s;
 555         visibility: hidden;
 556
 557         &.active {
 558                 opacity: 1;
 559                 transition-delay: 0s;
 560                 visibility: visible;
 561         }
 562
 563         > a {
 564                 border-left: 1px solid $wcfContentBorderInner;
 565                 flex: 0 0 auto;
 566                 padding: 10px;
 567         }
 568
 569         > span {
 570                 color: $wcfContentDimmedText;
 571                 flex: 1 1 auto;
 572                 padding: 10px;
 573         }
 574
 575         @include screen-sm-up {
 576                 border-left: 1px solid $wcfContentBorderInner;
 577                 border-top-left-radius: 2px;
 578
 579                 > span {
 580                         padding: 10px 20px;
 581                 }
 582         }
 583
 584         @include screen-xs {
 585                 left: 1px;
 586
 587                 > span {
 588                         text-align: center;
 589                 }
 590         }
 591 }
 592
 593 .redactorBoxFullscreen {
 594         bottom: 0;
 595         display: flex;
 596         flex-direction: column;
 597         left: 0;
 598         position: fixed;
 599         right: 0;
 600         top: 0;
 601         z-index: 310;
 602
 603         .redactor-toolbar-box {
 604                 flex: 0 auto;
 605         }
 606
 607         .redactor-layer,
 608         .redactor-layer + textarea {
 609                 flex: 1 auto;
 610                 max-height: none !important;
 611                 min-height: 0 !important;
 612         }
 613 }
 614
 615 .editorImageBlocked {
 616         filter: brightness(25%);
 617         transition: filter 0.12s linear;
 618
 619         &:hover {
 620                 filter: brightness(75%);
 621         }
 622 }