hd-wallet-ui 2.0.18 → 2.0.20

package/styles/widget.css

@@ -656,42 +656,42 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   display: block;
 }
 
-/* Modal Tabs */
+/* Modal Tabs (Account modal - Keys / vCard) - Bootstrap-style nav tabs */
 #hd-wallet-ui-container .modal-tabs {
   display: flex;
-  gap: 6px;
+  gap: 0;
   margin: 0;
-  padding: 8px 24px;
+  padding: 0 24px;
   background: transparent;
-  border-bottom: 1px solid var(--white-10, rgba(255,255,255,0.1));
+  border-bottom: 2px solid var(--white-10, rgba(255,255,255,0.1));
 }
 
 #hd-wallet-ui-container .modal-tab {
-  padding: 8px 14px;
+  padding: 10px 16px;
   background: transparent;
-  border: 1px solid transparent;
-  border-radius: 8px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
   color: var(--white-60);
   font-family: var(--font-sans);
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
-  transition: color 0.2s, border-color 0.2s, background 0.2s;
+  transition: color 0.2s, border-color 0.2s;
   text-align: center;
   white-space: nowrap;
 }
 
 #hd-wallet-ui-container .modal-tab:hover {
   color: var(--white, #fff);
-  background: var(--white-05);
-  border-color: var(--white-10);
+  border-bottom-color: var(--white-30, rgba(255,255,255,0.3));
 }
 
 #hd-wallet-ui-container .modal-tab.active {
   color: var(--white, #fff);
-  border-color: var(--white-20);
-  background: var(--white-10);
+  border-bottom-color: var(--accent, #00dc82);
+  background: transparent;
 }
 
 #hd-wallet-ui-container .modal-tab-content {
@@ -979,10 +979,9 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 
 #hd-wallet-ui-container .wallet-info-expanded {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
-  min-height: 30px;
-  padding: 6px 24px;
+  padding: 12px 24px;
   background: rgba(59, 130, 246, 0.1);
   font-size: 13px;
   line-height: 1.5;
@@ -998,17 +997,12 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 }
 
 #hd-wallet-ui-container .wallet-info-close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.5);
   font-size: 18px;
   cursor: pointer;
-  padding: 0;
-  width: 22px;
-  height: 22px;
+  padding: 0 2px;
   line-height: 1;
   flex-shrink: 0;
 }
@@ -1193,78 +1187,95 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   user-drag: none;
 }
 
+#hd-wallet-ui-container .modal-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+}
+
 #hd-wallet-ui-container .account-header-info {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 8px;
+  gap: 2px;
   flex: 1 1 auto;
   min-width: 0;
 }
 
-#hd-wallet-ui-container .account-modal-header {
-  position: relative;
-  align-items: center;
-  min-height: 118px;
-  padding-right: 56px;
+#hd-wallet-ui-container .account-header-top {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+
+#hd-wallet-ui-container .account-total-value {
+  font-weight: 500;
+  color: #4ade80;
+  letter-spacing: 0.02em;
+  opacity: 0.9;
 }
 
-#hd-wallet-ui-container .account-wallet-row {
+#hd-wallet-ui-container .account-address-row {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  width: auto;
+  gap: 10px;
+  margin-top: 4px;
+  width: 100%;
   min-width: 0;
 }
 
-#hd-wallet-ui-container .account-wallet-select.glass-input.compact {
+#hd-wallet-ui-container .account-address-label {
   flex: 0 0 auto;
-  min-width: 0;
-  width: auto;
-  max-width: min(260px, calc(100vw - 112px));
-  height: 32px;
-  font-size: 13px;
-  padding: 4px 34px 4px 10px;
+}
+
+#hd-wallet-ui-container .account-address-select {
+  min-width: 90px;
+  max-width: 130px;
+  font-size: 12px;
+  padding: 4px 28px 4px 10px;
+  height: 28px;
+  background-position: right 6px center;
   color: var(--white-90);
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4 4.5-4' stroke='rgba(255,255,255,0.9)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 11px center;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-#hd-wallet-ui-container .account-wallet-summary {
-  text-align: left;
+#hd-wallet-ui-container .account-address-display {
+  box-sizing: border-box;
+  font-family: var(--font-mono, 'SF Mono', monospace);
+  font-size: 11px;
+  color: var(--white-90);
+  background: var(--white-05);
+  border: 1px solid var(--glass-border);
+  border-radius: 6px;
+  padding: 2px 6px;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 12ch;
+  width: 100%;
 }
 
