25 lines
2.9 KiB
CSS
25 lines
2.9 KiB
CSS
.magic-confirmation { color: var(--color-ink, #08376b); background: var(--color-cream, #eeeeee); }
|
|
.magic-confirmation-shell { width: min(100%, 36rem); margin-inline: auto; padding: clamp(1.5rem, 7vh, 4rem) 1rem max(1.5rem, env(safe-area-inset-bottom)); }
|
|
.magic-confirmation-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; }
|
|
.magic-confirmation-brand .auth-brand { margin: 0; }
|
|
.magic-confirmation-brand img { width: 8.5rem; height: auto; object-fit: contain; }
|
|
.magic-confirmation-card { padding: 1.5rem; border: 1px solid #dce5ed; border-top: 3px solid var(--color-coral, #fa9f00); border-radius: 1.25rem; background: #fff; }
|
|
.magic-confirmation-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: .875rem; background: var(--color-mint, #e5f4ff); }
|
|
.magic-confirmation-icon svg { width: 1.5rem; height: 1.5rem; }
|
|
.magic-confirmation-card h1 { margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.6; letter-spacing: normal; }
|
|
.magic-confirmation-card p { margin: 1rem 0 0; font-size: 1rem; font-weight: 400; line-height: 1.9; color: #526c86; }
|
|
.magic-confirmation-actions { display: grid; gap: .75rem; margin-top: 1.5rem; }
|
|
.magic-confirmation-primary, .magic-confirmation-cancel { display: flex; align-items: center; justify-content: center; min-height: 3rem; min-width: 2.75rem; padding: .75rem 1rem; border: 1px solid transparent; border-radius: .75rem; font-size: .875rem; font-weight: 800; line-height: 1.7; text-align: center; white-space: normal; overflow-wrap: anywhere; text-decoration: none; box-shadow: none; transform: none; }
|
|
.magic-confirmation-primary { color: #fff; background: var(--color-ink, #08376b); }
|
|
.magic-confirmation-primary:hover { background: var(--color-ink-soft, #0b4c8c); box-shadow: none; transform: none; }
|
|
.magic-confirmation-cancel { color: var(--color-ink, #08376b); background: #fff; border-color: #dce5ed; }
|
|
.magic-confirmation-cancel:hover { background: var(--color-mint, #e5f4ff); border-color: #91bfdd; }
|
|
.magic-confirmation-primary:focus-visible, .magic-confirmation-cancel:focus-visible { outline: 3px solid var(--color-sea, #0693e3); outline-offset: 4px; }
|
|
.magic-confirmation-primary:disabled { background: var(--color-ink-soft, #0b4c8c); color: #fff; opacity: 1; cursor: wait; }
|
|
.magic-confirmation-status:empty { display: none; }
|
|
.magic-confirmation-status { color: #526c86; font-size: .875rem; line-height: 1.7; text-align: center; }
|
|
.magic-confirmation .auth-footer { margin-top: 1.5rem; color: #526c86; font-size: .75rem; line-height: 1.9; text-align: center; overflow-wrap: anywhere; }
|
|
@media (min-width: 640px) { .magic-confirmation-card { padding: 2rem; } .magic-confirmation-card h1 { font-size: 1.75rem; } }
|
|
@media (max-width: 359px) { .magic-confirmation-shell { padding-inline: .75rem; } .magic-confirmation-card { padding: 1.25rem; } }
|
|
@media (prefers-reduced-motion: reduce) { .magic-confirmation-actions > * { transition: none; } }
|