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

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