Commit | Line | Data |
---|---|---|
b8eab696 | 1 | .redactor-box { |
dbd05c9d | 2 | background-color: $wcfContentBackground; |
b8eab696 AE |
3 | position: relative; |
4 | ||
9d029724 AE |
5 | &:not(:first-child) { |
6 | margin-top: 20px; | |
7 | } | |
8 | ||
b8eab696 AE |
9 | & + .messageTabMenu { |
10 | padding: 0; | |
11 | } | |
12 | ||
13 | & + .innerError, | |
14 | > .innerError { | |
15 | border-radius: 0; | |
16 | box-shadow: none; | |
17 | display: block; | |
18 | margin-top: -1px; | |
19 | } | |
20 | ||
21 | > .innerError { | |
22 | margin: -1px; | |
23 | } | |
b8eab696 AE |
24 | } |
25 | ||
26 | .redactor-editor { | |
bf5372fc AE |
27 | border: 1px solid $wcfContentBorderInner; |
28 | border-top-width: 0; | |
b8eab696 | 29 | max-height: 500px; |
9e7b600c | 30 | padding: 10px; |
b8eab696 AE |
31 | position: relative; |
32 | outline: none; | |
33 | overflow: auto; | |
34 | ||
abc590f6 AE |
35 | * { |
36 | // setting min-width to "0" inside contenteditable causes | |
37 | // IE11 to do all sort of funny things | |
38 | min-width: auto; | |
39 | } | |
40 | ||
af098b36 AE |
41 | &.redactor-placeholder::after { |
42 | color: $wcfContentDimmedText; | |
43 | content: attr(placeholder); | |
44 | display: block; | |
c2e8d0f6 | 45 | pointer-events: none; |
af098b36 AE |
46 | position: absolute; |
47 | } | |
48 | ||
b8eab696 AE |
49 | & + textarea { |
50 | border-width: 0; | |
51 | box-shadow: none; | |
b8eab696 AE |
52 | outline: none; |
53 | padding: 10px; | |
54 | resize: vertical; | |
55 | ||
56 | &:focus { | |
57 | box-shadow: none; | |
58 | } | |
59 | } | |
60 | ||
620a271a AE |
61 | // enforce styles used in messages |
62 | @extend .htmlContent; | |
b8eab696 | 63 | |
9e7b600c AE |
64 | > :not(p) { |
65 | &:first-child { | |
66 | margin-top: 10px !important; | |
67 | } | |
68 | ||
69 | &:last-child { | |
70 | margin-bottom: 20px !important; | |
71 | } | |
72 | } | |
73 | ||
620a271a AE |
74 | // remove margin top for the first paragraph in the editor to avoid a weird looking offset a the top |
75 | > p:first-child { | |
76 | margin-top: 0; | |
b8eab696 AE |
77 | } |
78 | ||
79 | img { | |
b8eab696 | 80 | max-width: 100%; |
00e48dac AE |
81 | |
82 | &:not(.smiley) { | |
83 | // show cursor to indicate editing capability excluding smilies | |
84 | cursor: pointer; | |
85 | } | |
58267a98 AE |
86 | |
87 | /* prevent flicker from pasted images */ | |
88 | &[src^="data:image"] { | |
89 | display: none !important; | |
90 | } | |
b8eab696 AE |
91 | } |
92 | ||
93 | table { | |
94 | border-collapse: collapse; | |
b8eab696 AE |
95 | line-height: 1.6em; |
96 | ||
9fc641b0 MW |
97 | th { |
98 | border: 1px solid #ddd; | |
99 | border-bottom: 2px solid currentColor; | |
100 | } | |
101 | ||
b8eab696 AE |
102 | td { |
103 | border: 1px solid #ddd; | |
104 | padding: 5px; | |
105 | vertical-align: top; | |
3fdf9502 AE |
106 | |
107 | &::before { | |
108 | content: ""; | |
109 | display: inline-block; | |
110 | } | |
b8eab696 AE |
111 | } |
112 | } | |
1760080e AE |
113 | } |
114 | ||
115 | .redactor-dropdown { | |
116 | > .dropdownMenu { | |
117 | display: block; | |
ec1cad28 | 118 | position: relative; |
42af78b3 AE |
119 | visibility: visible; |
120 | ||
ec1cad28 AE |
121 | @include screen-lg { |
122 | top: 1px; | |
123 | } | |
1760080e AE |
124 | |
125 | > li:hover { | |
126 | background-color: transparent !important; | |
127 | } | |
128 | ||
129 | a:hover { | |
130 | background-color: $wcfDropdownBackgroundActive; | |
131 | } | |
132 | } | |
133 | ||
134 | .redactor-dropdown-link-inactive { | |
135 | cursor: default; | |
136 | opacity: .6; | |
137 | ||
de61bfd1 AE |
138 | > a:hover { |
139 | background-color: $wcfDropdownBackground !important; | |
1760080e | 140 | color: $wcfDropdownText !important; |
de61bfd1 | 141 | cursor: default !important; |
1760080e | 142 | } |
b8eab696 AE |
143 | } |
144 | } | |
145 | ||
b8eab696 | 146 | /* disable auto zoom in mobile safari */ |
ed02d9b7 AE |
147 | @include screen-md-down { |
148 | .redactor-editor { | |
b8eab696 AE |
149 | font-size: 16px; |
150 | max-height: 500px; | |
151 | } | |
152 | } | |
153 | ||
154 | .redactor-toolbar { | |
bf5372fc | 155 | background-color: $wcfHeaderBackground; |
1760080e AE |
156 | display: flex; |
157 | flex-wrap: wrap; | |
b8eab696 AE |
158 | |
159 | > li { | |
1760080e | 160 | flex: 0 0 auto; |
b8eab696 | 161 | |
b8eab696 | 162 | > a { |
bf5372fc | 163 | color: $wcfHeaderMenuLink; |
b8eab696 | 164 | display: block; |
b8eab696 | 165 | outline: none; |
a2c4f308 | 166 | padding: 10px; |
b8eab696 | 167 | text-align: center; |
b8eab696 | 168 | |
5908f54f | 169 | @include wcfFontSmall; |
bf5372fc | 170 | |
fd4c3c75 AE |
171 | &.redactor-button-disabled { |
172 | background-color: transparent !important; | |
173 | color: $wcfButtonDisabledText !important; | |
174 | cursor: default; | |
357b5f0b | 175 | pointer-events: none; |
b8eab696 AE |
176 | } |
177 | ||
b8eab696 AE |
178 | &.redactor-act, |
179 | &.dropact { | |
c4dc4aaa | 180 | background-color: $wcfHeaderMenuLinkBackgroundActive; |
bf5372fc | 181 | color: $wcfHeaderMenuLinkActive; |
b8eab696 | 182 | } |
fd4c3c75 AE |
183 | |
184 | .icon { | |
185 | color: inherit; | |
186 | cursor: inherit !important; | |
b1464920 AE |
187 | |
188 | &.redactorButtonImage { | |
189 | background: no-repeat center center; | |
190 | background-size: contain; | |
191 | } | |
fd4c3c75 | 192 | } |
5bf57072 AE |
193 | |
194 | @include screen-lg { | |
195 | // hover-styles on mobile are misleading as they stay much longer | |
196 | // due to the click-like behavior | |
197 | &:hover { | |
198 | background-color: $wcfHeaderMenuLinkBackgroundActive; | |
199 | color: $wcfHeaderMenuLinkActive; | |
200 | } | |
201 | } | |
b8eab696 | 202 | } |
8399847c AE |
203 | |
204 | @include screen-sm-up { | |
205 | &.redactor-toolbar-separator { | |
206 | margin-left: 11px; | |
207 | position: relative; | |
208 | ||
209 | &::before { | |
210 | bottom: 7px; | |
211 | border-left: 1px solid $wcfHeaderMenuLink; | |
212 | content: ""; | |
213 | left: -6px; | |
214 | opacity: .6; | |
215 | position: absolute; | |
216 | top: 7px; | |
217 | } | |
218 | } | |
219 | } | |
d497febe AE |
220 | } |
221 | ||
222 | @include screen-xs { | |
223 | &:not(.redactorToolbarOverride) > li { | |
8399847c AE |
224 | &[data-show-on-mobile="false"] { |
225 | display: none; | |
226 | } | |
227 | } | |
d497febe AE |
228 | |
229 | &.redactorToolbarOverride > .redactor-toolbar-separator { | |
230 | position: relative; | |
231 | ||
232 | &::before { | |
233 | bottom: 7px; | |
234 | border-left: 1px solid $wcfHeaderMenuLink; | |
235 | content: ""; | |
236 | left: 0; | |
237 | opacity: .6; | |
238 | position: absolute; | |
239 | top: 7px; | |
240 | } | |
241 | } | |
242 | ||
243 | .redactorToolbarToggle { | |
244 | position: relative; | |
245 | ||
246 | &::before { | |
247 | bottom: 7px; | |
248 | border-left: 1px solid $wcfHeaderMenuLink; | |
249 | content: ""; | |
250 | left: 0; | |
251 | opacity: .6; | |
252 | position: absolute; | |
253 | top: 7px; | |
254 | } | |
255 | } | |
b8eab696 AE |
256 | } |
257 | } | |
258 | ||
259 | .redactor-toolbar-tooltip { | |
f2b50825 | 260 | @extend .balloonTooltip; |
b8eab696 AE |
261 | |
262 | opacity: 1; | |
263 | visibility: visible; | |
b8eab696 AE |
264 | } |
265 | ||
266 | .redactorAttachmentContainer { | |
267 | background-color: rgba(255, 255, 255, 1); | |
268 | border: 1px solid rgba(238, 238, 238, 1); | |
269 | border-top-width: 0; | |
270 | padding: 7px 14px 7px; | |
271 | } | |
272 | ||
273 | .redactor-dropdown-box-fontcolor { | |
274 | width: 200px; | |
275 | ||
276 | > li.redactorColorPallet { | |
277 | padding: 0 4px; | |
278 | ||
279 | &:hover { | |
f2b50825 | 280 | background-color: $wcfDropdownBackground !important; |
b8eab696 AE |
281 | } |
282 | ||
283 | > a { | |
284 | border: 2px solid rgba(255, 255, 255, 1); | |
285 | border-bottom-width: 0; | |
286 | display: inline-block; | |
361e67e1 | 287 | font-size: 0; |
b8eab696 AE |
288 | height: 20px; |
289 | padding: 0; | |
290 | margin: 0; | |
291 | width: 20px; | |
292 | } | |
293 | } | |
294 | } | |
295 | ||
296 | .redactorDropArea { | |
26c8f1c3 AE |
297 | align-items: center; |
298 | background-color: $wcfStatusInfoBackground; | |
299 | border: 5px dashed currentColor; | |
300 | bottom: 0; | |
301 | color: $wcfStatusInfoText; | |
302 | display: flex; | |
303 | justify-content: center; | |
304 | left: 0; | |
b8eab696 | 305 | position: absolute; |
26c8f1c3 | 306 | right: 0; |
6a376b34 | 307 | z-index: 10; |
b8eab696 | 308 | |
26c8f1c3 AE |
309 | @include wcfFontSection; |
310 | ||
311 | &::before { | |
312 | content: attr(data-drop-here); | |
313 | } | |
314 | ||
b8eab696 | 315 | &.active { |
26c8f1c3 AE |
316 | background-color: $wcfStatusSuccessBackground; |
317 | color: $wcfStatusSuccessText; | |
318 | ||
319 | &::before { | |
320 | content: attr(data-drop-now); | |
321 | } | |
b8eab696 AE |
322 | } |
323 | } | |
324 | ||
325 | .redactor-link-tooltip { | |
22a2df66 MW |
326 | background-color: $wcfTooltipBackground; |
327 | border-radius: 2px; | |
328 | box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); | |
329 | color: $wcfTooltipText; | |
b8eab696 AE |
330 | padding: 5px 10px 7px; |
331 | position: absolute; | |
332 | z-index: 800; | |
333 | ||
b8eab696 | 334 | > a { |
22a2df66 | 335 | color: $wcfTooltipText; |
b8eab696 AE |
336 | } |
337 | } | |
bf5372fc AE |
338 | |
339 | .redactor-voice-label { | |
340 | display: none; | |
341 | } | |
9dab3711 | 342 | |
5840fdfd AE |
343 | /* format */ |
344 | .redactor-dropdown-h2 { | |
345 | @include wcfFontSection; | |
346 | } | |
347 | ||
348 | .redactor-dropdown-h3 { | |
349 | @include wcfFontHeadline; | |
350 | } | |
351 | ||
352 | .redactor-dropdown-h4 { | |
353 | // TODO: add styling | |
354 | } | |
355 | ||
9dab3711 AE |
356 | /* alignment plugin */ |
357 | .text-center { | |
fe8a3e1b | 358 | text-align: center !important; |
9dab3711 AE |
359 | } |
360 | ||
361 | .text-right { | |
fe8a3e1b | 362 | text-align: right !important; |
9dab3711 | 363 | } |
831dc0da | 364 | |
903a8623 AE |
365 | /* alignment plugin / custom value */ |
366 | .text-justify { | |
fe8a3e1b | 367 | text-align: justify !important; |
903a8623 AE |
368 | |
369 | -webkit-hyphens: auto; | |
370 | -moz-hyphens: auto; | |
371 | -ms-hyphens: auto; | |
372 | hyphens: auto; | |
373 | } | |
374 | ||
831dc0da AE |
375 | /* text color selection */ |
376 | .redactor-dropdown-box-woltlabColor { | |
377 | > ul { | |
378 | display: flex !important; | |
379 | flex-wrap: wrap; | |
380 | width: 272px; | |
381 | ||
607ff92e AE |
382 | > .dropdownDivider, |
383 | > .dropdownDivider + li { | |
831dc0da AE |
384 | flex: 0 0 100%; |
385 | } | |
386 | } | |
387 | ||
388 | .woltlab-color-selection { | |
389 | flex: 0 0 30px; | |
390 | margin: 2px; | |
391 | overflow: hidden; | |
392 | ||
393 | > a { | |
394 | background-color: currentColor !important; | |
831dc0da AE |
395 | display: block; |
396 | height: 30px; | |
397 | width: 30px; | |
398 | } | |
399 | } | |
400 | } | |
81011521 AE |
401 | |
402 | /* font size */ | |
57c2412f AE |
403 | .woltlab-size-8 { font-size: 8pt; } |
404 | .woltlab-size-10 { font-size: 10pt; } | |
405 | .woltlab-size-12 { font-size: 12pt; } | |
406 | .woltlab-size-14 { font-size: 14pt; } | |
407 | .woltlab-size-18 { font-size: 18pt; } | |
408 | .woltlab-size-24 { font-size: 24pt; } | |
409 | .woltlab-size-36 { font-size: 36pt; } | |
f06b38e2 AE |
410 | |
411 | /* image float */ | |
412 | .messageFloatObjectLeft { | |
413 | float: left; | |
414 | margin: 0 20px 20px 0; | |
415 | } | |
416 | ||
417 | .messageFloatObjectRight { | |
418 | float: right; | |
419 | margin: 0 0 20px 20px; | |
420 | } | |
b025db3d | 421 | |
61b1c63a AE |
422 | .smiley, |
423 | .jsSmiley > img { | |
424 | &[src$="_emojione.png"] { | |
425 | max-height: 20px; | |
426 | } | |
427 | } | |
428 | ||
b025db3d AE |
429 | .smiley { |
430 | margin: 0 1px; | |
431 | } | |
c2e8d0f6 | 432 | |
61b1c63a AE |
433 | @include screen-md-down { |
434 | .jsSmiley { | |
435 | display: inline-block; | |
436 | padding: 10px; | |
437 | } | |
438 | } | |
439 | ||
c2e8d0f6 AE |
440 | .wysiwygTextarea { |
441 | background-color: transparent !important; | |
442 | border: 1px solid $wcfContentBorderInner !important; | |
443 | color: transparent !important; | |
444 | display: block; | |
445 | height: 238px; | |
446 | width: 100%; | |
447 | } | |
2f035ee4 AE |
448 | |
449 | .messageQuickReplyCollapsed { | |
8e8cc420 AE |
450 | border-bottom-width: 0 !important; |
451 | ||
452 | @include screen-sm-down { | |
453 | margin-left: -10px; | |
454 | margin-right: -10px; | |
455 | } | |
456 | ||
2f035ee4 | 457 | .messageSidebar { |
8e8cc420 | 458 | display: none; |
2f035ee4 AE |
459 | } |
460 | ||
461 | .messageQuickReplyContent { | |
8e8cc420 | 462 | background-color: $wcfSidebarBackground; |
2f035ee4 | 463 | cursor: pointer; |
8e8cc420 AE |
464 | display: inline-block !important; |
465 | margin: 0 !important; | |
466 | max-width: 100% !important; | |
467 | overflow: hidden; | |
45beeb47 | 468 | padding: 10px 20px; |
8e8cc420 AE |
469 | position: relative; |
470 | width: 100% !important; | |
2f035ee4 | 471 | |
8e8cc420 AE |
472 | @include screen-md-up { |
473 | border-radius: 2px; | |
2f035ee4 AE |
474 | } |
475 | ||
8e8cc420 AE |
476 | &::before { |
477 | color: $wcfSidebarText; | |
478 | content: $fa-var-reply; | |
479 | font-family: FontAwesome; | |
480 | font-size: 28px; | |
481 | height: 32px; | |
482 | line-height: 32px; | |
483 | margin-right: 10px; | |
484 | width: 32px; | |
485 | vertical-align: -5px; | |
2f035ee4 AE |
486 | } |
487 | ||
8e8cc420 AE |
488 | &::after { |
489 | color: $wcfSidebarText; | |
490 | content: attr(data-placeholder); | |
2f035ee4 | 491 | |
8e8cc420 AE |
492 | @include screen-sm-up { |
493 | @include wcfFontSection; | |
2f035ee4 AE |
494 | } |
495 | } | |
496 | ||
8e8cc420 AE |
497 | > .messageBody { |
498 | left: 200%; | |
499 | position: absolute; | |
500 | top: -100%; | |
2f035ee4 AE |
501 | } |
502 | ||
503 | > .messageFooter { | |
504 | display: none; | |
505 | } | |
506 | } | |
507 | } | |
41ad3366 AE |
508 | |
509 | .redactorAutosaveRestored { | |
510 | background-color: $wcfContentBackground; | |
511 | border-top: 1px solid $wcfContentBorderInner; | |
512 | bottom: 1px; | |
513 | display: flex; | |
514 | opacity: 0; | |
515 | position: absolute; | |
516 | right: 1px; | |
517 | transition: opacity .12s linear, visibility 0s linear .12s; | |
518 | visibility: hidden; | |
519 | ||
520 | &.active { | |
521 | opacity: 1; | |
522 | transition-delay: 0s; | |
523 | visibility: visible; | |
524 | } | |
525 | ||
526 | > a { | |
527 | border-left: 1px solid $wcfContentBorderInner; | |
528 | flex: 0 0 auto; | |
529 | padding: 10px; | |
530 | } | |
531 | ||
532 | > span { | |
533 | color: $wcfContentDimmedText; | |
534 | flex: 1 1 auto; | |
535 | padding: 10px; | |
536 | } | |
537 | ||
538 | @include screen-sm-up { | |
539 | border-left: 1px solid $wcfContentBorderInner; | |
540 | border-top-left-radius: 2px; | |
541 | ||
542 | > span { | |
543 | padding: 10px 20px; | |
544 | } | |
545 | } | |
546 | ||
547 | @include screen-xs { | |
548 | left: 1px; | |
549 | ||
550 | > span { | |
551 | text-align: center; | |
552 | } | |
553 | } | |
554 | } | |
dbd05c9d AE |
555 | |
556 | .redactorBoxFullscreen { | |
557 | bottom: 0; | |
558 | left: 0; | |
559 | position: fixed; | |
560 | right: 0; | |
561 | top: 0; | |
562 | z-index: 310; | |
563 | ||
564 | .redactor-editor { | |
565 | max-height: none !important; | |
566 | min-height: 0 !important; | |
567 | } | |
568 | } |