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 screen-sm-down {
 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
 206         > li {
 207                 flex: 0 0 auto;
 208                 margin-bottom: 1px;
 209
 210                 > a {
 211                         color: $wcfHeaderMenuLink;
 212                         display: block;
 213                         outline: none;
 214                         padding: 10px;
 215                         text-align: center;
 216
 217                         @include wcfFontSmall;
 218
 219                         &.redactor-button-disabled,
 220                         &.redactor-button-disabled:before,
 221                         &.redactor-button-disabled > i:before {
 222                                 color: $wcfButtonDisabledText;
 223                         }
 224
 225                         &:hover,
 226                         &.redactor-act,
 227                         &.dropact {
 228                                 background-color: $wcfHeaderMenuBackgroundActive;
 229                                 color: $wcfHeaderMenuLinkActive;
 230                         }
 231                 }
 232         }
 233 }
 234
 235 .redactor-toolbar-tooltip {
 236         @extend .balloonTooltip;
 237
 238         opacity: 1;
 239         visibility: visible;
 240
 241         &:before {
 242                 // TODO: border-color: $wcfTooltipBackgroundColor transparent;
 243                 border-style: solid;
 244                 border-width: 0 5px 5px;
 245                 content: "";
 246                 display: block;
 247                 left: 50%;
 248                 position: absolute;
 249                 top: -5px;
 250                 transform: translateX(-50%);
 251         }
 252 }
 253
 254 .re-bold {
 255         font-weight: 600;
 256 }
 257
 258 .re-italic {
 259         font-style: italic;
 260 }
 261
 262 .re-underline {
 263         text-decoration: underline !important;
 264 }
 265
 266 .re-deleted {
 267         text-decoration: line-through !important;
 268 }
 269
 270 #redactor-image-box {
 271         border: 1px dashed rgba(0, 0, 0, .5);
 272         display: inline-block;
 273         line-height: 0;
 274         max-width: 100%;
 275         position: relative;
 276
 277         > img {
 278                 border-width: 0;
 279                 opacity: .5;
 280         }
 281 }
 282
 283 #redactor-image-editter {
 284         @extend .balloonTooltip;
 285
 286         cursor: pointer;
 287         left: 50%;
 288         // TODO: line-height: $wcfSmallFontSize;
 289         margin-top: -13px;
 290         opacity: 1;
 291         top: 50%;
 292         visibility: visible;
 293         z-index: 5;
 294 }
 295
 296 #redactor-image-resizer {
 297         background-color: rgba(0, 0, 0, 1);
 298         border: 1px solid rgba(255, 255, 255, 1);
 299         bottom: -4px;
 300         cursor: nw-resize;
 301         height: 8px;
 302         line-height: 1;
 303         position: absolute;
 304         right: -5px;
 305         width: 8px;
 306         z-index: 10;
 307 }
 308
 309 .redactorAttachmentContainer {
 310         background-color: rgba(255, 255, 255, 1);
 311         border: 1px solid rgba(238, 238, 238, 1);
 312         border-top-width: 0;
 313         padding: 7px 14px 7px;
 314 }
 315
 316 .redactor-dropdown-box-fontcolor {
 317         width: 200px;
 318
 319         > li.redactorColorPallet {
 320                 padding: 0 4px;
 321
 322                 &:hover {
 323                         background-color: $wcfDropdownBackground !important;
 324                 }
 325
 326                 > a {
 327                         border: 2px solid rgba(255, 255, 255, 1);
 328                         border-bottom-width: 0;
 329                         display: inline-block;
 330                         font-size: 0; // TODO
 331                         height: 20px;
 332                         padding: 0;
 333                         margin: 0;
 334                         width: 20px;
 335                 }
 336         }
 337 }
 338
 339 .redactorDropArea {
 340         background-color: rgba(255, 255, 204, 1);
 341         border: 5px dashed rgba(255, 204, 0);
 342         box-sizing: border-box;
 343         font-size: 1.4rem; // TODO
 344         position: absolute;
 345         text-align: center;
 346         vertical-align: middle;
 347         z-index: 360;
 348
 349         &.active {
 350                 background-color: #CEF6CE;
 351                 border-color: #04B404;
 352         }
 353 }
 354
 355 .redactor-link-tooltip {
 356         // TODO: background-color: $wcfTooltipBackgroundColor;
 357         border-radius: 6px;
 358         // TODO: color: $wcfTooltipColor;
 359         // TODO: font-size: $wcfSmallFontSize;
 360         padding: 5px 10px 7px;
 361         position: absolute;
 362         z-index: 800;
 363
 364         @include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 365
 366         > a {
 367                 // TODO: color: $wcfTooltipColor;
 368         }
 369 }
 370
 371 .redactor-voice-label {
 372         display: none;
 373 }