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