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                         margin-bottom: 10px;
 104                         padding-right: 20px;
 105
 106                         @include wcfFontHeadline;
 107                 }
 108
 109                 &::after {
 110                         content: $fa-var-pencil;
 111                         font-family: FontAwesome;
 112                         font-size: $wcfFontSizeHeadline; // TODO
 113                         position: absolute;
 114                         right: 10px;
 115                         top: 10px;
 116                 }
 117         }
 118
 119         .TODO_codeBox {
 120                 overflow: hidden;
 121                 position: relative;
 122
 123                 .redactorEditCodeBox {
 124                         background-color: rgba(255, 255, 255, .8);
 125                         bottom: 0;
 126                         left: 0;
 127                         opacity: 0;
 128                         position: absolute;
 129                         right: 0;
 130                         text-align: center;
 131                         top: 0;
 132                         transition: opacity .2s linear;
 133                         z-index: 200;
 134
 135                         > div {
 136                                 cursor: pointer;
 137                                 left: 50%;
 138                                 padding: 1em 3em;
 139                                 position: absolute;
 140                                 top: 50%;
 141                                 transform: translate(-50%, -50%);
 142                         }
 143                 }
 144
 145                 &:hover .redactorEditCodeBox {
 146                         opacity: 1;
 147                 }
 148
 149                 ol {
 150                         margin-bottom: 0;
 151                         margin-top: 0;
 152                 }
 153         }
 154
 155         &.TODO_msie .quoteBox {
 156                 /* resets 'hasLayout' causing IE to display resize handle and wonky editing behavior */
 157                 min-height: 0;
 158         }
 159 }
 160
 161 .redactor-dropdown {
 162         > .dropdownMenu {
 163                 display: block;
 164                 visibility: visible;
 165
 166                 /* we cannot influence the actual dropdown position as set by Redactor,
 167                    forces a gap while keeping the inline top-attribute unaffected */
 168                 transform: translateY(3px);
 169
 170                 > li:hover {
 171                         background-color: transparent !important;
 172                 }
 173
 174                 a:hover {
 175                         background-color: $wcfDropdownBackgroundActive;
 176                 }
 177         }
 178
 179         .redactor-dropdown-link-inactive {
 180                 cursor: default;
 181                 opacity: .6;
 182
 183                 &:hover {
 184                         background-color: transparent !important;
 185                         color: $wcfDropdownText !important;
 186                 }
 187         }
 188 }
 189
 190 /* disable auto zoom in mobile safari */
 191 @include small-screen-only {
 192         .redactor-editor + textarea {
 193                 font-size: 16px;
 194                 max-height: 500px;
 195         }
 196 }
 197
 198 .redactor-toolbar {
 199         background-color: $wcfHeaderBackground;
 200         display: flex;
 201         flex-wrap: wrap;
 202         padding: 7px 10px;
 203
 204         > li {
 205                 flex: 0 0 auto;
 206                 margin-bottom: 1px;
 207
 208                 &:not(:last-child) {
 209                         margin-right: 10px;
 210                 }
 211
 212                 > a {
 213                         background-color: $wcfHeaderMenuBackground;
 214                         color: $wcfHeaderMenuLink;
 215                         display: block;
 216                         outline: none;
 217                         padding: 5px 8px;
 218                         text-align: center;
 219                         text-decoration: none;
 220
 221                         @include wcfFontSmall;
 222
 223                         &.redactor-button-disabled,
 224                         &.redactor-button-disabled:before,
 225                         &.redactor-button-disabled > i:before {
 226                                 color: $wcfButtonDisabledText;
 227                         }
 228
 229                         &:hover,
 230                         &.redactor-act,
 231                         &.dropact {
 232                                 background-color: $wcfHeaderMenuBackgroundActive;
 233                                 color: $wcfHeaderMenuLinkActive;
 234                         }
 235                 }
 236         }
 237 }
 238
 239 .redactor-toolbar-tooltip {
 240         @extend .balloonTooltip;
 241
 242         opacity: 1;
 243         visibility: visible;
 244
 245         &:before {
 246                 // TODO: border-color: $wcfTooltipBackgroundColor transparent;
 247                 border-style: solid;
 248                 border-width: 0 5px 5px;
 249                 content: "";
 250                 display: block;
 251                 left: 50%;
 252                 position: absolute;
 253                 top: -5px;
 254                 transform: translateX(-50%);
 255         }
 256 }
 257
 258 .re-bold {
 259         font-weight: 600;
 260 }
 261
 262 .re-italic {
 263         font-style: italic;
 264 }
 265
 266 .re-underline {
 267         text-decoration: underline !important;
 268 }
 269
 270 .re-deleted {
 271         text-decoration: line-through !important;
 272 }
 273
 274 #redactor-image-box {
 275         border: 1px dashed rgba(0, 0, 0, .5);
 276         display: inline-block;
 277         line-height: 0;
 278         max-width: 100%;
 279         position: relative;
 280
 281         > img {
 282                 border-width: 0;
 283                 opacity: .5;
 284         }
 285 }
 286
 287 #redactor-image-editter {
 288         @extend .balloonTooltip;
 289
 290         cursor: pointer;
 291         left: 50%;
 292         // TODO: line-height: $wcfSmallFontSize;
 293         margin-top: -13px;
 294         opacity: 1;
 295         top: 50%;
 296         visibility: visible;
 297         z-index: 5;
 298 }
 299
 300 #redactor-image-resizer {
 301         background-color: rgba(0, 0, 0, 1);
 302         border: 1px solid rgba(255, 255, 255, 1);
 303         bottom: -4px;
 304         cursor: nw-resize;
 305         height: 8px;
 306         line-height: 1;
 307         position: absolute;
 308         right: -5px;
 309         width: 8px;
 310         z-index: 10;
 311 }
 312
 313 .redactorAttachmentContainer {
 314         background-color: rgba(255, 255, 255, 1);
 315         border: 1px solid rgba(238, 238, 238, 1);
 316         border-top-width: 0;
 317         padding: 7px 14px 7px;
 318 }
 319
 320 .redactor-dropdown-box-fontcolor {
 321         width: 200px;
 322
 323         > li.redactorColorPallet {
 324                 padding: 0 4px;
 325
 326                 &:hover {
 327                         background-color: $wcfDropdownBackground !important;
 328                 }
 329
 330                 > a {
 331                         border: 2px solid rgba(255, 255, 255, 1);
 332                         border-bottom-width: 0;
 333                         display: inline-block;
 334                         font-size: 0; // TODO
 335                         height: 20px;
 336                         padding: 0;
 337                         margin: 0;
 338                         width: 20px;
 339                 }
 340         }
 341 }
 342
 343 .redactorDropArea {
 344         background-color: rgba(255, 255, 204, 1);
 345         border: 5px dashed rgba(255, 204, 0);
 346         box-sizing: border-box;
 347         font-size: 1.4rem; // TODO
 348         position: absolute;
 349         text-align: center;
 350         vertical-align: middle;
 351         z-index: 360;
 352
 353         &.active {
 354                 background-color: #CEF6CE;
 355                 border-color: #04B404;
 356         }
 357 }
 358
 359 .redactor-link-tooltip {
 360         // TODO: background-color: $wcfTooltipBackgroundColor;
 361         border-radius: 6px;
 362         // TODO: color: $wcfTooltipColor;
 363         // TODO: font-size: $wcfSmallFontSize;
 364         padding: 5px 10px 7px;
 365         position: absolute;
 366         z-index: 800;
 367
 368         @include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 369
 370         > a {
 371                 // TODO: color: $wcfTooltipColor;
 372         }
 373 }
 374
 375 .redactor-voice-label {
 376         display: none;
 377 }