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                 > a {
 215                         color: $wcfHeaderMenuLink;
 216                         display: block;
 217                         outline: none;
 218                         padding: 10px;
 219                         text-align: center;
 220
 221                         @include wcfFontSmall;
 222
 223                         &.redactor-button-disabled {
 224                                 background-color: transparent !important;
 225                                 color: $wcfButtonDisabledText !important;
 226                                 cursor: default;
 227                         }
 228
 229                         &:hover,
 230                         &.redactor-act,
 231                         &.dropact {
 232                                 background-color: $wcfHeaderMenuBackgroundActive;
 233                                 color: $wcfHeaderMenuLinkActive;
 234                         }
 235
 236                         .icon {
 237                                 color: inherit;
 238                                 cursor: inherit !important;
 239                         }
 240                 }
 241         }
 242 }
 243
 244 .redactor-toolbar-tooltip {
 245         @extend .balloonTooltip;
 246
 247         opacity: 1;
 248         visibility: visible;
 249
 250         &:before {
 251                 // TODO: border-color: $wcfTooltipBackgroundColor transparent;
 252                 border-style: solid;
 253                 border-width: 0 5px 5px;
 254                 content: "";
 255                 display: block;
 256                 left: 50%;
 257                 position: absolute;
 258                 top: -5px;
 259                 transform: translateX(-50%);
 260         }
 261 }
 262
 263 #redactor-image-box {
 264         border: 1px dashed rgba(0, 0, 0, .5);
 265         display: inline-block;
 266         line-height: 0;
 267         max-width: 100%;
 268         position: relative;
 269
 270         > img {
 271                 border-width: 0;
 272                 opacity: .5;
 273         }
 274 }
 275
 276 #redactor-image-editter {
 277         @extend .balloonTooltip;
 278
 279         cursor: pointer;
 280         left: 50%;
 281         // TODO: line-height: $wcfSmallFontSize;
 282         margin-top: -13px;
 283         opacity: 1;
 284         top: 50%;
 285         visibility: visible;
 286         z-index: 5;
 287 }
 288
 289 #redactor-image-resizer {
 290         background-color: rgba(0, 0, 0, 1);
 291         border: 1px solid rgba(255, 255, 255, 1);
 292         bottom: -4px;
 293         cursor: nw-resize;
 294         height: 8px;
 295         line-height: 1;
 296         position: absolute;
 297         right: -5px;
 298         width: 8px;
 299         z-index: 10;
 300 }
 301
 302 .redactorAttachmentContainer {
 303         background-color: rgba(255, 255, 255, 1);
 304         border: 1px solid rgba(238, 238, 238, 1);
 305         border-top-width: 0;
 306         padding: 7px 14px 7px;
 307 }
 308
 309 .redactor-dropdown-box-fontcolor {
 310         width: 200px;
 311
 312         > li.redactorColorPallet {
 313                 padding: 0 4px;
 314
 315                 &:hover {
 316                         background-color: $wcfDropdownBackground !important;
 317                 }
 318
 319                 > a {
 320                         border: 2px solid rgba(255, 255, 255, 1);
 321                         border-bottom-width: 0;
 322                         display: inline-block;
 323                         font-size: 0; // TODO
 324                         height: 20px;
 325                         padding: 0;
 326                         margin: 0;
 327                         width: 20px;
 328                 }
 329         }
 330 }
 331
 332 .redactorDropArea {
 333         background-color: rgba(255, 255, 204, 1);
 334         border: 5px dashed rgba(255, 204, 0);
 335         box-sizing: border-box;
 336         font-size: 1.4rem; // TODO
 337         position: absolute;
 338         text-align: center;
 339         vertical-align: middle;
 340         z-index: 360;
 341
 342         &.active {
 343                 background-color: #CEF6CE;
 344                 border-color: #04B404;
 345         }
 346 }
 347
 348 .redactor-link-tooltip {
 349         // TODO: background-color: $wcfTooltipBackgroundColor;
 350         border-radius: 6px;
 351         // TODO: color: $wcfTooltipColor;
 352         // TODO: font-size: $wcfSmallFontSize;
 353         padding: 5px 10px 7px;
 354         position: absolute;
 355         z-index: 800;
 356
 357         @include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 358
 359         > a {
 360                 // TODO: color: $wcfTooltipColor;
 361         }
 362 }
 363
 364 .redactor-voice-label {
 365         display: none;
 366 }
 367
 368 /* alignment plugin */
 369 .text-center {
 370         text-align: center;
 371 }
 372
 373 .text-right {
 374         text-align: right;
 375 }
 376
 377 /* text color */
 378 .woltlab-color-000000 { color: #000000 !important; }
 379 .woltlab-color-000080 { color: #000080 !important; }
 380 .woltlab-color-0000CD { color: #0000CD !important; }
 381 .woltlab-color-0000FF { color: #0000FF !important; }
 382 .woltlab-color-006400 { color: #006400 !important; }
 383 .woltlab-color-008000 { color: #008000 !important; }
 384 .woltlab-color-008080 { color: #008080 !important; }
 385 .woltlab-color-00FF00 { color: #00FF00 !important; }
 386 .woltlab-color-00FFFF { color: #00FFFF !important; }
 387 .woltlab-color-2F4F4F { color: #2F4F4F !important; }
 388 .woltlab-color-40E0D0 { color: #40E0D0 !important; }
 389 .woltlab-color-4B0082 { color: #4B0082 !important; }
 390 .woltlab-color-696969 { color: #696969 !important; }
 391 .woltlab-color-800000 { color: #800000 !important; }
 392 .woltlab-color-800080 { color: #800080 !important; }
 393 .woltlab-color-808080 { color: #808080 !important; }
 394 .woltlab-color-8B4513 { color: #8B4513 !important; }
 395 .woltlab-color-A52A2A { color: #A52A2A !important; }
 396 .woltlab-color-A9A9A9 { color: #A9A9A9 !important; }
 397 .woltlab-color-ADD8E6 { color: #ADD8E6 !important; }
 398 .woltlab-color-AFEEEE { color: #AFEEEE !important; }
 399 .woltlab-color-B22222 { color: #B22222 !important; }
 400 .woltlab-color-D3D3D3 { color: #D3D3D3 !important; }
 401 .woltlab-color-DAA520 { color: #DAA520 !important; }
 402 .woltlab-color-DDA0DD { color: #DDA0DD !important; }
 403 .woltlab-color-E6E6FA { color: #E6E6FA !important; }
 404 .woltlab-color-EE82EE { color: #EE82EE !important; }
 405 .woltlab-color-F0F8FF { color: #F0F8FF !important; }
 406 .woltlab-color-F0FFF0 { color: #F0FFF0 !important; }
 407 .woltlab-color-F0FFFF { color: #F0FFFF !important; }
 408 .woltlab-color-FAEBD7 { color: #FAEBD7 !important; }
 409 .woltlab-color-FF0000 { color: #FF0000 !important; }
 410 .woltlab-color-FF8C00 { color: #FF8C00 !important; }
 411 .woltlab-color-FFA07A { color: #FFA07A !important; }
 412 .woltlab-color-FFA500 { color: #FFA500 !important; }
 413 .woltlab-color-FFD700 { color: #FFD700 !important; }
 414 .woltlab-color-FFF0F5 { color: #FFF0F5 !important; }
 415 .woltlab-color-FFFF00 { color: #FFFF00 !important; }
 416 .woltlab-color-FFFFE0 { color: #FFFFE0 !important; }
 417 .woltlab-color-FFFFFF { color: #FFFFFF !important; }
 418
 419 /* text color selection */
 420 .redactor-dropdown-box-woltlabColor {
 421         > ul {
 422                 display: flex !important;
 423                 flex-wrap: wrap;
 424                 width: 272px;
 425
 426                 > li:first-child {
 427                         flex: 0 0 100%;
 428                         margin-bottom: 10px;
 429                 }
 430         }
 431
 432         .woltlab-color-selection {
 433                 flex: 0 0 30px;
 434                 margin: 2px;
 435                 overflow: hidden;
 436
 437                 > a {
 438                         background-color: currentColor !important;
 439                         color: inherit !important;
 440                         display: block;
 441                         height: 30px;
 442                         width: 30px;
 443                 }
 444         }
 445 }