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

   1 .wysiwygTextarea {
   2         background-color: transparent !important;
   3         border: 1px solid $wcfContentBorderInner !important;
   4         color: transparent !important;
   5         display: block;
   6         height: 238px;
   7         width: 100%;
   8 }
   9
  10 .redactor-box {
  11         position: relative;
  12
  13         &:not(:first-child) {
  14                 margin-top: 20px;
  15         }
  16
  17         & + .messageTabMenu {
  18                 padding: 0;
  19         }
  20
  21         & + .innerError,
  22         > .innerError {
  23                 border-radius: 0;
  24                 box-shadow: none;
  25                 display: block;
  26                 margin-top: -1px;
  27         }
  28
  29         > .innerError {
  30                 margin: -1px;
  31         }
  32
  33         > .redactorAutosaveNotice {
  34                 background-color: $wcfContentBackground;
  35                 border: 1px solid $wcfContentBorderInner;
  36                 border-width: 1px 0 0 1px;
  37                 bottom: 0;
  38                 opacity: 0;
  39                 padding: $wcfGapSmall;
  40                 position: absolute;
  41                 right: 0;
  42                 transition: visibility 0s linear .3s, opacity .3s linear;
  43                 visibility: hidden;
  44
  45                 &.open {
  46                         opacity: 1;
  47                         visibility: visible;
  48                         transition-delay: 0s;
  49                 }
  50
  51                 &.redactorAutosaveNoticeIcons > span.fa-check {
  52                         margin-right: $wcfGapSmall;
  53                 }
  54
  55                 > span.redactorAutosaveMessage {
  56                         padding: 0 $wcfGapSmall;
  57                 }
  58         }
  59 }
  60
  61 .redactor-editor {
  62         border: 1px solid $wcfContentBorderInner;
  63         border-top-width: 0;
  64         max-height: 500px;
  65         padding: 20px 10px;
  66         position: relative;
  67         outline: none;
  68         overflow: auto;
  69
  70         * {
  71                 // setting min-width to "0" inside contenteditable causes
  72                 // IE11 to do all sort of funny things
  73                 min-width: auto;
  74         }
  75
  76         &.redactor-placeholder::after {
  77                 color: $wcfContentDimmedText;
  78                 content: attr(placeholder);
  79                 display: block;
  80                 position: absolute;
  81         }
  82
  83         & + textarea {
  84                 border-width: 0;
  85                 box-shadow: none;
  86                 outline: none;
  87                 padding: 10px;
  88                 resize: vertical;
  89
  90                 &:focus {
  91                         box-shadow: none;
  92                 }
  93         }
  94
  95         // enforce styles used in messages
  96         @extend .htmlContent;
  97
  98         // remove margin top for the first paragraph in the editor to avoid a weird looking offset a the top
  99         > p:first-child {
 100                 margin-top: 0;
 101         }
 102
 103         img {
 104                 max-width: 100%;
 105
 106                 &:not(.smiley) {
 107                         // show cursor to indicate editing capability excluding smilies
 108                         cursor: pointer;
 109                 }
 110         }
 111
 112         // TODO: this is somewhat out of sync
 113         table {
 114                 border-collapse: collapse;
 115                 //font-size: 14px; TODO
 116                 line-height: 1.6em;
 117
 118                 td {
 119                         border: 1px solid #ddd;
 120                         padding: 5px;
 121                         vertical-align: top;
 122                 }
 123         }
 124 }
 125
 126 .redactor-dropdown {
 127         > .dropdownMenu {
 128                 display: block;
 129                 visibility: visible;
 130
 131                 /* we cannot influence the actual dropdown position as set by Redactor,
 132                    forces a gap while keeping the inline top-attribute unaffected */
 133                 transform: translateY(3px);
 134
 135                 > li:hover {
 136                         background-color: transparent !important;
 137                 }
 138
 139                 a:hover {
 140                         background-color: $wcfDropdownBackgroundActive;
 141                 }
 142         }
 143
 144         .redactor-dropdown-link-inactive {
 145                 cursor: default;
 146                 opacity: .6;
 147
 148                 &:hover {
 149                         background-color: transparent !important;
 150                         color: $wcfDropdownText !important;
 151                 }
 152         }
 153 }
 154
 155 /* disable auto zoom in mobile safari */
 156 @include screen-md-down {
 157         .redactor-editor {
 158                 font-size: 16px;
 159                 max-height: 500px;
 160         }
 161 }
 162
 163 .redactor-toolbar {
 164         background-color: $wcfHeaderBackground;
 165         display: flex;
 166         flex-wrap: wrap;
 167
 168         > li {
 169                 flex: 0 0 auto;
 170                 margin-bottom: 1px;
 171
 172                 > a {
 173                         color: $wcfHeaderMenuLink;
 174                         display: block;
 175                         outline: none;
 176                         padding: 10px;
 177                         text-align: center;
 178
 179                         @include wcfFontSmall;
 180
 181                         &.redactor-button-disabled {
 182                                 background-color: transparent !important;
 183                                 color: $wcfButtonDisabledText !important;
 184                                 cursor: default;
 185                         }
 186
 187                         &.redactor-act,
 188                         &.dropact {
 189                                 background-color: $wcfHeaderMenuLinkBackgroundActive;
 190                                 color: $wcfHeaderMenuLinkActive;
 191                         }
 192
 193                         .icon {
 194                                 color: inherit;
 195                                 cursor: inherit !important;
 196                         }
 197
 198                         @include screen-lg {
 199                                 // hover-styles on mobile are misleading as they stay much longer
 200                                 // due to the click-like behavior
 201                                 &:hover {
 202                                         background-color: $wcfHeaderMenuLinkBackgroundActive;
 203                                         color: $wcfHeaderMenuLinkActive;
 204                                 }
 205                         }
 206                 }
 207
 208                 @include screen-sm-up {
 209                         &.redactor-toolbar-separator {
 210                                 margin-left: 11px;
 211                                 position: relative;
 212
 213                                 &::before {
 214                                         bottom: 7px;
 215                                         border-left: 1px solid $wcfHeaderMenuLink;
 216                                         content: "";
 217                                         left: -6px;
 218                                         opacity: .6;
 219                                         position: absolute;
 220                                         top: 7px;
 221                                 }
 222                         }
 223                 }
 224
 225                 @include screen-xs {
 226                         &[data-show-on-mobile="false"] {
 227                                 display: none;
 228                         }
 229                 }
 230         }
 231 }
 232
 233 .redactor-toolbar-tooltip {
 234         @extend .balloonTooltip;
 235
 236         opacity: 1;
 237         visibility: visible;
 238
 239         &:before {
 240                 // TODO: border-color: $wcfTooltipBackgroundColor transparent;
 241                 border-style: solid;
 242                 border-width: 0 5px 5px;
 243                 content: "";
 244                 display: block;
 245                 left: 50%;
 246                 position: absolute;
 247                 top: -5px;
 248                 transform: translateX(-50%);
 249         }
 250 }
 251
 252 #redactor-image-box {
 253         border: 1px dashed rgba(0, 0, 0, .5);
 254         display: inline-block;
 255         line-height: 0;
 256         max-width: 100%;
 257         position: relative;
 258
 259         > img {
 260                 border-width: 0;
 261                 opacity: .5;
 262         }
 263 }
 264
 265 #redactor-image-editter {
 266         @extend .balloonTooltip;
 267
 268         cursor: pointer;
 269         left: 50%;
 270         // TODO: line-height: $wcfSmallFontSize;
 271         margin-top: -13px;
 272         opacity: 1;
 273         top: 50%;
 274         visibility: visible;
 275         z-index: 5;
 276 }
 277
 278 #redactor-image-resizer {
 279         background-color: rgba(0, 0, 0, 1);
 280         border: 1px solid rgba(255, 255, 255, 1);
 281         bottom: -4px;
 282         cursor: nw-resize;
 283         height: 8px;
 284         line-height: 1;
 285         position: absolute;
 286         right: -5px;
 287         width: 8px;
 288         z-index: 10;
 289 }
 290
 291 .redactorAttachmentContainer {
 292         background-color: rgba(255, 255, 255, 1);
 293         border: 1px solid rgba(238, 238, 238, 1);
 294         border-top-width: 0;
 295         padding: 7px 14px 7px;
 296 }
 297
 298 .redactor-dropdown-box-fontcolor {
 299         width: 200px;
 300
 301         > li.redactorColorPallet {
 302                 padding: 0 4px;
 303
 304                 &:hover {
 305                         background-color: $wcfDropdownBackground !important;
 306                 }
 307
 308                 > a {
 309                         border: 2px solid rgba(255, 255, 255, 1);
 310                         border-bottom-width: 0;
 311                         display: inline-block;
 312                         font-size: 0; // TODO
 313                         height: 20px;
 314                         padding: 0;
 315                         margin: 0;
 316                         width: 20px;
 317                 }
 318         }
 319 }
 320
 321 .redactorDropArea {
 322         background-color: rgba(255, 255, 204, 1);
 323         border: 5px dashed rgba(255, 204, 0);
 324         box-sizing: border-box;
 325         font-size: 1.4rem; // TODO
 326         position: absolute;
 327         text-align: center;
 328         vertical-align: middle;
 329         z-index: 360;
 330
 331         &.active {
 332                 background-color: #CEF6CE;
 333                 border-color: #04B404;
 334         }
 335 }
 336
 337 .redactor-link-tooltip {
 338         // TODO: background-color: $wcfTooltipBackgroundColor;
 339         border-radius: 6px;
 340         // TODO: color: $wcfTooltipColor;
 341         // TODO: font-size: $wcfSmallFontSize;
 342         padding: 5px 10px 7px;
 343         position: absolute;
 344         z-index: 800;
 345
 346         @include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 347
 348         > a {
 349                 // TODO: color: $wcfTooltipColor;
 350         }
 351 }
 352
 353 .redactor-voice-label {
 354         display: none;
 355 }
 356
 357 /* format */
 358 .redactor-dropdown-h2 {
 359         @include wcfFontSection;
 360 }
 361
 362 .redactor-dropdown-h3 {
 363         @include wcfFontHeadline;
 364 }
 365
 366 .redactor-dropdown-h4 {
 367         // TODO: add styling
 368 }
 369
 370 /* alignment plugin */
 371 .text-center {
 372         text-align: center;
 373 }
 374
 375 .text-right {
 376         text-align: right;
 377 }
 378
 379 /* alignment plugin / custom value */
 380 .text-justify {
 381         text-align: justify;
 382
 383         -webkit-hyphens: auto;
 384         -moz-hyphens: auto;
 385         -ms-hyphens: auto;
 386         hyphens: auto;
 387 }
 388
 389 /* text color */
 390 .woltlab-color-000000 { color: #000000 !important; }
 391 .woltlab-color-000080 { color: #000080 !important; }
 392 .woltlab-color-0000CD { color: #0000CD !important; }
 393 .woltlab-color-0000FF { color: #0000FF !important; }
 394 .woltlab-color-006400 { color: #006400 !important; }
 395 .woltlab-color-008000 { color: #008000 !important; }
 396 .woltlab-color-008080 { color: #008080 !important; }
 397 .woltlab-color-00FF00 { color: #00FF00 !important; }
 398 .woltlab-color-00FFFF { color: #00FFFF !important; }
 399 .woltlab-color-2F4F4F { color: #2F4F4F !important; }
 400 .woltlab-color-40E0D0 { color: #40E0D0 !important; }
 401 .woltlab-color-4B0082 { color: #4B0082 !important; }
 402 .woltlab-color-696969 { color: #696969 !important; }
 403 .woltlab-color-800000 { color: #800000 !important; }
 404 .woltlab-color-800080 { color: #800080 !important; }
 405 .woltlab-color-808080 { color: #808080 !important; }
 406 .woltlab-color-8B4513 { color: #8B4513 !important; }
 407 .woltlab-color-A52A2A { color: #A52A2A !important; }
 408 .woltlab-color-A9A9A9 { color: #A9A9A9 !important; }
 409 .woltlab-color-ADD8E6 { color: #ADD8E6 !important; }
 410 .woltlab-color-AFEEEE { color: #AFEEEE !important; }
 411 .woltlab-color-B22222 { color: #B22222 !important; }
 412 .woltlab-color-D3D3D3 { color: #D3D3D3 !important; }
 413 .woltlab-color-DAA520 { color: #DAA520 !important; }
 414 .woltlab-color-DDA0DD { color: #DDA0DD !important; }
 415 .woltlab-color-E6E6FA { color: #E6E6FA !important; }
 416 .woltlab-color-EE82EE { color: #EE82EE !important; }
 417 .woltlab-color-F0F8FF { color: #F0F8FF !important; }
 418 .woltlab-color-F0FFF0 { color: #F0FFF0 !important; }
 419 .woltlab-color-F0FFFF { color: #F0FFFF !important; }
 420 .woltlab-color-FAEBD7 { color: #FAEBD7 !important; }
 421 .woltlab-color-FF0000 { color: #FF0000 !important; }
 422 .woltlab-color-FF8C00 { color: #FF8C00 !important; }
 423 .woltlab-color-FFA07A { color: #FFA07A !important; }
 424 .woltlab-color-FFA500 { color: #FFA500 !important; }
 425 .woltlab-color-FFD700 { color: #FFD700 !important; }
 426 .woltlab-color-FFF0F5 { color: #FFF0F5 !important; }
 427 .woltlab-color-FFFF00 { color: #FFFF00 !important; }
 428 .woltlab-color-FFFFE0 { color: #FFFFE0 !important; }
 429 .woltlab-color-FFFFFF { color: #FFFFFF !important; }
 430
 431 /* text color selection */
 432 .redactor-dropdown-box-woltlabColor {
 433         > ul {
 434                 display: flex !important;
 435                 flex-wrap: wrap;
 436                 width: 272px;
 437
 438                 > li:first-child {
 439                         flex: 0 0 100%;
 440                         margin-bottom: 10px;
 441                 }
 442         }
 443
 444         .woltlab-color-selection {
 445                 flex: 0 0 30px;
 446                 margin: 2px;
 447                 overflow: hidden;
 448
 449                 > a {
 450                         background-color: currentColor !important;
 451                         color: inherit !important;
 452                         display: block;
 453                         height: 30px;
 454                         width: 30px;
 455                 }
 456         }
 457 }
 458
 459 /* font size */
 460 .woltlab-size-8 { font-size: 8pt; }
 461 .woltlab-size-10 { font-size: 10pt; }
 462 .woltlab-size-12 { font-size: 12pt; }
 463 .woltlab-size-14 { font-size: 14pt; }
 464 .woltlab-size-18 { font-size: 18pt; }
 465 .woltlab-size-24 { font-size: 24pt; }
 466 .woltlab-size-36 { font-size: 36pt; }
 467
 468 /* image float */
 469 .messageFloatObjectLeft {
 470         float: left;
 471         margin: 0 20px 20px 0;
 472 }
 473
 474 .messageFloatObjectRight {
 475         float: right;
 476         margin: 0 0 20px 20px;
 477 }
 478
 479 .smiley {
 480         margin: 0 1px;
 481 }