diff --git a/wallet-multichain-visualization.html b/wallet-multichain-visualization.html index 87a6115..773ed41 100644 --- a/wallet-multichain-visualization.html +++ b/wallet-multichain-visualization.html @@ -45,16 +45,13 @@ /* Chain Selector */ .chain-selector { display: flex; justify-content: center; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; } .chain-btn { - padding: 12px 24px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.1); + padding: 10px 18px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.3s; - display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: #e0e0e0; + display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #e0e0e0; } .chain-btn:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); } .chain-btn.active { border-color: var(--chain-color, #00d4ff); background: rgba(255,255,255,0.1); box-shadow: 0 0 20px rgba(var(--chain-rgb, 0,212,255), 0.3); } - .chain-btn .logo { - width: 28px; height: 28px; border-radius: 50%; display: flex; - align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; - } + .chain-btn .chain-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .chain-btn .count { background: rgba(0,0,0,0.3); padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; color: #888; } .chain-btn.active .count { background: var(--chain-color, #00d4ff); color: #000; } @@ -96,12 +93,7 @@ .amount.negative { color: #f87171; } .token-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; background: #555; } - /* Legend */ - .legend { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; font-size: 0.85rem; } - .legend-item { display: flex; align-items: center; gap: 6px; } - .legend-color { width: 14px; height: 14px; border-radius: 3px; } - - .warning-box { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 12px; padding: 14px 20px; margin-bottom: 24px; font-size: 0.85rem; display: flex; align-items: center; gap: 12px; } + .warning-box { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 10px 16px; font-size: 0.85rem; display: flex; align-items: center; gap: 10px; } /* Loading */ .loading { text-align: center; padding: 80px 20px; color: #888; } @@ -171,9 +163,9 @@ // Build chain buttons const chainButtons = [ `` ]; @@ -183,9 +175,9 @@ const rgb = hexToRgb(chain.color); chainButtons.push( `` ); } @@ -200,13 +192,6 @@