diff --git a/css/main.css b/css/main.css index fbcfd12..461e011 100644 --- a/css/main.css +++ b/css/main.css @@ -1399,8 +1399,6 @@ body { text-overflow: ellipsis; } - - /* Transaction Filter and Pagination Controls */ .transaction-controls { background: var(--surface-color); @@ -1659,7 +1657,6 @@ body { } } - .wallet-recovered h3 { display: flex; align-items: center; @@ -2480,12 +2477,18 @@ sm-popup::part(popup) { .balance-header { display: flex; - flex-direction: column; + flex-direction: row; align-items: center; - text-align: center; + justify-content: center; + position: relative; margin-bottom: 1.5rem; } +.balance-header .share-btn { + position: absolute; + right: 0; +} + .balance-header h3 { margin: 0 0 0.5rem 0; color: var(--primary-color); @@ -3246,7 +3249,6 @@ sm-popup::part(popup) { width: auto; } - @media (max-width: 768px) { .modern-popup-container { max-height: 75vh !important; @@ -4060,3 +4062,207 @@ sm-popup::part(popup) { margin-bottom: 0; } } + +/* ===== SEARCH TYPE TABS ===== */ +.search-type-tabs { + display: flex; + gap: 0.5rem; + margin-bottom: 1rem; + background: var(--bg-secondary); + border-radius: var(--border-radius); + padding: 0.25rem; +} + +.tab-btn { + flex: 1; + padding: 0.75rem 1rem; + border: none; + background: transparent; + color: var(--text-secondary); + font-size: 0.875rem; + font-weight: 500; + border-radius: calc(var(--border-radius) - 0.25rem); + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.tab-btn:hover { + background: var(--surface-color); + color: var(--text-primary); +} + +.tab-btn.active { + background: var(--primary-color); + color: white; + box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2); +} + +.search-section { + transition: all 0.3s ease; +} + +/* ===== SHARE BUTTON STYLES ===== */ +.share-btn { + background: var(--accent-color); + color: white; + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease; + font-size: 0.875rem; +} + +.share-btn:hover { + background: var(--accent-dark); + transform: scale(1.05); +} + +.balance-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.balance-header h3 { + margin: 0; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.transaction-details-header { + display: flex; + align-items: center; + justify-content: center; + position: relative; + margin-bottom: 1.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border-color); +} + +.transaction-details-header .share-btn { + position: absolute; + right: 0; +} + +.transaction-details-header h3 { + margin: 0; + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-primary); +} + +/* ===== TRANSACTION DETAILS CONTENT ===== */ +.transaction-details-content { + display: grid; + gap: 1rem; +} + +.tx-detail-card { + background: var(--surface-color); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: 1rem; + transition: all 0.2s ease; +} + +.tx-detail-card:hover { + border-color: var(--primary-color); + box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1); +} + +.tx-detail-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 0; + border-bottom: 1px solid var(--border-color); +} + +.tx-detail-row:last-child { + border-bottom: none; +} + +.tx-detail-label { + font-weight: 600; + color: var(--text-secondary); + display: flex; + align-items: center; + gap: 0.5rem; + min-width: 120px; +} + +.tx-detail-value { + color: var(--text-primary); + font-family: var(--font-mono); + word-break: break-all; + text-align: right; + flex: 1; + margin-left: 1rem; +} + +.tx-detail-value.success { + color: var(--success-color); + font-weight: 600; +} + +.tx-detail-value.failed { + color: var(--error-color); + font-weight: 600; +} + +.tx-detail-value.amount { + font-size: 1.125rem; + font-weight: 700; + color: var(--primary-color); +} + +/* ===== MOBILE RESPONSIVE FOR NEW ELEMENTS ===== */ +@media (max-width: 768px) { + .search-type-tabs { + flex-direction: column; + gap: 0.25rem; + } + + .tab-btn { + justify-content: flex-start; + padding: 0.625rem 1rem; + } + + .balance-header, + .transaction-details-header { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .share-btn { + align-self: flex-end; + } + + .tx-detail-row { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .tx-detail-value { + text-align: left; + margin-left: 0; + } + + .tx-detail-label { + min-width: auto; + } +} diff --git a/index.html b/index.html index a5c3434..45aa211 100644 --- a/index.html +++ b/index.html @@ -92,44 +92,105 @@
- Check the XRP balance and transaction history for any Ripple - address -
+Check XRP balance or view transaction details