-#hd-wallet-ui-container .account-wallet-balance-line {
+#hd-wallet-ui-container .account-address-copy {
+  background: none;
+  border: none;
+  color: var(--white-30);
+  cursor: pointer;
+  height: 24px;
+  padding: 2px;
+  width: 24px;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
-  gap: 16px;
-}
-
-#hd-wallet-ui-container .account-wallet-summary .ph-portfolio-value {
-  color: #4ade80;
-  font-size: 25px;
+  justify-content: center;
 }
-
-#hd-wallet-ui-container .account-wallet-summary .ph-portfolio-label {
-  font-size: 18px;
-  color: var(--white-80);
-  margin-top: 0;
+#hd-wallet-ui-container .account-address-copy:hover {
+  color: var(--white-70);
 }
 
 @media (max-width: 600px) {
-  #hd-wallet-ui-container .account-wallet-row {
-    gap: 8px;
-  }
-
-  #hd-wallet-ui-container .account-wallet-select.glass-input.compact {
-    min-width: 0;
-    max-width: calc(100vw - 96px);
+  #hd-wallet-ui-container .account-address-display {
+    min-width: 10ch;
   }
 }
 
@@ -1281,23 +1292,17 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
+  background: var(--white-10);
   border: none;
+  border-radius: 50%;
   color: var(--white);
+  font-size: 20px;
   cursor: pointer;
-  padding: 0;
-  transition: color 0.2s, opacity 0.2s;
+  transition: background 0.2s;
 }
 
 #hd-wallet-ui-container .modal-close:hover {
-  color: var(--white-80);
-  opacity: 0.9;
-}
-
-#hd-wallet-ui-container .account-modal-close {
-  position: absolute;
-  top: 12px;
-  right: 14px;
+  background: var(--white-20);
 }
 
 #hd-wallet-ui-container .modal-body {
@@ -1935,10 +1940,6 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
    ============================================================================= */
 
 /* Portfolio Hero */
-#hd-wallet-ui-container #wallet-main-view {
-  position: relative;
-}
-
 #hd-wallet-ui-container .ph-portfolio {
   text-align: center;
   padding: 24px 0 20px;
@@ -2205,68 +2206,6 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   opacity: 0.45;
 }
 
-#hd-wallet-ui-container .wallet-asset-action-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 40;
-  display: none;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.42);
-}
-
-#hd-wallet-ui-container .wallet-asset-action-card {
-  width: min(100%, 420px);
-  border: 1px solid var(--glass-border);
-  border-radius: 12px;
-  background: rgba(28, 28, 31, 0.98);
-  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
-  padding: 16px;
-}
-
-#hd-wallet-ui-container .wallet-asset-action-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-#hd-wallet-ui-container .wallet-asset-action-header h4 {
-  margin: 0 0 4px;
-  font-size: 16px;
-  line-height: 1.2;
-}
-
-#hd-wallet-ui-container .wallet-asset-action-path {
-  font-size: 11px;
-  color: var(--muted);
-  font-family: var(--font-mono);
-}
-
-#hd-wallet-ui-container .wallet-asset-action-address {
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--glass-border);
-  border-radius: 8px;
-  background: var(--white-05);
-  color: var(--white-90);
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-#hd-wallet-ui-container .wallet-asset-action-buttons {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  margin-top: 14px;
-}
-
 #hd-wallet-ui-container .ph-token-icon {
   width: 40px;
   height: 40px;
@@ -5281,63 +5220,6 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   display: none;
 }
 
-#hd-wallet-ui-container .identity-wallet-keys {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin: 14px 0 4px;
-}
-
-#hd-wallet-ui-container .identity-wallet-key-row {
-  display: grid;
-  grid-template-columns: 62px minmax(0, 1fr) 28px;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-#hd-wallet-ui-container .identity-wallet-key-label {
-  color: var(--muted);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  text-transform: uppercase;
-}
-
-#hd-wallet-ui-container .identity-wallet-key-value {
-  box-sizing: border-box;
-  min-width: 0;
-  width: 100%;
-  padding: 5px 8px;
-  border: 1px solid var(--glass-border);
-  border-radius: 7px;
-  background: var(--white-05);
-  color: var(--white-90);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.3;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-#hd-wallet-ui-container .identity-wallet-copy {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--glass-border);
-  border-radius: 7px;
-  background: var(--white-05);
-  color: var(--white-50);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#hd-wallet-ui-container .identity-wallet-copy:hover {
-  color: var(--white);
-  background: var(--white-10);
-}
-
 /* Identity edit button (pencil icon in card) */
 #hd-wallet-ui-container .identity-edit-btn {
   position: absolute;