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