PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.11
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.11
1.8.13 1.8.12.3 1.8.12.2 1.8.12.1 1.8.12 1.8.11.3 1.8.11.2 1.8.11.1 1.8.11 1.6.6 1.6.60 1.6.7 1.6.8 1.6.9 1.7.0 1.7.0.1 1.7.0.11 1.7.0.12 1.7.0.14 1.7.0.2 1.7.0.3 1.7.0.5 1.7.0.6 1.7.0.7 1.7.0.9 All 211 releases
charitable / assets / css / campaign-builder / builder-preview.css

builder-preview.css in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.11, at assets/css/campaign-builder/builder-preview.css

1,156 lines 39.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #charitable-design-wrap {
2 /* description */
3 /* progress */
4 /* donate amount */
5 /* sharing options */
6 /* campaign summary */
7 /* info bar */
8 /* button */
9 /* html */
10 /* donation form */
11 /* donation options */
12 /* donor wall */
13 /* organizer */
14 /* photo */
15 /* video */
16 /* generic container */
17 /* header specific */
18 /* row specific? */
19 /* article specific */
20 /* headlines */
21 /* alignment in preview */
22 /* Recurring Donations */
23 }
24 #charitable-design-wrap.no-fields-mode {
25 position: relative;
26 }
27 #charitable-design-wrap.no-fields-mode .charitable-campaign-preview.charitable-campaign-preview-container {
28 min-height: 600px;
29 z-index: 1;
30 position: relative;
31 background-color: transparent;
32 }
33 #charitable-design-wrap.no-fields-mode .charitable-campaign-preview.charitable-campaign-preview-container .charitable-field-wrap {
34 padding: 0;
35 }
36 #charitable-design-wrap.no-fields-mode .charitable-campaign-preview.charitable-campaign-preview-container .charitable-preview-row .charitable-field-wrap {
37 min-height: 400px;
38 }
39 #charitable-design-wrap.no-fields-mode .charitable-campaign-preview.charitable-campaign-preview-container .charitable-preview-header .charitable-field-wrap {
40 min-height: 200px;
41 }
42 #charitable-design-wrap.loading {
43 position: relative;
44 }
45 #charitable-design-wrap.loading i {
46 display: inline-block;
47 height: 50px;
48 width: 50px;
49 background-size: 50px 50px;
50 margin-top: calc(50% + 25px);
51 margin-left: calc(50% - 25px);
52 }
53 #charitable-design-wrap.loading .charitable-campaign-preview-loader {
54 height: 100%;
55 width: 100%;
56 position: absolute;
57 z-index: 9;
58 background-color: #fff;
59 opacity: 0.8;
60 display: block;
61 }
62 #charitable-design-wrap .charitable-drag-new-block-here {
63 display: none;
64 }
65 #charitable-design-wrap .charitable-field-target {
66 border-width: 3px;
67 border-color: rgba(0, 0, 0, 0.15);
68 border-style: dashed;
69 position: relative;
70 min-height: 600px;
71 }
72 #charitable-design-wrap .charitable-field-target .charitable-drag-new-block-here {
73 display: block;
74 position: absolute;
75 top: 50%;
76 bottom: auto;
77 left: 0;
78 right: 0;
79 text-align: center;
80 height: 100%;
81 }
82 #charitable-design-wrap .charitable-field-target .charitable-drag-new-block-here p {
83 font-weight: 700;
84 font-size: 18px;
85 line-height: 18px;
86 color: black;
87 }
88 #charitable-design-wrap .charitable-preview-notice * {
89 color: black;
90 }
91 #charitable-design-wrap .charitable-campaign-preview-loader {
92 display: none;
93 }
94 #charitable-design-wrap .charitable-campaign-preview.charitable-campaign-preview-container {
95 background-color: #ffffff;
96 padding: 0;
97 }
98 #charitable-design-wrap .row {
99 display: flex;
100 flex-direction: row;
101 flex-wrap: wrap;
102 width: 100%;
103 }
104 #charitable-design-wrap .column {
105 display: flex;
106 flex-direction: column;
107 flex-basis: 100%;
108 flex: 1;
109 }
110 #charitable-design-wrap .no-padding {
111 padding: 0;
112 background-color: transparent;
113 }
114 #charitable-design-wrap .placeholder {
115 padding: 10px;
116 }
117 #charitable-design-wrap .placeholder.one-icon-centered,
118 #charitable-design-wrap .placeholder div.one-icon-centered {
119 display: flex;
120 }
121 #charitable-design-wrap .placeholder.one-icon-centered i,
122 #charitable-design-wrap .placeholder div.one-icon-centered i {
123 margin: auto;
124 display: table;
125 text-align: center;
126 height: 100%;
127 font-size: 500%;
128 width: 100%;
129 opacity: 0.55;
130 color: #2d2d2d;
131 }
132 #charitable-design-wrap .placeholder.charitable-loading {
133 opacity: 0.35;
134 }
135 #charitable-design-wrap .placeholder .charitable-campaign-builder-placeholder-preview-text {
136 max-height: 550px;
137 }
138 #charitable-design-wrap .charitable-campaign-builder-placeholder-preview-text {
139 opacity: 0.35;
140 overflow: hidden;
141 }
142 #charitable-design-wrap .charitable-prevent-select {
143 -webkit-user-select: none; /* Safari */
144 -ms-user-select: none; /* IE 10 and IE 11 */
145 user-select: none; /* Standard syntax */
146 pointer-events: none;
147 }
148 #charitable-design-wrap .charitable-hover-button {
149 background-color: #036aab;
150 display: none;
151 color: #ffffff;
152 position: absolute;
153 top: 0;
154 right: 0;
155 width: auto;
156 }
157 #charitable-design-wrap .charitable-hover-button i {
158 font-size: 14px;
159 padding: 5px;
160 }
161 #charitable-design-wrap .charitable-campaign-builder-no-description-preview {
162 padding: 25px;
163 display: inline-block;
164 }
165 #charitable-design-wrap .charitable-campaign-builder-no-description-preview i {
166 font-size: 60px;
167 line-height: 60px;
168 display: block;
169 float: left;
170 color: #e27730;
171 }
172 #charitable-design-wrap .charitable-campaign-builder-no-description-preview p {
173 margin: 0;
174 padding: 0;
175 }
176 #charitable-design-wrap .charitable-campaign-builder-no-description-preview div {
177 float: left;
178 margin-left: 25px;
179 color: #2d2d2d;
180 }
181 #charitable-design-wrap .charitable-campaign-builder-no-description-preview div h2 {
182 margin-top: 0;
183 margin-bottom: 0;
184 font-size: 32px;
185 line-height: 42px;
186 font-weight: 800;
187 color: #e27730;
188 }
189 #charitable-design-wrap .progress {
190 padding: 5px;
191 margin: 5px;
192 border-radius: 4px;
193 border-color: #b6b6b6;
194 background-color: #ffffff;
195 border-width: 1px;
196 border-style: solid;
197 }
198 #charitable-design-wrap .progress .progress-bar {
199 height: 16px;
200 width: 50%;
201 border-radius: 4px;
202 background-color: #2d2d2d;
203 -webkit-transition: 0.4s linear;
204 -moz-transition: 0.4s linear;
205 -o-transition: 0.4s linear;
206 transition: 0.4s linear;
207 -webkit-transition-property: width, background-color;
208 -moz-transition-property: width, background-color;
209 -o-transition-property: width, background-color;
210 transition-property: width, background-color;
211 opacity: 0.35;
212 }
213 #charitable-design-wrap .progress-bar-info-row {
214 display: table;
215 width: 100%;
216 font-size: 14px;
217 line-height: 21px;
218 opacity: 0.35;
219 }
220 #charitable-design-wrap .progress-bar-info-row .campaign-percent-raised {
221 width: 45%;
222 float: left;
223 font-weight: 700;
224 padding-left: 0px;
225 }
226 #charitable-design-wrap .progress-bar-info-row .campaign-goal {
227 width: 45%;
228 float: right;
229 text-align: right;
230 padding-right: 0px;
231 }
232 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options {
233 margin-top: 10px;
234 }
235 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts {
236 display: flex;
237 flex-wrap: wrap;
238 justify-content: space-between;
239 }
240 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount {
241 color: white;
242 flex: 0 0 25%;
243 background-color: transparent;
244 padding: 5px;
245 text-align: center;
246 display: table;
247 min-height: 75px;
248 }
249 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount input[type=radio] {
250 display: none;
251 }
252 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount .amount {
253 font-weight: 400;
254 }
255 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount > label {
256 display: table-cell;
257 width: 100%;
258 border: 1px solid #ddd;
259 padding: 0;
260 min-height: 75px;
261 vertical-align: middle;
262 margin: 0;
263 font-size: 14px;
264 cursor: pointer;
265 font-weight: 400;
266 }
267 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount.custom-donation-amount {
268 flex-basis: 100%;
269 min-height: auto;
270 }
271 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount.custom-donation-amount label {
272 display: none;
273 }
274 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount.custom-donation-amount input[type=text] {
275 background: transparent;
276 border: 1px solid white !important;
277 color: white;
278 width: 100%;
279 border: 0;
280 pointer-events: none;
281 }
282 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-field-row,
283 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-field-row {
284 width: 100%;
285 margin-bottom: 10px;
286 display: table;
287 }
288 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column,
289 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column {
290 display: inline-block;
291 }
292 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column .charitable-placeholder,
293 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column .charitable-placeholder {
294 background-repeat: no-repeat;
295 background-position: center;
296 background-size: contain;
297 min-height: auto;
298 opacity: 0.5;
299 }
300 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-twitter .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-twitter .charitable-placeholder,
301 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-twitter .charitable-placeholder,
302 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-twitter .charitable-placeholder {
303 background-image: url("../../images/campaign-builder/fields/social-sharing/twitter.svg");
304 }
305 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-facebook .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-facebook .charitable-placeholder,
306 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-facebook .charitable-placeholder,
307 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-facebook .charitable-placeholder {
308 background-image: url("../../images/campaign-builder/fields/social-sharing/facebook.svg");
309 }
310 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-instagram .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-instagram .charitable-placeholder,
311 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-instagram .charitable-placeholder,
312 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-instagram .charitable-placeholder {
313 background-image: url("../../images/campaign-builder/fields/social-sharing/instagram.svg");
314 }
315 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-linkedin .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-linkedin .charitable-placeholder,
316 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-linkedin .charitable-placeholder,
317 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-linkedin .charitable-placeholder {
318 background-image: url("../../images/campaign-builder/fields/social-sharing/linkedin.svg");
319 }
320 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-tiktok .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-tiktok .charitable-placeholder,
321 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-tiktok .charitable-placeholder,
322 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-tiktok .charitable-placeholder {
323 background-image: url("../../images/campaign-builder/fields/social-sharing/tiktok.svg");
324 }
325 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-pinterest .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-pinterest .charitable-placeholder,
326 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-pinterest .charitable-placeholder,
327 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-pinterest .charitable-placeholder {
328 background-image: url("../../images/campaign-builder/fields/social-sharing/pinterest.svg");
329 }
330 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-mastodon .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-mastodon .charitable-placeholder,
331 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-mastodon .charitable-placeholder,
332 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-mastodon .charitable-placeholder {
333 background-image: url("../../images/campaign-builder/fields/social-sharing/mastodon.svg");
334 }
335 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div,
336 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div {
337 text-align: center;
338 min-height: 30px;
339 margin-left: 10px;
340 margin-right: 10px;
341 vertical-align: middle;
342 }
343 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div span,
344 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div span {
345 height: 20px;
346 width: 66%;
347 display: block;
348 margin: 5px auto;
349 }
350 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div span:nth-child(2),
351 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div span:nth-child(2) {
352 width: 33%;
353 }
354 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div:first-of-type,
355 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div:first-of-type {
356 margin-left: 5px;
357 }
358 #charitable-design-wrap .charitable-field-preview-campaign-summary {
359 padding-left: 20px;
360 padding-right: 20px;
361 }
362 #charitable-design-wrap .charitable-field-preview-campaign-summary .campaign-summary-item {
363 float: left;
364 width: 50%;
365 border-bottom: 1px solid #e6e6e6;
366 opacity: 0.35;
367 }
368 #charitable-design-wrap .charitable-field-preview-campaign-summary .amount,
369 #charitable-design-wrap .charitable-field-preview-campaign-summary .donors-count {
370 display: block;
371 font-size: 1.5em;
372 font-weight: bolder;
373 color: #e27730;
374 line-height: 1.7em;
375 }
376 #charitable-design-wrap .charitable-field-preview-info-bar .row {
377 width: 100%;
378 }
379 #charitable-design-wrap .charitable-field-preview-info-bar .column {
380 align-items: center;
381 justify-content: center;
382 }
383 #charitable-design-wrap .charitable-field-preview-info-bar div {
384 text-align: center;
385 background-color: #f8f8f8;
386 min-height: 60px;
387 vertical-align: middle;
388 }
389 #charitable-design-wrap .charitable-field-preview-info-bar div span {
390 height: 10px;
391 width: 66%;
392 display: block;
393 margin: 5px auto;
394 }
395 #charitable-design-wrap .charitable-field-preview-info-bar div span:nth-child(2) {
396 width: 33%;
397 }
398 #charitable-design-wrap .charitable-field-preview-donate-button .row {
399 width: 100%;
400 }
401 #charitable-design-wrap .charitable-field-preview-donate-button .column {
402 align-items: center;
403 justify-content: center;
404 }
405 #charitable-design-wrap .charitable-field-preview-donate-button div {
406 text-align: center;
407 background-color: transparent;
408 vertical-align: middle;
409 }
410 #charitable-design-wrap .charitable-field-preview-donate-button div span.button {
411 background: #00a32a;
412 border-color: #00a32a;
413 border-width: 1px;
414 min-height: 40px;
415 width: 90%;
416 display: block;
417 margin: 5px auto;
418 opacity: 0.2;
419 }
420 #charitable-design-wrap .charitable-field-preview-donate-button div .charitable-placeholder {
421 color: #ffffff;
422 font-weight: 700;
423 font-size: 16px;
424 line-height: 35px;
425 }
426 #charitable-design-wrap .charitable-field-preview-html span.placeholder {
427 min-height: 30px;
428 width: 100%;
429 display: table;
430 margin: 0 0 5px 0;
431 font-size: 18px;
432 line-height: 19px;
433 font-weight: 400;
434 background-color: #f6f6f6;
435 }
436 #charitable-design-wrap .charitable-field-preview-html span.placeholder p {
437 padding: 5px 25px;
438 font-size: 16px;
439 line-height: 18px;
440 font-weight: 400;
441 }
442 #charitable-design-wrap .charitable-field-preview-html span.placeholder h6 {
443 margin: 0;
444 font-weight: 600;
445 padding: 15px 25px 5px 25px;
446 font-size: 16px;
447 line-height: 18px;
448 }
449 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.charitable-form-placeholder {
450 width: 100% !important;
451 }
452 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span,
453 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.placeholder {
454 width: 100%;
455 min-height: 100px;
456 background-color: #f6f6f6;
457 }
458 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span p,
459 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.placeholder p {
460 padding: 5px 25px;
461 font-size: 16px;
462 line-height: 18px;
463 font-weight: 400;
464 }
465 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span h6,
466 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.placeholder h6 {
467 margin: 0;
468 font-weight: 600;
469 padding: 15px 25px 5px 25px;
470 font-size: 16px;
471 line-height: 18px;
472 }
473 #charitable-design-wrap .charitable-field-preview-donation-options .shortcode-preview,
474 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview {
475 min-height: 30px;
476 background-color: #f6f6f6;
477 width: 100%;
478 display: block;
479 margin: 0 0 5px 0;
480 padding: 10px;
481 }
482 #charitable-design-wrap .charitable-field-preview-donation-options .shortcode-preview h5,
483 #charitable-design-wrap .charitable-field-preview-donation-options .shortcode-preview h5.charitable-field-preview-headline,
484 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview h5,
485 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview h5.charitable-field-preview-headline {
486 font-weight: 500;
487 font-size: 18px;
488 line-height: 18px;
489 padding: 10px;
490 margin: 0;
491 }
492 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview {
493 display: flex;
494 flex-wrap: wrap;
495 align-content: center;
496 margin: 0 0 0 0;
497 padding: 10px;
498 }
499 #charitable-design-wrap .charitable-field-donation-wall .charitable-field-donation-wall-placeholder {
500 display: table;
501 background-color: transparent;
502 width: 100%;
503 }
504 #charitable-design-wrap .charitable-field-donation-wall ol {
505 display: grid;
506 grid-column-gap: 50px;
507 grid-template-columns: repeat(3, auto);
508 justify-content: space-between;
509 padding: 10px 10px 10px 10px;
510 margin: 0;
511 }
512 #charitable-design-wrap .charitable-field-donation-wall ol li {
513 display: inline-block;
514 text-align: center;
515 padding: 0;
516 }
517 #charitable-design-wrap .charitable-field-donation-wall ol li p {
518 font-weight: 500;
519 font-size: 14px;
520 margin: 0;
521 padding: 0;
522 }
523 #charitable-design-wrap .charitable-field-donation-wall ol li img {
524 max-width: 100px;
525 }
526 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-vertical {
527 margin-left: auto;
528 margin-right: auto;
529 display: table;
530 }
531 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-vertical li {
532 display: block;
533 margin-bottom: 10px;
534 }
535 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-horizontal {
536 margin-left: auto;
537 margin-right: auto;
538 display: table;
539 }
540 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-horizontal li {
541 display: inline-block;
542 margin: 15px;
543 }
544 #charitable-design-wrap .charitable-unknown-field-headline {
545 color: red;
546 font-weight: 800;
547 }
548 #charitable-design-wrap .charitable-preview-field-unknown {
549 color: red;
550 }
551 #charitable-design-wrap .charitable-preview-field-unknown .placeholder {
552 border-color: red !important;
553 border-width: 5px;
554 color: red;
555 border-style: dashed;
556 background-color: transparent !important;
557 text-align: center;
558 font-weight: 600;
559 }
560 #charitable-design-wrap .charitable-preview-field-unknown .placeholder strong {
561 font-weight: 900;
562 }
563 #charitable-design-wrap .charitable-preview-field-container {
564 overflow: hidden;
565 }
566 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container {
567 margin-top: 20px;
568 margin-bottom: 20px;
569 display: table;
570 width: auto;
571 word-wrap: anywhere;
572 }
573 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-image-column {
574 display: table-cell;
575 vertical-align: middle;
576 width: 90px;
577 text-align: center;
578 }
579 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-image-column .charitable-organizer-image {
580 border-radius: 50%;
581 background-color: black;
582 width: 75px;
583 height: 75px;
584 background-size: cover;
585 }
586 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info {
587 display: table-cell;
588 vertical-align: middle;
589 }
590 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .placeholder {
591 margin: 0;
592 padding: 0;
593 background-color: transparent;
594 }
595 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .charitable-organizer-title,
596 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .charitable-organizer-title h5.charitable-field-preview-headline {
597 margin: 0;
598 padding: 0;
599 font-size: 15px;
600 line-height: 25px;
601 font-weight: 400;
602 }
603 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .charitable-organizer-name {
604 font-weight: 600;
605 font-size: 21px;
606 line-height: 31px;
607 }
608 #charitable-design-wrap .primary-image-container {
609 display: table;
610 width: 100%;
611 min-height: 250px;
612 margin: 0;
613 border-color: rgba(0, 0, 0, 0.15);
614 border-width: 1px;
615 border-style: solid;
616 /* images */
617 }
618 #charitable-design-wrap .primary-image-container img.charitable-campaign-builder-preview-photo {
619 max-width: 100%;
620 }
621 #charitable-design-wrap .primary-image-container .primary-image {
622 background-size: cover;
623 min-height: 200px;
624 width: 100%;
625 margin: 0;
626 background-position: center;
627 opacity: 1;
628 background-repeat: no-repeat;
629 -webkit-transition: background-color 1.2s ease-in-out;
630 transition: background-color 1.2s ease-in-out;
631 background-color: #F9F9F9;
632 display: table-cell;
633 vertical-align: middle;
634 text-align: center;
635 }
636 #charitable-design-wrap .primary-image-container i {
637 font-size: 42px;
638 line-height: 42px;
639 color: rgba(0, 0, 0, 0.15);
640 }
641 #charitable-design-wrap .primary-image-container.has-image {
642 min-height: auto;
643 border: 0;
644 }
645 #charitable-design-wrap .primary-image-container.has-image .primary-image {
646 background-color: transparent;
647 min-height: inherit;
648 }
649 #charitable-design-wrap .primary-image-container.has-image .primary-image img.temp-icon {
650 display: none;
651 }
652 #charitable-design-wrap .primary-video-container {
653 display: table;
654 width: 100%;
655 min-height: auto !important;
656 margin: 0;
657 border-color: rgba(0, 0, 0, 0.15);
658 border-width: 1px;
659 border-style: solid;
660 }
661 #charitable-design-wrap .primary-video-container .primary-video {
662 background-size: cover;
663 min-height: 200px;
664 width: 100%;
665 margin: 0;
666 background-position: center;
667 opacity: 1;
668 background-repeat: no-repeat;
669 -webkit-transition: background-color 1.2s ease-in-out;
670 transition: background-color 1.2s ease-in-out;
671 background-color: white;
672 display: table-cell;
673 vertical-align: middle;
674 text-align: center;
675 }
676 #charitable-design-wrap .primary-video-container .primary-video.charitable-video-has-thumbnail {
677 min-height: auto;
678 display: inline-block;
679 background-color: transparent;
680 width: auto;
681 display: block;
682 }
683 #charitable-design-wrap .primary-video-container .primary-video img {
684 max-width: 100%;
685 }
686 #charitable-design-wrap .primary-video-container i {
687 font-size: 42px;
688 line-height: 42px;
689 color: rgba(0, 0, 0, 0.15);
690 }
691 #charitable-design-wrap .primary-video-container.has-video {
692 min-height: auto;
693 border: 0;
694 }
695 #charitable-design-wrap .primary-video-container.has-video .primary-video {
696 background-color: transparent;
697 min-height: inherit;
698 }
699 #charitable-design-wrap .charitable-preview-align-left .primary-video {
700 margin-left: 0;
701 margin-right: auto;
702 }
703 #charitable-design-wrap .charitable-field .charitable-preview-field-container span.charitable-generic-placeholder {
704 width: 100%;
705 margin-left: auto;
706 margin-right: auto;
707 background-color: #f6f6f6;
708 height: auto;
709 max-height: auto;
710 min-height: 200px;
711 padding-top: 0;
712 padding-bottom: 0;
713 display: inline-block;
714 }
715 #charitable-design-wrap .charitable-field .charitable-preview-field-container span.charitable-generic-placeholder p {
716 padding: 5px 25px;
717 font-size: 16px;
718 line-height: 18px;
719 font-weight: 400;
720 }
721 #charitable-design-wrap .charitable-field .charitable-preview-field-container span.charitable-generic-placeholder h6 {
722 margin: 0;
723 font-weight: 600;
724 padding: 15px 25px 5px 25px;
725 font-size: 16px;
726 line-height: 18px;
727 }
728 #charitable-design-wrap header.charitable-preview-header .charitable-field-target {
729 min-height: 150px;
730 }
731 #charitable-design-wrap header .title-description,
732 #charitable-design-wrap div.charitable-preview-row .title-description {
733 margin: 0px 5px;
734 word-break: break-word;
735 }
736 #charitable-design-wrap header .title-description span,
737 #charitable-design-wrap div.charitable-preview-row .title-description span {
738 height: 10px;
739 width: 99%;
740 display: block;
741 margin: 0 0 5px 0;
742 }
743 #charitable-design-wrap header .title-description span:nth-child(2),
744 #charitable-design-wrap div.charitable-preview-row .title-description span:nth-child(2) {
745 width: 66%;
746 }
747 #charitable-design-wrap header .title-description span:nth-child(3),
748 #charitable-design-wrap div.charitable-preview-row .title-description span:nth-child(3) {
749 width: 33%;
750 }
751 #charitable-design-wrap header.no-padding .column,
752 #charitable-design-wrap div.charitable-preview-row.no-padding .column {
753 padding: 0;
754 background-color: transparent;
755 }
756 #charitable-design-wrap div.charitable-preview-row .charitable-field-column,
757 #charitable-design-wrap header.charitable-preview-header .charitable-field-column {
758 display: grid;
759 padding: 5px;
760 }
761 #charitable-design-wrap article {
762 border: 2px solid transparent;
763 position: relative;
764 }
765 #charitable-design-wrap article nav {
766 display: block;
767 width: 100%;
768 margin: 20px;
769 }
770 #charitable-design-wrap article nav li {
771 display: inline-block;
772 margin: 0 20px 0 0;
773 text-transform: uppercase;
774 font-weight: 500;
775 color: #2d2d2d;
776 padding-bottom: 0;
777 }
778 #charitable-design-wrap article nav li a {
779 text-decoration: none;
780 }
781 #charitable-design-wrap article nav li.active {
782 border-bottom: 1px solid #2d2d2d;
783 }
784 #charitable-design-wrap article nav li.active a {
785 /* border: 5px dotted red; */
786 }
787 #charitable-design-wrap article nav li.charitable-tab-hide {
788 display: none;
789 }
790 #charitable-design-wrap article nav.tab-style-boxed li {
791 border-radius: 0;
792 }
793 #charitable-design-wrap article nav.tab-style-rounded li {
794 border-radius: 35px;
795 }
796 #charitable-design-wrap article nav.tab-style-minimum li, #charitable-design-wrap article nav.tab-style-none li {
797 background-color: none;
798 }
799 #charitable-design-wrap article nav.tab-style-minimum li a, #charitable-design-wrap article nav.tab-style-none li a {
800 background-color: none;
801 color: black;
802 }
803 #charitable-design-wrap article nav.tab-size-small li {
804 font-size: 10px;
805 padding: 0;
806 }
807 #charitable-design-wrap article nav.tab-size-small li a {
808 font-size: 16px;
809 padding: 18px;
810 }
811 #charitable-design-wrap article nav.tab-size-medium li {
812 font-size: 14px;
813 padding: 0;
814 }
815 #charitable-design-wrap article nav.tab-size-medium li a {
816 font-size: 21px;
817 padding: 23px;
818 }
819 #charitable-design-wrap article nav.tab-size-large li {
820 font-size: 21px;
821 padding: 0;
822 }
823 #charitable-design-wrap article nav.tab-size-large li a {
824 font-size: 30px;
825 padding: 32px;
826 }
827 #charitable-design-wrap article .tab-content {
828 padding: 0;
829 }
830 #charitable-design-wrap article .tab-content ul {
831 margin: 20px;
832 }
833 #charitable-design-wrap article .tab-content ul li {
834 display: none;
835 }
836 #charitable-design-wrap article .tab-content ul li li {
837 display: block;
838 }
839 #charitable-design-wrap article .tab-content ul li.active {
840 display: block;
841 }
842 #charitable-design-wrap article .tab-content ul li .empty-tab-notice {
843 display: none;
844 }
845 #charitable-design-wrap article .tab-content ul li .no-tab-notice {
846 text-align: center;
847 }
848 #charitable-design-wrap article .tab-content ul li.empty-tab {
849 border-color: rgba(0, 0, 0, 0.15);
850 border-style: dashed;
851 }
852 #charitable-design-wrap article .tab-content ul li.empty-tab .empty-tab-notice {
853 display: block;
854 text-align: center;
855 margin: 0;
856 position: absolute;
857 top: 50%;
858 left: 50%;
859 transform: translate(-50%, -50%);
860 }
861 #charitable-design-wrap article .tab-content ul li a {
862 text-decoration: none;
863 }
864 #charitable-design-wrap article .tab-content ul li span {
865 /* background-color: $color_grey_background;
866 height: 10px; */
867 width: 99%;
868 display: block;
869 margin: 0 0 5px 0;
870 }
871 #charitable-design-wrap article .tab-content ul li span.medium {
872 height: 30px;
873 }
874 #charitable-design-wrap article .tab-content ul li span.big {
875 width: 100%;
876 height: 100px;
877 }
878 #charitable-design-wrap article .tab-content ul li span.avatar {
879 width: 50px;
880 height: 50px;
881 margin: 0 10px 10px 0;
882 }
883 #charitable-design-wrap article .tab-content ul li span.avatar.big {
884 width: 100px;
885 height: 100px;
886 }
887 #charitable-design-wrap article .tab-content ul li div.placeholder-row {
888 display: flex;
889 }
890 #charitable-design-wrap article .tab-content ul li div.placeholder-column {
891 flex: 1;
892 }
893 #charitable-design-wrap article .tab-content ul li div.placeholder-column.avatar {
894 flex: 0 0 50px;
895 }
896 #charitable-design-wrap article .tab-content ul li div.placeholder-column.avatar.big {
897 flex: 0 0 100px;
898 }
899 #charitable-design-wrap article .tab-content ul li div.placeholder-column.right span {
900 float: right;
901 }
902 #charitable-design-wrap article .tab-content ul li .charitable-tab-wrap {
903 min-height: 100px;
904 position: relative;
905 }
906 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(1) {
907 width: 99%;
908 }
909 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(2) {
910 width: 33%;
911 }
912 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(3),
913 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(4),
914 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(5) {
915 width: 90%;
916 }
917 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(2),
918 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(5) {
919 margin-bottom: 20px;
920 }
921 #charitable-design-wrap article .tab-content ul li.tab_type_html.big {
922 width: 99%;
923 height: 100px;
924 }
925 #charitable-design-wrap article .tab-content.empty-tabs {
926 border: 1px solid #a8a8a8;
927 padding: 25px;
928 }
929 #charitable-design-wrap article .tab-content.empty-tabs .no-tab-notice {
930 text-align: center;
931 margin: 0;
932 }
933 #charitable-design-wrap article .tab-content.empty-tabs ul {
934 margin: 0 0 0 0;
935 }
936 #charitable-design-wrap article .badge {
937 background-color: #f6f7f7;
938 border-radius: 25%;
939 color: #2c3338;
940 font-size: 11px;
941 margin-left: 5px;
942 padding: 6px 8px;
943 position: relative;
944 text-decoration: none;
945 text-transform: uppercase;
946 top: -1px;
947 white-space: nowrap;
948 }
949 #charitable-design-wrap article#charitable-preview-tab-container {
950 border: 1px solid transparent;
951 }
952 #charitable-design-wrap article#charitable-preview-tab-container.disabled {
953 opacity: 0.3;
954 }
955 #charitable-design-wrap h5.charitable-field-preview-headline {
956 margin: 0 0 10px 0;
957 padding: 0;
958 font-size: 16px;
959 line-height: 16px;
960 font-weight: 700;
961 word-break: break-word;
962 }
963 #charitable-design-wrap .charitable-preview-align-center {
964 margin-left: auto;
965 margin-right: auto;
966 }
967 #charitable-design-wrap .charitable-preview-align-left {
968 margin-left: 0;
969 margin-right: auto;
970 }
971 #charitable-design-wrap .charitable-preview-align-right {
972 margin-left: auto;
973 margin-right: 0;
974 }
975 #charitable-design-wrap .charitable-preview-field-container {
976 position: relative;
977 }
978 #charitable-design-wrap .charitable-preview-field-indicator {
979 background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='blue' stroke-width='1' stroke-dasharray='2' /><path d='M0 0 L100 100 ' stroke='blue' stroke-width='1' stroke-dasharray='2' /></svg>");
980 background-repeat: no-repeat;
981 background-position: center center;
982 background-size: 100% 100%, auto;
983 z-index: 99;
984 position: absolute;
985 top: 0;
986 bottom: 0;
987 left: 0;
988 right: 0;
989 }
990 #charitable-design-wrap .charitable-preview-recurring-donation-options {
991 display: flex;
992 flex-direction: row;
993 justify-content: start;
994 align-items: center;
995 gap: 10px;
996 width: 100%;
997 border-bottom: 1px solid #ccc;
998 margin: 0;
999 }
1000 #charitable-design-wrap .charitable-preview-recurring-donation-option {
1001 display: flex;
1002 align-items: center;
1003 border-bottom: 0;
1004 gap: 10px;
1005 margin: 0 0 0 0;
1006 }
1007 #charitable-design-wrap .charitable-preview-recurring-donation-option.selected {
1008 background-color: #f5f5f5;
1009 }
1010 #charitable-design-wrap .charitable-preview-recurring-donation-option span {
1011 font-size: 14px;
1012 font-weight: 400;
1013 color: #333;
1014 padding: 10px;
1015 border-radius: 0;
1016 margin: 0;
1017 border-bottom: 0 !important;
1018 }
1019 #charitable-design-wrap .charitable-preview-recurring-donation-simple-hidden {
1020 display: none;
1021 }
1022 #charitable-design-wrap .charitable-preview-recurring-donation-advanced-hidden {
1023 display: none;
1024 }
1025
1026 #charitable-design-wrap .row {
1027 container-type: inline-size;
1028 container-name: previewArea;
1029 }
1030
1031 /* If the container is larger than 700px */
1032 @container previewArea (max-width: 700px) {
1033 #charitable-design-wrap .charitable-field-column {
1034 flex: auto;
1035 }
1036 }
1037 #charitable-design-wrap .charitable-field-organizer {
1038 container-type: inline-size;
1039 container-name: organizerArea;
1040 }
1041
1042 @container organizerArea (max-width: 350px) {
1043 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container {
1044 display: block !important;
1045 }
1046 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-image-column {
1047 display: block;
1048 }
1049 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info {
1050 display: block;
1051 }
1052 }
1053 /* mobile or narrow widths */
1054 .charitable-campaign-wrap .charitable-campaign-container {
1055 container-type: inline-size;
1056 container-name: campaign-area;
1057 }
1058 @container campaign-area (max-width: 700px) {
1059 .charitable-campaign-wrap .charitable-campaign-column,
1060 .charitable-campaign-wrap .charitable-campaign-column:nth-child(even),
1061 .charitable-campaign-wrap .charitable-campaign-column:nth-child(odd) {
1062 flex: 0 0 100% !important;
1063 padding-top: 0;
1064 padding-bottom: 0;
1065 padding-left: 0;
1066 padding-right: 0;
1067 }
1068 }
1069
1070 .charitable-preview-wrap.charitable-preview-hide-field-names h6.charitable-preview-field-title {
1071 display: none;
1072 transition: all 0.6s ease-out;
1073 }
1074
1075 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field {
1076 border-color: transparent;
1077 background-color: transparent;
1078 }
1079 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field.active {
1080 /* border-color: transparent; */
1081 border-color: rgba(53, 132, 232, 0.4);
1082 background-color: transparent;
1083 }
1084 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .charitable-preview-field-container .placeholders {
1085 margin-bottom: 0;
1086 margin-top: 0;
1087 transition: all 0.6s ease-out;
1088 }
1089 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .charitable-campaign-preview .placeholder,
1090 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .primary-image-container.placeholder {
1091 background-color: transparent;
1092 margin-top: 0;
1093 margin-bottom: 0;
1094 transition: all 0.6s ease-out;
1095 }
1096 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .charitable-preview-field-container .placeholder {
1097 margin-bottom: 0;
1098 margin-top: 0;
1099 transition: all 0.6s ease-out;
1100 border-color: transparent;
1101 background-color: transparent;
1102 }
1103 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field * div,
1104 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field * ol,
1105 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field * span {
1106 opacity: 1 !important;
1107 transition: all 0.6s ease-out;
1108 }
1109 .charitable-preview-wrap.charitable-preview-live .charitable-field {
1110 border-color: transparent;
1111 background-color: transparent;
1112 }
1113 .charitable-preview-wrap.charitable-preview-live .charitable-field.active {
1114 border-color: transparent;
1115 background-color: transparent;
1116 }
1117 .charitable-preview-wrap.charitable-preview-live .charitable-field h4,
1118 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-field-edit,
1119 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-field-duplicate,
1120 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-field-delete {
1121 display: none;
1122 transition: all 0.6s ease-out;
1123 }
1124 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-preview-field-container .placeholders {
1125 margin-bottom: 0;
1126 margin-top: 0;
1127 transition: all 0.6s ease-out;
1128 }
1129 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-campaign-preview .placeholder,
1130 .charitable-preview-wrap.charitable-preview-live .charitable-field .primary-image-container.placeholder {
1131 background-color: transparent;
1132 margin-top: 0;
1133 margin-bottom: 0;
1134 transition: all 0.6s ease-out;
1135 }
1136 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-preview-field-container .placeholder {
1137 margin-bottom: 0;
1138 margin-top: 0;
1139 transition: all 0.6s ease-out;
1140 border-color: transparent;
1141 background-color: transparent;
1142 }
1143 .charitable-preview-wrap.charitable-preview-live .charitable-field * div,
1144 .charitable-preview-wrap.charitable-preview-live .charitable-field * ol,
1145 .charitable-preview-wrap.charitable-preview-live .charitable-field * span {
1146 opacity: 1 !important;
1147 transition: all 0.6s ease-out;
1148 }
1149 .charitable-preview-wrap.charitable-preview-live .charitable-panel-fields .charitable-field.active {
1150 background-color: transparent;
1151 }
1152
1153 .charitable-panel-fields .charitable-field-dragging.charitable-field-photo img {
1154 max-height: 300px;
1155 }
1156