PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.13
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.13
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.13, at assets/css/campaign-builder/builder-preview.css

1,324 lines 44.7 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 /* Match the front-end body size (base.css asserts 14px on the text field and the
139 campaign description). Without this the canvas inherits the wp-admin base size
140 and previews body copy larger than the published page renders it. A per-field
141 body_font_size still wins here, as it does on the front end. */
142 #charitable-design-wrap .charitable-campaign-builder-placeholder-preview-text {
143 opacity: 0.35;
144 overflow: hidden;
145 font-size: 14px;
146 }
147 #charitable-design-wrap .charitable-prevent-select {
148 -webkit-user-select: none; /* Safari */
149 -ms-user-select: none; /* IE 10 and IE 11 */
150 user-select: none; /* Standard syntax */
151 pointer-events: none;
152 }
153 #charitable-design-wrap .charitable-hover-button {
154 background-color: #036aab;
155 display: none;
156 color: #ffffff;
157 position: absolute;
158 top: 0;
159 right: 0;
160 width: auto;
161 }
162 #charitable-design-wrap .charitable-hover-button i {
163 font-size: 14px;
164 padding: 5px;
165 }
166 #charitable-design-wrap .charitable-campaign-builder-no-description-preview {
167 padding: 25px;
168 display: inline-block;
169 }
170 #charitable-design-wrap .charitable-campaign-builder-no-description-preview i {
171 font-size: 60px;
172 line-height: 60px;
173 display: block;
174 float: left;
175 color: #e27730;
176 }
177 #charitable-design-wrap .charitable-campaign-builder-no-description-preview p {
178 margin: 0;
179 padding: 0;
180 }
181 #charitable-design-wrap .charitable-campaign-builder-no-description-preview div {
182 float: left;
183 margin-left: 25px;
184 color: #2d2d2d;
185 }
186 #charitable-design-wrap .charitable-campaign-builder-no-description-preview div h2 {
187 margin-top: 0;
188 margin-bottom: 0;
189 font-size: 32px;
190 line-height: 42px;
191 font-weight: 800;
192 color: #e27730;
193 }
194 #charitable-design-wrap .progress {
195 padding: 5px;
196 margin: 5px;
197 border-radius: 4px;
198 border-color: #b6b6b6;
199 background-color: #ffffff;
200 border-width: 1px;
201 border-style: solid;
202 }
203 #charitable-design-wrap .progress .progress-bar {
204 height: 16px;
205 width: 50%;
206 border-radius: 4px;
207 background-color: #2d2d2d;
208 -webkit-transition: 0.4s linear;
209 -moz-transition: 0.4s linear;
210 -o-transition: 0.4s linear;
211 transition: 0.4s linear;
212 -webkit-transition-property: width, background-color;
213 -moz-transition-property: width, background-color;
214 -o-transition-property: width, background-color;
215 transition-property: width, background-color;
216 opacity: 0.35;
217 }
218 #charitable-design-wrap .progress-bar-info-row {
219 display: table;
220 width: 100%;
221 font-size: 14px;
222 line-height: 21px;
223 opacity: 0.35;
224 }
225 #charitable-design-wrap .progress-bar-info-row .campaign-percent-raised {
226 width: 45%;
227 float: left;
228 font-weight: 700;
229 padding-left: 0px;
230 }
231 #charitable-design-wrap .progress-bar-info-row .campaign-goal {
232 width: 45%;
233 float: right;
234 text-align: right;
235 padding-right: 0px;
236 }
237 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options {
238 margin-top: 10px;
239 }
240 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts {
241 display: flex;
242 flex-wrap: wrap;
243 justify-content: space-between;
244 }
245 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount {
246 color: white;
247 flex: 0 0 25%;
248 background-color: transparent;
249 padding: 5px;
250 text-align: center;
251 display: table;
252 min-height: 75px;
253 }
254 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount input[type=radio] {
255 display: none;
256 }
257 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount .amount {
258 font-weight: 400;
259 }
260 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount .description {
261 display: block;
262 margin-top: 4px;
263 font-size: 0.85em;
264 line-height: 1.3;
265 color: var(--charitable_campaign_theme_tertiary);
266 }
267 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount > label {
268 display: table-cell;
269 width: 100%;
270 border: 1px solid #ddd;
271 padding: 0;
272 min-height: 75px;
273 vertical-align: middle;
274 margin: 0;
275 font-size: 14px;
276 cursor: pointer;
277 font-weight: 400;
278 }
279 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount.custom-donation-amount {
280 flex-basis: 100%;
281 min-height: auto;
282 }
283 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount.custom-donation-amount label {
284 display: none;
285 }
286 #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] {
287 background: transparent;
288 border: 1px solid white !important;
289 color: white;
290 width: 100%;
291 border: 0;
292 pointer-events: none;
293 }
294 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-field-row,
295 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-field-row {
296 width: 100%;
297 margin-bottom: 10px;
298 display: table;
299 }
300 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column,
301 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column {
302 display: inline-block;
303 }
304 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column .charitable-placeholder,
305 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column .charitable-placeholder {
306 background-repeat: no-repeat;
307 background-position: center;
308 background-size: contain;
309 min-height: auto;
310 opacity: 0.5;
311 }
312 #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,
313 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-twitter .charitable-placeholder,
314 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-twitter .charitable-placeholder {
315 background-image: url("../../images/campaign-builder/fields/social-sharing/twitter.svg");
316 }
317 #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,
318 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-facebook .charitable-placeholder,
319 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-facebook .charitable-placeholder {
320 background-image: url("../../images/campaign-builder/fields/social-sharing/facebook.svg");
321 }
322 #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,
323 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-instagram .charitable-placeholder,
324 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-instagram .charitable-placeholder {
325 background-image: url("../../images/campaign-builder/fields/social-sharing/instagram.svg");
326 }
327 #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,
328 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-linkedin .charitable-placeholder,
329 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-linkedin .charitable-placeholder {
330 background-image: url("../../images/campaign-builder/fields/social-sharing/linkedin.svg");
331 }
332 #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,
333 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-tiktok .charitable-placeholder,
334 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-tiktok .charitable-placeholder {
335 background-image: url("../../images/campaign-builder/fields/social-sharing/tiktok.svg");
336 }
337 #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,
338 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-pinterest .charitable-placeholder,
339 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-pinterest .charitable-placeholder {
340 background-image: url("../../images/campaign-builder/fields/social-sharing/pinterest.svg");
341 }
342 #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,
343 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-mastodon .charitable-placeholder,
344 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-mastodon .charitable-placeholder {
345 background-image: url("../../images/campaign-builder/fields/social-sharing/mastodon.svg");
346 }
347 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div,
348 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div {
349 text-align: center;
350 min-height: 30px;
351 margin-left: 10px;
352 margin-right: 10px;
353 vertical-align: middle;
354 }
355 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div span,
356 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div span {
357 height: 20px;
358 width: 66%;
359 display: block;
360 margin: 5px auto;
361 }
362 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div span:nth-child(2),
363 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div span:nth-child(2) {
364 width: 33%;
365 }
366 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div:first-of-type,
367 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div:first-of-type {
368 margin-left: 5px;
369 }
370 #charitable-design-wrap .charitable-field-preview-campaign-summary {
371 padding-left: 20px;
372 padding-right: 20px;
373 }
374 #charitable-design-wrap .charitable-field-preview-campaign-summary .campaign-summary-item {
375 float: left;
376 width: 50%;
377 border-bottom: 1px solid #e6e6e6;
378 opacity: 0.35;
379 }
380 #charitable-design-wrap .charitable-field-preview-campaign-summary .amount,
381 #charitable-design-wrap .charitable-field-preview-campaign-summary .donors-count {
382 display: block;
383 font-size: 1.5em;
384 font-weight: bolder;
385 color: #e27730;
386 line-height: 1.7em;
387 }
388 #charitable-design-wrap .charitable-field-preview-info-bar .row {
389 width: 100%;
390 }
391 #charitable-design-wrap .charitable-field-preview-info-bar .column {
392 align-items: center;
393 justify-content: center;
394 }
395 #charitable-design-wrap .charitable-field-preview-info-bar div {
396 text-align: center;
397 background-color: #f8f8f8;
398 min-height: 60px;
399 vertical-align: middle;
400 }
401 #charitable-design-wrap .charitable-field-preview-info-bar div span {
402 height: 10px;
403 width: 66%;
404 display: block;
405 margin: 5px auto;
406 }
407 #charitable-design-wrap .charitable-field-preview-info-bar div span:nth-child(2) {
408 width: 33%;
409 }
410 #charitable-design-wrap .charitable-field-preview-donate-button .row {
411 width: 100%;
412 }
413 #charitable-design-wrap .charitable-field-preview-donate-button .column {
414 align-items: center;
415 justify-content: center;
416 }
417 #charitable-design-wrap .charitable-field-preview-donate-button div {
418 text-align: center;
419 background-color: transparent;
420 vertical-align: middle;
421 }
422 #charitable-design-wrap .charitable-field-preview-donate-button div span.button {
423 background: #00a32a;
424 border-color: #00a32a;
425 border-width: 1px;
426 min-height: 40px;
427 width: 90%;
428 display: block;
429 margin: 5px auto;
430 opacity: 0.2;
431 }
432 #charitable-design-wrap .charitable-field-preview-donate-button div .charitable-placeholder {
433 color: #ffffff;
434 font-weight: 700;
435 font-size: 16px;
436 line-height: 35px;
437 }
438 #charitable-design-wrap .charitable-field-preview-html span.placeholder {
439 min-height: 30px;
440 width: 100%;
441 display: table;
442 margin: 0 0 5px 0;
443 font-size: 18px;
444 line-height: 19px;
445 font-weight: 400;
446 background-color: #f6f6f6;
447 }
448 #charitable-design-wrap .charitable-field-preview-html span.placeholder p {
449 padding: 5px 25px;
450 font-size: 16px;
451 line-height: 18px;
452 font-weight: 400;
453 }
454 #charitable-design-wrap .charitable-field-preview-html span.placeholder h6 {
455 margin: 0;
456 font-weight: 600;
457 padding: 15px 25px 5px 25px;
458 font-size: 16px;
459 line-height: 18px;
460 }
461 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.charitable-form-placeholder {
462 width: 100% !important;
463 }
464 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span,
465 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.placeholder {
466 width: 100%;
467 min-height: 100px;
468 background-color: #f6f6f6;
469 }
470 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span p,
471 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.placeholder p {
472 padding: 5px 25px;
473 font-size: 16px;
474 line-height: 18px;
475 font-weight: 400;
476 }
477 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span h6,
478 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.placeholder h6 {
479 margin: 0;
480 font-weight: 600;
481 padding: 15px 25px 5px 25px;
482 font-size: 16px;
483 line-height: 18px;
484 }
485 #charitable-design-wrap .charitable-field-preview-donation-options .shortcode-preview,
486 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview {
487 min-height: 30px;
488 background-color: #f6f6f6;
489 width: 100%;
490 display: block;
491 margin: 0 0 5px 0;
492 padding: 10px;
493 }
494 #charitable-design-wrap .charitable-field-preview-donation-options .shortcode-preview h5,
495 #charitable-design-wrap .charitable-field-preview-donation-options .shortcode-preview h5.charitable-field-preview-headline,
496 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview h5,
497 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview h5.charitable-field-preview-headline {
498 font-weight: 500;
499 font-size: 18px;
500 line-height: 18px;
501 padding: 10px;
502 margin: 0;
503 }
504 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview {
505 display: flex;
506 flex-wrap: wrap;
507 align-content: center;
508 margin: 0 0 0 0;
509 padding: 10px;
510 }
511 #charitable-design-wrap .charitable-field-donation-wall .charitable-field-donation-wall-placeholder {
512 display: table;
513 background-color: transparent;
514 width: 100%;
515 }
516 #charitable-design-wrap .charitable-field-donation-wall ol {
517 display: grid;
518 grid-column-gap: 50px;
519 grid-template-columns: repeat(3, auto);
520 justify-content: space-between;
521 padding: 10px 10px 10px 10px;
522 margin: 0;
523 }
524 #charitable-design-wrap .charitable-field-donation-wall ol li {
525 display: inline-block;
526 text-align: center;
527 padding: 0;
528 }
529 #charitable-design-wrap .charitable-field-donation-wall ol li p {
530 font-weight: 500;
531 font-size: 14px;
532 margin: 0;
533 padding: 0;
534 }
535 #charitable-design-wrap .charitable-field-donation-wall ol li img {
536 max-width: 100px;
537 }
538 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-vertical {
539 margin-left: auto;
540 margin-right: auto;
541 display: table;
542 }
543 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-vertical li {
544 display: block;
545 margin-bottom: 10px;
546 }
547 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-horizontal {
548 margin-left: auto;
549 margin-right: auto;
550 display: table;
551 }
552 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-horizontal li {
553 display: inline-block;
554 margin: 15px;
555 }
556 #charitable-design-wrap .charitable-unknown-field-headline {
557 color: red;
558 font-weight: 800;
559 }
560 #charitable-design-wrap .charitable-preview-field-unknown {
561 color: red;
562 }
563 #charitable-design-wrap .charitable-preview-field-unknown .placeholder {
564 border-color: red !important;
565 border-width: 5px;
566 color: red;
567 border-style: dashed;
568 background-color: transparent !important;
569 text-align: center;
570 font-weight: 600;
571 }
572 #charitable-design-wrap .charitable-preview-field-unknown .placeholder strong {
573 font-weight: 900;
574 }
575 #charitable-design-wrap .charitable-preview-field-container {
576 overflow: hidden;
577 }
578 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container {
579 margin-top: 20px;
580 margin-bottom: 20px;
581 display: table;
582 width: auto;
583 word-wrap: anywhere;
584 }
585 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-image-column {
586 display: table-cell;
587 vertical-align: middle;
588 width: 90px;
589 text-align: center;
590 }
591 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-image-column .charitable-organizer-image {
592 border-radius: 50%;
593 background-color: black;
594 width: 75px;
595 height: 75px;
596 background-size: cover;
597 }
598 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info {
599 display: table-cell;
600 vertical-align: middle;
601 }
602 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .placeholder {
603 margin: 0;
604 padding: 0;
605 background-color: transparent;
606 }
607 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .charitable-organizer-title,
608 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .charitable-organizer-title h5.charitable-field-preview-headline {
609 margin: 0;
610 padding: 0;
611 font-size: 15px;
612 line-height: 25px;
613 font-weight: 400;
614 }
615 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .charitable-organizer-name {
616 font-weight: 600;
617 font-size: 21px;
618 line-height: 31px;
619 }
620 #charitable-design-wrap .primary-image-container {
621 display: table;
622 width: 100%;
623 min-height: 250px;
624 margin: 0;
625 border-color: rgba(0, 0, 0, 0.15);
626 border-width: 1px;
627 border-style: solid;
628 /* images */
629 }
630 #charitable-design-wrap .primary-image-container img.charitable-campaign-builder-preview-photo {
631 max-width: 100%;
632 }
633 #charitable-design-wrap .primary-image-container .primary-image {
634 background-size: cover;
635 min-height: 200px;
636 width: 100%;
637 margin: 0;
638 background-position: center;
639 opacity: 1;
640 background-repeat: no-repeat;
641 -webkit-transition: background-color 1.2s ease-in-out;
642 transition: background-color 1.2s ease-in-out;
643 background-color: #F9F9F9;
644 display: table-cell;
645 vertical-align: middle;
646 text-align: center;
647 }
648 #charitable-design-wrap .primary-image-container i {
649 font-size: 42px;
650 line-height: 42px;
651 color: rgba(0, 0, 0, 0.15);
652 }
653 #charitable-design-wrap .primary-image-container.has-image {
654 min-height: auto;
655 border: 0;
656 }
657 #charitable-design-wrap .primary-image-container.has-image .primary-image {
658 background-color: transparent;
659 min-height: inherit;
660 }
661 #charitable-design-wrap .primary-image-container.has-image .primary-image img.temp-icon {
662 display: none;
663 }
664 #charitable-design-wrap .primary-video-container {
665 display: table;
666 width: 100%;
667 min-height: auto !important;
668 margin: 0;
669 border-color: rgba(0, 0, 0, 0.15);
670 border-width: 1px;
671 border-style: solid;
672 }
673 #charitable-design-wrap .primary-video-container .primary-video {
674 background-size: cover;
675 min-height: 200px;
676 width: 100%;
677 margin: 0;
678 background-position: center;
679 opacity: 1;
680 background-repeat: no-repeat;
681 -webkit-transition: background-color 1.2s ease-in-out;
682 transition: background-color 1.2s ease-in-out;
683 background-color: white;
684 display: table-cell;
685 vertical-align: middle;
686 text-align: center;
687 }
688 #charitable-design-wrap .primary-video-container .primary-video.charitable-video-has-thumbnail {
689 min-height: auto;
690 display: inline-block;
691 background-color: transparent;
692 width: auto;
693 display: block;
694 }
695 #charitable-design-wrap .primary-video-container .primary-video img {
696 max-width: 100%;
697 }
698 #charitable-design-wrap .primary-video-container i {
699 font-size: 42px;
700 line-height: 42px;
701 color: rgba(0, 0, 0, 0.15);
702 }
703 #charitable-design-wrap .primary-video-container.has-video {
704 min-height: auto;
705 border: 0;
706 }
707 #charitable-design-wrap .primary-video-container.has-video .primary-video {
708 background-color: transparent;
709 min-height: inherit;
710 }
711 #charitable-design-wrap .charitable-preview-align-left .primary-video {
712 margin-left: 0;
713 margin-right: auto;
714 }
715 #charitable-design-wrap .charitable-field .charitable-preview-field-container span.charitable-generic-placeholder {
716 width: 100%;
717 margin-left: auto;
718 margin-right: auto;
719 background-color: #f6f6f6;
720 height: auto;
721 max-height: auto;
722 min-height: 200px;
723 padding-top: 0;
724 padding-bottom: 0;
725 display: inline-block;
726 }
727 #charitable-design-wrap .charitable-field .charitable-preview-field-container span.charitable-generic-placeholder p {
728 padding: 5px 25px;
729 font-size: 16px;
730 line-height: 18px;
731 font-weight: 400;
732 }
733 #charitable-design-wrap .charitable-field .charitable-preview-field-container span.charitable-generic-placeholder h6 {
734 margin: 0;
735 font-weight: 600;
736 padding: 15px 25px 5px 25px;
737 font-size: 16px;
738 line-height: 18px;
739 }
740 #charitable-design-wrap header.charitable-preview-header .charitable-field-target {
741 min-height: 150px;
742 }
743 #charitable-design-wrap header .title-description,
744 #charitable-design-wrap div.charitable-preview-row .title-description {
745 margin: 0px 5px;
746 word-break: break-word;
747 }
748 #charitable-design-wrap header .title-description span,
749 #charitable-design-wrap div.charitable-preview-row .title-description span {
750 height: 10px;
751 width: 99%;
752 display: block;
753 margin: 0 0 5px 0;
754 }
755 #charitable-design-wrap header .title-description span:nth-child(2),
756 #charitable-design-wrap div.charitable-preview-row .title-description span:nth-child(2) {
757 width: 66%;
758 }
759 #charitable-design-wrap header .title-description span:nth-child(3),
760 #charitable-design-wrap div.charitable-preview-row .title-description span:nth-child(3) {
761 width: 33%;
762 }
763 #charitable-design-wrap header.no-padding .column,
764 #charitable-design-wrap div.charitable-preview-row.no-padding .column {
765 padding: 0;
766 background-color: transparent;
767 }
768 #charitable-design-wrap div.charitable-preview-row .charitable-field-column,
769 #charitable-design-wrap header.charitable-preview-header .charitable-field-column {
770 display: grid;
771 padding: 5px;
772 }
773 #charitable-design-wrap article {
774 border: 2px solid transparent;
775 position: relative;
776 }
777 #charitable-design-wrap article nav {
778 display: block;
779 width: 100%;
780 margin: 20px;
781 }
782 #charitable-design-wrap article nav li {
783 display: inline-block;
784 margin: 0 20px 0 0;
785 text-transform: uppercase;
786 font-weight: 500;
787 color: #2d2d2d;
788 padding-bottom: 0;
789 }
790 #charitable-design-wrap article nav li a {
791 text-decoration: none;
792 }
793 #charitable-design-wrap article nav li.active {
794 border-bottom: 1px solid #2d2d2d;
795 }
796 #charitable-design-wrap article nav li.active a {
797 /* border: 5px dotted red; */
798 }
799 #charitable-design-wrap article nav li.charitable-tab-hide {
800 display: none;
801 }
802 #charitable-design-wrap article nav.tab-style-boxed li {
803 border-radius: 0;
804 }
805 #charitable-design-wrap article nav.tab-style-rounded li {
806 border-radius: 35px;
807 }
808 #charitable-design-wrap article nav.tab-style-minimum li, #charitable-design-wrap article nav.tab-style-none li {
809 background-color: none;
810 }
811 #charitable-design-wrap article nav.tab-style-minimum li a, #charitable-design-wrap article nav.tab-style-none li a {
812 background-color: none;
813 color: black;
814 }
815 #charitable-design-wrap article nav.tab-size-small li {
816 font-size: 10px;
817 padding: 0;
818 }
819 #charitable-design-wrap article nav.tab-size-small li a {
820 font-size: 16px;
821 padding: 18px;
822 }
823 #charitable-design-wrap article nav.tab-size-medium li {
824 font-size: 14px;
825 padding: 0;
826 }
827 #charitable-design-wrap article nav.tab-size-medium li a {
828 font-size: 21px;
829 padding: 23px;
830 }
831 #charitable-design-wrap article nav.tab-size-large li {
832 font-size: 21px;
833 padding: 0;
834 }
835 #charitable-design-wrap article nav.tab-size-large li a {
836 font-size: 30px;
837 padding: 32px;
838 }
839 #charitable-design-wrap article .tab-content {
840 padding: 0;
841 }
842 #charitable-design-wrap article .tab-content ul {
843 margin: 20px;
844 }
845 #charitable-design-wrap article .tab-content ul li {
846 display: none;
847 }
848 #charitable-design-wrap article .tab-content ul li li {
849 display: block;
850 }
851 #charitable-design-wrap article .tab-content ul li.active {
852 display: block;
853 }
854 #charitable-design-wrap article .tab-content ul li .empty-tab-notice {
855 display: none;
856 }
857 #charitable-design-wrap article .tab-content ul li .no-tab-notice {
858 text-align: center;
859 }
860 #charitable-design-wrap article .tab-content ul li.empty-tab {
861 border-color: rgba(0, 0, 0, 0.15);
862 border-style: dashed;
863 }
864 #charitable-design-wrap article .tab-content ul li.empty-tab .empty-tab-notice {
865 display: block;
866 text-align: center;
867 margin: 0;
868 position: absolute;
869 top: 50%;
870 left: 50%;
871 transform: translate(-50%, -50%);
872 }
873 #charitable-design-wrap article .tab-content ul li a {
874 text-decoration: none;
875 }
876 #charitable-design-wrap article .tab-content ul li span {
877 /* background-color: $color_grey_background;
878 height: 10px; */
879 width: 99%;
880 display: block;
881 margin: 0 0 5px 0;
882 }
883 #charitable-design-wrap article .tab-content ul li span.medium {
884 height: 30px;
885 }
886 #charitable-design-wrap article .tab-content ul li span.big {
887 width: 100%;
888 height: 100px;
889 }
890 #charitable-design-wrap article .tab-content ul li span.avatar {
891 width: 50px;
892 height: 50px;
893 margin: 0 10px 10px 0;
894 }
895 #charitable-design-wrap article .tab-content ul li span.avatar.big {
896 width: 100px;
897 height: 100px;
898 }
899 #charitable-design-wrap article .tab-content ul li div.placeholder-row {
900 display: flex;
901 }
902 #charitable-design-wrap article .tab-content ul li div.placeholder-column {
903 flex: 1;
904 }
905 #charitable-design-wrap article .tab-content ul li div.placeholder-column.avatar {
906 flex: 0 0 50px;
907 }
908 #charitable-design-wrap article .tab-content ul li div.placeholder-column.avatar.big {
909 flex: 0 0 100px;
910 }
911 #charitable-design-wrap article .tab-content ul li div.placeholder-column.right span {
912 float: right;
913 }
914 #charitable-design-wrap article .tab-content ul li .charitable-tab-wrap {
915 min-height: 100px;
916 position: relative;
917 }
918 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(1) {
919 width: 99%;
920 }
921 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(2) {
922 width: 33%;
923 }
924 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(3),
925 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(4),
926 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(5) {
927 width: 90%;
928 }
929 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(2),
930 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(5) {
931 margin-bottom: 20px;
932 }
933 #charitable-design-wrap article .tab-content ul li.tab_type_html.big {
934 width: 99%;
935 height: 100px;
936 }
937 #charitable-design-wrap article .tab-content.empty-tabs {
938 border: 1px solid #a8a8a8;
939 padding: 25px;
940 }
941 #charitable-design-wrap article .tab-content.empty-tabs .no-tab-notice {
942 text-align: center;
943 margin: 0;
944 }
945 #charitable-design-wrap article .tab-content.empty-tabs ul {
946 margin: 0 0 0 0;
947 }
948 #charitable-design-wrap article .badge {
949 background-color: #f6f7f7;
950 border-radius: 25%;
951 color: #2c3338;
952 font-size: 11px;
953 margin-left: 5px;
954 padding: 6px 8px;
955 position: relative;
956 text-decoration: none;
957 text-transform: uppercase;
958 top: -1px;
959 white-space: nowrap;
960 }
961 #charitable-design-wrap article#charitable-preview-tab-container {
962 border: 1px solid transparent;
963 }
964 #charitable-design-wrap article#charitable-preview-tab-container.disabled {
965 opacity: 0.3;
966 }
967 #charitable-design-wrap h5.charitable-field-preview-headline {
968 margin: 0 0 10px 0;
969 padding: 0;
970 font-size: 16px;
971 line-height: 16px;
972 font-weight: 700;
973 word-break: break-word;
974 }
975 #charitable-design-wrap .charitable-preview-align-center {
976 margin-left: auto;
977 margin-right: auto;
978 }
979 #charitable-design-wrap .charitable-preview-align-left {
980 margin-left: 0;
981 margin-right: auto;
982 }
983 #charitable-design-wrap .charitable-preview-align-right {
984 margin-left: auto;
985 margin-right: 0;
986 }
987 #charitable-design-wrap .charitable-preview-field-container {
988 position: relative;
989 }
990 #charitable-design-wrap .charitable-preview-field-indicator {
991 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>");
992 background-repeat: no-repeat;
993 background-position: center center;
994 background-size: 100% 100%, auto;
995 z-index: 99;
996 position: absolute;
997 top: 0;
998 bottom: 0;
999 left: 0;
1000 right: 0;
1001 }
1002 #charitable-design-wrap .charitable-preview-recurring-donation-options {
1003 display: flex;
1004 flex-direction: row;
1005 justify-content: start;
1006 align-items: center;
1007 gap: 10px;
1008 width: 100%;
1009 border-bottom: 1px solid #ccc;
1010 margin: 0;
1011 }
1012 #charitable-design-wrap .charitable-preview-recurring-donation-option {
1013 display: flex;
1014 align-items: center;
1015 border-bottom: 0;
1016 gap: 10px;
1017 margin: 0 0 0 0;
1018 }
1019 #charitable-design-wrap .charitable-preview-recurring-donation-option.selected {
1020 background-color: #f5f5f5;
1021 }
1022 #charitable-design-wrap .charitable-preview-recurring-donation-option span {
1023 font-size: 14px;
1024 font-weight: 400;
1025 color: #333;
1026 padding: 10px;
1027 border-radius: 0;
1028 margin: 0;
1029 border-bottom: 0 !important;
1030 }
1031 #charitable-design-wrap .charitable-preview-recurring-donation-simple-hidden {
1032 display: none;
1033 }
1034 #charitable-design-wrap .charitable-preview-recurring-donation-advanced-hidden {
1035 display: none;
1036 }
1037
1038 #charitable-design-wrap .row {
1039 container-type: inline-size;
1040 container-name: previewArea;
1041 }
1042
1043 /* If the container is larger than 700px */
1044 @container previewArea (max-width: 700px) {
1045 #charitable-design-wrap .charitable-field-column {
1046 flex: auto;
1047 }
1048 }
1049 #charitable-design-wrap .charitable-field-organizer {
1050 container-type: inline-size;
1051 container-name: organizerArea;
1052 }
1053
1054 @container organizerArea (max-width: 350px) {
1055 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container {
1056 display: block !important;
1057 }
1058 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-image-column {
1059 display: block;
1060 }
1061 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info {
1062 display: block;
1063 }
1064 }
1065 /* mobile or narrow widths */
1066 .charitable-campaign-wrap .charitable-campaign-container {
1067 container-type: inline-size;
1068 container-name: campaign-area;
1069 }
1070 @container campaign-area (max-width: 700px) {
1071 .charitable-campaign-wrap .charitable-campaign-column,
1072 .charitable-campaign-wrap .charitable-campaign-column:nth-child(even),
1073 .charitable-campaign-wrap .charitable-campaign-column:nth-child(odd) {
1074 flex: 0 0 100% !important;
1075 padding-top: 0;
1076 padding-bottom: 0;
1077 padding-left: 0;
1078 padding-right: 0;
1079 }
1080 }
1081
1082 .charitable-preview-wrap.charitable-preview-hide-field-names h6.charitable-preview-field-title {
1083 display: none;
1084 transition: all 0.6s ease-out;
1085 }
1086
1087 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field {
1088 border-color: transparent;
1089 background-color: transparent;
1090 }
1091 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field.active {
1092 /* border-color: transparent; */
1093 border-color: rgba(53, 132, 232, 0.4);
1094 background-color: transparent;
1095 }
1096 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .charitable-preview-field-container .placeholders {
1097 margin-bottom: 0;
1098 margin-top: 0;
1099 transition: all 0.6s ease-out;
1100 }
1101 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .charitable-campaign-preview .placeholder,
1102 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .primary-image-container.placeholder {
1103 background-color: transparent;
1104 margin-top: 0;
1105 margin-bottom: 0;
1106 transition: all 0.6s ease-out;
1107 }
1108 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .charitable-preview-field-container .placeholder {
1109 margin-bottom: 0;
1110 margin-top: 0;
1111 transition: all 0.6s ease-out;
1112 border-color: transparent;
1113 background-color: transparent;
1114 }
1115 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field * div,
1116 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field * ol,
1117 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field * span {
1118 opacity: 1 !important;
1119 transition: all 0.6s ease-out;
1120 }
1121 .charitable-preview-wrap.charitable-preview-live .charitable-field {
1122 border-color: transparent;
1123 background-color: transparent;
1124 }
1125 .charitable-preview-wrap.charitable-preview-live .charitable-field.active {
1126 border-color: transparent;
1127 background-color: transparent;
1128 }
1129 .charitable-preview-wrap.charitable-preview-live .charitable-field h4,
1130 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-field-edit,
1131 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-field-duplicate,
1132 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-field-delete {
1133 display: none;
1134 transition: all 0.6s ease-out;
1135 }
1136 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-preview-field-container .placeholders {
1137 margin-bottom: 0;
1138 margin-top: 0;
1139 transition: all 0.6s ease-out;
1140 }
1141 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-campaign-preview .placeholder,
1142 .charitable-preview-wrap.charitable-preview-live .charitable-field .primary-image-container.placeholder {
1143 background-color: transparent;
1144 margin-top: 0;
1145 margin-bottom: 0;
1146 transition: all 0.6s ease-out;
1147 }
1148 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-preview-field-container .placeholder {
1149 margin-bottom: 0;
1150 margin-top: 0;
1151 transition: all 0.6s ease-out;
1152 border-color: transparent;
1153 background-color: transparent;
1154 }
1155 .charitable-preview-wrap.charitable-preview-live .charitable-field * div,
1156 .charitable-preview-wrap.charitable-preview-live .charitable-field * ol,
1157 .charitable-preview-wrap.charitable-preview-live .charitable-field * span {
1158 opacity: 1 !important;
1159 transition: all 0.6s ease-out;
1160 }
1161 .charitable-preview-wrap.charitable-preview-live .charitable-panel-fields .charitable-field.active {
1162 background-color: transparent;
1163 }
1164
1165 .charitable-panel-fields .charitable-field-dragging.charitable-field-photo img {
1166 max-height: 300px;
1167 }
1168
1169 /* Campaign Hero block — preview placeholder styling. Beacon family templates override with their own positioning. */
1170 .charitable-hero-preview {
1171 position: relative;
1172 width: 100%;
1173 min-height: 320px;
1174 background-size: cover;
1175 background-position: center;
1176 border-radius: 4px;
1177 overflow: visible;
1178 margin-bottom: 70px;
1179 }
1180 .charitable-hero-preview__overlay {
1181 position: relative;
1182 display: grid;
1183 grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
1184 gap: 32px;
1185 padding: 24px;
1186 height: 100%;
1187 min-height: 320px;
1188 align-items: end;
1189 }
1190 .charitable-hero-preview__identity {
1191 display: flex;
1192 align-items: flex-end;
1193 gap: 16px;
1194 min-width: 0;
1195 }
1196 .charitable-hero-preview__avatar {
1197 width: 140px;
1198 height: 140px;
1199 flex-shrink: 0;
1200 background: #fff;
1201 border: 1px solid rgba(255, 255, 255, 0.6);
1202 border-radius: 4px;
1203 overflow: hidden;
1204 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
1205 transform: translateY(67%);
1206 }
1207 .charitable-hero-preview__avatar img {
1208 display: block;
1209 width: 100%;
1210 height: 100%;
1211 object-fit: cover;
1212 }
1213 .charitable-hero-preview__title {
1214 color: #fff;
1215 font-size: 32px;
1216 font-weight: 700;
1217 margin: 0;
1218 line-height: 1.1;
1219 text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
1220 }
1221 /* No logo: title sits where the logo would have been (no horizontal flex gap to absorb). */
1222 .charitable-hero-preview__title.charitable-hero-preview__title--no-logo {
1223 margin-left: 0;
1224 }
1225 .charitable-hero-preview__widget {
1226 background: #fff;
1227 border-radius: 4px;
1228 padding: 12px;
1229 width: 100%;
1230 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
1231 display: flex;
1232 flex-direction: column;
1233 gap: 8px;
1234 align-self: end;
1235 margin-bottom: -60px;
1236 pointer-events: none;
1237 -webkit-user-select: none;
1238 -moz-user-select: none;
1239 user-select: none;
1240 }
1241 .charitable-hero-preview__raised {
1242 font-size: 15px;
1243 background: var(--charitable-hero-accent, #1d3a8a);
1244 color: #fff;
1245 padding: 14px 18px;
1246 border-radius: 2px;
1247 margin: -12px -12px 0;
1248 }
1249 .charitable-hero-preview__raised span {
1250 display: block;
1251 margin-bottom: 14px;
1252 font-weight: 600;
1253 }
1254 .charitable-hero-preview__bar {
1255 background: rgba(255, 255, 255, 0.3);
1256 height: 7px;
1257 border-radius: 3px;
1258 overflow: hidden;
1259 }
1260 .charitable-hero-preview__bar span {
1261 display: block;
1262 height: 100%;
1263 background: #fff;
1264 }
1265 .charitable-hero-preview__amounts {
1266 display: grid;
1267 grid-template-columns: repeat(3, 1fr);
1268 gap: 6px;
1269 }
1270 .charitable-hero-preview__amount {
1271 padding: 8px 4px;
1272 font-size: 13px;
1273 font-weight: 600;
1274 border: 1px solid #d0d5dd;
1275 background: #fff;
1276 color: #333;
1277 border-radius: 3px;
1278 cursor: default;
1279 }
1280 .charitable-hero-preview__cta {
1281 padding: 10px;
1282 font-size: 13px;
1283 font-weight: 700;
1284 color: #fff;
1285 background: var(--charitable-hero-button, var(--charitable-hero-accent, #1d3a8a));
1286 border: 0;
1287 border-radius: 3px;
1288 text-transform: uppercase;
1289 cursor: default;
1290 }
1291
1292 /* Hero block "Reset" button — JS moves this into the uploader's button row,
1293 so it sits inline with Upload + Clear and inherits secondary-button styling. */
1294 .charitable-campaign-hero-reset-image {
1295 margin-left: 4px;
1296 }
1297
1298 /* Locked rows: prevent fields inside from being deleted, duplicated, or dragged out. */
1299 .charitable-preview-row[data-row-locked="1"] .charitable-field-delete,
1300 .charitable-preview-row[data-row-locked="1"] .charitable-field-duplicate,
1301 .charitable-preview-row.is-locked .charitable-field-delete,
1302 .charitable-preview-row.is-locked .charitable-field-duplicate,
1303 .charitable-preview-header[data-row-locked="1"] .charitable-field-delete,
1304 .charitable-preview-header[data-row-locked="1"] .charitable-field-duplicate,
1305 .charitable-preview-header.is-locked .charitable-field-delete,
1306 .charitable-preview-header.is-locked .charitable-field-duplicate {
1307 display: none !important;
1308 }
1309 .charitable-preview-row[data-row-locked="1"] .charitable-field,
1310 .charitable-preview-row.is-locked .charitable-field,
1311 .charitable-preview-header[data-row-locked="1"] .charitable-field,
1312 .charitable-preview-header.is-locked .charitable-field {
1313 cursor: default;
1314 }
1315
1316 /* When the edit pencil is the only visible action, hug the right edge. */
1317 .charitable-preview-row[data-row-locked="1"] .charitable-field .charitable-field-edit,
1318 .charitable-preview-row.is-locked .charitable-field .charitable-field-edit,
1319 .charitable-preview-header[data-row-locked="1"] .charitable-field .charitable-field-edit,
1320 .charitable-preview-header.is-locked .charitable-field .charitable-field-edit,
1321 .charitable-field.charitable-no-duplicate.charitable-no-delete .charitable-field-edit {
1322 right: 0 !important;
1323 }
1324