PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.11.1
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.11.1
1.8.13.1 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 All 212 releases
charitable / assets / css / admin / charitable-admin-splash.css

charitable-admin-splash.css in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.11.1, at assets/css/admin/charitable-admin-splash.css

646 lines 18.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 body.charitable-splash-modal div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-default {
2 max-width: 1000px;
3 }
4
5 body.charitable-splash-modal.post-type-campaign .jconfirm .jconfirm-box div.jconfirm-content-pane {
6 margin: 0 !important;
7 width: 100% !important;
8 }
9
10 #charitable-splash-modal header {
11 display: flex;
12 align-items: center;
13 gap: 30px;
14 padding: 50px 100px;
15 background: linear-gradient(180deg, #f6f7f7 0%, rgba(246, 247, 247, 0) 100%);
16 }
17 #charitable-splash-modal header .charitable-splash-header-content {
18 text-align: left !important;
19 }
20
21 #charitable-splash-modal header h2 {
22 color: #1d2327;
23 font-size: 24px;
24 font-weight: 700;
25 margin: 0 0 5px;
26 }
27
28 #charitable-splash-modal header img {
29 max-width: 80px !important;
30 max-height: 80px;
31 border: 4px solid #ffffff;
32 border-radius: 40px;
33 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
34 min-height: 70px;
35 }
36
37 #charitable-splash-modal main .charitable-splash-section {
38 display: flex;
39 align-items: center;
40 gap: 50px;
41 margin-bottom: 75px;
42 padding: 0 120px;
43 }
44
45 #charitable-splash-modal main .charitable-splash-section .charitable-splash-badge {
46 border-radius: 3px;
47 background-color: #edfaef;
48 padding: 8px 10px;
49 color: #00ba37;
50 text-align: center;
51 font-size: 10px;
52 font-weight: 700;
53 line-height: 10px;
54 letter-spacing: 0.5px;
55 text-transform: uppercase;
56 cursor: default;
57 }
58
59 #charitable-splash-modal main .charitable-splash-section h3 {
60 color: #1d2327;
61 font-size: 28px;
62 font-weight: 500;
63 line-height: 36px;
64 margin: 15px 0 10px;
65 }
66
67 #charitable-splash-modal main .charitable-splash-section p {
68 line-height: 25px !important;
69 opacity: 0.9;
70 }
71
72 #charitable-splash-modal main .charitable-splash-section ul {
73 list-style: revert;
74 margin-left: 2em;
75 }
76
77 #charitable-splash-modal main .charitable-splash-section .charitable-splash-section-buttons {
78 display: flex;
79 align-items: flex-start;
80 gap: 20px;
81 margin-top: 20px;
82 }
83
84 #charitable-splash-modal main .charitable-splash-section .charitable-splash-section-buttons .charitable-btn {
85 padding: 10px 15px;
86 font-size: 14px;
87 line-height: normal;
88 font-weight: 500;
89 }
90
91 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-fifty-fifty .charitable-splash-section-content {
92 text-align: left !important;
93 flex: 1;
94 }
95
96 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-fifty-fifty .charitable-splash-section-image {
97 flex: 1;
98 }
99
100 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-one-third-two-thirds .charitable-splash-section-content {
101 flex: 2;
102 text-align: right !important;
103 }
104 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-one-third-two-thirds .charitable-splash-section-content .charitable-splash-section-buttons {
105 justify-content: end !important;
106 }
107
108 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-one-third-two-thirds .charitable-splash-section-image {
109 flex: 1;
110 }
111
112 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-one-third-two-thirds-flipped .charitable-splash-section-content {
113 flex: 2;
114 text-align: left !important;
115 }
116 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-one-third-two-thirds-flipped .charitable-splash-section-content .charitable-splash-section-buttons {
117 justify-content: start !important;
118 }
119
120 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-one-third-two-thirds-flipped .charitable-splash-section-image {
121 flex: 1;
122 }
123
124 #charitable-splash-modal main .charitable-splash-section:nth-child(odd) .charitable-splash-section-content {
125 order: 2;
126 }
127
128 #charitable-splash-modal main .charitable-splash-section.no-order .charitable-splash-section-content {
129 order: revert;
130 }
131
132 #charitable-splash-modal main .charitable-splash-section:nth-child(odd) .charitable-splash-section-image {
133 order: 1;
134 }
135
136 #charitable-splash-modal main .charitable-splash-section .charitable-splash-section-image {
137 flex: 0 0 auto;
138 align-self: center;
139 justify-self: center;
140 }
141
142 #charitable-splash-modal main .charitable-splash-section .charitable-splash-section-image img {
143 max-width: 100%;
144 height: auto;
145 }
146
147 #charitable-splash-modal main .charitable-splash-section .charitable-splash-section-image.charitable-image-shadow-apply img {
148 box-shadow: 0 15px 50px 0 rgba(0, 0, 0, 0.15);
149 }
150
151 #charitable-splash-modal main .charitable-splash-section .charitable-splash-section-image.charitable-image-shadow-yes img {
152 max-width: calc(100% + 60px);
153 margin: -18px 0 -38px -30px;
154 }
155
156 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width {
157 flex-direction: column;
158 align-items: center;
159 gap: 0;
160 text-align: center;
161 padding: 0;
162 }
163
164 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width .charitable-splash-section-content,
165 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width .charitable-splash-section-image {
166 flex: revert;
167 order: revert;
168 }
169
170 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width .charitable-splash-section-content {
171 width: fit-content;
172 background-color: #f6f7f7;
173 padding: 50px 100px;
174 }
175
176 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width .charitable-splash-section-content .charitable-splash-badge {
177 background-color: #ffffff;
178 }
179
180 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width .charitable-splash-section-content h3 {
181 font-size: 32px;
182 }
183
184 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width .charitable-splash-section-image {
185 width: 100%;
186 background: linear-gradient(180deg, #f6f7f7 50%, #ffffff 50%);
187 }
188
189 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width .charitable-splash-section-image img {
190 max-width: 760px;
191 padding: 10px;
192 background: #ffffff;
193 border-radius: 9px;
194 box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
195 }
196
197 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width .charitable-splash-section-buttons {
198 justify-content: center;
199 }
200
201 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width h3 {
202 margin-top: 20px;
203 }
204
205 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width p {
206 font-size: 18px !important;
207 line-height: 28px !important;
208 }
209
210 #charitable-splash-modal footer {
211 display: flex;
212 padding: 50px 100px;
213 align-items: center;
214 gap: 50px;
215 background: #2c3338;
216 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
217 }
218 #charitable-splash-modal footer .charitable-splash-footer-content {
219 text-align: left !important;
220 }
221
222 #charitable-splash-modal footer h2 {
223 margin: 0 0 10px;
224 color: #ffffff;
225 font-size: 28px;
226 font-weight: 500;
227 line-height: 36px;
228 }
229
230 #charitable-splash-modal footer a {
231 padding: 11px 17px;
232 font-size: 16px;
233 font-weight: 500;
234 }
235
236 #charitable-splash-modal footer p {
237 color: rgba(255, 255, 255, 0.8) !important;
238 line-height: 25px !important;
239 opacity: 0.9;
240 }
241
242 #charitable-splash-modal .charitable-btn {
243 border: 1px;
244 border-style: solid;
245 border-radius: 4px;
246 cursor: pointer;
247 display: inline-block;
248 margin: 0;
249 text-decoration: none;
250 text-align: center;
251 vertical-align: middle;
252 white-space: nowrap;
253 box-shadow: none;
254 }
255
256 #charitable-splash-modal .charitable-btn.inactive {
257 cursor: no-drop;
258 pointer-events: none;
259 box-shadow: none;
260 opacity: 0.5;
261 }
262
263 #charitable-splash-modal .charitable-btn-orange {
264 background-color: #e27730;
265 border-color: #e27730;
266 color: #ffffff;
267 }
268
269 #charitable-splash-modal .charitable-btn-orange:hover, #charitable-splash-modal .charitable-btn-orange:active, #charitable-splash-modal .charitable-btn-orange:focus {
270 background-color: #cd6622;
271 border-color: #cd6622;
272 color: #ffffff;
273 }
274
275 #charitable-splash-modal .charitable-btn-orange:focus {
276 box-shadow: 0 0 0 2px #cd6622;
277 border-color: #ffffff;
278 outline: 0;
279 }
280
281 #charitable-splash-modal .charitable-btn-bordered {
282 background-color: #ffffff;
283 color: #50575e;
284 border-color: #8c8f94;
285 }
286
287 #charitable-splash-modal .charitable-btn-bordered:hover, #charitable-splash-modal .charitable-btn-bordered:focus {
288 color: #2c3338;
289 border-color: #50575e;
290 }
291
292 #charitable-splash-modal .charitable-btn-bordered:focus {
293 background-color: #ffffff;
294 box-shadow: 0 0 0 1px #50575e;
295 outline: 0;
296 }
297
298 #charitable-splash-modal .charitable-btn-green {
299 background-color: #008a20;
300 color: #ffffff;
301 border-color: #008a20;
302 }
303
304 #charitable-splash-modal .charitable-btn-green:hover, #charitable-splash-modal .charitable-btn-green:focus {
305 background-color: #00a32a;
306 color: #ffffff;
307 }
308
309 body.charitable-splash-modal {
310 overflow: hidden;
311 margin-right: var(--charitable-body-scrollbar-width);
312 }
313
314 body.charitable-splash-modal #wpadminbar {
315 width: calc(100vw - var(--charitable-body-scrollbar-width));
316 }
317
318 body.charitable-splash-modal .jconfirm {
319 overflow: hidden;
320 bottom: revert;
321 min-height: 100vh;
322 backdrop-filter: blur(4px);
323 -webkit-backdrop-filter: blur(4px);
324 }
325
326 body.charitable-splash-modal .jconfirm .jconfirm-cell {
327 vertical-align: top;
328 overflow-y: auto;
329 max-height: 100vh;
330 height: 100vh;
331 display: flex;
332 justify-content: center;
333 align-items: center;
334 }
335
336 body.charitable-splash-modal .jconfirm .jconfirm-cell::-webkit-scrollbar {
337 background: transparent;
338 width: 15px;
339 height: 15px;
340 }
341
342 body.charitable-splash-modal .jconfirm .jconfirm-cell::-webkit-scrollbar-track {
343 background: transparent;
344 }
345
346 body.charitable-splash-modal .jconfirm .jconfirm-cell::-webkit-scrollbar-thumb {
347 box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.05);
348 background: transparent;
349 border-radius: 15px;
350 border: solid 4px transparent;
351 }
352
353 body.charitable-splash-modal .jconfirm .jconfirm-cell::-webkit-resizer, body.charitable-splash-modal .jconfirm .jconfirm-cell::-webkit-scrollbar-button, body.charitable-splash-modal .jconfirm .jconfirm-cell::-webkit-scrollbar-corner {
354 display: none;
355 }
356
357 @-moz-document url-prefix() {
358 body.charitable-splash-modal .jconfirm .jconfirm-cell {
359 scrollbar-color: rgba(0, 0, 0, 0.05) transparent;
360 scrollbar-gutter: initial !important;
361 scrollbar-width: thin;
362 }
363 }
364 body.charitable-splash-modal .jconfirm .jconfirm-cell:hover::-webkit-scrollbar {
365 background: transparent;
366 width: 15px;
367 height: 15px;
368 }
369
370 body.charitable-splash-modal .jconfirm .jconfirm-cell:hover::-webkit-scrollbar-track {
371 background: transparent;
372 }
373
374 body.charitable-splash-modal .jconfirm .jconfirm-cell:hover::-webkit-scrollbar-thumb {
375 box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.3);
376 background: transparent;
377 border-radius: 15px;
378 border: solid 4px transparent;
379 }
380
381 body.charitable-splash-modal .jconfirm .jconfirm-cell:hover::-webkit-resizer, body.charitable-splash-modal .jconfirm .jconfirm-cell:hover::-webkit-scrollbar-button, body.charitable-splash-modal .jconfirm .jconfirm-cell:hover::-webkit-scrollbar-corner {
382 display: none;
383 }
384
385 @-moz-document url-prefix() {
386 body.charitable-splash-modal .jconfirm .jconfirm-cell:hover {
387 scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
388 scrollbar-gutter: initial !important;
389 scrollbar-width: thin;
390 }
391 }
392 body.charitable-splash-modal .jconfirm .jconfirm-cell .jc-bs3-container {
393 padding-bottom: 50px;
394 }
395
396 body.charitable-splash-modal .jconfirm .jconfirm-cell .jconfirm-holder {
397 width: 100%;
398 padding: 0 !important;
399 }
400
401 body.charitable-splash-modal .jconfirm.jconfirm-open .jconfirm-bg {
402 position: sticky;
403 height: 100%;
404 }
405
406 body.charitable-splash-modal .jconfirm.jconfirm-open .jconfirm-scrollpane {
407 margin-top: -100vh;
408 }
409
410 body.charitable-splash-modal .jconfirm.jconfirm-modern .jconfirm-bg {
411 background-color: #72777c;
412 opacity: 0.75;
413 }
414
415 body.charitable-splash-modal .jconfirm-box {
416 max-width: 1000px;
417 width: 100% !important;
418 }
419
420 body.charitable-splash-modal .jconfirm-box-container {
421 opacity: 0;
422 padding: 0 50px;
423 }
424
425 body.charitable-splash-modal div.jconfirm .jconfirm-box-container .jconfirm-box {
426 border-radius: 12px;
427 box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
428 }
429
430 body.charitable-splash-modal div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-default {
431 padding: 0;
432 transition-duration: initial !important;
433 }
434
435 body.charitable-splash-modal .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content {
436 text-align: revert;
437 }
438
439 body.charitable-splash-modal div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane {
440 display: block;
441 margin-top: 0;
442 margin-bottom: 0;
443 max-height: none !important;
444 margin-left: 0;
445 margin-right: 0;
446 width: 100%;
447 }
448
449 body.charitable-splash-modal div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content {
450 color: #444444;
451 font-size: 16px;
452 line-height: 24px;
453 margin-bottom: 0;
454 overflow: inherit;
455 }
456
457 body.charitable-splash-modal div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content p {
458 color: #50575e;
459 font-size: 16px;
460 font-weight: 400;
461 line-height: 22px;
462 margin-block: 0;
463 }
464
465 body.charitable-splash-modal div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-closeIcon {
466 top: 20px !important;
467 right: 20px !important;
468 }
469
470 body.charitable-splash-modal div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-closeIcon:after {
471 font-size: 20px;
472 }
473
474 @media screen and (max-width: 1024px) {
475 #charitable-splash-modal header, #charitable-splash-modal footer {
476 padding: 50px;
477 }
478 #charitable-splash-modal main .charitable-splash-section {
479 padding: 0 50px;
480 }
481 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-full-width .charitable-splash-section-content {
482 padding: 50px;
483 }
484 }
485 @media screen and (max-width: 768px) {
486 body.charitable-splash-modal .jconfirm {
487 display: none;
488 }
489 }
490
491 /* ---------------------------------------------------------------------------
492 * Splash redesign (1.8.10): dark hero, full-width sections, video, more-features.
493 * Ported from Charitable Pro splash. Scoped to #charitable-splash-modal so it
494 * only affects the splash screen, not other admin UI.
495 * ------------------------------------------------------------------------- */
496 #charitable-splash-modal header {
497 padding: 50px 40px;
498 background: #2c3338;
499 color: #ffffff;
500 }
501 #charitable-splash-modal header h2 {
502 color: #ffffff;
503 }
504 #charitable-splash-modal header h2 .charitable-splash-header-version {
505 font-size: 12px;
506 line-height: 11px;
507 padding-left: 10px;
508 font-weight: 400;
509 opacity: 0.6;
510 }
511 #charitable-splash-modal header .charitable-splash-header-content p {
512 color: rgba(255, 255, 255, 0.7);
513 }
514
515 #charitable-splash-modal main .charitable-splash-section {
516 margin-bottom: 0;
517 padding: 40px;
518 border-bottom: 1px solid #ccc;
519 }
520 #charitable-splash-modal main .charitable-splash-section:last-child {
521 border-bottom: none;
522 }
523
524 #charitable-splash-modal main .charitable-splash-section:first-child {
525 background: #2c3338;
526 padding: 0 40px 40px 40px;
527 margin-bottom: 0;
528 border-bottom: none;
529 }
530 #charitable-splash-modal main .charitable-splash-section:first-child .charitable-splash-section-content,
531 #charitable-splash-modal main .charitable-splash-section:first-child .charitable-splash-section-content h3 {
532 color: #ffffff;
533 }
534 #charitable-splash-modal main .charitable-splash-section:first-child .charitable-splash-section-content p {
535 color: rgba(255, 255, 255, 0.7);
536 }
537 #charitable-splash-modal main .charitable-splash-section:first-child .charitable-splash-badge {
538 background-color: rgba(255, 255, 255, 0.15);
539 color: #ffffff;
540 }
541
542 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-one-third-two-thirds .charitable-splash-section-content {
543 text-align: left !important;
544 }
545 #charitable-splash-modal main .charitable-splash-section.charitable-splash-section-one-third-two-thirds .charitable-splash-section-content .charitable-splash-section-buttons {
546 justify-content: start !important;
547 }
548 #charitable-splash-modal main .charitable-splash-section .charitable-splash-section-image {
549 order: 1;
550 }
551 #charitable-splash-modal main .charitable-splash-section .charitable-splash-section-content {
552 order: 2;
553 }
554 #charitable-splash-modal main .charitable-splash-section.no-order .charitable-splash-section-content,
555 #charitable-splash-modal main .charitable-splash-section.no-order .charitable-splash-section-image {
556 order: revert;
557 }
558
559 #charitable-splash-modal main .charitable-splash-section .charitable-splash-video-wrap {
560 position: relative;
561 width: 100%;
562 }
563 #charitable-splash-modal main .charitable-splash-section .charitable-splash-video-wrap .charitable-splash-video-embed {
564 position: relative;
565 width: 100%;
566 padding-top: 56.25%;
567 border-radius: 6px;
568 overflow: hidden;
569 background: #000;
570 }
571 #charitable-splash-modal main .charitable-splash-section .charitable-splash-video-wrap .charitable-splash-video-embed iframe {
572 position: absolute;
573 top: 0;
574 left: 0;
575 width: 100%;
576 height: 100%;
577 border: 0;
578 }
579 #charitable-splash-modal main .charitable-splash-section .charitable-splash-video-wrap video {
580 display: block;
581 width: 100%;
582 border-radius: 6px;
583 }
584 #charitable-splash-modal main .charitable-splash-section .charitable-splash-video-wrap video::-webkit-media-controls {
585 opacity: 0;
586 transition: opacity 0.2s ease;
587 }
588 #charitable-splash-modal main .charitable-splash-section .charitable-splash-video-wrap:hover video::-webkit-media-controls {
589 opacity: 1;
590 }
591 #charitable-splash-modal main .charitable-splash-section .charitable-splash-video-wrap::after {
592 content: "";
593 position: absolute;
594 top: 50%;
595 left: 50%;
596 width: 72px;
597 height: 72px;
598 margin: -36px 0 0 -36px;
599 border-radius: 50%;
600 background-color: rgba(0, 0, 0, 0.55);
601 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='white'/></svg>");
602 background-repeat: no-repeat;
603 background-position: 55% center;
604 background-size: 40px 40px;
605 pointer-events: none;
606 transition: opacity 0.2s ease;
607 }
608 #charitable-splash-modal main .charitable-splash-section .charitable-splash-video-wrap:hover::after {
609 opacity: 0;
610 }
611
612 #charitable-splash-modal main .charitable-splash-section-more-features {
613 display: block;
614 padding: 30px 40px 40px;
615 text-align: left;
616 }
617 #charitable-splash-modal main .charitable-splash-section-more-features h3 {
618 font-size: 18px;
619 font-weight: 600;
620 color: #1d2327;
621 margin: 0 15px 15px 0px !important;
622 text-align: left;
623 }
624 #charitable-splash-modal main .charitable-splash-section-more-features ul.charitable-splash-more-features-list {
625 display: grid;
626 grid-template-columns: 1fr 1fr;
627 gap: 8px 30px;
628 list-style: none;
629 padding: 0;
630 margin: 0;
631 color: #acacac;
632 font-size: 16px;
633 font-weight: 400;
634 line-height: 22px;
635 text-align: left;
636 }
637 #charitable-splash-modal main .charitable-splash-section-more-features ul.charitable-splash-more-features-list li {
638 margin: 0;
639 text-align: left;
640 list-style: none;
641 }
642
643 body.charitable-splash-modal div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content p {
644 color: #acacac;
645 }
646