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