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