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         ul,
  70         ol {
  71                 @extend .nativeList;
  72         }
  73
  74         ul {
  75                 list-style-type: disc;
  76         }
  77
  78         ol {
  79                 list-style-type: decimal;
  80         }
  81
  82         img {
  83                 border: 1px solid transparent;
  84                 max-width: 100%;
  85         }
  86
  87         table {
  88                 border-collapse: collapse;
  89                 //font-size: 14px; TODO
  90                 line-height: 1.6em;
  91
  92                 td {
  93                         border: 1px solid #ddd;
  94                         padding: 5px;
  95                         vertical-align: top;
  96                 }
  97         }
  98
  99         .quoteBox {
 100                 position: relative;
 101
 102                 &::before {
 103                         content: attr(data-quote-header);
 104                         cursor: pointer;
 105                         display: block;
 106                         margin-bottom: 10px;
 107                         padding-right: 20px;
 108
 109                         @extend .wcfFontHeadline;
 110                 }
 111
 112                 &::after {
 113                         content: $fa-var-pencil;
 114                         font-family: FontAwesome;
 115                         font-size: $wcfFontSizeHeadline; // TODO
 116                         position: absolute;
 117                         right: 10px;
 118                         top: 10px;
 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 .2s 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
 168                 > li:hover {
 169                         background-color: transparent !important;
 170                 }
 171
 172                 a:hover {
 173                         background-color: $wcfDropdownBackgroundActive;
 174                 }
 175         }
 176
 177         .redactor-dropdown-link-inactive {
 178                 cursor: default;
 179                 opacity: .6;
 180
 181                 &:hover {
 182                         background-color: transparent !important;
 183                         color: $wcfDropdownText !important;
 184                 }
 185         }
 186 }
 187
 188 /* disable auto zoom in mobile safari */
 189 @media only screen and (max-width: 800px) {
 190         .redactor-editor + textarea {
 191                 font-size: 16px;
 192                 max-height: 500px;
 193         }
 194 }
 195
 196 .redactor-toolbar {
 197         background-color: $wcfHeaderBackground;
 198         display: flex;
 199         flex-wrap: wrap;
 200         padding: 7px 10px;
 201
 202         > li {
 203                 flex: 0 0 auto;
 204                 margin-bottom: 1px;
 205
 206                 &:not(:last-child) {
 207                         margin-right: 10px;
 208                 }
 209
 210                 > a {
 211                         background-color: $wcfHeaderMenuBackground;
 212                         color: $wcfHeaderMenuLink;
 213                         display: block;
 214                         outline: none;
 215                         padding: 5px 8px;
 216                         text-align: center;
 217                         text-decoration: none;
 218
 219                         @extend .wcfFontSmall;
 220
 221                         &.redactor-button-disabled,
 222                         &.redactor-button-disabled:before,
 223                         &.redactor-button-disabled > i:before {
 224                                 color: $wcfButtonDisabledText;
 225                         }
 226
 227                         &:hover,
 228                         &.redactor-act,
 229                         &.dropact {
 230                                 background-color: $wcfHeaderMenuBackgroundActive;
 231                                 color: $wcfHeaderMenuLinkActive;
 232                         }
 233                 }
 234         }
 235 }
 236
 237 .redactor-toolbar-tooltip {
 238         @extend .balloonTooltip;
 239
 240         opacity: 1;
 241         visibility: visible;
 242
 243         &:before {
 244                 // TODO: border-color: $wcfTooltipBackgroundColor transparent;
 245                 border-style: solid;
 246                 border-width: 0 5px 5px;
 247                 content: "";
 248                 display: block;
 249                 left: 50%;
 250                 position: absolute;
 251                 top: -5px;
 252                 transform: translateX(-50%);
 253         }
 254 }
 255
 256 .re-bold {
 257         font-weight: 600;
 258 }
 259
 260 .re-italic {
 261         font-style: italic;
 262 }
 263
 264 .re-underline {
 265         text-decoration: underline !important;
 266 }
 267
 268 .re-deleted {
 269         text-decoration: line-through !important;
 270 }
 271
 272 #redactor-image-box {
 273         border: 1px dashed rgba(0, 0, 0, .5);
 274         display: inline-block;
 275         line-height: 0;
 276         max-width: 100%;
 277         position: relative;
 278
 279         > img {
 280                 border-width: 0;
 281                 opacity: .5;
 282         }
 283 }
 284
 285 #redactor-image-editter {
 286         @extend .balloonTooltip;
 287
 288         cursor: pointer;
 289         left: 50%;
 290         // TODO: line-height: $wcfSmallFontSize;
 291         margin-top: -13px;
 292         opacity: 1;
 293         top: 50%;
 294         visibility: visible;
 295         z-index: 5;
 296 }
 297
 298 #redactor-image-resizer {
 299         background-color: rgba(0, 0, 0, 1);
 300         border: 1px solid rgba(255, 255, 255, 1);
 301         bottom: -4px;
 302         cursor: nw-resize;
 303         height: 8px;
 304         line-height: 1;
 305         position: absolute;
 306         right: -5px;
 307         width: 8px;
 308         z-index: 10;
 309 }
 310
 311 .redactorAttachmentContainer {
 312         background-color: rgba(255, 255, 255, 1);
 313         border: 1px solid rgba(238, 238, 238, 1);
 314         border-top-width: 0;
 315         padding: 7px 14px 7px;
 316 }
 317
 318 .redactor-dropdown-box-fontcolor {
 319         width: 200px;
 320
 321         > li.redactorColorPallet {
 322                 padding: 0 4px;
 323
 324                 &:hover {
 325                         background-color: $wcfDropdownBackground !important;
 326                 }
 327
 328                 > a {
 329                         border: 2px solid rgba(255, 255, 255, 1);
 330                         border-bottom-width: 0;
 331                         display: inline-block;
 332                         font-size: 0; // TODO
 333                         height: 20px;
 334                         padding: 0;
 335                         margin: 0;
 336                         width: 20px;
 337                 }
 338         }
 339 }
 340
 341 .redactorDropArea {
 342         background-color: rgba(255, 255, 204, 1);
 343         border: 5px dashed rgba(255, 204, 0);
 344         box-sizing: border-box;
 345         font-size: 1.4rem; // TODO
 346         position: absolute;
 347         text-align: center;
 348         vertical-align: middle;
 349         z-index: 360;
 350
 351         &.active {
 352                 background-color: #CEF6CE;
 353                 border-color: #04B404;
 354         }
 355 }
 356
 357 .redactor-link-tooltip {
 358         // TODO: background-color: $wcfTooltipBackgroundColor;
 359         border-radius: 6px;
 360         // TODO: color: $wcfTooltipColor;
 361         // TODO: font-size: $wcfSmallFontSize;
 362         padding: 5px 10px 7px;
 363         position: absolute;
 364         z-index: 800;
 365
 366         @include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 367
 368         > a {
 369                 // TODO: color: $wcfTooltipColor;
 370         }
 371 }
 372
 373 .redactor-voice-label {
 374         display: none;
 375 }