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

   1 .redactor-box {
   2         position: relative;
   3
   4         & + .messageTabMenu {
   5                 padding: 0;
   6         }
   7
   8         & + .innerError,
   9         > .innerError {
  10                 border-radius: 0;
  11                 box-shadow: none;
  12                 display: block;
  13                 margin-top: -1px;
  14         }
  15
  16         > .innerError {
  17                 margin: -1px;
  18         }
  19
  20         > .redactorAutosaveNotice {
  21                 background-color: $wcfContentBackground;
  22                 border: 1px solid $wcfContentBorderInner;
  23                 border-width: 1px 0 0 1px;
  24                 bottom: 0;
  25                 opacity: 0;
  26                 padding: $wcfGapSmall;
  27                 position: absolute;
  28                 right: 0;
  29                 transition: visibility 0s linear .3s, opacity .3s linear;
  30                 visibility: hidden;
  31
  32                 &.open {
  33                         opacity: 1;
  34                         visibility: visible;
  35                         transition-delay: 0s;
  36                 }
  37
  38                 &.redactorAutosaveNoticeIcons > span.fa-check {
  39                         margin-right: $wcfGapSmall;
  40                 }
  41
  42                 > span.redactorAutosaveMessage {
  43                         padding: 0 $wcfGapSmall;
  44                 }
  45         }
  46 }
  47
  48 .redactor-editor {
  49         border: 1px solid $wcfContentBorderInner;
  50         border-top-width: 0;
  51         max-height: 500px;
  52         padding: 10px;
  53         position: relative;
  54         outline: none;
  55         overflow: auto;
  56
  57         & + textarea {
  58                 border-width: 0;
  59                 box-shadow: none;
  60                 outline: none;
  61                 padding: 10px;
  62                 resize: vertical;
  63
  64                 &:focus {
  65                         box-shadow: none;
  66                 }
  67         }
  68
  69         // enforce styles used in messages
  70         @extend .htmlContent;
  71
  72         // remove margin top for the first paragraph in the editor to avoid a weird looking offset a the top
  73         > p:first-child {
  74                 margin-top: 0;
  75         }
  76
  77         img {
  78                 // TODO: the border was required for 'Old Redactor', check if it is still a thing
  79                 border: 1px solid transparent;
  80                 max-width: 100%;
  81         }
  82
  83         // TODO: this is somewhat out of sync
  84         table {
  85                 border-collapse: collapse;
  86                 //font-size: 14px; TODO
  87                 line-height: 1.6em;
  88
  89                 td {
  90                         border: 1px solid #ddd;
  91                         padding: 5px;
  92                         vertical-align: top;
  93                 }
  94         }
  95
  96         .quoteBox {
  97                 position: relative;
  98
  99                 &::before {
 100                         content: attr(data-quote-header);
 101                         cursor: pointer;
 102                         display: block;
 103                         font-style: normal;
 104                         margin-bottom: 20px;
 105                         padding-right: 25px;
 106
 107                         @include wcfFontHeadline;
 108                 }
 109
 110                 &::after {
 111                         content: $fa-var-pencil;
 112                         cursor: pointer;
 113                         font-family: FontAwesome;
 114                         position: absolute;
 115                         right: 24px;
 116                         top: 10px;
 117
 118                         @include wcfFontHeadline;
 119                 }
 120         }
 121
 122         .TODO_codeBox {
 123                 overflow: hidden;
 124                 position: relative;
 125
 126                 .redactorEditCodeBox {
 127                         background-color: rgba(255, 255, 255, .8);
 128                         bottom: 0;
 129                         left: 0;
 130                         opacity: 0;
 131                         position: absolute;
 132                         right: 0;
 133                         text-align: center;
 134                         top: 0;
 135                         transition: opacity .12s linear;
 136                         z-index: 200;
 137
 138                         > div {
 139                                 cursor: pointer;
 140                                 left: 50%;
 141                                 padding: 1em 3em;
 142                                 position: absolute;
 143                                 top: 50%;
 144                                 transform: translate(-50%, -50%);
 145                         }
 146                 }
 147
 148                 &:hover .redactorEditCodeBox {
 149                         opacity: 1;
 150                 }
 151
 152                 ol {
 153                         margin-bottom: 0;
 154                         margin-top: 0;
 155                 }
 156         }
 157
 158         &.TODO_msie .quoteBox {
 159                 /* resets 'hasLayout' causing IE to display resize handle and wonky editing behavior */
 160                 min-height: 0;
 161         }
 162 }
 163
 164 .redactor-dropdown {
 165         > .dropdownMenu {
 166                 display: block;
 167                 visibility: visible;
 168
 169                 /* we cannot influence the actual dropdown position as set by Redactor,
 170                    forces a gap while keeping the inline top-attribute unaffected */
 171                 transform: translateY(3px);
 172
 173                 > li:hover {
 174                         background-color: transparent !important;
 175                 }
 176
 177                 a:hover {
 178                         background-color: $wcfDropdownBackgroundActive;
 179                 }
 180         }
 181
 182         .redactor-dropdown-link-inactive {
 183                 cursor: default;
 184                 opacity: .6;
 185
 186                 &:hover {
 187                         background-color: transparent !important;
 188                         color: $wcfDropdownText !important;
 189                 }
 190         }
 191 }
 192
 193 /* disable auto zoom in mobile safari */
 194 @include small-screen-only {
 195         .redactor-editor + textarea {
 196                 font-size: 16px;
 197                 max-height: 500px;
 198         }
 199 }
 200
 201 .redactor-toolbar {
 202         background-color: $wcfHeaderBackground;
 203         display: flex;
 204         flex-wrap: wrap;
 205         padding: 7px 10px;
 206
 207         > li {
 208                 flex: 0 0 auto;
 209                 margin-bottom: 1px;
 210
 211                 &:not(:last-child) {
 212                         margin-right: 10px;
 213                 }
 214
 215                 > a {
 216                         background-color: $wcfHeaderMenuBackground;
 217                         color: $wcfHeaderMenuLink;
 218                         display: block;
 219                         outline: none;
 220                         padding: 5px 8px;
 221                         text-align: center;
 222                         text-decoration: none;
 223
 224                         @include wcfFontSmall;
 225
 226                         &.redactor-button-disabled,
 227                         &.redactor-button-disabled:before,
 228                         &.redactor-button-disabled > i:before {
 229                                 color: $wcfButtonDisabledText;
 230                         }
 231
 232                         &:hover,
 233                         &.redactor-act,
 234                         &.dropact {
 235                                 background-color: $wcfHeaderMenuBackgroundActive;
 236                                 color: $wcfHeaderMenuLinkActive;
 237                         }
 238                 }
 239         }
 240 }
 241
 242 .redactor-toolbar-tooltip {
 243         @extend .balloonTooltip;
 244
 245         opacity: 1;
 246         visibility: visible;
 247
 248         &:before {
 249                 // TODO: border-color: $wcfTooltipBackgroundColor transparent;
 250                 border-style: solid;
 251                 border-width: 0 5px 5px;
 252                 content: "";
 253                 display: block;
 254                 left: 50%;
 255                 position: absolute;
 256                 top: -5px;
 257                 transform: translateX(-50%);
 258         }
 259 }
 260
 261 .re-bold {
 262         font-weight: 600;
 263 }
 264
 265 .re-italic {
 266         font-style: italic;
 267 }
 268
 269 .re-underline {
 270         text-decoration: underline !important;
 271 }
 272
 273 .re-deleted {
 274         text-decoration: line-through !important;
 275 }
 276
 277 #redactor-image-box {
 278         border: 1px dashed rgba(0, 0, 0, .5);
 279         display: inline-block;
 280         line-height: 0;
 281         max-width: 100%;
 282         position: relative;
 283
 284         > img {
 285                 border-width: 0;
 286                 opacity: .5;
 287         }
 288 }
 289
 290 #redactor-image-editter {
 291         @extend .balloonTooltip;
 292
 293         cursor: pointer;
 294         left: 50%;
 295         // TODO: line-height: $wcfSmallFontSize;
 296         margin-top: -13px;
 297         opacity: 1;
 298         top: 50%;
 299         visibility: visible;
 300         z-index: 5;
 301 }
 302
 303 #redactor-image-resizer {
 304         background-color: rgba(0, 0, 0, 1);
 305         border: 1px solid rgba(255, 255, 255, 1);
 306         bottom: -4px;
 307         cursor: nw-resize;
 308         height: 8px;
 309         line-height: 1;
 310         position: absolute;
 311         right: -5px;
 312         width: 8px;
 313         z-index: 10;
 314 }
 315
 316 .redactorAttachmentContainer {
 317         background-color: rgba(255, 255, 255, 1);
 318         border: 1px solid rgba(238, 238, 238, 1);
 319         border-top-width: 0;
 320         padding: 7px 14px 7px;
 321 }
 322
 323 .redactor-dropdown-box-fontcolor {
 324         width: 200px;
 325
 326         > li.redactorColorPallet {
 327                 padding: 0 4px;
 328
 329                 &:hover {
 330                         background-color: $wcfDropdownBackground !important;
 331                 }
 332
 333                 > a {
 334                         border: 2px solid rgba(255, 255, 255, 1);
 335                         border-bottom-width: 0;
 336                         display: inline-block;
 337                         font-size: 0; // TODO
 338                         height: 20px;
 339                         padding: 0;
 340                         margin: 0;
 341                         width: 20px;
 342                 }
 343         }
 344 }
 345
 346 .redactorDropArea {
 347         background-color: rgba(255, 255, 204, 1);
 348         border: 5px dashed rgba(255, 204, 0);
 349         box-sizing: border-box;
 350         font-size: 1.4rem; // TODO
 351         position: absolute;
 352         text-align: center;
 353         vertical-align: middle;
 354         z-index: 360;
 355
 356         &.active {
 357                 background-color: #CEF6CE;
 358                 border-color: #04B404;
 359         }
 360 }
 361
 362 .redactor-link-tooltip {
 363         // TODO: background-color: $wcfTooltipBackgroundColor;
 364         border-radius: 6px;
 365         // TODO: color: $wcfTooltipColor;
 366         // TODO: font-size: $wcfSmallFontSize;
 367         padding: 5px 10px 7px;
 368         position: absolute;
 369         z-index: 800;
 370
 371         @include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 372
 373         > a {
 374                 // TODO: color: $wcfTooltipColor;
 375         }
 376 }
 377
 378 .redactor-voice-label {
 379         display: none;
 380 }