/** * MaxiCommerce Login — Stylesheet der Login-/Register-Seite. * * Die Login-Seite läuft über DIESELBE Seiten-ID wie der Kundenbereich, zeigt * aber nur ein E-Mail-Feld und sechs Ziffern. Bis 1.30.x lud sie deshalb die * komplette `account.css` (118 KB) mit Seitenleiste, Bestellansicht, * Zahlungsmethoden und Stripe-/PayPal-Optik — Regeln, die dort kein Element * treffen können. Ausgeloggt lädt `Account::enqueue_assets()` jetzt DIESE * Datei statt `account.css`. * * WAS HIER STEHT (jede Regel ist WÖRTLICH aus account.css übernommen und steht * dort UNVERÄNDERT weiter — der Kundenbereich verliert nichts): * * 1. Fundament: die Variablen-Vorgaben (`--mc-acc-*`) und der Reset auf * `.mc-account-page`. Der `` der Login-Seite trägt BEIDE Klassen * (`mc-account-page mc-login-page`, templates/login-page.php), und jede * Login-Regel liest `--mc-acc-radius-sm`, `--mc-acc-link`, `--mc-acc-font` … * 2. Toast: `account.js` zeigt auf der Login-Seite einen Toast („Code wurde * erneut gesendet", account.js `showToast`) — ohne diese Regeln stünde er * unformatiert oben links. * 3. Der komplette Login-Block (`.mc-login-*`, OTP-Ziffern, Media-Queries). * * NICHT hier: Seitenleiste, Kopfzeile, Bestellungen, Downloads, Adressen, * Zahlungsmethoden, Modale, Bundles — nichts davon existiert im Login-Markup. * * Beim Ändern einer Login-Regel IMMER beide Dateien anfassen: `account.css` * bleibt die Quelle für den eingeloggten Bereich (dort steht der Login-Block * absichtlich weiter, damit ein Theme-/Addon-Kontext, der `mc-account` lädt, * nichts verliert). * * Schrift-Invariante (unverändert): Die Seite hängt an `--mc-acc-font` / * `--mc-acc-btn-font` (Belegung durch `mc_account_build_login_font_css()`, * angehängt an DIESEN Handle), die sechs Ziffernfelder an `--mc-ui-font`. * Die `!important`-Panzerung in `templates/login-page.php` liegt hinter diesem * Stylesheet und gewinnt weiterhin. * * @package MaxiCommerce */ /* ═════════ 1. Fundament — wörtlich aus account.css (Variablen + Reset) ═════════ */ /* ======================================================================== CSS Variables (defaults, overridden by inline vars) ======================================================================== */ :root, #mc-account-app, .mc-account-page, .mc-account-html { --mc-acc-primary: #015BD1; --mc-acc-primary-rgb: 1, 91, 209; --mc-acc-btn-bg: #015BD1; --mc-acc-btn-text: #ffffff; --mc-acc-btn-hover: #0147b3; --mc-acc-link: #015BD1; --mc-acc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mc-acc-sidebar-w: 280px; --mc-acc-text: #111827; --mc-acc-text-secondary: #6b7280; --mc-acc-text-muted: #9ca3af; --mc-acc-bg: #f8f9fa; --mc-acc-card-bg: #ffffff; --mc-acc-border: #e5e7eb; --mc-acc-border-light: #f3f4f6; --mc-acc-radius: 12px; --mc-acc-radius-sm: 8px; --mc-acc-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02); --mc-acc-transition: 0.2s ease; } /* ======================================================================== Reset & Base ======================================================================== */ html.mc-account-html, .mc-account-page { background: var(--mc-acc-sidebar-bg, #ffffff); } .mc-account-page { margin: 0; padding: 0; font-family: var(--mc-acc-font); color: var(--mc-acc-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mc-account-page *, .mc-account-page *::before, .mc-account-page *::after { box-sizing: border-box; } .mc-account-page a, .mc-account-page button, .mc-account-page input, .mc-account-page label, .mc-account-page .mc-acc-nav-item, .mc-account-page .mc-acc-order-row { -webkit-tap-highlight-color: transparent; } /* ═════════ 2. Toast — wörtlich aus account.css (account.js zeigt ihn auch hier) ═════════ */ /* ======================================================================== Toast Notification ======================================================================== */ .mc-acc-toast { position: fixed; top: 24px; right: 24px; z-index: 10000; display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; color: #fff; background: var(--mc-acc-toast-success, #6b7280); box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06); opacity: 0; transform: translateX(calc(100% + 24px)); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; font-family: var(--mc-acc-font); max-width: 400px; line-height: 1.45; -webkit-font-smoothing: antialiased; } .mc-acc-toast.mc-acc-toast-visible { opacity: 1; transform: translateX(0); pointer-events: auto; } .mc-acc-toast-msg { flex: 1; min-width: 0; } .mc-acc-toast-close { flex-shrink: 0; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 20px; font-weight: 300; font-family: Arial, Helvetica, sans-serif; line-height: 1; padding: 0 0 0 4px; margin: 0; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease; user-select: none; } @media (hover: hover) and (pointer: fine) { .mc-acc-toast-close:hover { color: #fff; } } .mc-acc-toast-success { background: var(--mc-acc-toast-success, #6b7280); } .mc-acc-toast-error { background: var(--mc-acc-toast-error, #dc2626); } .mc-acc-toast-warning { background: var(--mc-acc-toast-warning, #d97706); } .mc-acc-toast-info { background: var(--mc-acc-toast-info, #2563eb); } /* ═════════ 3. Login-Block — wörtlich aus account.css ═════════ */ /* ======================================================================== Login Page — OTP-Login (v2 — customizable via backend) ======================================================================== */ body.mc-login-page, html body.mc-login-page { background: var(--mc-login-bg, #f8f9fa) !important; border: none !important; outline: none !important; margin: 0 !important; padding: 0 !important; } .mc-login-wrapper { display: flex; flex-direction: column; align-items: center; min-height: 100dvh; padding: 0 16px; border: none; outline: none; } .mc-login-wrapper::before { content: ''; flex: 2; } .mc-login-wrapper::after { content: ''; flex: 3; } .mc-login-card { width: 100%; max-width: var(--mc-login-container-width, 420px); background: var(--mc-login-card-bg, #ffffff); border: var(--mc-login-card-border, none); border-radius: var(--mc-login-card-radius, 16px); box-shadow: var(--mc-login-card-shadow, 0 4px 24px rgba(0,0,0,0.06)); padding: 40px 36px 32px; } /* Logo — outside card (folgt Textausrichtung Desktop/Tablet/Mobil) */ .mc-login-logo { text-align: var(--mc-login-text-align, center); margin-bottom: 28px; flex-shrink: 0; } .mc-login-logo a { text-decoration: none; display: inline-block; } .mc-login-logo img { max-width: var(--mc-login-logo-width, var(--mc-login-logo-width-desktop, 160px)); height: auto; display: inline-block; vertical-align: middle; } .mc-login-sitename { font-size: 22px; font-weight: 700; color: var(--mc-acc-text); } /* Steps */ .mc-login-step { display: none; } .mc-login-step.mc-login-step-active { display: block; animation: mcLoginFadeIn 0.25s ease; } @keyframes mcLoginFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Titles */ .mc-login-title { font-size: 22px; font-weight: 700; color: var(--mc-acc-text); margin: 0 0 8px; text-align: var(--mc-login-text-align, center); line-height: 1.3; } .mc-login-subtitle { font-size: 14px; color: var(--mc-acc-text-secondary); margin: 0 0 24px; text-align: var(--mc-login-text-align, center); line-height: 1.5; } /* OTP-Schritt: Abstand zur Code-Eingabe nur über .mc-login-otp-group (oben = unten) */ #mc-login-step-otp .mc-login-subtitle { margin-bottom: 0; } .mc-login-subtitle strong { color: var(--mc-acc-text); font-weight: 600; } /* Notice Messages */ .mc-login-notice { padding: 12px 16px; border-radius: var(--mc-login-input-radius, var(--mc-acc-radius-sm)); font-size: 13px; font-weight: 500; margin-bottom: 20px; line-height: 1.5; } .mc-login-notice-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .mc-login-notice-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } .mc-login-notice-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } /* Form */ .mc-login-form { display: flex; flex-direction: column; gap: 16px; } .mc-login-field { display: flex; flex-direction: column; gap: 6px; } .mc-login-field label { font-size: 13px; font-weight: 600; color: var(--mc-acc-text); } .mc-login-field input[type="email"], .mc-login-field input[type="text"], .mc-login-page .mc-login-field input[type="email"], .mc-login-page .mc-login-field input[type="text"] { width: 100%; padding: 12px 16px; border: 2px solid var(--mc-login-input-border, #c9cdd3) !important; border-radius: var(--mc-login-input-radius, 8px) !important; font-size: 15px; font-family: var(--mc-acc-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); color: #111827 !important; background: #ffffff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none !important; box-sizing: border-box; appearance: none; -webkit-appearance: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; height: auto; min-height: 48px; } .mc-login-field input[type="email"]:focus, .mc-login-field input[type="text"]:focus { border-color: var(--mc-login-btn-bg, #015BD1) !important; box-shadow: 0 0 0 var(--mc-login-input-shadow-size, 3px) rgba(58, 123, 97, 0.12) !important; } .mc-login-field input[type="email"].mc-login-field-invalid, .mc-login-field input[type="text"].mc-login-field-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important; } /* Registrierung: Vor-/Nachname nebeneinander (Holy-ähnlich, passwortlos) */ .mc-login-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mc-login-name-row[hidden] { display: none !important; } .mc-login-reg-notice { margin: 14px 0 0; padding: 0; font-size: var(--mc-login-reg-notice-size, 12px); font-weight: var(--mc-login-reg-notice-weight, 400); line-height: 1.55; color: #6b7280; text-align: var(--mc-login-reg-notice-align, left); } .mc-login-reg-notice[hidden] { display: none !important; } .mc-login-reg-notice a, .mc-login-reg-notice .mc-account-auto-notice__link { color: var(--mc-acc-link, var(--mc-login-btn-bg, #015BD1)); font-weight: 600; text-decoration: none; } .mc-login-reg-notice a:hover, .mc-login-reg-notice .mc-account-auto-notice__link:hover { opacity: 0.8; text-decoration: none; } .mc-login-step--register .mc-login-register-switch { margin-top: 16px; } @media (max-width: 480px) { .mc-login-name-row { grid-template-columns: 1fr; } } .mc-login-field-error { font-size: 13px; color: #ef4444; min-height: 0; } /* Button */ .mc-login-btn, .mc-login-page .mc-login-btn, .mc-login-page button.mc-login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; width: 100%; padding: 13px 20px; border-radius: var(--mc-login-btn-radius, 8px) !important; font-size: 15px; font-weight: 600; font-family: var(--mc-acc-btn-font, var(--mc-acc-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif)); color: var(--mc-login-btn-text, #ffffff) !important; background: var(--mc-login-btn-bg, #015BD1) !important; border: var(--mc-login-btn-border-w, 0) solid var(--mc-login-btn-border-c, transparent) !important; cursor: pointer; transition: background 0.2s ease, transform 0.1s, opacity 0.15s ease; line-height: 1.4; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } .mc-login-btn:hover, .mc-login-page .mc-login-btn:hover, .mc-login-page button.mc-login-btn:hover { background: var(--mc-login-btn-hover, #0147b3) !important; } .mc-login-btn:active:not(.is-loading) { transform: scale(0.99); } .mc-login-btn:disabled, .mc-login-btn.is-loading { cursor: not-allowed; pointer-events: none; } .mc-login-btn.is-loading { opacity: 0.92; } /* Loading: Text bleibt für Button-Höhe im Layout, ist aber unsichtbar — nur Spinner */ .mc-login-btn .mc-login-btn-text { display: inline-block; transition: opacity 0.12s ease; } .mc-login-btn.is-loading .mc-login-btn-text { visibility: hidden !important; opacity: 0 !important; } .mc-login-btn-loading { display: none; align-items: center; justify-content: center; position: absolute; inset: 0; pointer-events: none; } .mc-login-btn.is-loading .mc-login-btn-loading, .mc-login-btn.is-loading .mc-login-btn-loading[hidden] { display: flex !important; } .mc-login-btn-loading[hidden] { display: none !important; } /* Spinner — Button-Textfarbe, zentriert statt über dem Label */ .mc-login-spinner { display: block; width: 20px; height: 20px; box-sizing: border-box; border: 2.5px solid color-mix(in srgb, var(--mc-login-btn-text, #ffffff) 32%, transparent); border-top-color: var(--mc-login-btn-text, #ffffff); border-radius: 50%; animation: mcLoginSpin 0.65s linear infinite; } @keyframes mcLoginSpin { to { transform: rotate(360deg); } } /* OTP — improved for mobile + Safari */ /* Einheitlich mit Checkout-OTP: gleicher Abstand Text↔Code↔Button (kein doppeltes Margin) */ #mc-login-otp-form.mc-login-form { /* Kein zusätzlicher Flex-Gap — Abstände kommen von otp-group / error / actions */ gap: 0; } .mc-login-otp-group { margin-top: 20px; margin-bottom: 20px; padding: 0; } #mc-login-otp-form .mc-login-field-error { margin-top: 0; } #mc-login-otp-form .mc-login-field-error:not(:empty) { margin-top: 10px; } #mc-login-otp-form .mc-login-btn { margin-top: 0; } .mc-login-otp-inputs { display: flex; align-items: center; justify-content: center; gap: 8px; } .mc-login-otp-digit { width: 46px; height: 54px; text-align: center; font-size: 22px; font-weight: 700; font-family: var(--mc-ui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); font-variant-numeric: tabular-nums; color: var(--mc-acc-text); border: 1px solid var(--mc-login-input-border, #e0e0e0); border-radius: var(--mc-login-input-radius, var(--mc-acc-radius-sm)); background: #f9fafb; outline: none; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.15s ease; appearance: none; -webkit-appearance: none; -moz-appearance: textfield; caret-color: transparent; -webkit-text-fill-color: var(--mc-acc-text); } .mc-login-otp-digit::-webkit-inner-spin-button, .mc-login-otp-digit::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .mc-login-otp-digit::selection { background: transparent; } .mc-login-otp-digit:focus { border-color: var(--mc-acc-primary); box-shadow: 0 0 0 3px rgba(var(--mc-acc-primary-rgb), 0.12); background: #fff; } .mc-login-otp-digit.mc-otp-filled { border-color: var(--mc-acc-primary); background: #fff; } .mc-login-otp-dash { font-size: 18px; color: var(--mc-acc-text-muted); padding: 0 2px; user-select: none; flex-shrink: 0; } /* OTP Actions — wie Checkout .mc-cotp-code-actions */ .mc-login-otp-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-top: 14px; } .mc-login-link-btn { background: none; border: none; padding: 0; font-size: 13px; font-weight: 500; font-family: var(--mc-acc-btn-font, var(--mc-acc-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif)); color: var(--mc-acc-link); cursor: pointer; text-decoration: none; transition: opacity var(--mc-acc-transition); } .mc-login-link-btn:hover { opacity: 0.8; text-decoration: none; } .mc-login-link-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Footer (inside card) */ .mc-login-footer { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f3f4f6; } /* Responsive — Tablet (gleiche Breakpoints wie Checkout-Logo) */ @media (max-width: 991px) { .mc-login-logo { text-align: var(--mc-login-text-align-tablet, var(--mc-login-text-align, center)); } .mc-login-logo img { max-width: var(--mc-login-logo-width-tablet, var(--mc-login-logo-width-desktop, 160px)); } .mc-login-title, .mc-login-subtitle { text-align: var(--mc-login-text-align-tablet, var(--mc-login-text-align, center)); } .mc-login-reg-notice { text-align: var(--mc-login-reg-notice-align-tablet, var(--mc-login-reg-notice-align, left)); font-size: var(--mc-login-reg-notice-size-tablet, var(--mc-login-reg-notice-size, 12px)); font-weight: var(--mc-login-reg-notice-weight-tablet, var(--mc-login-reg-notice-weight, 400)); } } @media (max-width: 600px) { .mc-login-wrapper { padding-left: 16px; padding-right: 16px; } .mc-login-card { padding: 32px 28px 28px; } } /* Responsive — Mobile */ @media (max-width: 767px) { .mc-login-logo { text-align: var(--mc-login-text-align-mobile, var(--mc-login-text-align-tablet, var(--mc-login-text-align, center))); } .mc-login-logo img { max-width: var(--mc-login-logo-width-mobile, var(--mc-login-logo-width-tablet, var(--mc-login-logo-width-desktop, 160px))); } .mc-login-title, .mc-login-subtitle { text-align: var(--mc-login-text-align-mobile, var(--mc-login-text-align-tablet, var(--mc-login-text-align, center))); } .mc-login-reg-notice { text-align: var(--mc-login-reg-notice-align-mobile, var(--mc-login-reg-notice-align-tablet, var(--mc-login-reg-notice-align, left))); font-size: var(--mc-login-reg-notice-size-mobile, var(--mc-login-reg-notice-size-tablet, var(--mc-login-reg-notice-size, 12px))); font-weight: var(--mc-login-reg-notice-weight-mobile, var(--mc-login-reg-notice-weight-tablet, var(--mc-login-reg-notice-weight, 400))); } } @media (max-width: 480px) { .mc-login-wrapper { padding-left: 12px; padding-right: 12px; } .mc-login-card { padding: 28px 20px 24px; } .mc-login-otp-inputs { gap: 6px; } .mc-login-otp-digit { width: 42px; height: 50px; font-size: 20px; border-width: 1px; } .mc-login-otp-dash { font-size: 16px; padding: 0; } } /* Responsive — Very small */ @media (max-width: 380px) { .mc-login-otp-inputs { gap: 4px; } .mc-login-otp-digit { width: 38px; height: 48px; font-size: 20px; } } /* Admin bar offset for login page */ .admin-bar .mc-login-wrapper { min-height: calc(100dvh - 32px); } @media (max-width: 782px) { .admin-bar .mc-login-wrapper { min-height: calc(100dvh - 46px); } }