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