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

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