forked from CSGOWTF/csgowtf
vikingowl
ee233bb6fb
Complete overhaul of all 7 match sub-pages (Overview, Flashes, Economy, Details, Weapons, Damage, Chat) with consistent neon design system. Key changes: - Update Card/Tabs components with void backgrounds and neon accents - Add decorative blur orbs and grid pattern to match layout hero - Convert DaisyUI classes to custom Tailwind with neon colors - Update chart components with neon-themed tooltips and grid styling - Add RoundTimeline neon glow on selection with void-themed tooltips Puns added throughout: - "Hall of Shame" for players who flash teammates more than enemies - "Needs Therapy Award" for high team damage - "MVP (Most Violent Player)" badge - "The Poverty Round", "YOLO Buy" economy labels - "Multi-Threat Level", "Can't Touch This", "Molotov Mixologist" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
50 lines
1.1 KiB
Svelte
50 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
variant?: 'default' | 'elevated' | 'interactive';
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
class?: string;
|
|
onclick?: () => void;
|
|
children: Snippet;
|
|
}
|
|
|
|
let {
|
|
variant = 'default',
|
|
padding = 'md',
|
|
class: className = '',
|
|
onclick,
|
|
children
|
|
}: Props = $props();
|
|
|
|
const baseClasses = 'bg-void-light border border-white/10 rounded-xl transition-all duration-300';
|
|
|
|
const variantClasses = {
|
|
default: 'shadow-sm hover:shadow-[0_0_20px_rgba(0,212,255,0.05)]',
|
|
elevated: 'shadow-lg shadow-black/20 hover:shadow-[0_0_30px_rgba(0,212,255,0.1)]',
|
|
interactive:
|
|
'cursor-pointer hover:border-neon-blue/50 hover:shadow-[0_0_20px_rgba(0,212,255,0.15)] hover:-translate-y-0.5'
|
|
};
|
|
|
|
const paddingClasses = {
|
|
none: '',
|
|
sm: 'p-3',
|
|
md: 'p-4',
|
|
lg: 'p-6'
|
|
};
|
|
|
|
const classes =
|
|
`${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${className}` +
|
|
(onclick ? ' cursor-pointer' : '');
|
|
</script>
|
|
|
|
{#if onclick}
|
|
<button class={classes} {onclick}>
|
|
{@render children()}
|
|
</button>
|
|
{:else}
|
|
<div class={classes}>
|
|
{@render children()}
|
|
</div>
|
|
{/if}
|