@cedros/pay-react
Version:
React frontend library for Cedros Pay - unified Stripe and Solana x402 payments
2 lines (1 loc) • 3.71 kB
CSS
.cedros-theme-root{--cedros-surface-bg: transparent;--cedros-surface-text: #111827;--cedros-surface-border: transparent;--cedros-stripe-bg: linear-gradient(135deg, #635bff 0%, #4f46e5 100%);--cedros-stripe-text: #ffffff;--cedros-stripe-shadow: rgba(79, 70, 229, .25);--cedros-crypto-bg: linear-gradient(135deg, #14f195 0%, #9945ff 100%);--cedros-crypto-text: #ffffff;--cedros-crypto-shadow: rgba(99, 102, 241, .25);--cedros-error-bg: #fee2e2;--cedros-error-border: #fca5a5;--cedros-error-text: #b91c1c;--cedros-success-bg: #dcfce7;--cedros-success-border: #86efac;--cedros-success-text: #166534;--cedros-modal-overlay: rgba(0, 0, 0, .5);--cedros-modal-bg: #ffffff;--cedros-modal-border: rgba(15, 23, 42, .08);--cedros-button-radius: 8px;--cedros-button-padding: .75rem 1.5rem;--cedros-button-font-size: 1rem;--cedros-button-font-weight: 600}.cedros-theme.cedros-theme--dark{--cedros-surface-bg: transparent;--cedros-surface-text: #f9fafb;--cedros-surface-border: transparent;--cedros-stripe-bg: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);--cedros-stripe-text: #f5f3ff;--cedros-stripe-shadow: rgba(99, 102, 241, .35);--cedros-crypto-bg: linear-gradient(135deg, #1dd4a6 0%, #6d28d9 100%);--cedros-crypto-text: #ecfeff;--cedros-crypto-shadow: rgba(75, 85, 99, .35);--cedros-error-bg: #7f1d1d;--cedros-error-border: #fca5a5;--cedros-error-text: #fecaca;--cedros-success-bg: #14532d;--cedros-success-border: #4ade80;--cedros-success-text: #bbf7d0;--cedros-modal-overlay: rgba(0, 0, 0, .75);--cedros-modal-bg: #1f2937;--cedros-modal-border: rgba(148, 163, 184, .25)}.cedros-theme__pay{display:flex;flex-direction:column;gap:1rem;max-width:400px;background:var(--cedros-surface-bg);color:var(--cedros-surface-text);border:none;box-sizing:border-box}.cedros-theme__pay-content{display:flex;flex-direction:column;gap:.75rem}.cedros-theme__pay-content--horizontal{flex-direction:row;gap:.75rem}.cedros-theme__pay-content--horizontal .cedros-theme__button{flex:1;min-width:0}.cedros-theme__pay-content--vertical{flex-direction:column}.cedros-theme__button{padding:var(--cedros-button-padding);font-size:var(--cedros-button-font-size);font-weight:var(--cedros-button-font-weight);border:none;border-radius:var(--cedros-button-radius);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;width:100%;text-align:center}.cedros-theme__button:hover:not(:disabled){transform:translateY(-1px)}.cedros-theme__button:disabled{opacity:.6;cursor:not-allowed}.cedros-theme__stripe{background:var(--cedros-stripe-bg);color:var(--cedros-stripe-text);box-shadow:0 4px 12px var(--cedros-stripe-shadow)}.cedros-theme__stripe:hover:not(:disabled){box-shadow:0 8px 18px var(--cedros-stripe-shadow)}.cedros-theme__crypto{background:var(--cedros-crypto-bg);color:var(--cedros-crypto-text);box-shadow:0 4px 12px var(--cedros-crypto-shadow)}.cedros-theme__crypto:hover:not(:disabled){box-shadow:0 8px 18px var(--cedros-crypto-shadow)}.cedros-theme__error{padding:.75rem;background-color:var(--cedros-error-bg);border:1px solid var(--cedros-error-border);border-radius:8px;color:var(--cedros-error-text);font-size:.875rem;margin-top:.5rem}.cedros-theme__success{padding:.75rem;background-color:var(--cedros-success-bg);border:1px solid var(--cedros-success-border);border-radius:8px;color:var(--cedros-success-text);font-size:.875rem;margin-top:.5rem}.cedros-theme__notice{padding:.75rem;background-color:#0e74901f;border:1px solid rgba(14,116,144,.3);border-radius:8px;color:#0f172a;font-size:.875rem;margin-bottom:.75rem}@media(max-width:640px){.cedros-theme__pay{max-width:100%}.cedros-theme__button{font-size:.875rem;padding:.625rem 1.25rem}.cedros-theme__pay-content--horizontal{flex-direction:column}}