/* ==== PUBLIC MARKET ROW STYLE (MU-style) ==== */ /* ========================================= MARKETPLACE: FULL BACKGROUND + TRANSPARENT CONTAINERS Applies ONLY on Put this at the VERY END of your CSS /* ========================= MARKET PAGE BACKGROUND (no image) Matches your crimson wuxia vibe ========================= */ body#market_index{ background-color: #580201 !important; /* same family as your wuxia crimson */ background-image: radial-gradient(1200px 700px at 50% -200px, rgba(227,196,110,.10), transparent 60%), radial-gradient(900px 500px at 15% 20%, rgba(0,180,255,.06), transparent 55%), radial-gradient(900px 500px at 85% 30%, rgba(255,120,80,.06), transparent 55%), linear-gradient(180deg, rgba(18,10,10,.92) 0%, rgba(10,6,6,.96) 45%, rgba(5,3,3,.98) 100%) !important; background-repeat: no-repeat !important; background-attachment: scroll !important; } a[aria-disabled="true"]{ opacity: .55; cursor: not-allowed; } a[aria-disabled="true"]:hover{ filter: none !important; } .swal2-popup.login-popup{ background: radial-gradient(circle at top, rgba(30,35,55,0.98), rgba(10,10,18,0.98)); border: 1px solid rgba(255,210,127,0.22); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.75); color: #f5f5f5; } /* Make the big layout wrappers transparent (Bootstrap + your panels) */ body#market_index .container, body#market_index #guides, body#market_index #guides > .panel, body#market_index #guides > .panel.panel-default, body#market_index #guides .panel-body, body#market_index #guides .row, body#market_index #guides .guides-container, body#market_index #guides .guides-content, body#market_index #guides .table-responsive { border: 0 !important; box-shadow: none !important; } #market_index .panel-body .row .guides-container .guides-content{ background: radial-gradient(120% 90% at 50% 0%, rgba(227,196,110,.10), transparent 62%), linear-gradient(180deg, rgba(88,2,1,.35) 0%, rgba(10,6,6,.88) 35%, rgba(5,3,3,.94) 100%), var(--g-bg-900) !important; } .market-table th, .market-table td { vertical-align: middle !important; border: none !important; } .market-table .slot-icon {vertical-align:middle;} /* body cells */ .market-table tbody td{ border: 0 !important; padding: 10px 10px !important; vertical-align: middle !important; } /* icon / slot */ .slot-icon, .market-icon{ position: relative; display:inline-block; width:40px; height:40px; background-repeat:no-repeat; image-rendering: pixelated; border-radius:8px; border:1px solid rgba(255,255,255,0.18); background-color: #000; box-shadow:0 0 8px rgba(0,0,0,.6), inset 0 0 4px rgba(255,255,255,.05); } .market-qty{ position:absolute; right:-4px; bottom:-4px; font-size:11px; padding:1px 5px; border-radius:999px; background: rgba(0,0,0,0.90); color:#ffd27f; font-weight:800; } /* refine overlay */ .slot-refine{ position:absolute; right:1px; bottom:2px; font-weight:800; font-size:9px; line-height:1; text-shadow:0 0 2px #000,0 0 4px #000; pointer-events:none; white-space:nowrap; } .slot-refine .ref-main{ color:#ffdf73; } .slot-refine .ref-ex { color:#6bff9a; } /* title + seller */ .market-title{ font-weight: 900; font-size: 15px; color: rgba(255,255,255,0.92); letter-spacing: .2px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .market-row:hover .market-title{ color: #ffdf73; text-shadow: 0 0 10px rgba(255,210,127,0.15); } .market-id{ font-size:11px; color:#8790aa; } .market-seller{ margin-top:2px; font-size:11px; color:#b0a79a; } /* type badge */ .type-badge{ display:inline-block; font-size:11px; line-height:14px; padding:1px 6px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#cfd6ff; } .type-0, .type-19 { color:#ffd8a6; } .type-1 { color:#bfe6ff; } .type-2 { color:#c1ffcf; } .type-3 { color:#ffc1c1; } .type-5 { color:#ffdefc; } .type-7 { color:#e7ffc1; } .type-9 { color:#e0d1ff; } .type-10 { color:#ffe6bf; } .type-14 { color:#c1fff3; } /* effects tags */ .market-effects{ max-width:420px; } .market-effects .tag{ display:inline-block; font-size:12px; line-height:16px; padding:2px 8px; border-radius:999px; border:1px solid rgba(207,153,255,.30); background:rgba(207,153,255,.10); color:#d9c3ff; margin-right:6px; margin-bottom:4px; } .market-effects .tag:hover{ background:rgba(207,153,255,.16); } .no-eff{ color:#777; font-size:12px; } /* price */ .market-price{ white-space:nowrap; } .price-top{ display:flex; align-items:center; gap:10px; } .price-main{ font-weight: 900; font-size: 18px; color: #ffe8bf; } .price-sub{ margin-top: 2px; font-size: 11px; color: rgba(255,255,255,0.60); } /* price pill (single definition) */ .price-pill{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:24px; border-radius:999px; padding:0 10px; background: rgba(255,210,127,0.18); border: 1px solid rgba(255,210,127,0.30); color: #ffdd9b; font-weight: 900; font-size: 11px; letter-spacing: .3px; box-shadow: 0 0 6px rgba(255,210,127,.25); } /* DC teal */ .price-pill.is-coins{ background: rgba(70,255,220,.15); border: 1px solid rgba(70,255,220,.35); color: #affff5; box-shadow: 0 0 6px rgba(70,255,220,.25); } /* BUY button */ .market-buy{ text-align:right; } .market-buy .btn-success{ background: linear-gradient(180deg, rgba(255,180,60,1), rgba(220,120,20,1)) !important; border: 1px solid rgba(255,210,127,0.55) !important; color: #FFF3D6 !important; font-weight: 900 !important; font-size: 11px !important; letter-spacing: .4px; padding: 6px 14px !important; border-radius: 10px !important; box-shadow: 0 10px 22px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.22); text-transform: uppercase; } .market-buy .btn-success:hover:not([disabled]){ filter: brightness(1.06); } .market-buy .btn-success[disabled]{ opacity: .45 !important; cursor: default !important; box-shadow: none !important; } /* pager */ .mp-pager{ display:flex; gap:10px; align-items:center; justify-content:center; margin:10px 0; } .mp-page-label{ color:#9ab; font-size:12px; } /* responsive */ @media (max-width: 1100px){ .market-effects{ display:none; } .price-sub{ display:none; } } @media (max-width: 900px){ .market-id{ display:none; } .market-seller{ display:none; } } /* general layout */ .table-responsive td {vertical-align:middle !important;} /*....*/ /* ========================================================= MARKET "GLASS" ROWS (dark/blue transparent + clean lines) Put at the VERY END of market.css ========================================================= */ /* Make rows "glass" */ .market-row{ position: relative; background: rgba(8, 16, 28, 0.60) !important; /* dark blue-ish transparent */ border: 1px solid rgba(255,255,255,0.06) !important; /* smoother */ overflow: hidden; /* so pseudo lines + blur are clean */ /* glass feel (works in modern browsers) */ backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); } /* Remove the old "solid" feel on hover, just brighten slightly */ .market-row:hover{ background: rgba(20, 38, 60, 0.40) !important; } .market-row::before{ top: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent ); } .market-row::after{ bottom: 0; background: linear-gradient(90deg, transparent, rgba(0,180,255,0.10), /* slight blue tint */ transparent ); } /* Optional: a soft inner glow on the left edge */ .market-row > td:first-child{ position: relative; } .market-row > td:first-child::before{ content:""; position:absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 3px; background: linear-gradient(180deg, rgba(0,180,255,0.35), rgba(255,210,127,0.20) ); opacity: .45; } /* Table header: match vibe (slightly brighter) */ .market-table thead th{ color: rgba(255,255,255,0.88) !important; text-shadow: 0 0 8px rgba(0,180,255,0.08); } body#market_index .item-tooltip{ position: absolute !important; z-index: 99999 !important; } /* ========================================= MARKET TABLE GRID LINES (gray/white-ish) put at VERY END of market.css ========================================= */ /* Thin separators inside each row (vertical + horizontal) */ .market-row > td{ border-top: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(0,0,0,0.35) !important; /* subtle depth */ background: transparent !important; } /* Vertical lines between columns */ .market-row > td + td{ border-left: 1px solid rgba(255,255,255,0.10) !important; } /* Hover: slightly brighter lines */ .market-row:hover > td{ border-top-color: rgba(255,255,255,0.14) !important; border-bottom-color: rgba(0,0,0,0.30) !important; } .market-row:hover > td + td{ border-left-color: rgba(255,255,255,0.16) !important; } /* ===== Top bar: Found items + SELL ===== */ .market-topbar{ display:flex; align-items:center; justify-content:flex-start; margin: 6px 0 10px; background: rgba(0, 0, 0, 0.35); } .market-top-left{ display:flex; gap:14px; align-items:center; } .found-pill{ display:inline-flex; gap:10px; align-items:center; color: rgba(255,255,255,0.85); font-weight: 900; padding: 8px 12px; } .found-ico{ display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:999px; background: rgba(255,80,80,0.15); border: 1px solid rgba(255,80,80,0.35); color: #fff; font-weight: 900; } /* SELL button */ .sell-btn{ display:inline-flex; align-items:center; justify-content:center; height:36px; padding: 0 18px; border-radius: 12px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; text-decoration:none !important; color:#FFF3D6 !important; background: linear-gradient(180deg, rgba(255,180,60,1), rgba(220,120,20,1)); border: 1px solid rgba(255,210,127,0.55); box-shadow: 0 10px 22px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.22); } .sell-btn:hover{ filter: brightness(1.06); } /* ========================================================= FIX: Edit popup under footer (index.php only) Put at VERY END of market.css ========================================================= */ body#market_index .mi-modal, body#market_index .mi-modal-backdrop, body#market_index .mi-backdrop, body#market_index .market-modal, body#market_index .market-modal-backdrop, body#market_index .edit-price-modal, body#market_index .edit-price-backdrop, body#market_index .swal2-container { position: fixed !important; z-index: 999999 !important; } /* If your popup is appended as a DIRECT child of */ body#market_index > .mi-modal, body#market_index > .mi-modal-backdrop, body#market_index > .mi-backdrop, body#market_index > .market-modal, body#market_index > .market-modal-backdrop { position: fixed !important; z-index: 999999 !important; } /* ========================= SWEETALERT BUY POPUP Put at VERY END of market.css ========================= */ .swal2-popup.buy-popup{ background: radial-gradient(circle at top, rgba(30,35,55,0.98), rgba(10,10,18,0.98)); border: 1px solid rgba(255,210,127,0.22); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.75); color: #f5f5f5; padding: 16px 18px 14px; } .swal-buy-wrap{ display:flex; gap:18px; align-items:flex-start; text-align:left; } .swal-buy-left, .swal-buy-right{ flex:1; min-width:360px; } .buy-item-head{ display:flex; align-items:center; gap:12px; margin-bottom: 12px; } .buy-icon-wrap{ width:32px; height:32px; border-radius:1px; overflow:hidden; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; } .buy-icon-inner{ width:32px; height:32px; background-repeat:no-repeat; image-rendering: pixelated; transform-origin: center; } .buy-item-name{ font-weight: 900; font-size: 16px; margin: 0; } .buy-item-sub{ font-size: 12px; opacity: .78; margin-top: 6px; display:flex; gap:10px; align-items:center; } .buy-qty-pill{ display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; border-radius:999px; font-weight:900; font-size:12px; color:#FFF3D6; background: linear-gradient(180deg, rgba(255,195,75,1), rgba(220,120,20,1)); border: 1px solid rgba(255,210,127,.25); box-shadow: 0 10px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.22); } .buy-right-title{ font-weight: 900; font-size: 18px; margin: 4px 0 10px; } .buy-paybox{ background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 12px; margin-bottom: 12px; } .buy-pay-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .buy-pay-row:last-child{ border-bottom:0; } .buy-pay-label{ color: rgba(255,255,255,0.75); font-weight: 800; font-size: 12px; } .buy-pay-value{ font-weight: 900; color: #ffe8bf; } .buy-currency-pill{ display:inline-flex; align-items:center; justify-content:center; min-width: 54px; height: 26px; border-radius: 999px; padding: 0 12px; font-weight: 900; font-size: 11px; letter-spacing: .3px; background: rgba(255,210,127,0.14); border: 1px solid rgba(255,210,127,0.22); color: #ffd27f; } .buy-currency-pill.is-coins{ background: rgba(70,255,220,.15); border: 1px solid rgba(70,255,220,.35); color: #affff5; } /* show tooltip HTML inside popup */ .buy-tooltip.item-tooltip{ position: relative; display: block; max-width: none; width: 100%; pointer-events: auto; margin: 0; } .buy-tooltip.item-tooltip::after{ display:none; } .buy-tooltip-wrap{ max-height: 430px; overflow: auto; border-radius: 2px; } @media (max-width: 900px){ .swal-buy-wrap{ flex-direction: column; } .swal-buy-left, .swal-buy-right{ min-width: 0; } .buy-tooltip-wrap{ max-height: 320px; } } .market-topbar-balances { display: flex; gap: 10px; align-items: center; font-weight: 600; } .market-sep { opacity: .6; } .market-balance span { font-weight: 800; } /* ================================ TOPBAR BALANCES (icons + values) ================================ */ .market-topbar-balances{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .mb-pill{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 10px 22px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.20); } .mb-ico{ width:30px; height:30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)); } .mb-label{ font-weight:900; font-size:12px; letter-spacing:.3px; color: rgba(255,255,255,0.70); text-transform: uppercase; } .mb-value{ font-weight: 900; font-size: 15px; color: rgba(255,255,255,0.92); } /* Gold = warm */ .mb-gold .mb-value{ color: #ffe2a8; text-shadow: 0 0 10px rgba(255,210,127,0.15); } /* DC / Donation Points = cyan-ish */ .mb-coins{ border-color: rgba(70,255,220,0.22); background: rgba(70,255,220,0.08); } .mb-coins .mb-label{ color: rgba(175,255,245,0.78); } .mb-coins .mb-value{ color: #affff5; text-shadow: 0 0 12px rgba(70,255,220,0.18); } /* Mobile: keep it neat */ @media (max-width: 900px){ .mb-label{ display:none; } /* icon + value only */ .mb-pill{ padding:8px 10px; gap:8px; } } /* ============================== Sticky quickbar (filters + balances) ============================== */ .market-sticky-bar{ position: sticky; top: 58px; /* your site has body padding-top:58px */ margin-bottom: 10px; } body#market_index .market-sticky-bar{ z-index: 900 !important; /* anything < 1030 is safe */ } /* left align filters */ .market-filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; /* left */ align-items:center; } /* balances on the right */ .market-balances-quick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* Use your existing mb-pill styles; just ensure compact */ .market-balances-quick .mb-pill{ padding:7px 10px; } /* cyan-ish already set on .mb-coins in your CSS */ /* Mobile: balances drop under filters */ @media (max-width: 900px){ .market-quickbar{ flex-direction: column; align-items: flex-start; } .market-balances-quick{ width:100%; justify-content:flex-end; } } /* ========================================= MARKET STICKY BAR — WUXIA DARK (scoped) Add at VERY END of market.css ========================================= */ body#market_index .market-quickbar{ position: relative; padding: 12px 14px; border-radius: 16px; /* darker, premium glass */ background: linear-gradient(180deg, rgba(10,10,14,.92), rgba(0,0,0,.55)); border: 1px solid rgba(255,210,127,.16); box-shadow: 0 16px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(10px) saturate(120%); } /* subtle gold “divider” line like your wuxia panels */ body#market_index .market-quickbar::after{ content:""; position:absolute; left:16px; right:16px; bottom:10px; height:1px; background: linear-gradient(90deg, transparent, rgba(255,210,127,.28), transparent ); opacity:.9; pointer-events:none; } /* Filter buttons — wuxia-style chips */ body#market_index .market-quickbar .quick-link-btn{ font-family: "Cinzel","Noto Serif SC",serif; font-size: 14px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease; } body#market_index .market-quickbar .quick-link-btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,210,127,.22); color: #ffe2a8; transform: translateY(-1px); } /* Active category — gold highlight */ body#market_index .market-quickbar .quick-link-btn.active{ background: linear-gradient(180deg, rgba(255,195,75,.95), rgba(190,110,18,.92)); border-color: rgba(255,210,127,.55); color: #1a1208; box-shadow: 0 12px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.20); } /* Balances match the darker bar */ body#market_index .market-quickbar .mb-pill{ background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* Coins pill: keep your cyan identity but darker */ body#market_index .market-quickbar .mb-coins{ background: rgba(70,255,220,.10); border-color: rgba(70,255,220,.22); } @media (max-width: 900px){ body#market_index .market-quickbar{ border-radius: 14px; padding: 10px 12px; } body#market_index .market-quickbar .quick-link-btn{ font-size: 13px; padding: 9px 12px; } } .market-sticky-bar .market-filters .active:after {display:none;} /* ========================= MARKET SEARCH (pill style + SVG icon) ========================= */ .mp-search-wrap{ --h: 35px; display:flex; align-items:center; gap:12px; height: var(--h); padding: 0 16px; border-radius: 999px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.20); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.35); backdrop-filter: blur(5px) saturate(110%); -webkit-backdrop-filter: blur(8px) saturate(115%); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } /* icon container */ .mp-search-ico{ width: 23px; height: 23px; display:inline-flex; align-items:center; justify-content:center; opacity: 0.72; flex: 0 0 auto; user-select:none; } /* the svg image */ .mp-search-ico img{ width: 23px; height: 23px; display:block; /* if your SVG is black, this won't recolor it. If your SVG uses currentColor, it will inherit. */ opacity: 0.78; } /* input text */ .mp-search{ flex: 1 1 auto; min-width: 180px; border: 0; outline: none; background: transparent; color: rgba(255,255,255,0.85); font-weight: 700; font-size: 16px; letter-spacing: 0.2px; } .mp-search::placeholder{ color: rgba(255,255,255,0.50); font-weight: 650; } .mp-search-wrap:focus-within{ border-color: rgba(255,255,255,0.35); background: rgba(0,0,0,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 40px rgba(0,0,0,0.45); } /* clear button (optional) */ .mp-search-clear{ width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size: 18px; padding:0; transition: opacity .12s ease, transform .12s ease, background .12s ease; } /* hide X until there’s text */ .mp-search:placeholder-shown + .mp-search-clear{ opacity: 0; pointer-events: none; transform: scale(.92); } .mp-search-clear:hover{ background: rgba(255,255,255,0.10); transform: scale(1.04); } @media (max-width: 900px){ .mp-search-wrap{ --h: 42px; padding: 0 14px; } .mp-search{ min-width: 120px; font-size: 14px; } .mp-search-ico, .mp-search-ico img{ width: 20px; height: 20px; } } /* ========================= MARKET TOPBAR FILTERS (GOLD | DC + Sort) Keep same style as your UI Put at VERY END of market.css ========================= */ /* make topbar behave nicely */ body#market_index .market-topbar{ display:flex; align-items:center; justify-content:flex-start; margin: 6px 0 10px; background: rgba(0,0,0,0.35); border-radius: 12px; padding: 8px 10px; } /* left cluster */ body#market_index .market-top-left{ display:flex; align-items:center; gap:14px; width: 100%; } /* search should grow, filters stay right */ body#market_index .mp-search-wrap{ flex: 1 1 auto; min-width: 240px; } /* right side filters container */ body#market_index .mp-top-right-filters{ margin-left: auto; display:flex; align-items:center; gap:10px; flex: 0 0 auto; } /* ===== GOLD | DC toggle ===== */ body#market_index .mp-cur-toggle{ height: 35px; /* same as search */ padding: 0 10px; border-radius: 999px; display:flex; align-items:center; gap:10px; } body#market_index #mpCurGold{ color:#ffdd9b; } body#market_index #mpCurDc{ color:#affff5; } /* buttons inside toggle */ body#market_index .mp-cur-pill{ border: 0; background: transparent; cursor: pointer; padding: 6px 12px; border-radius: 999px; font-weight: 900; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,0.70); transition: background .12s ease, color .12s ease, transform .12s ease; } body#market_index .mp-cur-pill:hover{ background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.88); transform: translateY(-1px); } /* active currency (subtle pill glow) */ body#market_index .mp-cur-pill.is-active{ background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.95); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } /* separator | */ body#market_index .mp-cur-sep{ color: rgba(255,255,255,0.55); font-weight: 900; user-select:none; } /* focus vibes like search */ body#market_index .mp-sort-select:focus{ border-color: rgba(255,255,255,0.35); background: rgba(0,0,0,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 40px rgba(0,0,0,0.45); } /* ===== responsive ===== */ @media (max-width: 1050px){ body#market_index .market-top-left{ flex-wrap: wrap; } body#market_index .mp-top-right-filters{ margin-left: 0; width: 100%; justify-content: flex-end; } } @media (max-width: 900px){ body#market_index .mp-search-wrap{ width: 100%; min-width: 0; } body#market_index .mp-top-right-filters{ width: 100%; justify-content: space-between; } body#market_index .mp-sort-select{ min-width: 150px; } } /* ========================================= TOP LINKS: My Items + History (menu buttons) Put at VERY END of market.css ========================================= */ .mp-top-links{ display:flex; align-items:center; gap:10px; margin-left: 4px; } /* button */ .mp-top-link{ display:inline-flex; align-items:center; gap:10px; height: 38px; padding: 0 14px; border-radius: 12px; text-decoration:none !important; user-select:none; /* match your quickbar chips */ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 22px rgba(0,0,0,.28); transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, filter .12s ease; } .mp-top-link:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,210,127,.22); color: #ffe2a8; transform: translateY(-1px); } .mp-top-link:active{ transform: translateY(0); filter: brightness(0.98); } /* icon */ .mp-top-link img{ width: 18px; height: 18px; display:block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)); opacity: .95; } /* label */ .mp-top-link span{ font-weight: 900; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; } /* Optional: "active page" highlight (add class="active" to the current page link) */ .mp-top-link.active{ background: linear-gradient(180deg, rgba(255,195,75,.95), rgba(190,110,18,.92)); border-color: rgba(255,210,127,.55); color: #1a1208 !important; box-shadow: 0 12px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.20); } .mp-top-link.active img{ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)); opacity: 1; } /* small screens */ @media (max-width: 900px){ .mp-top-link{ height: 36px; padding: 0 12px; } .mp-top-link span{ display:none; } /* icon-only on mobile */ .mp-top-link img{ width: 20px; height: 20px; } } /* ========================= SORT SELECT + PRICE ICON ========================= */ .mp-sort { display:flex; align-items:center; } .mp-sort-wrap{ position: relative; display:inline-flex; align-items:center; height: 35px; border-radius: 999px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.20); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.35); backdrop-filter: blur(8px) saturate(115%); -webkit-backdrop-filter: blur(8px) saturate(115%); } /* the select itself */ .mp-sort-select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 35px; padding: 0 44px 0 14px; /* right padding leaves room for icon */ border: 0; outline: none; background: transparent; color: rgba(255,255,255,0.85); font-weight: 800; font-size: 14px; letter-spacing: .2px; cursor: pointer; } /* optional: focus glow like your search */ .mp-sort-wrap:focus-within{ border-color: rgba(255,255,255,0.35); background: rgba(0,0,0,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 40px rgba(0,0,0,0.45); } @media (max-width: 900px){ .mp-sort-wrap{ height: 42px; } .mp-sort-select{ height: 42px; font-size: 13px; padding-right: 42px; } } /* ========================================= FINAL SORT SELECT (pill + icon) — OVERRIDE Put at VERY END of market.css ========================================= */ body#market_index .mp-sort{ display:flex; align-items:center; } /* kill old arrow */ body#market_index .mp-sort::after{ display:none !important; content:none !important; } body#market_index .mp-sort-wrap{ position: relative; display:inline-flex; align-items:center; height: 35px; border-radius: 999px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.20); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.35); backdrop-filter: blur(8px) saturate(115%); -webkit-backdrop-filter: blur(8px) saturate(115%); } body#market_index .mp-sort-wrap .mp-sort-select{ appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; height: 35px; padding: 0 46px 0 14px; border: 0 !important; outline: none !important; background: transparent !important; color: rgba(255,255,255,0.88); font-weight: 850; font-size: 14px; letter-spacing: .2px; cursor: pointer; color-scheme: dark; } /* dropdown items (Firefox supports; Chrome limited by OS) */ body#market_index .mp-sort-wrap .mp-sort-select option{ background: #0c0c10; color: #ffffff; } /* chevron */ body#market_index .mp-sort::after{ content:"▾"; position:absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events:none; color: rgba(255,255,255,0.70); font-weight: 900; font-size: 14px; } body#market_index .mp-sort-wrap:focus-within{ border-color: rgba(255,255,255,0.35); background: rgba(0,0,0,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 40px rgba(0,0,0,0.45); } @media (max-width: 900px){ body#market_index .mp-sort-wrap{ height: 42px; } body#market_index .mp-sort-wrap .mp-sort-select{ height: 42px; font-size: 13px; padding-right: 44px; } } body#market_index .mp-sort-wrap{ position: relative; cursor: pointer; /* wrapper clickable */ } /* CLOSED default = down (Font Awesome) */ body#market_index .mp-sort-wrap::after{ content: "\f078"; /* fa-chevron-down */ font-family: "Font Awesome 6 Free"; /* or "Font Awesome 5 Free" */ font-weight: 900; position: absolute; right: 14px; top: 53%; transform: translateY(-50%); transform-origin: 50% 50%; color: #fff; font-size: 18px; /* same size as your 18x18 svg */ line-height: 1; opacity: .95; pointer-events: none; } /* OPEN = up (rotate) */ body#market_index .mp-sort-wrap.is-open::after{ transform: translateY(-50%) rotate(180deg); } /* ========================================================= My Items / History -> same style as SELL button ========================================================= */ body#market_index .mp-top-link.mp-top-link--sell{ /* make it behave like SELL (and stop mp-top-link chip styling) */ height: 36px; padding: 0 18px; gap: 10px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,180,60,1), rgba(220,120,20,1)) !important; border: 1px solid rgba(255,210,127,0.55) !important; box-shadow: 0 10px 22px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.22) !important; color:#FFF3D6 !important; text-decoration: none !important; transform: none !important; /* kill mp-top-link hover lift */ } body#market_index .mp-top-link.mp-top-link--sell:hover{ filter: brightness(1.06); } /* keep icon + text looking good */ body#market_index .mp-top-link.mp-top-link--sell img{ width: 18px; height: 18px; opacity: 1; } body#market_index .mp-top-link.mp-top-link--sell span{ font-weight: 900; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; } /* Price number color when currency is DC (coins) */ .market-row[data-currency="2"] .price-main{ color: #affff5 !important; /* same vibe as your coin pill */ text-shadow: 0 0 12px rgba(70,255,220,0.18); } @media (max-width: 900px){ .swal2-popup.buy-popup{ width: 96vw !important; } .swal-buy-left, .swal-buy-right{ min-width: 0 !important; } } /* =========================== FIREFOX FIX: row borders =========================== */ /* Don't use collapsed border model if you want per-row "card" borders */ body#market_index .market-table{ border-collapse: separate !important; border-spacing: 0 !important; /* use 0 6px if you want gaps between rows */ } /* Stop relying on tr border in Firefox */ body#market_index .market-row{ border: 0 !important; background: transparent !important; } /* Make the CELLS become the "row" */ body#market_index .market-row > td{ background: rgba(8,16,28,0.60) !important; backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border-top: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(0,0,0,0.35) !important; } /* Outer left/right border to complete the row outline */ body#market_index .market-row > td:first-child{ border-left: 1px solid rgba(255,255,255,0.10) !important; border-top-left-radius: 14px; border-bottom-left-radius: 14px; } body#market_index .market-row > td:last-child{ border-right: 1px solid rgba(255,255,255,0.10) !important; border-top-right-radius: 14px; border-bottom-right-radius: 14px; } /* Inner vertical separators (keep if you want column lines) */ body#market_index .market-row > td + td{ border-left: 1px solid rgba(255,255,255,0.10) !important; } /* Hover: apply to cells (not tr) */ body#market_index .market-row:hover > td{ background: rgba(20, 38, 60, 0.40) !important; } /* ============================== PERFORMANCE OVERRIDES (KEEP STYLE) Put at VERY END of market.css ============================== */ /* REMOVE blur from every row/cell (major perf win) */ .market-row, body#market_index .market-row > td{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Keep “glass” vibe without blur */ body#market_index .market-row > td{ background: linear-gradient( 180deg, rgba(18, 28, 45, 0.78), rgba(8, 16, 28, 0.62) ) !important; /* subtle depth */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.35) !important; } /* Hover still feels premium */ body#market_index .market-row:hover > td{ background: linear-gradient( 180deg, rgba(26, 44, 70, 0.70), rgba(10, 18, 30, 0.55) ) !important; } /* Optional: big win in Chromium browsers for long tables */ @supports (content-visibility: auto){ body#market_index .market-row{ content-visibility: auto; contain-intrinsic-size: 1px 64px; /* estimated row height */ } } #market_index .market_container { padding-top:15px; } body#market_index .market-table tbody tr > td:first-child{ width: 42px; min-width: 42px; max-width: 42px; padding: 0 !important; text-align: center; white-space: nowrap; }