/* effects/back_lines.css */ /* anchor + onyx */ div[style*="back_lines.svg"]:is([style*="min-height"], [style*="height"]) { position: relative; isolation: isolate; background: #0b0a10 !important; --laser-color: #16f195; } /* content above effect */ div[style*="back_lines.svg"]:is([style*="min-height"], [style*="height"])>* { position: relative; z-index: 1; } /* shared mask */ div[style*="back_lines.svg"]:is([style*="min-height"], [style*="height"])::before, div[style*="back_lines.svg"]:is([style*="min-height"], [style*="height"])::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--laser-color); -webkit-mask-image: url("/images/back_lines.svg"); mask-image: url("/images/back_lines.svg"); -webkit-mask-position: 0% 0%; mask-position: 0% 0%; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform: translateZ(0); } :root { --hp-mint: #97fce4; --hp-mint-soft: rgba(151, 252, 228, .22); --hp-mint-glow: rgba(151, 252, 228, .10); --hp-glass-blur: 14px; --hp-glass-sat: 118%; --hp-glass-alpha: .26; --hp-glass-alpha-hover: .32; --hp-shadow: 0 24px 40px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .35); --hp-shadow-hover: 0 30px 54px rgba(0, 0, 0, .55), 0 10px 24px rgba(0, 0, 0, .40), 0 0 28px var(--hp-mint-glow); --hp-stroke-pad: 1px; } @supports (backdrop-filter: blur(4px)) { div[style*="back_lines.svg"][style*="height"] :is(div[style*="background"][style*="border-radius"], section[style*="background"][style*="border-radius"], article[style*="background"][style*="border-radius"]):not(:has(.body34Regular)) { position: relative; isolation: isolate; overflow: clip; border-radius: inherit; background: radial-gradient(120% 100% at 10% 0%, rgba(58, 113, 100, 0) 35%, rgba(151, 252, 228, 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, .01) 0%, rgba(28, 25, 25, 0.1) 14%, rgba(6, 9, 11, .90) 100%), rgba(9, 14, 16, var(--hp-glass-alpha)); backdrop-filter: blur(var(--hp-glass-blur)) saturate(var(--hp-glass-sat)); -webkit-backdrop-filter: blur(var(--hp-glass-blur)) saturate(var(--hp-glass-sat)); box-shadow: var(--hp-shadow); transform: translateZ(0); transition: background .25s ease, box-shadow .28s ease, transform .28s ease, filter .28s ease; } div[style*="back_lines.svg"][style*="height"] :is(div[style*="background"][style*="border-radius"], section[style*="background"][style*="border-radius"], article[style*="background"][style*="border-radius"]):not(:has(.body34Regular))::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--hp-stroke-pad); background: linear-gradient(180deg, rgba(255, 255, 255, .1) 5%, rgba(255, 255, 255, 0.126) 25%, rgba(151, 252, 228, 0.05) 95%, rgba(0, 0, 0, .910) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; z-index: 2; } div[style*="back_lines.svg"][style*="height"] :is(div[style*="background"][style*="border-radius"], section[style*="background"][style*="border-radius"], article[style*="background"][style*="border-radius"]):not(:has(.body34Regular))::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .0) 0%, rgba(0, 0, 0, 0.92) 5%, rgba(11, 23, 18, 0.1) 92%), radial-gradient(80% 40% at 20% 10%, rgba(93, 255, 217, 0.1) 0%, rgba(151, 252, 228, 0) 90%); mix-blend-mode: screen; z-index: 1; } } @supports not (backdrop-filter: blur(4px)) { div[style*="back_lines.svg"][style*="min-height: 100%"] :is(div[style*="background"][style*="border-radius"], section[style*="background"][style*="border-radius"], article[style*="background"][style*="border-radius"]):not(:has(.body34Regular)) { background: linear-gradient(180deg, rgba(20, 28, 32, .85), rgba(9, 14, 16, .80)); border: 1px solid rgba(151, 252, 228, .22); box-shadow: 0 14px 36px rgba(0, 0, 0, .5); } } @media (prefers-reduced-transparency: reduce) { div[style*="back_lines.svg"][style*="min-height: 100%"] :is(div[style*="background"][style*="border-radius"], section[style*="background"][style*="border-radius"], article[style*="background"][style*="border-radius"]):not(:has(.body34Regular)) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(14, 20, 22, .92) !important; } } /* Existing rules */ #favoriteCoins, #coinInfo, #marketData, #accountInfo { background: rgb(9, 9, 10) ; backdrop-filter: blur(12px); } #accountTable { background: rgb(4, 4, 4) !important; } /* base */ #accountTable tbody tr { background-color: transparent; transition: background-color 180ms cubic-bezier(.4, 0, .2, 1); } #accountTable tbody tr:hover { background-color: rgb(10, 10, 10) !important; } #marketData>div, #marketData, #marketDataContent, #marketData div:has(+ #marketDataContent), #marketData div:has(+ div + #marketDataContent), #marketData div:has(a) { background: rgb(4, 4, 4) !important; backdrop-filter: blur(12px); } /* #accountTable>*>thead> { background-color: rgba(144, 126, 126, 0.598) !important; } */ /* Outermost navbar via the Hyperformance logo */ div:has(> div > a > img[alt="Hyperformance"]){ background: rgb(0, 0, 0) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } div:has(.react-grid-layout) { background-color: rgba(20, 20, 20, 0.994) !important; } /* Order panel */ .react-grid-item, .react-grid-item:has(button[color="primary"])>div[style*="flex-direction: column"]>div[style*="pointer-events: initial"]>div:first-child>div:first-child { background-color: rgb(4, 4, 4) !important; backdrop-filter: blur(12px); } .react-grid-item *> thead > tr > td { background-color: rgb(6, 6, 6) !important; } @media (max-width: 1000px) { div[style*="background-color: rgb(15, 26, 31);"] { background-color: rgba(10, 10, 10, 0.994) !important; } }