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>
138 lines
2.8 KiB
CSS
138 lines
2.8 KiB
CSS
@import '$lib/theme/catppuccin.css';
|
|
|
|
/* ============================================
|
|
Reset
|
|
============================================ */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
Base styles
|
|
============================================ */
|
|
html {
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
line-height: var(--leading-normal);
|
|
color: var(--color-text);
|
|
background-color: var(--color-bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
/* Prevent layout shift from scrollbar */
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
body {
|
|
min-height: 100dvh;
|
|
color: var(--color-text);
|
|
background-color: var(--color-bg);
|
|
}
|
|
|
|
/* ============================================
|
|
Touch targets & interaction
|
|
Poker room: TD using phone with one hand
|
|
============================================ */
|
|
button,
|
|
a,
|
|
input,
|
|
select,
|
|
textarea,
|
|
[role='button'],
|
|
[role='tab'],
|
|
[role='menuitem'] {
|
|
/* Prevent double-tap zoom on mobile */
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Minimum 48px touch target for all interactive elements */
|
|
.touch-target,
|
|
button,
|
|
[role='button'],
|
|
[role='tab'] {
|
|
min-height: var(--touch-target);
|
|
min-width: var(--touch-target);
|
|
}
|
|
|
|
/* Active/pressed state for tactile feedback */
|
|
button:active,
|
|
[role='button']:active,
|
|
[role='tab']:active,
|
|
.touch-target:active {
|
|
transform: scale(0.97);
|
|
opacity: 0.9;
|
|
transition: transform var(--transition-fast), opacity var(--transition-fast);
|
|
}
|
|
|
|
/* Focus visible for keyboard accessibility */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Remove default focus ring for mouse/touch users */
|
|
:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
/* ============================================
|
|
Scrollbar styling (dark theme)
|
|
============================================ */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-surface-active);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-overlay);
|
|
}
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-surface-active) var(--color-bg);
|
|
}
|
|
|
|
/* ============================================
|
|
Typography helpers
|
|
============================================ */
|
|
.font-mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Timer/number display — always monospace */
|
|
.timer,
|
|
.number,
|
|
.blinds,
|
|
.chips,
|
|
.currency {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ============================================
|
|
Common utility classes
|
|
============================================ */
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|