diff --git a/css/main.css b/css/main.css index 27f4d88..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; @@ -1839,9 +1836,10 @@ sm-popup::part(popup) { background: var(--surface-color); border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); - overflow: hidden; + overflow-y: auto; position: relative; max-width: 500px; + max-height: 85vh; margin: 0 auto; } @@ -2479,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); @@ -2793,14 +2797,17 @@ sm-popup::part(popup) { } sm-popup::part(popup-container) { - padding: 1rem !important; + padding: 2rem 1rem 1rem 1rem !important; + align-items: flex-start !important; + justify-content: center !important; } sm-popup::part(popup) { - max-height: 90vh !important; - margin: 0 auto !important; + max-height: 75vh !important; + margin: 10vh auto 5vh auto !important; min-width: auto !important; width: 100% !important; + overflow-y: auto !important; } .transaction-details { @@ -3242,12 +3249,18 @@ sm-popup::part(popup) { width: auto; } + @media (max-width: 768px) { + .modern-popup-container { + max-height: 75vh !important; + margin: 10vh auto 10vh auto !important; + position: relative !important; + } + } + /* Modern Popup Mobile Styles */ .modern-popup-container { max-width: 95%; - margin: 0.5rem auto; border-radius: 12px; - max-height: 95vh; overflow-y: auto; } @@ -3473,12 +3486,12 @@ sm-popup::part(popup) { } } -/* Extra Small Mobile Screens (Samsung Galaxy S8+, iPhone SE, etc.) */ +/* Extra Small Mobile Screens */ @media (max-width: 480px) and (max-height: 740px) { /* More compact popup for very small screens */ .modern-popup-container { margin: 0.25rem auto; - max-height: 98vh; + max-height: 70vh; } .popup-header { @@ -4049,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