/* external-login.css — "Sign in with Discord" styles for the server-side Identity pages (/Account/Login). These pages render through App.razor's , which links only the *Client* scoped-CSS bundle (YGOVN2.Client.styles.css) — the Server project's scoped .razor.css is NOT delivered there. So component styles for Account pages must live in a globally-loaded stylesheet like this one (linked in App.razor), not in a .razor.css. Token-driven; the only raw brand color is via the --brand-discord token family (defined in design-tokens.css). Web-only: the Identity login page does not exist on MAUI/WPF. */ /* ── External-login section: "Or Login by:" divider (Login.razor) ───────────────── */ .external-login-section { margin-top: var(--space-5); } .external-login-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; } .external-login-divider::before, .external-login-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--color-border); } .external-login-divider__label { flex: 0 0 auto; color: var(--color-text-secondary); /* AA on the card surface */ font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: none; white-space: nowrap; } /* Centered provider row; flex-wrap now so future siblings (Google/Facebook) drop in cleanly. */ .external-login-providers { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } /* ── Discord button (DiscordLoginButton) — Style 1: Blurple fill, white mark + text ── */ .discord-login-form { display: flex; justify-content: center; } .discord-login-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; /* >= 44px touch target */ padding: var(--space-3) var(--space-5); border: none; border-radius: var(--radius-md); background: var(--brand-discord); color: #FFFFFF; /* white mark + text on Blurple (Discord-compliant) */ font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-tight); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } /* The mark wrapper carries the size + color so the SVG inherits via 1em / currentColor. */ .discord-login-btn__mark { display: inline-flex; font-size: 1.35em; /* logo a touch larger than the text */ color: #FFFFFF; } .discord-login-btn__text { white-space: nowrap; } /* States */ .discord-login-btn:hover { background: var(--brand-discord-hover); box-shadow: var(--shadow-md); } .discord-login-btn:active { background: var(--brand-discord-active); transform: translateY(1px); } .discord-login-btn:focus-visible { outline: none; box-shadow: var(--glow-focus); /* neon focus ring — chrome, not the mark */ } .discord-login-btn[disabled], .discord-login-btn.is-loading { opacity: 0.7; cursor: progress; } /* ── Google button (GoogleLoginButton) — white surface, neutral border, 4-color G + dark text ── Per Google brand guidelines the button is a light neutral surface (NOT a brand-color fill like Discord); the only brand color is in the multi-color "G" mark, which lives in the inline SVG. Token-driven via the --brand-google-* family in design-tokens.css. */ .google-login-form { display: flex; justify-content: center; } .google-login-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; /* >= 44px touch target, matches Discord button height */ padding: var(--space-3) var(--space-5); border: 1px solid var(--brand-google-border); border-radius: var(--radius-md); background: var(--brand-google-surface); color: var(--brand-google-text); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-tight); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } /* Mark wrapper sizes the inline SVG (a touch larger than the text). The G keeps its own colors. */ .google-login-btn__mark { display: inline-flex; font-size: 1.35em; } .google-login-btn__text { white-space: nowrap; } /* States */ .google-login-btn:hover { background: var(--brand-google-surface-hover); box-shadow: var(--shadow-md); } .google-login-btn:active { background: var(--brand-google-surface-hover); transform: translateY(1px); } .google-login-btn:focus-visible { outline: none; box-shadow: var(--glow-focus); /* neon focus ring — chrome, not the mark */ } .google-login-btn[disabled], .google-login-btn.is-loading { opacity: 0.7; cursor: progress; } /* Full-width on narrow screens for a bigger thumb target. */ @media (max-width: 575.98px) { .discord-login-form, .google-login-form { display: block; } .discord-login-btn, .google-login-btn { width: 100%; } }