/* Fonts (Space Grotesk, Source Code Pro, Roboto) are loaded via a single combined in Components/App.razor -- not @import here, which would create a render-blocking request waterfall gated on this stylesheet downloading and parsing first. */ /* Global styles */ html, body { font-family: 'Space Grotesk', sans-serif; margin: 0; padding: 0; background-color: #0a0a0a; color: #E9E9E9; } * { box-sizing: border-box; } /* ============================================ Global Asset Switcher - Overlay/Dropdown Styles (Must be global because MudBlazor renders outside component tree) ============================================ */ /* Asset browser autocomplete list - command palette style */ .asset-browser-list { background: #0d0d0d !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important; max-height: 280px !important; overflow-y: auto !important; padding: 4px !important; } .asset-browser-list .mud-list { padding: 0 !important; background: transparent !important; } .asset-browser-list .mud-list-item { border-radius: 6px !important; margin: 1px 0 !important; min-height: 36px !important; padding: 6px 10px !important; background: transparent !important; transition: background-color 0.12s ease !important; } .asset-browser-list .mud-list-item:hover { background: rgba(255, 255, 255, 0.05) !important; } .asset-browser-list .mud-list-item.mud-selected, .asset-browser-list .mud-list-item-highlighted { background: rgba(255, 255, 255, 0.08) !important; } /* Asset item styling in dropdown */ .asset-browser-list .asset-item { display: flex; align-items: center; gap: 8px; } .asset-browser-list .asset-item .asset-symbol { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; font-size: 13px; color: var(--degen-badge-symbol-fg); } .asset-browser-list .asset-leverage-badge { font-size: 9px; font-weight: 500; color: var(--degen-badge-leverage-fg); background: var(--degen-badge-leverage-bg); padding: 2px 5px; border-radius: var(--degen-radius-md); } /* HIP-3 sub-market badge — grey (distinct from the color-coded venue badge) */ .asset-browser-list .asset-dex-badge { font-size: 9px; font-weight: 400; color: var(--degen-badge-submarket-fg); background: var(--degen-badge-submarket-bg); padding: 2px 5px; border-radius: var(--degen-radius-md); } /* Venue badge — color-coded pill, one hue per venue (only shown when >1 venue enabled) */ .asset-browser-list .asset-venue-badge { font-size: 9px; font-weight: 600; padding: 2px 5px; border-radius: var(--degen-radius-md); letter-spacing: 0.02em; } .asset-browser-list .asset-venue-badge--hyperliquid { color: var(--degen-venue-hyperliquid); background: var(--degen-venue-hyperliquid-bg); } .asset-browser-list .asset-venue-badge--lighter { color: var(--degen-venue-lighter); background: var(--degen-venue-lighter-bg); } .asset-browser-list .asset-venue-badge--default { color: var(--degen-venue-default); background: var(--degen-venue-default-bg); } /* Section caption ("FAVORITES" / "POSITIONS" / "ALL ASSETS"). MudBlazor has no grouping, so captions ride along as disabled list items -- these rules strip the list-item affordances back off them. */ .asset-browser-list .mud-list-item:has(.asset-section-header) { background: transparent !important; opacity: 1 !important; pointer-events: none !important; min-height: 0 !important; padding: 10px 10px 3px !important; margin: 0 !important; cursor: default !important; } .asset-browser-list .mud-list-item:first-child:has(.asset-section-header) { padding-top: 4px !important; } .asset-browser-list .asset-section-header { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--degen-text-muted); } /* Open-exposure tag on a row the user currently holds */ .asset-browser-list .asset-position-tag { font-size: 9px; font-weight: 600; padding: 2px 5px; border-radius: var(--degen-radius-md); letter-spacing: 0.02em; } .asset-browser-list .asset-position-tag--long { color: var(--degen-color-buy); background: var(--degen-color-buy-muted); } .asset-browser-list .asset-position-tag--short { color: var(--degen-color-sell); background: var(--degen-color-sell-muted); } /* Favorite star -- invisible until the row is hovered, so the list stays quiet at rest */ .asset-browser-list .asset-fav-star { margin-left: auto; display: inline-flex; align-items: center; color: var(--degen-text-tertiary); opacity: 0; cursor: pointer; transition: opacity 0.12s ease, color 0.12s ease; } .asset-browser-list .asset-fav-star .mud-icon-root { font-size: 14px; } .asset-browser-list .mud-list-item:hover .asset-fav-star { opacity: 0.5; } .asset-browser-list .asset-fav-star:hover { opacity: 1; color: var(--degen-color-primary); } .asset-browser-list .asset-fav-star--on, .asset-browser-list .mud-list-item:hover .asset-fav-star--on { opacity: 1; color: var(--degen-color-primary); } /* Scrollbar styling for the dropdown */ .asset-browser-list::-webkit-scrollbar { width: 6px; } .asset-browser-list::-webkit-scrollbar-track { background: transparent; } .asset-browser-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } .asset-browser-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } /* Mobile adjustments for dropdown */ @media (max-width: 599px) { .asset-browser-list { max-height: 50vh !important; border-radius: 12px !important; } .asset-browser-list .mud-list-item { min-height: 44px !important; padding: 10px 12px !important; } /* No hover on touch -- the star has to be visible (but quiet) at rest, and big enough to tap */ .asset-browser-list .asset-fav-star { opacity: 0.45; padding: 4px; margin-right: -4px; } .asset-browser-list .asset-fav-star .mud-icon-root { font-size: 16px; } }