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
15 KiB
CSS
1 line
15 KiB
CSS
[data-theme=mocha],:root{--ctp-rosewater: #f5e0dc;--ctp-flamingo: #f2cdcd;--ctp-pink: #f5c2e7;--ctp-mauve: #cba6f7;--ctp-red: #f38ba8;--ctp-maroon: #eba0ac;--ctp-peach: #fab387;--ctp-yellow: #f9e2af;--ctp-green: #a6e3a1;--ctp-teal: #94e2d5;--ctp-sky: #89dceb;--ctp-sapphire: #74c7ec;--ctp-blue: #89b4fa;--ctp-lavender: #b4befe;--ctp-text: #cdd6f4;--ctp-subtext1: #bac2de;--ctp-subtext0: #a6adc8;--ctp-overlay2: #9399b2;--ctp-overlay1: #7f849c;--ctp-overlay0: #6c7086;--ctp-surface2: #585b70;--ctp-surface1: #45475a;--ctp-surface0: #313244;--ctp-base: #1e1e2e;--ctp-mantle: #181825;--ctp-crust: #11111b;--color-bg: var(--ctp-base);--color-bg-elevated: var(--ctp-mantle);--color-bg-sunken: var(--ctp-crust);--color-surface: var(--ctp-surface0);--color-surface-hover: var(--ctp-surface1);--color-surface-active: var(--ctp-surface2);--color-text: var(--ctp-text);--color-text-secondary: var(--ctp-subtext1);--color-text-muted: var(--ctp-subtext0);--color-primary: var(--ctp-blue);--color-success: var(--ctp-green);--color-warning: var(--ctp-yellow);--color-error: var(--ctp-red);--color-accent: var(--ctp-mauve);--color-border: var(--ctp-surface1);--color-overlay: var(--ctp-overlay0);--color-felt: var(--ctp-green);--color-card: var(--ctp-text);--color-bounty: var(--ctp-pink);--color-prize: var(--ctp-yellow);--color-chip: var(--ctp-peach);--color-clock: var(--ctp-sapphire);--color-break: var(--ctp-teal);--color-elimination: var(--ctp-red)}[data-theme=latte]{--ctp-rosewater: #dc8a78;--ctp-flamingo: #dd7878;--ctp-pink: #ea76cb;--ctp-mauve: #8839ef;--ctp-red: #d20f39;--ctp-maroon: #e64553;--ctp-peach: #fe640b;--ctp-yellow: #df8e1d;--ctp-green: #40a02b;--ctp-teal: #179299;--ctp-sky: #04a5e5;--ctp-sapphire: #209fb5;--ctp-blue: #1e66f5;--ctp-lavender: #7287fd;--ctp-text: #4c4f69;--ctp-subtext1: #5c5f77;--ctp-subtext0: #6c6f85;--ctp-overlay2: #7c7f93;--ctp-overlay1: #8c8fa1;--ctp-overlay0: #9ca0b0;--ctp-surface2: #acb0be;--ctp-surface1: #bcc0cc;--ctp-surface0: #ccd0da;--ctp-base: #eff1f5;--ctp-mantle: #e6e9ef;--ctp-crust: #dce0e8}:root{--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.75;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3);--transition-fast: .1s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--touch-target: 48px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}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;scrollbar-gutter:stable}body{min-height:100dvh;color:var(--color-text);background-color:var(--color-bg)}button,a,input,select,textarea,[role=button],[role=tab],[role=menuitem]{touch-action:manipulation}.touch-target,button,[role=button],[role=tab]{min-height:var(--touch-target);min-width:var(--touch-target)}button:active,[role=button]:active,[role=tab]:active,.touch-target:active{transform:scale(.97);opacity:.9;transition:transform var(--transition-fast),opacity var(--transition-fast)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}::-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)}*{scrollbar-width:thin;scrollbar-color:var(--color-surface-active) var(--color-bg)}.font-mono{font-family:var(--font-mono)}.timer,.number,.blinds,.chips,.currency{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.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}.header.svelte-1elxaub{position:fixed;top:0;left:0;right:0;z-index:100;background-color:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.header-inner.svelte-1elxaub{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-4);max-width:1400px;margin:0 auto;min-height:var(--touch-target)}.header-clock.svelte-1elxaub{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.clock-time.svelte-1elxaub{font-size:var(--text-2xl);font-weight:700;color:var(--color-clock);letter-spacing:.02em}.header-clock.urgent.svelte-1elxaub .clock-time:where(.svelte-1elxaub){color:var(--color-error);animation:svelte-1elxaub-pulse-urgent 1s ease-in-out infinite}.header-clock.paused.svelte-1elxaub .clock-time:where(.svelte-1elxaub){opacity:.6}.header-clock.on-break.svelte-1elxaub .clock-time:where(.svelte-1elxaub){color:var(--color-break)}@keyframes svelte-1elxaub-pulse-urgent{0%,to{opacity:1}50%{opacity:.5}}.status-badge.svelte-1elxaub{font-size:var(--text-xs);font-weight:700;padding:2px var(--space-2);border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.05em}.paused-badge.svelte-1elxaub{background-color:color-mix(in srgb,var(--ctp-peach) 20%,transparent);color:var(--ctp-peach);animation:svelte-1elxaub-pulse-paused 2s ease-in-out infinite}@keyframes svelte-1elxaub-pulse-paused{0%,to{opacity:1}50%{opacity:.5}}.break-badge.svelte-1elxaub{background-color:color-mix(in srgb,var(--color-break) 20%,transparent);color:var(--color-break)}.header-level.svelte-1elxaub{display:flex;align-items:baseline;gap:var(--space-2);min-width:0}.level-number.svelte-1elxaub{font-size:var(--text-lg);font-weight:700;color:var(--color-text);flex-shrink:0}.level-name.svelte-1elxaub{font-size:var(--text-sm);color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-blinds.svelte-1elxaub{display:flex;align-items:baseline;gap:var(--space-2);flex-shrink:0}.blinds-label.svelte-1elxaub{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase}.blinds-value.svelte-1elxaub{font-size:var(--text-lg);font-weight:600;color:var(--color-text)}.ante-value.svelte-1elxaub{font-size:var(--text-sm);color:var(--color-text-secondary)}.header-players.svelte-1elxaub{display:flex;align-items:baseline;gap:var(--space-1);flex-shrink:0}.player-count.svelte-1elxaub{font-size:var(--text-lg);font-weight:600;color:var(--color-success)}.player-label.svelte-1elxaub{font-size:var(--text-xs);color:var(--color-text-muted)}.header-empty.svelte-1elxaub{display:flex;align-items:center;gap:var(--space-3);width:100%}.brand.svelte-1elxaub{font-size:var(--text-xl);font-weight:700;color:var(--color-primary)}.no-data.svelte-1elxaub{font-size:var(--text-sm);color:var(--color-text-muted)}.hide-mobile.svelte-1elxaub{display:none}@media(min-width:768px){.hide-mobile.svelte-1elxaub{display:inline}.clock-time.svelte-1elxaub{font-size:var(--text-3xl)}.header-inner.svelte-1elxaub{padding:var(--space-3) var(--space-6);gap:var(--space-6)}}.bottom-tabs.svelte-1pn9dat{position:fixed;bottom:0;left:0;right:0;z-index:90;display:flex;align-items:stretch;justify-content:space-around;background-color:var(--color-bg-elevated);border-top:1px solid var(--color-border);padding-bottom:env(safe-area-inset-bottom,0)}@media(min-width:768px){.bottom-tabs.svelte-1pn9dat{display:none}}.tab-item.svelte-1pn9dat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;min-height:var(--touch-target);padding:var(--space-1) var(--space-2);text-decoration:none;color:var(--color-text-muted);transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.tab-item.active.svelte-1pn9dat{color:var(--color-primary)}.tab-item.svelte-1pn9dat:hover:not(.active){color:var(--color-text-secondary)}.tab-icon.svelte-1pn9dat{font-size:var(--text-xl);line-height:1}.tab-label.svelte-1pn9dat{font-size:10px;font-weight:500;line-height:1;white-space:nowrap}.sidebar.svelte-129hoe0{display:none;position:fixed;top:0;left:0;bottom:0;width:220px;background-color:var(--color-bg-elevated);border-right:1px solid var(--color-border);z-index:80;padding-top:var(--space-4);overflow-y:auto}@media(min-width:768px){.sidebar.svelte-129hoe0{display:flex;flex-direction:column}}.sidebar-brand.svelte-129hoe0{padding:var(--space-4) var(--space-6);margin-bottom:var(--space-4)}.brand-name.svelte-129hoe0{font-size:var(--text-2xl);font-weight:700;color:var(--color-primary);letter-spacing:-.02em}.sidebar-nav.svelte-129hoe0{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-1)}.nav-item.svelte-129hoe0{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);min-height:var(--touch-target);text-decoration:none;color:var(--color-text-secondary);border-radius:0;transition:background-color var(--transition-fast),color var(--transition-fast)}.nav-item.svelte-129hoe0:hover:not(.active){background-color:var(--color-surface);color:var(--color-text)}.nav-item.active.svelte-129hoe0{color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 10%,transparent);border-right:3px solid var(--color-primary)}.nav-icon.svelte-129hoe0{font-size:var(--text-xl);width:1.5em;text-align:center;flex-shrink:0}.nav-label.svelte-129hoe0{font-size:var(--text-base);font-weight:500}.fab-backdrop.svelte-6hll69{position:fixed;top:0;right:0;bottom:0;left:0;z-index:94;background-color:#0006;animation:svelte-6hll69-fade-in .15s ease-out}@keyframes svelte-6hll69-fade-in{0%{opacity:0}to{opacity:1}}.fab-container.svelte-6hll69{position:fixed;bottom:calc(var(--touch-target) + var(--space-6) + env(safe-area-inset-bottom,0px));right:var(--space-4);z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-3)}@media(min-width:768px){.fab-container.svelte-6hll69{bottom:var(--space-6);right:var(--space-6)}}.fab-actions.svelte-6hll69{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2)}.fab-action.svelte-6hll69{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background-color:var(--color-surface);border:1px solid var(--action-color);border-radius:var(--radius-full);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-md);animation:svelte-6hll69-fab-action-in .2s ease-out backwards;animation-delay:var(--action-delay);transition:transform var(--transition-fast),background-color var(--transition-fast)}.fab-action.svelte-6hll69:hover{background-color:var(--color-surface-hover)}@keyframes svelte-6hll69-fab-action-in{0%{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.fab-action-icon.svelte-6hll69{font-size:var(--text-lg);color:var(--action-color);width:1.5em;text-align:center}.fab-action-label.svelte-6hll69{font-size:var(--text-sm);font-weight:600;color:var(--color-text);white-space:nowrap}.fab-main.svelte-6hll69{width:56px;height:56px;min-height:56px;min-width:56px;border-radius:var(--radius-full);background-color:var(--color-primary);color:var(--color-bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:transform var(--transition-normal),background-color var(--transition-fast)}.fab-main.svelte-6hll69:hover{background-color:color-mix(in srgb,var(--color-primary) 90%,white)}.fab-main.expanded.svelte-6hll69{background-color:var(--color-surface-active);transform:rotate(45deg)}.fab-icon.svelte-6hll69{font-size:var(--text-2xl);font-weight:300;line-height:1}.toast-container.svelte-1cpok13{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none;bottom:calc(var(--touch-target) + var(--space-8) + var(--space-4));left:var(--space-4);right:var(--space-4);align-items:center}@media(min-width:768px){.toast-container.svelte-1cpok13{top:var(--space-4);right:var(--space-4);bottom:auto;left:auto;align-items:flex-end;max-width:400px}}.toast.svelte-1cpok13{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background-color:var(--color-surface);border:1px solid var(--toast-color);border-left:4px solid var(--toast-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);pointer-events:auto;width:100%;max-width:400px;animation:svelte-1cpok13-toast-slide-in .2s ease-out}@keyframes svelte-1cpok13-toast-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.toast-icon.svelte-1cpok13{flex-shrink:0;font-size:var(--text-lg);color:var(--toast-color);width:1.5em;text-align:center}.toast-message.svelte-1cpok13{flex:1;font-size:var(--text-sm);color:var(--color-text);line-height:var(--leading-normal)}.toast-dismiss.svelte-1cpok13{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:28px;min-width:28px;padding:0;font-size:var(--text-lg);color:var(--color-text-muted);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:color var(--transition-fast)}.toast-dismiss.svelte-1cpok13:hover{color:var(--color-text)}.tournament-tabs.svelte-ldvvqt{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:var(--space-1);padding:var(--space-2) var(--space-4);background-color:var(--color-bg-sunken);border-bottom:1px solid var(--color-border)}.tournament-tabs.svelte-ldvvqt::-webkit-scrollbar{display:none}.tournament-tab.svelte-ldvvqt{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:none;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);flex-shrink:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.tournament-tab.svelte-ldvvqt:hover:not(.active){background-color:var(--color-surface);color:var(--color-text)}.tournament-tab.active.svelte-ldvvqt{background-color:var(--color-surface);border-color:var(--color-primary);color:var(--color-text);font-weight:600}.status-dot.svelte-ldvvqt{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.tab-name.svelte-ldvvqt{overflow:hidden;text-overflow:ellipsis;max-width:150px}.app-shell.svelte-12qhfyh{display:flex;flex-direction:column;min-height:100dvh}.main-content.svelte-12qhfyh{flex:1;padding-top:calc(var(--touch-target) + var(--space-2));padding-bottom:calc(var(--touch-target) + var(--space-4) + env(safe-area-inset-bottom,0px));overflow-y:auto}@media(min-width:768px){.main-content.svelte-12qhfyh{margin-left:220px;padding-bottom:var(--space-4)}}.redirect-screen.svelte-12qhfyh{display:flex;align-items:center;justify-content:center;min-height:100dvh;color:var(--color-text-muted)}
|