diff --git a/liquidity-position/.img/MetaMask-icon.svg b/liquidity-position/.img/MetaMask-icon.svg new file mode 100644 index 0000000..66cbc40 --- /dev/null +++ b/liquidity-position/.img/MetaMask-icon.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + diff --git a/liquidity-position/.img/aave.svg b/liquidity-position/.img/aave.svg new file mode 100644 index 0000000..3ce8c8a --- /dev/null +++ b/liquidity-position/.img/aave.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/cetoex.svg b/liquidity-position/.img/cetoex.svg new file mode 100644 index 0000000..0553f9f --- /dev/null +++ b/liquidity-position/.img/cetoex.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/liquidity-position/.img/coininn.svg b/liquidity-position/.img/coininn.svg new file mode 100644 index 0000000..d231ae9 --- /dev/null +++ b/liquidity-position/.img/coininn.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/liquidity-position/.img/curvefi.svg b/liquidity-position/.img/curvefi.svg new file mode 100644 index 0000000..04e8e89 --- /dev/null +++ b/liquidity-position/.img/curvefi.svg @@ -0,0 +1,298 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/mmfinance.svg b/liquidity-position/.img/mmfinance.svg new file mode 100644 index 0000000..491f749 --- /dev/null +++ b/liquidity-position/.img/mmfinance.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/onlimoons.svg b/liquidity-position/.img/onlimoons.svg new file mode 100644 index 0000000..0e71221 --- /dev/null +++ b/liquidity-position/.img/onlimoons.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/liquidity-position/.img/pinksale.svg b/liquidity-position/.img/pinksale.svg new file mode 100644 index 0000000..4817d19 --- /dev/null +++ b/liquidity-position/.img/pinksale.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/quickswapv2.svg b/liquidity-position/.img/quickswapv2.svg new file mode 100644 index 0000000..4f41568 --- /dev/null +++ b/liquidity-position/.img/quickswapv2.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/quickswapv3.svg b/liquidity-position/.img/quickswapv3.svg new file mode 100644 index 0000000..43a20f4 --- /dev/null +++ b/liquidity-position/.img/quickswapv3.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/sushiswap.svg b/liquidity-position/.img/sushiswap.svg new file mode 100644 index 0000000..7ccddf7 --- /dev/null +++ b/liquidity-position/.img/sushiswap.svg @@ -0,0 +1,439 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/sushiswapv3.svg b/liquidity-position/.img/sushiswapv3.svg new file mode 100644 index 0000000..1c4ab71 --- /dev/null +++ b/liquidity-position/.img/sushiswapv3.svg @@ -0,0 +1,258 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/uniswap.svg b/liquidity-position/.img/uniswap.svg new file mode 100644 index 0000000..62e7ddb --- /dev/null +++ b/liquidity-position/.img/uniswap.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/uniswapv2.svg b/liquidity-position/.img/uniswapv2.svg new file mode 100644 index 0000000..aa33cb5 --- /dev/null +++ b/liquidity-position/.img/uniswapv2.svg @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/.img/uniswapv3.svg b/liquidity-position/.img/uniswapv3.svg new file mode 100644 index 0000000..5dcc6a2 --- /dev/null +++ b/liquidity-position/.img/uniswapv3.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/liquidity-position/index.php b/liquidity-position/index.php new file mode 100644 index 0000000..c114a7c --- /dev/null +++ b/liquidity-position/index.php @@ -0,0 +1,240 @@ + + + + + + + + + + + Liquidity Position + + + + + + + + + + + + + + + + + + + $liqA; +}); + +$totalLiquidity = 0; +$lastTimestamp = time(); + +foreach ($contracts as $item) { + if (isset($item['total_liquidity'])) { + $totalLiquidity += (float)$item['total_liquidity']; + } + + if (isset($item['timestamp'])) { + $lastTimestamp = $item['timestamp']; + } +} + +if ($totalLiquidity == 0) { + foreach ($contracts as $item) { + $totalLiquidity += (float)($item['liquidity'] ?? 0); + } +} + +date_default_timezone_set('UTC'); + +$totalLiquidityFormatado = number_format($totalLiquidity, 4, '.', ','); +$lastUpdate = date("D, jS F Y H:i:s", $lastTimestamp) . " UTC"; + +// ========================================================================= +// --- INFOBOX CONFIGURATION & DATA --- +// Modify the variables below to customize the values displayed in the Info Box. +// ========================================================================= +$contractAddress = $contractAddress ?? '0xC29882a1e969018446A3102434DE27B75c616341'; +$bookValue = $bookValue ?? 50000; // Divisor for calculating the Market-to-Book Ratio + +// If variables are already loaded from price.php, preserve them; +// otherwise, define the default fallback/mock values. +$PLTUSD = $plt_rate['plt_prices']['PLTUSD']; +$PLT24hVariation = $plt_rate['plt_prices']['PLTUSD'] / $plt_rate_yesterday['plt_prices']['PLTUSD']; +$PLTmarketcap = number_format($plt_rate['plt_marketcap']['USD'], 4); + +// --- INFOBOX DATA CALCULATION & PROCESSING --- +$shortAddress = substr($contractAddress, 0, 8) . '...' . substr($contractAddress, -5); + +// Format PLT USD price to exactly 10 decimal places +$formattedPLTUSD = number_format((float)$PLTUSD, 8, '.', ','); + +// 24h percentage variation +$variationClass = ((float)$PLT24hVariation >= 0) ? 'positive' : 'negative'; +$variationSign = ((float)$PLT24hVariation >= 0) ? '+' : ''; +$formattedVariation = '(24h: ' . $variationSign . number_format($PLT24hVariation, 2, '.', '') . '%)'; + +// Market-to-Book Ratio +$marketToBookRatio = ($bookValue > 0) ? ($totalLiquidity / $bookValue) : 0; +$marketToBookFormatted = number_format($marketToBookRatio, 2, '.', ''); +?> + +
+

