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

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