Mikkel Georgsen
47e1f19edd
- SvelteKit SPA with adapter-static, prerender, SSR disabled - Catppuccin Mocha/Latte theme CSS with semantic color tokens - WebSocket client with auto-reconnect and exponential backoff - HTTP API client with JWT auth and 401 handling - Auth state store with localStorage persistence (Svelte 5 runes) - Tournament state store handling all WS message types (Svelte 5 runes) - PIN login page with numpad, 48px touch targets - Updated Makefile frontend target for real SvelteKit build Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 line
2.5 KiB
CSS
1 line
2.5 KiB
CSS
.login-container.svelte-1x05zx6{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:var(--space-4);background-color:var(--color-bg)}.login-card.svelte-1x05zx6{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}.logo.svelte-1x05zx6{text-align:center}.logo.svelte-1x05zx6 h1:where(.svelte-1x05zx6){font-size:var(--text-4xl);font-weight:700;color:var(--color-primary);letter-spacing:-.02em}.subtitle.svelte-1x05zx6{color:var(--color-text-secondary);font-size:var(--text-sm);margin-top:var(--space-1)}.pin-display.svelte-1x05zx6{display:flex;gap:var(--space-3);padding:var(--space-4) 0}.pin-dot.svelte-1x05zx6{width:16px;height:16px;border-radius:var(--radius-full);border:2px solid var(--color-surface-active);background-color:transparent;transition:background-color var(--transition-fast),border-color var(--transition-fast)}.pin-dot.filled.svelte-1x05zx6{background-color:var(--color-primary);border-color:var(--color-primary)}.error-message.svelte-1x05zx6{color:var(--color-error);font-size:var(--text-sm);text-align:center;padding:var(--space-2) var(--space-4);background-color:color-mix(in srgb,var(--color-error) 10%,transparent);border-radius:var(--radius-md);width:100%}.numpad.svelte-1x05zx6{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);width:100%}.numpad-btn.svelte-1x05zx6{display:flex;align-items:center;justify-content:center;height:64px;font-size:var(--text-2xl);font-weight:600;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--transition-fast)}.numpad-btn.svelte-1x05zx6:hover:not(:disabled){background-color:var(--color-surface-hover)}.numpad-btn.svelte-1x05zx6:disabled{opacity:.4;cursor:not-allowed;transform:none}.numpad-fn.svelte-1x05zx6{font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary)}.submit-btn.svelte-1x05zx6{width:100%;height:56px;font-size:var(--text-lg);font-weight:600;color:var(--color-bg);background-color:var(--color-primary);border:none;border-radius:var(--radius-lg);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--transition-fast),opacity var(--transition-fast)}.submit-btn.svelte-1x05zx6:hover:not(:disabled){opacity:.9}.submit-btn.svelte-1x05zx6:disabled{opacity:.4;cursor:not-allowed;transform:none}
|