$PLT Liquidity Position

+ +
+ +
+ +
+
+ Plata Token + PLT +
+
+ + + Polygon: + + MetaMask + +
+
+ USD + +
+
+
+ + +
+
+ Market Capitalization : + USD +
+
+ Total Asset Liquidity : + USD +
+
+ Market-to-Book Ratio : + +
+
+ Last Updated : + +
+ +
+
+
+ + + +
+ + + + + + + + + + + + + + + '; + echo ''; + echo ''; + echo ''; + + if ($contract != '') { + $contractCurto = substr($contract, 0, 8) . '...' . substr($contract, -6); + + if (filter_var($contract, FILTER_VALIDATE_URL)) { + $link = $contract; + } else { + $link = 'https://polygonscan.com/address/' . $contract; + } + + echo ''; + } else { + echo ''; + } + + echo ''; + echo ''; + echo ''; + + $contador++; + } + ?> + +
#TickerPairContractExchangeLiquidity (USD)
' . $contador . '' . htmlspecialchars($pair) . '' . htmlspecialchars($contractCurto) . '-' . htmlspecialchars($exchange) . '' . number_format((float)$liquidity, 2, '.', ',') . '
+ +
+ + + \ No newline at end of file diff --git a/liquidity-position/script.liquidity.position.js b/liquidity-position/script.liquidity.position.js new file mode 100644 index 0000000..3e31d67 --- /dev/null +++ b/liquidity-position/script.liquidity.position.js @@ -0,0 +1,169 @@ + $(document).ready(function() { + + var tabela = $('#example').DataTable({ + searchDelay: 0, + + lengthMenu: [ + [50, 100, 150, 200, -1], + [50, 100, 150, 200, "All"] + ], + + order: [[0, "asc"]], + + language: { + search: "", + searchPlaceholder: "", + info: "_TOTAL_ Public Providers Registered", + paginate: { + previous: "Previous", + next: "Next" + } + } + }); + + $('.dataTables_filter input').on('input', function() { + tabela.search(this.value).draw(); + }); + + // Copy contract address logic + $('#copyAddressBtn').on('click', function() { + const fullAddress = $(this).data('address'); + navigator.clipboard.writeText(fullAddress).then(() => { + const $icon = $(this); + $icon.removeClass('fa-regular fa-copy').addClass('fa-solid fa-check').css('color', '#0E9F6E'); + setTimeout(() => { + $icon.removeClass('fa-solid fa-check').addClass('fa-regular fa-copy').css('color', ''); + }, 1500); + }); + }); + + // MetaMask — Add PLT Token + $('.metamask-fox').on('click', function() { + addPLTToken(); + }); + + // Render ticker icons + renderTickerIcons(); + + // Render exchange icons + renderExchangeIcons(); + + }); + +// ------------------------------------------------------------ +// Open MetaMask — Add PLT Token +// ------------------------------------------------------------ +const PLT_TOKEN = { + address: '0xC29882a1e969018446A3102434DE27B75c616341', + symbol: 'PLT', + decimals: 4, + image: 'https://plata.ie/images/platatoken200px.png' +}; + +async function addPLTToken() { + if (typeof window.ethereum === 'undefined') { + alert('MetaMask not detected! Please install MetaMask first.'); + return; + } + try { + const wasAdded = await ethereum.request({ + method: 'wallet_watchAsset', + params: { + type: 'ERC20', + options: { + address: PLT_TOKEN.address, + symbol: PLT_TOKEN.symbol, + decimals: PLT_TOKEN.decimals, + image: PLT_TOKEN.image + } + } + }); + + if (wasAdded) { + console.log('PLT token added successfully'); + } else { + console.log('User cancelled'); + } + } catch (error) { + console.error('Failed to add PLT token:', error); + } +} + +// ------------------------------------------------------------ +// Ticker Icons — render pair icons in Ticker column +// Expects: +// ------------------------------------------------------------ +const TICKER_ICONS = { + 'PLT': 'https://www.typofx.ie/images/assets-icons/680642ae77599_PlataTokenIconSmall.png', + 'POL': 'https://www.typofx.ie/images/assets-icons/69e0e73596d16_69d138547484c_polygon-token.svg', + 'WMATIC':'https://www.typofx.ie/images/assets-icons/66e87ca220442_wMatic_32.webp', + 'WETH': 'https://www.typofx.ie/images/assets-icons/66e87cb174d65_wETH_32.webp', + 'WBTC': 'https://www.typofx.ie/images/assets-icons/67041086e9f16_wrapped-bitcoin-wbtc-seeklogo.svg', + 'USDC': 'https://www.typofx.ie/images/assets-icons/66e878596b462_3408.png', + 'USDT': 'https://www.typofx.ie/images/assets-icons/66e87d419abc0_tether_32.webp', + 'DAI': 'https://www.typofx.ie/images/assets-icons/66e87d56c8b70_mcdDai_32.png', + 'USTC': 'https://www.typofx.ie/images/assets-icons/66edab8b70f45_7129.png', + 'USDCE': 'https://www.typofx.ie/images/assets-icons/69c20a1318d3c_66e878596b462_3408.png', + 'PAXG': 'https://www.typofx.ie/images/assets-icons/66e87de3af910_paxosgold_32.webp', + 'BUSD': 'https://www.typofx.ie/images/assets-icons/66ee177133c33_busd-logo.png', + 'WBNB': 'https://www.typofx.ie/images/assets-icons/69d26b334447f_wbnb.webp', + 'EURS': 'https://www.typofx.ie/images/assets-icons/66f306d45bca5_stasis-euro-eurs-logo.png', + 'BRL': 'https://www.typofx.ie/images/assets-icons/66fcd3ae2c3f2_fiat-real_br.png', + 'EUR': 'https://www.typofx.ie/images/assets-icons/66fcd07278ae6_fiat-euro.png', + 'USD': 'https://www.typofx.ie/images/assets-icons/66fcd15fd24fa_fiat-dollar.png', + 'EURE': 'https://www.typofx.ie/images/assets-icons/69f80d7c33427_eure-logo.svg', + 'XAUT': 'https://www.typofx.ie/images/assets-icons/699f05e2c17a5_xaut.avif', + 'BRZ': 'https://www.typofx.ie/images/assets-icons/69c358cbb6ad3_66e87cc03eb4f_braziliandigital_32.png', + 'BRLA': 'https://www.typofx.ie/images/assets-icons/69c35b7f7f1cf_brla.png', + 'CRV': 'https://www.typofx.ie/images/assets-icons/69c555cbb98ca_curvefi-crv_32.png', + 'MATIC': 'https://www.typofx.ie/images/assets-icons/69e0e748e9a5f_69d138547484c_polygon-token.svg', + 'WPOL': 'https://www.typofx.ie/images/assets-icons/6a10235a1014b_wpol_icon.webp' +}; + +function buildTickerIcon(ticker) { + if (TICKER_ICONS[ticker]) { + return '' + ticker + ''; + } + return '' + ticker + ''; +} + +function renderTickerIcons() { + $('.ticker-cell').each(function () { + var $cell = $(this); + var pair = $cell.data('pair'); + if (!pair) return; + + var parts = pair.split('/'); + if (parts.length !== 2) { $cell.text('-'); return; } + + var t0 = parts[0].trim(); + var t1 = parts[1].trim(); + + $cell.html('{ ' + buildTickerIcon(t0) + ' : ' + buildTickerIcon(t1) + ' }'); + }); +} + +// ------------------------------------------------------------ +// Exchange Icons — render icon + name in Exchange column +// Expects: Sushiswap +// ------------------------------------------------------------ +function getExchangeIcon(name) { + var slug = name.toLowerCase().replace(/\s+/g, '').replace(/[^a-z0-9]/g, ''); + return './.img/' + slug + '.svg'; +} + +function renderExchangeIcons() { + $('.exchange-cell').each(function () { + var $cell = $(this); + var name = $cell.data('exchange'); + if (!name) return; + + var $img = $('' + name + ''); + $img.on('error', function () { + $cell.html('NA ' + name); + }); + $img.attr('src', getExchangeIcon(name.trim())); + + $cell.html($img).append(' ' + name); + }); +} diff --git a/liquidity-position/style.css b/liquidity-position/style.css new file mode 100644 index 0000000..123849e --- /dev/null +++ b/liquidity-position/style.css @@ -0,0 +1,457 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap'); + +body { + margin: 0; + padding: 0 0 40px; + background: #aaa; + font-family: 'Montserrat'; + color: white; + font-size: 14px; +} + +.top-area { + width: 65%; + margin: 25px auto 20px; + text-align: center; +} + +.top-area h1 { + margin: 0 0 20px; + font-size: 2rem; + line-height: 1.1; + font-weight: 800; + letter-spacing: 1px; +} + +.info-box { + --box-padding: 20px; + --row-gap: 10px; + --logo-size: 92px; + + background: #3D3D3D !important; + border: 1px solid #5A5A5A !important; + border-radius: 12px !important; + padding: var(--box-padding) !important; + text-align: left !important; + max-width: 500px; + margin: 25px auto 0; + font-family: 'Montserrat', sans-serif !important; + color: white !important; + line-height: 1.2 !important; +} + +.info-header { + display: flex; + align-items: center; + gap: var(--box-padding); + margin-bottom: 0; +} + +.info-logo { + width: var(--logo-size); + height: auto; /* Permite escala proporcional, eliminando espacos vazios internos no topo/base */ + object-fit: contain; + display: block; + padding: 0; + margin: 0; +} + +.token-details { + display: flex; + flex-direction: column; + gap: var(--row-gap); + flex: 1; +} + +.info-title { + display: flex; + align-items: baseline; + gap: 8px; +} + +.token-name { + font-size: 24px; + font-weight: 800; + color: #ffffff; + letter-spacing: 0.5px; +} + +.token-symbol { + font-size: 20px; + font-weight: 700; + color: #999999; +} + +.network-row { + display: flex; + align-items: center; +} + +.network-badge { + display: inline-flex; + align-items: center; + gap: 6px; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 4px 10px; + border-radius: 20px; + font-size: 11px; + font-weight: 700; + color: #CCCCCC; +} + +.network-icon { + color: #8247E5; + font-size: 10px; +} + +.token-address { + color: #EBECF0; + font-weight: 600; +} + +.copy-icon { + cursor: pointer; + font-size: 12px; + color: #aaa; + transition: color 0.2s ease, transform 0.1s ease; +} + +.copy-icon:hover { + color: white; + transform: scale(1.1); +} + +.metamask-fox { + height: 14px; + width: auto; + margin-left: 2px; + cursor: pointer; + transition: transform 0.2s ease; +} + +.metamask-fox:hover { + transform: scale(1.2) rotate(5deg); +} + +/* Price and Variation Row (below network badge, left-aligned) */ +.price-row { + display: flex; + align-items: baseline; + gap: 12px; +} + +.info-price { + font-size: 15px; + font-weight: 800; + color: #ffffff; + letter-spacing: -0.5px; + white-space: nowrap; +} + +.info-variation { + font-size: 15px; + font-weight: 700; + white-space: nowrap; +} + +.info-variation.negative { + color: #F05252 !important; /* Premium red */ +} + +.info-variation.positive { + color: #0E9F6E !important; /* Premium green */ +} + +/* Metrics List */ +.metrics-list { + display: flex; + flex-direction: column; + gap: var(--row-gap); + border-top: 1px solid rgba(255, 255, 255, 0.08); + margin-top: var(--box-padding); /* Retornado para var(--box-padding) para simetria perfeita no esquadro */ + padding-top: var(--box-padding); + margin-bottom: 0; +} + +.metric-item { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 13px; + font-weight: 600; +} + +.metric-label { + color: #EBECF0; +} + +.metric-value { + color: #ffffff; + font-weight: 700; +} + +/* Footer area */ +.info-footer { + font-size: 11px; + color: #999999; + font-weight: 500; + text-align: right; + border-top: 1px solid rgba(255, 255, 255, 0.05); + padding-top: 8px; + margin-top: 8px; +} + +.table-area { + width: 65%; + margin: 20px auto; +} + +.dataTables_length { + display: none !important; +} + +.dataTables_filter { + margin-bottom: 20px; + color: white !important; + font-weight: 700; + font-size: 0 !important; +} + +.dataTables_filter input { + width: 240px; + height: 34px; + margin-left: 10px; + padding: 6px 16px 6px 38px; + border: none !important; + border-radius: 50px !important; + outline: none; + background: #f2f2f2 !important; + color: #222 !important; + font-family: 'Montserrat', sans-serif; + font-weight: 600; + font-size: 13px !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23222222'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: 14px center !important; + background-size: 16px 16px !important; + transition: all 0.25s ease; +} + +.dataTables_filter input:focus { + background-color: #ffffff !important; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.08); +} + +table#example { + width: 100% !important; + background: #3D3D3D; + border-radius: 12px; + overflow: hidden; + border-collapse: separate; + border-spacing: 0; + box-shadow: none; +} + +table#example th { + background: #2f2f2f; + color: white; + padding: 18px 16px; + text-align: center; + font-size: 13px; + font-weight: 800; + border-bottom: 2px solid #d8d8d8; +} + +table#example td { + background: #3D3D3D; + color: white; + padding: 20px 18px; + text-align: center; + font-size: 13px; + font-weight: 700; +} + +table#example tr:nth-child(even) td { + background: #363636; +} + +table#example tr:hover td { + background: #2a2a2a; +} + +table#example a { + color: white; + text-decoration: none; + font-weight: 800; +} + +table#example a:hover { + color: #6E46AE; +} + +.dataTables_info { + margin-top: 18px; + color: #777 !important; + font-weight: 700; + padding-left: 14px !important; +} + +.dataTables_paginate { + margin-top: 18px; + color: white !important; + font-weight: 700; +} + +.dataTables_paginate .paginate_button { + color: white !important; + border: none !important; + background: transparent !important; + font-weight: 700; +} + +.dataTables_paginate .paginate_button:hover { + color: #6E46AE !important; + background: transparent !important; + border: none !important; +} + +.dataTables_paginate .paginate_button.current { + background: white !important; + color: #222 !important; + border-radius: 6px; +} + +table.dataTable.no-footer { + border-bottom: none !important; +} + +@media (max-width: 1200px) { + .top-area, + .table-area { + width: 85%; + } +} + +@media (max-width: 768px) { + .top-area, + .table-area { + width: 95%; + } + + .top-area h1 { + font-size: 2.2rem; + } + + .dataTables_filter { + text-align: center; + } + + .dataTables_filter input { + width: 80%; + margin-top: 8px; + margin-left: 0; + } + + table#example th, + table#example td { + padding: 14px 10px; + font-size: 12px; + } +} + +div.dataTables_wrapper div.dataTables_filter input { + display: inline-block !important; + width: 240px !important; + height: 34px !important; + margin-left: 10px !important; + padding: 6px 16px 6px 38px !important; + border: none !important; + border-radius: 50px !important; + outline: none !important; + background-color: #f2f2f2 !important; + color: #222 !important; + font-family: 'Montserrat', sans-serif !important; + font-weight: 600 !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23222222'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: 14px center !important; + background-size: 16px 16px !important; + transition: all 0.25s ease !important; +} + +table.dataTable thead .sorting, +table.dataTable thead .sorting_asc, +table.dataTable thead .sorting_desc { + background-image: none !important; +} + +table.dataTable thead th.sorting::after, +table.dataTable thead th.sorting_asc::after, +table.dataTable thead th.sorting_desc::after { + content: "↕"; + margin-left: 8px; + font-size: 11px; + color: #aaa; +} + +table.dataTable thead th.sorting_asc::after { + content: "↑"; + color: #8b8bff; +} + +table.dataTable thead th.sorting_desc::after { + content: "↓"; + color: #8b8bff; +} + +table#example th { + position: relative !important; + white-space: nowrap !important; +} + +/* Ticker column — pair icons */ +.ticker-cell { + white-space: nowrap; + text-align: center; +} +.ticker-icon { + width: 23px; + height: 23px; + vertical-align: middle; + border-radius: 50%; + object-fit: contain; + display: inline-block; +} +.ticker-text { + font-weight: 600; + font-size: 13px; + vertical-align: middle; +} + +/* Exchange column — icon + name */ +.exchange-cell { + white-space: nowrap; +} +.exchange-icon { + width: 20px; + height: 20px; + vertical-align: middle; + border-radius: 50%; + object-fit: contain; + display: inline-block; + background: #fff; +} +.exchange-fallback { + display: inline-block; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + vertical-align: middle; + border-radius: 50%; + background: #fff; + color: #5A5A5A; + font-size: 9px; + font-weight: 800; +} \ No newline at end of file