diff --git a/client/src/components/StatsPanel.css b/client/src/components/StatsPanel.css index 0d7fe61..bbb1add 100644 --- a/client/src/components/StatsPanel.css +++ b/client/src/components/StatsPanel.css @@ -1,9 +1,13 @@ +/* ============================================ + Minecraft-Themed Stats Panel + ============================================ */ + .stats-panel { padding: 1.5rem; - background: #0f172a; - border-radius: 0.5rem; + background: #2c2c2c; height: 100%; overflow-y: auto; + font-family: 'Silkscreen', 'Courier New', monospace; } .stats-header { @@ -18,43 +22,47 @@ .stats-header h2 { font-size: 1.5rem; font-weight: 700; - color: #f9fafb; + color: #ffff55; margin: 0; + text-shadow: 2px 2px 0 #1a1a1a; } .time-filter { display: flex; - gap: 0.5rem; - background: #1e293b; + gap: 0.25rem; + background: #3b3b3b; padding: 0.25rem; - border-radius: 0.5rem; + border: 2px solid #1a1a1a; } .time-filter button { padding: 0.5rem 1rem; - background: transparent; - border: none; - border-radius: 0.375rem; - color: #94a3b8; - font-weight: 600; + background: #6b6b6b; + border: 2px solid #1a1a1a; + color: #e0e0e0; + font-weight: 700; cursor: pointer; - transition: all 0.2s; + transition: all 0.1s; + font-family: 'Silkscreen', 'Courier New', monospace; + text-shadow: 1px 1px 0 #1a1a1a; + box-shadow: inset 0 -2px 0 #444, inset 0 2px 0 #888; } .time-filter button:hover { - color: #e5e7eb; - background: #334155; + background: #7b7b7b; + box-shadow: inset 0 -2px 0 #555, inset 0 2px 0 #999; } .time-filter button.active { - background: #3b82f6; + background: #4a8c2a; color: white; + box-shadow: inset 0 2px 0 #6ab04c, inset 0 -2px 0 #2d6b1a; } .loading { text-align: center; padding: 2rem; - color: #94a3b8; + color: #a0a0a0; font-size: 0.875rem; } @@ -66,33 +74,36 @@ .turtle-stats h3 { font-size: 1.125rem; font-weight: 600; - color: #f9fafb; + color: #55ff55; margin-bottom: 1rem; + text-shadow: 1px 1px 0 #1a1a1a; } .stat-section { - background: #1e293b; - border-radius: 0.5rem; + background: #3b3b3b; + border: 2px solid #1a1a1a; padding: 1.5rem; + box-shadow: inset 0 -2px 0 #2a2a2a, inset 0 2px 0 #555; } .total-mined { text-align: center; margin-bottom: 1.5rem; padding-bottom: 1.5rem; - border-bottom: 1px solid #334155; + border-bottom: 2px solid #4b4b4b; } .stat-value { font-size: 3rem; font-weight: 700; - color: #3b82f6; + color: #55ffff; line-height: 1; + text-shadow: 2px 2px 0 #1a1a1a; } .stat-label { font-size: 0.875rem; - color: #94a3b8; + color: #a0a0a0; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; @@ -101,7 +112,7 @@ .blocks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 1rem; + gap: 0.75rem; } .block-stat { @@ -109,14 +120,15 @@ align-items: center; gap: 0.75rem; padding: 0.75rem; - background: #0f172a; - border-radius: 0.375rem; - transition: all 0.2s; + background: #2c2c2c; + border: 2px solid #1a1a1a; + transition: all 0.1s; + box-shadow: inset 0 -1px 0 #222, inset 0 1px 0 #444; } .block-stat:hover { - background: #1e293b; - transform: translateY(-2px); + background: #4b4b4b; + box-shadow: inset 0 -1px 0 #333, inset 0 1px 0 #666; } .block-emoji { @@ -131,13 +143,13 @@ .block-name { font-size: 0.875rem; font-weight: 600; - color: #e5e7eb; + color: #e0e0e0; margin-bottom: 0.25rem; } .block-count { font-size: 0.75rem; - color: #10b981; + color: #55ff55; font-weight: 600; } @@ -149,14 +161,16 @@ .leaderboard h3 { font-size: 1.125rem; font-weight: 600; - color: #f9fafb; + color: #ffaa00; margin-bottom: 1rem; + text-shadow: 1px 1px 0 #1a1a1a; } .leaderboard-list { - background: #1e293b; - border-radius: 0.5rem; - padding: 1rem; + background: #3b3b3b; + border: 2px solid #1a1a1a; + padding: 0.75rem; + box-shadow: inset 0 -2px 0 #2a2a2a, inset 0 2px 0 #555; } .leaderboard-item { @@ -165,9 +179,10 @@ gap: 1rem; padding: 0.75rem; margin-bottom: 0.5rem; - background: #0f172a; - border-radius: 0.375rem; - transition: all 0.2s; + background: #2c2c2c; + border: 2px solid #1a1a1a; + transition: all 0.1s; + box-shadow: inset 0 -1px 0 #222, inset 0 1px 0 #444; } .leaderboard-item:last-child { @@ -175,20 +190,19 @@ } .leaderboard-item:hover { - background: #1e293b; - transform: translateX(4px); + background: #4b4b4b; } .leaderboard-item.rank-1 { - border-left: 3px solid #fbbf24; + border-left: 4px solid #ffaa00; } .leaderboard-item.rank-2 { - border-left: 3px solid #9ca3af; + border-left: 4px solid #a0a0a0; } .leaderboard-item.rank-3 { - border-left: 3px solid #cd7f32; + border-left: 4px solid #cd7f32; } .rank { @@ -196,6 +210,8 @@ font-weight: 700; min-width: 3rem; text-align: center; + color: #ffff55; + text-shadow: 1px 1px 0 #1a1a1a; } .miner-info { @@ -205,27 +221,29 @@ .miner-name { font-size: 0.875rem; font-weight: 600; - color: #e5e7eb; + color: #e0e0e0; margin-bottom: 0.25rem; } .miner-stats { font-size: 0.75rem; - color: #94a3b8; + color: #a0a0a0; } .miner-score { font-size: 1.25rem; font-weight: 700; - color: #3b82f6; + color: #55ffff; + text-shadow: 1px 1px 0 #1a1a1a; } /* All Turtles Overview */ .all-turtles-stats h3 { font-size: 1.125rem; font-weight: 600; - color: #f9fafb; + color: #55ffff; margin-bottom: 1rem; + text-shadow: 1px 1px 0 #1a1a1a; } .turtles-summary-grid { @@ -235,16 +253,16 @@ } .turtle-summary-card { - background: #1e293b; - border-radius: 0.5rem; + background: #3b3b3b; + border: 2px solid #1a1a1a; padding: 1rem; - transition: all 0.2s; + transition: all 0.1s; + box-shadow: inset 0 -2px 0 #2a2a2a, inset 0 2px 0 #555; } .turtle-summary-card:hover { - background: #334155; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + background: #4b4b4b; + box-shadow: inset 0 -2px 0 #333, inset 0 2px 0 #666; } .turtle-summary-header { @@ -253,19 +271,20 @@ align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.75rem; - border-bottom: 1px solid #334155; + border-bottom: 2px solid #4b4b4b; } .turtle-id { font-size: 0.875rem; font-weight: 600; - color: #e5e7eb; + color: #e0e0e0; } .turtle-total { font-size: 1.25rem; font-weight: 700; - color: #3b82f6; + color: #55ffff; + text-shadow: 1px 1px 0 #1a1a1a; } .turtle-top-blocks { @@ -278,8 +297,8 @@ align-items: center; gap: 0.25rem; padding: 0.375rem 0.5rem; - background: #0f172a; - border-radius: 0.25rem; + background: #2c2c2c; + border: 2px solid #1a1a1a; flex: 1; } @@ -290,7 +309,7 @@ .mini-count { font-size: 0.75rem; font-weight: 600; - color: #10b981; + color: #55ff55; } /* Empty State */ @@ -308,19 +327,19 @@ .empty-title { font-size: 1.25rem; font-weight: 600; - color: #e5e7eb; + color: #e0e0e0; margin-bottom: 0.5rem; } .empty-text { font-size: 0.875rem; - color: #94a3b8; + color: #a0a0a0; } .no-data { text-align: center; padding: 2rem; - color: #94a3b8; + color: #a0a0a0; font-size: 0.875rem; }