/* ========================================================================= theme.css — BLACK theme ------------------------------------------------------------------------- File ini di-generate dari split theme-engine/css/theme.css (root, shared + default) menjadi per-tema. Dimuat SELALU bareng theme.css root & 2 file tema lain (lihat index.html) — jangan dimuat sendirian, karena token :root/default & keyframes/@property tinggal di root. ========================================================================= */ /* ========================================================================= 3) BLACK — hitam pekat + aksen emas ------------------------------------------------------------------------- Token di bawah mengikuti color palette resmi tema Black. ========================================================================= */ body[data-theme="black"] { /* ---- BACKGROUND & EFFECT ---- */ --th-bg: #000000; --th-surface: #131313; /* Background Card */ --th-surface-2: #1b1b1b; /* varian card sedikit lebih terang */ /* Background Card + transparansi; pakai bareng backdrop-filter: blur(...). SATU-SATUNYA knob transparansi kartu di tema ini — balance card, profile info card, kartu global, kotak list credit/bonus, kartu profit & strategy semuanya menunjuk ke sini. Makin kecil alpha = makin tembus. */ --th-surface-glass: rgba(19, 19, 19, 0.62); /* ---- TEXT ---- */ --th-text: #FDFDFE; /* Text Utama */ --th-text-white: #FFFFFF; /* Text Putih Netral */ --th-text-secondary: #B2B0AE; /* Text Sekunder */ --th-text-muted: #9B9591; /* Text Muted */ --th-text-hint: #646361; /* Text Disabled */ /* ---- GOLD & ACCENT ---- */ --th-accent: #FFC85B; /* Accent Gold */ --th-accent-2: #F5CD6B; /* Text Gold */ --th-gold-highlight: #FBEA9D; /* titik highlight paling terang */ --th-border-gold-1: #FEF9A2; --th-border-gold-2: #DBB14E; /* Border Gold 1 -> 2 sebagai gradasi (dipakai untuk garis/border) */ --th-border-gold-grad: linear-gradient(135deg, #FEF9A2, #DBB14E); /* Gradasi untuk fill tombol: sengaja TIDAK memakai Border Gold 1 (#FEF9A2) karena tombol memakai teks putih — ujung yang terlalu terang bikin teks tidak terbaca. */ --th-accent-grad: linear-gradient(135deg, #ffb72a, #ab7a09); /* Border Gold Glow #F1CA76 "digabung dengan transparansi" */ --th-border: rgba(241, 202, 118, 0.4); --th-border-solid: #F1CA76; --th-shadow: 0 0 10px rgba(241, 202, 118, 0.2); /* ---- HEADER ---- */ --th-header-bg: #000000; --th-header-solid-bg: #000000; --th-header-gold: #FAE391; /* Header Gold / Glow */ --th-header-white: #FFFFFF; /* Header White */ --th-header-bg-img: url("../../assets/bg-black.jpg"); --th-bg-api-ip: url("../../assets/orbit-black/bg-pg-api-1.png"); --th-bg-api-btn: url("../../assets/orbit-black/bg-pg-api-3.png"); --th-bg-api-status: url("../../assets/orbit-black/bg-pg-api-2.png"); --th-btn-start-img: url("../../assets/orbit-black/start.png"); --th-btn-stop-img: url("../../assets/orbit-black/stop.png"); --th-btn-pause-img: url("../../assets/orbit-black/pause.png"); --th-logo: none; /* ---- ICON FILTER ---- Palette menyebut gradasi #F1E9C1 -> #FBD66D. CSS `filter` hanya bisa menghasilkan SATU warna rata (bukan gradasi), jadi token utama dipatok ke ujung emasnya (#FBD66D) dan ujung terangnya (#F1E9C1) disediakan terpisah untuk dipakai bila perlu. Untuk gradasi sungguhan, pakai teknik mask + var(--th-icon-gold-grad) seperti pada icon area/TNC di file ini. Angka filter di bawah DIHITUNG (bukan dikira-kira) dengan menyimulasikan pipeline filter CSS; hasil render: #FAD66C dan #F2EAC1 — selisih maksimum 1/255 per channel dari warna target. */ --th-icon-filter: brightness(0) saturate(100%) invert(23%) sepia(100%) saturate(97%) hue-rotate(7deg) brightness(221%) contrast(287%); --th-icon-filter-light: brightness(0) saturate(100%) invert(30%) sepia(7%) saturate(632%) hue-rotate(13deg) brightness(251%) contrast(156%); --th-icon-gold-grad: linear-gradient(135deg, #F1E9C1, #FBD66D); /* Glow tombol primer. Versi lama satu lapis emas pucat + inset PUTIH, dan putih itu yang mencuci warnanya jadi halo keabu-abuan. Sekarang: inti amber pekat yang rapat ke tepi tombol + halo lebar yang lebih hangat, dan inset-nya ikut emas (bukan putih) supaya warnanya tidak luntur. */ --th-btn-primary-shadow: 0 0 8px rgba(255, 183, 42, 0.85), 0 0 22px rgba(255, 160, 20, 0.55), inset 0 0 6px rgba(254, 249, 162, 0.45); } /* ========================================================================= 5) PENERAPAN TOKEN KE KOMPONEN ------------------------------------------------------------------------- PENTING soal kontras: app ini mencampur card terang & gelap dengan warna teks yang sebagian hardcoded. Memaksa SEMUA .card jadi gelap membuat teks gelap jadi tak terbaca. Karena itu modelnya per-skema: - elite & galaxy = SKEMA TERANG -> jangan paksa card gelap. Cukup ubah background halaman + aksen + icon. Card & teks biarkan seperti default (sudah kontras). Hasil: tampilan terang dengan brand ungu/emas. - black = SKEMA GELAP -> card digelapkan + teks dibuat terang. default tidak pernah tersentuh. ========================================================================= */ /* Background halaman — semua tema (tint ringan untuk terang, gelap untuk black) */ body[data-theme="black"] { background-color: var(--th-bg) !important; } /* Elite, Galaxy, Black: video background — matikan image agar tidak overlap */ body[data-theme="black"] .top-offset:not(#capture), body[data-theme="black"] .gradient-purple { background-image: none !important; background-color: transparent !important; } body[data-theme="black"] .elite-video-bg, body[data-theme="black"] #elite-bg-video { display: block !important; } /* Coin detail video background — covers the WHOLE panel (behind header too), non-default themes only. Default keeps display:none (rule above). */ body[data-theme="black"] #coin-details .theme-light { position: relative; z-index: 0; /* stacking context so the z-index:-1 video sits above the panel bg */ } /* Coin detail cards -> 30% opacity so the video shows through (non-default themes) */ body[data-theme="black"] #coin-setting .bg-theme { background-color: rgba(19, 19, 19, 0.30) !important; /* Card/Table BG @30% */ } /* ---- BLACK: skema gelap ---- Kontras teks & card ditangani oleh mode gelap bawaan template: applyTheme() menambah class `theme-dark` saat type=black, jadi semua aturan `.theme-dark ...` di style.css aktif (teks terang, card gelap, dll.). Di sini cukup tint warna agar pas navy + cyan, tanpa override teks yang berisiko menimpa teks berwarna (mis. hijau/merah). */ body[data-theme="black"].theme-dark { background-color: var(--th-bg) !important; } body[data-theme="black"] .bg-theme { background-color: var(--th-surface) !important; } body[data-theme="black"] .card { border-color: var(--th-border) !important; box-shadow: var(--th-shadow) !important; } /* --- Aksen: menimpa sistem 'highlight' bawaan template (SEMUA tema) --- */ body[data-theme="black"] .color-highlight { color: var(--th-accent) !important; } body[data-theme="black"] .bg-highlight { background-color: var(--th-accent) !important; } body[data-theme="black"] .border-highlight { border-color: var(--th-accent) !important; } body[data-theme="black"] .gradient-highlight { background-image: var(--th-accent-grad) !important; } /* Footer-bar nav aktif (mengikuti pola styles/highlights/*.css) */ body[data-theme="black"] .footer-bar-1 .active-nav i, body[data-theme="black"] .footer-bar-1 .active-nav span { background: var(--th-accent-grad) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* ========================================================================= 6) ICON & LOGO — bikin icon ikut tema ------------------------------------------------------------------------- Dua kategori icon di app ini: (a) Icon gambar mono PNG -> quick-action di Home (>), logo brand, dsb. Direcolor pakai filter var(--th-icon-filter). (b) Font-icon (bootstrap-icons .bi-*, fontawesome .fa-*) -> nav, header, chevron, dll. Diwarnai via color/fill var(--th-accent). default tidak pernah tersentuh (selector pakai [data-theme="non-default"]). ========================================================================= */ /* ---- (a) Icon gambar mono: quick-action Home + .theme-icon + logo brand ---- */ body[data-theme="black"] .icon > img, body[data-theme="black"] .icon-highlight img, body[data-theme="black"] .theme-icon { filter: var(--th-icon-filter); } /* Orbit themed icons sudah berwarna — batalkan filter agar tidak di-tint ulang. .orbit-icon ditambahkan via Vue :class binding saat themeIcon() aktif. Juga batalkan filter untuk gambar yang di-load dari folder theme-engine. */ body[data-theme="black"] .orbit-icon, body[data-theme="black"] img[src*="theme-engine/assets/orbit-"] { filter: none !important; } /* Icon yang ditukar lewat `content: url(...)` tetap memakai src aslinya di atribut, jadi tidak kena selector orbit- di atas. Tanpa pengecualian ini `.icon > img` men-tint ulang aset tema yang sudah berwarna — Moon Logic di Sekumpulan Pengaturan jadi siluet emas polos tanpa detail. */ body[data-theme="black"] img[src*="moon-logic-icon"], body[data-theme="black"] img[src*="moon-logic.png"] { filter: none !important; } /* CSS explicit asset assignment for menu quick action icons in Black theme */ body[data-theme="black"] #quick-action-api, body[data-theme="black"] .quick-action-api { content: url("../../assets/orbit-black/api-configuration.png") !important; filter: none !important; } body[data-theme="black"] #quick-action-credit { content: url("../../assets/orbit-black/credit.png") !important; filter: none !important; } body[data-theme="black"] #quick-action-profit { content: url("../../assets/orbit-black/profit.png") !important; filter: none !important; } body[data-theme="black"] #quick-action-faq { content: url("../../assets/orbit-black/faq.png") !important; filter: none !important; } body[data-theme="black"] #quick-action-saving { content: url("../../assets/orbit-black/saving.png") !important; filter: none !important; } body[data-theme="black"] #quick-action-bonus { content: url("../../assets/orbit-black/cashback.png") !important; filter: none !important; } body[data-theme="black"] #quick-action-strategy { content: url("../../assets/orbit-black/moonbot-rocket.png") !important; filter: none !important; } body[data-theme="black"] #quick-action-fee, body[data-theme="black"] #quick-action-fee2 { content: url("../../assets/orbit-black/bnb-fee.png") !important; filter: none !important; } /* Border for sort-content */ body[data-theme="black"] .sort-trade-header { border-top: 1px solid #1b1b1b !important; border-bottom: 1px solid #1b1b1b !important; } /* Sorting bar (Trade): transparan saat di atas, gelap saat list di-scroll */ body[data-theme="black"] #sorting-bar { background: transparent !important; transition: background-color 0.25s ease; } body[data-theme="black"] #sorting-bar.header-scrolled { background: rgba(19, 19, 19, 0.9) !important; } /* List koin (Trade) jadi scroll container sendiri — halaman tidak ikut scroll. Offset bar pakai MARGIN (bukan padding) supaya baris terpotong di batas container dan tidak terlihat menembus di belakang bar yang transparan. */ body[data-theme="black"] #trade-page .bg-binance-tick { /* 135px bar atas + 100px footer bar (fixed). Container berhenti TEPAT di atas footer, bukan di dasar viewport — dulu sisanya ditutup padding-bottom:100px sehingga masih ada 100px kosong yang bisa di-scroll setelah item terakhir. padding-bottom dibiarkan 0 tanpa !important supaya BatchSetting() masih bisa set 175px lewat inline style. */ height: calc(100vh - 235px); margin-top: 135px; padding-top: 0 !important; padding-bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; } /* Wrapper dikunci setinggi viewport: .footer-clear (padding-bottom 100px) + min-height:100vh bikin halaman masih ikut ter-scroll ~100px. Satu-satunya yang boleh scroll adalah .bg-binance-tick. */ body[data-theme="black"] #trade-page .page-content { min-height: 0 !important; height: 100vh !important; padding-bottom: 0 !important; overflow: hidden !important; } body[data-theme="black"] #trade-page { overflow: hidden !important; } /* Teks status "Inactive" pada kartu koin (dot merah #d5465b) -> text secondary. Status "Active" (dot hijau) dibiarkan. Match hex DAN serialisasi rgb() Vue. */ body[data-theme="black"] .coin-status:has(> .coin-status-dot[style*="#d5465b"]) .font-11, body[data-theme="black"] .coin-status:has(> .coin-status-dot[style*="213, 70, 91"]) .font-11 { color: var(--th-text-muted) !important; } /* Swap aset logo bertema bila sudah tersedia (default --th-logo:none = aman, asli dibiarkan). Taruh aset di theme-engine/assets/icons//logo.webp lalu set --th-logo di token tema, dan matikan filter di atas untuk .brand-logo. */ /* ---- (b) Font-icon (bi-*, fa-*): nav, header, menu/list ---- */ /* Nav bawah (Home, Trade, dll.): non-aktif = muted, aktif = aksen. */ body[data-theme="black"] #footer-bar a i, body[data-theme="black"] #footer-bar a span { color: rgba(255, 255, 255, 0.75) !important; } body[data-theme="black"] #footer-bar .active-nav i, body[data-theme="black"] #footer-bar .active-nav span { background: var(--th-accent-grad) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* Nav bawah: icon Home & Trade -> aset tema (orbit-black/home.png & trade.png), menggantikan glyph bootstrap-icons yang digambar di ::before */ body[data-theme="black"] #footer-bar .bi-house-fill::before, body[data-theme="black"] #footer-bar .bi-graph-up::before { content: "" !important; display: inline-block; width: 20px; height: 20px; background: url("../../assets/orbit-black/home.png") center / contain no-repeat; vertical-align: middle; } body[data-theme="black"] #footer-bar .bi-graph-up::before { background-image: url("../../assets/orbit-black/trade.png"); } /* Non-aktif diredupkan supaya state aktif/non-aktif tetap terbaca */ body[data-theme="black"] #footer-bar a:not(.active-nav) .bi-house-fill::before, body[data-theme="black"] #footer-bar a:not(.active-nav) .bi-graph-up::before { filter: grayscale(1) brightness(1.3); opacity: 0.75; } /* Floating Certificates Black — markup bawaan pakai warna terang + badge .text-bg-danger; disamakan dengan pola tema Elite tapi memakai token emas. */ body[data-theme="black"] .floating-certificates { background-color: var(--th-surface) !important; border: 1px solid var(--th-border) !important; /* drop shadow + inner glow emas, pola sama dengan kartu tema black */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), var(--th-shadow), inset 0 0 12px 2px rgba(0, 0, 0, 0.35), inset 0 0 10px rgba(241, 202, 118, 0.25) !important; } body[data-theme="black"] .floating-certificates .my-floating-certificates { color: var(--th-text) !important; } body[data-theme="black"] .floating-certificates .badge.text-bg-danger { background: var(--th-border-gold-grad) !important; color: #131313 !important; } /* Tombol close (X) dibiarkan: background putihnya ditulis inline dengan !important di markup, jadi tak bisa ditimpa dari CSS — kalau ikon-nya saja yang diterangkan, hasilnya abu-abu di atas putih (tidak terbaca). */ /* Panah collapse daftar sertifikat (#legal-modal) — inline color:black + text-stroke hitam tak terbaca di modal gelap; samakan dengan icon gradient */ body[data-theme="black"] #legal-modal .toggle-arrow { background: linear-gradient(180deg, #ffffff 0%, #DBB14E 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 0 !important; display: inline-block; } /* Icon header (gear/help/refresh/bell) ikut warna teks tema biar terbaca. */ body[data-theme="black"] .header i { color: var(--th-text) !important; } /* Icon menu/list/settings & icon ber-aksen eksplisit -> warna aksen tema. :not(...) menjaga icon STATUS (hijau/merah/kuning) tetap apa adanya. */ body[data-theme="black"] .menu i, body[data-theme="black"] .list-group i, body[data-theme="black"] .theme-icon i, body[data-theme="black"] .color-highlight i { color: var(--th-accent) !important; } /* Pengaman: jangan ubah icon status berwarna (sukses/gagal/peringatan). */ body[data-theme="black"] .text-success, body[data-theme="black"] .text-danger, body[data-theme="black"] .text-warning, body[data-theme="black"] .color-green, body[data-theme="black"] .color-red, body[data-theme="black"] .color-yellow { filter: none !important; } /* Navigation menu themes support */ body[data-theme="black"] .nav-container { background-color: var(--th-surface-2) !important; border-left: 1px solid rgba(254, 249, 162, 0.85) !important; box-shadow: -2px 0 12px rgba(254, 249, 162, 0.25), inset 1px 0 10px -4px rgba(254, 249, 162, 0.35) !important; } body[data-theme="black"] .nav a { color: var(--th-text) !important; } /* border-offset (background di bawah header) -> ikut tema, bukan putih hardcoded */ body[data-theme="black"] .border-offset { background-color: transparent !important; } /* "Isi Ulang Sekarang" — default hijau gelap (#006400, inline); di tema gelap dibuat lebih terang agar terbaca. */ body[data-theme="black"] .recharge-now-link { color: #D4B26F !important; font-weight: 700 !important; /* Outline gelap agar terbaca di atas background galaksi keemasan */ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px rgba(0, 0, 0, 0.8) !important; } /* Dropdown exchange selector (.select_wrap) — sesuaikan dengan background & border tema */ body[data-theme="black"] .select_wrap .default_option { background-color: var(--th-surface) !important; border: 0.5px solid var(--th-border) !important; color: var(--th-text) !important; } body[data-theme="black"] .select_wrap .default_option p { color: var(--th-text) !important; } body[data-theme="black"] .select_wrap .default_option::before { border-color: transparent transparent var(--th-text) var(--th-text) !important; } body[data-theme="black"] .select_wrap .select_ul { background-color: var(--th-surface) !important; border: 0.5px solid var(--th-border) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important; overflow: hidden !important; } body[data-theme="black"] .select_wrap .select_ul li { background-color: transparent !important; color: var(--th-text) !important; } body[data-theme="black"] .select_wrap .select_ul li p { color: var(--th-text) !important; } body[data-theme="black"] .select_wrap .select_ul li:hover { background-color: var(--th-surface-2) !important; } /* ========================================================================= 7) BALANCE CARD — kartu USDT + Coin Asset + Trading Volume ========================================================================= */ /* Background card — isi kartu SEMI-TRANSPARAN supaya latar/video emas di belakangnya ikut kelihatan, dengan border emas beranimasi berputar. CATATAN TEKNIK: cara lama (dua layer background-image + `background-clip: padding-box, border-box`) TIDAK bisa dipakai di sini. Layer conic-gradient tetap dilukis di seluruh border-box — termasuk di bawah area isi — jadi trik itu hanya menghasilkan "border" selama layer isinya OPAQUE. Begitu alphanya diturunkan, yang muncul justru semburat conic-nya, bukan latar halaman. Karena itu border sekarang digambar di ::before pakai mask (ring dilubangi tengahnya), dan background kartu jadi warna datar ber-alpha. Sudut gradient digerakkan variabel --glow-angle (@property + @keyframes spin-border-pulse ada di theme.css root, dipakai bersama semua tema). Urutan stop dibuat simetris (terang -> mid -> gelap -> mid -> terang) supaya putarannya menyambung tanpa "jump" saat kembali ke 0deg. */ body[data-theme="black"] .balance-card, body[data-theme="black"] .profile-info-card { position: relative !important; background-color: var(--th-surface-glass) !important; background-image: none !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; filter: drop-shadow(0 0 12px rgba(241, 202, 118, 0.35)); } /* Kartu info profil: isian GELAP SOLID, bukan glass. Bedanya dengan balance card — kartu ini isinya baris teks rapat (label + nilai + divider), dan `--th-surface-glass` (alpha 0.62) membuat apa pun yang lewat di belakangnya ikut terbaca. Di HP latarnya kebetulan gelap sehingga terlihat hitam, tapi di desktop lapisan video/latar yang terang menembus dan kartunya berubah jadi abu-abu pudar. Karena itu di sini dipatok opaque dan backdrop-blur-nya dimatikan (tidak ada gunanya di atas isian solid). Tanpa inset shadow: permukaannya rata, cukup cincin emas ::before + glow luar. Perlakuan mobile (cincin dibekukan, drop-shadow -> box-shadow, lihat blok @media max-width: 768px di akhir berkas) sekarang dipakai di SEMUA lebar supaya tampilannya seragam. */ body[data-theme="black"] .profile-info-card { background-color: var(--th-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; box-shadow: 0 0 12px rgba(241, 202, 118, 0.35) !important; } body[data-theme="black"] .balance-card::before, body[data-theme="black"] .profile-info-card::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 16px !important; padding: 1px !important; /* = tebal border emas */ background: conic-gradient( from var(--glow-angle, 0deg), #FEF9A2 0%, #DBB14E 25%, rgba(19, 19, 19, 0.1) 50%, #DBB14E 75%, #FEF9A2 100% ) !important; /* Lubangi bagian tengah: sisakan cincin selebar `padding` saja. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; z-index: 1 !important; animation: spin-border-pulse 4s linear infinite !important; } /* Cincin emas kartu profil dibekukan di semua lebar — lihat catatan di blok `.profile-info-card` di atas. Harus DI SINI (sesudah blok ::before asli): spesifisitasnya sama, jadi yang menang adalah yang belakangan. */ body[data-theme="black"] .profile-info-card::before { animation: none !important; --glow-angle: 45deg; } /* Style for the dedicated shadow/glow element inside the balance card */ body[data-theme="black"] .balance-card-glow { position: absolute !important; top: 1px !important; left: 1px !important; right: 1px !important; bottom: 1px !important; border-radius: 15px !important; box-shadow: inset 0 0 15px 2px rgba(0, 0, 0, 0.3), inset 0 0 12px rgba(241, 202, 118, 0.25) !important; pointer-events: none !important; display: block !important; background: transparent !important; z-index: 2 !important; } /* .wallet-balance base style (style.css) punya background putih translucent (rgba(255,255,255,.34)) buat tema default terang — bikin kotak abu-abu di atas kartu hitam. */ body[data-theme="black"] .balance-card .wallet-balance { background-color: transparent !important; } /* Teks nilai utama (h4) — Text Putih Netral */ body[data-theme="black"] .balance-card h4 { color: var(--th-text-white) !important; font-size: 20px !important; font-weight: 700 !important; } /* Label (h6 USDT, Aset Koin) — Text Sekunder */ body[data-theme="black"] .balance-card h6 { color: #D4B26F !important; opacity: 1 !important; font-weight: 500 !important; } /* Icon info/question bulat -> emas (lingkaran emas, huruf i / ? tembus) */ body[data-theme="black"] .bi-info-circle-fill, body[data-theme="black"] .bi-question-circle-fill { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border-radius: 50% !important; width: 14px !important; height: 14px !important; padding: 0 !important; margin-left: 5px !important; vertical-align: middle !important; /* `vertical-align` cuma berlaku untuk kotak inline. Sebagian ikon ini tinggal di dalam wadah `d-flex` (mis. #credit-saldo), dan di situ ikonnya jadi FLEX ITEM — `vertical-align` diabaikan total, lalu `align-items: stretch` bawaan bertemu `height: 14px` yang dipatok di atas sehingga ikonnya menempel ke tepi ATAS. Itu sebabnya sebagian ikon hint terlihat condong ke atas sementara sebagian lain (yang wadahnya bukan flex, atau yang sudah memakai kelas `align-self-center`) terlihat normal. `align-self` menutup celah itu dan tidak berefek apa-apa saat ikonnya memang bukan flex item. */ align-self: center !important; } body[data-theme="black"] .bi-info-circle-fill::before, body[data-theme="black"] .bi-question-circle-fill::before { display: block !important; background: linear-gradient(180deg, #FAD66C 0%, #B3861B 20%, #5E430B 55%, #1F1401 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; font-size: 14px !important; line-height: 1 !important; } /* KECUALI icon (?) di header halaman (asset/profit/saving/bonus/balancing): di situ dia berdampingan dengan icon refresh, jadi ikut perlakuan warna yang sama (gradient putih -> emas) supaya sebaris dan tidak jadi bulatan putih. */ body[data-theme="black"] .page-title .bi-question-circle-fill, body[data-theme="black"] .page-title .bi-info-circle-fill { display: inline-block !important; background: linear-gradient(180deg, #ffffff 0%, #DBB14E 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; border-radius: 0 !important; width: auto !important; height: auto !important; margin-left: 0 !important; } body[data-theme="black"] .page-title .bi-question-circle-fill::before, body[data-theme="black"] .page-title .bi-info-circle-fill::before { display: inline !important; background: none !important; -webkit-text-fill-color: inherit !important; font-size: inherit !important; line-height: inherit !important; } /* Di baris ikon header (`.page-title .flex.flex-row`), (?) berdampingan dengan ROI / gear / download / refresh yang semuanya sudah dinormalkan jadi kotak glyph setinggi font-size (styles/style.css, blok "BARIS IKON DI KANAN HEADER"). `display: inline-block` di rule atas membuat (?) kembali memakai kotak inline + `vertical-align: middle` sehingga duduk ~1.5px lebih rendah dari tetangganya. Khusus di baris itu dia ikut jadi block; gradasi `background-clip: text`-nya tidak terpengaruh. */ body[data-theme="black"] .page-title .flex.flex-row .bi-question-circle-fill, body[data-theme="black"] .page-title .flex.flex-row .bi-info-circle-fill { display: block !important; line-height: 1 !important; } /* Icon copy (clipboard) — inline style="color: black" (mis. tombol copy alamat withdrawal) jadi ilang di atas surface gelap. */ body[data-theme="black"] .bi-clipboard { color: var(--th-text) !important; } /* Input ".key" (WD address, IP list, dll) — background hitam solid, khusus tema elite (sama kayak treatment yang dipakai sebelumnya). Border cuma ditaruh di INPUT-nya, div wrapper ".key" di-reset polos biar gak dobel kotak (kalau wrapper-nya juga .key). */ body[data-theme="black"] input.key, body[data-theme="black"] .key input, body[data-theme="black"] .key input:focus, body[data-theme="black"] input.key:focus, body[data-theme="black"] #copy_wd_address, body[data-theme="black"] #otp-address { background-color: #000000 !important; background: #000000 !important; border: 0.5px solid var(--th-border) !important; border-color: var(--th-border) !important; color: var(--th-text) !important; } body[data-theme="black"] div.key, body[data-theme="black"] .form-custom:has(#otp-address) { background: transparent !important; border: none !important; box-shadow: none !important; } /* Teks Trading Volume row — Text Muted */ body[data-theme="black"] .balance-card .font-12, body[data-theme="black"] .balance-card .font-13, body[data-theme="black"] .balance-card .color-theme { color: #D4B26F !important; } body[data-theme="black"] .bi-chevron-right, body[data-theme="black"] .bi-chevron-double-right { background: linear-gradient(180deg, #FFF0AA 0%, #D1A13B 50%, #8A6421 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; display: inline-block !important; opacity: 1 !important; } /* Style for the refresh button to color it cyan/teal and position it cleanly */ body[data-theme="black"] .balance-card .refreshBtn-home { width: 16px !important; height: 16px !important; margin-left: 6px !important; vertical-align: middle !important; display: inline-block !important; } /* HR pemisah horizontal — base style.css bikin hr ini pakai background-image gradient HITAM (hr.horizontal.dark.full) + class .opacity-10, jadi kalau cuma di-set border-color hasilnya tetap tak terlihat di atas kartu hitam. Digambar ulang sebagai garis emas. */ body[data-theme="black"] .balance-card hr { height: 1px !important; border: 0 !important; opacity: 1 !important; background-color: transparent !important; background-image: linear-gradient( 90deg, rgba(212, 178, 111, 0.08), rgba(212, 178, 111, 0.55) 15%, rgba(212, 178, 111, 0.55) 85%, rgba(212, 178, 111, 0.08) ) !important; } /* Pemisah vertikal USDT | Aset Koin — markup-nya TIDAK punya class .v-divider, cuma
polos sebagai sibling .wallet-balance. Target lewat posisi. */ body[data-theme="black"] .balance-card .content > div:not(.wallet-balance) { background-color: rgba(255, 255, 255, 0.3) !important; opacity: 1 !important; width: 1px !important; } /* ========================================================================= 8) PROFILE INFO CARD — Telepon, Tingkat Bintang, Alamat Penarikan, Voucher Plan ========================================================================= */ /* Latar & border kartu ini TIDAK diatur di sini lagi — dia ikut blok `.balance-card` di bagian 7 supaya isian semi-transparan + cincin emas berputarnya identik. Rule lama (`--th-surface` opaque + border solid) dihapus karena akan membatalkan transparansinya. */ /* Label kiri (h5.font-13): abu-abu --th-text-muted */ /* Label kiri (Telepon, Tingkat Bintang, Alamat Penarikan, Voucher Plan, ...) dulu dipasang `--th-text-muted` sehingga terbaca abu-abu redup, padahal label itu justru penunjuk barisnya. Disamakan dengan tema acuan: label terang, dan yang justru diredupkan adalah baris "Berakhir pada" di bawah. */ body[data-theme="black"] .profile-info-card h5 { color: var(--th-text) !important; } /* Nilai kanan (h4): teks terang (kecuali teks status hijau) */ body[data-theme="black"] .profile-info-card h4:not(.color-soft-green):not(.color-green):not(.text-success) { color: var(--th-text) !important; opacity: 1 !important; } body[data-theme="black"] .profile-info-card h4 span { opacity: 1 !important; } /* Baris "Berakhir pada: Lifetime" adalah keterangan tambahan, bukan nilai utama — di markup-nya memang sudah `opacity-50`, tapi aturan h4 di atas memaksa `opacity: 1` sehingga jadi seterang nomor telepon di atasnya. Barisnya dikenali lewat `#expiration_time`; `:has()` dipakai karena keterangan ini berbagi kelas persis dengan baris nomor telepon (`h4.pt-1.font-12.font-600.opacity-50`) sehingga tidak bisa dibedakan dengan pemilih biasa. */ body[data-theme="black"] .profile-info-card h4:has(#expiration_time), body[data-theme="black"] .profile-info-card h4:has(#expiration_time) span { color: var(--th-text-secondary) !important; opacity: 1 !important; } /* Divider pemisah antar baris */ body[data-theme="black"] .profile-info-card .divider { background-color: var(--th-border) !important; opacity: 1 !important; } /* "Verified" text dan teks nilai kanan lainnya (color-black) */ body[data-theme="black"] .profile-info-card .color-black { color: var(--th-text) !important; } /* Fix inline color: black for dark themes in Profit Page */ body[data-theme="black"] .profit-top-card [style*="color: black"], body[data-theme="black"] .profit-list-card [style*="color: black"] { color: var(--th-text) !important; } /* Fix backgrounds for black & galaxy themes. Permukaan kartu memakai `--th-surface-glass` (bukan `--th-surface` yang opaque) supaya latar/video di belakangnya ikut tembus, seragam dengan balance card & kartu global. */ body[data-theme="black"] .profit-top-card, body[data-theme="black"] .profit-list-card { background-color: var(--th-surface-glass) !important; border: 0.5px solid var(--th-border) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } body[data-theme="black"] .profit-list-card { margin: 0 !important; } /* Baris di DALAM kartu list dibuat bening total — kalau ikut diberi glass, transparansinya bertumpuk dua kali dengan kartu pembungkusnya. */ body[data-theme="black"] .profit-list-card .bg-theme { background-color: transparent !important; } body[data-theme="black"] .profit-summary-row { background-color: var(--th-surface-glass) !important; border: 0.5px solid var(--th-border) !important; } /* ========================================================================= 6) TRADE PAGE HEADER STYLES (Elite, Galaxy, Black) ========================================================================= */ /* Strip search + sort di halaman Trade duduk langsung di atas video latar, dan bagian video yang lewat di belakangnya bisa terang (lengkung galaksi keemasan) sehingga teks & tombolnya nyaru. Yang diberi isian gelap hanya kontrolnya sendiri (kotak search + tombol sort), bukan panel selebar strip, supaya video latar tetap terlihat penuh di sekitarnya. */ body[data-theme="black"] .top-sort { position: relative !important; z-index: 1 !important; background: transparent !important; } /* Tanpa selubung/panel di belakang strip: kontrasnya diambil dari isian gelap pada kontrol-nya sendiri (kotak search & tombol sort di bawah), supaya video latar tetap terlihat penuh di sekitarnya. */ body[data-theme="black"] .top-sort .searchBar-container:not(.sort-content-tabel) { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Search Bar Container */ body[data-theme="black"] .searchBar-content { background-color: rgba(0, 0, 0, 0.55) !important; border: 0.5px solid var(--th-border) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7) !important; border-radius: 0.5rem !important; } /* Search Bar Input & Icons */ body[data-theme="black"] .searchBar-content .searchBar, body[data-theme="black"] #filter_coin { background-color: transparent !important; color: var(--th-text) !important; border: none !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none !important; } /* Reset / Cancel Button inside Search Bar */ body[data-theme="black"] .searchBar-content .cancelBtn, body[data-theme="black"] .searchBar-content .cancelSearch { background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 10px !important; margin: 0 !important; height: 100% !important; display: flex !important; align-items: center !important; color: var(--th-border-solid, #F1CA76) !important; font-weight: 600 !important; font-size: 14px !important; -webkit-appearance: none !important; } body[data-theme="black"] .searchBar-content .cancelSearch:hover { color: var(--th-border-gold-1, #FEF9A2) !important; } body[data-theme="black"] .searchBar-content .searchBar::placeholder { color: var(--th-text-hint, var(--th-text-muted)) !important; } body[data-theme="black"] .searchBar-content i { color: var(--th-text) !important; background-color: transparent !important; } /* Search / sort bar (halaman Trade) — agak transparan + blur supaya background tembus, bukan panel #131313 rata. `.bg-theme` ikut disebut karena rule .bg-theme memasang var(--th-surface) yang opak. */ body[data-theme="black"] .searchBar-container, body[data-theme="black"] .searchBar-container.bg-theme { background-color: var(--th-surface-glass) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; /* Bawaannya `px-0`, jadi label kolom nempel ke tepi panel. Diberi napas sedikit; 6px dipilih supaya tetap sejajar dengan baris list di bawahnya yang pakai `ps-1` (4px). */ padding-left: 6px !important; padding-right: 6px !important; } /* Label kolom (Tanggal / Keuntungan (USDT) / dst) memakai `opacity-40` bawaan — di atas panel gelap tema black itu nyaris tak terbaca. */ body[data-theme="black"] .searchBar-container p.color-theme { opacity: 0.7 !important; } /* Sort Buttons Overrides — tombol TIDAK aktif. Catatan: inline style tombol aktif diserialisasi Vue jadi `rgb(146, 75, 225)`, BUKAN `#924be1`, jadi :not([style*="924be1"]) saja tidak mengecualikannya (tombol aktif jadi ikut transparan / hilang highlight-nya). Kedua bentuk penulisan harus dicocokkan. */ body[data-theme="black"] .sort-content button:not([style*="924be1"]):not([style*="rgb(146, 75, 225)"]), body[data-theme="black"] .sort-content > div[style*="0.04"] { /* Isian hitam semi-transparan, bukan transparan penuh: bagian video yang terang di belakang strip ini membuat label tombol nyaru kalau tanpa isian. */ background-color: rgba(0, 0, 0, 0.55) !important; color: var(--th-text) !important; border: 1px solid var(--th-border) !important; } /* Sort Buttons Icons */ body[data-theme="black"] .sort-content button:not([style*="924be1"]):not([style*="rgb(146, 75, 225)"]) i, body[data-theme="black"] .sort-content > div i { color: var(--th-text-muted) !important; } /* Tombol sort AKTIF -> emas (inline-nya ungu #924be1 / rgb(146, 75, 225)) */ body[data-theme="black"] .sort-content button[style*="924be1"], body[data-theme="black"] .sort-content button[style*="rgb(146, 75, 225)"] { background: var(--th-accent-grad) !important; color: #131313 !important; border: 1px solid var(--th-accent) !important; box-shadow: var(--th-btn-primary-shadow) !important; } body[data-theme="black"] .sort-content button[style*="924be1"] i, body[data-theme="black"] .sort-content button[style*="rgb(146, 75, 225)"] i { color: #131313 !important; } /* Binance Text Override */ body[data-theme="black"] .sort-content > div p { color: var(--th-text) !important; } /* Fix Offcanvas / Drawer backgrounds for dark themes */ body[data-theme="black"] .offcanvas { background-color: var(--th-bg) !important; } body[data-theme="black"] #trade-footer-bar { position: relative !important; background: linear-gradient(180deg, #0d0b08, #1a140a, #0d0b08) !important; border: none !important; box-shadow: none !important; } body[data-theme="black"] #trade-footer-bar::before, body[data-theme="black"] #trade-footer-bar::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient(90deg, #4A3A0A 0%, #7A5C10 8%, #B8860B 14%, #FEF9A2 20%, #FBEA9D 26%, #DBB14E 34%, #B8860B 48%, #7A5C10 65%, #3D2E08 100%) !important; z-index: 2 !important; } body[data-theme="black"] #trade-footer-bar::before { top: 0 !important; } body[data-theme="black"] #trade-footer-bar::after { bottom: 0 !important; } body[data-theme="black"] #trade-footer-bar, body[data-theme="black"] #trade-footer-bar i, body[data-theme="black"] #trade-footer-bar div, body[data-theme="black"] #trade-footer-bar span { color: var(--th-border-solid, #F1CA76) !important; } body[data-theme="black"] .searchBar-container.bg-theme.sort-content-tabel, body[data-theme="black"] .sort-content-tabel { height: 30px !important; padding: 3px 0px 6px 0px !important; border: 0.5px solid var(--th-border-solid, #F1CA76) !important; border-bottom: 0.5px solid rgba(241, 202, 118, 0.4) !important; border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; max-width: 400px !important; margin: 0 auto !important; box-shadow: 0 -3px 10px rgba(241, 202, 118, 0.4), -3px 0 10px rgba(241, 202, 118, 0.3), 3px 0 10px rgba(241, 202, 118, 0.3), 0 4px 8px rgba(241, 202, 118, 0.3), inset 0 10px 10px -10px var(--th-border-solid, #F1CA76), inset 0 -10px 10px -10px var(--th-border-solid, #F1CA76) !important; background-color: #000000 !important; } body[data-theme="black"] .sort-content-tabel p, body[data-theme="black"] .sort-content-tabel .color-theme { color: #FFF4C2 !important; opacity: 0.9 !important; } body[data-theme="black"] #trade-page #binanceTicker { margin-top: 0 !important; } body[data-theme="black"] #trade-page .bg-binance-tick .ticker-card { border-left: 0.5px solid var(--th-border-solid, #F1CA76) !important; border-right: 0.5px solid var(--th-border-solid, #F1CA76) !important; border-bottom: 0.5px solid rgba(241, 202, 118, 0.25) !important; border-radius: 0 !important; margin-bottom: 0 !important; max-width: 400px !important; margin: 0 auto !important; background-color: #000000 !important; box-shadow: -3px 0 10px rgba(241, 202, 118, 0.3), 3px 0 10px rgba(241, 202, 118, 0.3) !important; } body[data-theme="black"] #trade-page .bg-binance-tick #binanceTicker > div > *:last-child .ticker-card, body[data-theme="black"] #trade-page .bg-binance-tick .ticker-card:last-child, body[data-theme="black"] #trade-page .bg-binance-tick .ticker-card:last-of-type { border-bottom: 0.5px solid var(--th-border-solid, #F1CA76) !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; box-shadow: -3px 0 10px rgba(241, 202, 118, 0.3), 3px 0 10px rgba(241, 202, 118, 0.3), 0 3px 10px rgba(241, 202, 118, 0.4) !important; } /* ========================================================= ELITE THEME: FIX STICKY HEADERS OVERLAPPING CARDS ========================================================= */ body[data-theme="black"] .top-header.sticky { background: transparent !important; background-image: none !important; z-index: 99 !important; transition: background-color 0.3s ease, background-image 0.3s ease; } body[data-theme="black"] .top-header.sticky.header-scrolled { background-image: var(--th-header-bg-img) !important; background-color: #111111 !important; background-size: cover !important; background-position: center !important; } /* Coin detail header when scrolled: no image, just 80% opacity dark (video shows subtly) */ body[data-theme="black"] #coin-details-header.header-scrolled { background-image: none !important; background-color: rgba(0, 0, 0, 0.80) !important; /* @80% */ background-size: auto !important; } /* Coin detail header icons -> gradient like the menu (non-default themes) */ /* Back chevron (font icon) */ body[data-theme="black"] #coin-details-header .bi-chevron-left { background: linear-gradient(180deg, #ffffff 0%, #DBB14E 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; display: inline-block; } /* 2. Header Right Action Icons (Refresh, Info, Question, Download, Gear, CSV) */ body[data-theme="black"] .page-title .bi-question-circle-fill, body[data-theme="black"] .page-title .bi-info-circle-fill, body[data-theme="black"] .page-title .bi-arrow-repeat, body[data-theme="black"] .page-title .refreshBtn i, body[data-theme="black"] .page-title .bi-download, body[data-theme="black"] .page-title .bi-gear, body[data-theme="black"] .page-title .bi-gear-fill, body[data-theme="black"] .page-title .bi-pie-chart-fill, body[data-theme="black"] #vue-download-csv-asset-credit i, body[data-theme="black"] #vue-download-csv-asset-credit .bi, body[data-theme="black"] #vue-download-csv-trasaction i, body[data-theme="black"] #vue-download-csv-trasaction .bi, body[data-theme="black"] #button-credit-downloads i, body[data-theme="black"] #button-credit-downloads .bi, body[data-theme="black"] button-new-tab-url-icon i, body[data-theme="black"] button-download i, body[data-theme="black"] .refreshBtn i, body[data-theme="black"] a.refresh i, body[data-theme="black"] .refreshBtn:not(.refreshBtn-home) i { background: linear-gradient(180deg, #ffffff 0%, #DBB14E 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; display: inline-block; opacity: 1 !important; } /* Action icons (PNG): fill the icon shape with the gradient via mask on the wrapper */ body[data-theme="black"] #coin-details-header .justify-end a:has(> img), body[data-theme="black"] .page-title .justify-end a:has(> img) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px; height: 20px; background: linear-gradient(180deg, #ffffff 0%, #DBB14E 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } body[data-theme="black"] #coin-details-header .justify-end a:has(> img) > img, body[data-theme="black"] .page-title .justify-end a:has(> img) > img { visibility: hidden; } body[data-theme="black"] #coin-details-header a:has(> img[src*="graph-icon"]), body[data-theme="black"] .page-title a:has(> img[src*="graph-icon"]) { -webkit-mask-image: url("../../../images/pictures/graph-icon.png"); mask-image: url("../../../images/pictures/graph-icon.png"); } body[data-theme="black"] #coin-details-header a:has(> img[src*="profit-summary-icon"]), body[data-theme="black"] .page-title a:has(> img[src*="profit-summary-icon"]) { -webkit-mask-image: url("../../../images/pictures/profit-summary-icon.png"); mask-image: url("../../../images/pictures/profit-summary-icon.png"); } body[data-theme="black"] #coin-details-header a:has(> img[src*="transaction-icon"]), body[data-theme="black"] .page-title a:has(> img[src*="transaction-icon"]) { -webkit-mask-image: url("../../../images/pictures/transaction-icon.png"); mask-image: url("../../../images/pictures/transaction-icon.png"); } /* Border/glow-nya dulu putih (rgba(255,255,255,.2) + glow putih), jadi kartu ini terbaca abu polos di antara kartu lain yang bergaris emas. Disamakan dengan treatment kartu standar tema black. */ body[data-theme="black"] #user-asset > .content:first-child, body[data-theme="black"] #user-profit > .content:first-child { background-color: rgba(10, 10, 10, 0.5) !important; border: 1px solid var(--th-border-solid, #F1CA76) !important; box-shadow: 0 0 12px rgba(241, 202, 118, 0.35) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } body[data-theme="black"] #user-asset > .content:first-child h6, body[data-theme="black"] #user-asset > .content:first-child i:not(.color-purple), body[data-theme="black"] #user-asset > .content:first-child [style*="color: black"], body[data-theme="black"] #user-asset > .content:first-child [style*="color:black"], body[data-theme="black"] #user-profit > .content h6, body[data-theme="black"] #user-profit > .content i:not(.color-purple), body[data-theme="black"] #user-profit > .content [style*="color: black"], body[data-theme="black"] #user-profit > .content [style*="color:black"] { color: #FDFDFE !important; } /* Pembungkus luar (.content) untuk withdrawal tidak memiliki border/background agar tidak timbul garis saat collapsed atau double border */ body[data-theme="black"] .content:has(> #div-withdrawal-bonus), body[data-theme="black"] .content:has(> #div-withdrawal-asset) { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } body[data-theme="black"] .content:has(> .display-withdrawal-off) { display: none !important; border: none !important; box-shadow: none !important; background: transparent !important; } /* Card form withdrawal itu sendiri saat terbuka (#div-withdrawal-asset & #div-withdrawal-bonus) */ body[data-theme="black"] #div-withdrawal-asset, body[data-theme="black"] #div-withdrawal-bonus { background-color: rgba(19, 19, 19, 0.85) !important; border: 1px solid rgba(241, 202, 118, 0.35) !important; box-shadow: inset 0 0 10px rgba(241, 202, 118, 0.3) !important; padding: 15px !important; } body[data-theme="black"] #div-withdrawal-asset .input-group, body[data-theme="black"] #div-withdrawal-bonus .input-group { background-color: var(--th-surface-2) !important; border: 1px solid var(--th-border) !important; border-radius: 8px !important; box-shadow: none !important; margin-bottom: 12px !important; overflow: hidden; } body[data-theme="black"] #div-withdrawal-asset .input-group-text, body[data-theme="black"] #div-withdrawal-bonus .input-group-text { background-color: transparent !important; border: none !important; color: var(--th-text) !important; } body[data-theme="black"] #div-withdrawal-asset .input-group-prepend .input-group-text, body[data-theme="black"] #div-withdrawal-bonus .input-group-prepend .input-group-text { border-right: 1px solid var(--th-border) !important; border-radius: 0 !important; } body[data-theme="black"] #div-withdrawal-asset .input-group-append .input-group-text:not(.btn-uni), body[data-theme="black"] #div-withdrawal-bonus .input-group-append .input-group-text:not(.btn-uni) { border-left: 1px solid var(--th-border) !important; border-radius: 0 !important; } body[data-theme="black"] #div-withdrawal-asset .form-control, body[data-theme="black"] #div-withdrawal-bonus .form-control { background-color: transparent !important; border: none !important; color: var(--th-text) !important; box-shadow: none !important; } body[data-theme="black"] #div-withdrawal-asset .form-control::placeholder, body[data-theme="black"] #div-withdrawal-bonus .form-control::placeholder { color: var(--th-text-muted) !important; } /* Tombol "Send Code" — border-nya sebelumnya hardcode putih, sekarang ikut warna aksen tema (bukan sekadar putih polos). */ body[data-theme="black"] #div-withdrawal-asset .btn-uni#basic-addon2, body[data-theme="black"] #div-withdrawal-bonus .btn-uni#basic-addon2 { background: var(--th-accent-grad) !important; border: 1px solid var(--th-accent) !important; box-shadow: var(--th-btn-primary-shadow) !important; color: #ffffff !important; border-radius: 6px !important; margin: 3px !important; padding: 4px 8px !important; height: auto !important; font-weight: 500 !important; } body[data-theme="black"] #div-withdrawal-asset h5, body[data-theme="black"] #div-withdrawal-bonus h5, body[data-theme="black"] #div-withdrawal-bonus p.color-gray { color: var(--th-text) !important; } body[data-theme="black"] .color-purple, body[data-theme="black"] h5.color-purple, body[data-theme="black"] p.color-purple, body[data-theme="black"] span.color-purple, body[data-theme="black"] #div-withdrawal-asset p.color-purple, body[data-theme="black"] #div-withdrawal-bonus p.color-purple { color: var(--th-accent-2, #F5CD6B) !important; } /* ========================================================= BLACK THEME SPECIFIC OVERRIDES FOR API CONNECT PAGES ========================================================= */ /* General text colors & icons */ body[data-theme="black"] #api-connect-page h3.color-theme, body[data-theme="black"] #api-connect-okx-page h3.color-theme, body[data-theme="black"] #api-connect-tokocrypto-page h3.color-theme { color: white !important; } body[data-theme="black"] #api-connect-page .bi-question-circle-fill, body[data-theme="black"] #api-connect-okx-page .bi-question-circle-fill, body[data-theme="black"] #api-connect-tokocrypto-page .bi-question-circle-fill { color: var(--th-accent, #FFC85B) !important; } /* Status text overrides */ body[data-theme="black"] #api-connect-page h3.color-white, body[data-theme="black"] #api-connect-okx-page h3.color-white, body[data-theme="black"] #api-connect-tokocrypto-page h3.color-white { color: white !important; } /* Guidelines body text */ body[data-theme="black"] #api-connect-page i[style*="font-style: normal"], body[data-theme="black"] #api-connect-okx-page i[style*="font-style: normal"], body[data-theme="black"] #api-connect-tokocrypto-page i[style*="font-style: normal"] { color: var(--th-text-muted, #9B9591) !important; } /* Inputs wrapper — Pitch black background with subtle rim inner shadow */ body[data-theme="black"] #api-connect-page .content, body[data-theme="black"] #api-connect-okx-page .content, body[data-theme="black"] #api-connect-tokocrypto-page .content { background-color: #0b0b0b !important; border: 1px solid rgba(241, 202, 118, 0.35) !important; box-shadow: inset 0 0 6px rgba(241, 202, 118, 0.25) !important; padding-bottom: 16px !important; } body[data-theme="black"] #api-connect-page [class*="input-screate-key"], body[data-theme="black"] #api-connect-okx-page [class*="input-screate-key"], body[data-theme="black"] #api-connect-tokocrypto-page [class*="input-screate-key"], body[data-theme="black"] #api-connect-page [class*="input-secret-key"], body[data-theme="black"] #api-connect-okx-page [class*="input-secret-key"], body[data-theme="black"] #api-connect-tokocrypto-page [class*="input-secret-key"] { margin-bottom: 8px !important; padding-bottom: 4px !important; } body[data-theme="black"] #api-connect-page .content::before, body[data-theme="black"] #api-connect-okx-page .content::before, body[data-theme="black"] #api-connect-tokocrypto-page .content::before { display: none !important; box-shadow: none !important; } /* .content yg cuma bungkus teks "Don't have account? Register now" gak perlu glow/card look — kena rule di atas juga soalnya sama-sama ".content" di halaman yang sama. Di-reset polos khusus buat yang isinya cuma .key teks. */ body[data-theme="black"] #api-connect-page .content:has(> .key > .color-theme), body[data-theme="black"] #api-connect-okx-page .content:has(> .key > .color-theme), body[data-theme="black"] #api-connect-tokocrypto-page .content:has(> .key > .color-theme) { background: transparent !important; box-shadow: none !important; border: none !important; } /* The actual text inputs */ body[data-theme="black"] #api-connect-page input.key, body[data-theme="black"] #api-connect-okx-page input.key, body[data-theme="black"] #api-connect-tokocrypto-page input.key { background: #000000 !important; border: 1px solid var(--th-border) !important; color: var(--th-text) !important; border-radius: 8px !important; padding: 0 10px !important; box-shadow: none !important; } /* Input Placeholder */ body[data-theme="black"] #api-connect-page input.key::placeholder, body[data-theme="black"] #api-connect-okx-page input.key::placeholder, body[data-theme="black"] #api-connect-tokocrypto-page input.key::placeholder { color: var(--th-text-hint, rgba(255, 255, 255, 0.3)) !important; } /* Paste/Copy buttons */ body[data-theme="black"] #api-connect-page .btn-copy, body[data-theme="black"] #api-connect-okx-page .btn-copy, body[data-theme="black"] #api-connect-tokocrypto-page .btn-copy { background: var(--th-accent-grad, linear-gradient(135deg, #ffb72a, #ab7a09)) !important; border: 1px solid var(--th-accent, #ffb72a) !important; color: white !important; border-radius: 6px !important; box-shadow: var(--th-btn-primary-shadow) !important; } /* Connect / Disconnect Buttons */ body[data-theme="black"] #api-connect-page .bottomButton .btn, body[data-theme="black"] #api-connect-okx-page .bottomButton .btn, body[data-theme="black"] #api-connect-tokocrypto-page .bottomButton .btn { background-image: var(--th-bg-api-btn, none) !important; background-size: cover !important; background-position: center !important; border: 1px solid rgba(241, 202, 118, 0.6) !important; color: white !important; box-shadow: 0 0 12px rgba(241, 202, 118, 0.3) !important; } /* Back button */ body[data-theme="black"] #api-connect-page .bottomButton-back .btn, body[data-theme="black"] #api-connect-okx-page .bottomButton-back .btn, body[data-theme="black"] #api-connect-tokocrypto-page .bottomButton-back .btn { background-color: transparent !important; border: none !important; color: var(--th-accent, #FFC85B) !important; } /* Box for Spotlution IPs / Status Box Border opaque + background-clip padding-box supaya bg image tidak menutupi border translucent (border terlihat "kepotong") */ body[data-theme="black"] #api-connect-page .gradient-purple-2, body[data-theme="black"] #api-connect-okx-page .gradient-purple-2, body[data-theme="black"] #api-connect-tokocrypto-page .gradient-purple-2 { border: 1px solid rgba(241, 202, 118, 0.5) !important; box-shadow: 0 0 7px rgba(241, 202, 118, 0.4) !important; background-clip: padding-box !important; } body[data-theme="black"] #api-connect-form-binance .gradient-purple-2, body[data-theme="black"] #api-connect-form-okx .gradient-purple-2, body[data-theme="black"] #api-connect-form-tokocrypto .gradient-purple-2 { background-image: var(--th-bg-api-ip, none) !important; background-size: cover !important; background-position: center !important; } body[data-theme="black"] #api-connect-page > .gradient-purple-2, body[data-theme="black"] #api-connect-okx-page > .gradient-purple-2, body[data-theme="black"] #api-connect-tokocrypto-page > .gradient-purple-2 { background-image: var(--th-bg-api-status, none) !important; background-size: cover !important; background-position: center !important; background-clip: padding-box !important; } body[data-theme="black"] #api-connect-page .color-theme, body[data-theme="black"] #api-connect-okx-page .color-theme, body[data-theme="black"] #api-connect-tokocrypto-page .color-theme { color: var(--th-text-muted, #9B9591) !important; } body[data-theme="black"] #api-connect-page .color-theme a, body[data-theme="black"] #api-connect-okx-page .color-theme a, body[data-theme="black"] #api-connect-tokocrypto-page .color-theme a { color: var(--th-accent, #FFC85B) !important; } /* Menu drawer icons -> putih (bukan ungu) di semua tema gelap */ body[data-theme="black"] .nav-container .nav li a i { color: #ffffff !important; } body[data-theme="black"] .dropdown-menu { background-color: #131313 !important; border: 1px solid rgba(241, 202, 118, 0.4) !important; box-shadow: 0 0 15px rgba(241, 202, 118, 0.2) !important; } body[data-theme="black"] .dropdown-menu .dropdown-item { color: white !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; } body[data-theme="black"] .dropdown-menu .dropdown-item:last-child { border-bottom: none !important; } body[data-theme="black"] .dropdown-menu .dropdown-item:hover, body[data-theme="black"] .dropdown-menu .dropdown-item:focus, body[data-theme="black"] .dropdown-menu .dropdown-item.active { background-color: var(--th-accent, #FFC85B) !important; color: white !important; } /* ========================================================= ELITE THEME: KEUNTUNGAN HARIAN (INFO-PROFIT) CARDS ========================================================= */ /* Rincian profit: bentuk item sama seperti default (flat, siku, shadow lembut, tanpa margin antar item) — hanya warnanya mengikuti tema */ /* Kartu item dirender lewat `v-for`, jadi ada BANYAK kartu bertumpuk dengan `margin: 0`. Waktu tiap kartu memasang border penuh 1px, tepi bawah kartu atas dan tepi atas kartu di bawahnya saling menempel — terbaca sebagai garis dobel 2px di antara item. Background gelap per kartu juga menutup video latar drawer, padahal header drawer ini sengaja dibuat transparan supaya videonya terlihat. Jadi: background & box-shadow dilepas, dan border penuh diganti SATU garis bawah saja. Antar item tetap ada pemisah, tapi cuma 1px — tidak dobel. (`.divider` di dalam kartu memisahkan baris tanggal dari baris detail, bukan memisahkan antar item, jadi tidak bisa dipakai untuk peran ini.) */ body[data-theme="black"] #vue-info-profit .card.card-style { background-color: transparent !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; } /* Pemisah antar item diambil dari `.divider` DI DALAM kartu, bukan dari border kartu — jadi tidak ada garis dobel waktu kartu bertumpuk. Bawaannya `rgba(0, 0, 0, 0.07)` (style.css:3348): hitam di atas latar hitam alias tidak kelihatan sama sekali, itu yang bikin drawer ini terbaca "belum bertema". */ body[data-theme="black"] #vue-info-profit .divider { background-color: rgba(241, 202, 118, 0.25) !important; opacity: 0.6 !important; } /* Teks kartu Rincian: nilai pakai `.color-theme`/inline color, tapi label dan angka profit negatif tidak punya kelas apa pun sehingga jatuh ke `.theme-dark p` (#898989) — kelabu redup di atas video. Disamakan dengan riwayat transaksi: isi terang, label abu-abu sekunder. */ body[data-theme="black"] #vue-info-profit p { color: #e2e8f0 !important; } body[data-theme="black"] #vue-info-profit .font-11:not(.color-theme) { color: #94a3b8 !important; } body[data-theme="black"] #vue-info-profit .color-black, body[data-theme="black"] #vue-info-profit [style*="color: black"], body[data-theme="black"] #vue-info-profit [style*="color:black"] { color: #ffffff !important; } /* Nama koin (BTC, ETH, ...) di kartu Rincian masih ungu tema elite. PENTING: ungu di sini ditulis `rgb(146, 76, 227)` (info-profit.html:73), BEDA satu-dua digit dari `rgb(146, 75, 225)` / #924be1 yang dipakai di halaman lain — itu sebabnya semua aturan penimpa ungu yang sudah ada tidak pernah mengenainya dan warnanya tetap ungu di tema black. Bentuk hex-nya ikut disebut kalau-kalau markup-nya ditulis ulang. */ body[data-theme="black"] #vue-info-profit [style*="color: rgb(146, 76, 227)"], body[data-theme="black"] #vue-info-profit [style*="color:rgb(146, 76, 227)"], body[data-theme="black"] #vue-info-profit [style*="color: rgb(146,76,227)"], body[data-theme="black"] #vue-info-profit [style*="color:rgb(146,76,227)"], body[data-theme="black"] #vue-info-profit [style*="color: #924ce3"], body[data-theme="black"] #vue-info-profit [style*="color:#924ce3"] { color: var(--th-accent-2, #F5CD6B) !important; } body[data-theme="black"] #vue-info-profit [style*="color: #36b693"], body[data-theme="black"] #vue-info-profit [style*="color: rgb(54, 182, 147)"], body[data-theme="black"] #vue-info-profit [style*="color:rgb(54, 182, 147)"] { color: var(--th-status-positive, #4ED58B) !important; } /* Collapse section di dalam kartu formula (TA, Trailing Profit, dll.): tanpa border/box sendiri — cukup ikut kartu induknya (seperti di strategy) */ body[data-theme="black"] #body-formula [id^="collapse-list"].bg-theme, body[data-theme="black"] #body-batch-formula [id^="collapse-list"].bg-theme, body[data-theme="black"] #collapse-moon-logic-formula.bg-theme, body[data-theme="black"] #collapse-moon-logic-batch-formula.bg-theme { background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Coin detail cards: 85% transparent + gold border + gold inner shadow */ body[data-theme="black"] #coin-setting .content.bg-theme { background-color: rgba(19, 19, 19, 0.85) !important; border: 1px solid rgba(241, 202, 118, 0.35) !important; box-shadow: inset 0 0 10px rgba(241, 202, 118, 0.3) !important; } /* Coin Detail Text Colors */ body[data-theme="black"] #coin-setting [style*="color:black"], body[data-theme="black"] #coin-setting [style*="color: black"], body[data-theme="black"] #coin-setting .color-black, body[data-theme="black"] #coin-setting .color-gray-dark { color: #e0e0e0 !important; } body[data-theme="black"] #coin-setting .color-theme { color: var(--th-accent-2, #F5CD6B) !important; } body[data-theme="black"] #coin-setting h5, body[data-theme="black"] #coin-setting h6, body[data-theme="black"] #coin-setting span:not(.badge), body[data-theme="black"] #coin-setting p, body[data-theme="black"] #coin-setting label { color: white !important; } /* Apply Metallic Gold Gradient to all icons (including inline colored icons like #924be1, #36b693, #d84558) `.bi-question-circle-fill` & `.bi-info-circle-fill` DIKECUALIKAN. Glyph ikon "-fill" itu piringan penuh dengan huruf (?/i) sebagai LUBANG. Aturan di bawah menimpa `background` elemen dengan gradasi lalu `background-clip: text` — artinya piringan putih yang biasanya berdiri di BELAKANG glyph (lihat rule `.bi-question-circle-fill` di ~baris 520) hilang, dan lubangnya meneruskan latar halaman yang gelap. Efeknya tanda tanyanya terbaca hitam, beda dengan (?) di tempat lain yang lubangnya putih. Dengan dikecualikan, keduanya kembali memakai perlakuan standar tema. */ body[data-theme="black"] #coin-setting i:not(.bi-question-circle-fill):not(.bi-info-circle-fill), body[data-theme="black"] #coin-setting .settings-item i, body[data-theme="black"] #coin-setting .settings-grid i, body[data-theme="black"] #coin-setting .settings-grid2 i, body[data-theme="black"] #coin-setting [style*="color: #924be1"], body[data-theme="black"] #coin-setting [style*="color:#924be1"], body[data-theme="black"] #coin-setting [style*="color: #36b693"], body[data-theme="black"] #coin-setting [style*="color:#36b693"], body[data-theme="black"] #coin-setting [style*="color: #d84558"], body[data-theme="black"] #coin-setting [style*="color:#d84558"], body[data-theme="black"] #coin-setting .fa-balance-scale, body[data-theme="black"] #coin-setting .fa-tools, body[data-theme="black"] #coin-setting .fa-traffic-light, body[data-theme="black"] #coin-setting .fa-box { background: linear-gradient(180deg, #FFFFFF 0%, #FEF9A2 38%, #FFC85B 72%, #DBB14E 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: var(--th-accent-2, #F5CD6B) !important; display: inline-block !important; filter: drop-shadow(0 0 4px rgba(255, 200, 91, 0.4)) !important; } /* Metallic Gold Gradient for Settings Item text labels ("Avg: ON", "Moon Logic", "Formula", "Non-Stop", "Partial") */ body[data-theme="black"] #coin-setting .settings-item h6, body[data-theme="black"] #coin-setting .settings-grid h6, body[data-theme="black"] #coin-setting .settings-grid2 h6 { background: linear-gradient(180deg, #FFFFFF 0%, #FEF9A2 38%, #FFC85B 72%, #DBB14E 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: var(--th-accent-2, #F5CD6B) !important; display: inline-block !important; font-weight: 600 !important; } /* FORCE BUY & FORCE SELL buttons in Black theme with Gold Inner Shadow */ body[data-theme="black"] #btn-force-buy { background: linear-gradient(135deg, rgba(27, 138, 90, 0.85), rgba(13, 82, 52, 0.85)) !important; border: 1px solid rgba(254, 249, 162, 0.5) !important; box-shadow: inset 0 0 10px rgba(254, 249, 162, 0.5), 0 0 12px rgba(54, 182, 147, 0.3) !important; } body[data-theme="black"] #btn-force-sell { background: linear-gradient(135deg, rgba(168, 46, 62, 0.85), rgba(99, 23, 34, 0.85)) !important; border: 1px solid rgba(254, 249, 162, 0.5) !important; box-shadow: inset 0 0 10px rgba(254, 249, 162, 0.5), 0 0 12px rgba(216, 69, 88, 0.3) !important; } body[data-theme="black"] #body-formula .form-control, body[data-theme="black"] #body-batch-formula .form-control, body[data-theme="black"] #coin-setting .form-control, body[data-theme="black"] #vue-transaction-history .form-control, body[data-theme="black"] #user-summary .form-control, body[data-theme="black"] #user-profit-summary .form-control, body[data-theme="black"] #user-roi-setting .form-control, body[data-theme="black"] #vue-trading-history-body .form-control, body[data-theme="black"] #body-balancing-configuration .form-control { background-color: transparent !important; border: 0.5px solid rgba(241, 202, 118, 0.3) !important; color: white !important; } body[data-theme="black"] #user-roi-setting .input-group { background-color: var(--th-surface-2, #1b1b1b) !important; border: 1px solid rgba(241, 202, 118, 0.6) !important; border-radius: 8px !important; box-shadow: 0 0 10px rgba(241, 202, 118, 0.25) !important; overflow: hidden; } body[data-theme="black"] #user-roi-setting .input-group:focus-within { border-color: #f1ca76 !important; box-shadow: 0 0 10px rgba(241, 202, 118, 0.4) !important; } body[data-theme="black"] #user-roi-setting .input-group .input-group-text { background-color: transparent !important; border: none !important; border-radius: 0 !important; color: white !important; border-right: 1px solid rgba(241, 202, 118, 0.3) !important; } body[data-theme="black"] #user-roi-setting .input-group .form-control, body[data-theme="black"] #user-roi-setting #roi-setting-capital, body[data-theme="black"] #user-roi-setting #roi-setting-year { background-color: #000000 !important; background: #000000 !important; border: none !important; box-shadow: none !important; color: white !important; } body[data-theme="black"] #user-roi-setting .input-group .form-control::placeholder, body[data-theme="black"] #user-roi-setting #roi-setting-capital::placeholder { color: var(--th-text-muted, rgba(255, 255, 255, 0.4)) !important; } /* Fix checkboxes/radios visibility in Elite Mode */ body[data-theme="black"] .form-check-input { border-color: #cccccc !important; background-color: transparent !important; border-radius: 50% !important; } body[data-theme="black"] .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), linear-gradient(135deg, #FFC85B 0%, #DBB14E 100%) !important; background-size: 80% 80%, 100% 100% !important; background-position: center, center !important; background-repeat: no-repeat !important; border-color: #FFC85B !important; } /* ========================================================= DYNAMIC THEME: SWEETALERT & MODALS ========================================================= */ body[data-theme="black"] .swal2-popup, body[data-theme="black"] .modal-content, body[data-theme="black"] .offcanvas, body[data-theme="black"] .dialog-ovelay .dialog, body[data-theme="black"] .dialog-ovelay-2 .dialog, body[data-theme="black"] .popUp .card.card-style { background-color: var(--th-surface) !important; color: var(--th-text) !important; border: 1px solid var(--th-border) !important; box-shadow: 0 0 20px var(--th-shadow), inset 0 0 20px 5px rgba(0, 0, 0, 0.65), inset 0 0 15px var(--th-border) !important; /* Add glowing shadow to the modal */ } /* `.center.popUp` di halaman profil (OTP, Insert Address, Show Address, Change Password) DULU dikira panel inline lalu diberi isian semi-transparan. Nyatanya dia modal: markup-nya selalu berpasangan dengan `.bg-overlay` penuh layar, jadi isi halaman terbaca menembus panelnya. Isiannya kembali opaque; lihat blok "MODAL — PERMUKAAN WAJIB OPAK" di akhir berkas yang menutup jalur lain (rule kartu global) untuk kasus yang sama. */ body[data-theme="black"] .center.popUp .card.card-style { background-color: #080808 !important; box-shadow: 0 0 12px rgba(241, 202, 118, 0.35) !important; } /* Semua drawer offcanvas + footer-nya digelapkan — padanan elit:1216. */ body[data-theme="black"] .offcanvas, body[data-theme="black"] .offcanvas-footer { background-color: #000000 !important; } /* Lapisan penutup panel/drawer — padanan elit:1491 ("Extra glow"). Dua hal yang diperbaiki blok ini: 1. box-shadow di blok atas TIDAK PERNAH aktif. `--th-shadow` isinya value shadow lengkap (`0 0 10px rgba(241,202,118,.2)`), jadi menulis `0 0 20px var(--th-shadow)` menghasilkan `0 0 20px 0 0 10px rgba(...)` — kelebihan panjang, invalid at computed-value time, dan SELURUH deklarasi box-shadow dibuang. Panelnya jadi rata tanpa glow, tepinya terbaca hitam. Elit lolos dari bug yang sama (elit:1479) karena ditimpa lapisan ini; black belum punya lapisannya, makanya tampak beda. 2. Panel dibuat 90% opak seperti elit, supaya latar tembus sedikit dan panelnya tidak terasa seperti kotak mati. Palette-nya tetap black: emas, bukan ungu. */ body[data-theme="black"] .swal2-popup, body[data-theme="black"] .modal-content, body[data-theme="black"] .offcanvas, body[data-theme="black"] .dialog-ovelay .dialog, body[data-theme="black"] .dialog-ovelay-2 .dialog, body[data-theme="black"] .popUp .card.card-style { background-color: #080808 !important; border: 1px solid rgba(241, 202, 118, 0.35) !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.9), inset 0 0 6px rgba(241, 202, 118, 0.25) !important; } /* Custom styling for SweetAlert custom dialog elements (Coin Group Volatility alerts, etc.) */ /* `#swal-confirm-btn-set-recomendation` (dialog Set Rekomendasi) ikut disebut: markup-nya kembar dengan #swal-confirm-btn — ungu inline #9b5de5 yang sama — tapi id-nya beda satu kata, jadi selama ini tidak pernah kena aturan tema mana pun dan tetap ungu polos. */ body[data-theme="black"] #swal-confirm-btn, body[data-theme="black"] #swal-confirm-btn-set-recomendation { background: var(--th-accent-grad, #FFC85B) !important; color: white !important; border: none !important; box-shadow: var(--th-btn-primary-shadow) !important; } /* Glow-nya sempat tidak kelihatan sama sekali walaupun box-shadow di atas sudah benar: SweetAlert2 v11 memasang `overflow: auto` pada `.swal2-html-container`, dan halo yang jatuh DI LUAR kotak tombol dipotong oleh clipping itu. Tombolnya menempel ke tepi container (flex row + gap), jadi yang terpotong justru sisi yang paling kelihatan. Clipping dimatikan hanya pada container yang memang berisi tombol ini — container swal lain tetap bisa men-scroll konten panjang seperti biasa. */ body[data-theme="black"] .swal2-html-container:has(#swal-confirm-btn), body[data-theme="black"] .swal2-html-container:has(#swal-confirm-btn-set-recomendation) { overflow: visible !important; } body[data-theme="black"] #swal-cancel-btn { background: transparent !important; color: var(--th-text) !important; border: 1px solid var(--th-border) !important; } body[data-theme="black"] .swal2-popup .text-xl-coin-group { color: var(--th-text) !important; } body[data-theme="black"] .swal2-popup .bg-red-box-coin-group { background-color: rgba(220, 38, 38, 0.15) !important; border: 1px solid rgba(220, 38, 38, 0.3) !important; border-radius: 8px; padding: 10px; margin: 10px 0; } body[data-theme="black"] .swal2-popup .bg-red-box-coin-group p, body[data-theme="black"] .swal2-popup .bg-red-box-coin-group ul, body[data-theme="black"] .swal2-popup .bg-red-box-coin-group li { color: #fca5a5 !important; } body[data-theme="black"] .swal2-popup div[style*="background-color: #eef2ff"], body[data-theme="black"] .swal2-popup div[style*="background-color:#eef2ff"] { background-color: rgba(241, 202, 118, 0.15) !important; color: var(--th-text) !important; } body[data-theme="black"] .swal2-popup div[style*="background-color: #eef2ff"] strong, body[data-theme="black"] .swal2-popup div[style*="background-color:#eef2ff"] strong { color: var(--th-accent) !important; } /* Global Cards Glossy Glow Override. .balance-card dikecualikan (sama seperti rule global di bagian GLOBAL CARD BACKGROUND): dia punya isian semi-transparan + border conic sendiri, dan selector ini lebih spesifik sehingga kalau ikut match, background-image opaque `--th-surface` di sini akan menimpa isian transparannya. */ body[data-theme="black"] .card.card-style:not(.balance-card):not(.profile-info-card), body[data-theme="black"] .accordion-header.card.card-style:not(.balance-card):not(.profile-info-card) { position: relative !important; background-color: var(--th-surface-glass) !important; background-image: none !important; /* Border NYATA, bukan pseudo-element. Sempat dicoba cincin ::after ber-mask, dan itu sumber DOUBLE BORDER di mana-mana: banyak rule per-halaman (asset, bonus, profit, strategy, riwayat transaksi) sudah menggambar `border: 1px solid` sendiri, dan cincin pseudo-element tidak bisa ditimpa oleh deklarasi `border` — hasilnya dua garis emas. Dengan border biasa, rule per-halaman cukup menimpanya seperti properti lain. Ini juga pola yang sudah dipakai di bagian STRATEGY di bawah. */ border: 1px solid var(--th-border-solid, #F1CA76) !important; border-radius: 16px !important; box-shadow: 0 0 12px rgba(241, 202, 118, 0.35) !important; } /* CATATAN: rule ini SENGAJA tanpa `backdrop-filter`. Selectornya mengenai puluhan kartu per halaman, dan backdrop-filter termasuk properti termahal — tiap elemen jadi layer compositor sendiri dan latarnya di-blur ulang tiap frame, apalagi di atas video yang berjalan. Blur hanya dipasang di kartu yang benar-benar duduk di atas video (balance card & profile info card). Alpha 0.62 sendiri sudah cukup meredam latar tanpa blur. */ /* Prevent transparent wrappers from getting borders and shadows */ body[data-theme="black"] .pt-2 > .card.card-style, body[data-theme="black"] .card.card-style.bg-transparent, body[data-theme="black"] .card.card-style[style*="background-color: transparent"], body[data-theme="black"] .card.card-style[style*="background: transparent"], body[data-theme="black"] #quick-action-card { border: none !important; box-shadow: none !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body[data-theme="black"] #quick-action-card::before { content: none !important; display: none !important; } /* Label quick action menimpa bagian terang video (cincin emas) — beri shadow gelap supaya tetap terbaca, dan buang opacity-80 yang ikut menurunkan kontras. */ body[data-theme="black"] #quick-action-card h6 { opacity: 1 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.6) !important; } body[data-theme="black"] .swal2-title, body[data-theme="black"] .swal2-html-container, body[data-theme="black"] .swal2-content, body[data-theme="black"] .modal-title, body[data-theme="black"] .modal-body, body[data-theme="black"] .modal-header h2, body[data-theme="black"] .swal2-popup .color-black, body[data-theme="black"] .swal2-popup [style*="color: black"], body[data-theme="black"] .swal2-popup [style*="color:black"] { color: white !important; } body[data-theme="black"] .modal-content h1, body[data-theme="black"] .modal-content h2, body[data-theme="black"] .modal-content h3, body[data-theme="black"] .modal-content h4, body[data-theme="black"] .modal-content h5, body[data-theme="black"] .modal-content h6, body[data-theme="black"] .offcanvas-title, body[data-theme="black"] .offcanvas-body, body[data-theme="black"] .dialog-ovelay .dialog header h2, body[data-theme="black"] .dialog-ovelay .dialog header h3, body[data-theme="black"] .dialog-ovelay .dialog .dialog-msg p, body[data-theme="black"] .dialog-ovelay-2 .dialog header h2, body[data-theme="black"] .dialog-ovelay-2 .dialog header h3, body[data-theme="black"] .dialog-ovelay-2 .dialog .dialog-msg p, body[data-theme="black"] .popUp .card.card-style div, body[data-theme="black"] .popUp .card.card-style p, body[data-theme="black"] .popUp .card.card-style span, body[data-theme="black"] .popUp .card.card-style a, body[data-theme="black"] .popUp .card.card-style .color-black { color: var(--th-text) !important; } body[data-theme="black"] .dialog-ovelay .dialog header, body[data-theme="black"] .dialog-ovelay-2 .dialog header { background-color: transparent !important; border-bottom: 1px solid var(--th-border) !important; } body[data-theme="black"] .modal-header, body[data-theme="black"] .modal-footer { border: none !important; } body[data-theme="black"] .swal2-popup select, body[data-theme="black"] .swal2-popup input, body[data-theme="black"] .modal-content select, body[data-theme="black"] .modal-content input, body[data-theme="black"] .offcanvas select, body[data-theme="black"] .offcanvas input, body[data-theme="black"] .popUp .card.card-style select, body[data-theme="black"] .popUp .card.card-style input { background-color: var(--th-surface-2) !important; color: var(--th-text) !important; border: 1px solid var(--th-border) !important; } /* Password create/change modal (SweetAlert): #swal2-input-password / #swal2-input-confirm-password — dipasangin sama tombol eye .SwalBtn2, jadi di-target langsung by ID biar pasti menang dari style bawaan .swal2-input. */ body[data-theme="black"] .swal2-popup .swal2-input, body[data-theme="black"] #swal2-input-recovery { background-color: transparent !important; background: transparent !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid var(--th-border, rgba(245, 205, 107, 0.45)) !important; box-shadow: var(--th-shadow, 0 0 10px rgba(245, 205, 107, 0.25)) !important; border-radius: 8px !important; } body[data-theme="black"] .swal2-popup .swal2-input::placeholder, body[data-theme="black"] #swal2-input-recovery::placeholder { color: rgba(255, 255, 255, 0.5) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important; } body[data-theme="black"] #swal2-input-recovery:focus { border-color: rgba(241, 202, 118, 0.9) !important; box-shadow: 0 0 12px rgba(241, 202, 118, 0.45) !important; outline: none !important; } body[data-theme="black"] #swal2-input-password, body[data-theme="black"] #swal2-input-confirm-password { background-color: var(--th-surface-2) !important; color: var(--th-text) !important; border: 1px solid var(--th-border) !important; border-right: none !important; } body[data-theme="black"] #swal2-input-password::placeholder, body[data-theme="black"] #swal2-input-confirm-password::placeholder { color: var(--th-text-muted) !important; } /* Margin config popup (SweetAlert): #swal-drop-rate / #swal-buy-amount / #swal-take-profit — HTML-nya nulis atribut class dua kali (class="col-3 rounded-2 border border-dark-subtle" ... class="swal2-input"), browser cuma pakai yang PERTAMA jadi class swal2-input-nya gak pernah nempel — target langsung by ID biar pasti kena. */ body[data-theme="black"] #swal-drop-rate, body[data-theme="black"] #swal-buy-amount, body[data-theme="black"] #swal-take-profit { background-color: var(--th-surface-2) !important; color: var(--th-text) !important; border: 1px solid var(--th-border) !important; } /* ========================================================================= SELECT2 COMPONENTS (tema gelap) ========================================================================= */ /* The selection box itself */ body[data-theme="black"] .select2-container--default .select2-selection--single { background-color: var(--th-surface) !important; border: 1px solid rgba(219, 177, 78, 0.35) !important; border-radius: 5px !important; height: 48px !important; display: flex !important; align-items: center !important; color: var(--th-text) !important; } body[data-theme="black"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--th-text) !important; line-height: 48px !important; } body[data-theme="black"] .select2-container--default .select2-selection--single .select2-selection__rendered span, body[data-theme="black"] .select2-results__option span { color: var(--th-text) !important; } /* Arrow inside selection box */ body[data-theme="black"] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; } body[data-theme="black"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--th-text) transparent transparent transparent !important; } body[data-theme="black"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--th-text) transparent !important; } body[data-theme="black"] .select2-container--default.select2-container--open .select2-selection--single, body[data-theme="black"] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, body[data-theme="black"] .select2-container--default.select2-container--open.select2-container--above .select2-selection--single { border: 1px solid rgba(219, 177, 78, 0.35) !important; border-top: 1px solid rgba(219, 177, 78, 0.35) !important; border-bottom: 1px solid rgba(219, 177, 78, 0.35) !important; border-left: 1px solid rgba(219, 177, 78, 0.35) !important; border-right: 1px solid rgba(219, 177, 78, 0.35) !important; border-radius: 8px !important; border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; } /* Dropdown list panel */ body[data-theme="black"] .select2-dropdown, body[data-theme="black"] .select2-dropdown.select2-dropdown--below, body[data-theme="black"] .select2-dropdown.select2-dropdown--above, body[data-theme="black"] .select2-container--open .select2-dropdown, body[data-theme="black"] .select2-container--open .select2-dropdown--below, body[data-theme="black"] .select2-container--open .select2-dropdown--above { background-color: var(--th-surface) !important; border: 1px solid rgba(219, 177, 78, 0.35) !important; border-top: 1px solid rgba(219, 177, 78, 0.35) !important; border-bottom: 1px solid rgba(219, 177, 78, 0.35) !important; border-left: 1px solid rgba(219, 177, 78, 0.35) !important; border-right: 1px solid rgba(219, 177, 78, 0.35) !important; color: var(--th-text) !important; border-radius: 8px !important; border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important; z-index: 9999999 !important; margin-top: 6px !important; overflow: hidden !important; } body[data-theme="black"] .select2-dropdown.select2-dropdown--above, body[data-theme="black"] .select2-container--open .select2-dropdown--above { margin-top: -6px !important; } /* Option list container */ body[data-theme="black"] .select2-container--default .select2-results__options { background-color: var(--th-surface) !important; padding: 0 !important; } /* Individual option items */ body[data-theme="black"] .select2-container--default .select2-results__option { background-color: transparent !important; color: var(--th-text) !important; padding: 10px 15px !important; border-bottom: 1px solid rgba(219, 177, 78, 0.12) !important; } body[data-theme="black"] .select2-container--default .select2-results__option:last-child { border-bottom: none !important; } /* Highlighted (hovered) option & selected option */ body[data-theme="black"] .select2-container--default .select2-results__option--highlighted[aria-selected], body[data-theme="black"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--th-surface-2) !important; color: var(--th-text) !important; } /* Search input inside Select2 dropdown */ body[data-theme="black"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--th-surface-2) !important; border: 1px solid rgba(219, 177, 78, 0.25) !important; color: var(--th-text) !important; border-radius: 4px !important; } body[data-theme="black"] .form-custom { border-color: var(--th-border) !important; } body[data-theme="black"] .swal2-popup .swal2-confirm, body[data-theme="black"] .dialog-ovelay .dialog .button-danger, body[data-theme="black"] .dialog-ovelay-2 .dialog .button-danger, body[data-theme="black"] .buy-modal-content button[onclick*="Confirm"] { background: var(--th-accent-grad, var(--th-accent)) !important; color: #fff !important; /* Garis + glow disamakan dengan blok tombol primer (black:4514) supaya tombol Kirim di Withdrawal tampil identik dengan "Credit Withdrawal". Sebelumnya di sini `box-shadow: 0 0 15px var(--th-shadow)` — dan itu TIDAK PERNAH menghasilkan apa pun: `--th-shadow` isinya bukan warna, melainkan nilai box-shadow utuh (`0 0 10px rgba(241,202,118,0.2)`), jadi hasil substitusinya `0 0 15px 0 0 10px rgba(...)` alias deklarasi tidak valid dan dibuang browser. Itu sebabnya tombolnya emas tapi tanpa glow. Selector ini (0,3,2) menang atas blok tombol primer, jadi memperbaiki `[onclick*="ConfirmWithdrawal"]` saja tidak pernah kelihatan. */ border: 1px solid #ffb72a !important; box-shadow: var(--th-btn-primary-shadow) !important; } body[data-theme="black"] .swal2-popup .swal2-cancel, body[data-theme="black"] .dialog-ovelay .dialog .button-default, body[data-theme="black"] .dialog-ovelay-2 .dialog .button-default, body[data-theme="black"] .popUp .card.card-style .border-dark-dark, body[data-theme="black"] .buy-modal-content button[onclick*="Close"] { background: var(--th-surface-2) !important; color: var(--th-text) !important; border: 1px solid var(--th-border) !important; } /* SweetAlert Validation Message */ body[data-theme="black"] .swal2-validation-message, body[data-theme="black"] .swal2-popup .swal2-validation-message { background: rgba(245, 205, 107, 0.12) !important; border: 1px solid rgba(245, 205, 107, 0.45) !important; color: var(--th-accent-2, #F5CD6B) !important; -webkit-text-fill-color: var(--th-accent-2, #F5CD6B) !important; border-radius: 8px !important; padding: 10px 14px !important; margin: 14px auto 8px auto !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: 0 0 14px rgba(245, 205, 107, 0.25) !important; } body[data-theme="black"] .swal2-validation-message::before, body[data-theme="black"] .swal2-popup .swal2-validation-message::before { background-color: #ff5252 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 700 !important; } /* Link "Bagaimana cara menemukan ID Transaksi saya?" di Recovery Swal -> Gold Black */ body[data-theme="black"] #recharge-recovery-swal a, body[data-theme="black"] #recharge-recovery-swal a[onclick*="CallGitbook"], body[data-theme="black"] #recharge-recovery-swal [style*="924be1"], body[data-theme="black"] .swal2-popup a[onclick*="CallGitbook"], body[data-theme="black"] .recovery-gitbook-link { color: var(--th-accent-2, #F5CD6B) !important; -webkit-text-fill-color: var(--th-accent-2, #F5CD6B) !important; text-decoration: underline !important; } /* Custom Modals (Jenis Entri, Penyeimbangan, Parsial) — padanan blok .buy-modal-content di tema elite, warnanya pakai palet black. Base-nya `background-color: #fff`, jadi tanpa ini modal-nya putih polos. */ body[data-theme="black"] .buy-modal-content { background-color: var(--th-surface) !important; border: 1px solid var(--th-border) !important; box-shadow: var(--th-shadow) !important; border-radius: 12px !important; } body[data-theme="black"] .buy-modal-content .color-theme, body[data-theme="black"] .buy-modal-content .color-theme b { color: var(--th-text) !important; } /* Divider di atas tombol (inline abu-abu) diselaraskan ke garis emas tipis */ body[data-theme="black"] .buy-modal-content [style*="border-top"] { border-top-color: var(--th-border) !important; } /* Opsi list di dalam modal */ body[data-theme="black"] .list-group-item.list-cycle, body[data-theme="black"] .list-group-item.list-partial, body[data-theme="black"] .list-group-item.list-active { background-color: transparent !important; color: var(--th-text) !important; border-color: rgba(241, 202, 118, 0.2) !important; } body[data-theme="black"] .list-group-item.list-cycle.active, body[data-theme="black"] .list-group-item.list-partial.active, body[data-theme="black"] .list-group-item.list-active.active { background-color: rgba(241, 202, 118, 0.18) !important; color: var(--th-accent-2) !important; border-color: var(--th-border) !important; } body[data-theme="black"] .badge-shine-wrapper.shine-active::after { content: ""; position: absolute; top: 0; left: -100%; width: 30%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine-sweep 5s cubic-bezier(0.4, 0, 0.2, 1) infinite; pointer-events: none; /* Prevent blocking clicks */ } /* Starburst animation untuk Username H3 di Black theme */ body[data-theme="black"] .page-title .logged-in h3 { position: relative !important; display: inline-block !important; z-index: 3 !important; } /* black-starburst-glow (dikomentar): body[data-theme="black"] .black-starburst-glow { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; margin-top: -70px; margin-left: -70px; background: radial-gradient(circle, rgba(255, 215, 0, 0.35) 0%, rgba(218, 165, 32, 0.12) 50%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 1; animation: blackGlowPulse 3s ease-in-out infinite; } @keyframes blackGlowPulse { 0%, 100% { transform: scale(0.85); opacity: 0.4; } 50% { transform: scale(1.25); opacity: 0.85; } } */ body[data-theme="black"] .black-starburst-glow { display: none !important; } /* Posisi tiap bintang dikunci di sekitar username lewat --tx/--ty (dihitung di initBlackStarburst dari ukuran h3-nya). Bintangnya TIDAK berpindah — yang beranimasi cuma kedipannya, jadi transform dasarnya ikut dipasang di sini supaya posisinya tetap benar sebelum animasi mulai. */ body[data-theme="black"] .page-title .logged-in h3 .starburst-star { position: absolute; top: 50%; left: 50%; pointer-events: none; z-index: 2; opacity: 0; transform: translate(var(--tx), var(--ty)) scale(var(--sc)) rotate(var(--rot)); } body[data-theme="black"] .offcanvas .starburst-star, body[data-theme="black"] #menu-main .starburst-star { display: none !important; } body[data-theme="black"] .star-gold svg path { fill: #ffc56a; } body[data-theme="black"] .star-gold-light svg path { fill: #f3dd8c; } body[data-theme="black"] .star-gold-dark svg path { fill: #ffc56a; } body[data-theme="black"] .star-white svg path { fill: #f3dd8c; } body[data-theme="black"] .star-white-dim svg path { fill: #ffc56a; } body[data-theme="black"] .star-gold { filter: drop-shadow(0 0 4px #ffc56a) drop-shadow(0 0 10px rgba(255,197,106,0.7)); } body[data-theme="black"] .star-gold-light { filter: drop-shadow(0 0 4px #f3dd8c) drop-shadow(0 0 10px rgba(243,221,140,0.7)); } body[data-theme="black"] .star-gold-dark { filter: drop-shadow(0 0 4px #ffc56a) drop-shadow(0 0 10px rgba(255,197,106,0.7)); } body[data-theme="black"] .star-white { filter: drop-shadow(0 0 4px #f3dd8c) drop-shadow(0 0 10px rgba(243,221,140,0.8)); } body[data-theme="black"] .star-white-dim { filter: drop-shadow(0 0 3px #ffc56a) drop-shadow(0 0 8px rgba(255,197,106,0.6)); } /* Kelap-kelip di tempat: skala & opacity naik-turun, plus sedikit puntiran supaya kelihatan berkilau. Posisi (--tx/--ty) tetap sama di semua keyframe. NONAKTIF - animasi lama (bintang menyembur keluar dari tengah username): @keyframes starBurstAnim { 0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(var(--sc)) rotate(var(--rot)); opacity: 0; } } */ @keyframes starTwinkleAnim { 0%, 100% { transform: translate(var(--tx), var(--ty)) scale(calc(var(--sc) * 0.35)) rotate(var(--rot)); opacity: 0.06; } 50% { transform: translate(var(--tx), var(--ty)) scale(var(--sc)) rotate(calc(var(--rot) + 18deg)); opacity: 1; } } body[data-theme="black"] .starburst-star.twinkle { animation: starTwinkleAnim var(--dur) ease-in-out var(--delay) infinite; } /* Hormati preferensi sistem: kalau user minta animasi dikurangi, bintangnya tidak usah berkedip sama sekali. */ @media (prefers-reduced-motion: reduce) { body[data-theme="black"] .starburst-star.twinkle { animation: none !important; opacity: 0.5; } } /* Badge tema di header: statis (tidak berdenyut), sama seperti galaxy & elit */ body[data-theme="black"] #header-theme-badge { position: relative; z-index: 3; } /* --- BLACK THEME --- */ body[data-theme="black"] .btn-primary { background: linear-gradient(135deg, rgba(80, 80, 80, 0.8) 0%, rgba(120, 120, 120, 0.8) 100%) !important; border: 1px solid rgba(200, 200, 200, 0.6) !important; box-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important; } body[data-theme="black"] .btn-fail { background: linear-gradient(135deg, rgba(120, 30, 30, 0.8) 0%, rgba(180, 50, 50, 0.8) 100%) !important; border: 1px solid rgba(180, 50, 50, 0.6) !important; box-shadow: 0 0 10px rgba(180, 50, 50, 0.2) !important; } /* ========================================= CAROUSEL BATCH THEME FIXES ========================================= */ body[data-theme="black"] #carousel-batch .carousel-item { background-color: transparent !important; } /* ========================================= TRADE PAGE THEME FIXES ========================================= */ body[data-theme="black"] #trade-top-divider { display: none !important; } body[data-theme="black"] #vue-tab-asset_credit_info { background-image: var(--th-header-bg-img) !important; background-color: #111111 !important; background-size: cover !important; background-position: center !important; } /* For specific dark themes, show the themed buttons and hide the default ones. */ body[data-theme="black"] .btn-start-theme, body[data-theme="black"] .btn-stop-theme { display: inline-block !important; /* inline-block matches button */ width: 100%; } body[data-theme="black"] .btn-start-default, body[data-theme="black"] .btn-stop-default { display: none !important; } /* Active/inactive state override (toggled from JS on the strategy page). Higher specificity than the theme "show" rule above so it wins. */ body[data-theme="black"] .btn-start-theme.btn-trade-hidden, body[data-theme="black"] .btn-stop-theme.btn-trade-hidden { display: none !important; } body[data-theme="black"] .reset-formula-avg, body[data-theme="black"] .batch-reset-formula-avg, body[data-theme="black"] button[onclick*="InsertNewAddress"], body[data-theme="black"] #regis-phone { background-image: var(--th-btn-stop-img, linear-gradient(135deg, #d84558, #a5303f)) !important; border: 1px solid rgba(255, 110, 130, 0.75) !important; box-shadow: 0 0 16px rgba(216, 69, 88, 0.65), inset 0 3px 5px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(255, 150, 165, 0.25) !important; } body[data-theme="black"] .change-all-btn, body[data-theme="black"] .batch-change-all-btn { background-image: var(--th-btn-pause-img, linear-gradient(135deg, #f7b733, #d98e04)) !important; border: 1px solid rgba(255, 190, 90, 0.75) !important; box-shadow: 0 0 16px rgba(247, 160, 30, 0.65), inset 0 3px 5px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(255, 210, 130, 0.25) !important; } /* Toast (alert.html): di mode tema jangan warna polos, pakai gaya tombol start/pause/stop yang mengkilat; default (non-tema) tetap warna aslinya */ body[data-theme="black"] .alert-warning, body[data-theme="black"] .alert-success, body[data-theme="black"] .alert-error { background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; } /* Warning: pause.png mengkilat */ body[data-theme="black"] .alert-warning { background-image: var(--th-btn-pause-img, linear-gradient(135deg, #f7b733, #d98e04)) !important; border: 1px solid rgba(255, 190, 90, 0.75) !important; box-shadow: 0 0 16px rgba(247, 160, 30, 0.65), inset 0 3px 5px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(255, 210, 130, 0.25) !important; color: #ffffff !important; -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.3); paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } body[data-theme="black"] .alert-warning span, body[data-theme="black"] .alert-warning i { color: #ffffff !important; -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.3); paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Berhasil: start.png mengkilat */ body[data-theme="black"] .alert-success { background-image: var(--th-btn-start-img, linear-gradient(135deg, #24c48d, #1a9e6f)) !important; border: 1px solid rgba(78, 230, 175, 0.75) !important; box-shadow: 0 0 16px rgba(36, 196, 141, 0.65), inset 0 3px 5px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(120, 255, 205, 0.25) !important; } /* Error/gagal: stop.png mengkilat */ body[data-theme="black"] .alert-error { background-image: var(--th-btn-stop-img, linear-gradient(135deg, #d84558, #a5303f)) !important; border: 1px solid rgba(255, 110, 130, 0.75) !important; box-shadow: 0 0 16px rgba(216, 69, 88, 0.65), inset 0 3px 5px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(255, 150, 165, 0.25) !important; } /* Moon Logic icon — themed swap (default untouched). Global: semua img moon-logic-icon diganti versi tema, ukuran ikut konteks masing-masing. */ body[data-theme="black"] img[src*="moon-logic-icon"] { content: url("../../assets/orbit-black/moonlogic.png?v=2"); object-fit: contain; } body[data-theme="black"] img[src*="star-coin"] { content: url("../../assets/orbit-black/star-coin.png"); } /* Ukuran khusus di settings coin detail */ body[data-theme="black"] .settings-item img[src*="moon-logic-icon"] { width: 40px !important; height: 40px !important; } /* Coin detail setting icons — themed swap (elite only; default untouched). avg (balance-scale) reflects ON/OFF via inline color: #36b693=on, #d84558=off. The browser serializes the inline style to rgb(), so match the rgb form too. */ body[data-theme="black"] .settings-item i.fa-balance-scale[style*="36b693"], body[data-theme="black"] .settings-item i.fa-balance-scale[style*="54, 182, 147"], body[data-theme="black"] .settings-item i.fa-balance-scale[style*="d84558"], body[data-theme="black"] .settings-item i.fa-balance-scale[style*="216, 69, 88"], body[data-theme="black"] .settings-item i.fa-tools, body[data-theme="black"] .settings-item i.fa-traffic-light, body[data-theme="black"] .settings-item i.fa-box { display: inline-block; width: 48px; height: 48px; object-fit: contain; vertical-align: middle; } /* Black */ body[data-theme="black"] .settings-item i.fa-balance-scale[style*="36b693"], body[data-theme="black"] .settings-item i.fa-balance-scale[style*="54, 182, 147"] { content: url("../../assets/orbit-black/coin-detail/avg-on.png"); } body[data-theme="black"] .settings-item i.fa-balance-scale[style*="d84558"], body[data-theme="black"] .settings-item i.fa-balance-scale[style*="216, 69, 88"] { content: url("../../assets/orbit-black/coin-detail/avg-off.png"); } body[data-theme="black"] .settings-item i.fa-tools { content: url("../../assets/orbit-black/coin-detail/formula.png"); } body[data-theme="black"] .settings-item i.fa-traffic-light { content: url("../../assets/orbit-black/coin-detail/nonstop.png"); } body[data-theme="black"] .settings-item i.fa-box { content: url("../../assets/orbit-black/coin-detail/partial.png"); } /* Icon "Setting" (formula.html, batch_formula.html) — cuma img src, gak ada id/class, jadi di-swap lewat content: url() per tema. */ body[data-theme="black"] img[src*="setting.png"] { content: url("../../assets/orbit-black/setting.png"); } /* Icon + label grid Settings dibaca di atas video nebula yang ramai, jadi kontrasnya tipis. Pakai tumpukan shadow yang sama dengan judul MOONBOT di leaderboard: satu bayangan jatuh tegas, satu halo gelap lebar untuk memisahkan dari background, satu rim putih tipis untuk menajamkan tepi. Icon pakai drop-shadow supaya bayangannya mengikuti bentuk PNG, bukan kotak elemennya. Offset 0 0 bikin bayangan terpusat di balik icon (tidak jatuh ke bawah), jadi terbaca sebagai halo gelap melingkar, bukan drop shadow. Prefix `#coin-setting` diperlukan: rule gradient icon di black:1255 memakai selector ber-ID plus `filter: drop-shadow(...emas...) !important`, jadi tanpa ID di sini shadow gelapnya kalah dan icon `` tetap tanpa shadow. */ body[data-theme="black"] #coin-setting .settings-item > a > i, body[data-theme="black"] #coin-setting .settings-item > a > img, body[data-theme="black"] .settings-item > a > i, body[data-theme="black"] .settings-item > a > img { filter: drop-shadow(0 0 6px rgba(0, 0, 0, 1)) drop-shadow(0 0 16px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)) !important; } /* Label memakai gradient emas yang di-clip ke teks (-webkit-text-fill-color: transparent), jadi text-shadow justru menembus glyph dan bikin kotor — dipakai drop-shadow yang bekerja pada hasil render, bukan pada glyph. */ body[data-theme="black"] .settings-item .btn-xs h6, body[data-theme="black"] .settings-item .btn-xs .color-theme { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 1)) drop-shadow(0 0 12px rgba(0, 0, 0, 0.9)) !important; } /* Gradient label dicerahkan: emas gelap #DBB14E di ujung bawah bikin separuh huruf redup di atas background nebula. Titik akhirnya dinaikkan ke emas terang dan porsi putihnya diperlebar. */ body[data-theme="black"] #coin-setting .settings-item h6, body[data-theme="black"] #coin-setting .settings-grid h6, body[data-theme="black"] #coin-setting .settings-grid2 h6 { background: linear-gradient(180deg, #FFFFFF 0%, #FFFDE3 42%, #FFDD93 76%, #F5CD6B 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ========================================================================= PROFIT SUMMARY — card atas selebar card list; tabel menyatu dengan card (desain mengikuti tabel credit info); kolom profit hijau tema ========================================================================= */ /* Card "Profit Summary List": samakan dengan card "All Time Profit" di atas (inset 15px kiri-kanan, radius penuh) */ body[data-theme="black"] #user-profit-summary .card.card-style { margin: 0 !important; border-radius: 0px !important; border: none !important; box-shadow: none !important; } /* Tabel di dalam card list: full selebar card, tanpa border/box sendiri */ body[data-theme="black"] #user-profit-summary .card .content { background-color: transparent !important; border: none !important; border-radius: 0px !important; box-shadow: none !important; margin: 0 !important; } /* Nilai profit positif (inline #36b693) -> hijau tema; match hex & rgb */ body[data-theme="black"] #user-profit-summary h5[style*="#36b693"], body[data-theme="black"] #user-profit-summary h5[style*="54, 182, 147"] { color: var(--th-green, #4EBA5D) !important; } /* ========================================================================= DATEPICKER (bootstrap-datepicker) — dipakai di modal Select Date (asset / bonus / profit / profit-summary / roi). Default: hover #eee, active biru #006dcc -> ganti ke ungu/aksen tema. ========================================================================= */ /* Judul "Select Date" (inline color abu #545454) & teks switch/arrow */ body[data-theme="black"] .modal .datepicker .datepicker-switch, body[data-theme="black"] .modal .datepicker .prev, body[data-theme="black"] .modal .datepicker .next, body[data-theme="black"] .modal .datepicker .dow, body[data-theme="black"] .modal .datepicker table tr td, body[data-theme="black"] .modal .datepicker table tr td span { color: var(--th-text, #FDFDFE) !important; } body[data-theme="black"] .modal-header h2[style*="color: rgb(84, 84, 84)"], body[data-theme="black"] .modal-header h2[style*="color:#545454"] { color: var(--th-text, #FDFDFE) !important; } /* Tanggal bulan lain / disabled -> muted */ body[data-theme="black"] .modal .datepicker table tr td.old, body[data-theme="black"] .modal .datepicker table tr td.new, body[data-theme="black"] .modal .datepicker table tr td span.old, body[data-theme="black"] .modal .datepicker table tr td span.new, body[data-theme="black"] .modal .datepicker table tr td.disabled, body[data-theme="black"] .modal .datepicker table tr td span.disabled { color: var(--th-text-hint, #646361) !important; } /* Hover / focused (default #eee) -> ungu tema jelas terlihat */ body[data-theme="black"] .modal .datepicker table tr td.day:hover, body[data-theme="black"] .modal .datepicker table tr td.day.focused, body[data-theme="black"] .modal .datepicker table tr td span:hover, body[data-theme="black"] .modal .datepicker table tr td span.focused, body[data-theme="black"] .modal .datepicker .datepicker-switch:hover, body[data-theme="black"] .modal .datepicker .prev:hover, body[data-theme="black"] .modal .datepicker .next:hover, body[data-theme="black"] .modal .datepicker tfoot tr th:hover { background: rgba(241, 202, 118, 0.55) !important; background-image: none !important; color: #ffffff !important; border-radius: 6px !important; } body[data-theme="black"] .modal .datepicker table tr td.day:hover, body[data-theme="black"] .modal .datepicker table tr td.day.focused, body[data-theme="black"] .modal .datepicker table tr td span:hover, body[data-theme="black"] .modal .datepicker table tr td span.focused, body[data-theme="black"] .modal .datepicker .datepicker-switch:hover, body[data-theme="black"] .modal .datepicker .prev:hover, body[data-theme="black"] .modal .datepicker .next:hover { background: rgba(241, 202, 118, 0.45) !important; } /* Cell terpilih (active) -> aksen gradient tema penuh */ body[data-theme="black"] .modal .datepicker table tr td.active, body[data-theme="black"] .modal .datepicker table tr td.active:hover, body[data-theme="black"] .modal .datepicker table tr td.active.active, body[data-theme="black"] .modal .datepicker table tr td span.active, body[data-theme="black"] .modal .datepicker table tr td span.active:hover { background: var(--th-accent-grad, #FFC85B) !important; background-image: var(--th-accent-grad, none) !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; box-shadow: var(--th-btn-primary-shadow, 0 0 10px var(--th-shadow)) !important; text-shadow: none !important; } /* Toggle Month/Year: aktif -> aksen tema (default #ad85f3) */ body[data-theme="black"] .asset-filter-date .col-form-label.active, body[data-theme="black"] .profit-filter-date .col-form-label.active, body[data-theme="black"] .profit-summary-filter-date .col-form-label.active, body[data-theme="black"] .history-credit-filter-date .col-form-label.active { background: var(--th-accent-grad, #FFC85B) !important; border: 1px solid var(--th-border-solid, #DBB14E) !important; color: #ffffff !important; box-shadow: var(--th-btn-primary-shadow, 0 0 10px var(--th-shadow)) !important; } /* Toggle non-aktif -> border/teks tema */ body[data-theme="black"] .asset-filter-date .col-form-label, body[data-theme="black"] .profit-filter-date .col-form-label, body[data-theme="black"] .profit-summary-filter-date .col-form-label, body[data-theme="black"] .history-credit-filter-date .col-form-label { color: var(--th-text-muted, #9B9591) !important; border: 1px solid var(--th-border, rgba(241, 202, 118, 0.35)) !important; } /* ========================================= LEADERBOARD (rank-pop-up) — BLACK THEME Assets: ../assets/orbit-black/leaderboard/ (only when the theme is active; default is untouched) ========================================= */ /* Palette (black leaderboard): Base BG #000000 · Modal BG #131313 · Card/Table BG #1B1B1B Border Gold #F1CA76 · Glow Gold #FFC85B · Text Gold #F5CD6B Text Primary #FDFDFE · Text Secondary #9B9591 */ /* Whole card uses the space background image (fallback = Base BG) */ body[data-theme="black"] .ranking-top-up { background: url("../../assets/orbit-black/leaderboard/bg-pg-leaderboard.png") center top / cover no-repeat, #000000 !important; overflow: hidden; } body[data-theme="black"] .ranking-top-up-wrapper { position: relative; border: none !important; box-shadow: 0 0 20px rgba(241, 202, 118, 0.6), 0 0 40px rgba(251, 214, 109, 0.3), inset 0 0 15px rgba(241, 202, 118, 0.4), inset 0 0 30px rgba(251, 214, 109, 0.2) !important; border-radius: 12px; display: block; } body[data-theme="black"] .ranking-top-up-wrapper::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; padding: 2.5px; /* Thicker border for more glow */ background: linear-gradient(185deg, #FEF9A2 15%, #DBB14E 40%, #FDFDFE 60%, #DBB14E 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 10; } /* Header: transparent so the space bg shows through, + podium clipart + glow divider */ body[data-theme="black"] .ranking-top-up-header-container { background: transparent !important; border-bottom: 1px solid rgba(241, 202, 118, 0.35) !important; box-shadow: 0 3px 16px -6px rgba(241, 202, 118, 0.45) !important; } body[data-theme="black"] .ranking-top-up-header-container::before { content: ""; position: absolute; left: 22px; top: 16px; width: 132px; height: 132px; background: url("../../assets/orbit-black/leaderboard/leaderboard-clipart-1.png") center / contain no-repeat; z-index: 2; pointer-events: none; } /* Leaderboard Pill Tabs — Black Theme (GoldBlackHoleCoreTheme) */ body[data-theme="black"] .ranking-top-tab-navigation { background: rgba(24, 18, 12, 0.85) !important; border: 1px solid rgba(241, 202, 118, 0.35) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4) !important; } body[data-theme="black"] .ranking-top-tab { color: #FBFAF8 !important; -webkit-text-fill-color: #FBFAF8 !important; font-family: "PlusJakartaSans", sans-serif !important; font-weight: 700 !important; } body[data-theme="black"] .ranking-top-tab:hover { color: #FBFAF8 !important; -webkit-text-fill-color: #FBFAF8 !important; } body[data-theme="black"] .ranking-top-tab.active { background: linear-gradient(135deg, #E6C483 0%, #B08A4C 100%) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-family: "PlusJakartaSans-Bold", sans-serif !important; font-weight: 800 !important; box-shadow: 0 1px 6px rgba(230, 196, 131, 0.35) !important; } /* Hide clipart medal when AUM tab is active */ body[data-theme="black"] .ranking-top-up-wrapper.tab-aum-active .ranking-top-up-header-container::before { display: none !important; } /* Header in Black Theme when AUM tab is active */ body[data-theme="black"] .ranking-top-up-wrapper.tab-aum-active .ranking-top-up-header-container { background: transparent !important; background-image: none !important; border-bottom: 1px solid rgba(241, 202, 118, 0.35) !important; } /* AUM Hall of Fame in Black Theme (GoldBlackHoleCoreTheme) */ body[data-theme="black"] .ranking-aum-subtitle { color: #FFFBF0 !important; } body[data-theme="black"] .ranking-aum-title { color: #F6DEAE !important; } body[data-theme="black"] .ranking-aum-divider { background: #E3B566 !important; box-shadow: 0 0 10px rgba(227, 181, 102, 0.7) !important; } body[data-theme="black"] .aum-body-container { background-color: transparent !important; } body[data-theme="black"] .aum-tier-card { background: rgba(16, 14, 10, 0.8) !important; border: 1px solid rgba(241, 202, 118, 0.45) !important; box-shadow: 0 0 6px rgba(241, 202, 118, 0.25) !important; } body[data-theme="black"] .aum-tier-badge { background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%) !important; border-right: 1px solid rgba(241, 202, 118, 0.25) !important; } /* Tier accents for Black (ORBIT_AUM_TIER_ACCENTS) */ body[data-theme="black"] .aum-tier-card.tier-black .aum-tier-badge { border-left-color: #FCD570 !important; } body[data-theme="black"] .aum-tier-card.tier-galaxy .aum-tier-badge { border-left-color: #E6EAF0 !important; } body[data-theme="black"] .aum-tier-card.tier-elite .aum-tier-badge { border-left-color: #B84AFB !important; } body[data-theme="black"] .aum-tier-card.tier-prime .aum-tier-badge { border-left-color: #29F05F !important; } body[data-theme="black"] .aum-tier-card.tier-one .aum-tier-badge { border-left-color: #02CFFA !important; } /* Top-left inner glow on tier badge, tinted by tier accent */ body[data-theme="black"] .aum-tier-card.tier-black { --aum-accent-rgb: 252, 213, 112; } body[data-theme="black"] .aum-tier-card.tier-galaxy { --aum-accent-rgb: 230, 234, 240; } body[data-theme="black"] .aum-tier-card.tier-elite { --aum-accent-rgb: 184, 74, 251; } body[data-theme="black"] .aum-tier-card.tier-prime { --aum-accent-rgb: 41, 240, 95; } body[data-theme="black"] .aum-tier-card.tier-one { --aum-accent-rgb: 2, 207, 250; } body[data-theme="black"] .aum-tier-badge { background: radial-gradient(circle at 0% 0%, rgba(var(--aum-accent-rgb, 255, 255, 255), 0.12) 0%, rgba(var(--aum-accent-rgb, 255, 255, 255), 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%) !important; box-shadow: inset 4px 4px 10px -8px rgba(var(--aum-accent-rgb, 255, 255, 255), 0.35) !important; } body[data-theme="black"] .aum-tier-label { color: #E9CE99 !important; -webkit-text-fill-color: #E9CE99 !important; } body[data-theme="black"] .aum-tier-name { color: #E9CE99 !important; -webkit-text-fill-color: #E9CE99 !important; } body[data-theme="black"] .aum-rank-row:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Divider colors (|) */ body[data-theme="black"] .aum-rank-sep.rank-sep-1 { color: #FCE7B2 !important; } body[data-theme="black"] .aum-rank-sep.rank-sep-2 { color: #BABABA !important; } body[data-theme="black"] .aum-rank-sep.rank-sep-3 { color: #FCE6B4 !important; } /* Name colors */ body[data-theme="black"] .aum-rank-username.rank-1-text { color: #F6DA6A !important; font-weight: 800; } body[data-theme="black"] .aum-rank-username.rank-2-text { color: #CECED0 !important; font-weight: 700; } body[data-theme="black"] .aum-rank-username.rank-3-text { color: #F0B04A !important; font-weight: 700; } /* AUM wallpaper when AUM tab is active */ body[data-theme="black"] .ranking-top-up.tab-aum-active, body[data-theme="black"] .ranking-top-up:has(.tab-aum-active) { background: url("../../assets/orbit-black/aum-wp.png") center top / cover no-repeat, #100d06 !important; } /* Footer divider, text, and link */ body[data-theme="black"] .aum-footer-notes { border-top: 1px solid rgba(241, 202, 118, 0.2) !important; } body[data-theme="black"] .aum-footer-notes p, body[data-theme="black"] .aum-footer-note-text { color: #979795 !important; opacity: 1 !important; } body[data-theme="black"] .aum-footer-notes a, body[data-theme="black"] .aum-footer-link { color: #DAC189 !important; } /* Monthly Leaderboard name colors in Black theme */ body[data-theme="black"] .table-rank-pop-up .text-shine-gold, body[data-theme="black"] .table-rank-pop-up span[style*="fdc846"], body[data-theme="black"] .table-rank-pop-up span[style*="253, 200, 70"] { color: #F6DA6A !important; -webkit-text-fill-color: #F6DA6A !important; } body[data-theme="black"] .table-rank-pop-up .text-shine-silver, body[data-theme="black"] .table-rank-pop-up span[style*="737279"], body[data-theme="black"] .table-rank-pop-up span[style*="115, 114, 121"] { color: #CECED0 !important; -webkit-text-fill-color: #CECED0 !important; } body[data-theme="black"] .table-rank-pop-up .text-shine-bronze, body[data-theme="black"] .table-rank-pop-up span[style*="bd890b"], body[data-theme="black"] .table-rank-pop-up span[style*="189, 137, 11"] { color: #F0B04A !important; -webkit-text-fill-color: #F0B04A !important; } /* Header title. "MOON" (teks milik

sendiri) disamakan dengan "TOP 20": emas solid, bukan gradient — gradient bikin "MOON" terlihat beda berat/warna dari span di sebelahnya. */ body[data-theme="black"] .ranking-top-up-header-title { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; text-shadow: none !important; filter: drop-shadow(0 4px 6px rgba(0,0,0,1)) drop-shadow(0 0 15px rgba(0,0,0,0.9)) drop-shadow(0 0 2px rgba(255,255,255,0.3)) !important; /* style.css memberi 600 pada family `PlusJakartaSans`, dan family itu hanya punya SATU file (PlusJakartaSans-Medium.woff) — jadi 600/700 di situ cuma bold sintetis yang tipis. Dipindah ke family `PlusJakartaSans-Bold` yang memuat file Bold asli, lalu 800 untuk tebal ekstra. */ font-family: "PlusJakartaSans-Bold", sans-serif !important; font-weight: 800 !important; position: relative; z-index: 1; } /* Aura gelap/lembut khusus di belakang MOONBOT agar lebih menonjol (tanpa kotak kaku) */ body[data-theme="black"] .ranking-top-up-header-title::before { content: ""; position: absolute; top: -50%; bottom: -5%; left: -5%; width: 70%; /* Hanya menutupi sekitar tulisan MOONBOT */ /* Untuk mengatur seberapa gelap, ubah angka 0.4 di bawah ini (0.0 = transparan, 1.0 = hitam pekat) */ background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 70%); z-index: -1; pointer-events: none; -webkit-background-clip: border-box !important; background-clip: border-box !important; } body[data-theme="black"] .ranking-top-up-header-title span { font-family: "PlusJakartaSans-Bold", sans-serif !important; font-weight: 800 !important; } /* Subtitle "MONTHLY LEADERBOARD" -> putih bersih, tanpa tint emas */ body[data-theme="black"] .ranking-top-up-header-subtitle { color: #ffffff !important; -webkit-text-fill-color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,1) !important; } /* "BOT" -> Putih solid */ body[data-theme="black"] .ranking-top-up-header-title span[style*="#fff"], body[data-theme="black"] .ranking-top-up-header-title span[style*="255, 255, 255"] { -webkit-text-fill-color: #FFFFFF !important; color: #FFFFFF !important; } /* "TOP 20" -> Gold Accent (tetap solid emas) */ body[data-theme="black"] .ranking-top-up-header-title span[style*="fdc846"], body[data-theme="black"] .ranking-top-up-header-title span[style*="253, 200, 70"] { -webkit-text-fill-color: #FFC85B !important; color: #FFC85B !important; } /* Body panel (inline background-color:white) -> transparent so the bg shows */ body[data-theme="black"] .ranking-top-up div[style*="background-color: white"] { background-color: transparent !important; } /* Table -> Card/Table BG @10% + shiny gold border, rounded 5px, margin-top 10px */ body[data-theme="black"] .table-rank-pop-up { background-color: rgba(19, 19, 19, 0.75) !important; border: 1px solid rgba(241, 202, 118, 0.55) !important; border-radius: 5px !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden !important; margin-top: 10px !important; box-shadow: 0 0 14px rgba(241, 202, 118, 0.30), inset 0 0 12px rgba(241, 202, 118, 0.10); } body[data-theme="black"] .th-rank-pop-up { color: #fdfdfe !important; border-bottom: 1px solid rgba(241, 202, 118, 0.35) !important; } body[data-theme="black"] .td-rank-pop-up { color: #fdfdfe !important; } /* Subtle row separators */ body[data-theme="black"] .table-rank-pop-up tbody tr td { border-bottom: 1px solid rgba(241, 202, 118, 0.2) !important; } body[data-theme="black"] .table-rank-pop-up tbody tr:last-child td { border-bottom: none !important; } /* "Trailing Profit :" label -> Text Primary */ body[data-theme="black"] .ranking-top-up td.ps-1 { color: #fdfdfe !important; } /* Footnotes + empty-state -> Text Secondary */ body[data-theme="black"] .ranking-top-up li, body[data-theme="black"] .ranking-top-up tbody p, body[data-theme="black"] .ranking-top-up .bi-ban { color: #9b9591 !important; } /* Link "Pro/P+" di footnote itu satu-satunya sisa ungu tema default di panel ini: markup-nya inline `color: #924be1` (rank-pop-up.html), DAN index.html menyetel ulang warnanya lewat jQuery saat profil dimuat. jQuery menyerialkan nilainya jadi `rgb(146, 75, 225)`, bukan `#924be1`, jadi kedua bentuk harus disebut — pola yang sama dipakai tombol sort di ~baris 842. `!important` wajib karena yang dilawan adalah inline style. Varian abu (#6c757d) yang dipasang untuk akun investor sengaja TIDAK ikut diemaskan: itu penanda bahwa tombol upgrade-nya tidak berlaku. */ body[data-theme="black"] #button-upgrade-rank[style*="924be1"], body[data-theme="black"] #button-upgrade-rank[style*="146, 75, 225"] { color: var(--th-accent-2, #F5CD6B) !important; } /* Close button visible on dark and styled for black */ body[data-theme="black"] .button-close-banner { border: 2px solid transparent !important; background: linear-gradient(#000000, #000000) padding-box, linear-gradient(180deg, #f5cd6b 0%, #fdfdfe 50%, #f5cd6b 100%) border-box !important; box-shadow: 0 0 14px rgba(241, 202, 118, 0.7), inset 0 0 8px rgba(241, 202, 118, 0.3); right: 25px !important; top: 25px !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center; justify-content: center; border-radius: 50% !important; } body[data-theme="black"] .button-close-banner .btn-close { filter: none !important; opacity: 1 !important; background-image: none !important; background-color: #fdfdfe !important; -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 14px 14px no-repeat; width: 14px; height: 14px; border: none; padding: 0; margin: 0; float: none !important; } /* Rank medals 1/2/3 (emoji spans in the rank cell) -> themed images */ body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="fdc846"], body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="253, 200, 70"] { content: url("../../assets/orbit-black/leaderboard/rank-1.png"); } body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="737279"], body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="115, 114, 121"] { content: url("../../assets/orbit-black/leaderboard/rank-2.png"); } body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="bd890b"], body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="189, 137, 11"] { content: url("../../assets/orbit-black/leaderboard/rank-3.png"); } body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="fdc846"], body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="253, 200, 70"], body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="737279"], body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="115, 114, 121"], body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="bd890b"], body[data-theme="black"] .td-rank-pop-up.d-flex span[style*="189, 137, 11"] { width: auto !important; height: 26px !important; vertical-align: middle; } /* Trailing shields -> themed shields */ body[data-theme="black"] .ranking-top-up img[src*="security-shield.png"] { content: url("../../assets/orbit-black/leaderboard/trail-off.png"); } body[data-theme="black"] .ranking-top-up img[src*="security-shield-red"] { content: url("../../assets/orbit-black/leaderboard/trail-on.png"); } body[data-theme="black"] .ranking-top-up img[src*="security-shield"] { width: auto !important; height: 22px !important; } /* ========================================= ROI LOADER DYNAMIC THEME ========================================= */ body[data-theme="black"] #roiLoader { background: rgba(0, 0, 0, 0.9) !important; } body[data-theme="black"] #roiLoader .spinner-border-custom { color: var(--th-accent) !important; } body[data-theme="black"] #roiLoader .color-purple { color: var(--th-text) !important; } body[data-theme="black"] .roi-powered-by { background-color: var(--th-surface-deep, var(--th-surface, var(--th-bg))) !important; } /* ========================================= ROI BACKGROUND & LOGO DYNAMIC THEME ========================================= */ /* Lapisan gelap di atas aset background supaya kartu & teks ROI lebih menonjol (aset bg-pg-roi.png cukup terang di bagian nebula emasnya). Ditumpuk sebagai background-image kedua, bukan overlay elemen, supaya ikut ter-render saat kartu di-snapshot html2canvas. */ body[data-theme="black"] #capture { background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../../assets/orbit-black/bg-pg-roi.png") !important; background-size: cover, cover !important; background-position: center, center !important; background-repeat: no-repeat, no-repeat !important; } /* Memakai varian -128: aslinya 2048x2048 / 3.9 MB padahal dirender 60x60 (elite pakai 128x128 / 22 KB). Selain boros di halaman, snapshot share harus mengubahnya jadi data URI ~5 MB dan itu membuat export menggantung. File 2048px-nya sengaja TIDAK dihapus, kalau-kalau dipakai di tempat lain. */ body[data-theme="black"] .roi-card-logo { content: url("../../assets/orbit-black/moonbot-roi-icon-128.png"); filter: drop-shadow(0 0 8px rgba(241, 202, 118, 0.65)) drop-shadow(0 0 16px rgba(251, 234, 157, 0.35)) !important; } body[data-theme="black"] #capture h1 { color: #FDFDFE !important; text-shadow: 0 0 10px #F5CD6B, 0 0 4px #DBB14E !important; } /* ========================================= ROI CARDS — elegant gold glow style (transparent) ========================================= */ body[data-theme="black"] #capture .card-roi-bg { background: transparent !important; border-radius: 14px !important; padding: 0 !important; /* No padding needed for border wrapper if we use actual border */ border: 1px solid rgba(219, 177, 78, 0.7) !important; /* Glow luar dikecilkan — dua lapis sebelumnya (12px/0.6 + 24px/0.4) menumpuk dengan cahaya di aset background sehingga tepi kartu terlihat berpendar tebal. Isian dalamnya (inset) dibiarkan supaya kartu tetap hangat. */ box-shadow: 0 0 6px rgba(241, 202, 118, 0.28), 0 0 14px rgba(219, 177, 78, 0.16), inset 0 0 30px rgba(241, 202, 118, 0.3), inset 0 0 60px rgba(219, 177, 78, 0.2) !important; } body[data-theme="black"] #capture .card-content { background: rgba(0, 0, 0, 0.45) !important; /* more transparent */ border-radius: 12px !important; box-shadow: inset 0 0 40px rgba(241, 202, 118, 0.1) !important; padding: 1rem !important; /* compensate for removing padding from wrapper if needed, wait, card-content already has padding? */ } /* Text Styles */ body[data-theme="black"] #capture .roi-title-text, body[data-theme="black"] #capture .main-roi-title, body[data-theme="black"] #capture .roi-value-text, body[data-theme="black"] #capture .roi-total-title, body[data-theme="black"] #capture .roi-asset-title { background-image: linear-gradient(to top, #DCA93E 0%, #FFFFFF 100%) !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: none !important; /* Hilangkan shadow bawaan ungu dll */ } body[data-theme="black"] #capture .roi-summary-text { color: #A0A0A0 !important; } body[data-theme="black"] #capture .roi-value-text { /* Mempertahankan glow pada angka utama tanpa merusak teks transparan */ filter: drop-shadow(0 0 6px rgba(245, 205, 107, 0.4)); } body[data-theme="black"] #capture .main-roi-title { /* Shadow gelap terpusat (pola yang sama dengan judul MOONBOT di leaderboard dan icon grid Settings): memisahkan judul dari cahaya emas di background, bukan menambah glow emas di atas teks yang sudah emas. */ filter: drop-shadow(0 0 6px rgba(0, 0, 0, 1)) drop-shadow(0 0 16px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.25)); } body[data-theme="black"] #capture .roi-notes { font-size: 11px !important; /* Dot bawaan (list-style: disc inline) dimatikan: ::marker tidak menerima text-shadow, jadi glow-nya dibuat lewat ::before di tiap

  • . */ list-style: none !important; } /* Gradient dipasang PER
  • , bukan di