/* ============================================================================ MiningBoard Pool — brand overlay for the MiningCore WebUI (AdminLTE/skin-purple) ---------------------------------------------------------------------------- Loaded LAST in (see render.py apply_branding). Mirrors miningboard.com's "Trading Desk" light tokens and turns the AdminLTE header into a real navbar: logo left · nav links + Login right. Uses !important + `body.skin-purple` specificity because miningcore.css / miningcore-colors.css ship !important rules (purple header, .bg-* utilities) that source order alone can't beat. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { --mb-bg: #f7f8fa; --mb-panel: #ffffff; --mb-panel-elev: #f4f6f8; --mb-text: #1f2328; --mb-muted: #6b7280; --mb-border: #e5e7eb; --mb-accent: #26a69a; --mb-accent-strong: #0e8074; --mb-red: #ef5350; --mb-gold: #b08800; } /* ---- typography ----------------------------------------------------------- */ body, .content-wrapper, .card, .table, .header-text, .info-box, .sidebar-menu, .nav, h1, h2, h3, h4, h5, h6, .btn, p { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important; } .mono, code, pre, kbd, .table td { font-variant-numeric: tabular-nums; } code, pre, kbd { font-family: 'JetBrains Mono', ui-monospace, monospace !important; } /* ---- page + content ------------------------------------------------------- */ body { background-color: var(--mb-bg) !important; color: var(--mb-text) !important; font-weight: 400 !important; } .content-wrapper { background-color: var(--mb-bg) !important; padding-top: 76px !important; } .content { max-width: 1600px; } /* ============================================================================ HEADER → NAVBAR (logo left · links + Login right) ========================================================================== */ body.skin-purple .main-header, body.skin-purple .main-index-header { background-color: var(--mb-panel) !important; max-height: none !important; border-bottom: 1px solid var(--mb-border) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important; } body.skin-purple .main-header .navbar, body.skin-purple .main-index-header .navbar { display: flex !important; align-items: center; gap: .35rem; min-height: 62px; padding: 0 20px !important; border: 0 !important; max-width: 1600px; margin: 0 auto !important; background: transparent !important; } /* logo (left) */ .header-text { float: none !important; order: 0; height: auto !important; line-height: 1 !important; text-align: left !important; padding: 0 !important; overflow: visible !important; color: var(--mb-text) !important; } .main-header .sidebar-toggle, .main-index-header .sidebar-toggle { order: -1; float: none !important; color: var(--mb-muted) !important; background: transparent !important; padding: 8px 10px !important; margin: 0 !important; } .mb-brand-link { display: inline-flex; align-items: center; text-decoration: none !important; } .mb-brand-link:hover { opacity: .88; } .mb-logo { display: inline-flex; align-items: center; gap: .55rem; } .mb-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--mb-accent), var(--mb-accent-strong)); color: #fff !important; font-weight: 800; font-size: 19px; line-height: 1; } .mb-logo-word { font-weight: 700; font-size: 19px; color: var(--mb-text) !important; letter-spacing: -.01em; } .mb-logo-word .mb-pool { color: var(--mb-accent) !important; font-weight: 600; } .mb-logo-sub { color: var(--mb-muted) !important; font-weight: 500; font-size: 11px; margin-left: .5rem; padding-left: .55rem; border-left: 1px solid var(--mb-border); } /* nav links + Login (right) */ .navbar-custom-menu { float: none !important; margin-left: auto !important; } .mb-nav { display: flex !important; flex-direction: row !important; align-items: center; gap: .15rem; margin: 0 !important; padding: 0 !important; } .mb-nav > li { float: none !important; list-style: none; } .mb-nav > li > a { display: block; padding: 8px 13px !important; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--mb-muted) !important; background: transparent !important; line-height: 1; text-decoration: none; } .mb-nav > li > a:hover { background: var(--mb-panel-elev) !important; color: var(--mb-text) !important; } .mb-nav > li > a.mb-login { background: var(--mb-accent) !important; color: #fff !important; padding: 8px 18px !important; margin-left: .45rem; box-shadow: 0 1px 2px rgba(38, 166, 154, .3); } .mb-nav > li > a.mb-login:hover { background: var(--mb-accent-strong) !important; } @media (max-width: 760px) { .mb-nav > li:not(.mb-login-li) { display: none; } .mb-logo-sub { display: none; } body.skin-purple .main-header .navbar, body.skin-purple .main-index-header .navbar { padding: 0 14px !important; } } /* ---- sidebar: white panel, teal active item ------------------------------- */ body.skin-purple .main-sidebar, body.skin-purple .wrapper, body.skin-purple .left-side { background-color: var(--mb-panel) !important; } .main-sidebar::after { display: none !important; } body.skin-purple .sidebar a, .sidebar .logo p, .sidebar .logo .simple-text { color: var(--mb-text) !important; } body.skin-purple .sidebar-menu > li:hover > a, body.skin-purple .sidebar-menu > li.active > a, body.skin-purple .sidebar-menu > li.menu-open > a { background: var(--mb-accent) !important; color: #fff !important; border-left-color: var(--mb-accent-strong) !important; } /* ---- content cards / panels ----------------------------------------------- */ .card { background: var(--mb-panel) !important; color: var(--mb-text) !important; border: 1px solid var(--mb-border) !important; border-radius: .625rem !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .08) !important; } .info-box { background: var(--mb-panel) !important; border: 1px solid var(--mb-border) !important; box-shadow: none !important; } /* hero / welcome card */ .card center { text-align: left !important; } .card center h5 { font-size: 22px !important; font-weight: 700 !important; color: var(--mb-text) !important; letter-spacing: -.01em; } .card p { color: var(--mb-muted) !important; font-size: 15px; line-height: 1.6; } /* ---- tables (MiningBoard data style) -------------------------------------- */ .table { color: var(--mb-text) !important; } .table > thead > tr > th, .table thead th { border-bottom: 1px solid var(--mb-border) !important; border-top: 0 !important; color: var(--mb-muted) !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .03em; } .table > tbody > tr > td, .table td { border-top: 1px solid var(--mb-border) !important; } .table > tbody > tr:hover { background: var(--mb-panel-elev) !important; } /* ---- recolor the AdminLTE palette utilities to MB brand tokens ------------ */ .bg-green, .bg-teal, .bg-aqua, .bg-blue, .bg-light-blue, .bg-primary, .bg-teal-gradient, .bg-aqua-gradient, .bg-blue-gradient, .bg-light-blue-gradient, .callout.callout-info, .label-info, .badge.bg-aqua { background-color: var(--mb-accent) !important; background-image: linear-gradient(135deg, var(--mb-accent), var(--mb-accent-strong)) !important; color: #fff !important; } .bg-red, .bg-maroon, .bg-red-gradient, .bg-maroon-gradient, .label-danger { background-color: var(--mb-red) !important; background-image: none !important; color: #fff !important; } .bg-yellow, .bg-orange, .bg-yellow-gradient, .bg-orange-gradient { background-color: var(--mb-gold) !important; background-image: none !important; color: #fff !important; } .bg-purple, .bg-purple-gradient, .bg-black, .bg-black-gradient { background-color: var(--mb-accent-strong) !important; background-image: none !important; color: #fff !important; } /* ---- links ---------------------------------------------------------------- */ a { color: var(--mb-accent); } a:hover, a:focus { color: var(--mb-accent-strong); } .table a, #pool-coins a { color: var(--mb-accent) !important; } /* ---- buttons -------------------------------------------------------------- */ .btn-info, .btn-info:focus, .btn-info:active, .btn-primary, .card-btn { background-color: var(--mb-accent) !important; border-color: var(--mb-accent-strong) !important; color: #fff !important; } .btn-info:hover, .btn-primary:hover, .card-btn:hover { background-color: var(--mb-accent-strong) !important; border-color: var(--mb-accent-strong) !important; } /* ============================================================================ LANDING CONTENT — hero, supported-coins grid, getting-started steps ========================================================================== */ /* hide the upstream empty/erroring Pool Coins table card — our grid replaces it */ .card:has(#pool-coins) { display: none !important; } .page-index .content-header { display: none !important; } /* redundant MININGCORE h1 */ .mb-hero { padding: 28px 28px 26px !important; } .mb-hero-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--mb-text); margin: 0; } .mb-hero-title .mb-pool { color: var(--mb-accent); } .mb-hero-sub { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--mb-muted) !important; max-width: 760px; } .mb-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .mb-badge { font-size: 12px; font-weight: 600; color: var(--mb-text); background: var(--mb-panel-elev); border: 1px solid var(--mb-border); border-radius: 999px; padding: 6px 13px; } .mb-badge:first-child { background: var(--mb-accent); color: #fff; border-color: var(--mb-accent); } .mb-section-head { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 12px; } .mb-section-head h3 { font-size: 18px; font-weight: 700; color: var(--mb-text); margin: 0; letter-spacing: -.01em; } .mb-section-note { font-size: 12px; color: var(--mb-muted); } .mb-coins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .mb-coins-loading, .mb-coin-empty { color: var(--mb-muted); font-size: 14px; padding: 18px 2px; } .mb-coin-card { background: var(--mb-panel); border: 1px solid var(--mb-border); border-radius: .625rem; padding: 16px 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.08); } .mb-coin-top { display: flex; align-items: center; gap: 11px; } .mb-coin-badge { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--mb-accent), var(--mb-accent-strong)); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; letter-spacing: -.02em; } .mb-coin-name { font-weight: 700; font-size: 16px; color: var(--mb-text); line-height: 1.1; } .mb-coin-algo { font-size: 12px; color: var(--mb-muted); margin-top: 2px; } .mb-coin-live { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(38,166,154,.12); color: var(--mb-accent); } .mb-coin-live.syncing { background: rgba(176,136,0,.12); color: var(--mb-gold); } .mb-coin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 14px; } .mb-coin-stat .k { font-size: 11px; color: var(--mb-muted); text-transform: uppercase; letter-spacing: .03em; } .mb-coin-stat .v { font-size: 14px; font-weight: 600; color: var(--mb-text); font-variant-numeric: tabular-nums; } .mb-coin-stratum { margin-top: 14px; } .mb-coin-stratum .k { font-size: 11px; color: var(--mb-muted); text-transform: uppercase; letter-spacing: .03em; display: block; margin-bottom: 4px; } .mb-coin-stratum code { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; background: var(--mb-panel-elev); border: 1px solid var(--mb-border); border-radius: 7px; padding: 8px 10px; color: var(--mb-text); word-break: break-all; } .mb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .mb-step { display: flex; gap: 13px; background: var(--mb-panel); border: 1px solid var(--mb-border); border-radius: .625rem; padding: 16px 18px; } .mb-step-n { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--mb-accent); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; } .mb-step b { font-size: 15px; color: var(--mb-text); } .mb-step p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--mb-muted) !important; } /* ---- footer: light, small "powered by MiningCore" ------------------------- */ body.skin-purple .main-footer, body.skin-purple .main-index-footer { background-color: var(--mb-panel) !important; border-top: 1px solid var(--mb-border) !important; color: var(--mb-muted) !important; font-weight: 400 !important; } .main-footer a, .main-index-footer a { color: var(--mb-muted) !important; font-weight: 400 !important; } .main-footer a:hover, .main-index-footer a:hover { color: var(--mb-accent) !important; } .mb-foot { color: var(--mb-text) !important; font-weight: 600; } .mb-foot a { color: var(--mb-accent) !important; } .mb-powered { font-size: 11px; color: var(--mb-muted) !important; font-weight: 400; } .mb-powered a { color: var(--mb-muted) !important; } .mb-powered a:hover { color: var(--mb-accent) !important; }