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