Mikkel Georgsen
7f91301efa
- Persistent header: clock countdown, level, blinds, player count (red pulse <10s, PAUSED/BREAK badges) - Bottom tab bar (mobile): Overview, Players, Tables, Financials, More with 48px touch targets - Desktop sidebar (>=768px): vertical nav replacing bottom tabs - FAB: expandable quick actions (Bust, Buy In, Rebuy, Add-On, Pause/Resume) with backdrop - Toast notification system: success/info/warning/error with auto-dismiss and stacking - DataTable: sortable columns, sticky header, search/filter, mobile swipe actions, skeleton loading - Multi-tournament tabs: horizontal scrollable selector when 2+ tournaments active - Loading components: spinner (sm/md/lg), skeleton rows, full-page overlay - Root layout: auth guard, responsive shell (mobile bottom tabs / desktop sidebar) - Route pages: overview, players, tables, financials, more with placeholder content Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 line
3.3 KiB
CSS
1 line
3.3 KiB
CSS
.data-table-wrapper.svelte-16k18c8{width:100%;overflow:hidden}.table-search.svelte-16k18c8{padding:var(--space-3) 0}.search-input.svelte-16k18c8{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast);min-height:var(--touch-target)}.search-input.svelte-16k18c8:focus{border-color:var(--color-primary)}.search-input.svelte-16k18c8::placeholder{color:var(--color-text-muted)}.table-scroll.svelte-16k18c8{overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table.svelte-16k18c8{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.data-table.svelte-16k18c8 thead:where(.svelte-16k18c8){position:sticky;top:0;z-index:2}.data-table.svelte-16k18c8 th:where(.svelte-16k18c8){padding:var(--space-2) var(--space-3);font-weight:600;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);background-color:var(--color-bg-elevated);border-bottom:2px solid var(--color-border);white-space:nowrap;-webkit-user-select:none;user-select:none}.data-table.svelte-16k18c8 th.sortable:where(.svelte-16k18c8){cursor:pointer}.data-table.svelte-16k18c8 th.sortable:where(.svelte-16k18c8):hover{color:var(--color-text)}.th-content.svelte-16k18c8{display:inline-flex;align-items:center;gap:var(--space-1)}.sort-indicator.svelte-16k18c8{font-size:8px;color:var(--color-text-muted);opacity:.3}.sort-indicator.active.svelte-16k18c8{opacity:1;color:var(--color-primary)}.data-table.svelte-16k18c8 td:where(.svelte-16k18c8){padding:var(--space-2) var(--space-3);color:var(--color-text);border-bottom:1px solid var(--color-border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.data-row.svelte-16k18c8{min-height:var(--touch-target);transition:background-color var(--transition-fast)}.data-row.svelte-16k18c8:hover{background-color:var(--color-surface)}.data-row.clickable.svelte-16k18c8{cursor:pointer}.data-row.clickable.svelte-16k18c8:active{background-color:var(--color-surface-hover)}.empty-state.svelte-16k18c8{text-align:center;padding:var(--space-12) var(--space-4);color:var(--color-text-muted);font-style:italic}.skeleton-row.svelte-16k18c8 td:where(.svelte-16k18c8){padding:var(--space-3)}.skeleton-cell.svelte-16k18c8{height:16px;background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-surface-hover) 50%,var(--color-surface) 75%);background-size:200% 100%;animation:svelte-16k18c8-skeleton-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}@keyframes svelte-16k18c8-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.swipe-actions-row.svelte-16k18c8 td:where(.svelte-16k18c8){padding:0;border-bottom:none}.swipe-actions.svelte-16k18c8{display:flex;justify-content:flex-end;gap:var(--space-1);padding:var(--space-1);background-color:var(--color-bg-sunken)}.swipe-action-btn.svelte-16k18c8{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:600;color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap}.hide-mobile.svelte-16k18c8{display:none}@media(min-width:768px){.hide-mobile.svelte-16k18c8{display:table-cell}.data-table.svelte-16k18c8 td:where(.svelte-16k18c8){max-width:300px}}
|