@import 'voting_history.css'; :root { --success-color: #27ae60; --pending-color: #007bff; --error-color: #e74c3c; /* Added for consistency */ --highlight-blue: rgb(0, 218, 191); /* Assuming this is the highlight color based on usage */ --highlight-orange: #f39c12; /* Example; adjust if needed */ --accent-fees: #27ae60; /* Consistent with claim button */ --primary-color: #26a17b; /* Adjusted for consistency */ --secondary-color: #2c3e50; /* Example dark secondary */ --card-bg: linear-gradient(145deg, #1e2833, #141b22); --gradient: linear-gradient(145deg, #1e2833, #141b22); --card-bg-hover: #2a3648; --card-border: #4b5563; --text-color: #e5e7eb; --light-text-color: #ffffff; --text-secondary: #9ca3af; --shadow: 0 4px 6px rgba(0,0,0,0.1); --radius: 8px; --border-radius-sm: 4px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --transition-speed-fast: 0.2s; } .stats-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 16px 0; position: relative; } .stats-header::after { content: ''; position: absolute; bottom: 0; left: calc(-1 * var(--spacing-md)); /* Offset by parent's padding */ right: calc(-1 * var(--spacing-md)); /* Offset by parent's padding */ height: 2px; background: var(--card-border); /* Matches actions-header */ transition: background var(--transition-speed-fast) ease; } /* ========================================================================= OVERRIDES FOR veTHE DROPDOWN (force custom styling in Rabby & mobile) ========================================================================= */ .inline-controls-container { position: relative; /* for custom arrow positioning */ display: flex; gap: 10px; align-items: center; transition: opacity var(--transition-speed-fast) ease; } .right-container #lock-estimate.show { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative; transition: opacity var(--transition-speed-fast) ease; } /* make the asset dropdown narrow on desktop */ @media (min-width: 769px) { .inline-controls-container.create-container { width: auto; } #assetDropdown { width: 200px; min-width: 150px; } #assetBalance { visibility: visible !important; opacity: 1 !important; transition: none !important; display: block !important; margin-left: 1em; } } /* ------------------------------------------------------------ HIDE UNTIL JS-READY ------------------------------------------------------------ Prevent any FOUC by hiding the select, deposit button, and banners until our script adds .js-ready to . ------------------------------------------------------------ */ .inline-controls-container select, .inline-controls-container button, #select-message, #select-message-reset, #asset-message, #lock-estimate { visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .js-ready .inline-controls-container select, .js-ready .inline-controls-container button, .js-ready #select-message, .js-ready #select-message-reset, .js-ready #asset-message, .js-ready #lock-estimate { visibility: visible; opacity: 1; transition-delay: 0s; } /* Remove native OS/wallet picker UI */ .inline-controls-container select, #veTheDropdown { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-color: var(--card-bg-hover) !important; border: 1px solid var(--card-border) !important; border-radius: var(--border-radius-sm) !important; color: var(--text-color) !important; padding: var(--spacing-sm) var(--spacing-md) !important; font-size: var(--font-size-md) !important; cursor: pointer; padding-right: 2.5em !important; /* make room for our arrow */ width: 100%; transition: border-color var(--transition-speed-fast) ease, background var(--transition-speed-fast) ease; } /* Custom dropdown arrow */ .inline-controls-container select#veTheDropdown, .inline-controls-container #veTheDropdown, .inline-controls-container select#assetDropdown, .inline-controls-container #assetDropdown { background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e0e0e0' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--spacing-sm) center; background-size: 0.6em; } /* Focus outline */ .inline-controls-container select:focus, .inline-controls-container #veTheDropdown:focus { outline: none; border-color: var(--highlight-blue); } .inline-controls-container button, #btn-create-lock { flex: none; padding: var(--spacing-sm) var(--spacing-md); background: var(--primary-color); border: none; border-radius: var(--radius); color: var(--light-text-color); font-size: var(--font-size-md); cursor: pointer; transition: background var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease; } /* ========================================================================= WRAPPER ========================================================================= */ .vault-container { max-width: 1300px; margin: var(--spacing-xl) auto; padding: 0 var(--spacing-sm); animation: fadeIn 0.8s ease-in-out; } /* ========================================================================= VAULT LAYOUT ========================================================================= */ .vault-content { display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-lg); } .left-container, .right-container { flex: 1; position: relative; padding-top: calc(var(--spacing-md) * 2 + 24px); background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius); padding: var(--spacing-md); box-shadow: var(--shadow); height: 350px; transition: all var(--transition-speed-fast) ease; } .history-container { flex: 1; position: relative; padding-top: calc(var(--spacing-md) * 2 + 24px); background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius); padding: var(--spacing-md); box-shadow: var(--shadow); min-height: auto; transition: all var(--transition-speed-fast) ease; } .left-container { display: flex; flex-direction: column; } .right-container { display: flex; flex-direction: column; position: relative; } .right-container.collapsible.collapsed { overflow: hidden; min-height: 0; height: auto; padding: var(--spacing-sm); max-height: none !important; transition: height var(--transition-speed-fast) ease, padding var(--transition-speed-fast) ease; } .right-container.collapsible.collapsed > :not(.actions-header):not(.buttons-secondary) { display: none; } .right-container.collapsible .actions-header { margin-bottom: var(--spacing-sm); display: flex; align-items: center; justify-content: space-between; transition: margin var(--transition-speed-fast) ease; } .right-container.collapsible.collapsed .buttons-secondary { display: flex; justify-content: center; gap: var(--spacing-md); margin-top: 0; transition: gap var(--transition-speed-fast) ease; } .right-container.collapsible.collapsed .buttons-secondary button { visibility: visible; opacity: 1; flex: 1; min-width: 140px; max-height: none; transition: opacity var(--transition-speed-fast) ease; } .left-container.blur { filter: blur(4px); transition: filter var(--transition-speed-fast) ease; } .stats-list.blur { filter: blur(4px); transition: filter var(--transition-speed-fast) ease; } .stats-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; background: transparent; color: var(--text-color); font-size: 1.2rem; pointer-events: none; z-index: 10; text-align: center; transition: opacity var(--transition-speed-fast) ease; } .stats-overlay.show { display: flex; opacity: 1; } h3 { font-size:var(--font-size-lg); } /* ========================================================================= TOP-CARDS FONT & NOWRAP ========================================================================= */ .card { padding: 10px !important; } .top-cards .card .title { font-size: var(--font-size-sm, 14px); white-space: nowrap; transition: color var(--transition-speed-fast) ease; } .top-cards .card .value { display: flex; flex-direction: column; gap: var(--spacing-xs); /* Adds a small gap between elements, e.g., 4px */ font-size: var(--font-size-xl); /* Retain existing font size for #stat-total-supply */ white-space: nowrap; transition: color var(--transition-speed-fast) ease; margin-bottom: 0 !important; } .top-cards .card .value small#stat-total-supply-usd { font-size: var(--font-size-md); /* Smaller font size for USD value, e.g., 14px */ color: var(--text-secondary); /* Slightly dimmer color for contrast, e.g., #9ca3af */ } /* ========================================================================= USER STATS ========================================================================= */ .stats-list { list-style: none; padding: 0; margin: 2px 0 8px 0; filter: blur(4px); transition: filter 0.2s ease; font-size: var(--font-size-md); font-weight:600; } .has-lock .stats-list { filter: none; } .stats-list li { display: flex; justify-content: space-between; padding: var(--spacing-md) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background var(--transition-speed-fast) ease; } .stats-list li:last-child { border-bottom: none; } #user-claimable, #user-claimed, #user-locked, #user-share-pct, #user-roi { font-weight: 600; color: var(--highlight-blue); transition: color var(--transition-speed-fast) ease; } .distribution-progress { margin-top: -16px; margin-bottom: 0; border-radius: var(--spacing-sm); transition: margin var(--transition-speed-fast) ease; } /* ========================================================================= INLINE CONTROLS (SELECT + BALANCE + INPUT + BUTTONS) ========================================================================= */ .action-group.inline-controls > label { display: block; padding: 10px 0 var(--spacing-md) 0; font-weight: 600; font-size: var(--font-size-md); transition: color var(--transition-speed-fast) ease; } .action-group.inline-controls .inline-controls-container { display: flex; align-items: center; width: 100%; box-sizing: border-box; transition: opacity var(--transition-speed-fast) ease; } .inline-controls-container select#veTheDropdown, .inline-controls-container #veTheDropdown, .inline-controls-container select#assetDropdown, .inline-controls-container #assetDropdown { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-color: var(--card-bg-hover) !important; border: 1px solid var(--card-border) !important; border-radius: var(--border-radius-sm) !important; color: var(--text-color) !important; padding: 8px var(--spacing-md) var(--spacing-sm) var(--spacing-sm) !important; font-size: var(--font-size-md) !important; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e0e0e0' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--spacing-sm) center; background-size: 0.6em; min-width: 155px; transition: border-color var(--transition-speed-fast) ease; } .inline-controls-container select:focus, #veTheDropdown:focus, #assetDropdown:focus { outline: none; border-color: var(--highlight-blue); } .asset-balance { font-size: 0.9rem; color: #ffffff; background: #2a2a2a; padding: 8px 10px; border-radius: 4px; white-space: nowrap; width: 100%; text-align: left; transition: background var(--transition-speed-fast) ease; } .amount-input-container { display: flex; align-items: center; padding-top: var(--spacing-md); width: 100%; transition: padding var(--transition-speed-fast) ease; } .input-wrapper { position: relative; display: inline-flex; align-items: center; width: 100%; } #lockAmountInput { width: 98%; padding: 8px 40px 6px 6px; border: 1px solid #444; border-radius: 4px; background: #1a1a1a; color: #fff; font-size: 0.9rem; transition: border-color var(--transition-speed-fast) ease; } #lockAmountInput:focus { outline: none; border-color: #26a17b; } .max-label { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; cursor: pointer; user-select: none; transition: background var(--transition-speed-fast) ease; } .max-label.disabled { cursor: not-allowed; } .inline-controls-container button, #btn-deposit, #btn-create-lock { flex: none; padding: 8px 12px; background: var(--primary-color); border: none; border-radius: 4px; color: #fff; font-size: 0.9rem; cursor: pointer; transition: background var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease; min-width: 170px; font-weight:600; } #btn-create-lock { background: #26a17b; } #btn-create-lock:disabled, #btn-deposit:disabled, #assetDropdown:disabled { opacity: 0.5; cursor: not-allowed; } #lockAmountInput::-webkit-inner-spin-button, #lockAmountInput::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #lockAmountInput { -moz-appearance: textfield; } /* ========================================================================= RESPONSIVE: MOBILE ========================================================================= */ @media (max-width: 768px) { /* keep the inline-controls row-oriented on mobile */ .action-group.inline-controls .inline-controls-container { flex-direction: row; /* was column */ align-items: center; /* vertical-center them */ gap: 0.5rem; /* small gap between */ width: 100%; padding-left: 0; transition: flex-direction var(--transition-speed-fast) ease; } /* allow the input to grow but not force full width */ #lockAmountInput { flex: 1 1 auto; /* grow to fill remaining space */ width: auto; /* override 100% */ min-width: 0; /* necessary for flex items */ padding: var(--spacing-sm); } /* shrink the button to its content width and nudge it left */ #btn-create-lock { flex: 0 0 auto; /* do not grow */ width: auto; /* override 100% */ margin-left: var(--spacing-sm); margin-top: 0; /* remove the stacked top margin */ padding: 9px 12px; transition: width var(--transition-speed-fast) ease; } /* if you still want deposit / other buttons stacked, target only create-lock */ /* e.g. keep #btn-deposit full width: */ #btn-deposit { width: 100%; margin-top: var(--spacing-sm); } .input-wrapper { width:65%; } } /* ========================================================================= FLASH / ERROR BANNER (fade in/out) ========================================================================= */ .message-box { position: absolute; top: var(--spacing-sm); left: var(--spacing-md); right: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--spacing-sm); display: flex; align-items: center; gap: 8px; font-weight: 500; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; z-index: 11; } .message-box.show { opacity: 1; visibility: visible; transition: opacity 0.5s ease-in; } .message-box.success { background: var(--success-color); color: var(--light-text-color); } .message-box.pending { background: var(--pending-color); color: var(--light-text-color); } .message-box.error { background: var(--error-color); color: var(--light-text-color); } .message-box i { font-size: 1.5rem; flex: none; } /* ========================================================================= SELECT MESSAGE & ESTIMATE BANNER ========================================================================= */ .info-text { margin: var(--spacing-sm) 0; /*padding: var(--spacing-sm) var(--spacing-md);*/ background: none; border: none; box-shadow:none; color: var(--text-color); font-size: var(--font-size-md); text-align: left; transition: background var(--transition-speed-fast) ease; } #vault-info > strong { display: block; /* make it its own line */ text-align: center; /* center the heading */ font-size:1.1rem; color: var(--highlight-blue); transition: color var(--transition-speed-fast) ease; } #estimate-share { position: relative; visibility: hidden; display: block; margin: var(--spacing-md) auto; padding: var(--spacing-sm) var(--spacing-md); background: var(--secondary-color); border: 1px solid var(--card-border); border-radius: var(--spacing-md); color: var(--text-color); font-size: var(--font-size-md); width: 100%; min-height: 2em; text-align: center; transition: visibility var(--transition-speed-fast) ease, opacity var(--transition-speed-fast) ease; } #estimate-share.show { visibility: visible; opacity: 1; } #estimate-share span { display: inline-block; } /* ========================================================================= �NO VETHE� & �ASSET MESSAGE� & �LOCK ESTIMATE� BANNERS ========================================================================= */ #select-message, #select-message-reset, #asset-message, #lock-estimate { display: flex; align-items: center; justify-content: center; /*gap: var(--spacing-md);*/ position: relative; padding: var(--spacing-sm); background: var(--secondary-color); border: var(--card-border); border-radius: var(--spacing-md); color: var(--text-color); font-size: var(--font-size-md); width: 100%; font-weight: 600; min-height: 2em; text-align: center; visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .js-ready #select-message, .js-ready #select-message-reset, .js-ready #asset-message, .js-ready #lock-estimate { visibility: visible; opacity: 1; transition-delay: 0s; } #lock-estimate { display: none; position: relative; transition: display var(--transition-speed-fast) ease; } #lock-estimate.show { display: block; visibility: visible; opacity: 1; transition-delay: 0s; margin-top:12px; } #asset-message.show, #select-message.show, #select-message-reset.show { visibility: visible; opacity: 1; transition-delay: 0s; } #select-message div, #select-message-reset div { display: flex; align-items: center; justify-content: center; position: relative; transition: all var(--transition-speed-fast) ease; } #select-message i, #select-message-reset i, #asset-message i, #lock-estimate i { position: absolute; transform: none; font-size: 1.5rem; color: var(--error-color); flex: none; left:8px; transition: color var(--transition-speed-fast) ease; } #select-message span, #select-message-reset span, #asset-message span, #lock-estimate span { display: inline-block; text-align: center; line-height: 1.4; transition: opacity var(--transition-speed-fast) ease; margin:0 auto; } #select-message.connect-wallet-message i { color: var(--error-color); transition: color var(--transition-speed-fast) ease; } /* ========================================================================= TX LINK ========================================================================= */ .tx-result a { color: var(--highlight-blue); text-decoration: underline; transition: color var(--transition-speed-fast) ease; } /* ========================================================================= SECONDARY BUTTONS (WITHDRAW / CLAIM / COMPOUND) ========================================================================= */ .buttons-secondary { display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: auto; transition: gap var(--transition-speed-fast) ease; padding-top: 16px; } /* Only apply border-top when wallet is connected and user has a share */ body.wallet-connected.has-lock .buttons-secondary { border-top: 2px solid var(--card-border); } .buttons-secondary button { flex: 1; padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-md); min-width: 140px; border: none; border-radius: var(--radius); cursor: pointer; color: var(--light-text-color); transition: background var(--transition-speed-fast), opacity 0.2s, transform var(--transition-speed-fast) ease; visibility: hidden; opacity: 0; } .buttons-secondary button.visible { visibility: visible; opacity: 1; font-weight: 600; } #btn-withdraw { background: var(--error-color); } #btn-compound { background: var(--highlight-blue); } #btn-withdraw:hover:not([disabled]) { background: #c0392b; } #btn-claim { background: var(--accent-fees); } #btn-claim { background: #27ae60; } .buttons-secondary button:disabled { background: var(--text-secondary); color: var(--card-bg); cursor: not-allowed; opacity: 0.6; } /* -- Distribution Progress Bar ------------------------------------------- */ .distribution-progress .progress-label { font-size: var(--font-size-md); text-align: center; margin-bottom: var(--spacing-sm); font-weight: 600; transition: margin var(--transition-speed-fast) ease; } .progress-bar-bg { background: var(--card-bg-hover); border: 1px solid var(--card-border); border-radius: var(--border-radius-sm); width: 100%; height: 12px; overflow: hidden; transition: background var(--transition-speed-fast) ease; } .progress-bar-fill { background: var(--accent-color); width: 0%; height: 100%; transition: width 0.5s linear; } #dist-progress { transition: width 0.9s linear; } /* -- make the distribution-timer fixed width with monospaced digits -- */ #dist-timer { display: inline-block; width: 13ch; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; text-align: left; color: var(--accent-color); font-family: 'Orbitron', monospace; transition: color var(--transition-speed-fast) ease; } #toggle-actions, #toggle-stats, #toggle-history { display: none; transition: display var(--transition-speed-fast) ease; } @keyframes pulseanimated { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } /* target the span (or whatever tag) that shows the claimable amount */ #user-claimable.pulse { display: inline-block; animation: pulseanimated 1s ease-in-out infinite; color: var(--accent-fees); } .history-container { margin-top: var(--spacing-lg); transition: margin var(--transition-speed-fast) ease; } #distribution-history { width: 100%; border-collapse: collapse; transition: all var(--transition-speed-fast) ease; } #distribution-history th, #distribution-history td { padding: var(--spacing-sm); text-align: left; font-size: var(--font-size-md); word-break: break-all; transition: padding var(--transition-speed-fast) ease; } #distribution-history thead th { font-weight: 600; text-transform: uppercase; border-bottom: 2px solid var(--primary-color); transition: color var(--transition-speed-fast) ease; } #distribution-history a { text-decoration: none; color: var(--highlight-blue); font-weight: 600; transition: color var(--transition-speed-fast) ease; } .history-chart-wrapper { margin-top: var(--spacing-md); position: relative; height: 300px; transition: margin var(--transition-speed-fast) ease; } /* ---------- Enhanced Pagination Styling ---------- */ .pagination { width: 100%; box-sizing: border-box; padding: 0 var(--spacing-md); margin: var(--spacing-md) 0 0; display: flex; justify-content: flex-end; align-items: center; gap: 0.25rem; font-size: var(--font-size-sm); transition: margin var(--transition-speed-fast) ease; } .pagination button { padding: 0.4em 0.8em; min-width: 2.2em; background: var(--card-bg-hover); border: 1px solid var(--card-border); border-radius: 9999px; font-weight: 500; cursor: pointer; color: var(--light-text-color); transition: background 0.2s, color 0.2s, transform 0.1s; } .pagination button:disabled { opacity: 0.3; cursor: default; } .pagination button.active { background: var(--highlight-blue); border-color: var(--highlight-blue); color: var(--light-text-color); } .pagination button.prev, .pagination button.next { min-width: 1.6em; } .pagination button.page-number + button.page-number { margin-left: 0.25rem; } .hidden { display: none !important; } #vault-loading { text-align: center; padding: 2rem; transition: padding var(--transition-speed-fast) ease; } .spinner { margin: 0 auto 0.5rem; width: 40px; height: 40px; border: 4px solid var(--highlight-blue); border-top-color: #ffffff; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .card.countdown { display: none; transition: display var(--transition-speed-fast) ease; } @media (max-width: 768px) { #lock-estimate:has(#lock-estimate-text:empty) { display: none !important; } } #select-message-reset { margin-top: 39px !important; } /* ========================================================================= RESPONSIVE: STACK PANELS ON MOBILE & TOP-CARDS SWIPE ========================================================================= */ @media (max-width: 768px) { .vault-container { margin: var(--spacing-md) auto; transition: margin var(--transition-speed-fast) ease; } .vault-content { flex-direction: column; margin-top: 0; transition: flex-direction var(--transition-speed-fast) ease; } .action-group.inline-controls .inline-controls-container { flex-direction: column; align-items: stretch; } .inline-controls-container select, #assetDropdown { width: 100%; min-width: 0; } .asset-balance { width: 100%; text-align: left; } .amount-input-container { flex-direction: row; flex-wrap: wrap; justify-content: center; } .max-button, #btn-create-lock { min-width: 70px; } #asset-message { display: flex; flex-direction: column; align-items: center; text-align: center; } #lock-estimate { display: flex; flex-direction: column; align-items: center; text-align: center; position: absolute; } #asset-message i, #lock-estimate i { position: static; transform: none; margin-bottom: var(--spacing-xs); font-size: 1.5rem; } #asset-message span, #lock-estimate span { display: block; margin-left: 0; text-align: center; } .inline-controls-container button, .buttons-secondary button { visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .wallet-connected .inline-controls-container button, .has-lock .buttons-secondary button { visibility: visible; opacity: 1; transition-delay: 0s; } .inline-controls-container button:disabled, .buttons-secondary button:disabled { opacity: 0.5; cursor: not-allowed; } .buttons-secondary button { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); min-width: 0; } .action-group.inline-controls .inline-controls-container select, .action-group.inline-controls .inline-controls-container button { width: 100% !important; box-sizing: border-box; } .action-group.inline-controls .inline-controls-container button { margin-top: var(--spacing-sm); } .top-cards-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .top-cards { display: flex; flex-wrap: nowrap; scroll-snap-type: x mandatory; gap: var(--spacing-md); padding-bottom: var(--spacing-lg); } .top-cards .card { flex: 0 0 85%; scroll-snap-align: start; min-width: 200px; } .top-cards-wrapper::-webkit-scrollbar { display: none; } .top-cards-wrapper { -ms-overflow-style: none; scrollbar-width: none; } #select-message, #select-message-reset { padding: var(--spacing-sm) var(--spacing-md); text-align: center; } #select-message div, #select-message-reset div { flex-direction: column; align-items: center; } #select-message i, #select-message-reset i { position: absolute; transform: none; font-size: 1.5rem; left:8px; } #select-message span, #select-message-reset span { display: block; margin:0 auto; } body:not(.wallet-connected) .right-container { min-height: auto !important; height: auto !important; padding-bottom: 1rem; } .right-container { min-height: 400px; transition: min-height var(--transition-speed-fast) ease; } .right-container.collapsible { position: relative; } .right-container.collapsible.collapsed { min-height: 0; height: auto; padding: var(--spacing-md); transition: height var(--transition-speed-fast) ease; } .right-container.collapsible.collapsed .buttons-secondary { gap: var(--spacing-sm); padding-top: var(--spacing-sm); } .right-container.collapsible.collapsed .buttons-secondary button { min-width: 0; padding: var(--spacing-sm) var(--spacing-md); max-height: none !important; } .right-container .actions-header { display: flex; align-items: center; justify-content: space-between; } .right-container.collapsed .actions-header ~ *:not(.buttons-secondary) { display: none; } .right-container.collapsed #lock-estimate.show { display: block; } #distribution-history { font-size: 0.8rem; } #distribution-history th, #distribution-history td { font-size: 0.75rem; } #distribution-history th:nth-child(2), #distribution-history td:nth-child(2), #distribution-history th:nth-child(5), #distribution-history td:nth-child(5) { display: none; } #toggle-stats, #toggle-history { display: inline-flex; background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text-color); padding: 0; } .left-container.collapsible { position: relative; } .left-container .stats-header { display: flex; align-items: center; justify-content: space-between; } .left-container.collapsed .stats-header ~ * { display: none !important; } .left-container.collapsible.collapsed { min-height: 0 !important; height: auto !important; overflow: hidden; padding-bottom: 38px !important; transition: height var(--transition-speed-fast) ease; } /* New: History container collapsible styles */ .history-container.collapsible { position: relative; } .history-container .history-header { display: flex; align-items: center; justify-content: space-between; position: relative; padding-bottom: 16px; /* Match stats-header padding for consistency */ } .history-container.collapsed .history-chart-wrapper { display: none !important; } .distribution-progress { margin-top: 0; } .amount-input-container { padding-top: var(--spacing-sm); } .message-box { position: absolute; top: -130px; left: 0; right: 0; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--spacing-sm); display: flex; align-items: center; gap: 8px; font-weight: 500; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; z-index: 11; } h3 { font-size:1rem; } .left-container.collapsed .stats-header::after { content: none; } } /* ========================================================================= veTHE Vault � Step-by-Step Modal Overrides ========================================================================= */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; align-items: center; justify-content: center; z-index: 1000; transition: background var(--transition-speed-fast) ease; } @media (min-width: 769px) { .right-container .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; align-items: center; justify-content: center; z-index: 1000; } } .modal.show { display: flex; } .modal-content { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--spacing-lg); max-width: 400px; width: 90%; box-shadow: var(--shadow); color: var(--text-color); transition: transform var(--transition-speed-fast) ease; } @media (min-width: 769px) { .right-container .modal-content { max-width: 350px; width: 95%; } } .modal-content h2 { margin-top: 0; margin-bottom: var(--spacing-md); font-size: var(--font-size-lg); color: var(--primary-color); text-align: center; transition: color var(--transition-speed-fast) ease; } #lockSteps { list-style: none; margin: 0 0 var(--spacing-lg) 0; padding: 0; transition: margin var(--transition-speed-fast) ease; } #lockSteps li { display: flex; align-items: center; padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--card-border); font-size: var(--font-size-md); color: var(--text-color); transition: padding var(--transition-speed-fast) ease; } #lockSteps li:last-child { border-bottom: none; } .step-icon { width: 1.2em; margin-right: var(--spacing-md); color: var(--text-secondary); flex: none; transition: color var(--transition-speed-fast) ease; } .step-icon.fa-spinner.fa-spin { color: var(--pending-color); } .step-icon.fa-check-circle { color: var(--success-color); } .step-icon.fa-xmark-circle { color: var(--error-color); } #lockModalClose { display: block; margin: var(--spacing-md) auto 0; padding: var(--spacing-sm) var(--spacing-lg); background: var(--primary-color); color: var(--light-text-color); font-size: var(--font-size-md); border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: background 0.2s ease, transform var(--transition-speed-fast) ease; } #lockModalClose:hover:not(.hidden) { background: var(--highlight-orange); transform: translateY(-1px); } #lockModalClose.hidden { display: none; } .modal-error-message { color: #e74c3c; margin-top: 1rem; text-align: center; transition: color var(--transition-speed-fast) ease; } .actions-header { display: flex; align-items: center; border-bottom: 2px solid var(--card-border); margin: 0 calc(-1 * var(--spacing-md)) 0 calc(-1 * var(--spacing-md)); position: relative; transition: border var(--transition-speed-fast) ease; } .tab-buttons { display: flex; width: 100%; height:50px; transition: height var(--transition-speed-fast) ease; } .tab-button { flex: 1; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--card-bg-hover); border: none; cursor: pointer; font-weight: 600; color: var(--text-color); transition: background-color 0.3s ease, color var(--transition-speed-fast) ease; text-align: center; font-size:var(--font-size-lg); } .tab-button:first-child { border-right: 2px solid var(--card-border); border-top-left-radius: var(--radius); border-top-right-radius: 0; transition: border var(--transition-speed-fast) ease; } .tab-button:last-child { border-top-left-radius: 0; border-top-right-radius: var(--radius); } .tab-button.active { background-color: var(--card-bg); position: relative; z-index: 1; color: var(--highlight-blue); transition: background var(--transition-speed-fast) ease; } #toggle-actions { position: absolute; right: var(--spacing-md); top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text-color); padding: 0; transition: color var(--transition-speed-fast) ease; } .right-container { padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md); transition: padding var(--transition-speed-fast) ease; } #asset-message:empty, #lock-estimate:empty { display: none !important; } #select-message-reset span:empty { display: none; } #select-message-reset span:empty ~ i { display: none; } #select-message:empty, #lock-estimate:empty, #select-message-reset:empty, #assetBalance:empty { display: none !important; } .tab-button.disabled, .tab-button[disabled] { opacity: 0.6; cursor: not-allowed; color: #a0a0a0; pointer-events: none; transition: opacity var(--transition-speed-fast) ease; } .merge-label { display: none !important; } body.wallet-connected .right-container.merge-view .merge-label { display: block !important; } body.wallet-connected .right-container:not(.merge-view) .merge-label { display: none !important; } .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; transition: margin var(--transition-speed-fast) ease; position: relative; /* Added for ::after positioning */ padding: 0 0 16px 0; } .history-header::after { content: ''; position: absolute; bottom: 0; left: calc(-1 * var(--spacing-md)); /* Offset by parent's padding */ right: calc(-1 * var(--spacing-md)); /* Offset by parent's padding */ height: 2px; background: var(--card-border); /* Matches stats-header */ transition: background var(--transition-speed-fast) ease; } .history-filters button { background: none; border: 2px solid var(--card-border); padding: 0.14rem 0.3rem; margin-left: 0.5rem; border-radius: 4px; cursor: pointer; color: white; transition: background var(--transition-speed-fast) ease, border var(--transition-speed-fast) ease; } .history-filters button.active { background-color: #26a17b; color: white; border-color: #26a17b; } /* in your main stylesheet */ .disabled { pointer-events: none; opacity: 0.5; cursor: not-allowed; transition: opacity var(--transition-speed-fast) ease; } .history-filters{ display: flex; }