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